Comment Intégrer un GPT Personnalisé Dans Votre Site Web (Guide Étape par Étape)
By Bo Sar · 2024-03-17
Dans cette vidéo, je vais vous montrer comment intégrer un GPT personnalisé sur votre site Web. Si vous avez déjà construit un GPT personnalisé, vous êtes prêt à l'ajouter à votre site. Je présenterai deux méthodes d'intégration, une sans code et l'autre un peu plus avancée. Suivez ce tutoriel étape par étape pour une intégration réussie.
Intégrer un GPT personnalisé sur votre site Web
- Dans cette vidéo, je vais vous montrer comment intégrer un GPT personnalisé sur votre site Web. Dans ma vidéo précédente, nous avons construit un GPT personnalisé à l'aide d'un constructeur de GPT. Si vous ne l'avez pas encore regardée, je vous recommande de commencer par là. À la fin de cette vidéo, vous aurez une compréhension claire de la manière d'ajouter un GPT personnalisé à n'importe quel site Web. Je vais vous présenter deux méthodes pour cette intégration. La première ne nécessite aucun code, tandis que la deuxième est un peu plus avancée, mais vous n'avez pas besoin de connaissances techniques. Je vous fournirai un tutoriel étape par étape. Tout ce que vous avez à faire est de copier et coller exactement ce que je vous montre à l'écran, et tous les modèles nécessaires seront fournis dans la description de la vidéo. Avant de plonger dans le tutoriel lui-même, il est important de comprendre la différence entre les GPT et l'API d'assistant. Bien qu'ils soient fondamentalement les mêmes, leurs applications prévues sont différentes. Les GPT sont conçus comme des produits B2C (entreprise à consommateur) adaptés aux applications orientées vers le consommateur. Ils vous permettent de créer un GPT avec des instructions personnalisées et une base de connaissances personnalisée, généralement utilisés à des fins personnelles. D'un autre côté, l'API d'assistant est B2B (entreprise à entreprise) et vise les applications orientées vers les entreprises. Elle dispose également des mêmes instructions personnalisées et base de connaissances, mais peut fonctionner de manière programmable, ce qui signifie que vous pouvez construire un code pour appeler cet assistant via une API. Cela permet son intégration dans diverses applications, sites Web ou tout ce que vous créez, c'est ce que nous allons faire. Nous utiliserons un code qui créera l'assistant, ensuite nous le connecterons à un constructeur de chatbot, puis nous le placerons sur un site Web. Bien sûr, de nombreuses start-ups ont déjà construit toute cette intégration et moyennant des frais d'abonnement, elles offrent une interface conviviale où vous pouvez ajouter vos instructions personnalisées et votre base de connaissances, et intégrer votre GPT sur un site Web en quelques clics. À titre d'exemple, je vous montrerai Chatbase Doco auquel vous pouvez accéder via le lien dans la description ci-dessous. Pour ce tutoriel, je vais utiliser ce site Web d'exemple et mon objectif est d'ajouter un chatbot de support client qui sera formé sur ma base de connaissances et connecté à un GPT.
Intégrer un GPT personnalisé sur votre site Web
Création d'un Chatbot avec GPT-3.5 Turbo en Français
- Une fois que vous vous êtes inscrit, vous pouvez cliquer sur le nouveau bouton de chatbot et la première chose à faire est d'ajouter vos fichiers de connaissances, il vous suffit de les faire glisser et de cliquer sur créer le chatbot, et c'est tout ! Le chatbot est créé, il est entraîné sur le fichier que je viens de joindre et il est connecté à un modèle GPT. Maintenant, je peux le personnaliser et ensuite l'ajouter à mon site web. Je vais donc dans les paramètres et ici, tout comme vous ajoutez des instructions personnalisées dans un GPT Builder, c'est une fenêtre où vous pouvez également ajouter vos propres instructions personnalisées. Il y en a une par défaut que vous pouvez laisser, mais je vais la remplacer. Je l'ai préparée, je vais juste la coller. Ici, vous pouvez voir le modèle GPT qui est utilisé sur un plan payant, vous pouvez sélectionner le GPT 4 Turbo, mais avec l'essai gratuit, il n'y a que le GPT 3.5 Turbo disponible. Je clique simplement sur enregistrer. Lorsque vous allez dans l'onglet des sources, une fonctionnalité intéressante ici est qu'en plus d'ajouter des fichiers de connaissances, vous pouvez également ajouter simplement l'URL de votre site web et il va parcourir tous les liens pour recueillir directement les connaissances de votre site web. Cela peut être très pratique dans certains cas, mais dans mon exemple, je vais simplement utiliser le document de connaissance que j'ai téléchargé au début. Nous avons maintenant personnalisé notre base de connaissances et nos instructions. Si vous allez dans les paramètres, puis dans l'interface de chat, vous pouvez modifier l'apparence du chatbot sur votre site web. Vous pouvez modifier les messages initiaux, changer le thème, télécharger la photo de profil du chatbot, indiquer le nom à afficher, et ainsi de suite. Une fois que vous êtes satisfait de la conception de votre chatbot, cliquez sur Intégrer sur le site, puis rendez-le public. Tout ce que vous avez à faire maintenant, c'est de copier ce script et de le coller dans le code de votre site web. Ensuite, lorsque je retourne sur ce site web d'exemple, l'icône de chatbot est apparue. Interrogeons-le pour voir comment il fonctionne. Quelles sont vos options d'adhésion ? Et il nous fournit une information contenue dans le fichier de connaissances que j'ai ajouté au début. Voilà, notre objectif est atteint ! Le chatbot est là, il fonctionne, il est connecté à un modèle GPT. Évidemment, il y a quelques inconvénients à utiliser des tierces.
Création d'un Chatbot avec GPT-3.5 Turbo en Français
Création d'un Assistant API personnalisé avec OpenAI
- Les services de tierces parties comme celui-ci présentent d'abord le facteur coût, vous devez payer leurs frais car ils ont besoin de générer des revenus. Deuxièmement, il y a un manque de flexibilité par rapport à l'utilisation de votre propre code, car ils décident quel modèle GPT est disponible pour vous et vous ne pouvez pas non plus effectuer d'actions avancées intéressantes avec cet assistant API car vous n'avez tout simplement pas un accès direct à celui-ci. Passons maintenant à la deuxième méthode qui consiste à créer un Assistant API directement sur la plateforme OpenAI, en le connectant à un chatbot, puis en l'intégrant dans un site web. Notre objectif reste exactement le même : nous allons construire un chatbot personnalisé basé sur la connaissance qui servira d'assistant de support client sur notre site web d'exemple. Ce processus implique deux composantes principales : le back end et le front end. Pour le back end, nous utiliserons RIT qui hébergera le code implémentant la fonctionnalité de notre chatbot. Pour le front end, nous utiliserons Voiceflow pour concevoir et construire l'interface du chatbot. Ensuite, nous relierons RIT, notre back end, à Voiceflow, notre front end, leur permettant de communiquer entre eux via des appels API. Je comprends que des termes comme back end, front end et appels API semblent un peu techniques, mais il n'y a vraiment pas lieu de s'inquiéter. Vous devrez simplement copier et coller ce que je démontre et il n'est pas nécessaire d'écrire une seule ligne de code pour commencer. Vous devez vous inscrire à RIT et copier le code fourni dans la description de la vidéo. Je tiens également à donner crédit à Liam Otley, le gars qui a réellement construit le code et l'a partagé avec la communauté. C'est très apprécié. Pour dupliquer ce code, il vous suffit de cliquer sur Fork ici, de lui donner un nom et de cliquer sur Fork ici. Voici le code : il créera un nouveau système ou en utilisera un existant, démarrera des fils de conversation, générera des réponses, et ainsi de suite. Si vous souhaitez comprendre comment ce code est construit, voici une idée : copiez tout le code et collez-le dans ChatGPT, puis demandez une explication. C'est un excellent moyen d'apprendre si tel est votre objectif. Mais si vous voulez juste l'utiliser pour ajouter un GPT personnalisé à votre site web, la seule chose que vous devez réellement changer, comme toujours, ce sont les instructions personnalisées plus...
Création d'un Assistant API personnalisé avec OpenAI
Configuration du système de chatbot avec OpenAI et Voiceflow
- Pour configurer votre système de chatbot avec OpenAI et Voiceflow, vous devez suivre quelques étapes importantes. Tout d'abord, vous devez ajouter votre clé secrète OpenAI sur la plateforme OpenAI. Cela vous permettra d'utiliser le modèle GP4 Turbo pour votre assistant. Assurez-vous d'ajouter des crédits à votre balance pour pouvoir utiliser cette fonctionnalité. Ensuite, vous devrez créer une nouvelle clé secrète API et l'ajouter à votre configuration. Une fois cela fait, votre back-end sera prêt à être utilisé. Chaque fois que vous exécutez le code, il vérifiera si un fichier assistant existe, sinon il en créera un. Ensuite, vous devrez configurer Voiceflow, qui est l'outil front-end pour construire votre chatbot. Vous pouvez utiliser le modèle fourni dans la description de la vidéo pour démarrer. Assurez-vous d'ajouter l'URL de votre Replit pour permettre la communication entre le code et Voiceflow. Enfin, vous pouvez tester votre chatbot en lui posant des questions pour voir s'il fonctionne correctement.
Configuration du système de chatbot avec OpenAI et Voiceflow
L'avènement de l'IA dans les affaires et la vie quotidienne
- Pendant des heures, vous pouvez suivre ce qui se passe ici dans la console repit, ainsi, si quelque chose ne fonctionne pas, vous pourrez le voir. Notre Chatbot a répondu correctement que les heures d'ouverture de Neo James sont du lundi au vendredi de 5h00 à 22h00, exactement comme stipulé dans notre fichier de connaissances. Enfin, la dernière étape consiste à ajouter ce chatbot à notre site. En cliquant sur publier, donnons-lui un nom et publions. Maintenant, nous pouvons intégrer le widget. Tout comme dans la première méthode avec Chatbase, nous avons ce script à copier et à coller dans le code de notre site web. Vous pouvez également modifier l'apparence ici. J'ai déjà ajouté quelques couleurs, une image d'assistant et un avatar d'assistant, mais vous pouvez les modifier à votre guise. Maintenant, notre site est propre, sans chatbots pour le moment. Passons au code du site lui-même et juste en dessous des autres scripts, je collerai notre script Voiceflow, enregistrons et rechargeons notre site. Notre widget s'affiche maintenant dans le coin, j'ai choisi la pire couleur possible, je pense, mais ce n'est pas grave. Testons comment cela fonctionne : quelles sont vos options d'adhésion ? Et voilà, il a énuméré toutes les options d'adhésion incluses dans notre fichier de connaissances. Tout fonctionne bien. Modifions simplement les couleurs dans Voiceflow et rendons-le un peu plus attrayant. Je pense que le noir serait meilleur. Rechargeons encore une fois ce site, et voilà, maintenant l'icône du chatbot et la mise en page sont en noir, cela me semble bien meilleur. J'espère que vous avez trouvé ce guide utile. Il y a 6 mois, dans ma vidéo sur comment démarrer une entreprise en utilisant des outils d'IA, j'ai déjà discuté du temps et de l'argent que vous pouvez économiser avec l'IA. Il y a juste un an, la plupart des entreprises s'appuyaient sur des équipes de support client composées de vraies personnes pour répondre à ces questions de base. Maintenant, la plupart de ces demandes peuvent être traitées efficacement et facilement par un tel assistant IA formé avec votre base de connaissances personnalisée et alimenté par un modèle GPT. J'espère que vous avez déjà commencé à tirer parti de l'IA dans votre entreprise. C'est juste une des nombreuses applications possibles de l'IA dans les affaires et la vie personnelle. Je continuerai à apprendre et à partager cette connaissance avec la communauté, restez à l'écoute. Abonnez-vous et je vous retrouverai bientôt dans la prochaine vidéo.
L'avènement de l'IA dans les affaires et la vie quotidienne
Conclusion:
Intégrer un GPT personnalisé sur votre site Web apportera une expérience interactive unique à vos utilisateurs. Suivez les étapes fournies dans ce guide pour réussir votre intégration et profiter des avantages offerts par cette technologie de pointe.