Les Artefacts Web vous permettent de créer et de partager en toute transparence des composants interactifs et dynamiques (HTML/CSS/JavaScript) directement dans vos publications. Des visualisations et des quiz aux applications web légères.
L'artefact ci-dessus a été généré à l'aide de GPT-4o et de la bibliothèque anime.js Démo CSS Grid par Claude 3.5 SonnetEn savoir plus sur : Discourse AI - Web Artifacts
Pour l’utiliser : gardez une question à l’esprit, et appuyez sur l’icône de l’objet magique. 
Ok, je vais faire une pause pour l’instant… tellement d’idées !
Aucun de ces exemples ne s’affiche sur iPad 
Et si j’ouvre en plein écran sur le Hub, je ne peux pas en sortir sans quitter un forum.
Nous avons une nouvelle version de hub que @pmusaraj publie, vous êtes-vous mis à jour vers la dernière version ?
Oui ! Échapper du mode plein écran est difficile sur les tablettes, et utiliser le bouton retour ne me ramène pas au sujet mais un pas en arrière.
Je pense que nous pouvons pousser l’état lorsque vous cliquez sur le bouton pour corriger le plein écran
Peut-être que cette superposition n’a aucun sens sur le tactile, elle gêne de toute façon les contrôles en haut.
C’est un excellent ajout !
Je voudrais juste ajouter quelques points pour ceux qui pourraient hésiter à l’utiliser. Ces dernières semaines, j’ai principalement utilisé ChatGPT avec le modèle 4o pour créer des pages HTML simples/vanilla en utilisant JavaScript et CSS. Ce qui est incroyable, c’est que le code généré n’a presque jamais de bug, mais l’ingénierie des prompts est nécessaire pour obtenir les résultats souhaités. Parfois, ce que vous pensez et ce que le modèle pense que vous voulez peuvent ne pas être la même chose, donc une petite modification du prompt est nécessaire.
Si vous avez accès à un canvas en mode codage ou similaire, ceux-ci sont parfaits pour commencer. De plus, si vous n’êtes pas programmeur et que vous ne le faites pas normalement, l’un des outils de référence pour corriger les bugs est de connaître la touche F12 (ref) avec les navigateurs Internet.
Je pourrais écrire un livre sur ce sujet, mais je m’arrêterai là ; vous êtes dans un bac à sable, alors jouez !
Si le système l’a mis à jour, alors oui. 2.0.7 il y a deux semaines.
Ouais, c’était bien un problème de Hub. Safari affiche joliment.
Est-il possible d’avoir un exemple de prompting pour nous, les non-codeurs ?
Modifier
La première tentative a fonctionné. Ce genre de travail de développement est génial. Il suffit de dire ce qui est nécessaire. Mais quelques questions :
Invite simplifiée à utiliser comme artefact Web IA (je n’ai pas accès aux artefacts Web IA pour tester, mais cela devrait fonctionner ou s’en approcher)
Créez un jeu de machine à sous, utilisez JavaScript et CSS.
Invite réelle utilisée avec ChatGPT 4o
Créez une page HTML simple pour un jeu de machine à sous, utilisez JavaScript et CSS. Créez-la en tant que page HTML unique à télécharger.
Voici une invite plus avancée qui a été ajustée plusieurs fois avant d’obtenir le résultat souhaité. Elle devra être modifiée pour être utilisée avec un artefact Web IA.
Créez une page HTML simple pour un jeu de Blackjack, utilisez JavaScript et CSS.
- Créez-la en tant que page HTML unique à télécharger.
- Affichez les cartes du croupier après qu’il se soit arrêté.
- Ajoutez une option pour des joueurs bot supplémentaires, affichez les cartes des joueurs bot.
- Ajoutez une option pour parier et suivre le montant.
- Affichez le total des cartes du joueur.
- Affichez les cartes du croupier avant d’afficher la fenêtre contextuelle indiquant qui a gagné.
Si vous voulez quelque chose d’un peu plus difficile, créez un jeu de dames avec un adversaire bot.
Cette version n’incluait pas la correction de l’artefact. Une nouvelle version, 2.0.8, vient d’être soumise à l’examen, elle devrait être disponible sous peu.
Honnêtement, j’ai un peu de mal à imaginer des insertions qui améliorent réellement un article de manière transparente. Existe-t-il déjà des exemples d’applications pratiques qui seraient incluses de manière transparente ?
Sur mon forum, il y a beaucoup de sujets sur la nutrition des chiens. Je pourrais maintenant proposer un planificateur simple, par exemple, ce dont le chien d’un utilisateur aurait besoin par jour.
J’aimerais utiliser une IA, mais celles-ci échouent à chaque fois et sont trop chères. Bien sûr, un plugin ou peut-être un composant pourrait faire la même chose et mieux, mais je ne sais pas comment.
Si je pouvais envoyer la réponse d’un artefact à une persona d’IA avec un prompt pré-fait, ce serait bien, mais je ne sais pas si c’est possible du tout.
Essayons ! 
J’ai compris. En quelque sorte. En gros, c’est “juste” une autre conversation avec une IA où l’on explique ce qui est nécessaire, à quoi cela doit ressembler, et d’autres directives et règles strictes.
C’est en gros Visual Basic, mais plus facile 
Visual Basic pour les nuls. 
Ces images proviennent de Wikimedia ; j’ai hâte d’utiliser les données publiques de manière interactive, pour le partage d’art et d’informations. 
Oh, wow, j’ai manqué cette annonce. C’est incroyable ! 
Félicitations à l’équipe. 
Je vois déjà que cela entraînera de nombreuses conséquences positives, comme l’augmentation de l’engagement des utilisateurs, la simplification de l’explication/l’apprentissage des choses et la fourniture d’un retour interactif. De plus, c’est amusant 
.
