Créez une application Web sans serveur avec IA générative

Introduction

Dans cet article, nous allons vous montrer comment créer une application Web sans serveur en utilisant AWS Amplify et l'IA générative, en employant Amazon Bedrock et le modèle Claude 3 Sonnet. L'application permet aux utilisateurs de saisir une liste d'ingrédients pour recevoir des recettes générées en fonction de ces ingrédients.

Architecture de l'application

L'application se compose d'une interface utilisateur basée sur HTML pour la saisie des ingrédients et d'un backend qui demande des recettes générées par l'IA.

Implémentation

Étape 1 : Créer une nouvelle application React

Initiez un nouveau projet React en utilisant la commande :

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

Étape 2 : Initialiser le répertoire sur GitHub

Créez un répertoire sur GitHub appelé ai-recipe-generator et poussez l'application :

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

Étape 3 : Installer les paquets Amplify

Saisissez les commandes suivantes dans le terminal :

npm create amplify@latest -y

Étape 4 : Déployer votre application avec AWS Amplify

Dans la console AWS Amplify, cliquez sur create app et sélectionnez le répertoire GitHub.

Étape 5 : Configurer l'authentification Amplify

Dans le fichier resource.ts, mettez à jour avec le code suivant pour configurer l'authentification :

import { defineAuth } from "@aws-amplify/backend";
export const auth = defineAuth({
  loginWith: {
    email: {
      verificationEmailStyle: "CODE",
      verificationEmailSubject: "Welcome to the AI-Powered Recipe Generator!",
      verificationEmailBody: (createCode) => `Utilisez ce code pour confirmer votre compte : ${createCode()}`,
    },
  },
});

Étape 6 : Configurer l'accès au modèle Amazon Bedrock

1. Connectez-vous à la console de gestion AWS et accédez à Amazon Bedrock.
2. Choisissez le modèle Claude.
3. Demandez l'accès au modèle Claude 3 Sonnet.

Étape 7 : Créer une fonction Lambda

Dans le répertoire ai-recipe-generator/amplify/data, créez un fichier bedrock.js avec la logique pour manipuler les requêtes :

export function request(ctx) {
    const { ingredients = [] } = ctx.args;
    const prompt = `Suggérez une idée de recette en utilisant ces ingrédients : ${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: `

Homme : ${prompt}

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

Étape 8 : Ajouter Amazon Bedrock comme source de données

Mettez à jour le fichier amplify/backend.ts pour connecter la source de données Bedrock.

Étape 9 : Configurer les données d'Amplify

Définissez la structure de réponse de l'API dans le fichier resource.ts.

Étape 10 : Styliser l'interface de l'application

Mettez à jour le fichier index.css avec les définitions de style souhaitées.

Conclusion

En suivant ces étapes, vous disposerez d'une application web fonctionnelle qui utilise l'IA générative pour créer des recettes en fonction des ingrédients fournis. À l'avenir, l'intégration avec les services d'IA continuera de s'étendre, offrant de plus en plus de capacités et d'utilités pour les développeurs et les utilisateurs.