Créer un clone de ChatGPT avec Flask

00:00:00 :Dans cette partie, on va mettre le template principal de notre application à l'intérieur du fichier index.html.Alors je vais copier tout le code que vous avez disponible dans les sources et on va analyser tout ça ensemble.
00:00:12 :Je ne vais pas expliquer non plus chaque ligne parce qu'il y a pas mal de choses,mais on va passer à travers les éléments les plus importants et les plus essentiels pour cette application.
00:00:20 :Donc qu'est-ce qu'on a ici ? On a tout d'abord un template qui est caché.On peut voir ici qu'on a la classe hidden qui va cacher avec Tailwind ce div.
00:00:28 :Donc ce div, c'est un div qui va nous servir de template pour les messages.Donc on va le copier en javascript. Pour l'instant, on fait juste le mettre dans notre html.
00:00:36 :On le cache pour ne pas l'afficher puisque c'est le template qu'on va copier.On ne veut pas qu'il soit affiché dans notre application.Ensuite, ces templates, on va les dupliquer et les mettre à l'intérieur de ce div qui contient lui aussi un id.
00:00:48 :Donc on a un id gpt-output ici et un id chat-template.Donc ça, ça va être pratique en javascript pour pouvoir cibler ces éléments.Donc ce qu'on va faire en fait, c'est qu'on va tout simplement copier ce template et le mettre à l'intérieur de ce div quand on va avoir des nouveaux messages.
00:01:03 :Donc que ce soit quand l'utilisateur va poser une question ou quand l'intelligence artificielle va nous envoyer une réponse.On a ensuite un formulaire ici qui va contenir un input.
00:01:14 :Donc le input, c'est là qu'on va écrire notre message.On a un label qui est associé à cet input.Il est caché et on l'a mis en sr-only. Donc sr, c'est screen reader.
00:01:23 :Donc c'est une classe qui va en fait cacher cet élément puisqu'on ne veut pas l'afficher sur notre interface.Mais c'est pratique quand même pour, par exemple, des gens qui sont aveugles pour des questions d'accessibilité, de savoir à quoi va correspondre cet input.
00:01:36 :Donc on a l'input ici avec différentes classes.Donc on a beaucoup de classes Tailwind ici qui vont permettre d'avoir un rendu assez sympa.Et on a un placeholder qui va permettre d'afficher un message dans la boîte de texte avant qu'on écrive quelque chose.
00:01:49 :Donc pour indiquer à quoi va servir cette boîte de texte.Et c'est notamment pour ça qu'on n'a pas forcément besoin d'afficher le user prompt ici,donc le label, puisque avec le placeholder, on peut comprendre à quoi va servir cet input.
00:02:01 :Pour finir, on a un bouton avec une classe que l'on n'a pas encore créé dans le CSS,mais on va le faire tout de suite après.
00:02:07 :Et on a deux SVG. Donc on a un SVG qui, par défaut, est caché.Je l'ai mis un ID ici qui s'appelle spinner-icon.Donc ça, c'est des icônes que vous pouvez retrouver assez facilement.
00:02:17 :Je vous mettrai là encore les liens avec cette formation.Par exemple ici, on a un dépôt Git sur GitHub qui contient pas mal d'animations de ce genre que j'aime tout particulièrement.
00:02:26 :Donc vous allez avoir à chaque fois le code que vous allez pouvoir copier dans votre fichier.Donc on a par exemple ici un aperçu de ce que ça donne.
00:02:33 :Et si on va voir dans le code, vous voyez que c'est tout simplement une animation SVG.Donc c'est pour ça que si je retourne dans mon HTML ici, si je déplie ces parties,vous voyez qu'il y a beaucoup de choses, puisqu'on a le CSS qui est directement ici avec les keyframes.
00:02:46 :Donc ça fait des éléments assez longs et c'est pour ça que je les replie ici pour qu'on y voit un peu plus clair.On a ensuite le send-icon ici.
00:02:52 :Donc c'est une icône avec une petite flèche qui permet d'indiquer qu'on va envoyer quelque chose.Et par défaut, vous voyez que j'ai mis la classe hidden sur ce SVG,puisque ce qu'on va faire, c'est qu'en JavaScript, on va alterner entre les deux.
00:03:04 :C'est-à-dire que quand on va envoyer le message, on va enlever le hidden sur ce SVG et on va rajouter un hidden sur ce send-icon pour indiquer que la réponse de l'intelligence artificielle est en cours de génération.
00:03:17 :Et une fois que la réponse sera terminée, on va tout simplement faire l'inverse,c'est-à-dire qu'on va enlever le hidden sur ce SVG et le rajouter sur celui-ci.
00:03:24 :Donc ça, c'est un petit tour de passe-passe qu'on fera plus tard en JavaScript.Pour finir, on a ici quelques classes comme celle-ci qui n'est pas une classe Tailwind.
00:03:32 :Donc là, c'est juste pour vous montrer qu'on peut créer nos propres classes à l'intérieur du fichier input.css,pour vous montrer qu'on peut quand même mettre quelque chose à l'intérieur de ce fichier.
00:03:40 :Donc là encore, je vais copier quelques classes utilitaires,notamment ces deux classes ici qui vont nous permettre de mettre en forme le code quand on aura du code qui va nous être retourné par l'intelligence artificielle.
00:03:50 :Par exemple, ici, on va mettre en texte fuchsia 400 les éléments de code qui nous seront retournés.Et ici, on fait aussi également une petite manipulation avec des paddings et un overflow x-auto sur les éléments de code, donc les éléments prêts.
00:04:05 :Et pour finir, on a une classe, donc bouton primary, qui va mettre un background bleu,donc pas mal de classes comme ça ici qui vont nous permettre de styliser le bouton.
00:04:15 :Donc on va voir à quoi ressemble tout ça, j'ai mon serveur qui tourne,donc je vais pouvoir ici accéder à mon site et on va voir à quoi ça ressemble.
00:04:22 :Alors là, j'ai encore le hello world qui s'affiche,donc je vais retourner dans mon javascript pour enlever l'alerte que j'avais,puisqu'elle ne sert plus à rien.
00:04:30 :Et on va s'assurer également qu'on a bien toujours notre Tailwind qui tourne en arrière-plan pour aller créer les classes, notamment toutes ces classes ici avec le bouton primary.
00:04:38 :Donc je retourne ici sur mon site, je vais le relancer et là on a bien tout qui fonctionne.Donc vous voyez qu'on a un rendu assez sympa avec une bordure autour de la boîte de texte quand on va faire un focus dessus.
00:04:49 :On a bien le placeholder, on a bien notre icône ici, donc l'icône avec la petite enveloppe.Et on va voir tout de suite que si on enlève le hidden,donc si j'enlève le hidden ici et que je le mets à la place sur l'enveloppe,on va avoir à la place notre spinner qui va être affiché et l'enveloppe qui va être cachée.
00:05:04 :Voilà donc ça vous donne un aperçu de ce qui va être affiché quand on va envoyer une question à l'intelligence artificielle et ce qui va revenir quand on aura fini de générer cette réponse.
00:05:14 :On va retourner tout simplement à la petite enveloppe.Donc voilà pour tous ces éléments, ça peut faire un petit peu peur,il y a pas mal de choses ici, mais vous voyez que finalement c'est des choses assez classiques.
00:05:23 :Donc un div qui va contenir toute la conversation,le formulaire qui va nous permettre d'envoyer la question au back-end à l'API d'OpenAI et ici le template qu'on va pouvoir dupliquer.
00:05:32 :Donc ça c'est pour pouvoir plus facilement créer un template parce qu'on pourrait tout créer en Javascript.Là on n'a pas grand chose, on a juste un div avec quelques classes et une balise P avec une classe à l'intérieur,donc c'est pas grand chose, on pourrait vraiment tout créer de rien en Javascript.
00:05:47 :Mais imaginez qu'on a un template un peu plus complexe ici,c'est pratique de pouvoir juste faire un clone en Javascript et de pouvoir garder cette versatilité en HTML pour pouvoir,si on le souhaite, faire un template très complexe qu'on aura juste besoin de cloner en une ligne de code en Javascript.

Créer l'interface de base

Prérequis

Rechercher sur le site

Créer l'interface de base

Inscris-toi

Rechercher sur le site