Comment exécuter le code HTML de ChatGPT ou Gemini et voir la page en direct

La façon la plus rapide d’exécuter le code HTML de ChatGPT ou Gemini est d’appuyer sur Afficher dans l’extension gratuite AI Code Harvester : ta page s’ouvre en direct dans un nouvel onglet, avec des boutons pour la voir en taille ordinateur, tablette et mobile, et tu n’as jamais à enregistrer de fichier. Sans l’extension, tu copies le code dans un fichier nommé index.html et tu fais un double-clic dessus, comme expliqué plus bas.

Pourquoi le code d’un chat n’est pas encore une page web

Quand ChatGPT ou Gemini « fabriquent un site », ils te donnent en réalité du texte : un bloc de HTML (le squelette de la page), souvent un bloc de CSS (couleurs et mise en page) et un bloc de JavaScript (boutons et actions). Pense à une recette. Tous les mots sont là, mais personne n’a encore cuisiné le plat. Le navigateur web est le four qui transforme la recette en quelque chose que tu peux regarder.

Certains chats montrent leur propre petit aperçu, mais pas toujours, pas pour tous les types de code, et il disparaît quand tu quittes le chat. Si tu veux bien voir la page, sur différentes tailles d’écran, et y revenir plus tard, tu dois l’exécuter toi-même.

La méthode facile : appuie sur Afficher

AI Code Harvester est une extension Chrome gratuite (un petit module qui donne une nouvelle fonction au navigateur). Elle se place sur les pages de ChatGPT et Gemini, trouve les blocs de code de la réponse et, quand l’un d’eux est une page web, te la montre. Voici une courte vidéo, puis les étapes.

1. Installe l’extension. Ajoute-la depuis le Chrome Web Store. Elle est gratuite et sans inscription.
2. Demande une page à l’IA. Par exemple : « Fais-moi un site d’une seule page pour une petite boulangerie avec un bouton de commande. Donne-moi index.html, style.css et app.js. » Nommer les fichiers aide.
3. Attends la fin de la réponse. Le petit panneau Code Harvester sur la page liste les fichiers trouvés.
4. Appuie sur Afficher. Ta page s’ouvre dans un nouvel onglet. Si tu as rangé le panneau au bord de l’écran en tiroir étroit, le bouton Afficher est sur le tiroir.
5. Essaie les trois boutons de taille : Ordinateur, Tablette et Mobile. Ils montrent comment la page tient sur un écran d’ordinateur, de tablette et de téléphone.
6. Le résultat ne te plaît pas ? Demande une modification à l’IA. Quand elle répond, l’aperçu se met à jour tout seul, tu peux donc continuer à demander et à regarder.
7. Besoin de plus de place ? Appuie sur Ouvrir ⤢ dans le panneau. Le Workspace s’ouvre avec un onglet Aperçu, un bouton Recharger et une liste pour choisir quel fichier regarder.

Comment assemble-t-elle les pièces ? Une page web demande en général ses autres fichiers par leur nom, par exemple style.css et app.js. L’extension les trouve dans la même réponse et les glisse dans la page, qui s’affiche et fonctionne comme s’ils étaient enregistrés côte à côte. Si la réponse contient plus d’une page HTML, une liste déroulante te permet de choisir laquelle regarder.

Est-ce sûr d’exécuter du code écrit par une IA ?

L’aperçu tourne dans une pièce fermée, que les programmeurs appellent un bac à sable (sandbox). La page peut s’afficher et exécuter ses propres boutons, mais elle n’a aucun accès à l’extension, à ton navigateur ni à tes données. Si la page charge une bibliothèque depuis internet, cela se passe aussi uniquement dans cette pièce fermée. Pourtant, du code reste du code : traite une page que tu n’as pas lue comme n’importe quel fichier d’un inconnu. L’aperçu est créé sur ton ordinateur et rien n’est envoyé chez nous.

Pas d’extension ? La méthode à la main

Ça marche sans aucun outil. Il y a juste quelques étapes de plus, que tu refais après chaque modification.

1. Copie le bloc HTML du chat.
2. Colle-le dans le Bloc-notes (ou n’importe quel éditeur de texte simple) et enregistre-le sous index.html. Dans la fenêtre d’enregistrement, choisis « Tous les fichiers », pour qu’il ne finisse pas en index.html.txt.
3. Fais pareil pour les blocs CSS et JavaScript, avec les noms que demande le HTML (par exemple style.css et app.js), dans le même dossier.
4. Fais un double-clic sur index.html. Elle s’ouvre dans ton navigateur comme une vraie page.
5. Tu as changé quelque chose ? Enregistre le nouveau code par-dessus l’ancien fichier et appuie sur actualiser dans le navigateur.

L’obstacle habituel est une page qui a l’air nue ou dont les boutons ne font rien. Le plus souvent, un nom de fichier ne correspond pas à ce que demande le HTML. Dans l’aperçu de l’extension, si les noms diffèrent, elle prend le prochain fichier inutilisé du bon type, donc elle pardonne. À la main, tu dois corriger le nom toi-même.

Quand l’aperçu a l’air faux

• Il paraît vide ou à moitié fini. La dernière réponse ne contient peut-être qu’une partie du code, par exemple un seul fichier modifié. Demande à l’IA de « te redonner les fichiers complets ».
• Des images manquent. Un chat ne peut pas envoyer de fichiers d’image. Utilise des images avec des adresses web, ou ajoute les tiennes plus tard.
• Les boutons ne font rien. Cherche un fichier JavaScript dans la liste du panneau. Si l’IA l’a mis dans une autre réponse, demande tous les fichiers dans une seule réponse.
• Bien sur ordinateur, cassé sur mobile. Appuie sur Mobile, regarde ce qui cloche et demande à l’IA de « l’adapter aux petits écrans ».
• Les pages qui demandent une connexion ou une base de données. Tu ne verras ici que leur apparence, pas leur comportement. Elles ont besoin d’un vrai serveur.

Demande à l’IA des pages qui s’affichent bien en aperçu

• Demande tous les fichiers dans une seule réponse, avec le nom du fichier écrit au-dessus de chaque bloc.
• Pour une page simple, demande un seul fichier : « mets le CSS et le JavaScript dans le HTML ».
• Dis pour qui elle est : « elle doit bien s’afficher sur mobile ».
• Change une chose à la fois. C’est plus facile de voir ce qui a mal tourné.

Quand la page te plaît, la question suivante est de savoir comment la mettre en ligne pour les autres. Notre guide Où publier la page web créée par ton IA passe en revue les options gratuites et payantes en mots simples. AI Code Harvester fait plus que l’aperçu : il peut tout télécharger en ZIP (avec tes propres dossiers si tu veux), exporter une page seule ou emporter le chat vers une autre IA. Il lit les chats ChatGPT et Gemini et fonctionne sur ton ordinateur. Ajoute-le depuis le Chrome Web Store.

Bon à savoir avant de commencer

FAQ