Crie um Aplicativo Web Serverless com IA Generativa

Introdução

Neste artigo, vamos ensinar como criar um aplicativo web serverless utilizando o AWS Amplify e a IA Generativa, empregando Amazon Bedrock e o modelo Claude 3 Sonnet. O aplicativo permite que os usuários insiram uma lista de ingredientes para receber receitas geradas com base nesses ingredientes.

Arquitetura do Aplicativo

O aplicativo é composto por uma interface de usuário baseada em HTML para a inserção de ingredientes e um backend que solicita receitas geradas pela IA.

Implementação

Passo 1: Criar um novo aplicativo React

Inicie um novo projeto React utilizando o comando:

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

Passo 2: Inicializar o repositório no GitHub

Crie um repositório no GitHub chamado ai-recipe-generator e faça o push do aplicativo:

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

Passo 3: Instalar pacotes do Amplify

Digite os seguintes comandos no terminal:

npm create amplify@latest -y

Passo 4: Implantar seu aplicativo com AWS Amplify

Na console do AWS Amplify, clique em create app e selecione o repositório do GitHub.

Passo 5: Configurar autenticação do Amplify

No arquivo resource.ts, atualize com o código a seguir para configurar a autenticação:

import { defineAuth } from "@aws-amplify/backend";
export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailStyle: "CODE",
      verificationEmailSubject: "Welcome to the AI-Powered Recipe Generator!",
      verificationEmailBody: (createCode) => `Use this code to confirm your account: ${createCode()}`,
    },
  },
});

Passo 6: Configurar o acesso ao modelo Amazon Bedrock

1. Faça login no AWS Management Console e acesse o Amazon Bedrock.
2. Escolha o modelo Claude.
3. Solicite acesso ao modelo Claude 3 Sonnet.

Passo 7: Criar uma função Lambda

No diretório ai-recipe-generator/amplify/data, crie um arquivo bedrock.js com a lógica para manipular as requisições:

export function request(ctx) {
    const { ingredients = [] } = ctx.args;
    const prompt = `Suggest a recipe idea using these ingredients: ${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: `

Human: ${prompt}

Assistant:`,
                },
              ],
            },
          ],
        }),
      },
    };
}

Passo 8: Adicionar o Amazon Bedrock como fonte de dados

Atualize o arquivo amplify/backend.ts para conectar a fonte de dados do Bedrock.

Passo 9: Configurar os dados do Amplify

Defina a estrutura de resposta da API no arquivo resource.ts.

Passo 10: Estilizar a interface do aplicativo

Atualize o arquivo index.css com as definições de estilo desejadas.

Conclusão

Ao seguir estes passos, você terá um aplicativo web funcional que utiliza IA Generativa para criar receitas com base em ingredientes fornecidos. No futuro, a integração com serviços de IA continuará a se expandir, oferecendo cada vez mais capacidades e utilidades para desenvolvedores e usuários.