Créez des chatbots de type ChatGPT avec des connaissances personnalisées pour vos sites Web, à l’aide d’une programmation simple

Introduction

À la fin de 2022, il est fort probable que vous ayez entendu parler de ChatGPT et que vous ayez même été témoin de sa puissance en l’utilisant. ChatGPT est une technologie d’intelligence artificielle révolutionnaire qui permet aux utilisateurs d’avoir des conversations naturelles avec un chatbot très intelligent. Sa capacité unique à comprendre et à répondre au langage humain en a fait un choix populaire pour les entreprises qui cherchent à améliorer leur service client, ainsi que pour les personnes à la recherche d’une expérience de chat plus personnalisée.

Aussi impressionnant que soit ChatGPT, ce serait encore plus cool s’il y avait un moyen de l’intégrer à votre propre site Web et de le former avec des informations personnalisées. Imaginez pouvoir créer un chatbot adapté à votre entreprise ou capable de tenir des conversations intelligentes avec vos amis et votre famille.

Tout cela est possible avec des technologies qui ne sont qu’à un appel d’API et que vous pouvez intégrer de manière transparente dans des pages Web, des applications Web et des sites Web.

Dans cet article, je vais vous montrer comment créer un beau chatbot propulsé par GPT3, en utilisant HTML, CSS et JavaScript sur le client et PHP sur le serveur. Grâce au traitement du langage naturel des chaînes à l’ancienne, le chatbot recherche des sources d’informations pertinentes dans vos sources préparées sur mesure. Ensuite, il utilise les informations récupérées pour un apprentissage en quelques coups avec GPT-3 car il ajoute à l’entrée de l’utilisateur. La réponse produite est alors affichée, le tout dans une belle interface graphique comme celle attendue pour un chatbot à part entière. Le résultat global est un chatbot assez intelligent, comme ChatGPT, capable de répondre à des choses que GPT-3 ou ChatGPT ne connaissent pas, dans un format graphique agréable et facile à utiliser.

Ici, vous pouvez le voir en action, répondre aux questions que le GPT-3 normal ne connaît pas (par exemple, sur moi-même) mais qui sont ici récupérées à partir de certains textes personnalisés, et également répondre aux questions que le GPT-3 connaît par défaut formation (voir la question sur la déclaration des variables en JavaScript):

J’aime ça?

Vous êtes impatient d’insérer un chatbot similaire dans votre site Web ?

Alors, commençons!

Le cerveau

Le cœur de ce chatbot est GPT-3 (j’ai utilisé ici le dernier modèle davinci , appelé text-davinci-003 ) accessible via une bibliothèque PHP comme expliqué ici :

Dans ce tutoriel très détaillé, j’ai expliqué comment utiliser une fonction JavaScript dans une bibliothèque PHP qui gère les appels à l’API d’OpenAI pour les modèles GPT-3. L’appel JavaScript transmet une invite contenant une question de l’utilisateur et la clé API fournie par l’utilisateur (bien que, bien sûr, vous puissiez le fournir directement dans le code PHP, vous devrez alors payer pour les jetons consommés). GPT-3 répond ensuite par une complétion de texte à partir de laquelle la réponse du chatbot à l’entrée de l’utilisateur est extraite et affichée.

Si vous avez un site Web avec un contrôle total, vous pouvez simplement installer PHP… ou vous l’avez probablement déjà. Dans mon cas, PHP est déjà installé car j’utilise Altervista, un service d’hébergement gratuit incroyable :

Mon article sur la construction de bots GPT-3 date déjà d’environ 1 mois. Et depuis, j’ai beaucoup appris et fait de nombreuses expériences qui m’ont permis d’arriver à un « produit » bien meilleur.

Plus précisément, par rapport au chatbot décrit dans mon tutoriel précédent, j’ai maintenant proposé trois améliorations très importantes : la possibilité d’extraire sélectivement des informations à partir de paragraphes personnalisés par l’utilisateur, la possibilité de poursuivre une conversation fluide en la « mémorisant » au fur et à mesure, et l’intégration du système avec une belle interface graphique de type chat.

• La possibilité d’extraire de manière sélective des informations à partir de paragraphes personnalisés par l’utilisateur permet à votre chatbot de répondre à des questions qu’il devrait autrement refuser ou répondre sans certitude, risquant ainsi d’inventer des choses.
• La continuité vous permet d’utiliser des mots génériques tels que « ça », « eux », etc. pour faire référence aux objets dont vous venez de parler, mais le chatbot comprend à quoi vous faites référence. Ceci est essentiel pour une expérience fluide et pour avoir une conversation naturelle.
• Pendant ce temps, une belle interface graphique offre également une meilleure expérience utilisateur et permet à l’application de s’adapter correctement aux écrans de différentes tailles.

Extraction d’informations personnalisées

Pour extraire des informations personnalisées, j’ai essayé plusieurs approches basées sur la PNL « à l’ancienne ». J’ai fini par le faire de cette façon, ce qui a fonctionné le mieux:

Tout d’abord, au cœur de la démarche, j’ai mis en place un long paragraphe plein d’informations. C’est très long, certainement bien plus long que le nombre de jetons acceptés par GPT-3. Par conséquent, il ne peut pas être alimenté en totalité pour un apprentissage en quelques coups. C’est là que la PNL à l’ancienne aide : extraire des informations pertinentes, suffisamment courtes pour être introduites dans GPT-3.

Deuxièmement, lorsque l’entrée humaine est traitée, elle est nettoyée des mots vides, des symboles, des chiffres, etc., par une procédure simple qui finit par ne laisser que des mots significatifs (ou présumés pertinents). Chacun de ces mots est recherché dans le long paragraphe contenant les informations personnalisées (voir la troisième étape ci-dessous).

Pour nettoyer ces mots vides (ainsi que les nombres, les contractions, les symboles, les espaces répétés, etc.), j’utilise une approche assez simple basée sur des expressions régulières et de grandes listes de chaînes à rechercher.

Ces listes sont pénibles à préparer, alors servez-vous :

//Définir des listes de mots et de symboles à filtrer 
//Nombres et similaires 
var stopwordnumbers = ["une fois", "deux fois", "trois fois", "premier", "deuxième", "troisième", "quatrième", "cinquième" ”, “sixième”, “septième”, “neuvième”, “dixième”, “ 1 ”, “ 2 ”, “ 3 ”, “ 4 ”, “ 5 ”, “ 6 ”, “ 7 ”, “ 8 ”, " 9 ", " 0», « un », « deux », « trois », « quatre », « cinq », « six », « sept », « huit », « neuf », « dix », « onze », « douze » , "treize", "quatorze", "quinze", "seize", "dix-sept", "dix-huit", "vingt", "trente", "quarante", "cinquante", "soixante", "soixante-dix", " quatre-vingt", "quatre-vingt-dix", "cent", "centaines", "et", "-", "mille", "milliers", "million", "millions", "milliard", "milliards"] ; 
//Symboles 
var stopwordsymbols = [“+”,”-”,”*”,”%”,”/”,”?”,”!”,”^”,”'”,”\””,”,”, ”,”;”,”\\”,”.”] 
// Mots très courts et autres, compilés par moi à partir de plusieurs ressources dont https://github.com/Yoast/YoastSEO.js/blob/develop/src/ config/stopwords.js et https://gist.github.com/sebleier/554280 
var stopwordsmin3=[ "if" , "or" , "in", "un", "un", "cool", "bien", "ouais", "ouais", "mais", "oui", "non", "non", "non", "qc", " "quelque chose", "n'importe quoi", "dis", "moi", "je", "veux", ", "savoir", "demandé", "curieux", "demandé", "demander", "question" "répondre", "répondre", "phrase", "à propos de", "jusqu'à", "oui", "oui", "salut", "hé", "va", "pas", "oui", " est "," il ", " il ", " elle ", " ils ", " eux ", " les leurs ", " nous ", " notre ", " nous ", " vous ", " votre ", " le vôtre " , "a", "ah", "lol", "merci", " faites ", "s'il vous plaît", "s'il vous plaît", "plis", "xd", "attendez", "caca", "ouais", " non", "ok", "agir", "adj", "il y a", "ain", "tous", "et", "tout", "sont", "a's", "demander", "gros" "mais", "acheter", "peut", "cit", "co.", "com", "con", "cry", "c's", "did", "don", "due", "edu", "fin", "est", "etc", "loin", "peu", "réparer", " pour " "get", "gmt", "got", "gov", "avait "," a ", " hed ", " elle ", " hes ", " caché ", " lui ", " son ", " comment ", " htm ", " je serais ", " malade ", " je 'm'',''inc'',''int'',''isn'',''itd'','its',''ive'',''les'', laissez”,”'ll”,”los”,”low”,,”ltd”,,”man”,,”may”,,”men”,,”mil”,,”mrs”,,”mug”,,”nay”,,”net” , " nouveau ", " non ", " ni ", " nos ", " pas ", " maintenant ", " off ", " ohh ", " ancien ", " omg ", " un ", " ord ", " org ", " notre ", " out ", " propre ", " par ", " pas ", " par ", " put ", " que ", " ran ", " ref ", " run ", " vu " ,"dire", "sec", "voir", "elle", "six", "sous", "sup", "dix", "le", "jusqu'à", "pourboire", "tis", " trop », « top », « essayez », « c'est », « deux », », « ups », « utilise », », « ve », », », « à savoir », « vol », « était », », way ", "web", "marié", "qui", "pourquoi", "a gagné", "www", "oui", "encore", "tu", "capable", "abst", "aint", "aussi", "au milieu", "zone", "aren", "arpa", "demande", "auth", "loin", "retour", "été", "meilleur", "facture", "biol ", "les deux", "appel", "est venu", "ne peut pas", " cas ", "cmon", "viens", "copie", "ose", "date", "chère", "didn", "fait", "fait", "ne pas", "en bas", "chaque", " autre"," se termine ", " même ", " jamais ", " visage ", " fait ", " ressenti ", " fifier ", " remplir ", " trouver ", " feu ", " cinq ", " quatre ", "gratuit", " de " "complet", "a donné", "obtient", "donne", "va", "parti", "bon", "hadn", "moitié", "hasn", "avoir ", "il avait", "enfer", "aide", "ici", "la sienne", "il est", "haut", "maison", "html", "http", "je. e .", "ibid", "je vais", "inc.", "dans", "n'est pas", "ce serait", "ça va", "c'est", "j'ai", "rejoindre" "juste", "garder", "gardé", "clés", "gentil", "savait", "sait", "dernier", "moins", "de peur", "laisse", "comme", " ligne ", "long", "regarder", "fait", "faire", "beaucoup", "moyen", "moulin", "le mien", "miss", "plus", "la plupart", "bouger" ,"msie", "beaucoup", "doit", "nom", "près de", "besoin", "suivant", "neuf", "aucun", " null"," d'accord ", " une fois ", " ceux ", " seulement ", " sur ", " ouvert ", " le nôtre ", " sur ", " page ", " partie ", " passé ", " plus ", "pmid", "met", "refs", "anneau", "chambre", "dit", "même", "dit", "semble", "vu", "voit", "auto", "envoyé" "," shan ", " hangar ", " shes ", " spectacle ", " côté ", " site ", " certains ", " bientôt ", " arrêter ", " tel ", " bien sûr ", " prendre ", "dire", "tester", "texte", "que", "cela", "eux", "puis", "ils", "mince", " ce ", "tu", "à travers", "ainsi ”,”jusqu'à”,”'tis”,”pris”,,”tourner”,,”twas”,,”vers”,”sur”,,”utilisé”,,”utilise”,,”uucp”,,”très”,,”vols” , "veux", "était", "façons", "nous ferions", "bien", "allons", "étaient", "nous", "quoi", "quand", "caprice", "qui" , "qui", "qui", "va", "souhaite", avec",              ", ,                                                                      , "                                         , "                             , " "n'est pas", "autoriser", "seul", "le long de", "parmi", "à part", "zones", "arent", "survenir", "à côté", "demandé", "dos", "a commencé", "commencer", "être", "en dessous", "brièvement", "ne peut pas", "cas", "cause", "clair", "clic", "allez", "vient ","pourrait","n'a pas", "ne fait pas", "en train de faire", "ne fait pas", "des bas", "début", "huit", "vide", "terminé", "et-al", "chaque", "visages", "faits", "moins", "cinquième", "cinquante", "trouve", "premier", "avant", "quarante", "trouvé", "avant", "entièrement "," donné ", " donne ", " va ", " marchandises ", " génial ", " groupe ", " n'avait pas ", " n'a pas ", " refuge ", " il va ", " bonjour ", " d'où ”,”here”,”how'd”,,”how's”,,”index”,,”inner”,,”isn't”,,”it'll”,”itse””,,”keeps”,,”known”,” sait », « grand », « plus tard », « moins », soit's ", "aimé", "regarde", "inférieur", "fait", "peut-être", "peut-être", "signifie", "pourrait", "moins", "doit", "besoin", "besoins" ", "jamais", "plus récent", "personne", "noté", "roman", "souvent", "plus ancien", "son", "ouvre", "ordre", "autre", "devrait", "en raison de", "pages", "pièces", "lieu", "point", "fier", "tout à fait", "droit", "pièces", "rond", "semble", "sept", "doit "," Shant "," elle avait "", "shell", "elle est", "montré", "montre", "côtés", "depuis", "soixante", "petit", "désolé", "état ", "encore", "pris", "tend", "merci", "merci", "c'est", "leur", "là", "ceux-ci", "ils", "épais", "chose", "pensez", "troisième", "ceux", "trois", "aujourd'hui", "essayé", "essaie", "vraiment", "tourne", "c'était", "deux fois", "sous", " jusqu'à ce que "," en utilisant ", " valeur ", " veut ", " n'était pas ", " nous allons ", " puits ", " nous sommes ", " nous avons ", " nous avons ", " qu'est-ce que ", " où ", " qui ", " tandis que", "qui avait", "tout", "tout", "qui est", "dont", "pourquoi", "pourquoi", "largeur", "ne sera pas", "mots", "fonctionne" ", "monde", "serait", "années", "tu aurais", "tu vas", "jeune", "tu es", "le vôtre", "tu es", "à l'étranger", "à travers", "permet ", " presque ", " toujours ", " au milieu ", " montant ", " de toute façon ", " n'importe qui ", " de toute façon ", " apparaissent ", " ne sont pas ", " autour de ", " demandant ", " soutenus "," est devenu ", " est devenu ", " avant ", " commence ", " derrière ", " êtres ", " à côté de ", " mieux ", " au-delà ", " en bas ", " ne peut pas ", " cause ". "ne pourrait pas", "bien sûr", "darent", "détail", "n'a pas", "diffère", "ne fait pas", "abattu", "pendant", "effet", "quatre-vingts", "soit", "onze", "fin", "assez", "uniformément", "sauf", "assez", "ancien", "donner", "obtenu", "groupes", "n'avait pas", "à peine", "n'a pas", "n'a pas", "ayant", "par la présente", "dans la présente", "voici", "plus haut", "lui" ", "ici", "comment va-t-il", "en effet", " à l'intérieur ", " vers l'intérieur ", " lui-même ", " dernièrement ", " le plus récent ", " dernier ", " longueur ", " probablement ", " peu ", " plus long ", " principalement ", " faire ", " peut-être " t ", "membre", "simplement","pourrait", "surtout", "ne doit pas", "moi-même", "à savoir", "presque", "nécessaire", "n'a pas besoin", "jamais", "le plus récent", "quatre-vingt-dix", "personne", "non -un", "numéro", "obtenir", "le plus ancien", "ouvert", "commandes", "autres", "séparé", "placé", "lieux", "s'il vous plaît", "points", "mal ", plutôt", "vraiment", "récent", "dire", "deuxième", "voir", "semblait", "moi", "ne doit pas", "elle va", "devrait", "montré", "montré", "états", "système", "prenant", "merci", "c'est tout", "c'est", "cela", "le leur", "de là", "il y a", "il y a ", "ils feraient", "ils vont", "ils sont", "ils ont", "épais", "des choses", "pense", "trente", "bien que", "à travers", "vers", "en essayant ", "tourné", "douze", "vingt", "à moins que", "contrairement", "utile", "contre", "voulait", "n'était pas", "bien-b", "n'était pas", "Qu'est-ce que", "Qu'est-ce que", "Qu'est-ce que", "Quoi", "D'où", "Quand", "Quand", "Où", "Alors que", "Qui va", "Pourquoi va-t-il" ", "largement", "dans", "merveille", "travaillé", "wouldn", "tu vas", "tu es", "tu as", "adopté", "affecte", "contre ","déjà","parmi", "un autre", "n'importe qui", "plus", "de toute façon", "affreusement", "soutien", "parce que", "devient", "croire", "en plus de", "entre", "milliard "," brièvement ", " légende ", " certains ", " changements ", " clairement ", " contenir ", " ne pourrait pas ", " n'osera pas ", " malgré ", " ne pas ", " downing ", "exactement", "exemple", "plus loin", "quinze", "suit", "pour toujours", "en avant", "plus loin", "général", "devenir", "plus grand", "regroupé", "arrive ", " n'ont pas ", " elle-même ", " le plus élevé ", " lui-même ", " quoi qu'il en soit ", " cependant ", " cent ", " ignoré ", " dans la mesure où ", " au lieu de ", " en grande partie ", " le plus long ", "recherche", "membres", "peut-être", "million", "ne doit pas", "doit avoir", "avoir besoin", "n'a pas besoin", "ni", "rien", "nulle part" ", "nombres", "omis", "ouverture", "commandé", "ne devrait pas", "extérieur", "global", "séparation", "peut-être", "pointé", "présent", "problème", "rapidement", "facilement", "cordialement", "lié", "résultats", "secondes", "section", "semblant", "sérieux", "soixante-dix", "plusieurs", "devrait ne", "montrant ","similaire","sincère", "plus petit", "un jour", "d'une manière ou d'une autre", "quelqu'un", "préciser", "suggérer", "qui va", "qui a", "par là", "il y aurait", "il y a", "il y a", "il y a", "il y a", "il y a", "il y a", "ils vont", "ils sont", "ils ont", "bien que", "pensée", "à travers", "vers", "tourner", "annuler", "vers le haut", "généralement", "divers", "vouloir", "page Web", "site Web", "bienvenue", "weren 't ", "qu'est-ce qui va", "qu'est-ce que", "quand va", "alors que", "par quoi", "où ?", "où", "où est", "si", "où" ", " quiconque ", " disposé ", " sans ", " travailler ", " ne voudrait pas ", " plus jeune ", " en fait ", " affecté ", " bien que ", " parmi ", " annoncer ", " quoi que ce soit ", "n'importe où", "en arrière", "devenir", "ordinateur", "considérer", "contient", "ne pourrait pas", "aurait pu", "décrire", "directement", "douteux", "entièrement "," toujours ", " tout le monde ", " suivi ", " anciennement ", " plus loin ", " le plus grand ", " groupement ", " ci-après ", " page d'accueil ", " dans la mesure où ", " indiquer ", " intérêt ", "récemment","de même", "en attendant", "pourrait pas", "pourrait avoir", "de plus", "netscape", "normalement", "obtenu", "opposé", "commander", "ne devrait pas", "pointant", "possible", "éventuellement", "présente", "probablement", "problèmes", "rapidement", "fourni", "fournit", "récemment", "recherche", "réservé", "résultat" ", " deuxièmement ", " raisonnable ", " ne devrait pas ", " légèrement ", " le plus petit ", " quelqu'un ", " quelque chose ", " parfois ", " quelque peu ", " fortement ", " il y aura ", " il y aura 're ", " il y a ", " approfondi ", " pensées ", " mille ", " ensemble ", " trillion ", " peu probable ", " utilement ", " peu importe ", " quand ", " où ", "partout", "quiconque", "n'aurait pas", "aurait", "le plus jeune", "vous-même", "capable de", "selon", "affectant", "aux côtés de", "disponible", "à l'envers", "au début", "certainement", "actuellement", "décrit", "différent", "vers le bas", "ailleurs", "tout le monde", "après", "plus loin", "généralement", "salutations" ", "ci-après", "espérons-le", "immédiat", "important", "indiqué","indique", "intérêts", "invention", "entre-temps", "microsoft", "nécessaire", "jamais", "évidemment", "sinon", "nous-mêmes", "compte de pages", "présenté", "principalement ", " concernant ", " résultant ", " sérieusement ", " ne devrait pas ", " aurait dû ", " de la même manière ", " quelque chose ", " parfois ", " quelque part ", " spécifié ", " par conséquent ". "                            »                                                            , » ", "certainement", "surtout", "tout", "partout", "promotion", "importance", "intéressé", "en particulier", "présentant", "vraisemblablement", "auparavant", "raisonnablement", "indépendamment de", "relativement", "spécifiant", "eux-mêmes", "eux-mêmes", "par la suite", "à fond", "tout au long de", "dessous", "utilité", "après quoi", "vous-mêmes", "en conséquence" ””approprié”,”considérant”,”différemment”,”en outre”,”immédiatement”,"information", "intéressante", "nécessairement", "néanmoins", "potentiellement", "significative", "par conséquent", "néanmoins", "particulièrement", "respectivement", "spécifiquement", "avec succès", "suffisamment ", "approximativement", "correspondant", "principalement", "de manière significative", "essentiellement", "malheureusement", "nonobstant"]

function  cleantext ( txtin,removenumbers,removesymbols,removewordsmin3, removespaces ) 
{ 
 //Supprime les contractions
 txtin = txtin. remplacer ( /\'m/g ,' am') 
txtin = txtin. remplacer ( /\'re/g ,' are') 
txtin = txtin. remplacer ( /\blet\'s\b/g ,' laissez- nous') 
txtin = txtin. remplacer ( /\'s/g ,' is') 
txtin = txtin. remplacer ( /ain\'t/g ,' n'est-ce pas') 
txtin = txtin. remplacer ( /n\'t/g ,' not')
txtin = txtin. remplacer ( /\'ll/g ,' will') 
txtin = txtin. remplacer ( /\'d/g ,' would') 
txtin = txtin. remplacer ( /\'ve/g ,' have') 
txtin = txtin. remplacer ( /\lemme/g ,' laissez- moi') 
txtin = txtin. remplacer ( /\donne-moi/g ,' donne-moi') 
txtin = txtin. remplacer ( /\wanna/g ,' want to') 
txtin = txtin. remplacer ( /\va/g ,' va') 
txtin = txtin. remplacer ( /ru /g,'êtes-vous') 
txtin = txtin. remplacer ( /\bim\b/g ,'je suis') 
txtin = txtin. remplacer ( /\bwhats\b/g ,'ce qui est') 
txtin = txtin. remplacer ( /\bwheres\b/g ,'où est') 
txtin = txtin. replace ( /\bwhos\b/g ,'who is') 
 
 //Supprime les nombres 
 if (removenumbers > 0 ) { 
  for (i= 0 ;i<stopwordnumbers. length ;i++) 
  { 
   var re = new  RegExp (“\\ b”+nombres de mots vides[i]+”\\b”, 'g'); 
   txtin = txtin.remplacer (re,””) 
   txtin = txtin. remplacer ( /[0–9]/g , " "). replace ( / \. /g ," ") 
  } 
} 
 
 // Supprime des mots (très longue liste !) 
 if (removewordsmin3 > 0 ) { 
  for (i= 0 ;i<stopwordsmin3. length ;i++) 
  { 
   var re = new  RegExp (“\\b”+stopwordsmin3[i]+”\\b”, 'g'); 
   txtin = txtin. replace (re,””) 
  } 
} 

 //Supprime les symboles 
 if (removesymbols > 0 ) { 
  for (i=0 ;i<symboles de mots vides. length ;i++) 
  { 
   var re = new  RegExp ("\\"+stopwordsymbols[i], 'g'); 
   txtin = txtin. replace (re,””) 
  } 
} 

 //Supprime les espaces 
 if (removespaces > 0 ) { txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin.remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); txtin = txtin. remplacer ( / /g ," "); } 
 
 retourtxtin. rogner () 
}

Troisièmement, chaque mot de la liste nettoyée ci-dessus est recherché à l’intérieur du paragraphe d’information. Lorsqu’un mot est trouvé, la phrase entière qui l’inclut est extraite. Toutes les phrases trouvées pour chacun des mots pertinents sont rassemblées dans un paragraphe qui est ensuite transmis à GPT-3 pour un apprentissage en quelques coups.

Enfin, ce paragraphe de phrases pertinentes est ajouté à une invite de base conçue pour définir GPT-3 comme un bot qui doit répondre aux questions, et l’entrée de l’utilisateur est ajoutée à la fin. Ensuite, tout cela est envoyé à GPT-3 via l’API (j’utilise maintenant davinci003 ). Lorsque la réponse de GPT-3 est reçue, l’invite complète est supprimée, ce qui entraîne uniquement la réponse à l’entrée de l’utilisateur. Toute cette dernière étape est essentiellement la même que dans mon application originale décrite dans mon tutoriel précédent.

Continuité

Pour assurer la continuité, j’enregistre toutes les entrées de l’utilisateur et les sorties du chatbot dans une chaîne continue. Ainsi, chaque fois que j’appelle GPT-3, j’utilise l’invite de base suivie de cet historique de toutes les entrées de l’utilisateur et des réponses du chatbot, suivies des phrases extraites du paragraphe d’information, puis des questions, comme expliqué ci-dessus.

L’invite entière envoyée à GPT-3 consiste-t-elle en une concaténation de :

Paragraphe de base définissant le fonctionnement du bot | Conversation menée jusqu’à présent | Phrases extraites des paragraphes d’information | Entrée utilisateur

De cette façon, le chatbot comprend automatiquement le flux de la conversation, aidant à maintenir son flux logique. Et comme nous l’avons vu précédemment, chaque appel à GPT-3 peut inclure des informations extraites d’un paragraphe personnalisable.

Une belle interface graphique

Une interface graphique est un aspect important d’un programme car elle permet aux utilisateurs d’interagir avec lui d’une manière plus intuitive et visuellement attrayante. Une interface graphique bien conçue peut rendre un programme plus convivial, plus facile à naviguer et plus efficace à utiliser. Au contraire, une interface graphique mal conçue peut rendre un programme difficile à utiliser et décourager les utilisateurs de l’utiliser.

L’interface graphique de mon tutoriel précédent avait l’air horrible !

Pour créer une meilleure interface graphique, il est utile de formater votre HTML avec du CSS, qui peut facilement contrôler la mise en page, les couleurs, les polices et d’autres éléments de style d’une page Web ou d’une application Web, sans avoir besoin d’aucune programmation réelle. CSS peut vous aider à créer de belles interfaces graphiques en appliquant un style cohérent aux éléments d’une page Web, en la rendant visuellement attrayante et plus facile à naviguer, et en s’adaptant également automatiquement, par exemple aux écrans de différentes tailles.

Mais… vous devez connaître le CSS, et je ne suis pas très doué pour ça ! Heureusement, ChatGPT en sait assez sur la façon de coupler HTML et CSS. Je ne vais donc pas vous mentir : 90 % des CSS de mon application ont été créés par ChatGPT – pas tous automatiquement, car j’ai dû demander plusieurs suggestions.

Voici à quoi ressemble le CSS de mon nouveau chatbot. Notez où vous voyez  » /* Ajouter cette règle à…  » c’est ChatGPT répondant à mes questions spécifiques sur la façon de formater certains styles de manière spéciale.

< style > #chatbot { largeur : 90 % ; hauteur : 90 % ; bordure : 1px solide #ccc ; rayon de bordure : 4 px ; débordement : automatique ; 
/* Ajoutez cette règle pour définir la couleur d'arrière-plan sur gris clair */ background-color: lightgrey; /* OU ajoutez cette règle pour définir la couleur d'arrière-plan sur jaune clair */ background-color: lightyellow;} 
#conversation { padding: 10px;} 
.message { margin-bottom: 5px; rembourrage : 8px ; rayon de bordure : 4 px ; largeur : 80 % ; /* Ajoutez cette règle */ border: 1px solid darkgrey; marge-gauche : auto ; margin-right : auto ;} 
.user { background-color : #eee ; /* Ajouter cette règle */ background-color: lightgreen; /* Ajouter cette règle */ margin-left: auto; marge-droite : 0 ;}
.chatbot { couleur d'arrière-plan : #ddd ; /* Ajouter cette règle */ background-color: white; /* Ajouter cette règle */ margin-left: 0; margin-right : auto ;} 
#chatbot-form { display : flex ; marge supérieure : 10px ; marge gauche : 5 % ; largeur : 90 % ; padding : 15px ;} 
#chatbot-input { flex-grow : 1 ; rembourrage : 10px ; bordure : 1px solide #ccc ; border-radius : 4px ;} 
#settingsdiv { flex-grow : 1 ; rembourrage : 5px ; bordure : 1px solide #ccc ; rayon de bordure : 3 px ; marge gauche : 5 % ; marge droite : auto ; width : 100 % ;} 
/*#apikey { flex-grow : 1 ; rembourrage : 5px ; bordure : 1px solide #ccc ; rayon de bordure : 3 px ; marge gauche : 5 % ; marge droite : auto ; width : 50 % ;}*/ 
button[type="submit"] { margin-left : 10px ; rembourrage : 10px ; bordure : aucune ; couleur de fond : #0084ff ; couleur : #fff ; curseur : pointeur ; border-radius : 4px ;} </ style>

Si vous voulez en savoir plus sur la façon dont j’utilise ChatGPT pour m’aider à coder, consultez ceci :

Conclusion + évolution possible et applications de ces chatbots

En conclusion, dans cet article, j’ai présenté une méthode pour créer des chatbots propulsés par GPT-3 qui peuvent être intégrés dans des sites Web et « formés » avec des informations personnalisées (avec ces citations, je veux dire qu’il ne s’agit pas d’une formation formelle mais juste de quelques coups apprentissage). Le résultat de l’exemple présenté ici est un chatbot assez « intelligent » avec une belle interface graphique, un peu comme celle de ChatGPT, qui peut répondre à un large éventail de questions et de sujets, y compris certains sujets très spécifiques que le GPT-3 ordinaire ne connaîtra pas.

Les chatbots construits de cette manière sont capables de comprendre et de répondre au langage humain, avec trois améliorations clés par rapport à mon chatbot décrit précédemment : la capacité d’extraire sélectivement des informations à partir de paragraphes personnalisés par l’utilisateur, la capacité de poursuivre une conversation fluide et l’intégration avec un joli interface graphique de type chat.

L’exemple met davantage en évidence la puissance de la programmation Web complète, ici basée sur HTML, CSS et JavaScript sur le client et PHP sur le backend. Cela démontre également la puissance de programmes très complexes comme GPT-3 accessibles par programmation via des API.

Dans sa forme actuelle, cet outil fonctionne comme un cadre sur lequel construire rapidement des chatbots automatisés pour diverses applications telles que : aider les entreprises à fournir un service client, offrir des expériences de chat personnalisées, servir d’assistants personnels basés sur le Web, récupérer des informations très spécifiques auprès de grands articles complexes, guider les visiteurs d’un site Web, et bien plus encore.

→ Pour essayer ce chatbot, procurez-vous une clé API d’OpenAI ici