Pic2Plate: Crea aplicaciones con IA con Flutter y Gemini

¿Te imaginas poder crear una aplicación que, con solo una foto de tus ingredientes, te sugiera recetas deliciosas y personalizadas? ¡Con Flutter y Gemini, ahora es posible! En este artículo, te mostraré lo fácil que es convertir esta idea en realidad y como lo he implementado en Pic2Plate, el proyecto que dejaré al final del post para que puedas echarle un vistazo.

El poder de Flutter y Gemini

Flutter es un framework de desarrollo móvil que te permite crear aplicaciones nativas para Android, iOS y otras plataformas con una sola base de código. Su facilidad de uso y su gran rendimiento lo convierten en una opción ideal para proyectos que buscan rapidez y eficiencia.

Por otro lado, Gemini es un modelo de IA generativa de Google que aún se encuentra en fase beta, pero que ya está demostrando un enorme potencial. Esta IA puede generar contenido creativo, como recetas, a partir de imágenes y texto.

Al combinar Flutter con Gemini, podemos crear aplicaciones con IA que sean atractivas, intuitivas y que ofrezcan una experiencia de usuario única.

Manos a la obra: construyendo nuestra app

Para este proyecto, usaremos el paquete oficial de Gemini para Flutter: `google_generative_ai`. Este paquete facilita la integración con la API de Gemini y nos permite aprovechar al máximo sus capacidades.

Pasos para crear la aplicación:

1. Obtener una clave de API de Google AI Studio:

• Accede a Google AI Studio (actualmente en beta) y solicita acceso al programa, si tienes suerte de estar en uno de los países soportados. También puedes usar una VPN ;)
• Una vez dentro, crea un nuevo proyecto.
• Genera una clave de API y guárdala de forma segura. Te recomiendo que luego utilices algún paquete para obtener la api key de un .env como el paquete dotenv o obtenerla directamente desde el CLI como en el siguiente tutorial

2. Configurar Flutter:

• Instala Flutter en tu equipo si aún no lo has hecho. En su página oficial puedes seguir los pasos para instalarlo de una forma sencilla
• Crea un nuevo proyecto de Flutter.
• Agrega el paquete `google_generative_ai` a tu archivo `pubspec.yaml` o utiliza el siguiente comando

$ flutter pub add google_generative_ai

3. Diseñar la interfaz de usuario:

En este contexto, necesitamos crear una buena UI que permita al usuario generar las recetas sin tener que conocer nada de prompts ni como usar la AI. Por eso debemos plasmar las siguientes características:

• Seleccionar el número de personas para la receta.
• Especificar el tiempo máximo de cocción.
• Introducir intolerancias o restricciones alimentarias (opcional).
• Subir o tomar una foto de los ingredientes.
• Generar la receta.

Y por supuesto, crear un buen flujo que permita al usuario ir avanzando por nuestra aplicación.

4. Implementar la lógica de la aplicación:

Necesitamos diferenciar claramente 4 apartados de nuestra app

- Utiliza el paquete `google_generative_ai` para interactuar con la API de Gemini. Esto ira en nuestra capa de datos, por lo que abstraeremos todo lo que es la comunicación con el modelo.

- Crea una función que genere una solicitud (prompt) para Gemini, incluyendo la información proporcionada por el usuario (número de personas, tiempo de cocción, etc.). Aquí ira toda la lógica que queramos añadir para definir el prompt y el comportamiento del modelo

- La gestión de recolectar los datos y enviar la solicitud a Gemini y espera la respuesta. En este caso utilizaremos como solución de manejo de estado cubit.

- Toda la UI que permita ir recolectando la configuración del usuario, como los comensales, tiempo, etc… Además, mostrar la receta generada al usuario en un formato legible, como Markdown.

Duet AI: un compañero creativo

Durante el desarrollo de la aplicación, se utilizó Duet AI para el diseño de la interfaz de usuario y la generación de código. Duet AI es una herramienta de IA que puede ayudar a los desarrolladores a ser más eficientes y a crear mejores aplicaciones. Digamos que es la alternativa de Google a Github Copilot, hasta mayo de 2024 la puedes utilizar de forma gratuita, te dejo más información en este post

En mi caso, utilizo VSCode y la integración es bastante buena, tienes algunas acciones directamente integradas en la UI del IDE y también apartados como el chat, donde podrás interactuar con la AI para preguntarle sobre tu código o para que te genere código para tu aplicación.

Gemini Pro Vision: funciones increíbles con imágenes y videos

Gemini Pro Vision lleva las capacidades de Gemini AI al siguiente nivel al permitir la creación de aplicaciones que utilizan imágenes y videos como entrada. Esta característica desbloquea un nuevo mundo de posibilidades para los desarrolladores, permitiéndoles crear aplicaciones que pueden comprender e interactuar con el mundo visual de maneras nunca antes posibles.

Con Gemini Pro Vision, puedes crear aplicaciones que:

• Generen descripciones detalladas de imágenes y videos: Esto puede ser útil para aplicaciones de accesibilidad, aplicaciones educativas y cualquier otra aplicación que necesite comprender el contenido visual.
• Identifiquen objetos y escenas en imágenes y videos: Esto puede ser útil para aplicaciones de búsqueda, aplicaciones de compras y cualquier otra aplicación que necesite clasificar o categorizar contenido visual.
• Generen contenido creativo a partir de imágenes y videos: Esto puede ser útil para aplicaciones de entretenimiento, aplicaciones de marketing y cualquier otra aplicación que necesite crear contenido visual atractivo.

Las posibilidades de Gemini Pro Vision son infinitas y estoy emocionado de ver qué nuevas e innovadoras aplicaciones se crearán con esta tecnología.

Proyecto de código abierto

Después de contarte lo sencillo que es trabajar con Gemini y Flutter, además de algunos consejos y herramientas para que sea mas sencillo, te dejo mi repositorio donde podrás encontrar el código de la aplicación Pic2Plate.

Incluso, si quieres utilizarla, leyendo su readme verás que solo necesitas introducir tu propia API key de Gemini y empezar a utilizarla en tu día a día.

https://github.com/alfredobs97/pic2plate

Agradecimientos al programa GDE por el acceso anticipado a esta herramienta

En primer lugar, me gustaría agradecer al programa Google Developer Experts (GDE) por brindarme acceso anticipado a Gemini AI. Ser parte de esta increíble comunidad me ha permitido experimentar con esta tecnología de y explorar sus posibilidades en el desarrollo de aplicaciones móviles. El apoyo y los recursos proporcionados por el programa GDE son super útiles, además de ayudar a compartir todo este conocimiento con las comunidades. ¡Así que estate atento a siguientes workshops y charlas con Gemini!

¿Necesitas ayuda con Gemini?

Si estás interesado en utilizar Gemini AI para crear tus propias aplicaciones, o si tienes alguna pregunta sobre esta tecnología, no dudes en contactarme en mi Twitter @alfredobs97. Como GDE de Flutter y entusiasta de la IA, estoy aquí para ayudarte a comenzar tu viaje con Gemini AI y a crear aplicaciones increíbles que aprovechen al máximo sus capacidades.