Partage IA

Génération de l'image avec Banana

L'IA ne peut pas générer des images à l'intérieur d'un code HTML. Je dois les générer séparément et réunir celles-ci à la fin de la création. Je vais donc générer l'image qui servira à expliquer l'oreille.

Requête à Banana avec option « Raisonnement »

Génère un schéma de l'oreille humaine - structures
L'image doit être de format 16 X 9 sur fond blanc.
Des légendes doivent identifier ces parties de l'oreille:
- Pavillon
- Conduit auditif
- Tympan
- Marteau
- Enclume
- Étrier
- Trompe d'Eustache
- Cochlée
- Nerf auditif
- Canaux semi-circulaires

Réponse de Gemini Banana

Je suis satisfait de la génération de l'image et j'enregistre celle-ci sur mon poste. Elle sera réintroduite dans ma page html à la fin de ma création.

Création de ma page html à l'aide de Gemini Canvas Pro

Je souhaite créer ma fiche savoir. Je me préoccupe de l'aspect visuel de la page qui sera générée car je compte créer plusieurs fiches et je ne veux pas que mon cours prenne la forme d'une macédoine. Je vais donc dicter un style visuel à l'intérieur de ma requête. Mon choix : je possède un cours Moodle et je désire une apparence visuelle similaire aux contenus existants.

Je réalise ma première requête Gemini avec l'option Canvas et je sélectionne PRO.

Je contrains l'IA à générer le contenu HTML dans un format spécifique et je l'informe du contenu à générer. J'inclus les informations relatives à l'image (générée précédemment).

1.Exigences techniques

Crée une page explicative complète et autonome en format Bootstrap 4 (compatible Bootstrap 5) et utilise uniquement des classes Bootstrap, aucun style inline. Les couleurs sont des classes bootstrap. Cette page sera intégrée dans Moodle et la hiérarchie des titres doit débuter avec une balise h3 afin d'assurer l'accessibilité. Tu ne dois pas générer de Jumbotron car Moodle possède déjà une entête.

La page doit systématiquement être constituée de :
- Un titre avec arrière plan coloré (alerte)
- Une zone de texte explicatif (carte border et shadow)
- Une vidéo explicative générée selon ce modèle : <div class="embed-responsive embed-responsive-16by9 video-container" data-tag-id="3"><iframe class="embed-responsive-item video" frameborder="0" title="" allowfullscreen="1" src="https://www.youtube.com/embed/WvljI0VIq-E?rel=0" data-tag-id="4"></iframe></div>
- Une zone interactive qui contient une image générique picsum (qui sera remplacée ultérieurement par l'image banana). Sous l'image, des boutons de qui révèlent des contenus (à la manière des onglets) en lien avec les informations de l'image.
- Une zone informative « Le savais-tu ? » (alerte info)

2.Exigences de contenu

Sujet : anatomie de l'oreille
Niveau : secondaire 3 (Québec)
Matière : Science et technologie.
Intention : Créer une fiche savoirs qui explique l'anatomie et les fonctions de l'oreille. L'élève doit reconnaitre les parties de l'oreille externe, moyenne et interne. Il doit connaître la fonction de chaque partie de l'oreille.

Url de la vidéo explicative : https://youtu.be/QimLxJIvras

Informations de l'image : 
L'image contient ces repères qui identifient ces parties de l'oreille:
- Pavillon
- Conduit auditif
- Tympan
- Marteau
- Enclume
- Étrier
- Trompe d'Eustache
- Cochlée
- Nerf auditif
- Canaux semi-circulaires

Note: il aurait été préférable de placer le bon url de la vidéo dans les exigences techniques car je réalise après coup qu'il existe une contradiction entre mes exigences techniques et mes exigences de contenu.

Réponse de Gemini Canvas

La page a été générée, le visuel est plutôt sobre mais mon attention se porte sur l'organisation de l'information et la précision des contenus générés. J'examine les textes générés et je teste les boutons qui révèlent les informations sur les parties de l'oreille. L'url de la vidéo et de l'image devront être remplacés mais je ne m'en soucie guère car je vais faire les retouches à la fin, une fois la page crée dans Moodle.

Consulter la page AVANT les retouches

Retouche sur une portion de ma page (Astuce)

Je ne suis pas satisfait de la mise en page des boutons de navigation. Ils prennent trop d'espace comparativement aux textes qu'ils révèlent. Je clique sur l'icône (située en bas à droite de l'écran) qui va me permettre de préciser ma requête selon la zone sélectionnée à l'écran.

Requête en lien avec la zone sélectionnée (icône en bas à droite)

Place les boutons au dessus de la zone d'information car l'espace occupé par les boutons est plus grand que le contenu du texte révélé lorsque le bouton est sélectionné.

Réponse de Gemini Canvas

Gemini m'a regénéré la portion de la page sélectionnée. Il a mis les boutons en dessous, mais bon, l'idée me plait et je vais conserver la solution proposée. Je vais cliquer sur le bouton « Partager » afin de récupérer le code HTML généré par Gemini.

Note : les enseignants ont le choix de coller le code HTML généré dans un Google Sites (intégration) ou dans Moodle. Dans le cas de Moodle, deux scénarios sont possibles :

• Mon choix : coller le code source dans une ressource « PAGE » de Moodle. Je sais qu'une partie du code HTML sera supprimée (l'entête HTML et les styles) mais ce n'est pas un enjeu car j'ai exigé dans ma requête qu'il n'y ait pas de styles et l'entête n'est pas requise puisque Moodle construit la page et il possède Bootstrap (qui assure la mise en page)
• Alternative : coller le code dans un fichier bloc notes et l'enregistrer avec l'extension .html puis le glisser dans le cours Moodle sous la forme d'un fichier. Je recommande cette option uniquement lorsque la page contient un script complexe. Ce n'est pas le cas car notre page est une ressource statique et non une activité interactive.

Consulter la page APRÈS les retouches

Intégration dans Moodle

On arrive maintenant à l'étape finale !

Je compte coller le code source dans une page Moodle pour voir ce que ça donne. Au moment de coller le code, je remarque la présence d'un script à la fin du code source et je me rends compte que cette portion du code fait l'appel à Bootstrap (Moodle le possède). Je décide alors de le supprimer. Je clique ensuite sur « Enregistrer et afficher » pour voir si ma page fonctionne.

  <!-- Scripts Bootstrap 4 nécessaires pour le fonctionnement des onglets (Tabs) -->
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" xintegrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Bout de code supprimé avant d'enregistrer

Retouches à la page à l'aide de l'éditeur Bootstrap

Je retourne modifier les paramètres de la page et je clique sur l'icône de l'éditeur Bootstrap car je désirer apporter les retouches finales : modifier l'image et la vidéo.

L'éditeur Bootstrap est lancé à partir de la barre du menu

Je sélectionne la vidéo et le panneau de gauche m'offre de remplacer l'url de la vidéo.

Ensuite, je sélectionne l'image (agrandir la saisie d'écran à droite pour voir les opérations) et je sélectionne l'image sauvegardée dans mon ordinateur. Je clique sur le bouton vert pour enregistrer, j'enregistre ma page Moodle, et c'est enfin terminé !

La démarche peut sembler longue mais vous conservez le contrôle des contenus générés tout au long du processus.

Fiche savoir de l'oreille dans Moodle

Validation : création d'une deuxième fiche savoir de l'oeil

J'ai créé une deuxième requête en précisant le sujet à traiter (l'oeil). Dans les exigences techniques,  j'ai indiqué qu'un fichier html en pièce jointe était fourni ( j'ai fourni le code source de la fiche savoir de l'oreille). J'ai fourni le code source de l'oreille afin d'entrainer l'IA à générer le code source en réutilisant la même structure html afin que les deux fiches aient la même forme visuelle.

Fiche savoir de l'oeil dans Moodle