🤖 Comment intégrer l'API de chat GPT-4 et GPT 3.5 dans votre prochain site web ou application
Vous cherchez à intégrer l'API de chat GPT-4 et GPT 3.5 dans votre prochain site web ou application ? Ne cherchez plus ! Dans cet article, nous vous montrerons comment construire et déployer une application codée à partir de zéro en utilisant la technologie serverless sur Microsoft Azure, et elle interagira directement avec OpenAI et ses API.
Table des matières
1. Introduction
2. Configuration d'OpenAI
3. Installation de Node.js et VS Code
4. Création d'un serveur REST simple
5. Interrogation d'OpenAI
6. Création d'une interface utilisateur
7. Rendre le chat interactif
8. Ajout de l'historique des messages
9. Déploiement sur Microsoft Azure
10. Activation de CORS
Introduction
GPT-4 et GPT 3.5 sont des modèles de langage puissants développés par OpenAI qui peuvent être utilisés pour générer du texte semblable à celui d'un humain. En intégrant ces modèles dans votre site web ou application, vous pouvez créer un chatbot qui peut converser avec les utilisateurs de manière naturelle et engageante. Dans cet article, nous vous montrerons comment intégrer l'API de chat GPT-4 et GPT 3.5 dans votre prochain site web ou application.
Configuration d'OpenAI
Pour commencer, vous devrez créer un compte avec OpenAI. Rendez-vous sur le site web d'OpenAI et sélectionnez "Produits" dans le menu supérieur, puis sélectionnez "Aperçu" et "Commencer" dans l'appel à l'action. Ici, vous pouvez vous connecter avec votre compte existant ou vous connecter avec Google ou créer un tout nouveau compte. Une fois connecté, vous serez dirigé vers le tableau de bord OpenAI, où vous pourrez accéder à la documentation, aux références API et aux exemples.
Installation de Node.js et VS Code
Avant de commencer, nous devrons installer Node.js et VS Code. Node.js est un runtime JavaScript qui nous permettra de créer un serveur REST simple, tandis que VS Code est un éditeur de code qui est livré avec de nombreux plugins formidables que nous pouvons utiliser pour rendre l'expérience de codage plus facile. Une fois que vous avez installé et lancé VS Code, créez un nouveau dossier pour ce projet et initialisez le projet en exécutant "npm init" dans l'option de terminal en bas à droite.
Création d'un serveur REST simple
Avec Node.js et VS Code installés, nous pouvons créer un serveur REST simple. Installez Express, OpenAI, body-parser et cors en exécutant "npm install express openai body-parser cors" dans le terminal. Ensuite, créez le tout premier fichier pour le projet, qui s'appellera index.js. Dans ce fichier, importez les modules nécessaires, configurez OpenAI et initialisez la configuration en appelant const openAI = new openAI API en passant la configuration que nous avons définie.
Interrogation d'OpenAI
Maintenant que notre serveur est configuré, nous pouvons interroger OpenAI. Nous interrogerons le modèle de chat en définissant une valeur constante appelée "completion" et cela utilisera async await. Nous définirons le modèle pour commencer et pour ce modèle, nous le définirons comme un gpt-3.5 turbo. Nous définirons les messages comme un tableau et ce tableau aura un objet avec deux valeurs principales : le rôle, qui commencera en tant qu'utilisateur, et le contenu, qui est le message lui-même.
Création d'une interface utilisateur
Pour créer une interface utilisateur, nous créerons un fichier appelé index.html et nous irons sur Google pour rechercher un starter HTML de base. Nous créerons un formulaire que l'utilisateur remplira avec une entrée et un bouton de soumission. L'entrée sera simplement un texte avec le nom "message" et l'ID "message", et le bouton sera simplement un bouton de soumission. Enfin, nous aurons un div supplémentaire ici qui sera le journal de chat où tous les messages seront affichés.
Rendre le chat interactif
Pour rendre le chat interactif, nous changerons cela d'une requête get à une requête post et écouterons les messages qui sont envoyés dans le cadre de cette requête post. Ce message peut être envoyé directement à l'API à l'intérieur du tableau et si vous le souhaitez, vous pouvez même collecter les messages sous forme de tableau afin d'avoir un historique et un historique.
Ajout de l'historique des messages
Pour ajouter l'historique des messages, nous enregistrerons l'historique sous forme de tableau de messages entre l'utilisateur et l'assistant avec un message système étant là au début pour donner un contexte sur la façon dont le chatbot devrait fonctionner. Nous mettrons à jour le message que nous envoyons au serveur pour qu'il soit directement le tableau de messages.
Déploiement sur Microsoft Azure
Pour déployer sur Microsoft Azure, nous créerons une fonction qui s'exécutera sans aucun serveur. Nous l'assignerons à Azure et créerons une application de fonctions. Nous sélectionnerons un dossier pour le projet ou celui sur lequel nous travaillons déjà, sélectionnerons une langue et un modèle. Enfin, nous sélectionnerons un déclencheur et lui donnerons un nom.
Activation de CORS
Pour activer CORS, nous nous rendrons sur Azure et activerons les API cores sur le côté gauche. Nous sélectionnerons l'étoile pour nous permettre d'y accéder depuis n'importe où.
Conclusion
Intégrer l'API de chat GPT-4 et GPT 3.5 dans votre prochain site web ou application est plus facile que vous ne le pensez. En suivant les étapes décrites dans cet article, vous pourrez créer un chatbot qui peut converser avec les utilisateurs de manière naturelle et engageante. Alors, qu'attendez-vous ? Commencez dès aujourd'hui !
Points forts
- Intégrer l'API de chat GPT-4 et GPT 3.5 dans votre prochain site web ou application
- Construire et déployer une application codée à partir de zéro en utilisant la technologie serverless sur Microsoft Azure
- Créer un chatbot qui peut converser avec les utilisateurs de manière naturelle et engageante
- Activer l'historique des messages et rendre le chat interactif
- Déployer sur Microsoft Azure et activer CORS
FAQ
Q: Qu'est-ce que GPT-4 et GPT 3.5 ?
R: GPT-4 et GPT 3.5 sont des modèles de langage puissants développés par OpenAI qui peuvent être utilisés pour générer du texte semblable à celui d'un humain.
Q: Comment intégrer l'API de chat GPT-4 et GPT 3.5 dans mon site web ou application ?
R: Suivez les étapes décrites dans cet article pour construire et déployer une application codée à partir de zéro en utilisant la technologie serverless sur Microsoft Azure.
Q: Puis-je activer l'historique des messages et rendre le chat interactif ?
R: Oui, en suivant les étapes décrites dans cet article, vous pouvez activer l'historique des messages et rendre le chat interactif.
Q: Comment déployer sur Microsoft Azure ?
R: Suivez les étapes décrites dans cet article pour créer une fonction qui s'exécutera sans aucun serveur.
