Menu AI 🍽️

Transforma fotografías de menús de restaurantes en menús digitales interactivos usando inteligencia artificial.

Características

• Extracción inteligente de platos: Analiza imágenes de menús y extrae automáticamente los platos con sus ingredientes
• Categorización automática: Agrupa los platos por categorías (Entradas, Platos Principales, Postres, etc.)
• Búsqueda de imágenes reales: Busca fotos reales de los platos usando Tavily API
• Generación de imágenes con IA: Si no encuentra imágenes reales, genera imágenes profesionales con Google Gemini
• Diseño mobile-first: Interfaz optimizada para dispositivos móviles con gestos táctiles
• Animaciones fluidas: Transiciones suaves usando Framer Motion

Demo

Sube una foto de cualquier carta de restaurante y obtén un menú digital interactivo en segundos.

Tecnologías

Backend / IA

• Google Gemini: Extracción de información y generación de imágenes
• Tavily API: Búsqueda de imágenes reales de platos

Frontend

• Next.js 16: Framework React con Server Actions
• React 19: Última versión de React
• TypeScript: Type safety completo
• Tailwind CSS 4: Estilos responsive
• Framer Motion: Animaciones fluidas
• shadcn/ui: Componentes UI base

Instalación

Prerrequisitos

• Node.js 18+ o Bun
• Cuenta de Google Cloud con API de Gemini habilitada
• (Opcional) API Key de Tavily para búsqueda de imágenes

Pasos

1. Clona el repositorio

git clone https://github.com/harold18m/menu-ai.git
cd menu-ai

2. Instala las dependencias

# Con npm
npm install

# Con bun (recomendado)
bun install

3. Configura las variables de entorno

cp .env.example .env

Edita el archivo .env con tus credenciales:

# Google Gemini (requerido)
API_KEY=tu_gemini_api_key

# Tavily API (opcional - para búsqueda de imágenes reales)
TAVILY_API_KEY=tu_tavily_api_key

4. Inicia el servidor de desarrollo

# Con npm
npm run dev

# Con bun
bun dev

5. Abre http://localhost:3000 en tu navegador

Uso

1. Captura o sube una imagen de un menú de restaurante
2. Espera el procesamiento (15-30 segundos aproximadamente)
3. Explora el menú digital navegando por categorías
4. Toca cualquier plato para ver los detalles

Estructura del Proyecto

menu-ai/
├── app/
│   ├── actions/          # Server Actions
│   │   ├── processMenu.ts    # Procesa imagen del menú
│   │   ├── loadMoreDishes.ts # Carga platos adicionales
│   │   └── searchDishImages.ts
│   ├── page.tsx          # Página principal
│   └── globals.css       # Estilos globales
├── components/
│   ├── menu-grouped.tsx  # Vista agrupada por categorías
│   ├── menu-upload.tsx   # Componente de upload
│   ├── dish-carousel.tsx # Carrusel de platos
│   └── ui/               # Componentes UI base
├── lib/
│   ├── services/
│   │   └── gemini.service.ts # Servicio de IA
│   ├── constants/        # Constantes de la app
│   └── types/            # Tipos TypeScript
└── public/               # Assets estáticos

Configuración

Constantes de la Aplicación

Puedes ajustar los parámetros en lib/constants/index.ts:

APP_CONSTANTS = {
  MAX_DISHES_TO_EXTRACT: 5,        // Máximo de platos a procesar inicialmente
  TAVILY_MIN_CONFIDENCE_SCORE: 0.5, // Umbral de confianza para Tavily
  DEFAULT_IMAGE_ASPECT_RATIO: "1:1", // Ratio de imágenes generadas
  DEFAULT_IMAGE_STYLE: "gourmet"    // Estilo de imágenes (gourmet, casual, minimalist, artistic)
}

Estilos de Imagen Disponibles

• gourmet: Iluminación de restaurante de lujo, presentación artística
• casual: Iluminación natural, ambiente relajado
• minimalist: Composición minimalista, fondo neutro
• artistic: Composición creativa, iluminación dramática

API Keys

Google Gemini (Requerido)

1. Ve a Google AI Studio
2. Crea un nuevo proyecto o selecciona uno existente
3. Genera una API Key
4. Añádela como API_KEY en tu .env

Tavily (Opcional)

1. Regístrate en Tavily
2. Obtén tu API Key desde el dashboard
3. Añádela como TAVILY_API_KEY en tu .env

Nota: Sin Tavily, todas las imágenes serán generadas por IA. Con Tavily, el sistema primero busca imágenes reales y solo usa IA como fallback.

Scripts Disponibles

# Desarrollo
npm run dev      # Inicia servidor de desarrollo

# Producción
npm run build    # Compila para producción
npm start        # Inicia servidor de producción

# Calidad de código
npm run lint     # Ejecuta ESLint

Contribuir

¡Las contribuciones son bienvenidas! Por favor lee CONTRIBUTING.md para conocer las guías de contribución.

Ideas para Contribuir

• Añadir soporte para más idiomas
• Mejorar la extracción de precios del menú
• Añadir filtros por alergenos
• Implementar modo offline
• Mejorar el rendimiento de carga de imágenes

Licencia

Este proyecto está bajo la licencia MIT. Ver el archivo LICENSE para más detalles.

Reconocimientos

• Next.js - Framework React
• Google Gemini - IA para extracción y generación
• Tavily - Búsqueda de imágenes
• shadcn/ui - Componentes UI
• Framer Motion - Animaciones

---

Hecho con ❤️ por la comunidad