Crea haikus sobre los productos de Google con la API de PaLM y Flutter

1. Antes de comenzar

Uno de los avances más interesantes del aprendizaje automático (AA) es la IA generativa, que puede producir imágenes, textos, audios y hasta videos asombrosos basados en texto simple (o indicaciones) de usuarios. Específicamente, con el lanzamiento de la API de PaLM, Google les da a los desarrolladores la posibilidad de crear categorías de apps con experiencias del usuario encantadoras que se reinventan con la tecnología de PaLM.

En este codelab, crearás una app que use la API de PaLM para generar haikus basados en los nombres de los productos de Google. También puedes usar Flutter para crear una app multiplataforma que muestre los haikus.

Requisitos previos

• Conocimientos básicos de los modelos de lenguaje extensos (LLM), como el uso de indicaciones
• Conocimientos básicos sobre el desarrollo de Flutter con Dart

Qué aprenderás

• Cómo usar la API de PaLM de Google
• Cómo crear una app multiplataforma de Flutter para mostrar los resultados

Requisitos

• El SDK de Flutter
• Un editor de texto, como Visual Studio Code (VS Code)
• Configuración de VS Code para Flutter y Dart
• Configuración de Android o iOS para Flutter (incluidos los emuladores y simuladores)
• Configuración de Flutter para computadoras en Windows, Linux o macOS
• Configuración de Flutter para la Web
• Una clave de API para la API de PaLM

2. Prepárate

Descarga el código de partida

1. Dirígete a este repositorio de GitHub.
2. Haz clic en Code > Download ZIP para descargar todo el código de este codelab.
3. Descomprime el archivo ZIP descargado para desempaquetar una carpeta raíz codelabs-main. Solo necesitas el subdirectorio haiku-generator, que contiene las siguientes carpetas:

• Las carpetas step0 a step4, que contienen el código de partida en el que se basa cada paso de este codelab.
• La carpeta finished, que contiene el código completado de la app de ejemplo finalizada.

Descarga las dependencias del proyecto

1. En VS Code, haz clic en File > Open folder > codelabs-main > haiku_generator > step0 > lib > main.dart.
2. Si ves un diálogo de VS Code en el que se te solicita que descargues los paquetes necesarios para la app de partida, haz clic en Get packages.

3. Si no ves el diálogo de VS Code en el se que te solicita que descargues los paquetes necesarios para la app de partida, abre la terminal y, luego, navega a la carpeta step0 y ejecuta el comando flutter pub get.

Ejecuta la app de partida

1. En VS Code, asegúrate de que Android Emulator o el simulador de iOS estén configurados correctamente y aparezcan en la barra de estado.

Por ejemplo, a continuación, se muestra lo que ves cuando usas un Pixel 5 con Android Emulator:

A continuación, se muestra lo que ves cuando usas un iPhone 13 con el simulador de iOS:

2. Haz clic en Start debugging. La app se inicia en Android Emulator o en el simulador de iOS.

Explora la app de partida

En la app de partida, observa lo siguiente:

• La IU es bastante sencilla.
• Hay un menú desplegable que permite a los usuarios elegir un producto específico de Google.
• Después de que los usuarios seleccionan el botón Generate haiku!, la app de Flutter envía la indicación integrada al extremo de la API de PaLM, que genera haikus.
• La app muestra los haikus generados en el widget de texto después de recibir una respuesta. Sin embargo, si seleccionas Generate haiku!, no ocurrirá nada porque la app aún no puede comunicarse con la API de PaLM.

3. Configura el acceso a la API de PaLM

Necesitas una clave de API para usar la API de PaLM. En el momento de la publicación de este codelab, la API de PaLM todavía se encontraba en versión preliminar privada.

• Para configurar tu acceso a la API de PaLM, sigue la documentación que recibiste para crear una clave de API y, luego, toma nota de la clave para usarla más adelante en este codelab.

4. Agrega un menú de productos de Google

Tu objetivo es generar haikus sobre los productos de Google. Durante el tiempo de ejecución, el usuario de la app puede seleccionar de forma dinámica un producto de una lista prepropagada de nombres de productos.

Sigue estos pasos para agregar una lista de productos de Google a la app:

1. En VS Code, navega al archivo step1/lib/data/repositories/product_repository_impl.dart.
2. En el cuerpo de la función getAllProducts(), agrega la siguiente variable que almacena un array de nombres de productos de Google:

product_repository_impl .dart

var productData = [
  {'productName': 'Google Search'},
  {'productName': 'YouTube'},
  {'productName': 'Android'},
  {'productName': 'Google Maps'},
  {'productName': 'Gmail'}
];

5. Envía la solicitud a la API de PaLM y decodifica la respuesta

El nombre del producto elegido por el usuario se combina con la siguiente plantilla de indicación:

Context: You are an awesome haiku writer.
Message content: Write a cool haiku about {product name}.

Sigue estos pasos para enviar esta solicitud al extremo de la API de PaLM y generar un haiku:

1. En VS Code, navega al archivo step2/lib/data/repositories/poem_repository_impl.dart.
2. En el cuerpo de la función getPoems(), agrega el siguiente código:

poem_repository_impl.dart

const haikuCount = 5;
// Replace the YOUR_API_KEY environment variable placeholder with your API key.
final apiKey = dotenv.env['YOUR_API_KEY']!;
final url = Uri.parse(      'https://generativelanguage.googleapis.com/v1beta1/models/chat-bison-001:generateMessage?key=$apiKey');
final headers = {'Content-Type': 'application/json'};
final body = jsonEncode({
 "prompt": {
   "context": "You are an awesome haiku writer.",
   "examples": [
     {
       "input": {"content": "Write a haiku about Google Photos."},
       "output": {
         "content":
             "Google Photos, my friend\nA journey of a lifetime\nCaptured in pixels"
       }
     }
   ],
   "messages": [
     {"content": "Write a cool haiku of about $productName"}
   ]
 },
 "candidate_count": haikuCount,
 "temperature": 1,
});

try {
 final response = await http.post(url, headers: headers, body: body);
 if (response.statusCode == 200) {
   final decodedResponse = json.decode(response.body);
   String haikus = 'Here are $haikuCount haikus about $productName:\n\n';
   for (var i = 0; i < haikuCount; i++) {
     haikus += '${i + 1}.\n';
     haikus += decodedResponse['candidates'][i]['content'] + '\n\n';
   }
   return haikus;
 } else {
   return 'Request failed with status: ${response.statusCode}.\n\n${response.body}';
 }
} catch (error) {
 throw Exception('Error sending POST request: $error');
}

Reemplaza la variable de entorno YOUR_API_KEY por tu clave de API anterior.

Después de recibir y decodificar la respuesta de forma correcta, el widget de texto de la IU renderiza los haikus generados.

Nota: El campo examples en la carga útil sirve como referencia y le indica a la API cómo generar texto similar. Esto se suele denominar aprendizaje en contexto. Puedes proporcionar varios ejemplos.

En este codelab, no se explica en detalle cómo ajustar las indicaciones ni cómo crearlas, pero hay un campo completo de ingeniería de indicaciones en el que se estudia cómo escribir mejor las indicaciones para modelos de lenguaje extensos (LLM). Para obtener más información, prueba con otras indicaciones y ajusta la IU según corresponda, y consulta recursos adicionales en este dominio emergente.

6. Ejecuta la app en plataformas de dispositivos móviles

1. En VS Code, establece un dispositivo Android o iOS como dispositivo de destino.
2. Haz clic en Start debugging y espera a que se cargue la app.
3. Selecciona un producto del menú desplegable y, luego, selecciona Generate haiku!. La app muestra un haiku sobre el producto seleccionado.

7. Ejecuta la app en plataformas de computadoras

Además de iOS y Android, Flutter también admite plataformas de computadoras, como Linux, macOS y Windows.

Ejecuta la app en Linux

1. En VS Code, establece Linux (linux-x64) como el dispositivo de destino.
2. Haz clic en Start debugging y espera a que se cargue la app.
3. Elige un producto del menú desplegable y selecciona Generate haiku!.

Ejecuta la app en macOS

Para macOS, debes configurar los derechos adecuados porque la app envía solicitudes HTTP al backend. Si necesitas más información al respecto, consulta Derechos y zona de pruebas de apps.

Sigue estos pasos para ejecutar la app en macOS:

1. En los archivos step3/macOS/Runner/DebugProfile.entitlements y step3/macOS/Runner/Release.entitlements, agrega el siguiente código:

DebugProfile.entitlements | Release.entitlements

<key>com.apple.security.network.client</key>
<true/>

2. En VS Code, establece macOS (darwin) como el dispositivo de destino.
3. Haz clic en Start debugging y espera a que se cargue la app.
4. Elige un producto del menú desplegable y selecciona Generate haiku!.

Ejecuta la app en Windows

1. En VS Code, establece Windows (windows-x64) como el dispositivo de destino.
2. Haz clic en Start debugging y espera a que se cargue la app.
3. Elige un producto del menú desplegable y selecciona Generate haiku!.

8. Ejecuta la app en la plataforma web

También puedes agregar compatibilidad web a la app de Flutter. De forma predeterminada, la plataforma web se habilita automáticamente para las apps de Flutter, por lo que solo debes iniciarla.

Sigue estos pasos para ejecutar la app en la plataforma web:

1. En VS Code, establece Chrome (web-javascript) como el dispositivo de destino.
2. Haz clic en Start debugging y espera a que la app se cargue en Google Chrome.
3. Elige un producto del menú desplegable y selecciona Generate haiku!.

9. Felicitaciones

Creaste una app de pila completa que genera haikus sobre los productos de Google. Si bien la app solo genera haikus sobre algunos productos de Google, puedes cambiar la indicación y generar el texto que quieras con facilidad. Ahora que sabes cómo usar la API de PaLM, puedes crear apps asombrosas con el increíble poder de los LLM.

Más información

• API de PaLM y MakerSuite: Una forma accesible de comenzar a crear prototipos y compilar apps de IA generativa
• Flutter