Comment créer et déployer une application de clonage ChatGPT avec React et l'API OpenAI

Alors que l'utilisation des chatbots et des assistants virtuels continue de croître, de nombreuses entreprises et développeurs recherchent des moyens de créer leurs propres chatbots alimentés par l'IA. ChatGPT est l'un de ces chatbots, créé par OpenAI, capable de s'engager dans des conversations de type humain et de répondre à un large éventail de questions.

Ce que vous allez construire

Dans ce didacticiel, vous apprendrez à créer une application de clonage ChatGPT à l'aide de React et de l'API OpenAI. Si vous voulez vous essayer à un projet amusant et engageant pendant le week-end, c'est une excellente occasion de plonger dans React et OpenAI.

Vous apprendrez également à déployer directement depuis votre référentiel GitHub vers la plateforme d'hébergement d'applications de Kinsta, qui fournit un domaine .kinsta.app gratuit pour que votre projet soit mis en ligne rapidement. Et avec l'essai gratuit et le niveau Hobby de Kinsta, vous pouvez facilement commencer sans aucun frais.

Voici une démonstration en direct de l'application de clonage ChatGPT.

Si vous souhaitez inspecter ce projet de plus près, vous pouvez accéder à son référentiel GitHub.

Alternativement, vous pouvez également cloner le projet de démarrage de l'application React, qui contient des éléments fondamentaux tels que les styles, le lien CDN Font Awesome, le package OpenAI et la structure de base, pour vous aider à démarrer.

Exigences/Prérequis

Ce didacticiel est conçu pour être une expérience de « suivi ». Par conséquent, il est recommandé que vous disposiez des éléments suivants pour coder facilement :

• Compréhension fondamentale de HTML, CSS et JavaScript
• Une certaine familiarité avec React
• Node.js et npm (Node Package Manager) ou yarn installés sur votre ordinateur

Qu'est-ce que l'API OpenAI ?

L'API OpenAI est une plate-forme basée sur le cloud qui permet aux développeurs d'accéder aux modèles de langage d'OpenAI, tels que GPT-3, via une API. Il permet aux développeurs d'ajouter des fonctionnalités de traitement du langage naturel telles que la complétion de texte, l'analyse des sentiments, le résumé et la traduction à leurs applications sans développer ni former leurs modèles.

Pour utiliser l'API OpenAI, les développeurs doivent créer un compte sur le site Web OpenAI et obtenir une clé API. La clé API est utilisée pour authentifier les requêtes API et suivre l'utilisation.

Une fois la clé API obtenue, les développeurs peuvent utiliser l'API pour soumettre du texte au modèle de langage et recevoir des réponses.

Pourquoi réagir ?

React est une bibliothèque JavaScript populaire pour la création d'interfaces utilisateur. Selon l'enquête auprès des développeurs Stack Overflow de 2022, il s'agit de la deuxième technologie Web la plus utilisée, avec 42,62 % de part de marché.

React permet aux développeurs de créer des composants déclaratifs représentant différentes parties de l'interface utilisateur. Ces composants sont définis à l'aide d'une syntaxe appelée JSX, qui est une combinaison de JavaScript et de HTML.

Grâce à son vaste écosystème de bibliothèques de composants et de kits, les développeurs peuvent facilement travailler avec et intégrer des API telles que l'API OpenAI, pour créer des interfaces de chat complexes et c'est ce qui en fait un excellent choix pour créer une application clone ChatGPT.

Comment configurer votre environnement de développement React

La meilleure façon d'installer React ou de créer un projet React est de l'installer avec create-react-app. Une condition préalable est d'avoir Node.js installé sur votre machine. Pour confirmer que Node est installé, exécutez la commande suivante dans votre terminal.

 node -v

S'il affiche une version, c'est qu'elle existe. Pour utiliser npx, vous devez vous assurer que votre version de Node n'est pas inférieure à v14.0.0 et que votre version NPM n'est pas inférieure à v5.6 ; sinon, vous devrez peut-être le mettre à jour en exécutant npm update -g . Une fois que vous avez compris npm, vous pouvez maintenant configurer un projet React en exécutant la commande ci-dessous :

 npx create-react-app chatgpt-clone

Remarque : "chatgpt-clone" est le nom de l'application que nous créons, mais vous pouvez le remplacer par le nom de votre choix.

Le processus d'installation peut prendre quelques minutes. Une fois l'opération réussie, vous pouvez accéder au répertoire et installer le package Node.js OpenAI, qui offre un accès pratique à l'API OpenAI à partir de Node.js à l'aide de la commande ci-dessous :

 npm install openai

Vous pouvez maintenant exécuter npm start pour voir votre application en direct sur localhost:3000 .

Lorsqu'un projet React est créé à l'aide de la commande create-react-app , il échafaude automatiquement une structure de dossiers. Le dossier principal qui vous concerne est le dossier src , où se déroule le développement. Ce dossier contient de nombreux fichiers par défaut mais vous ne devriez vous préoccuper que des fichiers App.js , index.js et index.css .

1. App.js : Le fichier App.js est le composant principal d'une application React. Il représente généralement le composant de niveau supérieur qui restitue tous les autres composants de l'application.
2. index.js : Ce fichier est le point d'entrée de votre application React. Il s'agit du premier fichier chargé lors de l'ouverture de l'application et responsable du rendu du composant App.js dans le navigateur.
3. index.css : Ce fichier est chargé de définir le style général et la mise en page de votre application React.

Comment créer un clone ChatGPT avec React et l'API OpenAI

L'application de clonage ChatGPT comprendra deux composants pour faciliter la compréhension et la maintenance de l'application. Ces deux composants sont :

1. Section Formulaire : Ce composant comprend un champ de zone de texte et un bouton permettant aux utilisateurs d'interagir avec le chatbot.
2. Section Réponse : Les questions et les réponses correspondantes seront stockées dans un tableau et affichées dans cette section. Vous parcourrez le tableau dans l'ordre chronologique, en affichant le plus récent en premier.

Configuration de l'application de clonage ChatGPT

Dans ce didacticiel, commençons par créer l'interface de l'application, puis vous pouvez implémenter des fonctionnalités afin que votre application interagisse avec l'API OpenAI. Commencez par créer les deux composants que vous utiliserez dans ce didacticiel. Pour une bonne organisation, vous allez créer un dossier de composants dans le dossier src où tous les composants seront stockés.

Le composant de section de formulaire

Il s'agit d'un formulaire simple composé d'une textarea et d'un button d'envoi.

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

Voici à quoi le formulaire devrait ressembler lorsque vous l'importerez dans votre fichier App.js :

Le composant de section de réponse

Cette section est l'endroit où toutes les questions et réponses seront affichées. Voici à quoi ressemblera cette section lorsque vous l'importerez également dans votre fichier App.js.

Vous récupérerez ces questions et réponses à partir d'un tableau et d'une boucle pour faciliter la lecture et la maintenance de votre code.

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

La page d'accueil

Vous avez maintenant créé les deux composants, mais rien n'apparaîtra lorsque vous exécuterez votre application car vous devez les importer dans votre fichier App.js. Pour cette application, vous n'implémenterez aucune forme de routage, ce qui signifie que le fichier App.js servira de composant/page d'accueil de votre application.

Vous pouvez ajouter du contenu, comme le titre et la description de votre application, avant d'importer les composants.

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

Dans le code ci-dessus, les deux composants sont importés et ajoutés à l'application. Lorsque vous exécutez votre application, voici à quoi ressemblera votre application :

Ajout de fonctionnalités et intégration de l'API OpenAI

Vous avez maintenant l'interface utilisateur de votre application. L'étape suivante consiste à rendre l'application fonctionnelle afin qu'elle puisse interagir avec l'API OpenAI et obtenir des réponses. Tout d'abord, vous devez obtenir la valeur de votre formulaire lorsqu'il est soumis, car il sera utilisé pour interroger l'API OpenAI.

Obtenir des données à partir d'un formulaire

Dans React, la meilleure façon de stocker et de mettre à jour les données est d'utiliser des états. Dans les composants fonctionnels, le hook useState() est utilisé pour travailler avec les états. Vous pouvez créer un état, attribuer la valeur de votre formulaire à l'état et le mettre à jour chaque fois que sa valeur change. Commençons par importer le crochet useState() dans le composant FormSection.jsx , puis créons un état pour stocker et mettre à jour newQuestions .

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

Ensuite, vous pouvez affecter la valeur du champ textarea à l'état et créer un événement onChange() pour mettre à jour l'état chaque fois que la valeur d'entrée change :

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

Enfin, vous pouvez créer un événement onClick() , pour charger une fonction chaque fois que le bouton de soumission est cliqué. Cette méthode sera créée dans le fichier App.js et transmise en tant qu'accessoire au composant FormSection.jsx avec les valeurs newQuestion et setNewQuestion en tant qu'arguments.

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

Vous avez maintenant créé un état pour stocker et mettre à jour la valeur du formulaire, ajouté une méthode qui est transmise en tant qu'accessoire à partir du fichier App.js et géré l'événement de clic. Voici à quoi ressemblera le code final :

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

La prochaine étape consistera à créer une méthode dans le fichier App.js pour gérer l'ensemble du processus d'interaction avec l'API OpenAI.

Interagir avec l'API OpenAI

Pour interagir avec l'API OpenAI et obtenir des clés API dans une application React, vous devez créer un compte API OpenAI. Vous pouvez créer un compte sur le site Web OpenAI en utilisant votre compte Google ou votre adresse e-mail. Pour générer une clé API, cliquez sur Personnel dans le coin supérieur droit du site Web ; certaines options apparaîtront ; cliquez sur Afficher les clés API .

Cliquez sur le bouton Créer une nouvelle clé secrète , copiez la clé quelque part comme vous l'utiliseriez dans cette application pour interagir avec OpenAI. Vous pouvez maintenant procéder à l'initialisation d'OpenAI en important le package openai (que vous avez déjà installé) avec la méthode de configuration. Créez ensuite une configuration avec votre clé générée et utilisez-la pour initialiser OpenAI.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

Dans le code ci-dessus, la clé API OpenAI est stockée en tant que variable d'environnement dans le fichier .env . Vous pouvez créer un fichier .env dans le dossier racine de votre application et stocker la clé dans la variable REACT_APP_OPENAI_API_KEY .

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

Vous pouvez maintenant créer la méthode generateResponse dans le fichier App.js et transmettre les deux paramètres attendus du formulaire que vous avez déjà créé pour gérer la demande et obtenir une réponse de l'API.

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

Vous pouvez maintenant envoyer une requête à l'API OpenAI. L'API OpenAI peut effectuer de nombreuses opérations, telles que les questions et réponses (Q&A), la correction grammaticale, la traduction et bien plus encore. Pour chacune de ces opérations, les options sont différentes. Par exemple, la valeur du moteur pour Q&A est text-davinci-00 , tandis que pour SQL translate est code-davinci-002 . N'hésitez pas à consulter la documentation d'exemple OpenAI pour les différents exemples et leurs options.

Pour ce tutoriel, nous travaillons uniquement avec le Q&A, voici à quoi ressemble l'option :

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

Remarque : J'ai modifié la valeur de l'invite.

L'invite est la question qui est envoyée à partir du formulaire. Cela signifie que vous devrez le recevoir à partir de l'entrée de formulaire que vous transmettez à la méthode generateResponse en tant que paramètre. Pour ce faire, vous allez définir les options puis utiliser l'opérateur propagation pour créer une option complète incluant l'invite :

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

À ce stade, il ne reste plus qu'à envoyer une requête via la méthode createCompletion à OpenAI pour obtenir une réponse.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

Dans le code ci-dessus, le texte de la réponse sera affiché sur votre console. N'hésitez pas à tester votre application en posant n'importe quelle question. La dernière étape serait de créer un état qui contiendrait le tableau de questions et de réponses, puis d'envoyer ce tableau en tant que prop dans le composant AnswerSection . Voici à quoi ressemblera le code final App.js :

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

Vous pouvez maintenant modifier le composant AnswerSection afin qu'il reçoive la valeur props d' App.js et utiliser la méthode JavaScript Map() pour parcourir le tableau storedValues :

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Lorsque vous exécutez votre application et que vous la testez en posant des questions, la réponse s'affichera ci-dessous. Mais vous remarquerez que le bouton de copie ne fonctionne pas. Vous devrez ajouter un événement onClick() au bouton, afin qu'il déclenche une méthode pour gérer la fonctionnalité. Vous pouvez utiliser la méthode navigator.clipboard.writeText() pour gérer la fonctionnalité. Voici à quoi ressemblera désormais le composant AnswerSection :

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

Lorsque vous exécutez votre application, votre application de clonage ChatGPT fonctionnera parfaitement. Vous pouvez maintenant déployer votre application pour y accéder en ligne et la partager avec vos amis.

Comment déployer votre application React sur Kinsta

Il ne suffit pas de créer cette application et de la laisser sur vos ordinateurs locaux. Vous aurez envie de le partager en ligne, afin que d'autres puissent y accéder. Voyons comment faire cela en utilisant GitHub et Kinsta.

Poussez votre code vers GitHub

Pour pousser votre code vers GitHub, vous pouvez utiliser les commandes Git, qui constituent un moyen fiable et efficace de gérer les modifications de code, de collaborer sur des projets et de conserver l'historique des versions.

La première étape pour pousser vos codes sera de créer un nouveau référentiel en vous connectant à votre compte GitHub, en cliquant sur le bouton + dans le coin supérieur droit de l'écran et en sélectionnant Nouveau référentiel dans le menu déroulant.

Donnez un nom à votre référentiel, ajoutez une description (facultatif) et choisissez s'il doit être public ou privé. Cliquez sur Créer un référentiel pour le créer.

Une fois votre référentiel créé, assurez-vous d'obtenir l'URL du référentiel à partir de la page principale de votre référentiel, dont vous aurez besoin pour pousser votre code vers GitHub.

Ouvrez votre terminal ou votre invite de commande et accédez au répertoire contenant votre projet. Exécutez les commandes suivantes une par une pour transférer votre code vers votre dépôt GitHub :

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init initialise un dépôt Git local, git add . ajoute tous les fichiers du répertoire courant et de ses sous-répertoires au nouveau référentiel Git. git commit -m "my first commit" valide les modifications dans le référentiel avec un bref message. git remote add origin [repository URL] définit l'URL du référentiel en tant que référentiel distant et git push -u origin master transmet le code au référentiel distant (origine) dans la branche master.

Déployez votre application ChatGPT Clone React sur Kinsta

Pour déployer votre référentiel sur Kinsta, suivez ces étapes :

1. Connectez-vous ou créez votre compte Kinsta sur le tableau de bord My Kinsta.
2. Cliquez sur Applications dans la barre latérale gauche, puis cliquez sur Ajouter un service .
3. Sélectionnez Application dans le menu déroulant pour déployer une application React sur Kinsta.
4. Sélectionnez le référentiel que vous souhaitez déployer à partir du modal qui apparaît. Si vous avez plusieurs branches, vous pouvez choisir celle que vous souhaitez déployer et attribuer un nom à l'application. Sélectionnez un emplacement de centre de données parmi les 25 disponibles, et Kinsta détectera automatiquement une commande de démarrage.
5. Enfin, il n'est pas sûr de transmettre des clés API à des hôtes publics comme GitHub, il a été ajouté en tant que variable d'environnement localement. Lors de l'hébergement, vous pouvez également l'ajouter en tant que variable d'environnement en utilisant le même nom de variable et la clé comme valeur.

Votre application commencera à se déployer, et dans quelques minutes, un lien sera fourni pour accéder à la version déployée de votre application. Dans ce cas, il s'agit de https://chatgpt-clone-g9q10.kinsta.app/ Remarque : vous pouvez activer le déploiement automatique, ainsi Kinsta redéploiera votre application chaque fois que vous modifierez votre base de code et la pousserez vers GitHub.

Résumé

L'API OpenAI peut être utilisée pour créer une large gamme d'applications potentielles, du support client et des assistants personnels à la traduction linguistique et à la création de contenu.

Dans ce didacticiel, vous avez appris à créer une application de clonage ChatGPT avec React et OpenAI. Vous pouvez intégrer cette application/fonctionnalité dans d'autres applications pour offrir aux utilisateurs des expériences de conversation de type humain.

Il y a plus à ce qui peut être fait avec l'API OpenAI et comment améliorer cette application de clonage. Par exemple, vous pouvez implémenter un stockage local afin que les questions et réponses précédentes ne disparaissent pas même après l'actualisation de votre navigateur.

Avec l'essai gratuit et le niveau Hobby de Kinsta, vous pouvez facilement démarrer sans aucun frais sur notre hébergement d'applications. Alors pourquoi ne pas essayer et voir ce que vous pouvez créer ?

Partagez votre projet et vos expériences dans le commentaire ci-dessous.