Lleva tus aplicaciones Flutter al siguiente nivel con Gemini ✦

¿Te imaginas un compañero que sea capaz de acompañarte en tus desarrollos, contenido escrito, pero que también te ayude a mejorar tu negocio? Bueno Gemini ✦ es esto y mucho más. En este artículo daremos respuestas a las siguientes preguntas ¿Quién es Gemini?, ¿por qué debes utilizarlo?, ¿cómo puedes integrarlo en tus aplicaciones Flutter? ¿Afecta el performance? Comencemos juntos a explorar la resolución de estas preguntas.

Imagen Portada

Conoce a Gemini

Dejemos que Gemini se presente:

Gemini Se presenta

Así es Gemini es una plataforma de IA(Inteligencia Artificial) conversacional de Google Cloud .

La puedes usar para conversar y resolver tus inquietudes habituales en tu día a día. Puedes mandarles imágenes y hacerle consultas:

Gemini Responde a algunas preguntas basadas en imágenes

Puedes mandar comandos de voz y ella estará en capacidad de responderte ante los mismos.

También podemos usarla en nuestros desarrollos como asistente:

Gemini trabajando fuertemente

Si deseas iniciar a probar esta genial herramienta puedes ir al siguiente enlace https://gemini.google.com/app.

Gemini Paisa

Ahora surge la pregunta: ¿por qué deberíamos utilizarla como desarrolladores Flutter?

Una gran ayuda para crear aplicaciones inteligentes

Una aplicación inteligente es una aplicación que puede aprender y adaptarse a su entorno, y que puede tomar decisiones por sí misma.

Las aplicaciones inteligentes suelen utilizar una combinación de tecnologías de inteligencia artificial (IA), como el aprendizaje automático, el procesamiento del lenguaje natural y la visión artificial.

Hoy en día las aplicaciones no deberían conformarse únicamente con ser visualmente atractivas sino que también inteligentes.

Para ello deben ofrecernos la posibilidad de tener entradas inteligentes. ¿Qué es una entrada inteligente? Puede ser comandos de voz, imágenes que sean procesadas y capten lo que se desea hacer.

Por otro lado, una app inteligente debería comprender y generar lenguaje natural. Esto es la capacidad de entender el significado de las palabras y frases que los usuarios escriben o dicen y poderles responder con texto familiar para el lenguaje humano.

Si a una aplicación existente le añadimos este tipo de características la experiencia de nuestros clientes es llevada al siguiente nivel.

Por otro lado, pensemos en aquellos que no pueden ver , o tienen su movilidad restringida o limitada ¿Te imaginas la felicidad de tener una aplicación que pueda ser controlada solo con comandos de voz?

Bueno teniendo claro todos estos aspectos, debes estar deseando incorporar este tipo de tecnologías en tus aplicaciones. Y ahí es donde entra Gemini.

Gemini te puede ayudar con los siguientes aspectos:

• Comprensión del lenguaje natural (NLU): Gemini puede comprender el significado de las palabras y frases que los usuarios escriben o dicen. Esto te permite crear una aplicación que pueda responder a las consultas de los usuarios de manera precisa y relevante.
• Generación de lenguaje natural (NLG): Gemini puede generar texto que se lee como si lo hubiera escrito un humano. Esto te permite crear una aplicación que pueda proporcionar respuestas más naturales y atractivas a los usuarios.
• Reconocimiento de voz: Gemini puede reconocer el habla humana. Esto te permite crear una aplicación que pueda ser controlada por voz, lo que la hace más accesible y fácil de usar.
• Personalización: Gemini se puede personalizar para adaptarse a las necesidades específicas de cada aplicación. Esto significa que los desarrolladores de Flutter pueden adaptar Gemini para que se ajuste a la marca, el estilo y la funcionalidad de su aplicación. Por ejemplo, un desarrollador puede personalizar Gemini para que use un vocabulario específico o para que responda a preguntas de una manera particular.

Entonces podemos concluir que Gemini es un gran aliado para llevar nuestras aplicaciones Flutter al siguiente nivel.

Integrando Gemini en nuestras aplicaciones Flutter

Bueno llegó la hora de la verdad vamos a integrar Gemini en nuestra solución.

Afortunadamente el equipo de Google nos ha regalado un paquete que permite una fácil integración con nuestras aplicaciones Flutter:

Este SDK nos permite interactuar con varias de las funcionalidades otorgadas por Gemini con unos sencillos pasos de instalación:

Instalar el paquete en tu proyecto

Si tu proyecto es dart puedes adicionar con este comando:

dart pub add google_generative_ai

Pero si tu proyecto es Flutter puedes ejecutar este comando:

flutter pub add google_generative_ai

Crear una llave de acceso a la API

Bueno este pudo ser el primer paso 🥲, pero es realmente sencillo solo sigue el instructivo de este enlace. ⚠ ️Recuerda esta llave de acceso no la debes compartir no cometas el error de tenerla en un repositorio público.

Configura tu ambiente de trabajo

Donde vayas a utilizar el API deberas implementar la conexión con Gemini una forma sencilla de hacerla sería la siguiente:

Como ves en la línea 2 importamos el paquete de Google Genarative AI. Luego en la función obtenerRespuesta insertamos nuestra configuración que como ven en la línea 6 se hace en una sola línea 🤩.

Ahora bien no queremos configurar la conexión con Gemini cada vez que lo necesitemos, entonces podríamos generar un proveedor de esta configuración. Para este caso utilizaré el InheritedWidget, pero ten presente que en la comunidad existen muchos paquetes geniales que te permiten hacer esto de manera más sencilla y eficiente (riverpod, provider, bloc, etc):

Con esto solo resta configurar el provider en tu widget principal (donde este tu Material App):

Y ya puedes utilizarlo en las pantallas que necesites, haciendo uso del contexto:

Ahora puedes disfrutar de Gemini en tu App y como siempre Flutter con la magia que ha logrado de ser multiplataforma lo puedes disfrutar en web, mobile(iOS, Android) y escritorio(Linux, Windows, MacOs) , es decir seis plataformas diferentes con un solo código 😎.

Ejemplo de Conexión con Gemini Funcionando

Quiero adicionar que si desearas interactuar imágenes utilizando Gemini puedes utilizar el mismo SDK, lo único que cambia es el como configuras el modelo a saber modificando la entrada model por : ‘gemini-pro-vision’:

Ahora este modelo puede recibir una imagen y hacerle preguntas referente a la misma. También puedes comparar entre imágenes. Para adicionar estas funcionalidades modificamos un poco nuestro proveedor:

En el código anterior adicionamos los siguientes métodos:

1. obtenerRespuestaGemini

Propósito: Este método se encarga de enviar una consulta de texto a Gemini y obtener una respuesta generada por la IA.

Pasos:

1. Recibe la entrada de texto: El método toma como argumento una cadena de texto que representa la consulta que se quiere hacer a Gemini.
2. Prepara el contenido: Crea un arreglo llamado content que contiene la entrada de texto en formato Content.text.
3. Envía la consulta a Gemini: Llama al método model.generateContent(content) para enviar la consulta a Gemini y esperar una respuesta.
4. Devuelve la respuesta: Una vez que Gemini responde, el método devuelve la respuesta en forma de cadena de texto utilizando return response.text;.

2. comparadorDeImagenes(String entradaDeTexto, String pathImg1, String pathImg2)

Propósito: Este método se utiliza para comparar dos imágenes y obtener una respuesta de Gemini basada en la comparación y la entrada de texto proporcionada.

Pasos:

1. Carga las imágenes: El método carga las imágenes desde las rutas especificadas en pathImg1 y pathImg2 utilizando rootBundle.load.
2. Convierte las imágenes a bytes: Convierte las imágenes cargadas en arreglos de bytes para poder enviarlas a Gemini.
3. Crea las partes de la consulta: Crea un arreglo llamado imageParts que contiene las imágenes en formato DataPart y la entrada de texto en formato TextPart.
4. Envía la consulta a Gemini: Llama al método modelProvision.generateContent([Content.multi([prompt, ...imageParts])]) para enviar la consulta completa a Gemini, incluyendo las imágenes y el texto.
5. Devuelve la respuesta: Una vez que Gemini responde, el método devuelve la respuesta en forma de cadena de texto utilizando return Future.value(response.text);.

Con esto listo podemos modificar nuestra configuración aplicativa:

Podemos notar que son diferentes tipos de modelo los que comprenden la entrada de texto versus la entrada de imágenes y texto. Ahora solo resta consumir desde la pagina nuestro proveedor e interactuar con estas nuevas funcionalidades:

Ejemplo funcional con entradas de texto más imágenes

Como vez no resulta muy difícil manejar Gemini, en nuestros proyectos Flutter si deseas explorar más te adjunto el enlace para conocer más en detalle la API de esta herramienta genial (ir a la documentación).

Si bien este parte quedó clara. Analicemos que impactos tiene en el rendimiento el uso de Gemini en nuestras aplicaciones.

Analizando impactos en el performance

Ahora nos podemos preguntar que tanto afecta el performance Gemini a nuestras aplicaciones Flutter, para ello ejecutamos las pruebas pertinentes utilizando las herramientas de desarrollador en modo profile. Los resultados son los siguientes:

Proceso de renderizado:

Performance al dibujar widgets en pantalla

No se evidencian afectaciones en el proceso de renderizado, no se evidencian Janks ni elementos que generen alerta.

Tamaño de la aplicación:

Análisis de aumento de tamaño aplicativo después de instalado el sdk

Para el tamaño aplicativo se ve aumentado en 22.8 KB por lo tanto no representa un aumento considerable ni preocupante para nuestras aplicaciones.

Network:

Conexión API Google

En lo referente a la conexión con la API tenemos en promedio de 4.6 segundos aproximadamente en tiempo de espera en respuesta de la API. Lo cual esta entre los tiempos habituales para este tipo de APIs. Se debe tener presente estos tiempos para el diseño de la experiencia de cara al usuario.

Conclusión

En este artículo, hemos explorado el potencial de Gemini ✦ como herramienta para llevar las aplicaciones Flutter al siguiente nivel. Gemini ofrece una amplia gama de funcionalidades, como NLU, NLG, reconocimiento de voz y personalización, que pueden ayudarte a crear aplicaciones más inteligentes, accesibles y atractivas.

Por otro lado, si deseas el código que se empleó a lo largo de este ejemplo, te lo adjunto en el siguiente repositorio:

GitHub - weincoder/gemini-flutter-example: Este repositorio contiene un ejemplo de aplicación…

Si estás interesado en comenzar a usar Gemini ✦, te recomiendo que visites la siguiente documentación: https://ai.google.dev/docs?hl=es-419

En ella encontrarás información detallada sobre cómo instalar el SDK, configurar la conexión con Gemini y utilizar sus diferentes funcionalidades.

¡No esperes más y comienza a explorar el mundo de las aplicaciones inteligentes con Gemini ✦!

Recuerda por favor dejar tus comentarios y aplausos esto contribuye a que sigamos activos en este medio compartiendo contenido para la comunidad 💙.