
Créez une application Web sans serveur avec IA générative
TL;DR
Cet article explique comment créer une application Web sans serveur en utilisant AWS Amplify et l'IA générative avec Amazon Bedrock et le modèle Claude 3 Sonnet.
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
- Connectez-vous à la console de gestion AWS et accédez à Amazon Bedrock.
- Choisissez le modèle Claude.
- 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.
Contenu selectionne et edite avec assistance IA. Sources originales referencees ci-dessus.


