Créer un clone de ChatGPT avec Flask - Cloner le bloc de réponse avec JavaScript

00:00:00 :Dans cette partie, on va faire du javascript et on va créer la fameuse fonction qui va nous permettre justement de cloner le bloc de réponse.
00:00:07 :Donc c'est ce bloc de template qu'on a mis dans notre HTML ici, qui par défaut est caché.Alors j'ai un petit peu modifié mon interface ici, j'ai ouvert un navigateur, Brave, en navigation privée.
00:00:18 :Alors pourquoi je fais ça ? Parce que j'aime bien justement avoir un navigateur spécifique pour le développement,qui ne contient aucune extension et rien que ce soit d'autre.
00:00:27 :Donc c'est pour ça que j'ai différents navigateurs, j'ai le navigateur que j'utilise dans la vie de tous les jours,et Brave que j'aime bien pour ça parce qu'il est assez léger et en navigation privée on n'a aucune extension ou quoi que ce soit d'autre qui est disponible.
00:00:40 :Donc ça permet vraiment d'avoir le rendu le plus pur possible, qui ne soit pas perturbé par quoi que ce soit.Donc j'ai ici mon site qui est affiché, j'ai mon serveur qui tourne, ça va me permettre ici de faire différentes modifications et de voir les changements ici sur mon serveur.
00:00:56 :J'ai également ouvert les outils de développement, donc ça vous pouvez le faire en faisant un clic droit inspect,ça va automatiquement ouvrir tout ce panneau ici qui va être la plupart du temps à droite de l'interface,donc moi je l'ai mis en bas pour avoir un petit peu plus de place, et on voit bien ici tous les éléments HTML de notre page,
00:01:11 :et nous ce qui va nous intéresser également c'est la console dans laquelle on va pouvoir tester notre Javascript.Donc maintenant on va voir comment créer notre fonction en Javascript pour cloner ce bloc dans notre interface.
00:01:22 :Donc je vais enlever le hidden ici, si j'actualise vous voyez qu'on a bien notre bloc, alors il n'est pas très visible,je vais mettre un lorem ipsum très rapide ici pour vous montrer, donc on a bien notre bloc.
00:01:31 :Pourquoi il n'est pas très visible ? Parce qu'en fait j'ai fait une petite astuce en CSS avec Tailwind avec les classes odd et even,donc c'est à dire qu'en fait on va avoir chaque bloc qui va avoir une couleur différente, vous allez le voir plus tard quand on va ajouter différents blocs,
00:01:45 :ils n'auront pas la même couleur les uns à la suite des autres, ça va permettre de mieux distinguer les différents éléments de réponse.Donc je pourrais changer ça ici et mettre une autre couleur pour que ce soit un peu plus visible, avec le texte on voit bien ici qu'on a notre bloc qui contient le texte.
00:01:58 :Donc ce bloc on va le cloner et pour ça on va utiliser une fonction qu'on va créer en Javascript.Donc là encore je vais coller tout le code et je vais vous expliquer tout ce qui se passe ici, vous allez voir que c'est pas très compliqué.
00:02:08 :Donc qu'est-ce qu'on fait ici ? On a une fonction tout simplement, donc qu'on définit avec function, le nom de la fonction, les parenthèses, les accolades.
00:02:16 :On déclare quelques constantes, donc la première constante c'est le output, c'est là où on va cloner notre bloc.Donc si vous vous souvenez bien, ici on a un div avec un id jptoutput, donc c'est à l'intérieur de ce div qu'on va mettre les messages de la conversation.
00:02:30 :On a ensuite notre template, donc là à chaque fois j'utilise des documents query selector avec l'id qui va me permettre de cibler un élément très spécifique sur ma page.
00:02:39 :Donc là je cible le chat template qui est le template que l'on veut copier, je mets ça là encore dans une constante que j'appelle template.
00:02:46 :Et on va tout simplement créer un clone de notre template avec la fonction clone node pour cloner notre node.Donc ça, ça va nous permettre de créer un nouvel élément qu'on va pouvoir ensuite ajouter à l'intérieur de notre output.
00:02:58 :Juste avant ça, je remets le id à zéro puisque sur une page HTML il ne faut pas avoir plusieurs éléments qui ont le même id.
00:03:05 :Donc là on a un id pour pouvoir cibler ce template facilement, mais ensuite nos messages une fois qu'ils sont clonés, on ne veut pas qu'ils aient cet id chat template.
00:03:12 :Donc c'est ce que je fais ici, je fais tout simplement une réinitialisation de l'id à une chaîne de caractère vide, ce qui me permet d'enlever cet id de chat template.
00:03:20 :Je fais ensuite donc un append child de ce clone sur le output, donc le output c'est ce div ici.Et pour finir, j'enlève la classe hidden, donc avec le class list.remove, j'enlève hidden pour pouvoir afficher ce message.
00:03:33 :Puisque là encore par défaut le template est caché, donc là on l'avait affiché mais je vais remettre le hidden pour cacher ce template.Dans le cas du message, on veut bien entendu que le message soit visible et donc on enlève la classe hidden sur le clone.
00:03:45 :Et pour finir, qu'est ce qu'on fait ? On fait un query selector sur le clone de notre classe message, puisqu'on va en avoir besoin par la suite.
00:03:52 :Ce qu'on va vouloir en fait, c'est insérer du texte à l'intérieur de ce paragraphe.Et donc on a une classe message ici. Et pourquoi on n'a pas mis un id ici ?
00:04:01 :Et bien c'est tout simplement parce qu'on va avoir plusieurs messages qui vont être disponibles dans notre conversation.Donc si on avait un id, on n'aurait en théorie qu'un seul élément avec cet id sur la page.
00:04:11 :Avec une classe, on va pouvoir très facilement par la suite récupérer l'historique sur notre page de toute la conversation,en ciblant tous les éléments qui contiennent cette classe message.
00:04:19 :Donc c'est pour ça ici qu'on a une classe et non pas un id, puisqu'on va avoir plusieurs messages sur notre page.Et donc qu'est-ce que je fais ici ? Je retourne de cette fonction tout simplement cet élément,
00:04:29 :donc ce paragraphe avec la classe message, puisqu'on va pouvoir utiliser ce retour de CloneAnswerBlock dans une autre fonction qui va nous permettre d'ajouter du texte dans notre message.
00:04:39 :Donc on va tester tout ça. Je vais revenir sur mon navigateur, actualiser la page.Donc là on est bien sur notre serveur 127.001.2000.Et je vais pouvoir dans la console ici tester ma fonction.
00:04:50 :Donc la console, je vous rappelle, un clic droit, inspect, et vous allez avoir la barre ici pour tester votre fonction.Donc on va faire un CloneAnswerBlock, vous voyez qu'il me suggère l'autocomplétion,donc ça veut dire qu'il a bien reconnu notre fichier javascript et les fonctions qui sont contenues à l'intérieur.
00:05:03 :Je fais un clone, et là vous voyez qu'on a bien ici le bloc qui apparaît.On a bien également le retour avec notre paragraphe et la classe message,et je peux faire ça autant de fois que je veux.
00:05:13 :Et là on va voir la différence avec les classes, donc ce que je vous disais tout à l'heure,c'est à dire qu'on va avoir un message sur deux qui va avoir une couleur légèrement différente.
00:05:20 :Donc là j'ai un background slate 50 et background slate 200.Donc slate c'est une couleur, pour vous montrer on pourrait mettre par exemple un green et un red,pour que ce soit un petit peu plus visible.
00:05:30 :Donc on va mettre un green 500 et un red 200 par exemple.Je reviens ici, j'actualise, on va refaire notre CloneAnswerBlock,et là vous voyez qu'on a bien du vert et du rouge qui alternent.
00:05:40 :Donc la fonction marche bien, pour l'instant on fait juste un clone du bloc,et on va par la suite faire une autre fonction qui va nous permettre d'utiliser cette fonction pour ajouter un message.
00:05:50 :Donc là vous vous demandez peut-être pourquoi on ne fait pas tout dans la même fonction,et bien tout simplement parce qu'on essaye au maximum de séparer les responsabilités.
00:05:57 :Donc là on a une fonction qui fait juste cloner le bloc,et ensuite on va créer une autre fonction qui va nous permettre d'ajouter du texte dans ce bloc,comme ça on aura bien les choses qui seront séparées.
00:06:06 :Bien entendu on pourrait également tout faire à l'intérieur de la même fonction,mais dans ce cas-ci je préfère quand même séparer un minimum les choses.

Cloner le bloc de réponse avec JavaScript

Prérequis

Rechercher sur le site

Cloner le bloc de réponse avec JavaScript

Inscris-toi

Rechercher sur le site