Crea una Aplicación Web Serverless con IA Generativa

Introducción

En este artículo, enseñaremos cómo crear una aplicación web serverless utilizando AWS Amplify y IA Generativa, empleando Amazon Bedrock y el modelo Claude 3 Sonnet. La aplicación permite que los usuarios ingresen una lista de ingredientes para recibir recetas generadas en función de esos ingredientes.

Arquitectura de la Aplicación

La aplicación está compuesta por una interfaz de usuario basada en HTML para la inserción de ingredientes y un backend que solicita recetas generadas por la IA.

Implementación

Paso 1: Crear una nueva aplicación React

Inicia un nuevo proyecto React utilizando el comando:

npm create vite@latest ai-recipe-generator -- --template react-ts -y
cd ai-recipe-generator
npm install
npm run dev

Paso 2: Inicializar el repositorio en GitHub

Crea un repositorio en GitHub llamado ai-recipe-generator y haz push de la aplicación:

git init
git add .
git commit -m "primer commit"
git remote add origin git@github.com:ai-recipe-generator.git
git branch -M main
git push -u origin main

Paso 3: Instalar paquetes de Amplify

Escribe los siguientes comandos en la terminal:

npm create amplify@latest -y

Paso 4: Desplegar tu aplicación con AWS Amplify

En la consola de AWS Amplify, haz clic en crear aplicación y selecciona el repositorio de GitHub.

Paso 5: Configurar autenticación de Amplify

En el archivo resource.ts, actualiza con el código a continuación para configurar la autenticación:

import { defineAuth } from "@aws-amplify/backend";
export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailStyle: "CODE",
      verificationEmailSubject: "¡Bienvenido al Generador de Recetas Potenciado por IA!",
      verificationEmailBody: (createCode) => `Usa este código para confirmar tu cuenta: ${createCode()}`,
    },
  },
});

Paso 6: Configurar el acceso al modelo Amazon Bedrock

1. Inicia sesión en AWS Management Console y accede a Amazon Bedrock.
2. Selecciona el modelo Claude.
3. Solicita acceso al modelo Claude 3 Sonnet.

Paso 7: Crear una función Lambda

En el directorio ai-recipe-generator/amplify/data, crea un archivo bedrock.js con la lógica para manejar las solicitudes:

export function request(ctx) {
    const { ingredients = [] } = ctx.args;
    const prompt = `Sugiere una idea de receta utilizando estos ingredientes: ${ingredients.join(", ")}`;
    return {
      resourcePath: "\/model\/anthropic.claude-3-sonnet-20240229-v1:0\/invoke",
      method: "POST",
      params: {
        headers: {
          "Content-Type": "application\/json",
        },
        body: JSON.stringify({
          anthropic_version: "bedrock-2023-05-31",
          max_tokens: 1000,
          messages: [
            {
              role: "user",
              content: [
                {
                  type: "text",
                  text: `

Humano: ${prompt}

Asistente:`,
                },
              ],
            },
          ],
        }),
      },
    };
}

Paso 8: Añadir Amazon Bedrock como fuente de datos

Actualiza el archivo amplify/backend.ts para conectar la fuente de datos de Bedrock.

Paso 9: Configurar los datos de Amplify

Define la estructura de respuesta de la API en el archivo resource.ts.

Paso 10: Estilizar la interfaz de la aplicación

Actualiza el archivo index.css con las definiciones de estilo deseadas.

Conclusión

Al seguir estos pasos, tendrás una aplicación web funcional que utiliza IA Generativa para crear recetas basadas en ingredientes proporcionados. En el futuro, la integración con servicios de IA continuará expandiéndose, ofreciendo cada vez más capacidades y utilidades para desarrolladores y usuarios.