Ajout de la réponse dans le fil de la conversation
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compteToutes les questions
Beachmountains
19 septembre 2024
Résolue
2 réponses
Problème de messages groupés dans la console
Bonjour ,
j'ai un problème la console me renvoie pas les messages groupés.
ci dessous le code erreur
```
script.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'Html')
at readResponseChunks (script.js:44:48)
at async :1:1
```
et ci- dessous l'historique de mon process.
```
addToLog("How does the print in python")
How does the print in python
const answerBlock = addToLog("GPT is thinking")
undefined
answerBlock
GPT is thinking
const reader = await fetchPromptResponse()
undefined
script.js:22 Fetch finished loading: POST "http://127.0.0.1:5000/prompt".
fetchPromptResponse @ script.js:22
(anonymous) @ VM6991:1
reader
ReadableStreamDefaultReader {closed: Promise}
await readResponseChunks(reader, answerBlock)
```
merci
Nous allons maintenant récupérer le stream envoyé depuis le backend pour l'ajouter au fur et à mesure côté frontend.
Pour ce faire, nous allons créer une nouvelle fonction asynchrone qui va récupérer le lecteur du stream, le consommer et ajouter chaque morceau au message de notre conversation.
async function readResponseChunks(reader, answerBlock) {
const decoder = new TextDecoder();
const converter = new showdown.Converter();
let chunks = "";
while (true) {
const {done, value} = await reader.read();
if (done) {
break;
}
chunks += decoder.decode(value);
answerBlock.innerHTML = converter.makeHtml(chunks);
}
}
reader correspond au lecteur que nous avons retourné dans la partie précédente (return response.body.getReader();).
gptOutput correspond au div qui contiendra le texte de la réponse de l'IA.
Nous créons ensuite deux constantes : decoder et converter.
decoder est un objet TextDecoder qui permet de lire les données du backend qui sont envoyées en bytes et les convertir en texte.
converter est un objet de la librairie showdown qui permet de convertir du texte en HTML. Pour l'utiliser, nous devons charger la librairie dans notre HTML.
Dans le fichier index.html, on rajoute donc cette balise dans le <head> :
<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
Ajout du texte au message
Pour ajouter le texte renvoyé en morceau du backend dans le message, nous allons utiliser une boucle infinie que nous cassons (avec break) quand le stream se termine :
let chunks = "";
while (true) {
const {done, value} = await reader.read();
if (done) {
break;
}
chunks += decoder.decode(value);
gptOutput.innerHTML = converter.makeHtml(chunks);
}
L'objet ReadableStreamDefaultReader (https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader/read) retourne à chaque itération la valeur du stream et un booléen qui indique si le stream est terminé ou non.
Nous récupérons ces deux valeurs dans deux variables : done et value. Si done est true, nous utilisons break pour sortir de la boucle (et terminer la fonction).
Dans le cas contraire, on décode la valeur en bytes du stream avec decoder.decode et on l'ajoute à notre chunks.
Pour finir, on modifie le innerHTML du message de l'IA (gptOutput) pour ajouter le chunks converti en HTML au préalable avec converter.makeHtml.
Ajouter de la logique dans l'envoi du formulaire.
Il ne reste plus qu'à ajouter ces deux fonctions dans l'événement de l'envoi du formulaire :
document.addEventListener("DOMContentLoaded", () => {
const form = document.querySelector("#prompt-form");
const spinnerIcon = document.querySelector("#spinner-icon");
const sendIcon = document.querySelector("#send-icon");
form.addEventListener("submit", async (event) => {
event.preventDefault();
spinnerIcon.classList.remove("hidden");
sendIcon.classList.add("hidden");
// On ajoute la question de l'utilisateur
const prompt = form.elements.prompt.value;
addToLog(prompt);
// On ajoute un nouveau message de l'IA
const answerBlock = addToLog("GPT est en train de réfléchir...");
// On envoi la requête au backend
const reader = await fetchPromptResponse();
// On lit la réponse du backend et on l'ajoute au answerBlock
await readResponseChunks(reader, answerBlock);
});
});
Nous avons rajouté les lignes suivantes :
// On ajoute un nouveau message de l'IA
const answerBlock = addToLog("GPT est en train de réfléchir...");
// On envoi la requête au backend
const reader = await fetchPromptResponse();
// On lit la réponse du backend et on l'ajoute au answerBlock
await readResponseChunks(reader, answerBlock);
On commence par ajouter un nouveau message dans le fil de la conversation avec addToLog qui indique que GPT est en train de réfléchir. Cela nous permet de récupérer le div qui va contenir le message de l'IA.
Pour rappel, notre fonction addToLog clonait notre template et retournait le block du message :
function addToLog(message) {
let infoBlock = cloneAnswerBlock();
infoBlock.innerText = message;
return infoBlock;
}
Nous utilisons ensuite nos deux fonctions fetchPromptResponse et readResponseChunks pour faire la requête au backend et lire la réponse morceau par morceau pour l'ajouter dans le fil de la conversation.
00:00:00 :On arrive bientôt à la fin, il ne nous reste plus qu'une fonction à écrire et ensuite on va pouvoirajouter toute cette logique à l'intérieur de la soumission du formulaire. Donc la fonction qu'il
00:00:08 :nous reste à écrire c'est la fonction qui va aller lire ce lecteur ici au fur et à mesure pourajouter ces informations dans le bloc, donc pour ajouter la réponse en fait de OpenAI du côté dufrontend. Donc là je vais coller le code et je vais vous expliquer tout ce qui se passe, il y a pas
00:00:22 :mal de choses qui se passent ici et on va décortiquer tout ça ensemble. Donc là encore on est bienassondu avec une fonction asynchrone puisque on va lui passer en fait le résultat de cettefonction qui est également une fonction asynchrone et on va récupérer donc ce résultat, ce lecteur,
00:00:36 :dans une première variable qui va s'appeler reader. Et on a un deuxième paramètre ici,gptOutput, qui n'est pas forcément très bien nommé parce qu'en fait ça va être le messagedans lequel on va écrire, donc ça va être le message de template qu'on va avoir cloné. Alors
00:00:50 :c'est pas très bien nommé parce qu'on a l'impression que je vais le mettre en fait icipuisque j'avais appelé gptOutput aussi, donc je pense que je vais changer le nom et on va mettreplutôt IA Answer ou AnswerBlock, voilà ça va être plus clair. AnswerBlock et je vais changer
00:01:06 :ici pour m'assurer que ça va continuer de fonctionner. Et ce AnswerBlock donc il seraen fait récupéré directement quand on va ajouter avec le AddToLog ici, on va récupérer d'ailleursje l'avais appelé AnswerBlock ici, voilà j'ai quand même un petit peu de cohérence. Donc en
00:01:19 :fait on va ajouter un bloc pour l'intelligence artificielle avec un message par défaut,on va récupérer le AnswerBlock et ensuite on va le passer à cette fonction qui va lire les donnéesdu back-end et qui va ajouter la réponse générée au fur et à mesure par OpenAI. Donc ce AnswerBlock
00:01:33 :et toute cette logique on la fera dans quelques instants ici à l'intérieur de la soumission duformulaire. Pour l'instant on va revenir donc dans cette fonction qui elle fait juste récupérer le
00:01:42 :lecteur et ajouter les morceaux dans le message. Donc qu'est ce qui se passe ici ? On a tout d'abordun décodeur, donc un texte décodeur. Pourquoi ? Parce qu'en fait les informations envoyées depuis
00:01:51 :le back-end ne vont pas être en texte, ça va être des bytes et du coup il faut les décoder et pourça on a un objet en javascript qui s'appelle texte décodeur qui va nous permettre de convertir cesdonnées en texte que l'on peut afficher à l'utilisateur. On pourra faire un test pour
00:02:05 :voir ce que ça donne sans et vous verrez que c'est pas vraiment très pratique à lire. On a ensuiteune bibliothèque que j'utilise qui me permet de convertir les informations de texte qui sontrenvoyées en HTML. Donc on voit ici on va utiliser ce convertisseur avec la fonction makeHTML. Donc
00:02:20 :là encore c'est quelque chose qui permet par exemple de remplacer les slash n par des retoursà la ligne, donc les br etc, de mettre des paragraphes, donc ça va en fait permettre derécupérer les informations d'OpenAI pour les mettre en forme pour le front-end. Puisque par
00:02:33 :défaut l'API d'OpenAI ne nous retourne pas du HTML et c'est normal en fait elle va nous retournerjuste du texte brut et donc avec ce convertisseur de Showdown qui est une librairie qu'on vainstaller tout de suite, eh bien on va pouvoir convertir ces données textes en HTML qu'on peut
00:02:46 :afficher sur notre page. On pourrait également afficher le texte brut mais ça ne sera pas trèsplaisant à lire pour l'utilisateur. Donc il ne faut pas oublier bien sûr de loader cette bibliothèque
00:02:56 :dans notre HTML donc on va retourner dans le index.html et on va mettre notre showdown.js icià la fin juste avant notre script.js bien sûr parce que si on le met après au moment de lire
00:03:08 :ce script elle ne sera pas disponible. Donc je mets la balise ici avec la source vers ce showdown.min.jsqui est sur un package donc qui est un cdn en fait qui me permet d'avoir accès à ce script. Je
00:03:19 :reviens maintenant dans ma fonction donc là j'ai juste défini deux variables décodeur,converteur donc le décodeur qui va être utilisé ici pour décoder la valeur qui est renvoyée depuisle back-end et converteur qui va me permettre de convertir tout ça en HTML. Et ensuite là il y a
00:03:33 :pas mal de choses ça peut faire un peu peur mais c'est assez simple on va tout simplement créer unevariable qui est une chaîne de caractère vide et en fait le reader quand on va le lire à chaque foisil va nous retourner deux valeurs qu'on va unpacker ici dans deux variables donc le done et le value.
00:03:48 :Done c'est une variable qui va être à false tant qu'il y a des choses à consommer donc tant qu'ona des informations qu'il nous a envoyées done va être égal à false et quand on arrive à la fin denotre streaming event donc du stream et bien le done sera égal à true. Donc on utilise ça tout
00:04:03 :simplement pour sortir pour faire un break on pourrait faire aussi un return là puisqu'onn'a rien après dans la fonction donc on pourrait faire un return ou un break c'est un peu près lamême chose ici puisque en fait on va sortir de cette boucle while true donc qui est une boucle
00:04:15 :infinie on va sortir ici donc de la boucle et là il n'y a rien après dans la fonction donc ça nechange pas grand chose qu'on mette un break ou un return. Donc là en fait on va juste boucler tant
00:04:25 :qu'on a des informations donc tant que done est à false ça veut dire qu'on a des informations etcette value ici ça va être donc les informations qui vont nous être retournées du back-end versle front-end et qu'on va devoir décoder avec decoder.decode. On met tout ça dans le chunks
00:04:39 :puisqu'en fait il va falloir ajouter tous ces éléments à la suite de ceux qu'on avaitprécédemment c'est pour ça qu'on fait un plus égal puisque si vous vous souvenez bien quandon avait testé notre application ici dans le fichier python on avait des petits bouts de textedonc il va nous dire par exemple je ensuite il va dire je suis ensuite u après ne etc et donc il
00:04:57 :va falloir additionner tout ça les uns à la suite des autres pour faire une phrase complète qui setient. Donc c'est pour ça qu'au début on a une chaîne de caractère vide et que par la suite on
00:05:05 :fait un plus égal pour ajouter tous ces petits éléments les uns à la suite des autres. Et pourfinir et bien dans le inner html du answer block donc le block de réponse qui va être toutsimplement ici le clone de notre template à l'intérieur de ce p ici de ce paragraphe on va
00:05:18 :ajouter ces éléments qu'on aura convertis avec showdown ici en html donc on fait tout simplementinner html égal converter make html chunks. Donc on va tester tout ça on va voir si ça fonctionne
00:05:29 :là on devrait avoir pas mal tout ce qu'il nous faut donc je vais le faire à la main dans lefichier javascript ici je vais rafraîchir la page on a bien la fonction ici et donc là qu'est cequ'on va faire en fait cette fonction on va l'utiliser en lui passant le reader donc il
00:05:44 :faut déjà créer le reader et ensuite on va avoir le answer block donc le answer block ça va être leblock de réponse. Donc pour tester tout ça on va faire un test à la main ici je vais retourner
00:05:53 :dans mon application ici je vais faire un add to log et on va refaire notre question comment faireun print en python par exemple donc je fais mon add to log donc ça c'est la question del'utilisateur ensuite ce qu'on va faire c'est qu'on va créer donc un autre bloc donc je vais
00:06:09 :l'appeler par exemple answer block et on va faire un add to log et on va dire gpt est en train deréfléchir comme ça donc ça ça nous permet de faire deux choses la première chose c'est déjàd'ajouter un bloc qui va dire que gpt est en train de réfléchir parce qu'il va y avoir un tout petit
00:06:24 :délai entre le moment où on va ajouter le bloc la requête qui se fait vers openai etc et lespremiers mots qui sont envoyés donc ça permet de donner une indication à l'utilisateur qu'il y aquand même quelque chose qui est en train de se passer et également on va pouvoir récupérer ce
00:06:36 :answer block qu'on va passer ensuite à cette fonction pour insérer à l'intérieur de notrebloc donc de notre bloc de réponse le texte en fait qu'on va récupérer depuis le back-end doncj'ajoute ce bloc ici on a gpt est en train de réfléchir le answer block donc ça va être ce
00:06:52 :bloc ici on voit qu'il est surligné ici avec le p.message et c'est là qu'on va pouvoir insérerle texte qu'est ce qu'on va faire ensuite et bien on va créer donc notre lecteur le lecteur qu'oncrée à partir de fetch prompt response donc la fonction qu'on avait créé qui va faire la requête
00:07:06 :du côté du back-end avec notre chat history donc je vais faire tout simplement ici une variable queje vais appeler par exemple reader et on va faire un await donc bien important le await parce quelà on rentre dans la synchrone on a un async ici donc il faut mettre un await pour attendre tout ça
00:07:22 :donc fetch prompt response et on va lui passer rien ici je crois que oui non c'est ça je n'aiaucun paramètre ici puisqu'on fait juste envoyer directement le chat history ici avec la fonctionqu'on avait faite donc je passe tout ça avec notre reader on a bien notre lecteur ici qui va être
00:07:38 :une promesse qu'on va pouvoir lire donc un readable stream default reader et on va pouvoir donc refaireun await cette fois ci avec le read response chunk on va lui passer donc notre lecteur qu'on adéfini donc reader et notre answer block qu'on a défini ici donc là on a mis exactement les mêmes
00:07:54 :noms de variables mais c'est bien ici donc le reader qui va être envoyé à reader et le answerblock qui va être envoyé à answer block et là si on a de la chance c'est bien voilà on a tout qui estaffiché ici alors là ça s'affiche tout d'un coup puisqu'en fait entre le moment où j'ai fait le
00:08:07 :fetch prompt response et les petites explications que je vous ai faites et le moment où j'aiexécuté cette fonction et bien la requête vers l'API avait été entièrement générée du côté duback-end donc c'est à dire que toutes les informations ici avaient déjà été envoyées etdonc il n'avait pas besoin de m'envoyer les choses petit à petit puisque tout était déjà
00:08:26 :prêt mais quand on va faire ça à la suite sans moi qui parle entre chaque étape vous allez voiron va mettre tout ça à l'intérieur de notre soumission de formulaire et bien ça va allertrès vite et dès qu'on aura les premières informations qui vont revenir du back-end
00:08:38 :elles seront affichées directement du côté du front-end donc je vais reprendre tout ça je vaisprendre là les différentes lignes qu'on a faites je vais les mettre à la suite donc on fait notreGPT est en train de réfléchir ensuite on va récupérer notre reader ici et pour finir on va
00:08:54 :faire notre await response pour ajouter tout ça donc on a le answer block GPT est en train de réfléchiron crée notre reader on fait la requête vers le back-end et on consomme tout ça pour le ramenervers le front-end donc on va tester tout ça je rafraîchis la page je refais mon comment faire
00:09:11 :un print en python donc il est déjà dans l'historique je relance et là vous allez voir ça marche doncvous voyez qu'on a bien le petit moment qui dure à peu près un peu moins d'une seconde on voit leGPT est en train de réfléchir et dès qu'on a les premiers éléments qui arrivent hop ils sont
00:09:25 :renvoyés du côté du front-end on voit également les petits éléments de coloration syntaxique quej'avais mis grâce au CSS donc par exemple des informations comme ça comme le print ici ça sivous vous souvenez bien ça remonte un petit peu mais dans mon source ici j'avais indiqué que tout
00:09:39 :ce qui n'était pas à l'intérieur des pré donc à l'intérieur des blocs de code comme ça mais quiétait entre code donc ça va être par exemple ces éléments ici et bien je voulais qu'ils soient enitalique avec un fond fuchsia et un fond de bol donc ça fonctionne bien on a notre CSS qui est
00:09:53 :correctement appliqué ici et donc ça fonctionne on a tout qui est presque terminé on voit ici qu'ily a encore les petits points qui s'affichent donc ça veut dire qu'il va falloir juste terminer toutça en enlevant donc les hidden donc le spinner icon et le send icon on va devoir inverser tout
00:10:09 :ce qu'on a fait ici une fois qu'on aura terminé de générer la réponse pour enlever cette icôneet revenir à la flèche et pour laisser la possibilité à l'utilisateur s'il le souhaitede continuer la conversation et juste avant de terminer cette partie je veux juste vousmontrer ce que ça donne si on enlève le décode ici et le converteur make html pour que vous
00:10:27 :voyez bien la différence donc là je retourne directement la valeur sans le texte décodeurje vais faire donc la même chose comment faire un print je relance et là vous voyez qu'on ajuste des suites de nombres donc c'est pour ça qu'il faut décoder tout ça en fait avec notre
00:10:40 :texte décodeur pour que ce soit lisible et si on enlève le make html vous allez voir là aussi queça va pas forcément être très agréable pour l'utilisateur donc je relance je rafraîchiscomment faire un print je relance tout ça et là vous allez voir que tout est à la suite donc par
00:10:54 :exemple on a des blocs ici avec les trois guillemets donc là on a le fameux print icidonc qui était à l'intérieur d'une balise code quand on utilise le converteur make html donclà on a juste les guillemets et quand on fait le converteur make html ça va faire en fait une
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.
