Canvas di OpenAI: innovazione grazie all’esecuzione diretta di HTML

L’interfaccia Canvas di OpenAI, lanciata a ottobre 2023, migliora l’interazione con l’AI, consentendo la creazione di contenuti condivisi e applicazioni didattiche interattive.
Canvas Di Openai: Il Salto Evolutivo Con L'Esecuzione Html Diretta Canvas Di Openai: Il Salto Evolutivo Con L'Esecuzione Html Diretta

L’interfaccia Canvas, presentata da OpenAI nel mese di ottobre 2023, ha rapidamente guadagnato attenzione come un nuovo strumento per facilitare l’interazione tra intelligenza artificiale e utenti, permettendo la creazione di contenuti condivisi, siano essi testi o codici. A partire da gennaio 2024, questa funzionalità è stata integrata in tutte le versioni del software di OpenAI. Anche l’assistente AI europeo Le Chat, sviluppato da Mistral, ha recentemente adottato un approccio simile, ampliando le possibilità di interazione.

La modalità di interazione proposta da OpenAI mantiene la sua essenza originale, ma ha visto l’introduzione di nuove capacità, come la possibilità di eseguire codice HTML direttamente, un’innovazione già presente nell’interfaccia di Claude, un altro strumento AI. Questa novità potrebbe rivelarsi cruciale per lo sviluppo di prototipi e per l’insegnamento della programmazione, poiché consente di visualizzare e testare il codice in tempo reale. Approfondiamo come l’anteprima nel Canvas possa trasformare l’interazione con l’AI.

Un visualizzatore di frattali

Un appassionato del frattale di Mandelbrot, ho iniziato a sviluppare visualizzatori di questo insieme matematico durante gli anni scolastici. Questa esperienza è stata anche parte integrante del mio insegnamento nel corso di programmazione di interfacce grafiche. Pertanto, ho deciso di mettere alla prova l’AI utilizzando questo progetto come base. Ho formulato un prompt per generare il codice di un visualizzatore di frattali, richiedendo specifiche funzionalità come il drag and drop per lo zoom e il mantenimento delle proporzioni.

Il prompt utilizzato è stato: “Componi un riquadro di codice che implementi in HTML5 un visualizzatore di frattali Mandelbrot. Quando si effettua il drag, il sistema mostra l’area selezionata su cui sarà fatto lo zoom mantenendo le proporzioni della visualizzazione. Man mano che si fa zoom, vengono incrementate le iterazioni per punto, partendo dalle 150 iniziali fino a 2000.” Questo prompt, seppur semplice, fornisce indicazioni chiare sul comportamento atteso del visualizzatore.

Dopo aver avviato il riquadro, il codice del frattale viene generato e, al primo accesso, viene offerta la possibilità di visualizzare un’anteprima. La qualità della visualizzazione è notevole, con il sistema che calcola correttamente le proporzioni. Tuttavia, è stata riscontrata una problematica nella selezione, che lasciava una scia visiva poco gradevole. Ho quindi richiesto di correggere questo bug per migliorare l’esperienza utente.

Il confronto con Claude

Utilizzando Claude con lo stesso prompt, ho ottenuto un visualizzatore funzionante, sebbene meno preciso nelle proporzioni. In questo caso, l’artefatto è eseguibile, ma non è possibile modificare il codice direttamente; è necessario richiedere modifiche tramite prompt. Al contrario, l’interfaccia Canvas di OpenAI offre una flessibilità maggiore, consentendo modifiche al codice senza dover rigenerare l’intero progetto.

Il confronto con Le Chat di Mistral

Ripetendo la procedura con Le Chat di Mistral, ho attivato il Canvas e l’interprete di codice, ottenendo un’interazione simile a quella di ChatGPT. Tuttavia, il codice generato risultava incompleto, con una visualizzazione che non rappresentava correttamente il frattale. La navigazione nel frattale funzionava in modo simile sia nella versione di GPT che in quella di Claude, ma la qualità del risultato finale variava notevolmente.

Uso nel contesto della didattica

Il dibattito sull’uso dell’AI generativa nell’insegnamento è attuale e rilevante. Spesso ci si concentra sulla generazione di testi o domande, ma la possibilità di creare applicazioni interattive con un semplice prompt apre nuovi orizzonti. Ad esempio, richiedendo un codice HTML5 per un simulatore di proiettile per insegnare il moto parabolico, gli studenti possono osservare come le variazioni delle condizioni iniziali influenzano le traiettorie paraboliche. Questo approccio rende le lezioni di fisica più interattive e coinvolgenti.

Anche Claude ha prodotto risultati simili, con un’interfaccia ben curata. Mistral, pur presentando un’applicazione meno raffinata, consente comunque di modificare il codice, offrendo opportunità di sperimentazione in classe.

La funzione “Anteprima” del Canvas di OpenAI rappresenta un passo avanti significativo, colmando un vuoto che era già stato colmato da Claude. Negli ultimi due anni, il codice generato dai modelli AI ha dimostrato un alto grado di accuratezza, rendendo sempre più comune la possibilità di generare interfacce grafiche funzionanti con un semplice prompt. Le applicazioni pratiche di questa tecnologia nel futuro sono promettenti, e si attende di vedere come queste capacità verranno utilizzate in modo sicuro e innovativo.

Change privacy settings
×