Conception d'un chatbot simple avec GPT

Chapitre 24: Conception d'un Chatbot Simple avec GPT

24.1 Introduction

Un chatbot peut améliorer l'interaction utilisateur en fournissant des réponses automatisées et pertinentes à leurs questions. En utilisant l'API Chat GPT d'OpenAI, il est possible de créer un chatbot simple mais efficace. Ce chapitre vous guidera à travers les étapes de conception et de développement d'un chatbot simple en utilisant Node.js pour le backend et React pour le frontend.

24.2 Pré-requis

• Node.js et npm installés sur votre machine.
• Une clé API OpenAI valide.
• Connaissances de base en JavaScript, Node.js et React.

24.3 Initialisation du Projet

24.3.1 Création du Backend avec Express

1. Créer un nouveau répertoire pour le projet :

   mkdir gpt-chatbot
cd gpt-chatbot

2. Initialiser un projet npm :

   npm init -y

3. Installer les dépendances nécessaires :

   npm install express openai dotenv cors

24.3.2 Configuration de l'API OpenAI

1. Créer un fichier .env pour stocker votre clé API :

   touch .env

2. Ajouter votre clé API dans le fichier .env :

   OPENAI_API_KEY=your_api_key_here

3. Créer un fichier index.js pour configurer le serveur Express :

   const express = require('express');
   const { Configuration, OpenAIApi } = require('openai');
   const cors = require('cors');
   require('dotenv').config();
   
   const app = express();
   const port = process.env.PORT || 3001;
   
   app.use(cors());
   app.use(express.json());
   
   const configuration = new Configuration({
     apiKey: process.env.OPENAI_API_KEY,
   });
   
   const openai = new OpenAIApi(configuration);
   
   app.post('/api/chat', async (req, res) => {
     const { prompt } = req.body;
   
     try {
       const response = await openai.createChatCompletion({
         model: "gpt-4",
         messages: [{ role: "user", content: prompt }],
         max_tokens: 150,
         temperature: 0.7,
       });
   
       const assistantMessage = response.data.choices[0].message.content.trim();
       res.json({ message: assistantMessage });
     } catch (error) {
       res.status(500).json({ error: error.message });
     }
   });
   
   app.listen(port, () => {
     console.log(`Server is running on http://localhost:${port}`);
   });
   

24.4 Création du Frontend avec React

24.4.1 Initialisation du Projet React

1. Créer un nouveau projet React en utilisant Create React App :

   npx create-react-app client
cd client

2. Installer Axios pour les requêtes HTTP :

   npm install axios

24.4.2 Développement de l'Interface Utilisateur

1. Modifiez src/App.js pour ajouter un formulaire permettant de saisir un prompt et d'afficher la réponse du chatbot :

   import React, { useState } from 'react';
   import axios from 'axios';
   import './App.css';
   
   function App() {
     const [prompt, setPrompt] = useState('');
     const [response, setResponse] = useState('');
   
     const handleSubmit = async (e) => {
       e.preventDefault();
       try {
         const res = await axios.post('http://localhost:3001/api/chat', { prompt });
         setResponse(res.data.message);
       } catch (error) {
         console.error("Erreur :", error);
       }
     };
   
     return (
       <div className="App">
         <header className="App-header">
           <h1>GPT Chatbot</h1>
           <form onSubmit={handleSubmit}>
             <textarea
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
               placeholder="Posez votre question ici..."
             />
             <button type="submit">Envoyer</button>
           </form>
           <div className="response">
             <h2>Réponse :</h2>
             <p>{response}</p>
           </div>
         </header>
       </div>
     );
   }
   
   export default App;
   

2. Ajouter des styles de base dans src/App.css :

   .App {
     text-align: center;
     padding: 20px;
   }
   
   .App-header {
     background-color: #282c34;
     padding: 20px;
     color: white;
   }
   
   textarea {
     width: 100%;
     height: 100px;
     margin: 10px 0;
     padding: 10px;
     border-radius: 5px;
     border: 1px solid #ccc;
   }
   
   button {
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     background-color: #61dafb;
     color: white;
     font-size: 16px;
     cursor: pointer;
   }
   
   .response {
     margin-top: 20px;
   }
   
   .response h2 {
     margin: 0;
   }
   
   .response p {
     background: #f1f1f1;
     padding: 10px;
     border-radius: 5px;
   }
   

24.5 Lancer l'Application

24.5.1 Lancer le Serveur Backend

Dans le répertoire racine de votre projet, lancez le serveur backend.

24.5.2 Lancer l'Application React

Dans le répertoire client, lancez l'application React.

24.6 Test de l'Application

Ouvrez votre navigateur et accédez à http://localhost:3000. Vous devriez voir une interface où vous pouvez entrer une question et recevoir une réponse générée par le chatbot.

24.7 Améliorations et Personnalisations

Pour améliorer et personnaliser votre chatbot, vous pouvez :

• Ajouter des fonctionnalités de suivi de conversation : Conservez l'historique des messages pour des interactions plus contextuelles.
• Implémenter des filtres de contenu : Filtrez les réponses pour éviter les contenus inappropriés.
• Personnaliser les réponses : Ajustez les paramètres de l'API pour des réponses plus créatives ou plus cohérentes.

Conclusion

Ce chapitre vous a guidé à travers la conception et le développement d'un chatbot simple en utilisant l'API Chat GPT d'OpenAI. En suivant ces étapes, vous pouvez créer un chatbot interactif qui répond aux questions des utilisateurs de manière automatisée et efficace. N'hésitez pas à explorer davantage les capacités de l'API et à personnaliser votre chatbot pour répondre à des besoins spécifiques.