intelligenza artificiale

Canvas di OpenAI: il salto evolutivo con l’esecuzione HTML diretta



Indirizzo copiato

L’interfaccia Canvas di OpenAI introduce novità importanti come l’esecuzione del codice in anteprima. Questa funzione apre nuovi orizzonti educativi, consentendo la creazione di applicazioni interattive per una didattica immersiva

Pubblicato il 11 feb 2025

Antonio Cisternino

Università di Pisa



openai canvas (2) (1)

L’interfaccia Canvas annunciata lo scorso ottobre è subito divenuta un riferimento su una nuova modalità di interazione tra AI e uomini che lavorano insieme a un manufatto condiviso, sia esso testo o codice.

Sono passati pochi mesi da allora e da gennaio è disponibile in tutte le varie versioni del software di OpenAI e non solo, Le Chat, l’assistente AI europeo di Mistral ha recentemente introdotto la stessa interazione nella propria interfaccia.

Se l’essenza di questa modalità di interazione rimane essenzialmente quella annunciata ad ottobre recentemente OpenAI ha annunciato l’abilità di eseguire il codice HTML direttamente come già avviene per gli artefatti di Claude. Si tratta di un’interessante novità che potrebbe avere un impatto significativo nello sviluppo di prototipi e nella didattica non solo della programmazione. Vediamo come l’introduzione dell’anteprima nel Canvas cambi significativamente l’interazione con l’AI.

Un visualizzatore di frattali

Chi mi conosce sa che sono un grande appassionato del frattale di Mandelbrot (e non solo) ed ho cominciato a programmare dei visualizzatori dell’insieme sin dalle scuole superiori. È stato anche uno degli esempi che ho fatto per tanti anni mentre insegnavo il corso di programmazione di interfacce grafiche. È quindi naturale che metta l’AI alla prova usando questo problema come base di partenza (in effetti la richiesta di generare il codice di un programma che visualizza l’insieme è stato uno dei primi prompt che ho provato su GPT 3.5).

WHITEPAPER

Sviluppa la tua piattaforma grazie ad un approccio Product Centric e alla Metodologia Agile

DevOps
PaaS

Il prompt che ho usato per generare il codice è il seguente:

“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 però le proporzioni della visualizzazione. Man mano che si fa zoom vengono incrementate le iterazioni per punto, partendo dalle 150 iniziali salendo fino 2000.”

Si tratta di un prompt abbastanza semplice che si limita a dare alcune informazioni di base sul comportamento non solo dell’insieme ma anche dell’interazione attesa. Si richiede infatti che si possa effettuare lo zoom utilizzando il drag and drop mantenendo la proporzione tra altezza e larghezza della visualizzazione per evitare che durante l’esplorazione il frattale si deformi.

Come atteso viene aperto il riquadro in cui viene generato il codice del frattale e, al primo accesso, veniamo informati che è possibile visualizzare un’anteprima utilizzando l’apposita funzione:

Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

L’avvio dell’anteprima mette in esecuzione il visualizzatore del frattale. La visualizzazione è decisamente ottima, il sistema calcola le giuste proporzioni ma la prima implementazione della selezione aveva un bug: trascinando il rettangolo rosso di selezione lasciava una scia decisamente brutta da vedere. Mi sono limitato a chiedere di fissare il bug per ottenere una versione corretta del visualizzatore.

Immagine che contiene testo, schermata, Software multimediale, softwareIl contenuto generato dall'IA potrebbe non essere corretto.

Il confronto con Claude

Ho provato ad usare Claude con il medesimo prompt ed ho ottenuto un visualizzatore altrettanto funzionale ma meno rispettoso delle proporzioni:

Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

Nel caso di Claude l’artefatto è eseguibile ma non è possibile editare il codice, solo chiedere mediante il prompt di cambiarlo. In questo senso l’interfaccia Canvas sembra decisamente più flessibile consentendo modifiche puntuali al codice senza dover chiedere di fatto di rigenerare l’intero codice.

Il confronto con Le Chat di Mistral

Quando ho ripetuto la procedura con Le Chat ho ottenuto (abilitando il Canvas e l’interprete di codice) un’interazione molto simile a quella di ChatGPT ma il codice generato è risultato incompleto, con una visualizzazione che effettivamente interagisce ma senza visualizzare correttamente il frattale come si vede nella seguente figura:

Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

La navigazione nel frattale funziona in modo analogo sia nella versione generata da GPT che in quella generata da Claude.

Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.
Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

Se condividiamo l’anteprima di ChatGPT e la visualizziamo in maniera anonima otteniamo la richiesta dell’interfaccia se vogliamo eseguire il codice (in fondo è il nostro Web Browser ad eseguire il codice generato e potrebbe essere utilizzato per portare attacchi informatici). Una volta acconsentito viene caricata la nostra micro applicazione senza l’interfaccia di GPT per modificare il codice (azione sempre possibile utilizzando l’apposita opzione in alto a destra):

Immagine che contiene schermata, testo, Software multimediale, softwareIl contenuto generato dall'IA potrebbe non essere corretto.

Per i più curiosi ecco il link al visualizzatore generato dall’AI: ChatGPT – Mandelbrot Viewer

Uso nel contesto della didattica

Si dibatte molto, e con ragione, sull’impiego dell’AI generativa nell’insegnamento, ma considerando come unica applicazione quella della generazione del testo (o delle domande). La possibilità di generare vere e proprie applicazioni interattive con un semplice prompt apre nuovi scenari, sia utilizzando gli artefatti di Claude che il riquadro di GPT e Mistral.

Proviamo a fare un semplice esempio per rendere più concreto l’esempio. Possiamo chiedere ad esempio:

“Componi un riquadro di codice html5 che mostri un simulatore di proiettile per insegnare il moto parabolico. Deve essere possibile regolare angolo e velocità iniziale”

Il risultato, dopo qualche altro commento e aggiunta consente di sperimentare come al variare delle condizioni iniziali di alzo e velocità iniziale si ottengano varie traiettorie paraboliche. Si tratta di un semplice strumento che potrebbe rendere più interattiva una lezione di fisica, magari andando poi a vedere nel codice come sono implementate le equazioni del moto, lineare lungo l’asse x e uniformemente accelerato lungo l’asse y.

Immagine che contiene schermata, testo, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.
Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

Nuovamente anche Claude produce un risultato analogo (e forse con un po’ più di cura nell’interfaccia generata):

Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

Anche Mistral produce un’applicazione simile anche se è decisamente la meno curata delle tre provate.

Nel caso di Mistral è possibile modificare il codice come avviene nel riquadro di ChatGPT, questo consente in linea di principio di sperimentare con l’applicazione, aspetto sicuramente interessante da approfondire in una classe.

Immagine che contiene testo, schermata, software, Software multimedialeIl contenuto generato dall'IA potrebbe non essere corretto.

Conclusioni

La funzione “Anteprima” del Canvas di OpenAI colma un gap che mancava e che invece Claude di Anthropic aveva ben interpretato. Nel corso di meno di due anni il codice generato dai modelli AI è quasi sempre corretto ed è assolutamente naturale avviarsi verso un mondo in cui con un semplice prompt possiamo richiedere di generare un’interfaccia grafica che possiamo testare ed è perfettamente funzionante.

È importante sottolineare come, in linea di principio, si possano realizzare interfacce pienamente operative che invocano delle API e quindi svolgono qualche compito utile.

In fondo aveva ragione Alan Turing quando prevedeva che i matematici che scrivevano le tabelle (programmi per i primi computer) sarebbero serviti per un po’ ma alla fine i computer avrebbero generato autonomamente queste tabelle, e in effetti è quello che succede con l’AI che genera codice e lo esegue direttamente. Resta da vedere come questa abilità troverà applicazioni (sperabilmente in modo sicuro) nel prossimo futuro.

WHITEPAPER

Sai come gli strumenti di programmazione con l'AI possono trasformare il tuo lavoro?

API
DevOps

EU Stories - La coesione innova l'Italia

Tutti
Video & Podcast
Analisi
Social
Iniziative
Podcast
Centro Servizi Territoriali: uno strumento per accompagnare gli enti nell’attuazione della politica di coesione. Il podcast “CapCoe. La coesione riparte dalle persone”
Podcast
EU Stories, il podcast | Politiche di coesione e comunicazione: una sinergia per il futuro
Opinioni
La comunicazione dei fondi europei da obbligo ad opportunità
eBook
L'analisi della S3 in Italia
Norme UE
European Accessibility Act: passi avanti verso un’Europa inclusiva
Agevolazioni
A febbraio l’apertura dello sportello Mini Contratti di Sviluppo
Quadri regolamentari
Nuovi Orientamenti sull’uso delle opzioni semplificate di costo
Coesione
Nuovo Bauhaus Europeo (NEB): i premi che celebrano innovazione e creatività
Dossier
Pubblicato il long form PO FESR 14-20 della Regione Sicilia
Iniziative
400 milioni per sostenere lo sviluppo delle tecnologie critiche nel Mezzogiorno
Formazione
“Gian Maria Volonté”: dalle aule al mondo del lavoro, focus sui tirocini della Scuola d’Arte Cinematografica
TRANSIZIONE ENERGETICA
Il ruolo del finanziamento BEI per lo sviluppo del fotovoltaico in Sicilia
Formazione
“Gian Maria Volonté”: dalla nascita ai progetti futuri, focus sulla Scuola d’Arte Cinematografica. Intervista al coordinatore Antonio Medici
MedTech
Dalla specializzazione intelligente di BionIT Labs una innovazione bionica per la disabilità
Finanza sostenibile
BEI e E-Distribuzione: investimenti per la sostenibilità energetica
Professioni
Servono competenze adeguate per gestire al meglio i fondi europei
Master
Come formare nuove professionalità per governare e gestire al meglio i fondi europei?
Programmazione UE
Assunzioni per le politiche di coesione: prossimi passi e aspettative dal concorso nazionale. Il podcast “CapCoe. La coesione riparte dalle persone”
innovazione sociale
Rigenerazione urbana: il quartiere diventa un hub dell’innovazione. La best practice di San Giovanni a Teduccio
Programmazione europ
Fondi Europei: la spinta dietro ai Tecnopoli dell’Emilia-Romagna. L’esempio del Tecnopolo di Modena
Interventi
Riccardo Monaco e le politiche di coesione per il Sud
Iniziative
Implementare correttamente i costi standard, l'esperienza AdG
Finanziamenti
Decarbonizzazione, 4,8 miliardi di euro per progetti cleantech
Formazione
Le politiche di Coesione UE, un corso gratuito online per professionisti e giornalisti
Interviste
L’ecosistema della ricerca e dell’innovazione dell’Emilia-Romagna
Interviste
La ricerca e l'innovazione in Campania: l'ecosistema digitale
Iniziative
Settimana europea delle regioni e città: un passo avanti verso la coesione
Iniziative
Al via il progetto COINS
Eventi
Un nuovo sguardo sulla politica di coesione dell'UE
Iniziative
EuroPCom 2024: innovazione e strategia nella comunicazione pubblica europea
Iniziative
Parte la campagna di comunicazione COINS
Interviste
Marco De Giorgi (PCM): “Come comunicare le politiche di coesione”
Analisi
La politica di coesione europea: motore della transizione digitale in Italia
Politiche UE
Il dibattito sul futuro della Politica di Coesione
Mobilità Sostenibile
L’impatto dei fondi di coesione sul territorio: un’esperienza di monitoraggio civico
Iniziative
Digital transformation, l’Emilia-Romagna rilancia sulle comunità tematiche
Politiche ue
Fondi Coesione 2021-27: la “capacitazione amministrativa” aiuta a spenderli bene
Finanziamenti
Da BEI e Banca Sella 200 milioni di euro per sostenere l’innovazione di PMI e Mid-cap italiane
Analisi
Politiche di coesione Ue, il bilancio: cosa ci dice la relazione 2024
Politiche UE
Innovazione locale con i fondi di coesione: progetti di successo in Italia
Podcast
Centro Servizi Territoriali: uno strumento per accompagnare gli enti nell’attuazione della politica di coesione. Il podcast “CapCoe. La coesione riparte dalle persone”
Podcast
EU Stories, il podcast | Politiche di coesione e comunicazione: una sinergia per il futuro
Opinioni
La comunicazione dei fondi europei da obbligo ad opportunità
eBook
L'analisi della S3 in Italia
Norme UE
European Accessibility Act: passi avanti verso un’Europa inclusiva
Agevolazioni
A febbraio l’apertura dello sportello Mini Contratti di Sviluppo
Quadri regolamentari
Nuovi Orientamenti sull’uso delle opzioni semplificate di costo
Coesione
Nuovo Bauhaus Europeo (NEB): i premi che celebrano innovazione e creatività
Dossier
Pubblicato il long form PO FESR 14-20 della Regione Sicilia
Iniziative
400 milioni per sostenere lo sviluppo delle tecnologie critiche nel Mezzogiorno
Formazione
“Gian Maria Volonté”: dalle aule al mondo del lavoro, focus sui tirocini della Scuola d’Arte Cinematografica
TRANSIZIONE ENERGETICA
Il ruolo del finanziamento BEI per lo sviluppo del fotovoltaico in Sicilia
Formazione
“Gian Maria Volonté”: dalla nascita ai progetti futuri, focus sulla Scuola d’Arte Cinematografica. Intervista al coordinatore Antonio Medici
MedTech
Dalla specializzazione intelligente di BionIT Labs una innovazione bionica per la disabilità
Finanza sostenibile
BEI e E-Distribuzione: investimenti per la sostenibilità energetica
Professioni
Servono competenze adeguate per gestire al meglio i fondi europei
Master
Come formare nuove professionalità per governare e gestire al meglio i fondi europei?
Programmazione UE
Assunzioni per le politiche di coesione: prossimi passi e aspettative dal concorso nazionale. Il podcast “CapCoe. La coesione riparte dalle persone”
innovazione sociale
Rigenerazione urbana: il quartiere diventa un hub dell’innovazione. La best practice di San Giovanni a Teduccio
Programmazione europ
Fondi Europei: la spinta dietro ai Tecnopoli dell’Emilia-Romagna. L’esempio del Tecnopolo di Modena
Interventi
Riccardo Monaco e le politiche di coesione per il Sud
Iniziative
Implementare correttamente i costi standard, l'esperienza AdG
Finanziamenti
Decarbonizzazione, 4,8 miliardi di euro per progetti cleantech
Formazione
Le politiche di Coesione UE, un corso gratuito online per professionisti e giornalisti
Interviste
L’ecosistema della ricerca e dell’innovazione dell’Emilia-Romagna
Interviste
La ricerca e l'innovazione in Campania: l'ecosistema digitale
Iniziative
Settimana europea delle regioni e città: un passo avanti verso la coesione
Iniziative
Al via il progetto COINS
Eventi
Un nuovo sguardo sulla politica di coesione dell'UE
Iniziative
EuroPCom 2024: innovazione e strategia nella comunicazione pubblica europea
Iniziative
Parte la campagna di comunicazione COINS
Interviste
Marco De Giorgi (PCM): “Come comunicare le politiche di coesione”
Analisi
La politica di coesione europea: motore della transizione digitale in Italia
Politiche UE
Il dibattito sul futuro della Politica di Coesione
Mobilità Sostenibile
L’impatto dei fondi di coesione sul territorio: un’esperienza di monitoraggio civico
Iniziative
Digital transformation, l’Emilia-Romagna rilancia sulle comunità tematiche
Politiche ue
Fondi Coesione 2021-27: la “capacitazione amministrativa” aiuta a spenderli bene
Finanziamenti
Da BEI e Banca Sella 200 milioni di euro per sostenere l’innovazione di PMI e Mid-cap italiane
Analisi
Politiche di coesione Ue, il bilancio: cosa ci dice la relazione 2024
Politiche UE
Innovazione locale con i fondi di coesione: progetti di successo in Italia

Articoli correlati

Articolo 1 di 4