I/O FLIP es la versión diseñada con IA de un juego de cartas clásico, impulsada por Google y creada para inspirar a los desarrolladores a experimentar con todo lo que es posible gracias a las nuevas tecnologías de IA generativa de Google. Miles de imágenes de personajes personalizadas se generaron previamente con DreamBooth en Muse y sus descripciones se redactaron utilizando la API de PaLM. La interfaz de usuario y el backend del juego se desarrollaron en Flutter y Dart, se utilizó un paquete de herramientas de Firebase para alojar y compartir, y se utilizó Cloud Run para ayudar a escalar.
Cuando un usuario juega I/O FLIP, puede hacer lo siguiente:
Veamos en detalle cómo desarrollamos el juego.
La lógica del juego y la interfaz de usuario de I/O FLIP se compilaron sobre la base de las funciones del conjunto de herramientas de juegos casuales de Flutter, incluida la funcionalidad de audio y la navegación de la app a través del paquete go_router. Dado que FLIP es una aplicación web, era importante que fuera responsiva, que cambiara de tamaño según la pantalla del usuario y que recibiera información de una variedad de dispositivos, móviles, tablets y computadoras de escritorio.
Gran parte de la lógica de FLIP se basa en las cartas de juego, por lo que son un buen punto de partida. Cada carta cuenta con la imagen de una de las cuatro mascotas de Google: Dash, Sparky, Dino y Android, y una descripción, ambas inspiradas en la clase y el poder que el usuario selecciona al comienzo del juego. A las cartas también se les asigna aleatoriamente un poder elemental (aire, agua, fuego, metal, tierra) y un número entre 10 y 100, que indica la fuerza de cada una. Los poderes elementales pueden impactarse entre sí durante el juego, como se indica en la imagen que aparece a continuación.
Los poderes elementales no son solo un adorno. Las cartas reciben una penalización de 10 puntos si quedan colocadas del lado incorrecto en un enfrentamiento de elementos, como se explica en las imágenes que se encuentran más arriba.
Hablando de enfrentamientos, cada partida es al mejor de 3. El ganador continúa jugando con su mano elegida para comenzar (o continuar) su racha, mientras que el perdedor puede compartir su mano o elegir una nueva para volver a intentarlo.
Las nuevas funciones de Flutter y Dart nos ayudaron a darle vida a todo esto rápidamente. Por ejemplo, Records, una función de Dart anunciada en Flutter Forward, nos ayudó a renderizar un marco basado en el elemento de la carta, mientras que con el soporte oficial de Flutter en los sombreadores de fragmentos para la Web creamos un efecto de holograma especial en algunas cartas, las únicas que valen 100 puntos en el juego.
Cada tarjeta de I/O FLIP es única porque contiene una imagen y una descripción generadas por IA.
Las imágenes se pregeneraron utilizando dos tecnologías pioneras de Google Research: Muse, un modelo de IA de texto a imagen de la familia de modelos Imagen, y DreamBooth, una técnica que se ejecuta en Muse y que te permite personalizar modelos de texto a imagen para generar imágenes novedosas de un tema específico utilizando un pequeño conjunto de tus propias imágenes para el entrenamiento.
Los prototipos de las descripciones de las tarjetas se crearon en MakerSuite y se pregeneraron utilizando la API PaLM, que accede a los modelos de lenguaje grande de Google. Según el poder que seleccione el jugador al comienzo del juego, podrá obtener una descripción de la carta que brindará contexto a la imagen, incluidos los poderes especiales del personaje; por ejemplo: “Dash, el hechicero, vive en un castillo con su dragón mascota. Le encanta lanzar hechizos y hacer reír a la gente”. Únete a la lista de espera de PaLM API y MakerSuite aquí.
Flutter se utiliza para crear las cartas a partir de un nombre, una descripción, una imagen y un poder, utilizando el widget GameCard. Una vez creada la carta, se aplica un marco que indica su elemento. Si tienes la suerte de conseguir una tarjeta holográfica, se aplicará al diseño un sombreado con efecto de aluminio.
Cloud Storage para Firebase almacena todas las imágenes, descripciones, elementos y números que generan los mazos de cartas de cada jugador. Firestore realiza un seguimiento de la tabla de clasificación para registrar la “Racha de victorias más larga” y así agregar a los nuevos líderes utilizando el paquete firedart.
En todos los casos en los que la app de Flutter accede directamente a Firestore, utilizamos Verificación de aplicaciones para asegurarnos de que solo se permita el código que nosotros mismos escribimos, y empleamos las pautas de seguridad de Firebase para garantizar que el código solo pueda acceder a los datos y realizar los cambios para los que está autorizado.
I/O FLIP necesitaba más formas de evitar las trampas. En este aspecto, Dart Frog nos resultó muy útil. Nos permitió mantener la lógica del juego, como el ganador de cada ronda, en el backend, pero también compartir este código entre el frontend de Flutter y el backend de Firestore, lo que no solo ayudó a evitar las trampas, sino que también permitió que el equipo avanzara un poco más rápido, ya que escribimos nuestro código de backend y frontend en el mismo idioma.
I/O FLIP es más divertido cuando muchos jugadores están en línea. Con la implementación del servidor de Dart Frog para I/O FLIP en Cloud Run, el juego puede aprovechar funciones como el ajuste de escala automático, que le permite administrar a muchos jugadores a la vez.
Por último, Dart Frog también permite descargar o compartir tarjetas en las redes sociales. Al final de una ronda, el jugador puede elegir descargarlas o compartirlas en Twitter o Facebook. Cuando un usuario hace clic en el botón de compartir, Dart Frog genera una publicación prepropagada que contiene texto para compartir y un vínculo a una página web con la mano o carta correspondiente y un botón para que los visitantes también jueguen.
Esperamos que hayas tenido la oportunidad de probar I/O FLIP y que te haya inspirado a pensar sobre las formas en que puedes aplicar la IA generativa a tus productos de manera segura y responsable. Además, configuramos I/O Flip con código abierto para que puedas echar un mejor vistazo a cómo lo desarrollamos. Si deseas probar algunas de las tecnologías de IA generativa utilizadas en I/O FLIP, conéctate a Google I/O para obtener más información.