Créer un clone de ChatGPT avec Flask - Ajouter la coloration syntaxique avec Highlight js

00:00:00 :On arrive à la fin de la création de notre site, il ne reste plus grand chose à faire.La seule étape qu'on va rajouter, c'est une autre bibliothèque qui s'appelle Highlight.js
00:00:09 :qui va nous permettre de rajouter la coloration syntaxique sur les blocs de code.Et on va aussi rajouter un petit bloc try except ici à la fin pour pouvoir gérer les cas où on peut avoir des erreurs et également gérer l'affichage des icônes ici puisque pour l'instant on change les classes ici au début mais on ne les remet pas
00:00:27 :parce que c'était par défaut à la fin donc ça cause un petit problème ici puisque à la fin de la génération du message on est toujours avec le spinner donc l'icône qui affiche que la génération est en cours.
00:00:37 :Donc on va déjà rajouter ce bloc try except et par la suite on rajoutera la librairie Highlight.js Donc là c'est un petit peu comme en Python, on va faire un bloc try avec un catch donc c'est un peu le try except du Python.
00:00:48 :Dans mon try je vais essayer tout ça.Si on a un problème donc on va faire un catch donc hop ici à la place je vais faire un catch pour récupérer dans le cas où il y a une erreur l'erreur et pour l'afficher donc on va faire un simple console.log et dire par exemple une erreur est survenue
00:01:03 :et on va afficher l'erreur en question qu'on aura récupéré.Donc voilà rien de bien compliqué.Tant qu'on y est on va aussi rajouter le point virgule ici à la fin et ici j'en ai probablement oublié d'autres c'est pas très très grave encore mais je pense que je les ai tous mis ok.
00:01:16 :Et ici on va rajouter un finally donc finally c'est en fait si tout se passe bien et donc si tout se passe bien et bien qu'est-ce qu'on veut faire ?
00:01:23 :On veut inverser comme on l'avait dit ces conditions ici donc c'est à dire qu'on va remettre le hidden sur le spinner icon et on va l'enlever sur le send icon.
00:01:31 :Donc je veux inverser le remove et le add tout simplement comme ça ça me permet de remettre le hidden sur le spinner et d'enlever le hidden qui était rajouté ici sur le send.
00:01:40 :Donc on va vérifier si tout ça fonctionne bien si on n'a pas créé d'erreur j'actualise je vais remettre mon comment faire un print en Python et ça semble fonctionner pour le moment donc on a bien le make HTML donc tout est bien et on a l'icône ici qui s'affiche
00:01:55 :et normalement à la fin on devrait revenir avec l'icône de l'enveloppe.Voilà donc ça fonctionne on a bien le finally qui est exécuté l'icône revient comme il faut.
00:02:03 :On pourrait également tant qu'on y est enlever la question dans le input donc ça on peut faire form.elements.print.value égal à une chaîne de caractère vide comme ça ça permet quand on envoie le message alors là on peut pas faire un value comme ça je me suis planté j'ai mis un S
00:02:20 :j'actualise, je mets test voilà j'envoie et donc là ça permet juste de remettre la valeur à 0 pour ne pas laisser la question de l'utilisateur dans la boîte de texte comme ça s'il veut continuer à écrire il n'a pas besoin à chaque fois d'effacer ce qu'il avait écrit auparavant.
00:02:34 :Donc du côté visuel ici tout est bon il ne reste plus qu'à ajouter la librairie highlight.js donc on va retourner dans notre index.html et là encore on va modifier un petit peu dans le head et juste avant le script ici donc on va rajouter déjà le fichier javascript donc là encore on va le chercher à partir d'un cdn
00:02:51 :donc j'utilise la version 11.2.0 si vous voulez utiliser exactement la même et on met donc highlight.min.js et il va rester uniquement la feuille de style qu'on va mettre au début ici donc je vais la mettre juste avant le styles.css
00:03:05 :là encore on va la chercher depuis un cdn avec la même version 11.2.0 et on utilise le style par défaut et pour finir il ne reste plus dans le javascript ici qu'à rajouter une fonction qui va appliquer cette coloration syntaxique donc là maintenant qu'on a installé cette bibliothèque avec le cdn
00:03:22 :on peut utiliser hljs donc highlight.js et on a la fonction highlight.all qu'on va faire juste à la fin alors là c'est à vous de voir ce que vous préférez on pourrait la faire directement ici quand on ajoute les éléments pour que au fur et à mesure de la génération
00:03:36 :on ait la coloration syntaxique qui soit effectuée ce n'est pas forcément très utile et ça risque de ralentir un petit peu la génération puisque c'est quand même une bibliothèque qui va chercher sur toute la page pour trouver des éléments de bloc de code et rajouter la coloration syntaxique donc ça peut quand même ralourdir un petit peu ça
00:03:54 :si on le fait à chaque fois donc moi je préfère le faire une fois à la fin d'ailleurs là c'est un h minuscule donc highlight.all comme ça
00:04:01 :et donc c'est juste à la fin dans le finally ici qu'on va faire cette coloration syntaxique donc si on n'a pas fait d'erreur normalement ça devrait fonctionner je vais remettre ma question comment faire un print et cette fois-ci on devrait avoir la coloration syntaxique qui s'affiche donc à la fin bien sûr
00:04:14 :là elle n'est pas encore là on a bien les éléments de code qui sont en fuchsia ici donc ça c'est grâce à la feuille de style et une fois que ça va être terminé voilà on a bien ici la coloration syntaxique avec les blocs de code qui s'affichent donc tout fonctionne parfaitement
00:04:27 :et c'est beaucoup plus lisible pour l'utilisateur du côté front-end donc tout est terminé normalement on a tout fait ici on a bien tout qui est géré on revient bien avec l'icône on peut continuer la conversation si jamais il y a quelque chose qu'on n'a pas compris on peut lui dire par exemple
00:04:42 :et en javascript comment ça fonctionne et voilà comme on renvoie en fait à chaque fois toute la conversation il aura l'historique de tous les messages qu'on a fait donc c'est sûr que ça va consommer un petit peu plus de crédit du côté de l'API puisque vous envoyez des gros blocs de messages

live_helpToutes les questions

Beachmountains

Problème de couleur avec highlight.js

check_circle Prérequis

Rechercher sur le site

Formulaire de contact

Inscris-toi

live_helpToutes les questions

Beachmountains

Problème de couleur avec highlight.js

Rechercher sur le site

Formulaire de contact