Créez un chatbot avec React.JS et ChatGPT
Vous êtes fasciné par la puissance et l’intelligence des chatbots, et vous souhaitez créer le vôtre pour interagir de manière efficace avec vos utilisateurs ? Vous êtes au bon endroit ! Dans cet article, je vais vous guider pas à pas pour créer un chatbot remarquable avec React.JS, en vous inspirant du célèbre chatGPT.
Le monde des chatbots a connu une évolution spectaculaire ces dernières années, et les entreprises les utilisent de plus en plus pour améliorer leur service client, automatiser les tâches répétitives et offrir une expérience utilisateur personnalisée. Avec l’avènement de la technologie de traitement du langage naturel (NLP) et des modèles de langage avancés tels que GPT-3.5, il est désormais possible de développer des chatbots intelligents et conversationnels, capables de comprendre et de répondre de manière contextuelle aux utilisateurs.
Dans cet article, nous explorerons les étapes essentielles pour créer votre propre chatbot avec React.JS, l’une des bibliothèques JavaScript les plus populaires et puissantes pour le développement d’interfaces utilisateur. Nous examinerons comment mettre en place l’environnement de développement, intégrer le modèle de langage GPT-3.5 à votre application, gérer les interactions utilisateur, et bien plus encore.
Ce guide vous donnera les connaissances et les outils nécessaires pour vous lancer dans la création de votre chatbot personnalisé. Préparez-vous à plonger dans le monde passionnant des chatbots et à donner vie à vos idées en utilisant React.JS et les capacités de pointe offertes par les modèles de langage avancés.
Prêt à créer un chatbot impressionnant en utilisant l’API d’Openai, les créateurs de ChatGPT ?
Initialisation du Projet
Avant toute chose, la première chose à faire et de vous créer un compte OpenAI. Cela vous permettra d’avoir une clé API qui nous permettra alors de communiquer avec les différents modèles développés par la start-up Californienne.
Pour cela, rendez-vous sur le site d’OpenAI et inscrivez vous, et suivez les différentes étapes. Une fois votre inscription terminée, il faudra alors créer votre clé API. Il vous suffit donc cliquer sur votre photo de profil en haut à droite et ensuite, d’aller dans la section « view API key ».
Une fois sur cette page, vous pourrait, en cliquant sur le bouton « create new secret key » créer votre première clé API. Donnez-lui alors le nom que vous souhaitez. A ce moment la, votre clé apparaît, il vous faut absolument la conserver en lieu sur car OpenAI ne vous la remontrera plus.
Maintenant, il y a une chose que je ne vous ai pas dite. L’utilisation de l’API d’OpenAI est payante. Mais, comme ils sont plutôt généreux (bon en marketing), ils vous offrent, pendant 3 mois, 5 dollars de crédit. Ça peut paraître peu mais ce sera largement suffisant pour débuter et tester deux trois petites choses.
Vous pouvez accéder à vos crédits restant en allant dans « Usage » qui se trouve dans le menu de gauche. Vous aurez alors accès à vos crédits restant mais aussi à un dashbord vous montrant votre utilisation quotidienne.
Passons maintenant à notre application. Pour cela nous utiliserons React.JS, un framework Javascript développé par Facebook. Si vous voulez en savoir plus sur ce framework, n’hésitez pas à aller voir mes autres articles sur le sujet. Il faudra aussi utiliser Git et node.js, ce sont des outils assez simple à utiliser, pour les installer vous pouvez sur le site officiel de Git et de node.
De votre côté, vous n’aurez qu’à cloner le repo github que j’ai créé à cette occasion. À savoir que vous aurez besoin de Node.JS pour lancer notre appli React.
Vous devriez alors, au moment de lancer l’application voir notre simpliste mais, jolie interface qui n’est pour l’instant pas fonctionnelle. Le message que notre bot affiche est codé en dur, de plus pour l’instant, si vous essayez d’envoyer un message, il ne sera pas traité ni affiché.
Comme vous pouvez le voir, l’application est plutôt simple, on a un seul composant qui regroupe l’interface et la logique.
Pour ce qui est de la logique, il y a déjà les bases pour la suite du projet. Si vous vous demandez ce que fait chaque ligne, j’ai ajouté des commentaires qui vous aiguilleront.
Mais avant d’entrer dans le vif du sujet et de rendre notre chatbot fonctionnel, il nous faut installer le package d’OpenAI. Pour cela, dans nodeJS, il vous suffit d’entrer ceci (en étant dans le répertoire de notre application) :
Maintenant que tout est prêt, nous pouvons passer aux choses sérieuses.
Codez votre chatBot grâce à l’API d’OpenAI
La première chose que nous allons faire sera de créer un nouveau fichier « .env » . Dans ce dernier nous allons y mettre notre clé API sous la forme suivante, on appelle cela une variable d’environnement :
À savoir que si vous souhaitez héberger votre projet sur Github, il vous faudra alors le fichier dans votre .gitignore. En effet, vous risquez le bannissement si vous laissez apparaître publiquement votre clé.
Ensuite, il va nous falloir importer openai dans notre composant Chat qui se trouve dans le fichier Chat.js.
On peut maintenant créer une configuration openai avec la méthode que nous avons importée précédemment.
On a maintenant tout ce qu’il nous faut pour créer la fonction de génération de réponses. Tout en restant dans le même fichier, on va créer une fonction asynchrone qu’on appellera generate, qui nous renverront la réponse de l’API d’OpenAi.
Vous remarquerez qu’on utilise alors le modèle « text-davinci-003 ». Ce modèle a des performances similaires à la première version de chatgpt sorti en novembre 2022. Il existe bien sûr d’autres modèles du genre mais nous ne les verrons pas dans cet article.
Pour ce qui est des autres paramètres, le prompt correspond au dernier message que nous avons envoyé. Et le max tokens correspond au nombre de tokens (ou caractères) que disposera l’api pour nous répondre. Nous pouvons l’augmenter mais pour les tests, inutile de le faire. En effet, c’est ce nombre de tokens qui réduira alors vos crédits. À savoir que le nombre maximum de tokens est de 4 097 pour le modèle davinci 3.
On va pouvoir mettre à jour notre fonction handleClick et ajouter un peu de logique pour que notre chatBot soit enfin fonctionnelle.
On met alors à jour l’objet msg qui stocke nos messages et les réponses du bot et ensuite nous générons alors la réponse de GPT.
Vous avez sûrement remarqué que nous avons créé une nouvelle constante listMsg. Pour vous expliquer rapidement, on map alors le tableau de nos messages et comme, la réponse de l’API a le même identifiant que le message auquel il répond, nous pouvons juste lui faire passer ce dernier pour afficher notre message et juste à la suite, la réponse du bot.
On intègre ensuite notre constance de HTML pour l’afficher.
Notre chatbot est désormais fonctionnelle vous pouvez maintenant, si vous le désirez, augmenter le nombre de tokens pour avoir des réponses complètes et vous amuser à l’infini (dans les limites de vos moyens).
Pour aller plus loin, vous pouvez vous intéresser aux différents modèles que vous permet d’utiliser OpenAI, parmi eux on retrouve notamment gpt-3.5-turbo qui est plus performant et optimisé que davinci 003, Vous pourrez aussi utiliser le modèle DALL.E qui est spécialisé dans la génération d’images ou encore les modèles GPT4 qui sont pour l’instant encore réservés au white list.
Vous pourriez aussi vous intéresser au prompt engineering qui consiste à optimiser et améliorer les prompts qu’on soumet aux IA et plus particulièrement les réponses de notre application. Cela pourrait vous permettre par exemple de le spécialiser dans un domaine. Comme exemple de possibilité, allez voir ce que fait LegiGPT.
Pour ne rien manquer, suivez-moi sur ce compte medium, vous pouvez aussi vous abonner à ma chaine YouTube sur laquelle arriveront prochainement des vidéos du même genre.
