L’interface Canvas annoncée en octobre dernier est immédiatement devenue une référence sur une nouvelle façon d’interaction entre l’IA et les hommes qui travaillent avec un artefact partagé, que ce soit du texte ou du code.
Quelques mois se sont écoulés depuis lors et à partir de janvier, il est disponible dans toutes les différentes versions du logiciel OpenAI et au-delà, les chats, l’assistant des Championnats d’Europe de Mistral a récemment introduit la même interaction dans son interface.
Si l’essence de cette méthode d’interaction reste essentiellement celle annoncée en octobre récemment OpenII a annoncé la possibilité d’effectuer directement le code HTML comme cela se produit déjà pour les artefacts de Claude. C’est une nouveauté intéressante qui pourrait avoir un impact significatif sur Développement de prototypes et dans l’enseignement non seulement de la programmation. Voyons comment l’introduction de l’aperçu dans Canvas modifie considérablement l’interaction avec l’IA.
Un spectateur Frattali
Qui me connaît sait que je suis un grand fans du Mandelbrot Fractal (Et pas seulement) et j’ai commencé à programmer les téléspectateurs de l’ensemble depuis les lycées. C’était également l’un des exemples que j’ai fait pendant de nombreuses années car j’ai enseigné le cours de programmation d’interface graphique. Il est donc naturel que Mettez-le à l’épreuve L’utilisation de ce problème comme point de départ (en fait, la demande de génération du code d’un programme qui affiche l’ensemble a été l’une des premières invites que j’ai essayées sur GPT 3.5).
L’invite que j’ai utilisée pour générer le code est la suivante:
«Venez sur un code de code qui implémente dans HTML5 un spectateur de Frattali Mandelbrot. Lorsque la traînée est réalisée, le système affiche la zone sélectionnée sur laquelle le zoom sera effectué tout en maintenant les proportions de la vue. Au fur et à mesure que vous zoomez, les itérations par point sont augmentées, à partir des 150 initiaux en grimpant jusqu’à 2000. “
C’est Une invite assez simple ce qui se limite à donner des informations de base sur le comportement non seulement de l’ensemble mais aussi de l’interaction attendue. En fait, il est demandé que le zoom puisse être fabriqué en utilisant la traînée et la chute tout en maintenant la proportion entre la hauteur et la largeur de l’écran pour éviter pendant l’exploration, la frattale se déformera.
Comme prévu, la case dans laquelle le code Frattale est généré est ouverte et, lors du premier accès, nous sommes informés qu’il est possible d’afficher un aperçu en utilisant la fonction appropriée:
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093506/immagine-che-contiene-testo-schermata-software-4.png?resize=1170%2C748&ssl=1)
Le début de l’aperçu met la visionneuse de Frattale. La vue est décidément excellente, le système calcule les proportions à droite, mais la première implémentation de la sélection a eu un bogue: la traînée du rectangle rouge de la sélection a laissé un sillage résolument mauvais à voir. Je me suis limité à demander à corriger le bogue pour obtenir une version correcte de la visionneuse.
![L'image qui contient du texte, de l'écran, du logiciel multimédia, du contenu logiciel généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093510/immagine-che-contiene-testo-schermata-software-m.png?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel multimédia, du contenu logiciel généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093510/immagine-che-contiene-testo-schermata-software-m.png?resize=1170%2C748&ssl=1)
La comparaison avec Claude
J’ai essayé d’utiliser Claude avec la même invite et j’ai obtenu une visionneuse tout aussi fonctionnelle mais moins respectueuse des proportions:
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093515/immagine-che-contiene-testo-schermata-software-5.jpg?resize=1170%2C857&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093515/immagine-che-contiene-testo-schermata-software-5.jpg?resize=1170%2C857&ssl=1)
Dans le cas de Claude, l’artefact est exécutable, mais il n’est pas possible de modifier le code, Demandez simplement à l’invite pour le changer. En ce sens, l’interface Canvas semble beaucoup plus flexible, permettant des modifications ponctuelles au code sans avoir à demander en fait à régénérer l’intégralité du code.
La comparaison avec les chats de Mistral
Lorsque j’ai répété la procédure avec les chats que j’ai obtenus (permettant à la toile et à l’interprète de code) une interaction très similaire à celle de Chatgpt, mais le code généré était incomplet, avec une vue qui interagit réellement mais sans affichage correctement le fractal comme vu dans la Figure suivante:
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093519/immagine-che-contiene-testo-schermata-software-5.png?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093519/immagine-che-contiene-testo-schermata-software-5.png?resize=1170%2C748&ssl=1)
La navigation dans la fractale fonctionne de la même manière dans la version générée par GPT et dans celle générée par Claude.
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093524/immagine-che-contiene-testo-schermata-software-6.jpg?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093524/immagine-che-contiene-testo-schermata-software-6.jpg?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093528/immagine-che-contiene-testo-schermata-software-6-1.jpg?resize=1170%2C857&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093528/immagine-che-contiene-testo-schermata-software-6-1.jpg?resize=1170%2C857&ssl=1)
Si nous partageons l’aperçu de ChatGPT et le voyons de manière anonyme, nous obtenons la demande d’interface si nous voulons effectuer le code (après tout, c’est notre navigateur Web pour effectuer le code généré et pourrait être utilisé pour lui apporter des attaques). Une fois que vous consentez, notre micro application est chargée sans l’interface GPT pour modifier le code (l’action toujours possible en utilisant l’option appropriée en haut à droite):
![L'image qui contient l'écran, le texte, le logiciel multimédia, le contenu logiciel généré par l'IA peuvent ne pas être corrects.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093532/immagine-che-contiene-schermata-testo-software-m.png?resize=1170%2C748&ssl=1)
![L'image qui contient l'écran, le texte, le logiciel multimédia, le contenu logiciel généré par l'IA peuvent ne pas être corrects.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093532/immagine-che-contiene-schermata-testo-software-m.png?resize=1170%2C748&ssl=1)
Pour le plus curieux, voici le lien vers le spectateur généré par l’IA: Chatgpt – Mandelbrot Viewer
Utiliser dans le contexte de l’enseignement
Il débat beaucoup, et avec raison, sur l’utilisation de l’IA générative dans l’enseignement, mais considérant comme la seule application celle de la génération du texte (ou des questions). La possibilité de générer de véritables applications interactives avec une simple invite ouvre de nouveaux scénarios, à la fois en utilisant les artefacts de Claude et la boîte GPT et Mistral.
Essayons de faire un exemple simple pour rendre l’exemple plus concret. Nous pouvons demander par exemple:
«Venez dans une boîte de code HTML5 qui montre un simulateur de projectile pour enseigner le mouvement parabolique. Ce doit être un angle régulier possible et une vitesse initiale “
Le résultat, après quelques commentaires et ajout supplémentaires, vous permet d’expérimenter comment diverses trajectoires paraboliques sont obtenues à mesure que les conditions initiales d’éruption et de vitesse initiale sont obtenues. C’est un outil simple qui pourrait rendre une leçon de physique plus interactive, peut-être voir dans le code comment les équations de moto sont implémentées, linéaires le long de l’axe XE accéléré uniformément le long de l’axe Y.
![L'image qui contient l'écran, le texte, les logiciels, le contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093536/immagine-che-contiene-schermata-testo-software.png?resize=1170%2C748&ssl=1)
![L'image qui contient l'écran, le texte, les logiciels, le contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093536/immagine-che-contiene-schermata-testo-software.png?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093541/immagine-che-contiene-testo-schermata-software-6.png?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093541/immagine-che-contiene-testo-schermata-software-6.png?resize=1170%2C748&ssl=1)
Claude produit également à nouveau un résultat similaire (et peut-être avec un peu plus de soins dans l’interface générée):
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093545/immagine-che-contiene-testo-schermata-software-7.png?resize=1170%2C857&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093545/immagine-che-contiene-testo-schermata-software-7.png?resize=1170%2C857&ssl=1)
Mistral produit également une application similaire même si elle est certainement la moins bien entretenue des trois essayés.
Dans le cas de Mistral, il est possible de modifier le code comme cela se produit dans la boîte Chatgpt, cela permet en principe d’expérimenter l’application, certainement un aspect intéressant à approfondir dans une classe.
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093550/immagine-che-contiene-testo-schermata-software-8.jpg?resize=1170%2C748&ssl=1)
![L'image qui contient du texte, de l'écran, du logiciel, du contenu logiciel multimédia généré par l'IA peut ne pas être correct.](https://i0.wp.com/imgcdn.agendadigitale.eu/wp-content/uploads/2025/02/11093550/immagine-che-contiene-testo-schermata-software-8.jpg?resize=1170%2C748&ssl=1)
Conclusions
La fonction “Aperçu” de la toile Openai comble une lacune qui manquait et qui, à la place, Claude di Anthropic avait bien interprété. Au cours de moins de deux ans, le code généré par les modèles d’IA est presque toujours correct et est absolument naturel Commencez vers un monde dans lequel avec une simple invite, nous pouvons demander à générer une interface graphique que nous pouvons tester et est entièrement fonctionnelle.
Il est important de souligner comment, en principe, des interfaces pleinement opérationnelles peuvent être effectuées qui invoquent les abeilles et donc effectuer une tâche utile.
Après tout, Alan Turing était juste lorsque les mathématiciens qui ont écrit les tables (programmes pour les premiers ordinateurs) serviraient pendant un certain temps, mais à la fin, les ordinateurs auraient généré ces tables indépendamment, et en fait c’est ce qui se passe avec l’IA qui génère du code et l’exécute directement. Il reste à voir comment cette capacité trouvera des applications (, espérons-le, en toute sécurité) dans un avenir proche.