Come creare web app con Artifacts di Claude 3.5 Sonnet

GPT-4o e Gemini 1.5 Pro hanno un serio concorrente: Claude 3.5 Sonnet. Anthropic ha annunciato Claude 3.5 Sonnet come parte della più ampia famiglia Claude 3.5, che sarà completata nel corso dell’anno con il rilascio di Claude 3.5 Haiku e Claude 3.5 Opus.

Claude 3.5 Sonnet non solo batte GPT-4o e Gemini 1.5 Pro in diversi benchmark, ma introduce anche una nuova fantastica funzione chiamata Artifacts, che permette di costruire mini app, giochi e persino plugin Figma in pochi secondi.

Come funziona Claude 3.5

Claude 3.5 Sonnet si basa sul modello precedente, Claude 3 Opus. Si tratta di un modello linguistico di grandi dimensioni, cioè addestrato su un enorme insieme di testo e codice, che gli consente di comprendere e generare un linguaggio simile a quello umano. Ciò che distingue Claude 3.5 Sonnet è il miglioramento delle sue prestazioni. È stato perfezionato e ottimizzato, con conseguenti upgrade in varie aree.

Il ragionamento di livello elevato è stato a lungo considerato un tratto distintivo dell’intelligenza umana, una frontiera in cui l’AI fatica a tenere il passo. Anche se c’è ancora molto lavoro da fare, Claude Sonnet 3.5 dimostra progressi significativi.

Per quanto riguarda la matematica, Claude 3.5 Sonnet è leggermente indietro rispetto a GPT-4o, che è in testa con un punteggio del 76,6%. Ma il punteggio di Claude 3.5 Sonnet, pari al 71,1%, è ancora notevolmente alto. Questa performance suggerisce che Claude 3.5 Sonnet ha una solida padronanza dei concetti matematici, delle formule e del ragionamento logico, che lo rende uno strumento promettente per i compiti che richiedono competenze matematiche.

Il benchmark BIG-Bench-Hard si concentra sulla valutazione della capacità dei modelli di AI di affrontare problemi di varia natura, dimostrare un ragionamento avanzato e applicare la conoscenza in vari ambiti. Claude 3.5 Sonnet supera significativamente gli altri modelli in questo benchmark, ottenendo un punteggio del 93,1%. Ciò indica che Claude 3.5 Sonnet possiede un elevato livello di competenza nel gestire compiti complessi, nel ragionare efficacemente in diverse aree tematiche e nell’applicare le proprie conoscenze in modo flessibile a situazioni nuove.

Per quanto riguarda le capacità visive, Claude 3.5 Sonnet eccelle in particolare nel ragionamento matematico visivo, ottenendo un punteggio del 67,7% nel test MathVista, un vantaggio significativo rispetto agli altri modelli. Claude 3.5 Sonnet ottiene buoni risultati anche nella risposta alle domande visive (MMMU) e nella Q&A visiva dei documenti (punteggio ANLS), dimostrando la sua capacità di comprendere ed elaborare efficacemente le informazioni visive.

In definitiva, Claude 3.5 Sonnet è il modello di intelligenza artificiale di Anthropic che eccelle in compiti che richiedono ragionamento visivo, come l’interpretazione e la creazione di grafici. Tuttavia, Anthropic promuove Sonnet anche come un partner eccezionale per attività come il coding e la scrittura creativa.

Che cos’è la modalità Artifacts

Claude Artifacts permette di creare ed eseguire istantaneamente mini-app, giochi e strumenti web, riducendo enormemente il lavoro necessario per creare un’app funzionante. A differenza dei frammenti di codice e dei consigli che si ricevono da ChatGPT o da GitHub Copilot, qui le idee vengono realizzate senza lasciare la chat. Non sono necessari IDE separati, impostazioni di progetti o ambienti complessi.

Artifacts consente a Claude di condividere con gli utenti contenuti sostanziali e autonomi in una finestra dedicata, separata dalla conversazione principale. In questo modo, è possibile lavorare facilmente con parti significative di contenuto che si desidera modificare, sviluppare o consultare in seguito.

Il codice generato da Claude 3.5 può essere eseguito direttamente nell’interfaccia di Claude, senza bisogno di utilizzare tool esterni. Questo aspetto semplifica molto il processo di creazione e test di software per qualsiasi tipo di utente. Sia gli sviluppatori esperti che le persone senza alcuna conoscenza di programmazione possono interagire con il codice generato da Claude in tempo reale, osservando immediatamente il risultato delle modifiche apportate.

Come utilizzare Artifacts per creare web app in pochi clic

Per poter utilizzare la funzionalità “Artifacts” di Claude 3.5 e generare contenuti interattivi, è necessario prima abilitarla nelle impostazioni:

• Fare clic sulle iniziali del proprio account in alto a destra;
• Entrare nella sezione “Feature Preview”;
• Spostare la levetta su “On” accanto alla voce “Artifacts” per attivarla.

A questo punto la funzione è abilitata: per generare un Artifact o Artefatto, basta inserire nella chat una richiesta a Claude per produrre contenuti visualizzabili tramite Artifact, come codice, grafici, mockup ecc. Claude genererà l’Artifact richiesto, permettendo di visualizzare e interagire con il contenuto in tempo reale all’interno della sua interfaccia.

Quando Claude crea un Artefatto, questo appare in un pannello separato all’interno dell’interfaccia, diviso in schede Code e Preview. La scheda Code visualizza l’output grezzo generato da Claude, mentre la scheda Preview fornisce una rappresentazione visiva o interattiva di tale output.

Esempio di Artifact

Con Artifacts, ad esempio, si può chiedere a Claude di creare una web app che sia un generatore di password random, dove si può scegliere la complessità di una password da 1 a 5. A questo punto, Claude separa la schermata in due, a sinistra c’è la chat con l’utente e a destra quello che sta creando, ovvero una sorta di sito web. Ma l’aspetto più interessante è il pulsante “Publish”, che consente di rendere pubblico e accessibile a tutti un Artifact generato, trasformandolo in un sito web funzionante.

Cliccando su “Publish”, infatti, l’utente può pubblicare l’Artefatto, e Claude genererà un link per accedervi. Il link può essere condiviso ovunque, ad esempio in chat, email, WhatsApp o anche incluso in un altro sito web come link esterno. In questo modo, un Artifact realizzato in Claude come prototipo, può essere reso effettivamente una web app funzionante e condivisibile, grazie a un semplice clic. Si tratta di uno strumento potente per creare e distribuire rapidamente applicazioni web a partire da contenuti generati in Claude.

Per fare un altro esempio, supponiamo di chiedere a Claude di creare un generatore di lettering, dove l’utente può scegliere uno stile di carattere (es. vintage, elegante, moderno) e inserire il testo che desidera realizzare con quello stile grafico.

Claude genera nella parte destra una sorta di sito web con menu a tendina per la selezione dello stile e un campo di testo, mostrando in tempo reale l’anteprima del lettering creato. Anche in questo caso, cliccando poi su “Publish”, si ottiene un link per pubblicare l’Artefatto come web app funzionante e condivisibile ovunque, trasformando il prototipo iniziale in un generatore di lettering vero e proprio.