GPT-3, ou Generative Pretrained Transformer 3, est la dernière version du puissant modèle de langage d’OpenAI. Il peut générer du texte au son naturel dans une variété de langues et de styles, ce qui en fait un outil utile pour créer des applications de chat et d’autres applications qui impliquent le traitement du langage naturel.

Dans cet article, nous allons vous montrer comment utiliser l’API GPT-3 pour créer une application de chat Web simple à l’aide de ReactJS, JavaScript et NextJS. Nous commencerons par configurer notre environnement de développement et créer une application NextJS, puis nous ajouterons l’API GPT-3 et construirons l’interface de chat. Enfin, nous discuterons de certaines façons d’améliorer l’expérience de chat et de la rendre plus attrayante pour les utilisateurs.

Annonces

Que vous soyez un développeur chevronné ou un débutant cherchant à en savoir plus sur GPT-3 et le traitement du langage naturel, cet article vous fournira les outils et les connaissances nécessaires pour démarrer. Plongeons-nous !

Configuration de votre environnement de développement :

Avant de pouvoir commencer à utiliser l’API GPT-3, nous devons configurer notre environnement de développement et installer les outils et bibliothèques nécessaires.

1. La première chose dont vous aurez besoin est Node.js, un runtime JavaScript qui vous permet d’exécuter JavaScript côté serveur. Vous pouvez télécharger et installer Node.js depuis le site officiel ( https://nodejs.org/en/ ).
2. Ensuite, vous devrez installer ReactJS, une bibliothèque JavaScript populaire pour la création d’interfaces utilisateur. Vous pouvez le faire en utilisant le npm (Node Package Manager) fourni avec Node.js :Annonces

3. Enfin, vous devrez installer NextJS, un framework pour créer des applications React rendues par le serveur. Vous pouvez le faire à l’aide de la commande suivante :

Une fois que vous avez installé ces outils et bibliothèques, vous pouvez vérifier que tout fonctionne correctement en créant une nouvelle application NextJS à l’aide de la create-next-appcommande :

Cela créera un nouveau répertoire appelé my-chat-appavec les fichiers et dépendances nécessaires pour une application NextJS. Vous pouvez accéder à ce répertoire et exécuter l’application à l’aide de la npm run devcommande, qui démarrera un serveur de développement local à l’ adresse http://localhost:3000 . Vous devriez voir un message de bienvenue dans votre navigateur, indiquant que votre application fonctionne correctement.

Dans la section suivante, nous vous montrerons comment ajouter l’API GPT-3 à votre application et la tester à l’aide d’un exemple de requête.

Ajout de l’API GPT-3 :

Maintenant que nous avons une application NextJS fonctionnelle, nous sommes prêts à ajouter l’API GPT-3 et à commencer à l’utiliser dans notre application.

Pour utiliser l’API GPT-3, vous devez d’abord vous inscrire pour obtenir une clé API. Vous pouvez le faire en visitant le site Web OpenAI ( https://beta.openai.com/ ) et en suivant les instructions pour créer un compte et demander une clé API.

Annonces

Une fois que vous disposez d’une clé API, vous pouvez installer la bibliothèque cliente GPT-3 pour Node.js à l’aide de la commande suivante :

Cela ajoutera le openaipackage aux dépendances de votre projet, vous permettant d’utiliser l’API GPT-3 dans votre application.

Pour tester l’API, vous pouvez utiliser le code suivant pour envoyer un exemple de requête et imprimer la réponse dans la console :

Remplacez <your API key here>par votre clé API réelle et exécutez ce code à l’aide de la nodecommande. Vous devriez voir la réponse du modèle GPT-3 à votre requête imprimée dans la console, indiquant que l’API fonctionne correctement.

Dans la section suivante, nous vous montrerons comment créer l’interface de chat et commencer à envoyer et recevoir des messages à l’aide de l’API GPT-3.

Création de l’interface de chat :

Maintenant que nous avons ajouté l’API GPT-3 à notre application, nous sommes prêts à créer l’interface de chat et à commencer à envoyer et recevoir des messages.

Pour construire l’interface de chat, nous allons utiliser ReactJS pour créer un formulaire simple avec un champ de saisie pour le message de l’utilisateur et une zone d’affichage pour les messages de chat. Nous ajouterons également quelques styles CSS de base pour rendre l’interface plus attrayante.

Tout d’abord, créez un nouveau fichier appelé components/Chat.jset ajoutez-y le code suivant :

importer React depuis ‘react’ ;
importer ‘./Chat.css’ ;

const Chat = () => {
return (
<div className=”chat-container”>
<div className=”chat-messages”>
{/* Ajouter des messages ici */}
</div>
<form className=”chat- form”>
<input type=”text” placeholder=”Entrez votre message” />
<button type=”submit”>Envoyer</button>
</form>
</div>
);
} ;

Annonces

exporter le chat par défaut ;

Ce code définit un Chatcomposant qui restitue un divélément avec la chat-containerclasse, qui contiendra les messages de chat et le formulaire de saisie. La chat-messagesclasse est utilisée pour la zone d’affichage et la chat-formclasse est utilisée pour le formulaire de saisie.

Ensuite, créez un nouveau fichier appelé components/Chat.csset ajoutez-y les styles suivants :

.chat-container {
largeur : 500px ;
marge : 0 automatique ;
bordure : 1px solide #ccc ;
rembourrage : 10px ;
}

.chat-messages {
hauteur : 300px ;
débordement-y : défilement ;
rembourrage : 10px ;
bordure : 1px solide #ccc ;
marge inférieure : 10px ;
}

Annonces

.chat-form {
afficher : flex ;
}

.chat-form input {
flex-grow : 1 ;
rembourrage : 5px ;
bordure : 1px solide #ccc ;
marge droite : 5 px ;
}

bouton .chat-form {
remplissage : 5px 10px ;
bordure : aucune ;
couleur de fond : #0099ff ;
couleur : #fff ;
}

Ces styles définissent la mise en page et l’apparence de l’interface de chat, y compris la taille, les marges, le rembourrage et les couleurs des différents éléments.

Enfin, nous devons mettre à jour le pages/index.jsfichier pour utiliser le Chatcomposant que nous venons de créer. Remplacez le code existant par ce qui suit :

importer le Chat depuis ‘../components/Chat’ ;

const Home = () => {
return (
<>
<Chat />
</>
);
} ;

exporter l’accueil par défaut ;

Ce code importe le Chatcomposant et l’utilise comme route par défaut pour l’application. Lorsque vous exécutez l’application à l’aide de la npm run devcommande et que vous l’ouvrez dans votre navigateur Web, vous devriez voir l’interface de chat avec un champ de saisie et une zone d’affichage.

Dans la section suivante, nous vous montrerons comment envoyer et recevoir des messages à l’aide de l’API GPT-3.

Envoyer et recevoir des messages :

Maintenant que nous avons construit l’interface de chat, nous sommes prêts à envoyer et recevoir des messages à l’aide de l’API GPT-3.

Pour envoyer un message, nous devons ajouter un gestionnaire d’événement de soumission de formulaire au Chatcomposant. Ce gestionnaire sera appelé lorsque l’utilisateur soumettra le formulaire, et il utilisera l’API GPT-3 pour envoyer le message de l’utilisateur et afficher la réponse du modèle dans l’interface de chat.

Annonces

Tout d’abord, mettez à jour le Chatcomposant pour inclure une variable d’état pour les messages de chat et une méthode pour ajouter un nouveau message :

import React, { useState } de ‘react’ ;
importer ‘./Chat.css’ ;

const Chat = () => {
const [messages, setMessages] = useState([]);

const addMessage = (message) => {
setMessages([…messages, message]);
} ;

return (
<div className=”chat-container”>
<div className=”chat-messages”>
{messages.map((message, index) => (
<div key={index}>{message}</div>
))}
</div>
<form
className= »chat-form »
onSubmit={(event) => {
event.preventDefault();
const input = event.target.elements.message;
const text = input.value;
input .value = ”;
// Envoyez le message au modèle GPT-3 et ajoutez la réponse au chat
// Ajoutez votre code ici…
}}
>
<input type=”text” placeholder=”Entrez votre message” name= » message” />
<button type= »submit »>Envoyer</button>
</form>
</div>
);
};

exporter le chat par défaut ;

Ce code ajoute une messagesvariable d’état au Chatcomposant, qui est un tableau de messages de chat. Il ajoute également une addMessageméthode, qui est utilisée pour ajouter un nouveau message au messagestableau.

Le Chatcomposant comprend également un onSubmitgestionnaire d’événements pour le formulaire, qui est appelé lorsque l’utilisateur soumet le formulaire. Ce gestionnaire empêche le comportement de soumission de formulaire par défaut, extrait le message de l’utilisateur du champ de saisie et efface le champ de saisie.

Ensuite, nous devons ajouter le code qui envoie le message de l’utilisateur au modèle GPT-3 et ajoute la réponse du modèle au chat. Pour ce faire, nous allons utiliser la openai.completionsméthode que nous avons utilisée précédemment pour tester l’API :

Annonces

importer openai depuis ‘openai’ ;

// Ajoutez ce code dans le gestionnaire d’événements onSubmit du formulaire…
openai.apiKey = « <votre clé API ici> » ;

openai.completions({
moteur : « text-davinci-002 »,
invite : texte,
max_tokens : 32,
n : 1,
arrêt : « . »,
température : 0,5,
}).then((response) => {
message const = response.data.choices[0].text ;
addMessage(message);
});

Ce code envoie le message de l’utilisateur au modèle GPT-3 à l’aide de la openai.completionsméthode, puis ajoute la réponse du modèle au chat à l’aide de la addMessageméthode.

Lorsque vous exécutez l’application et essayez d’envoyer un message, vous devriez voir la réponse du modèle apparaître dans l’interface de chat. Vous pouvez continuer à envoyer des messages et le modèle répondra d’une manière appropriée et naturelle.

Dans la section suivante, nous discuterons de certaines façons d’améliorer l’expérience de chat et de la rendre plus attrayante pour les utilisateurs.

Façons d’améliorer l’expérience de chat et de la rendre plus attrayante pour les utilisateurs

voici quelques façons possibles d’améliorer l’expérience de chat et de la rendre plus attrayante pour les utilisateurs :

• Réponses personnalisées : vous pouvez utiliser l’API GPT-3 pour former le modèle sur des sujets ou des scénarios spécifiques, puis utiliser le modèle formé pour générer des réponses plus personnalisées et pertinentes. Par exemple, si vous créez une application de chat pour un site Web de voyage, vous pouvez entraîner le modèle sur des questions courantes liées aux voyages, puis l’utiliser pour répondre aux questions des utilisateurs sur les destinations, les vols et les hôtels.
• Plusieurs utilisateurs : vous pouvez étendre l’application de chat pour prendre en charge plusieurs utilisateurs, leur permettant de discuter entre eux et avec le modèle GPT-3. Vous pouvez utiliser une base de données en temps réel, telle que Firebase, pour synchroniser les messages et les utilisateurs sur différents appareils et sessions.

Conclusion:

Dans cet article, nous vous avons montré comment utiliser l’API GPT-3 pour créer une application de chat Web simple à l’aide de ReactJS, JavaScript et NextJS. Nous avons commencé par configurer notre environnement de développement et créer une application NextJS, puis nous avons ajouté l’API GPT-3 et construit l’interface de chat. Enfin, nous avons discuté de certaines façons d’améliorer l’expérience de chat et de la rendre plus attrayante pour les utilisateurs.

En suivant les étapes de cet article, vous pouvez créer votre propre application de chat et expérimenter les puissantes fonctionnalités de GPT-3. Que vous soyez un développeur cherchant à créer des applications de traitement du langage naturel ou un débutant cherchant à en savoir plus sur GPT-3, cet article fournit un point de départ utile pour votre voyage. Bon codage !