J’ai essayé localement, et la plupart des problèmes rencontrés :
En plein écran, la barre d’échappement chevauche parfois le contenu, rendant impossible l’interaction avec celui-ci.
Parfois, « Exécuter les artefacts » n’apparaît pas immédiatement, mais il apparaît une fois que vous survolez les icônes de publication, par exemple (semble-t-il).
J’ai eu une seule occurrence où aucun résultat n’a été affiché. J’ai pu voir l’indicateur, puis rien ne s’est passé.
Dans l’ensemble, cela fonctionne très bien.
Voici quelques démos.
Il n’est pas si facile de réussir une démo. Comme d’habitude, plus un prompt est détaillé, mieux c’est.
Parfois, une précision supplémentaire est nécessaire. Il n’inclut pas toujours toutes les ressources, n’est pas réactif ou nécessite du code pour attendre le chargement de la page. De plus, l’utilisation de bibliothèques externes augmente le risque d’échec.
J’ai beaucoup trop apprécié cette fonctionnalité.
Prompt (simuler le mouvement d'un projectile)
Créez une page pour simuler le mouvement d’un projectile. La page doit :
Permettre aux utilisateurs de saisir la vitesse initiale, l’angle et la hauteur du projectile.
Afficher une animation en direct de la trajectoire du projectile.
Inclure les valeurs calculées pour le temps de vol, la hauteur maximale et la portée.
Utiliser des curseurs pour le réglage en temps réel des paramètres d’entrée.
Inclure un bouton « Réinitialiser » pour recommencer.
Vidéo
Prompt (jeu de pluie d'emojis)
Créez une page où les utilisateurs choisissent leur humeur et des emojis commencent à pleuvoir sur l’écran. La page doit :
Proposer des options d’humeur comme « Heureux », « Grognon » ou « Pizza ».
Faire tomber des emojis comme , , ou sans fin du haut de l’écran.
Permettre aux utilisateurs de cliquer sur les emojis pour les « collecter » avec un effet sonore amusant.
Inclure un compteur fantaisiste comme « Tranches de pizza collectées : 27 ».
Utiliser HTML, CSS et JavaScript pour des animations amusantes.
Vidéo
Prompt (visualiseur simple du système solaire)
Créez une page pour visualiser le système solaire. La page doit :
Afficher un système solaire animé et détaillé à l’échelle, montrant les orbites planétaires.
Permettre aux utilisateurs de cliquer sur une planète pour afficher des informations telles que sa taille, sa distance par rapport au soleil et sa période orbitale.
Permettre aux utilisateurs de zoomer et dézoomer.
Inclure un curseur pour accélérer ou ralentir le mouvement orbital.
Utiliser HTML, CSS et JavaScript pour l’interactivité et l’animation.
S’assurer que le conteneur utilise 100 % de la largeur et de la hauteur.
Vidéo
Prompt (aire de jeux d'animations CSS)
Créez une page où les utilisateurs peuvent expérimenter avec des animations et des transitions CSS. La page doit :
Afficher divers éléments (par exemple, des boutons, des divs) que les utilisateurs peuvent animer avec CSS.
Permettre aux utilisateurs de choisir parmi une liste de propriétés d’animation (par exemple, transform, opacity, translate, rotate).
Fournir des curseurs pour ajuster la durée, la fonction de temporisation et le délai des animations.
Permettre aux utilisateurs de prévisualiser les animations en temps réel et de voir comment les changements affectent l’animation.
Utiliser JavaScript pour mettre à jour dynamiquement les propriétés CSS et HTML/CSS pour le style.
Vidéo
Prompt (Tableau de bord de données interactif)
Créez une page qui visualise un tableau de bord de données avec des graphiques interactifs. La page doit :
Afficher plusieurs graphiques, tels qu’un diagramme à barres, un graphique linéaire et un diagramme circulaire, chacun représentant différents ensembles de données (par exemple, ventes, population, données météorologiques).
Permettre aux utilisateurs de filtrer les données par plage de temps, catégorie ou emplacement à l’aide de menus déroulants ou de curseurs.
Mettre à jour les graphiques en temps réel lorsque les utilisateurs interagissent avec les filtres.
Afficher des statistiques descriptives (par exemple, moyenne, médiane, mode) pour les données sélectionnées.
Utiliser Chart.js ou D3.js pour le rendu des graphiques et JavaScript pour gérer le filtrage des données et les calculs statistiques.
Est-ce que cela fonctionnerait avec des requêtes d’explorateur de données partagées globalement (niveau de confiance 0) accessibles via l’API ? Si oui, cela pourrait potentiellement générer des visuels amusants et dynamiques de l’activité du forum.
Je n’ai pas eu le temps de le tester moi-même, mais peut-être que quelqu’un aura envie d’essayer pour ce cas d’utilisation
Vous pourriez le câbler avec un outil personnalisé, ce serait un peu de jonglerie, je ferais probablement juste en sorte que l’outil personnalisé rende le graphique d’une manière ou d’une autre pour ce cas d’utilisation, nous pouvons jouer avec cette idée
Vous pouvez cependant partager des visualisations, je vais vous montrer
Oui, c’est vrai non seulement pour les artefacts Web d’IA, mais aussi pour l’utilisation d’un LLM afin de créer du HTML, du JavaScript et du CSS.
Si l’on peut garder le développement en HTML, JavaScript et CSS purs/vanilla, c’est-à-dire sans aucune bibliothèque externe, les chances d’obtenir un code fonctionnel et sans bug augmentent considérablement. De plus, plus la bibliothèque est obscure, moins le modèle a reçu de données d’entraînement, plus il est probable que le modèle hallucine pour compléter la réponse, donc plus il y aura de bugs.
Cependant, c’est étrange aujourd’hui. J’ai testé à nouveau ; chaque requête a échoué.
Le statut OpenAI est vert. Rien n’a changé pendant que je dormais, donc je ne suis pas sûr de ce qui se passe.
Le bouton « Exécuter le test » me donne également une erreur 500, et les journaux indiquent un délai d’attente.
Par ailleurs, du point de vue de l’utilisateur, je me demande si un message d’erreur (plutôt qu’un message vide) et une option de nouvelle tentative seraient les bienvenus.
En tant qu’habitué du forum OpenAI, nous voyons beaucoup des hauts et des bas des modèles. Au cours des deux dernières semaines, les rapports de problèmes ont augmenté, mais ces problèmes rappellent ceux d’avant une version majeure ou de nouveaux modèles.
Question très basique… comment partager un artefact sur mon forum ? Je copie-colle simplement quelque chose comme <div></div> ? Dans ce cas, je suis le seul à pouvoir le voir et l’utiliser.
Dans mon expérience limitée, en utilisant Claude 3.5 Sonnet, j’itère avec le Créateur Web et je fais des progrès, mais il finit par oublier et je dois recommencer dans une nouvelle session. J’ai l’impression qu’il serait plus facile de retoucher le code manuellement que de perdre des invites et de risquer d’oublier.
Puis-je modifier le code généré ?
Puis-je démarrer un nouveau contexte avec un artefact existant ? (J’ai demandé au Créateur Web et il a dit non.)
Oui Mark, c’est difficile, je travaille sur une refonte des internes des artefacts :
Les modifications instables m’ont aussi agacé au plus haut point. Je décide encore combien de paramètres fournir.
J’ai déplacé le système vers une approche similaire à celle d’Architect, l’outil appelle un LLM pour effectuer les mises à jour afin qu’il puisse le faire de manière beaucoup plus fiable et qu’il n’y ait plus de problème de dérive. Le revers de la médaille, cependant, est que le nouveau système peut utiliser plus de jetons car il y a un niveau de duplication inévitable.
Je pourrais vous permettre de commencer avec un artefact existant (le cloner) si l’artefact a été partagé publiquement… je vais réfléchir à la façon dont nous pouvons gérer cela, il faut être extra prudent en matière de sécurité.
J’ai opté pour ce flux de travail afin de capturer l’artefact et d’apporter des modifications incrémentielles ou manuelles pour le moment :
Itérer avec le Web Creator jusqu’à ce que l’artefact soit dans un bon état
Demander au Web Creator d’écrire le code - html, css et js - sans aucun commentaire
Copier/coller le code hors ligne
Modifier éventuellement le code
Ensuite, si le créateur commence à oublier ou se retrouve dans un mauvais état, je peux démarrer une nouvelle conversation avec :
Salut, j’ai ce code d’artefact. C’est du code fonctionnel, alors utilise-le mot pour mot. Ensuite, apporte les modifications suivantes… [coller le code]
Normalement, lorsque j’itère avec le Web Creator, il affiche quelque chose comme « Je vais mettre à jour l’artefact avec la nouvelle fonctionnalité », puis écrit des blocs de HTML, CSS et JavaScript, puis affiche l’artefact mis à jour afin que je puisse exécuter l’artefact.
Aujourd’hui, il affiche systématiquement « Je vais mettre à jour l’artefact » et écrit les blocs de code, mais supprime ensuite le code et l’artefact (s’il l’a même créé). Je me retrouve donc avec seulement « Je vais mettre à jour l’artefact ». Même si je modifie la publication du créateur, il n’y a que cela.
Je n’ai rien mis à jour ni changé. Aucune erreur dans la console. Claude 3.5 Sonnet.
Avez-vous mis à jour vers la dernière version ? Je viens de terminer une refonte majeure du système, avec de nombreux nouveaux réglages et un outil d’artefact de lecture.
, ou 
sans fin du haut de l’écran.
