Comment construire votre propre Chatbot comme Chat GPT-3
Table des matières
- Introduction
- Construction d'une interface de chat
- Installation et configuration de Tailwind
- Création du composant Head
- Création du composant Messages
- Création du formulaire d'envoi de message
- Communication avec le serveur
- Implémentation de transitions avec Framer Motion
- Amélioration de l'expérience utilisateur
Introduction
Dans cette vidéo, je vais vous montrer comment construire votre propre chatbot comme Chat GPT-3. Nous allons commencer par concevoir une interface de chat qui ressemble à celle-ci : [Insérer un aperçu de l'interface]. Le but de cette interface est de permettre à l'utilisateur de poser des questions au bot et de recevoir une réponse en retour. Pour construire cette interface, nous allons utiliser Next.js avec Tailwind pour la gestion du style. Ensuite, nous configurerons un serveur avec KOA pour gérer la communication avec le chatbot. Commençons donc par la construction de l'interface de chat.
Construction d'une interface de chat
Pour créer l'interface de chat, nous allons utiliser Next.js avec Tailwind pour la gestion du style. Tout d'abord, nous allons créer un nouveau répertoire pour notre application Next.js.
Dans le terminal, exécutez la commande suivante :
yarn Create next-app client
Cela va créer un nouveau projet Next.js dans un dossier appelé "client".
Ensuite, nous allons installer et configurer Tailwind pour le style de notre interface.
Dans le terminal, assurez-vous d'être dans le dossier "client" et exécutez la commande suivante pour installer Tailwind :
npm install tailwindcss postcss autoprefixer
Ensuite, générez un fichier de configuration Tailwind en exécutant la commande suivante :
npx tailwindcss init -p
Cela va créer un fichier de configuration Tailwind appelé "tailwind.config.js" et un fichier de configuration PostCSS appelé "postcss.config.js". Ouvrez le fichier "tailwind.config.js" et ajoutez la ligne suivante pour inclure une nouvelle police personnalisée :
theme: {
extend: {
fontFamily: {
sans: ["Lato", "sans-serif"],
},
},
},
Ensuite, ouvrez le fichier "postcss.config.js" et ajoutez les plugins suivants :
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Maintenant que Tailwind est installé et configuré, supprimons les fichiers et le code inutiles générés par Next.js.
Dans le dossier "pages", supprimez le dossier "api" et modifiez le fichier "index.js" comme suit :
import Head from "../components/Head";
import Messages from "../components/Messages";
import Form from "../components/Form";
export default function Home() {
return (
<>
<Head />
<Messages />
<Form />
</>
);
}
Dans le dossier "styles", supprimez le fichier "home.module.css" et modifiez le fichier "globals.css" comme suit :
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");
html,
body {
margin: 0;
padding: 0;
font-family: "Lato", sans-serif;
}
body {
background-color: #f8f8f8;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
.Chat {
background-color: #fff;
border-radius: 8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
max-height: 500px;
overflow-y: scroll;
padding: 1rem;
}
.Message {
display: flex;
align-items: center;
padding: 0.5rem;
margin-bottom: 1rem;
border-radius: 4px;
}
.Message.bot {
background-color: #eaf4fd;
}
.Message.user {
background-color: #fde8e8;
}
.Message p {
font-size: 14px;
margin: 0;
margin-left: 1rem;
}
.Message span {
font-size: 12px;
color: #888;
}
Ensuite, dans le terminal, exécutez la commande suivante pour démarrer le serveur Next.js en mode développement :
yarn dev
Maintenant, si vous ouvrez votre navigateur et accédez à http://localhost:3000, vous devriez voir l'interface de chat de base. À ce stade, nous avons créé l'interface de chat en utilisant Next.js et Tailwind pour le style.
🛠️ Construction d'un chatbot avec GPT-3
Dans cette section, nous allons configurer et entraîner un modèle de chatbot en utilisant la technologie de génération de texte GPT-3 de OpenAI.
Étape 1: Configuration de OpenAI API
Avant d'aller plus loin, assurez-vous d'avoir un compte OpenAI et d'avoir généré une clé API. Une fois que vous avez cela, vous pouvez continuer avec les étapes suivantes:
- Copiez votre clé API OpenAI.
- Créez un fichier
.env
à la racine du projet.
- Dans le fichier
.env
, ajoutez une variable appelée OPENAI_API_KEY
et collez votre clé API OpenAI.
Étape 2: Installation des dépendances
Nous allons utiliser le Package openai
pour interagir avec l'API OpenAI. Dans votre terminal, exécutez la commande suivante pour installer le package :
npm install openai
Étape 3: Création du Chatbot
Tout d'abord, nous allons créer un composant pour notre chatbot. Dans le dossier "src/components", créez un fichier "Chatbot.js" et ajoutez le code suivant :
import React, { useState } from 'react';
import openai from 'openai';
const Chatbot = () => {
const [message, setMessage] = useState("");
const [conversation, setConversation] = useState([]);
const sendMessage = async () => {
const response = await openai.complete({
engine: 'davinci-codex',
prompt: message,
maxTokens: 50,
});
const newMessage = response.choices[0].text;
setConversation([...conversation, { text: newMessage, user: false }]);
setMessage("");
};
return (
<div>
<div>
{conversation.map((messageObj, index) => (
<p key={index} style={{textAlign: messageObj.user ? "left" : "right"}}>
{messageObj.text}
</p>
))}
</div>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
/>
<button onClick={sendMessage}>Send</button>
</div>
);
};
export default Chatbot;
Ce composant utilise le hook useState
pour gérer l'état du message saisi par l'utilisateur et la conversation en cours. Lorsque l'utilisateur clique sur le bouton "Send", une demande est envoyée à l'API OpenAI pour obtenir une réponse. La réponse est ensuite ajoutée à la conversation et affichée à l'écran.
Assurez-vous d'installer le package openai
dans votre projet en exécutant la commande suivante dans votre terminal :
npm install openai
Remarque : Vous devrez également mettre à jour votre fichier tailwind.config.js
pour inclure les classes CSS utilisées dans le composant Chatbot. Voici comment le fichier pourrait ressembler :
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Maintenant que nous avons créé le composant Chatbot, nous pouvons l'ajouter à notre application. Dans le fichier App.js
, ajoutez le composant Chatbot après le composant Header :
import Chatbot from './components/Chatbot';
function App() {
return (
<div className="App">
<Header />
<Chatbot />
</div>
);
}
export default App;
Et voilà ! Le chatbot est maintenant intégré à votre application React. Vous pouvez maintenant tester votre chatbot en lançant votre application React et en interagissant avec lui.
Améliorations possibles
- Ajouter un système de réponse vocale pour permettre au chatbot de parler à l'utilisateur.
- Implémenter une fonction de suggestion automatique pour aider l'utilisateur à formuler sa question.
- Mettre en œuvre une logique de conversation plus sophistiquée avec un suivi contextuel.
Conclusion
Dans cet article, nous avons exploré comment construire un chatbot comme Chat GPT-3 en utilisant Next.js, Tailwind et l'API OpenAI. Nous avons d'abord construit une interface de chat fonctionnelle, puis nous avons configuré le chatbot pour interagir avec l'API OpenAI. Grâce à cette configuration, nous avons pu obtenir des réponses générées dynamiquement en temps réel. Vous pouvez maintenant utiliser ces connaissances pour construire votre propre chatbot et l'adapter selon vos besoins.