Ho provato localmente e la maggior parte dei problemi riscontrati:
In modalità a schermo intero, a volte la barra di escape si sovrappone al contenuto, rendendo impossibile interagirci.
A volte, “Esegui artefatti” non appare immediatamente, ma appare una volta che si passa il mouse sopra le icone dei post, per esempio (sembra).
Ho avuto solo un caso in cui non è stato visualizzato alcun risultato. Ho potuto vedere l’indicatore, e poi non è successo nulla.
Nel complesso, funziona molto bene.
Ecco alcune delle demo.
Non è così facile creare una demo corretta. Come al solito, più un prompt è dettagliato, migliore è il risultato.
A volte è necessaria una precisione aggiuntiva. Non sempre include tutte le risorse, non è reattivo o richiede codice per attendere il caricamento della pagina. Inoltre, l’uso di librerie esterne aumenta la probabilità di fallimento.
Mi è piaciuta troppo questa funzionalità.
Prompt (simula moto parabolica)
Crea una pagina per simulare il moto parabolico. La pagina dovrebbe:
Consentire agli utenti di inserire la velocità iniziale, l’angolo e l’altezza del proiettile.
Visualizzare un’animazione in tempo reale della traiettoria del proiettile.
Includere i valori calcolati per il tempo di volo, l’altezza massima e la gittata.
Utilizzare slider per la regolazione in tempo reale dei parametri di input.
Includere un pulsante “Reset” per ricominciare.
Video
Prompt (gioco di pioggia di emoji)
Crea una pagina in cui gli utenti scelgono il loro umore e le emoji iniziano a piovere sullo schermo. La pagina dovrebbe:
Fornire opzioni di umore come “Felice”, “Scontroso” o “Pizza”.
Far cadere emoji come , o all’infinito dall’alto dello schermo.
Consentire agli utenti di fare clic sulle emoji per “raccoglierle” con un divertente effetto sonoro.
Includere un contatore sciocco come “Fette di pizza raccolte: 27”.
Utilizzare HTML, CSS e JavaScript per un divertimento animato.
Video
Prompt (semplice visualizzatore del sistema solare)
Crea una pagina per visualizzare il sistema solare. La pagina dovrebbe:
Visualizzare un sistema solare in scala ridotta, animato e dettagliato, mostrando le orbite planetarie.
Consentire agli utenti di fare clic su un pianeta per visualizzare informazioni come dimensioni, distanza dal sole e periodo orbitale.
Consentire agli utenti di ingrandire e rimpicciolire.
Includere uno slider per accelerare o rallentare il moto orbitale.
Utilizzare HTML, CSS e JavaScript per l’interattività e l’animazione.
Assicurarsi che il contenitore utilizzi il 100% di larghezza e altezza.
Video
Prompt (Playground animazioni CSS)
Crea una pagina in cui gli utenti possono sperimentare con animazioni e transizioni CSS. La pagina dovrebbe:
Visualizzare vari elementi (ad esempio, pulsanti, div) che gli utenti possono animare con CSS.
Consentire agli utenti di scegliere da un elenco di proprietà di animazione (ad esempio, transform, opacity, translate, rotate).
Fornire slider per regolare la durata, la funzione di temporizzazione e il ritardo delle animazioni.
Consentire agli utenti di visualizzare in anteprima le animazioni in tempo reale e vedere come le modifiche influiscono sull’animazione.
Utilizzare JavaScript per aggiornare dinamicamente le proprietà CSS e HTML/CSS per lo styling.
Video
Prompt (Dashboard dati interattiva)
Crea una pagina che visualizza una dashboard dati con grafici interattivi. La pagina dovrebbe:
Visualizzare più grafici, come un grafico a barre, un grafico a linee e un grafico a torta, ognuno dei quali rappresenta diversi set di dati (ad esempio, vendite, popolazione, dati meteorologici).
Consentire agli utenti di filtrare i dati per intervallo di tempo, categoria o posizione utilizzando menu a discesa o slider.
Aggiornare i grafici in tempo reale mentre gli utenti interagiscono con i filtri.
Mostrare statistiche descrittive (ad esempio, media, mediana, moda) per i dati selezionati.
Utilizzare Chart.js o D3.js per il rendering dei grafici e JavaScript per gestire il filtraggio dei dati e i calcoli statistici.
Funzionerebbe con query dell’esploratore di dati condivise globalmente (livello di fiducia 0) accessibili tramite API? Se sì, allora ha del potenziale per generare visualizzazioni divertenti e dinamiche dell’attività del forum.
Non ho avuto il tempo di testarlo da solo, ma forse qualcuno ha voglia di provarlo per questo caso d’uso
Potresti collegarlo con uno strumento personalizzato, sarebbe un bel po’ di lavoro, ma probabilmente mi limiterei a far sì che lo strumento personalizzato esegua il rendering del grafico in qualche modo per quel caso d’uso, possiamo giocare con questa idea.
Puoi però condividere visualizzazioni di sicuro, te le mostrerò.
Sì, questo è vero non solo per gli artefatti Web dell’IA ma anche nell’uso di un LLM per creare HTML, JavaScript e CSS.
Se si riesce a mantenere lo sviluppo come HTML, JavaScript e CSS semplici/vanilla, il che significa che non include librerie esterne, le possibilità di ottenere codice funzionante e privo di bug aumentano drasticamente. Inoltre, più la libreria è oscura, minore sarà la quantità di dati di addestramento forniti al modello, maggiore sarà la probabilità che il modello allucini per completare la risposta, generando così più bug.
Tuttavia, oggi è strano. Ho testato di nuovo; ogni richiesta è fallita.
Lo stato di OpenAI è verde. Non è cambiato nulla mentre dormivo, quindi non sono sicuro di cosa stia succedendo.
Anche il pulsante “Run Test” mi restituisce un errore 500 e i log mostrano un timeout.
A proposito, dal punto di vista dell’utente, mi chiedo se sarebbe gradito un messaggio di errore (invece di uno vuoto) e un modo per riprovare.
Come utente abituale del forum di OpenAI, vediamo molti degli alti e bassi dei modelli. Nelle ultime due settimane, i resoconti di problemi sono aumentati, ma questi problemi ricordano problemi simili prima di un rilascio importante o di nuovi modelli.
Domanda molto basilare… come condivido un artefatto nel mio forum? Copio e incollo qualcosa come <div> class="ai-artifact" data-ai-artifact-id="XX"></div>? In tal caso, sono l’unico che può vederlo e usarlo.
Nella mia limitata esperienza, usando Claude 3.5 Sonnet, vado avanti e indietro con il Web Creator e faccio qualche progresso, ma alla fine inizia a dimenticare e devo ricominciare in una nuova sessione. Sento che sarebbe più facile ritoccare il codice manualmente piuttosto che sprecare prompt e rischiare di dimenticare.
Posso modificare il codice generato?
Posso iniziare un nuovo contesto con un artefatto esistente? (L’ho chiesto al Web Creator e ha detto di no.)
Sì Mark, questo è difficile, sto lavorando a una rifattorizzazione degli interni dell’artefatto:
Anche le modifiche instabili mi hanno infastidito a più non posso. Sto ancora decidendo quante opzioni fornire.
Ho spostato il sistema verso un approccio simile ad Architect, lo strumento chiama un LLM per eseguire gli aggiornamenti in modo che possa farlo in modo molto più affidabile e non ci siano più problemi di deriva. Lo svantaggio, tuttavia, è che il nuovo sistema può utilizzare più token poiché vi è un livello di duplicazione inevitabile.
Potrei permetterti di iniziare con un artefatto esistente (farlo clonare) se l’artefatto è stato condiviso pubblicamente… ci penserò su come possiamo gestire questa cosa, devo essere estremamente attento alla sicurezza.
Normalmente, quando interagisco con Web Creator, dice qualcosa come “Aggiornerò l’artefatto con la nuova funzionalità”, quindi scrive blocchi di html, css e javascript, quindi mostra l’artefatto aggiornato in modo che io possa Eseguire Artefatto.
Oggi dice costantemente “Aggiornerò l’artefatto” e scrive i blocchi di codice, ma poi elimina il codice e l’artefatto (se mai l’ha creato). Quindi rimango solo con “Aggiornerò l’artefatto”. Anche se modifico il post del creator, c’è solo quello.
Non ho aggiornato o cambiato nulla. Nessun errore nella console. Claude 3.5 Sonnet.
Hai aggiornato all’ultima versione? Ho appena terminato un importante refactoring del sistema, molti nuovi controlli e uno strumento di lettura degli artefatti.
o 
all’infinito dall’alto dello schermo.
