Annonce : Artefacts Web AI

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. :+1:

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é. :smile:

Prompt (simuler le mouvement d'un projectile)

Créez une page pour simuler le mouvement d’un projectile. La page doit :

  1. Permettre aux utilisateurs de saisir la vitesse initiale, l’angle et la hauteur du projectile.
  2. Afficher une animation en direct de la trajectoire du projectile.
  3. Inclure les valeurs calculées pour le temps de vol, la hauteur maximale et la portée.
  4. Utiliser des curseurs pour le réglage en temps réel des paramètres d’entrée.
  5. 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 :

  1. Proposer des options d’humeur comme « Heureux », « Grognon » ou « Pizza ».
  2. Faire tomber des emojis comme :smile:, :angry:, ou :pizza: sans fin du haut de l’écran.
  3. Permettre aux utilisateurs de cliquer sur les emojis pour les « collecter » avec un effet sonore amusant.
  4. Inclure un compteur fantaisiste comme « Tranches de pizza collectées : 27 ».
  5. 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 :

  1. Afficher un système solaire animé et détaillé à l’échelle, montrant les orbites planétaires.
  2. 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.
  3. Permettre aux utilisateurs de zoomer et dézoomer.
  4. Inclure un curseur pour accélérer ou ralentir le mouvement orbital.
  5. Utiliser HTML, CSS et JavaScript pour l’interactivité et l’animation.
  6. 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 :

  1. Afficher divers éléments (par exemple, des boutons, des divs) que les utilisateurs peuvent animer avec CSS.
  2. Permettre aux utilisateurs de choisir parmi une liste de propriétés d’animation (par exemple, transform, opacity, translate, rotate).
  3. Fournir des curseurs pour ajuster la durée, la fonction de temporisation et le délai des animations.
  4. Permettre aux utilisateurs de prévisualiser les animations en temps réel et de voir comment les changements affectent l’animation.
  5. 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 :

  1. 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).
  2. 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.
  3. Mettre à jour les graphiques en temps réel lorsque les utilisateurs interagissent avec les filtres.
  4. Afficher des statistiques descriptives (par exemple, moyenne, médiane, mode) pour les données sélectionnées.
  5. 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.
Vidéo

3 « J'aime »