Session du mardi 11 novembre à 21:00

Session du 11 novembre 2025 à 21h00

Développement Web & Frameworks

Deviens membre Premium magic_button

Cette session de mentorat est réservée aux membres Premium. Rejoignez-nous pour accéder à toutes les rediffusions des sessions de mentorat !

Premium

check +100h de formations
check +180 exercices de code
check +100h de mentorats en rediffusion
check 20 projets
check Mentorats groupés hebdomadaires
check Support individuel avec nos mentors

Découvrir les formules

Voir le détail des fonctionnalités

Session de mentorat Streamlit

On va s'amuser à faire de la mise en forme avec des composants Streamlit, tout en utilisant openai pour créer un quiz avec correction par IA

Rechercher dans la transcription

00:00:00 :Du coup, on va faire du streamlit. On va reprendre Django la semaine prochaine. Je vais juste revenir sur streamlit pour vous montrer à quel point ça peut être cool.

00:00:16 :A la base, je partais sur des composants streamlit, mais on va utiliser peut-être un ou deux composants à la limite. On va voir comment ça marche, mais finalement, c'est tellement facile que je préfère vous montrer autre chose.

00:00:28 :C'est tellement facile à mettre en page streamlit. On va faire ça. Et pour ceux qui voudront pousser le projet, même s'ils veulent, il est possible de... Je mettrai le repo en public.

00:00:41 :Il est assez facile à streamlit de connecter à une base de données avec sup à base. Je ne sais pas si quelqu'un t'a utilisé sup à base.

00:00:50 :Oui, j'étais sûr.Jamy, t'as dit quoi Jamy ?Non, je ne connais pas.Ok. Bon, on ne va pas en faire aujourd'hui. C'est juste que j'ai commencé une branche avec sup à base. Je ne sais pas si j'aurai le temps de la finir. Et Antoine, t'as fait quoi avec sup à base, toi ?

00:01:06 :Oui, j'ai fait plein de choses avec sup à base. J'ai lancé cinq ou six projets dessus. Et après, je suis passé sur Prisma qui, lui, n'a pas de limite quand tu es en plan gratuit.

00:01:19 :Ah, ok.C'est quand même vachement bien. Parce que sup à base, si tu n'as pas d'activité, je crois que ça désactive au bout de, je ne sais plus combien de temps, une semaine, un mois, je ne sais plus.

00:01:31 :Ouais, ouais.Prisma, ça marche tout le temps.D'accord. Et Prisma, ok. Je regarde vite fait. Ok, Telfree, ok. D'accord. Après, je ne sais pas. J'utilise ça avec Streamlit parce que c'est assez simple, en fait.

00:01:50 :Mais c'est peut-être intéressant de savoir pourquoi, toi, par exemple, tu préférais prendre sup à base qu'une base de données standard, entre guillemets. Enfin, faire ça directement.

00:01:59 :Ouais, parce que du coup, c'est déjà déployé, donc c'est hyper facile à manipuler. C'est déjà en ligne tout de suite. C'est super simple. Pas besoin de gérer l'hébergement de ta base de données.

00:02:11 :Voilà, donc je partage mon écran. Allez, c'est parti. On est d'accord. Auto aussi, c'est ce que ça a. Quand j'ai vu ça, sup à base. On ne va pas en faire ce soir, mais c'est juste pour montrer.

00:02:28 :En fait, c'est une plateforme où, en gros, c'est vachement cool. Je ne sais pas si je peux me connecter directement dessus. Je ne sais pas si tu es avec Giteb, je ne m'en souviens plus du tout.

00:02:40 :Je ne m'en souviens plus. Si, si, voilà. Pour l'instant, je n'ai rien. C'est juste que je faisais un petit test cet après-midi. Et en fait, je me dis, ouais, c'est cool parce que j'ai fait une table de données juste en faisant créer un projet.

00:02:54 :Donc c'est facile. Après, vous avez votre base de données. Vous pouvez la gérer. Vous pouvez gérer les utilisateurs directement ici. En fait, il y a un petit onglet. C'est sympa. On peut ajouter un utilisateur.

00:03:05 :Si on clique sur un utilisateur, par exemple, on peut lui renvoyer un lien. On peut tout configurer dessus avec une interface graphique qui est vachement cool.

00:03:16 :Et après, vous pouvez gérer vos tables, par exemple. Par exemple, si j'ai une petite table, j'avais fait un test, par exemple. Donc franchement, c'est hyper simple à utiliser.

00:03:29 :Je l'avais déjà vu il y a longtemps. Non, c'était Firebase, je crois que je l'avais vu. Et je crois que Firebase, c'est quoi? C'est pas Google qui fait Firebase?

00:03:38 :C'est Google Firebase.Oui, c'est ça. Je ne sais pas. Peut-être mieux, je n'en sais rien. Je ne sais plus, mais j'avais vu quelqu'un qui m'avait montré Firebase. Je fais, ouais, ok. Et après, je l'avais fait du Chipabase.

00:03:51 :En fait, je préfère quand même. Peut-être que maintenant, ils ont pris des chemins différents, mais je sais qu'à un moment, c'était assez proche quand même.

00:03:58 :Mais là, on voit que c'est bien intégré à Google quand même.Ah oui, oui.Parce que moi, je crois que la première fois que je l'avais regardé, il ne me semblait pas que c'était intégré comme ça à Google, en fait. Ok, bon. Maintenant, je peux aller dessus.

00:04:11 :En fait, ça sert d'interface d'administration un peu, tout ça?Pour la base de données, on va dire.C'est même encore plus que ça. Tu crées ta base directement dedans et tu la connectes à ton projet et tu envoies tout ce que tu veux dessus.

00:04:24 :Et tu as même, tu as toute la documentation qu'ils te donnent, par exemple, pour l'authentification.Ils te donnent tous les champs à fournir, etc. directement pour ta base de données.

00:04:36 :Donc, c'est hyper pratique et ça va super vite à développer.Il faut juste spécifier ton URL de projet, ta clé.Et puis c'est parti, quoi.

00:04:47 :Voilà, et puis tu peux installer un paquet à une librairie.Ils ont une librairie Python, en fait, que tu installes.Et comme ça, après, tu peux travailler avec.

00:04:58 :Genre, là, j'ai mon écran.Streamlit, super.Ils ont fait carrément un tuto complet, en fait, sur Streamlit et Superbase, en fait.Ici, on descend.On ne va pas regarder.

00:05:11 :Donc, ils expliquent la connexion.Voilà, donc, ils ont même fait un paquet à Streamlit et Superbase, carrément.Voilà.Et puis, du coup, tu te connectes et tu vas chercher tes tables en Python.

00:05:23 :Voilà.C'est sympa.D'accord.Mais tu as la même chose dans tous les langages de programmation, PHP, JS, etc.À chaque fois, pour tous les projets, tous les frameworks, c'est vraiment mortel.

00:05:38 :Ouais.Ah oui, elle permet de se créer ta base et elle peut te servir pour un projet Python,à la fois pour un autre projet sous un autre langage.

00:05:47 :Ah oui, ça marche avec.Oui, oui.Oh là là.C'est pas mal, ça.OK.Voilà, si vous voulez qu'on va se faire, du coup.Là, le but, c'est de se faire un espèce de...

00:06:03 :Alors, on va rentrer un peu des valeurs dans le brut, entre guillemets,parce qu'on ne va pas avoir le temps de faire énormément de choses non plus.

00:06:10 :Mais le but, c'est de créer un système de quiz, en fait.Quand la personne va répondre, il faudra que derrière, je leur envoie une correction,avec le code formaté, par exemple.

00:06:22 :Donc, c'est pour ça qu'on va voir un peu les composants du Streamlit.Et comment on peut travailler avec OpenAI.Alors, là, j'ai pris OpenAI parce que...

00:06:32 :La dernière fois, j'ai pris quoi ? J'ai pris Mistral.On prend OpenAI, ça a changé un petit peu.Du coup, pour commencer,on va installer Streamlit.

00:06:44 :Voilà.Est-ce que je peux ouvrir une deuxième fenêtre ?Hop là.Et voilà, vous avez ici l'API d'OpenAI.Et il vous explique un peu comment ça fonctionne.

00:07:03 :Vous avez ici vraiment la base.Et après, vous pouvez commencer à regarder un peu tout ce qui se passe dedans.Il y a l'image, la vision, ainsi de suite.

00:07:14 :Il y a pas mal de choses.Et on peut choisir son langage, bien sûr.Donc là, je vais vous montrer un cas très simple, assez basique, mais qui marche très bien.

00:07:24 :On va voir qu'OpenAI, on peut lui demander de nous renvoyer les données sous forme de vision.Voilà.Du coup, ce qui va être très pratique.

00:07:34 :Donc, on va garder que ça.Quand vous travaillez avec OpenAI dans votre projet, il vous faut bien sûr une clé d'API.Et il vous faut un petit peu d'argent.

00:07:45 :Donc là, j'ai un dollar.Ça suffira largement pour le projet.Donc, il faut des clés d'API.Pour créer une nouvelle clé, on fait ça.On va l'appeler Streamlit Mentora.

00:07:59 :Comme ça, je le supprimerai après.Mentora.Je prends Default Project, ici.Donc là, je suis dans les settings de la partie API.Et hop, on clé ici.

00:08:11 :Elle va apparaître là.Si jamais vous l'avez montrée à quelqu'un, il n'y a pas de problème, vous pouvez la supprimer direct.Donc là, boum.On copiera après.

00:08:21 :Voilà.Tout ça pour dire que votre clé d'API, vous ne devez surtout pas la montrer.C'est normal.Quand vous faites vos projets, c'est un peu comme les variables d'environnement.

00:08:29 :On a déjà montré Python environ ou Django environ.On en a déjà parlé, je crois, à Mentora.Avec Streamlit, ce qui est hyper sympa, c'est que vous avez ce qu'on appelle les secrets.

00:08:40 :C'est un peu le même principe.Et vous allez voir comment on gère ça avec les dossiers Streamlit.Je réfléchis par quoi je vais commencer.OK.

00:08:54 :On va installer déjà tout ce qu'il nous faut.Hop là.Il n'est pas identique derrière.Ça tu connais, toi Antoine, pas identique maintenant.T'es à fond dedans là.

00:09:10 :Eh oui.Alors, est-ce que tout le monde avait déjà vu comment ça fonctionnait, Streamlit, ici ?Oui.OK. Jacques-André, je ne sais plus.T'avais fait un Mentora dessus, il me semble, à un moment.

00:09:32 :Jacques-André, t'as vu ça ou pas ?Je n'entends pas du tout.Pierre, tu peux écrire dans le chat.Et Antoine, c'est peut-être là aussi au Mentora que j'avais fait une fois là-dessus.

00:09:42 :Oui, j'en ai déjà vu des Mentora.J'en ai déjà peut-être déjà fait deux.Je vais faire deux Mentora dessus cette année, je crois.En gros, on va couper ça parce que je n'ai pas voulu faire ce que je veux.

00:09:54 :Voilà.Donc toujours, on va prendre l'exemple le plus banal ici.Hop.On va faire un write ici, un petit rafraîchissement.Même mieux que ça.Donc, mon app, ici, Quiz.

00:10:12 :OK.Pour rappel, quand on veut lancer l'app Streamlit, c'est un run main.py ici.Tac.Et je vais mettre la fenêtre.C'est où ? Là.Bon, voilà.

00:10:30 :On a une super application qui fonctionne ici.Tac.Donc, on aime le lien public.Vous pouvez partager avec les personnes qui sont chez vous.Alors, pour commencer, du coup, on va se créer ce qu'on appelle un dossier.

00:10:47 :On va l'appeler.Merde, je fais des conneries.On va l'appeler en Streamlit, comme ça.OK.Et on va aller dans ce dossier.Alors, il sert à plusieurs choses ce dossier-là.

00:10:58 :Je crois que c'est là-dedans aussi qu'on peut faire du CSS personnalisé.Pourquoi j'ai déjà utilisé ce dossier ? Je ne sais plus.Bon, je ne suis pas du Streamlit tous les jours, de toute façon.

00:11:08 :On va se créer un fichier secret.toml, ici.Donc, il revient ici.Vous voyez, il vous le dit dans la doc comment on fait pour gérer les secrets.

00:11:24 :Ce petit format toml est très pratique, je trouve.On l'a rarement utilisé.Mais bon, voilà.Vous déclarez ici, entre guillemets, votre variable et vous lui assignez une valeur.

00:11:36 :C'est tout simple.Et vous allez voir comment Streamlit l'utilise.Hop.Tac.Et ici, alors surtout, forcément, quand vous versionnez votre projet,le secret.toml, vous le mettez dans le git ignore.

00:11:54 :Vous le mettez dans le git ignore.Et ici, du coup, on va se faire un...On va faire ça.On va l'appeler api.key, comme ça.

00:12:03 :Tac.Et on va aller chercher notre api.key qui était là.Hop.Et là, il y a un petit malin qui est en train de consommer tout mon api fichier.

00:12:14 :Tac.Hop.On va prendre ça et ça nous suffira, je pense, pour le projet.Alors comment, après, on peut récupérer les secrets ?Donc, là où c'est sympa, on va faire un peu d'organisation,un milieu d'organisation quand même.

00:12:30 :On va se créer un settings.py.Tac.Hop.Et ici, moi, qu'est-ce que je fais souvent ?Eh bien, je vais déjà importer, ici, ce qu'on appelle secrets.

00:12:44 :Avec Streamlit, en fait, vous pouvez gérer vos secrets,les choses que vous voulez importer qui sont vraiment secrets,comme ce qu'on fait avec les .env.

00:12:55 :Parce qu'ici, c'est que le fichier toml.On va faire ça, par exemple.api.key, ici.Key.On a notre constante qu'on va appeler...On va récupérer la clé, comme ça, avec, ici, api.key.

00:13:10 :J'avais plus le chiffre 1.Tac.Donc, voilà.Quand vous avez des choses, des mots de passe, ainsi de suite,vous les mettez ici.Et hop, on les récupère comme ça dans le projet.

00:13:20 :Et comme ça, ça ne vous le versionnez pas dans votre git.Pour utiliser OpenAI, il faut...On va initialiser le client, en fait.Il nous faut une classe OpenAI.

00:13:35 :On va devoir l'initialiser, simplement.Donc, ici.Hop, on va importer.Ils ont leur classe, ici.OpenAI.Il faut savoir qu'on peut faire plein de trucs.

00:13:48 :Je vous l'ai montré tout à l'heure dans la doc de l'API.Ça m'était déjà arrivé, par exemple, de faire un...Je l'avais fait en ligne de commande.

00:13:55 :Ça me permettait de dire ce que je voulais en ligne de commande.Tac.Et lui, il a créé une image assez rapidement.Et comme ça, je l'ai téléchargé derrière.

00:14:03 :Maintenant, il y a plein de choses qui le font.Mais ça a coûté beaucoup moins cher de passer, en fait, comme ça,à l'API, que de prendre des abonnements à mi-journée ou des forfaits de 20 balles à OpenAI, à l'époque.

00:14:17 :Voilà.Et ici, on va initialiser, du coup,on va instantier cette classe-là, OpenAI.Tac.Et il va vouloir, en fait, ici, la clé d'API, tout simplement.

00:14:28 :Hop.C'est tout.Il n'y a besoin que de ça.Ensuite, ce qu'on va faire, c'est qu'on va...Je réfléchis.Je réfléchis à comment on va le faire.

00:14:42 :Pour l'instant, c'est bon.Il n'y a pas de questions, en fait.Ah non, c'est bon.C'est relativement simple, là, ce qu'on fait.Il faut juste suivre la procédure et puis on va organiser un petit peu le code,pour que ce ne soit pas trop le bazar dans le main, en fait.

00:14:58 :On va tout faire dans la page main,mais au passage, je vous montre un truc.Je vous montre un truc.Parce que sinon, je vais oublier.

00:15:06 :Je vous le montre maintenant, donc on fait une petite pause.Si on crée un de ces pages, comme ça, ici,on va mettre un fichier qu'on va appeler, par exemple,imaginons que notre fichier d'application,on va vouloir mettre les résultats de l'utilisateur.

00:15:20 :On va stocker en base de données, par exemple.On veut, ici, je ne sais pas, mettre deux, ici, je n'en sais rien,des ressources pour apprendre.

00:15:31 :C'est ce que j'avais fait, je crois, dans la création de tests,sur un truc comme ça.Si maintenant, je relance mon...Il est où ?

00:15:41 :Là.Il est là.Hop, vous voyez, en fait, ça vous crée un menu.Directement, vous avez le menu qui est créé.Donc, juste avec un dossier page, ici, page,ici, vous vous mettez à chaque fois, vous vous numérotez comme ça.

00:15:59 :Résultats, ressources, et vous avez votre page main, en fait,qui est vraiment à la racine.Et hop, vous pouvez naviguer, en fait, c'est un menu, simplement.

00:16:06 :Voilà.Donc là, on ne va rien mettre.C'était juste pour vous montrer un peu ce composant de barre latérale qui se créait tout seul, en fait.

00:16:14 :Juste en définissant un dossier page comme ça.Voilà, c'est un petit aparté.Tac, tac, parce que je voulais quand même qu'on en parle.À la base, c'était sur les composants un peu de Streamlit.

00:16:26 :Mais voilà.On va en voir d'autres.Du coup, alors...Excusez-moi, mon fils qui faisait des conneries.C'est parti.Donc, on va maintenant...On va voir un peu ce qu'on va vouloir faire.

00:16:46 :On va repartir dans le main.Là, on est dessus.Tac, et on va...On va voir comment on peut faire, déjà.Ce qu'on va faire, on va...

00:16:59 :On va mettre les questions dans le dur.Bon, pour commencer, déjà, ce qu'on va faire,cette page config, ici,ça, c'est au minimum, en fait.

00:17:07 :On peut donner une icône.Vous allez voir, on va le mettre en titre...Je ne sais pas, genre quiz page.Alors, attendez, il y a quelqu'un qui me rejoint sur le...

00:17:17 :Alpha.J'accepte.Est-ce qu'il est Alpha ?J'attends qu'il se connecte.Ça galère, je vais envoyer un message sur le Discord vite fait, peut-être.Ah non, c'est bon.

00:17:41 :Salut Alpha, je ne sais pas si tu m'entends.Salut, ça va.Ça va.Alors Alpha, du coup, comme on a vu pendant notre...Pendant le mentorat privé qu'on a fait hier,là, aujourd'hui, on fait du Streamlit.

00:18:04 :On a déjà bien attaqué, entre guillemets.Au pire, ça sera en diffusion.Mais en gros...Ça va, ça va, parce que j'ai déjà vu la vidéo que tu m'avais recommandée.

00:18:16 :Ouais, nickel.En gros, là, si tu veux, on a juste commencé à...On utilise, en fait, ici, des secrets qu'on appelle avec Streamlit.Je vais en résumer en même pas une minute.

00:18:28 :On utilise les secrets avec Streamlit.Les secrets, c'est par exemple ici une clé d'API,qu'il y a dans un dossier .streamlit,fichier secrets.quantumle.On le récupère comme ça avec Streamlit en import secret.

00:18:41 :Et hop, on récupère la valeur comme ça.Voilà, et que j'ai assigné une variable.Et on va utiliser, du coup, Chef GPT pour faire des corrections par IA.

00:18:49 :Et donc, j'ai importé de la librairie Chef GPT en fichier de Python une classe qu'on a instantiée qui va nous permettre, en fait,ce qu'on appelle le client.

00:18:59 :Ce qui va nous permettre d'aller chercher, en fait, l'IA.En gros, voilà pour l'instant.On a juste une page main.Et donc, cette page main,ce que tu n'as peut-être pas vu, du coup, dans les vidéos que je t'ai envoyées,c'est qu'on a juste mis un titre.

00:19:17 :Et ici, il y a un menu.Et le menu, en fait, il est très pratique.Alors, on ne va rien mettre ici.On va laisser ça vide.

00:19:23 :C'était juste pour montrer comment on peut créer un menu.En fait, on définit un dossier page ici.On numérote les fichiers .py.Et ça te crée, en fait, ton menu comme ça, tout simplement.

00:19:37 :Tout seul.Tu n'as rien d'autre à faire.OK.Voilà.Bon, du coup, on était là.Et je disais, maintenant, on va se créer notre application de quiz.

00:19:47 :On va juste se créer une question.Voilà.On ne va pas faire un truc dynamique où on a déjà plein de questions disponibles et tout.

00:19:58 :On va juste faire le test avec une question.Et après, s'il y en a qui veulent s'amuser,ils pourront le refaire en allant chercher des questions directement dans une base de données ou autre.

00:20:05 :Voilà.OK.Merci.Voilà.Donc, ici, du coup, on va définir un titre à notre page.Allez, on va faire un truc.Sur Mac, ça marche.

00:20:18 :Voilà.Hop.Il faut le mettre en chaîne de caractère, bien sûr.Tac.Désolé, je fais de l'énergie en même temps, je suis malade.Et normalement,ici, j'ai mon petit robot et mon quizpad.

00:20:40 :Voilà.On n'a rien fait de fou,mais voilà comment on peut configurer un peu le titre de la page.Ensuite, du coup, sans l'affaire,on va...

00:20:50 :Donc, on a déjà mis le titre.On va écrire.Donc, on va faire ça un peu dans le dur.Je suis désolé, on n'aura pas le temps de faire une base de données et tout.

00:20:58 :Ça prendrait...Il me faudrait quand même pas mal de temps.On va se fier à une question comme ça, une variable toute bête, ici.Et ce que j'avais fait, mon test, par exemple,j'avais dit, par exemple,en pittant, comment déclare...

00:21:14 :Ouais, j'ai fait ça.Déclare-t-on une...Je vais prendre mon repo, une fonction.Voilà.Une question toute bête.Et ensuite, comment ça marche ?Alors, on va tout d'abord...

00:21:32 :On va l'écrire.On va déjà écrire la question.Ça sera plus simple.Tac.On va afficher la question ici.Comme ça, ok.Donc, ça déjà...

00:21:44 :Déjà...Recharge-toi.Voilà.On a déjà la question qui s'affiche ici.Hop.Et maintenant, pour la traiter, au lieu de faire un code qui fasse 50 lignes,on va séparer un peu les choses, ici.

00:22:02 :Et on va se créer un fichier utils.py.Voilà.Utils.py.Et vous allez voir que ça va aller très, très vite à faire.L'API d'OpenAI, c'est vraiment très facile.

00:22:13 :En fait, quand j'ai compris le truc, une fois, je n'en faisais pas encore.J'ai demandé à Thibault s'il galérait à faire ça.Il m'a dit non.

00:22:19 :Une fois que tu fais un truc, après, c'est quasiment tout la même chose.C'est assez facile à gérer.Donc, notre fichier de settings.On va importer le client qu'on a créé.

00:22:32 :Lui.Ce client-là.C'est parce qu'on a instancié cette classe, je veux dire.On importe, ici.Et comment ça marche ?On va créer une fonction.

00:22:45 :Correction, ici.On va lui envoyer une question.OK.Pas forcément un petit peu...On va rester assez simple.On va avoir la réponse d'utilisateur.OK.

00:23:00 :Et ensuite, on va envoyer ça, du coup.Ces paramètres-là, on va les envoyer à OpenAI.On va déjà lui définir quel modèle on va utiliser.

00:23:11 :Je ne sais pas si on veut utiliser un modèle qui commence un peu à vieillir.On peut prendre GPT, ici.C'est 4 Omni, par exemple, qui est assez rapide à répondre.

00:23:20 :Pour une question classique comme ça, il ne va pas se bourrer.On définit le modèle, ici.Ensuite, on va lui donner les messages.Et les messages, comment ça marche ?

00:23:33 :On va d'abord définir...C'est un peu toujours le même schéma.Rôle, ici.Système, ici, comme ça.Système.Et le contenu.Le content.Ici, on va lui dire ce qu'on attend de lui.

00:23:58 :Par exemple, on va mettre vous.Je vais faire un repo de tout ça, après.Un assistant qui corrige les réponses aux questions de programmation.Et là, c'est important de lui dire ce qu'on veut.

00:24:20 :Donc là, on va aller lui dire explicitement comment il veut nous répondre.Vous allez voir pour nos composants.Donc là, on va lui dire...Ouais, on va faire comme ça.

00:24:32 :Répondez.Répondez.Toujours.Toujours.J'y donne.Toujours j'y donne avec les clés...On va dire quoi, les clés suivantes ?On va faire un truc comme ça.

00:24:55 :Correct, ici.Les clés suivantes.Donc vous voulez faire correct.Donc on voudra ici un...Mince.Tac, correct.Il disait quoi ?On voudra un booléen, ici.

00:25:13 :Hop, un booléen.Et après, on voudra avoir une autre clé, par exemple.On va prendre l'explication.Qu'est-ce qu'on veut ?On va lui dire que là, ça va être une chaîne de caractères.

00:25:36 :Et on va prendre ici un code exemple, comme ça.Code exemple, ça va être...On va dire quoi ?On va mettre string avec le code Python correct, en exemple.

00:25:59 :Vous lui dites à chaque fois ce que vous voulez.Vous pouvez très bien lui dire d'envoyer un JSON.Et les clés que vous voulez, et le type.

00:26:08 :Et ça, ça marchera très bien.Du coup, on a notre...Je réfléchis en même temps à comment on va le...OK.Ensuite, on va avoir...

00:26:19 :OK.Allez, tac.On va avoir ici...Hop là.Le rôle.On va mettre User.Hop.Et c'est parti.On va dire quoi ?On va mettre le contenu ici.

00:26:40 :Ça va être quoi ?On va se mettre une string ici.La question est...Tac.Et c'est parti.On va mettre des petits guillemets comme ça.

00:26:51 :Hop.Ça va être la question qu'on va envoyer en paramètre.OK.Hop.Et la réponse de l'utilisateur est...On va faire pareil.On va lui envoyer comme ça.

00:27:09 :C'est fondu à string.Tac.User and word.Voilà.Ça me paraît pas mal.On va mettre...Yes, correct.Hop.Explique.Et donne un exemple.Voilà.

00:27:29 :Donc là, comme ça, on lui dit ce qu'on veut.Voilà ce qu'on veut lui envoyer.Et donc à chaque fois, comme ça, on définit les rôles avant.

00:27:35 :Donc ça peut paraître un peu bizarre.Mais voilà.C'est pas mal comme système.On définit le rôle système ici.C'est vraiment le rôle qu'il a ici.

00:27:42 :Et ensuite, là, c'est ce qu'il va recevoir.Et du coup, c'est ce qu'il va en faire.Ensuite, c'est pas très compliqué.Alors.Hop.Tac.Hop.

00:28:04 :Et donc on lui a dit, du coup, le format de la réponse.Ça va être quoi ?Mince.On lui a précisé avant ce qu'on voulait exactement.

00:28:14 :Mais si on vient lui redire ce qu'on veut, on veut un...Je fais n'importe quoi.Un JSON object.Voilà.Un JSON object.Tac.Et là, du coup, rien de...

00:28:32 :On a fait vraiment le plus gros.Je réfléchis à quelque chose.En même temps, je pense que...Je pense que j'ai oublié le principal ici.

00:28:46 :Parce que je suis parti dans la fonction directement.Mais en fait, j'ai oublié le principal.C'est normal qu'il n'arrive pas à me...Tac.On va se prendre ici le client, comme ça.

00:28:57 :Voilà.Non, c'est pas ça.Pour moi, c'est chat.Voilà.C'est cette complétion ici..create.Tac.Et bien sûr, c'est là-dedans.Hop là.Voilà.Donc, on va juste...

00:29:19 :Un peu plus propre.Tac.Voilà.Normalement, si je fais faire un truc, voir ce qu'il me fait.Voilà.Ça me paraissait bizarre qu'il ne me trouvait pas l'autocomplétion.

00:29:31 :J'avais oublié ici de définir mon create.Cette complétion.Donc, vous voyez, tout ça, je ne l'ai pas inventé.C'est des choses qu'il attend.Alors.Tac.

00:29:45 :Tac.OK.Donc là, maintenant.Dans notre fonction.La correction, ici.On va prendre la correction.Hop.On va faire un json.Donc, on va importer le json, ici.

00:30:03 :Hop.Comme quoi, les modules standard, ça sert tout le temps.Un json.loads, parce qu'il renvoie ça sur forme de chaîne de caractère.Donc, ce n'est pas un load, c'est un loads.

00:30:11 :Ce n'est pas un fichier json qui renvoie.Et ici, on fait un response.Alors, je me confonds des fois avec Mistral.ai.C'est un peu différent.

00:30:20 :Response.choice, comme ça.Et c'est .message.content.C'est ça, tac.Et là, en fait, du coup, ça, ça vous renvoie une chaîne de caractère json, en fait.

00:30:34 :Voilà.Et donc, pour ça, on utilise json.loads.Et comme ça, ici, si on regarde le type de correction, ça va être un dictionnaire.On transforme en dictionnaire.

00:30:45 :Et vous allez voir comment on va l'utiliser, parce qu'on peut faire, du coup, un return correction.Est-ce que ça va ou pas ?Pour l'instant.

00:30:55 :En fait, j'ai une question, en fait, dans le role, dans le content.En fait, c'est comme si on prépare, c'est comme si on bridait, on va dire, la question, en fait, ou le contenu.

00:31:07 :En fait, alors attends, répète ta question.En fait, quand on prépare le contenu de la question, en fait, c'est comme si on prépare l'open-eye, donc le chat.

00:31:19 :À trouver les réponses, en fait.Ouais, ouais, ouais, en fait.Là, c'est comme si, au lieu d'envoyer dans un chat, tu peux l'envoyer directement via l'API, comme ça, entre guillemets.

00:31:33 :Voilà.Tu l'envoies pas dans le chat, tu l'envoies pas via le navigateur, tu l'envoies directement via l'API, en fait.D'accord.Alors.Le contenu de système, en fait, il oriente un peu l'intelligence artificielle pour dire le type de réponse qu'on a.

00:31:49 :Ouais, en fait, tu l'apprends, tu dis ce que tu veux, tu dis ce qu'il doit être.Souvent, quand vous allez faire des, je ne sais pas, vous avez Cloud, par exemple, vous avez ce qu'on appelle des espaces.

00:31:59 :Des espaces de projets, entre guillemets.Et bien, vous spécifiez dans les instructions, vous dites, c'est toujours important de dire ce qu'il doit être.Donc, je ne sais pas, moi, des fois, ça m'arrive, je pars suivre des projets, où je déplace soit en tant que, entre guillemets,assistant développeur, ou des fois même mentor, pour être sûr qu'il soit en mode explication, s'il y a des choses que je ne comprends pas, par exemple.

00:32:22 :Donc, il faut toujours lui donner un rôle, en fait, c'est important.D'accord.C'est un prompt formaté, ouais.Euh, ok.Donc, ouais.Donc, en gros, le système ici, c'est, on a le contexte global, en fait.

00:32:40 :Et user, ça va être, comment on peut dire ça, c'est l'entrée de l'utilisateur, simplement.Sauf que nous, voilà, ouais, on a, c'est formaté, c'est qu'on a, c'est tout ça que je voulais dire, Jacques-André, c'est qu'ici, on a,on dit bien la question est, on a la question, la réponse est, voilà.

00:32:57 :Comme ça, au lieu d'envoyer juste la question et la réponse à l'arrache, quoi, comme ça, c'est,lui, on est plus sûr qu'il ne fera pas d'erreur, quoi.

00:33:05 :Euh, donc, voilà.Pour l'instant, c'est bon, du coup, il n'y a pas de problème ?Oui, oui, c'est bon.Euh, alors là, où j'ai fait le boulot de tout à l'heure, c'est que j'avais complètement, je suis parti dans ma fonction,et un peu instinctivement, je suis parti à coder, modèles, mes sacs, parce que ça, c'est un truc que vous retrouverez tout le temps.

00:33:23 :Mais surtout, n'oubliez pas ça, parce que sinon, ça ne marchera jamais, puisque vous n'en verrez jamais rien au Konai.Et, en plus, vous aurez l'autocomplétion, quoi, à chaque fois des paramètres ici.

00:33:34 :Euh, donc, voilà, là, en fait, on a fait le plus gros, mais vraiment, là, on a tout fait.Donc, on a juste ici à aller envoyer ça dans l'interface, notre fonction.

00:33:45 :Je l'ai fait pour ne pas tout faire sur la même page, parce qu'après, c'est le bordel.J'aime bien quand c'est quand même un minimum organisé.

00:33:51 :Et ici, du coup, hop, on va importer notre fonction.C'est parti. Alors, on va travailler, du coup, avec les composants Streamlit, ici.La réponse, justement, enfin, la réponse utilisateur, c'est pas répondre, c'est vraiment la réponse utilisateur, entre guillemets.

00:34:16 :On va faire un text-input, et on va mettre votre réponse.Donc, vous voyez qu'on fait ça, en fait, vous allez créer un...On va créer, là, un composant, mais à la fois, on va attribuer, en fait, une variable.

00:34:37 :Hop là. OK. Donc, ce qu'on va créer, là, on va attribuer une variable.Euh, du coup, on va continuer ici, et on va se créer un petit bouton, voilà, pour soumettre cette réponse.

00:34:53 :Donc, on va faire ça. On va prendre un bouton, c'est tout simple, hein.On va mettre sous, il n'y a qu'un M, soumettre, ici.Et qu'est-ce qu'il passe ? Donc, si...

00:35:06 :Donc, en gros, là, on fait une condition, en même temps, genre, si le bouton est activé, entre guillemets.Voilà, on fait un if, ST point bouton.

00:35:14 :Donc, ça, ici, on va rentrer dedans, si on clique sur le bouton.Et on va vérifier, surtout, ici, si on a une réponse, ici.Hop. On peut s'amuser. Alors, on va faire une casquette de composants, juste pour vous faire ce qu'à la base, c'est ça que je voulais vous montrer.

00:35:30 :On peut créer un petit spinner. Tac.On va mettre correction en cours. Voilà.Donc, on va utiliser un context manager. Hop.Et, en fait, le context manager va servir à faire quoi ?

00:35:44 :À faire apparaître un petit spinner de chargement, tout le temps que OpenAI, en fait, va mettre à envoyer sa réponse.Voilà. On peut dire ça comme ça.

00:35:58 :Donc, là, qu'est-ce qu'on fait ?Donc, Alpha, c'est ce que je disais, là, il y a un démentorat qu'on a fait, il n'y a pas longtemps.

00:36:04 :C'est qu'ici, on a la...Pour tout le monde, je pense que c'est bon, mais je préférerais préciser, tout ce qu'on fait, ici, dans une fonction,si on ne retourne rien, on ne pourra rien récupérer. Voilà.

00:36:16 :Là, je retourne vraiment la correction et je la récupère dans une variable, ici.Je la récupère ici.OK. Donc, maintenant, on n'oublie pas ce qu'on a fait, c'est qu'on a dit...

00:36:30 :Il va nous renvoyer les clés, du coup, correct, explication, code example.OK. Il ne faut pas que je me gourre.Attendez. Correct, explication, code example. OK.

00:36:42 :Alors, qu'est-ce qu'on peut faire, du coup ?On va faire un get pour récupérer, ici, la clé correct.Voilà.On lui a dit, tu renvoies un boulet 1.

00:37:00 :Donc, si c'est true, du coup, ce qu'on fait, c'est qu'on va faire un succès, comme ça,donc un autre petit composant.On va écrire correct, c'est génial.

00:37:13 :Sinon, c'est que ça ne va pas, donc on peut très bien faire un erreur, ici.Voilà. Donc là, on va mettre incorrect, tout simplement.Voilà.

00:37:24 :Ensuite, on va pouvoir écrire notre... l'explication.C'était quoi, déjà ?Ça, on s'en fiche.Explication, c'est ça, la clé.Donc, on va faire un correction.

00:37:44 :On va mettre, ici, l'explication.Voilà.Et ensuite, vous allez voir qu'on va récupérer l'exemple de code.Et en fait, ils ont fait un truc vachement cool, Streamlit, c'est qu'ils ont prévu le formatage de code.

00:38:01 :Donc ici, on pourrait peut-être avoir des questions où il n'y a pas toujours de la correction de code,enfin, d'exemple de code.Donc, si on récupère, ici, un code exemple, c'est ça.

00:38:17 :Explication, correct.Voilà, j'ai mis exemple.Ça ne marchera pas, sinon.Code exemple.Qu'est-ce qu'il se passe ?On va pouvoir faire un peu de formatage.

00:38:31 :On va mettre un nouveau petit composant, un subheader.On va mettre exemple de code.Et ici, simplement, il y a un composant pour le code, tout fait.

00:38:43 :Et donc ici, on va mettre notre...Bon, je n'aurai plus pu la récupérer dans une variable avant.Et c'est code exemple.Ça, je ne ferai pas d'erreur.

00:38:57 :Et à Streamlit, en fait, le code, ici, si vous voyez, on peut lui donner le langage qu'on veut.Comme ça, il va bien, le niveau de la coloration syntaxe, ça va être sympa.

00:39:05 :Donc, on peut lui dire le langage qu'on veut.Et on va mettre Python.Alors, à partir de là, si je n'ai pas fait d'erreur,s'il vous plaît, croisez les doigts pour moi, sinon ça reprend tout ensemble.

00:39:19 :Euh, tac.Alors déjà, on a notre bouton qui apparaît sous mettre.En Python, comment déclare-t-on une fonction ?On va lui mettre, avec le mot play, run.

00:39:31 :Voilà, j'ai déjà fait un test une fois là-dessus.On va essayer. Est-ce qu'on va avoir un bug ? C'est parti.Donc là, voilà, il y a une erreur.

00:39:42 :Ok, donc il y a un truc qui ne lui plaît pas dans mon formatage.Alors, on va essayer de débugger nous-mêmes, sinon on verra.Le système sans le E.

00:39:54 :Ouais, ça doit être ça.Ah ouais, le système qui est là.Il vous dit bien système sans le E.Merci Antoine. Tac, je suis où ?

00:40:07 :Ici.Utilise.J'ai fait la faute où ?Ok.Il y en a 10.Tac.Ouais, ouais.Putain, il en revient les...J'ai jamais vu cette erreur-là, c'est pas mal.

00:40:24 :Franchement, c'est bien, on sait direct ce qu'on a, quoi.C'est un truc de fou.Ah, les erreurs sont bien formatées.Il n'y a même pas besoin de se dire, on va essayer de lire.

00:40:33 :En fait, tout est formaté ici.Ok. Bon, on va recommencer, du coup.Est-ce qu'on va avoir une autre erreur ?On verra bien.Hop là.

00:40:44 :Alors.On va repartir de zéro.J'ai mis quoi avec le mot-clé run ?Autre erreur.Voilà.Donc là, il me dit incorrect.Et il va vous dire, la réponse est incorrect.

00:40:58 :Répétons les fonctions qui sont déclarées avec le mot-clé def et non run.Une fonction qui situe dans son nom et ses paramètres.Et là, exemple de code.

00:41:04 :Et boum.Il met bien ici un petit composant pour afficher le code.Voilà.Donc, vous voyez, en fait, là, ce qu'on pourrait du coup faire par la suite,c'est la question qui est ici.

00:41:20 :On pourrait très bien avoir une base de questions et faire un, utiliser par exemple, les récupérer dans une liste,utiliser, faire un import.En sorte qu'il y a une question aléatoire, en fait.

00:41:32 :Voilà.On pourrait très bien dire, allez, faire un random.Ou afficher plusieurs questions, peu importe.Organiser ça dans des thèmes, ici, sur le menu.Un thème, je n'en sais rien, comme sur docstring,langage syntaxe, module, ainsi de suite.

00:41:46 :En fait, on pourrait imaginer plein de choses.Donc, je trouve que pour ça, Streamlit, vous avez vu,là, on a fait un quiz avec Correction Paria.

00:41:55 :L'interface, c'est juste ça.Voilà.Bon, c'est simpliste, mais on a déjà fait quand même pas mal de choses, entre guillemets.OpenAI, on a fait ça ici.

00:42:07 :Vous voyez qu'en fait, il n'y a rien de, entre guillemets,on n'a rien fait de fou.C'est toujours la même chose.Enfin, c'est souvent la même chose.

00:42:15 :On a toujours le même schéma.On a le modèle.On a ici, dans le message, c'est ce qu'on dit.Le rôle.Qu'est-ce que tu fais ?

00:42:22 :Utilisateur, ce qu'il envoie.On dit qu'on veut les clés temps en temps, en fait, en JSON.On lui redit bien ce qu'on veut dire JSON.

00:42:29 :Et après, vous avez juste à récupérer la correction, ici le résultat,et vous récupérez vos clés.Et comme ça, vous pouvez formater dans votre projet ce que vous voulez renvoyer comme valeur.

00:42:42 :Enfin, ce qui a été renvoyé, vous le mettez où vous voulez, entre guillemets.Donc, voilà.Moi, franchement, l'API d'OpenAI, elle est vraiment cool.On retrouvait un petit peu ce système-là chez Mistral.

00:42:54 :Je ne sais plus si c'est chez Mistral.On peut demander un format comme ça de JSON.Je n'ai jamais essayé.Mais à savoir qu'avec OpenAI, vu que c'est, je ne sais pas,on peut dire le plus connu, je pense, avec Cloud.

00:43:08 :Je pense que c'est le plus connu quand même, OpenAI.Vous retrouvez des ressources, un nombre de ressources sur Internet,c'est assez affolant.Et du coup, comme il y a plein de ressources, l'IA, vous lui demandez,je ne pense pas qu'elle va se gourer.

00:43:21 :Comme moi, j'avais laissé, par exemple, avec Mistral,j'avais laissé l'autocomplétion.Ça ne marchait pas et elle ne comprenait pas.Et du coup, je suis allé dans la doc et je l'ai fait moi-même.

00:43:31 :Mais je pense que du coup, avec OpenAI, il n'y aura pas ce problème d'autocomplétion,au cas où.Donc, voilà.Donc, je ne dis pas que OpenAI est mieux que Mistral.

00:43:40 :C'est juste que c'est différent, c'est plus connu et donc,voilà, il y a plus de ressources.Mais sinon, Mistral AI, moi, j'ai beaucoup aimé aussi au niveau de l'API.

00:43:47 :Donc, voilà, un petit peu pour notre projet.Et surtout, les secrets gérés dans un secret.toml,le petit dossier.streamlit et vous récupérez ça avec streamlit,on importe secret et comme ça, on va récupérer la clé d'API comme ça.

00:44:04 :Voilà.Est-ce qu'il y a des questions ou pas ?Le secret, c'est l'équivalent du .env en fait.Oui, c'est ça.C'est exactement ça.Voilà.Voilà, ça vitera les problèmes.

00:44:19 :Tac.Et mon N810, je vais le laisser moi.Je vais le laisser celui-là quand même.Tac.Donc, voilà.Est-ce qu'il y a des questions ou pas par hasard ?

00:44:31 :Non, non, c'est bon.On s'est plus bien compris.Merci.Moi aussi, ça va.Je vais essayer de voir la résolution.Ouais.OK.Ben oui, il faut juste les habitudes apprendre.

00:44:44 :En fait, vu que j'ai déjà fait du streamlit quelques fois,les composants, je les connais.Une fois qu'on les connaît, c'est toujours la même chose.

00:44:51 :Du st.machin, ça porte bien son nom en général.Du subheader, st.code pour le code.Enfin, voilà, il n'y a rien de très compliqué.Franchement, moi, je suis assez fan de streamlit maintenant.

00:45:01 :C'est assez fou.Et je vous disais, là, c'est facile aussi.OpenAI, entre guillemets, à gérer après.Le plus dur à chercher au début, c'est de savoir les noms des composants qu'on cherche.

00:45:13 :Documentation, c'est tout.Ouais, ouais.Alors, surtout, surtout.Elle est bien faite, la documentation, ouais.Surtout, surtout.Ici, quand vous avez un API référence.Alors, en plus, ce qui est bien, c'est qu'il y a plein de tutos.

00:45:28 :Là, on ne voit pas beaucoup, mais en fait,quand vous faites un collapse, il y a pas mal de petites choses.Ils ont, ici, pour tout ce qui est composant.

00:45:39 :Alors, il y en a la blinde.OK.Vraiment la blinde.Donc, tout ce qui est chart elements pour les graphiques et tout,les textes, il y en a pas mal.

00:45:46 :Boum, boum, boum.Et je vous invite aussi, si je reviens sur streamlit,à Strasbourg.Ça peut permettre de développer pas mal de petites applications très rapidement, en fait, streamlit.

00:46:01 :Ouais, carrément.Le forum est cool.Il est hyper actif.Il y a vraiment beaucoup de monde sur le forum.On peut discuter avec les gens sans aucun problème.

00:46:13 :Ouais, et puis voilà, ils ont plein de petits composants.Je vous l'ai déjà montré, je crois, la dernière fois.Il n'y a pas de petits composants que vous pouvez télécharger, en fait.

00:46:19 :Ils ont même fait leur page, les mecs, sur GitHub.En fait, il y a un écosystème sur streamlit qui est assez fou.Et je ne sais pas si je l'ai déjà dit, mais c'est open source.

00:46:31 :Voilà.Mais derrière, il y a Snowflake qui est derrière.Derrière streamlit, il y a eux.Donc, vous pouvez héberger gratuitement, en fait, sur streamlit.Mais bon, pour avoir après, on va dire, en mode premium,il faut payer quand même, ce qui est normal.

00:46:51 :On ne peut pas héberger gratuitement, quoi.Donc, voilà.C'est eux qui sont derrière streamlit, en fait, en partie.Si je n'ai pas de bêtises.C'est la boîte mère, ça.

00:47:01 :Alors, je ne sais plus si, à la base, c'était eux.Je ne sais plus si, à la base, c'était eux.Ils ont un petit wiki ou...

00:47:10 :Tiens, je tape streamlit wiki, je tombe là-dessus.Est-ce que...Ils n'en parlent pas ici.Mais quand je tape streamlit wiki, je tombe directement sur Snowflake, quoi.

00:47:23 :Mais je crois qu'ils en parlent sur le site, tout simplement, tout en bas ou pas ?Je ne sais plus.Il n'y a pas...Voilà.

00:47:35 :En bas, Snowflake.Voilà.Donc, voilà.Derrière, c'est Snowflake.C'est bien, ça.Donc, voilà, un petit peu.S'il n'y a pas de questions, pour moi, c'est bon, du coup.

00:47:46 :Non, c'est clair, c'est clair.Non, c'est bon, c'est clair.Merci.Nickel.Vous voyez, ça fait des trucs simples, en fait, sans faire des trucs hyper compliqués.

00:47:56 :On peut faire des trucs assez cools, quoi.Et puis, on reprendra la semaine prochaine du Django.On reprendra.Donc, voilà.Écoutez, bonne soirée à tout le monde, alors.