Ankündigung: KI-Webartefakte

Ich habe es lokal ausprobiert, und die meisten Probleme, auf die ich gestoßen bin:

  • Im Vollbildmodus überlappt die Escape-Leiste manchmal den Inhalt, was eine Interaktion unmöglich macht.
  • Manchmal erscheint “Run Artifacts” nicht sofort, aber es erscheint, sobald man mit den Post-Icons usw. darüber fährt (scheint es).
  • Ich hatte nur einen Fall, in dem keine Ergebnisse angezeigt wurden. Ich konnte den Indikator sehen und dann passierte nichts.

Insgesamt funktioniert es sehr gut. :+1:

Hier sind einige der Demos.
Es ist nicht so einfach, eine Demo richtig hinzubekommen. Wie üblich gilt: Je detaillierter ein Prompt, desto besser.
Manchmal ist zusätzliche Präzision erforderlich. Es enthält nicht immer alle Ressourcen, ist nicht reaktionsschnell oder erfordert Code, um auf das Laden der Seite zu warten. Auch die Verwendung externer Bibliotheken erhöht die Fehlerwahrscheinlichkeit.

Ich habe dieses Feature viel zu sehr genossen. :smile:

Prompt (Simulation von Projektilbewegung)

Erstellen Sie eine Seite zur Simulation der Projektilbewegung. Die Seite sollte:

  1. Benutzern die Eingabe von Anfangsgeschwindigkeit, Winkel und Höhe des Projektils ermöglichen.
  2. Eine Live-Animation der Flugbahn des Projektils anzeigen.
  3. Berechnete Werte für Flugzeit, maximale Höhe und Reichweite enthalten.
  4. Schieberegler für die Echtzeit-Anpassung der Eingabeparameter verwenden.
  5. Eine Schaltfläche “Zurücksetzen” zum erneuten Starten enthalten.
Video


Prompt (Emoji-Regenspiel)

Erstellen Sie eine Seite, auf der Benutzer ihre Stimmung auswählen können und Emojis beginnen, vom Bildschirm nach unten zu regnen. Die Seite sollte:

  1. Stimmungsoptionen wie “Glücklich”, “Mürrisch” oder “Pizza” anbieten.
  2. Emojis wie :smile:, :angry: oder :pizza: endlos von oben auf den Bildschirm fallen lassen.
  3. Benutzern ermöglichen, Emojis anzuklicken, um sie mit einem lustigen Soundeffekt zu “sammeln”.
  4. Einen albernen Zähler wie “Gesammelte Pizzastücke: 27” enthalten.
  5. HTML, CSS und JavaScript für animierten Spaß verwenden.
Video


Prompt (Einfacher Sonnensystem-Visualisierer)

Erstellen Sie eine Seite zur Visualisierung des Sonnensystems. Die Seite sollte:

  1. Ein skaliertes, animiertes, detailliertes Sonnensystem mit Planetenbahnen anzeigen.
  2. Benutzern ermöglichen, auf einen Planeten zu klicken, um Informationen wie Größe, Entfernung von der Sonne und Umlaufzeit anzuzeigen.
  3. Benutzern ermöglichen, hinein- und herauszuzoomen.
  4. Einen Schieberegler enthalten, um die Bahnbewegung zu beschleunigen oder zu verlangsamen.
  5. HTML, CSS und JavaScript für Interaktivität und Animation verwenden.
  6. Sicherstellen, dass der Container 100 % Breite und Höhe verwendet.
Video


Prompt (CSS-Animations-Spielplatz)

Erstellen Sie eine Seite, auf der Benutzer mit CSS-Animationen und -Übergängen experimentieren können. Die Seite sollte:

  1. Verschiedene Elemente (z. B. Schaltflächen, Divs) anzeigen, die Benutzer mit CSS animieren können.
  2. Benutzern ermöglichen, aus einer Liste von Animationseigenschaften (z. B. transform, opacity, translate, rotate) zu wählen.
  3. Schieberegler bereitstellen, um die Dauer, die Timing-Funktion und die Verzögerung von Animationen anzupassen.
  4. Benutzern ermöglichen, Animationen in Echtzeit in der Vorschau anzuzeigen und zu sehen, wie sich Änderungen auf die Animation auswirken.
  5. JavaScript verwenden, um CSS-Eigenschaften dynamisch zu aktualisieren, und HTML/CSS für das Styling.
Video


Prompt (Interaktives Daten-Dashboard)

Erstellen Sie eine Seite, die ein Daten-Dashboard mit interaktiven Diagrammen visualisiert. Die Seite sollte:

  1. Mehrere Diagramme anzeigen, wie z. B. ein Balkendiagramm, ein Liniendiagramm und ein Kreisdiagramm, die jeweils unterschiedliche Datensätze darstellen (z. B. Verkaufs-, Bevölkerungs-, Wetterdaten).
  2. Benutzern ermöglichen, die Daten mithilfe von Dropdown-Menüs oder Schiebereglern nach Zeitraum, Kategorie oder Ort zu filtern.
  3. Die Diagramme in Echtzeit aktualisieren, während Benutzer mit den Filtern interagieren.
  4. Beschreibende Statistiken (z. B. Mittelwert, Median, Modus) für die ausgewählten Daten anzeigen.
  5. Chart.js oder D3.js zum Rendern von Diagrammen und JavaScript zur Handhabung von Datenfilterung und statistischen Berechnungen verwenden.
Video

3 „Gefällt mir“