Alors que l’utilisation des chatbots et des assistants virtuels ne cesse de croître, de nombreuses entreprises et développeurs cherchent à créer leurs propres chatbots dotés d’une IA. ChatGPT est l’un de ces chatbots, créé par OpenAI, qui est capable d’engager des conversations de type humain et de répondre à un large éventail de questions.
Ce que vous allez construire
Dans ce tutoriel, vous apprendrez à construire une application clone de ChatGPT en utilisant React et l’API OpenAI. Si vous voulez vous essayer à un projet amusant et engageant pendant le week-end, c’est une excellente occasion de vous plonger dans React et OpenAI.
Vous apprendrez également à déployer directement votre dépôt GitHub sur 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 grâce à l’essai gratuit de Kinsta et au niveau Hobby, vous pouvez facilement démarrer sans frais.
Voici une démonstration en direct de l’application clone ChatGPT.
Si vous souhaitez examiner ce projet de plus près, vous pouvez accéder à son dépôt GitHub.
Alternativement, en utilisant ce modèle de projet de démarrage, vous pouvez sélectionner Utiliser ce modèle > Créer un nouveau dépôt – cela copiera le code de démarrage dans un nouveau dépôt. Ce projet de démarrage est livré avec des éléments fondamentaux tels que les styles, le lien CDN Font Awesome, le paquet OpenAi et la structure de base pour vous aider à démarrer.
Exigences/Prérequis
Ce tutoriel 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 :
- Une compréhension fondamentale du HTML, du CSS et du 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 plateforme 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. Elle permet aux développeurs d’ajouter à leurs applications des fonctions de traitement du langage naturel telles que la complétion de texte, l’analyse des sentiments, le résumé et la traduction, sans avoir à développer et à entraîner leurs modèles.
Pour utiliser l’API OpenAI, les développeurs doivent créer un compte sur le site web d’OpenAI et obtenir une clé API. La clé API est utilisée pour authentifier les demandes d’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 linguistique et recevoir des réponses.
Pourquoi React ?
React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Selon l’enquête Stack Overflow de 2022 auprès des développeurs, elle est la deuxième technologie web la plus utilisée, avec 42,62 % des parts 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 large é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 construire des interfaces de discussion complexes et c’est ce qui en fait un excellent choix pour construire une application clone de 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 -vSi une version apparaît, 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 de NPM n’est pas inférieure à v5.6 ; sinon, vous devrez la mettre à jour en lançant npm update -g. Une fois que vous avez compris ce qu’est npm, vous pouvez maintenant mettre en place un projet React en exécutant la commande ci-dessous :
npx create-react-app chatgpt-cloneNote : « chatgpt-clone » est le nom de l’application que nous créons, mais vous pouvez le changer pour n’importe quel nom de votre choix.
Le processus d’installation peut prendre quelques minutes. Une fois l’installation terminée, vous pouvez vous rendre dans le répertoire et installer le paquet Node.js OpenAI, qui permet d’accéder facilement à l’API OpenAI à partir de Node.js en utilisant la commande ci-dessous :
npm install openaiVous pouvez maintenant lancer 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, une structure de dossiers est automatiquement mise en place. Le principal dossier qui vous concerne est le dossier src, dans lequel le développement a lieu. Ce dossier contient de nombreux fichiers par défaut, mais seuls les fichiers App.js, index.js et index.css devraient vous intéresser.
- App.js : Le fichier App.js est le composant principal d’une application React. Il représente généralement le composant de haut niveau qui rend tous les autres composants de l’application.
- index.js : Ce fichier est le point d’entrée de votre application React. C’est le premier fichier chargé à l’ouverture de l’application et il est responsable du rendu du composant App.js dans le navigateur.
- index.css : Ce fichier est responsable de la définition du style général et de la mise en page de votre application React.
Comment construire un clone de ChatGPT avec React et l’API OpenAI
L’application clone de ChatGPT sera constituée de deux composants afin de rendre l’application plus facile à comprendre et à maintenir. Ces deux composants sont :
- Form Section : Ce composant comprend une zone de texte et un bouton pour que les utilisateurs puissent interagir avec le chatbot.
- Answer Section : Les questions et les réponses correspondantes seront stockées dans un tableau et affichées dans cette section. Vous ferez défiler le tableau chronologiquement, en affichant d’abord les plus récentes.
Configuration de l’application clone ChatGPT
Dans ce tutoriel, nous allons commencer par construire l’interface de l’application, puis vous pourrez implémenter des fonctionnalités pour que votre application interagisse avec l’API OpenAI. Commencez par créer les deux composants que vous utiliserez dans ce tutoriel. Pour une bonne organisation, vous créerez un dossier components dans le dossier src où tous les composants seront stockés.
Le composant Form Section
Il s’agit d’un formulaire simple composé d’un textarea et d’un button.
// 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 devrait ressembler le formulaire lorsque vous l’importerez dans votre fichier App.js:
Le composant Answer Section
Cette section est l’endroit où toutes les questions et les réponses seront affichées. Voici à quoi ressemblera cette section lorsque vous l’importerez dans votre fichier App.js.
Vous récupérerez ces questions et ces réponses dans un tableau et une boucle pour rendre votre code plus facile à lire et à maintenir.
// 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 lancerez 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 elle ressemblera :
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 récupérer la valeur de votre formulaire lorsqu’il est soumis, car elle sera utilisée 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 des données est d’utiliser des états. Dans les composants fonctionnels, le crochet useState() est utilisé pour travailler avec les états. Vous pouvez créer un état, lui assigner la valeur de votre formulaire et le mettre à jour lorsque 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 assigner la valeur du champ textarea à l’état et créer un événement onChange() pour mettre à jour l’état chaque fois que la valeur de l’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 vous cliquez sur le bouton d’envoi. 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 comme 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 depuis le 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 d’API dans une application React, vous devez créer un compte API OpenAI. Vous pouvez créer un compte sur le site web d’OpenAI à l’aide de votre compte Google ou de votre adresse e-mail. Pour générer une clé d’API, cliquez sur Personal dans le coin supérieur droit du site web ; certaines options apparaîtront ; cliquez sur View API Keys.
Cliquez sur le bouton Create new secret key, copiez la clé à l’endroit où vous l’utiliserez dans cette application pour interagir avec OpenAI. Vous pouvez maintenant procéder à l’initialisation d’OpenAI en important le paquet 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é de l’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 passer les deux paramètres attendus du formulaire que vous avez déjà créé pour gérer la demande et obtenir la 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&R), la correction grammaticale, la traduction et bien d’autres 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, elle est code-davinci-002. N’hésitez pas à consulter la documentation des exemples OpenAI pour connaître les différents exemples et leurs options.
Pour ce tutoriel, nous ne travaillons qu’avec 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: [""],
}Note : J’ai changé la valeur de l’invite.
L’invite est la question envoyée par le formulaire. Cela signifie que vous devrez la recevoir de l’entrée du formulaire que vous passez à la méthode generateResponse en tant que paramètre. Pour cela, vous définirez les options, puis utiliserez l’opérateur de 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 vous reste plus qu’à envoyer une requête à OpenAI via la méthode createCompletion 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. L’étape finale consiste à créer un état qui contiendra le tableau des questions et des réponses, puis à envoyer ce tableau en tant que prop dans le composant AnswerSection. Voici à quoi ressemblera le code final d’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 de manière à ce qu’il reçoive la valeur props d’App.js et à ce qu’il utilise 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 la testez en posant des questions, la réponse s’affiche ci-dessous. Mais vous remarquerez que le bouton « copy » 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 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 clone de ChatGPT fonctionne 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 voudrez la partager en ligne, afin que d’autres puissent y accéder. Voyons comment le faire en utilisant GitHub et Kinsta.
Transférez votre code sur GitHub
Pour transférer votre code sur 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 dépôt 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 dépôt dans le menu déroulant.
Donnez un nom à votre dépôt, ajoutez une description (facultative) et choisissez s’il doit être public ou privé. Cliquez sur Créer un dépôt pour le créer.
Une fois votre dépôt créé, assurez-vous d’obtenir l’URL du dépôt à partir de la page principale de votre dépôt, dont vous aurez besoin pour pousser votre code sur GitHub.
Ouvrez votre terminal ou votre invite de commande et naviguez jusqu’au répertoire qui contient votre projet. Exécutez les commandes suivantes une par une pour pousser 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 mastergit init initialise un dépôt Git local, git add . ajoute tous les fichiers du répertoire actuel et de ses sous-répertoires au nouveau dépôt Git. git commit -m "my first commit" commite les modifications dans le dépôt avec un bref message. git remote add origin [repository URL] définit l’URL du dépôt comme dépôt distant et git push -u origin master pousse le code vers le dépôt distant (origin) dans la branche master.
Déployez votre application React Clone ChatGPT sur Kinsta
Pour déployer votre dépôt sur Kinsta, suivez les étapes suivantes :
- Connectez-vous ou créez votre compte Kinsta sur le tableau de bord MyKinsta.
- Cliquez sur Applications dans la barre latérale gauche, puis sur Ajouter un service.
- Sélectionnez Application dans le menu déroulant pour déployer une application React sur Kinsta.
- Sélectionnez le dépôt que vous souhaitez déployer dans la fenêtre modale qui s’affiche. 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.
- Enfin, il n’est pas sûr d’envoyer les clés d’API à des hôtes publics comme GitHub, elles ont été ajoutées comme 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 va commencer à 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/
Note : vous pouvez activer le déploiement automatique, de sorte que Kinsta redéploiera votre application chaque fois que vous modifierez votre base de code et que vous la pousserez sur GitHub.
Résumé
L’API OpenAI peut être utilisée pour créer un large éventail d’applications potentielles, de l’assistance à la clientèle et des assistants personnels à la traduction linguistique et à la création de contenu.
Dans ce tutoriel, vous avez appris à construire une application clone de ChatGPT avec React et OpenAI. Vous pouvez intégrer cette application/fonctionnalité dans d’autres applications pour fournir aux utilisateurs des expériences conversationnelles de type humain.
Il y a plus à faire avec l’API OpenAI et comment améliorer cette application clone. Par exemple, vous pouvez mettre en œuvre le stockage local afin que les questions et réponses précédentes ne disparaissent pas même après avoir actualisé votre navigateur.
Avec l’essai gratuit de Kinsta et le niveau Hobby, vous pouvez facilement démarrer sans 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 les commentaires ci-dessous.
Joel est un développeur d'interfaces publiques qui travaille chez Kinsta en tant que rédacteur technique. Il est un enseignant passionné par l'open source et a écrit plus de 200 articles techniques, principalement autour de JavaScript et de ses frameworks.
Laisser un commentaire