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.
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.
Prompt (Simulation von Projektilbewegung)
Erstellen Sie eine Seite zur Simulation der Projektilbewegung. Die Seite sollte:
Benutzern die Eingabe von Anfangsgeschwindigkeit, Winkel und Höhe des Projektils ermöglichen.
Eine Live-Animation der Flugbahn des Projektils anzeigen.
Berechnete Werte für Flugzeit, maximale Höhe und Reichweite enthalten.
Schieberegler für die Echtzeit-Anpassung der Eingabeparameter verwenden.
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:
Stimmungsoptionen wie “Glücklich”, “Mürrisch” oder “Pizza” anbieten.
Emojis wie , oder endlos von oben auf den Bildschirm fallen lassen.
Benutzern ermöglichen, Emojis anzuklicken, um sie mit einem lustigen Soundeffekt zu “sammeln”.
Einen albernen Zähler wie “Gesammelte Pizzastücke: 27” enthalten.
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:
Ein skaliertes, animiertes, detailliertes Sonnensystem mit Planetenbahnen anzeigen.
Benutzern ermöglichen, auf einen Planeten zu klicken, um Informationen wie Größe, Entfernung von der Sonne und Umlaufzeit anzuzeigen.
Benutzern ermöglichen, hinein- und herauszuzoomen.
Einen Schieberegler enthalten, um die Bahnbewegung zu beschleunigen oder zu verlangsamen.
HTML, CSS und JavaScript für Interaktivität und Animation verwenden.
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:
Verschiedene Elemente (z. B. Schaltflächen, Divs) anzeigen, die Benutzer mit CSS animieren können.
Benutzern ermöglichen, aus einer Liste von Animationseigenschaften (z. B. transform, opacity, translate, rotate) zu wählen.
Schieberegler bereitstellen, um die Dauer, die Timing-Funktion und die Verzögerung von Animationen anzupassen.
Benutzern ermöglichen, Animationen in Echtzeit in der Vorschau anzuzeigen und zu sehen, wie sich Änderungen auf die Animation auswirken.
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:
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).
Benutzern ermöglichen, die Daten mithilfe von Dropdown-Menüs oder Schiebereglern nach Zeitraum, Kategorie oder Ort zu filtern.
Die Diagramme in Echtzeit aktualisieren, während Benutzer mit den Filtern interagieren.
Beschreibende Statistiken (z. B. Mittelwert, Median, Modus) für die ausgewählten Daten anzeigen.
Chart.js oder D3.js zum Rendern von Diagrammen und JavaScript zur Handhabung von Datenfilterung und statistischen Berechnungen verwenden.
Ich habe das auch ein- oder zweimal reproduziert und versuche, der Sache auf den Grund zu gehen. @david Ich vermute, dass dies mit Ember-Dekoratoren zusammenhängt.
Interessant … lassen Sie mich wissen, ob Sie dies konsistent reproduzieren können.
Würde es mit global geteilten (Vertrauensstufe 0) Data Explorer-Abfragen funktionieren, auf die über die API zugegriffen wird? Wenn ja, dann hat es ein gewisses Potenzial, einige unterhaltsame, dynamische Visualisierungen der Forenaktivität zu generieren.
Ich hatte keine Zeit, es selbst zu testen, aber vielleicht hat jemand Lust, es für diesen Anwendungsfall auszuprobieren
Sie könnten es mit einem benutzerdefinierten Tool verdrahten, es wäre ein ziemliches Jonglieren. Ich würde das benutzerdefinierte Tool für diesen Anwendungsfall wahrscheinlich einfach irgendwie das Diagramm rendern lassen, wir können mit dieser Idee herumspielen.
Sie können Visualisierungen auf jeden Fall teilen, ich zeige es Ihnen.
Ja, das gilt nicht nur für KI-Web-Artefakte, sondern auch für die Verwendung eines LLM zur Erstellung von HTML, JavaScript und CSS.
Wenn man die Entwicklung so einfach/rein wie möglich in HTML, JavaScript und CSS halten kann, d. h. keine externen Bibliotheken einbezieht, steigt die Wahrscheinlichkeit, funktionierenden und fehlerfreien Code zu erhalten, dramatisch an. Je obskurer die Bibliothek, desto weniger Trainingsdaten erhielt das Modell, desto wahrscheinlicher ist es, dass das Modell halluziniert, um die Antwort zu vervollständigen, und somit mehr Fehler entstehen.
Es ist jedoch heute seltsam. Ich habe es erneut getestet; jede Anfrage schlug fehl.
Der OpenAI-Status ist grün. Nichts hat sich geändert, während ich geschlafen habe, daher bin ich mir nicht sicher, was passiert.
Auch der „Test ausführen“-Button gibt mir einen 500er-Fehler, und die Logs zeigen ein Timeout.
Nebenbei bemerkt, aus Benutzersicht frage ich mich, ob eine Fehlermeldung (im Gegensatz zu einer leeren) und eine Möglichkeit zum erneuten Versuch willkommen wären.
Als regelmäßiger Nutzer des OpenAI-Forums erleben wir die Höhen und Tiefen der Modelle. In den letzten zwei Wochen hat die Zahl der gemeldeten Probleme zugenommen, aber diese Probleme erinnern an solche, die vor einer größeren Veröffentlichung oder neuen Modellen auftreten.
Sehr einfache Frage… wie teile ich ein Artefakt in meinem Forum? Kopiere und füge einfach etwas wie <div> class="ai-artifact" data-ai-artifact-id="XX"></div> ein? In diesem Fall kann nur ich es sehen und benutzen.
Nach meiner begrenzten Erfahrung mit Claude 3.5 Sonnet iteriere ich mit dem Web Creator hin und her und mache einige Fortschritte, aber schließlich beginnt er zu vergessen und ich muss in einer neuen Sitzung neu beginnen. Ich habe das Gefühl, dass es einfacher wäre, den Code manuell zu bearbeiten, als Prompts zu verschwenden und das Risiko einzugehen, zu vergessen.
Kann ich den generierten Code bearbeiten?
Kann ich einen neuen Kontext mit einem vorhandenen Artefakt starten? (Ich habe den Web Creator gefragt und er sagte nein.)
Ja Mark, das ist eine schwierige Sache. Ich arbeite an einer Überarbeitung der internen Artefakte:
Instabile Bearbeitungen haben mich auch bis zum Ende genervt. Ich überlege noch, wie viele Regler ich anbieten soll.
Ich habe das System auf einen Architekten-ähnlichen Ansatz umgestellt. Das Tool ruft ein LLM auf, um die Aktualisierungen durchzuführen, sodass es dies weitaus zuverlässiger tun kann und es kein Driftproblem mehr gibt. Der Nachteil ist jedoch, dass das neue System mehr Tokens verbrauchen kann, da es eine gewisse unvermeidliche Duplizierung gibt.
Ich werde es Ihnen vielleicht erlauben, mit einem vorhandenen Artefakt zu beginnen (es klonen zu lassen), wenn das Artefakt öffentlich geteilt wurde… Ich werde darüber nachdenken, wie wir das umsetzen können, muss aber besonders auf die Sicherheit achten.
Ich habe diesen Workflow gewählt, um das Artefakt zu erfassen und vorerst inkrementelle oder manuelle Änderungen vorzunehmen:
Iterieren Sie mit dem Web Creator, bis sich das Artefakt in einem guten Zustand befindet
Fordern Sie den Web Creator auf, den Code – HTML, CSS und JS – ohne Kommentare auszugeben
Kopieren/fügen Sie den Code offline ein
Bearbeiten Sie den Code optional
Wenn der Creator dann vergisst oder anderweitig in einen schlechten Zustand gerät, kann ich einen neuen Chat mit Folgendem beginnen:
Hallo, ich habe diesen Artefaktcode. Es ist funktionierender Code, also verwenden Sie ihn wörtlich. Nehmen Sie dann die folgenden Änderungen vor… [Fügen Sie den Code ein]
Normalerweise, wenn ich mit dem Web Creator interagiere, sagt er etwas wie „Ich werde das Artefakt mit der neuen Funktion aktualisieren“, schreibt dann Blöcke von HTML, CSS und JavaScript und zeigt dann das aktualisierte Artefakt an, damit ich Artefakt ausführen kann.
Heute sagt er durchweg „Ich werde das Artefakt aktualisieren“ und schreibt die Codeblöcke, aber dann löscht er den Code und das Artefakt (falls es überhaupt erstellt wurde). So bleibe ich nur mit „Ich werde das Artefakt aktualisieren“ zurück. Selbst wenn ich den Beitrag des Erstellers bearbeite, ist das alles, was da ist.
Ich habe nichts aktualisiert oder geändert. Keine Fehler in der Konsole. Claude 3.5 Sonnet.
Hast du auf das Neueste aktualisiert? Ich habe gerade eine große Umstrukturierung des Systems abgeschlossen, viele neue Bedienelemente und ein Tool zur Artefaktprüfung
oder 
endlos von oben auf den Bildschirm fallen lassen.
