La sfida dei quattro migliori modelli! Una recensione mostra la potenza del Deepseek R1

Negli ultimi giorni, Deepseek-R1 0528 è stato ufficialmente reso open source.

Su LiveCodeBench, le sue prestazioni sono quasi alla pari con o3 di OpenAI (alto); nel test di benchmark multi-linguaggio di Aider, tiene testa a Claude Opus.

Quando è stato lanciato sul sito web ufficiale, ne abbiamo testato rapidamente le funzionalità front-end, riscontrandone l'eccezionale potenza, il che ci ha portato ai test descritti in questo articolo. Il nostro obiettivo è condividere con voi le prestazioni specifiche dei diversi modelli.

È importante notare che questo test si concentra principalmente sulle funzionalità front-end, quindi è essenziale valutare le prestazioni dei diversi modelli in modo obiettivo. Puoi utilizzare i suggerimenti che forniamo per condurre i tuoi test e condividere le tue intuizioni e i tuoi risultati.

Utilizzando lo stesso prompt, lo abbiamo inviato a Claude Opus 4, Sonnet 4, Gemini 2.5 Pro e Codice articolo: DeepSeek R1-0528e li ha fatti competere in sei attività di sviluppo front-end di difficoltà crescente.

Per chi non vede l'ora, ecco la conclusione:

Deepseek-R1-0528 è leggermente inferiore a Opus 4 nelle capacità front-end ma supera Sonetto 4 e Gemini 2.5 Pro.

In pratica, qualsiasi compito che Opus può completare, può completarlo anche R1; e perfino i compiti che Opus 4 non riesce a completare, possono essere gestiti da R1, anche se con percentuali di completamento e qualità dei risultati leggermente inferiori.

Considerando la differenza di prezzo tra R1 e gli altri tre, le prestazioni sono già eccellenti e possiamo solo immaginare quanto saranno impressionanti quelle di R2.

Test 1: Sistema di gestione del magazzino

Richiesta: Aiutami a creare uno strumento completo di gestione dei prodotti basato sul Web con i seguenti requisiti:

Requisiti funzionali

1. Gestione del prodotto

• Inserimento informazioni prodotto: Nome del prodotto, tipo/categoria, numero SKU, prezzo, quantità di inventario
• Gestione dell'immagine del prodotto: Supporta il caricamento e l'anteprima delle immagini (simulato con un selettore di file)
• Visualizzazione dell'elenco dei prodotti: Visualizza tutti i prodotti in formato tabella, con supporto per ricerca e filtro
• Modifica del prodotto: Supporta la modifica delle informazioni sul prodotto
• Eliminazione del prodotto: Supporta l'eliminazione del prodotto (con richiesta di conferma)

2. Gestione dell'inventario

• Operazioni in entrata: Aumenta la quantità di inventario del prodotto, registra il tempo e la quantità in entrata
• Operazioni in uscita: Ridurre la quantità di inventario del prodotto, registrare il tempo e la quantità in uscita
• registrazioni di inventario: Visualizza la cronologia delle variazioni di inventario per ciascun prodotto

3. Caratteristiche dell'interfaccia

• Cruscotto: Visualizza statistiche quali il numero totale di prodotti, il valore totale dell'inventario, gli avvisi di inventario basso, ecc.
• Design reattivo: Adattabile a dispositivi desktop e mobili
• Persistenza dei dati: Utilizza localStorage per salvare i dati

Requisiti tecnici

Stili e icone

• Framework CSS: Utilizza TailwindCSS 3.0+ CDN
• Libreria di icone: Utilizza Heroicons o Feather Icons CDN
• Font: Usa i caratteri di Google

Struttura del codice

• Domanda di una sola pagina: HTML + CSS + JavaScript
• Design modulare: Suddividere le funzioni in diversi moduli JavaScript
• Formato dei dati: Utilizza il formato JSON per memorizzare i dati del prodotto

Requisiti di progettazione dell'interfaccia

• Interfaccia utente moderna: Design dell'interfaccia semplice e bello
• Schema dei colori: Utilizza combinazioni di colori aziendali professionali
• Feedback interattivo: Clic sui pulsanti, convalida dei moduli e altri effetti interattivi
• Convalida del modulo: Validazione dei campi obbligatori, convalida del formato dei dati

Esempio di struttura dati

Genera un file HTML completo contenente tutto il codice CSS e JavaScript necessario, assicurandoti che tutte le funzionalità siano operative e possano essere eseguite direttamente in un browser.

Diamo un'occhiata ai risultati dei test. La logica è in realtà piuttosto complessa e mette alla prova la lunghezza del contesto, il senso estetico e le capacità di elaborazione logica del modello.

In questo caso, tutti i modelli, tranne Deepseek, hanno fallito. Traduzione di Claude 4 era piuttosto strano, per essere onesti.

Deepseek-R1-0528: La versione aggiornata di R1 è molto potente. Come potete vedere, l'interfaccia è molto professionale e permette anche di creare nuovi prodotti, eseguire le normali operazioni in entrata e in uscita e suddividere i prodotti, la gestione dell'inventario e i report di inventario in tre pagine, il che è complessivamente molto chiaro. C'è anche una pagina dedicata alla dashboard e sono stati creati alcuni dati di esempio per i test. Gli altri modelli non hanno dati e l'aggiunta di prodotti non funziona, quindi i test sono completamente impossibili.

Claude Opus 4: Inizia con un'interfaccia ampia e molto semplice, che utilizza una barra di navigazione superiore invece della barra laterale comune nelle piattaforme SaaS. L'aggiunta di prodotti genera un errore durante il salvataggio, rendendo impossibile il test.

Sonetto 4 di Claude: Rispetto a Opus 4, l'interfaccia è ancora più basilare. Cliccando sul pulsante "Aggiungi prodotto" non si ottiene alcun risultato e non appare alcun pop-up. Le altre pagine sono essenzialmente solo segnaposto.

Gemini 2.5 Pro: La versione di Google è migliore di quella di Claude. Permette di aggiungere prodotti e di eseguire esecuzioni, ma presenta dei bug. Ha funzionato la prima volta che l'ho provata, ma non quando ho registrato un video. Tuttavia, il design dell'interazione di Gemini è piuttosto complesso, con la gestione dell'inventario e la registrazione dei dati tutto in un'unica tabella, il che aggiunge qualche difficoltà.

Test 2: Editor di animazione pixel

Il prossimo è un test di abilità visiva. Ho chiesto loro di creare un editor di animazione pixel art usando P5.js, che supportasse le modalità di movimento, regolando forme, dimensioni, velocità e altre condizioni dei punti.

Richiesta: creare un generatore di animazioni pixel art interattive a schermo intero basato su P5.js, che soddisfi i seguenti requisiti tecnici:

Caratteristiche principali

• Implementa l'animazione pixel art a schermo intero utilizzando P5.js, con l'animazione che copre l'intera area di visualizzazione
• L'area totale della griglia dei pixel deve essere almeno 10 volte l'area visibile per garantire una copertura completa anche con la spaziatura della griglia più piccola
• Fornisce più modalità di animazione: Onda, Impulso, Increspatura, Rumore
• Supporta più opzioni di forma del punto: cerchio, quadrato, croce, triangolo, diamante, ecc.
• Tutti i pannelli di controllo sono posizionati sul lato destro della pagina e possono essere compressi in basso sui dispositivi mobili

Parametri regolabili

• Densità dei punti: controlla il numero di punti per riga/colonna
• Dimensione della forma: regola la dimensione dei punti
• Velocità di animazione: controlla la velocità e l'ampiezza dell'effetto di animazione
• Spaziatura della griglia: regola la distanza tra i punti

Specifiche tecniche

• Utilizza HTML5, TailwindCSS 3.0+ (introdotto tramite CDN) e P5.js
• Implementa la funzionalità di commutazione completa tra modalità chiara e scura, utilizzando come impostazione predefinita le impostazioni di sistema
• Il codice deve includere una logica di ottimizzazione delle prestazioni, eseguendo il rendering solo dei punti all'interno dell'area visibile e vicino ai bordi
• Le animazioni devono essere eseguite senza intoppi e senza ritardi

Design reattivo

• Le pagine devono essere visualizzate perfettamente su tutti i dispositivi (mobile, tablet, desktop)
• I pannelli di controllo dovrebbero essere comprimibili/espandibili nella visualizzazione mobile
• Ottimizza il layout e le dimensioni dei caratteri per diverse dimensioni dello schermo
• Garantire una buona esperienza touch sui dispositivi mobili

Elementi dell'interfaccia

• Selettore della modalità di animazione (onda, impulso, increspatura, rumore)
• Selettore di forme (visualizza varie forme con icone)
• Controlli del cursore: densità, dimensione, velocità, spaziatura
• Pulsante di cambio tema
• Visualizza le informazioni sulla sovrapposizione della matrice e il numero totale di punti

Date un'occhiata ai risultati. A dire il vero, non mi aspettavo che gli altri modelli si comportassero così male in questo test. A parte Deepseek-R1, le animazioni degli altri modelli non hanno funzionato affatto.

Deepseek-R1-0528: Perfettamente impeccabile. Ogni pulsante e cursore funziona correttamente e i punti si muovono fluidamente. Ha persino aggiunto dati a matrice di punti e i colori rimangono costanti dopo essere passati alla modalità notturna. L'unico piccolo problema è che lo stato selezionato per la selezione del colore presenta un piccolo problema, ma è trascurabile rispetto alle prestazioni disastrose degli altri modelli.

Claude Opus 4: Buone notizie: ha la pixel art. Cattive notizie: non si muove. Il contenuto sul lato destro può essere gestito normalmente, ma la combinazione di colori non è corretta dopo essere passati alla modalità notturna.

Sonetto 4 di Claude: Questo è un disastro. Non c'è pixel art e manca persino lo stato di selezione dei pulsanti. I cursori sono solo puntini: tanto vale usare i componenti predefiniti.

Gemini 2.5 Pro: Segnala anche un errore con la mancanza di una griglia pixel. Il contenuto sul lato destro funziona normalmente e il cambio di tema funziona correttamente, ma i componenti predefiniti sono un po' brutti.

Test 3: Strumento di estrazione del colore del gradiente dell'immagine

Questo è uno strumento che ho già descritto in precedenza. Non c'è una descrizione approfondita della logica, ma c'è una descrizione più approfondita dello stile. La funzione principale è quella di estrarre cinque set di colori sfumati da un'immagine.

Richiesta: Generare una pagina web HTML basata sul seguente contenuto del file, supportare l'estrazione di cinque set di colori sfumati dalle immagini caricate e consentire agli utenti di copiare direttamente i cinque set di colori sfumati esadecimali. È necessario implementare la funzione di estrazione del colore.

1. Utilizza il design visivo in stile NetEase Cloud Music, sfondo bianco con un colore simile a #FE1110 come punto culminante
2. Metti in risalto caratteri grandi o numeri per evidenziare i punti chiave. Includi elementi visivi di grandi dimensioni per enfatizzare le aree di interesse, creando contrasto con elementi più piccoli.
3. Mescola testo cinese e inglese. Usa caratteri cinesi grandi e in grassetto e testo inglese più piccolo per gli accenti.
4. Utilizza semplici grafici lineari per la visualizzazione dei dati o come elementi decorativi.
5. Utilizza il gradiente di trasparenza dei colori evidenziati per creare un effetto ispirato alla tecnologia, ma assicurati che i diversi colori evidenziati non si mescolino tra loro.
6. Imita le animazioni del sito web ufficiale di Apple, con lo scorrimento del mouse che attiva le animazioni
7. I dati possono essere referenziati da componenti di grafici online, con stili coerenti con il tema
8. Utilizzare Framer Motion (tramite CDN)
9. Utilizzare HTML5, TailwindCSS 3.0+ (tramite CDN) e JavaScript necessario
10. Utilizza librerie di icone professionali come Font Awesome o Material Icons (tramite CDN)
11. Evita di usare gli emoji come icone primarie
12. Il pulsante della capsula nell'angolo in basso a sinistra mostra l'handle Twitter dell'autore

In questo caso, Claude ha fatto finalmente un ottimo lavoro. I dettagli e l'estetica della pagina di Deepseek-R1-0528 sono impressionanti, ma la funzionalità non è implementata. Le pagine di Opus 4 e Sonnet 4 sono più semplici ma almeno funzionali, mentre Gemini non è affatto funzionale.

Deepseek-R1-0528: Dopo aver utilizzato nuovamente il mio prompt, l'estetica della pagina di Deepseek è davvero ineguagliabile. Ha anche aggiunto molti contenuti SEO-friendly alla pagina, come gli scenari applicativi e i tempi di elaborazione. Anche le schede di visualizzazione con colori sfumati sono molto dettagliate, ma la logica di selezione dei colori non è implementata.

Claude Opus 4: Questa volta, Claude non ha deluso le aspettative, completando la funzionalità della pagina, ma il contenuto è molto elementare, con solo uno spazio per caricare immagini e risultati, e anche la logica di selezione dei colori è scadente. Comunque, almeno funziona.

Sonetto 4 di Claude: Anche Sonnet 4 ha completato la funzionalità e ritengo addirittura che i risultati di Sonnet siano migliori di quelli di Opus, sebbene non sia ancora ricco quanto Deepseek.

Gemini 2.5 Pro: Questo è il peggiore. Non solo i dettagli e l'estetica della pagina sono carenti, ma la funzionalità non è nemmeno implementata e si blocca all'avvio.

Test 4: Sito web di citazioni quotidiane sul rumore bianco

Il prossimo è un generatore di citazioni quotidiane con rumore bianco per siti web, perfetto per un plugin per una nuova scheda. Supporta la riproduzione di rumore bianco da Spotify e la pagina web viene visualizzata.

Richiesta: Aiutami a creare un sito web semplice ed elegante con citazioni giornaliere che soddisfi i seguenti requisiti:

Progettazione visiva

• Immagine di sfondo: Seleziona casualmente immagini di paesaggi di alta qualità dai seguenti link come immagine di sfondo
• Collegamenti alle immagini: XXXX
• Elaborazione delle immagini: Aggiungi una maschera nera 25% e una leggera sfocatura gaussiana per garantire che il testo rimanga chiaro e leggibile
• Stile generale: Minimalista e moderno, con immagini di paesaggi come sfondo della pagina web per migliorare l'immersione
• Utilizza anime.js (introdotto tramite CDN: JsDelivr jsdelivr.com) per il framework di animazione, HTML5, TailwindCSS 3.0+ (introdotto tramite CDN) e JavaScript necessario, e utilizza librerie di icone professionali come Font Awesome o Material Icons (introdotte tramite CDN).

Modulo di visualizzazione dell'ora

• Superiore: Visualizza il formato del mese e del giorno (ad esempio, "29 maggio"), in un carattere più piccolo, centrato
• Seconda fila: Visualizza il formato "Settimana X · Calendario lunare X° mese X° giorno" in un carattere più piccolo
• Centro: Evidenzia la data corrente in caratteri bianchi grandi, centrata

Modulo di visualizzazione delle citazioni

• Contenuto: Visualizza in modo casuale citazioni classiche di filosofi e scrittori cinesi e stranieri
• Disposizione: Le citazioni sono centrate, la dimensione del carattere è moderata e la spaziatura delle linee è comoda
• Attribuzione: “Scrittore, XXX” o “Filosofo, XXX” viene visualizzato in basso a destra
• Biblioteca delle citazioni: Contiene citazioni su vari argomenti come motivazione, intuizioni di vita e saggezza

Funzione di riproduzione musicale

• Posizione: Angolo in basso a sinistra della pagina, compresso per impostazione predefinita
• Contenuto: Incorpora la playlist di rumore bianco di Spotify
• Codice:

Implementazione tecnica

• Design reattivo: Adattato per dispositivi desktop e mobili
• Selezione del carattere: Utilizza eleganti caratteri cinesi, introdotti da Google Fonts
• Schema di colori: Utilizzare principalmente testo bianco per garantire la leggibilità su tutti gli sfondi
• Ottimizzazione del caricamento: Caricamento lento delle immagini per migliorare le prestazioni della pagina

Funzionalità interattive

• Aggiornamento automatico: Cambia automaticamente l'immagine di sfondo e la citazione ogni giorno
• Aggiornamento manuale: Fornisce un pulsante di aggiornamento per consentire agli utenti di modificare manualmente il contenuto

Stile di copywriting

• Selezione preventivo: Preferisci citazioni brevi, positive e filosofiche
• Stile linguistico: Conciso e potente, evitando lunghezze eccessive
• Classificazione tematica: Intuizioni di vita, crescita ispiratrice, pensieri saggi, espressione emotiva, ecc.

Si prega di generare un sito web HTML/CSS/JavaScript completo secondo i requisiti sopra indicati, assicurandosi che l'interfaccia sia esteticamente gradevole, funzionale e offra una buona esperienza utente.

Questo test serve esclusivamente a valutare la comprensione dell'estetica da parte di ciascun modello. Questo tipo di pagina web orientata alla visualizzazione è generalmente realizzabile.

Va detto che Claude Opus 4 è ancora piuttosto autorevole in questo ambito, con un'eccellente attenzione ai dettagli. Anche Gemini 2.5 Pro è valido, aggiungendo persino effetti di animazione alle transizioni delle immagini. Deepseek e Sonnet 4 sono sullo stesso livello.

Deepseek-R1-0528: Ho provato Deepseek per primo e l'ho trovato già piuttosto buono. Il primo problema con l'estetica generale è stato il pulsante della musica nell'angolo in basso a sinistra, un po' troppo piatto. Anche la sezione delle citazioni presentava dei problemi: la maschera nera non avrebbe dovuto essere aggiunta e l'allineamento del testo era un po' impreciso. Tuttavia, ha aggiunto un effetto di animazione per l'aggiornamento.

Claude Opus 4: L'estetica di Opus 4 è davvero impeccabile. Le dimensioni e la spaziatura di tutti i font sono estremamente comode, e le citazioni dei detti famosi sono state gestite con trasparenza, sia per il testo che per le virgolette. Persino il player di Spotify è stato racchiuso in un'interfaccia utente con un'animazione di espansione/compressione. È perfetto.

Sonetto 4 di Claude: L'effetto di Sonnet 4 è simile al problema di Deepseek. Il pulsante di riproduzione musicale, le dimensioni del testo, l'allineamento e la spaziatura possono essere ulteriormente ottimizzati.

Gemini 2.5 Pro: Anche l'effetto di Gemini è buono, ma rimuovere l'ombra del testo lo renderebbe migliore. Ha anche personalizzato l'interfaccia utente del player di Spotify e i dettagli del testo sono buoni. L'effetto di transizione è evidente, con un effetto di allungamento dell'immagine.

Test 5: Generazione della pagina dell'app Sleep

Il prossimo passo è il test dell'app mobile. Chiedete a ciascuno di loro di creare un'app per il monitoraggio del sonno. Il prompt specificherà lo stack tecnico e i requisiti di progettazione e richiederà la generazione di più pagine interattive.

Prompt: Requisiti per lo sviluppo di app per il monitoraggio del sonno

Panoramica del progetto

Aiutatemi a creare un'app completa per il monitoraggio del sonno con quattro pagine funzionali principali. L'interfaccia deve essere esteticamente gradevole e professionale.

Requisiti dello stack tecnico

Tecnologie frontend

– HTML5 – Struttura della pagina

– TailwindCSS v3.0+ – Framework di stile (introdotto tramite CDN)

– JavaScript – Logica di interazione necessaria

– Anime.js v4.0.2 – Libreria di effetti di animazione

• CDN: https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm

Icone e grafici

• Libreria di icone: Font Awesome o Material Icons (CDN)
• Componenti del grafico: componenti del grafico online, gli stili devono essere coerenti con il tema
• Visualizzazione dei dati: supporta la visualizzazione grafica dei dati del sonno

Requisiti di progettazione

Design reattivo

• Layout completamente reattivo
• Progettazione mobile-first
• Buona visualizzazione sia su dispositivi desktop che mobili

Effetti di interazione

• Interazione con i pulsanti: effetto leggermente ingrandito al passaggio del mouse

Interazione del modulo: visualizza un bordo sfumato quando il campo di input è attivo

Interazione con la carta: oscura l'ombra quando passi il mouse sopra

Effetti di animazione: usa Anime.js per ottenere animazioni di pagina fluide

Requisiti della pagina funzionale

Genera tutte le pagine necessarie per un'app di monitoraggio del sonno, tra cui:

• Pagina iniziale/dashboard
• Pagina di registrazione del sonno
• Pagina di analisi dei dati
• Pagina delle impostazioni
• Altre pagine funzionali correlate

Requisiti di output del codice

• Ogni pagina è un file HTML indipendente
• Struttura del codice chiara con commenti completi
• Assicurarsi che tutti i collegamenti CDN siano accessibili
• Fornire codice completo ed eseguibile

In termini di logica e interfaccia mobile, Cluade Opus 4 ha dimostrato ancora una volta la sua potenza, completando più pagine con una buona logica. Gli altri modelli generavano solo una pagina, ma Deepseek R1 0528 ha improvvisamente colto nel segno in termini di estetica, con uno stile splendido. Sebbene generasse solo una pagina, era molto completo.

Deepseek-R1-0528: È stata generata una sola pagina, ma l'estetica generale è buona. I dettagli delle schede e la gestione delle icone sono ben curati, e l'intera pagina è completa e lunga. Inoltre, è stato implementato un design responsive per la navigazione, con layout completamente diversi su dispositivi mobili e desktop.

Claude Opus 4: In effetti è potente, solo Opus4 ha generato completamente tutte le pagine, ma questa volta il design estetico non è eccezionale, usa la logica delle pagine web e le icone di navigazione sono troppo piccole.

Sonetto 4 di Claude: È stata generata solo una pagina e sono stati segnalati degli errori, con un design estetico scadente, ma è stato semplicemente completato il compito.

Gemini 2.5 Pro: Google fa sempre le cose in modo diverso. Genera ogni pagina singolarmente, fornendo quattro file che non possono interagire tra loro. Inoltre, tutte le pagine hanno segnalato errori, con ogni pagina che presentava solo la navigazione e nessun contenuto, il che è piuttosto deludente.

Test 6: Funzionalità complessa: Tetris

Infine, ho concluso con un piccolo test di gioco. Ho progettato un Tetris relativamente complesso con blocchi speciali, cambio di tema, previsione dell'atterraggio dei blocchi, archiviazione dei blocchi e altro ancora: una vera sfida.

Richiesta: Aiutatemi a creare un gioco web Tetris completamente funzionale e visivamente accattivante che soddisfi i seguenti requisiti:

Caratteristiche principali del gioco

1. Meccanismo completo del Tetris: 7 blocchi standard (I, O, T, S, Z, J, L)
2. Controlli fluidi: movimento a sinistra e a destra, rotazione, caduta rapida, caduta istantanea
3. Sistema di eliminazione intelligente: supporta l'eliminazione di 1-4 righe alla volta con effetti di animazione speciali
4. Sistema di difficoltà progressivo: aumenta automaticamente la velocità e il livello di rilascio in base al numero di righe eliminate

Funzionalità avanzate

1. Sistema di anteprima: visualizza i blocchi successivi e successivi-successivi
2. Funzione di attesa: Tieni premuto il tasto Hold per memorizzare temporaneamente il blocco corrente. Può essere usato solo una volta per round.
3. Blocchi fantasma: Visualizza la posizione di atterraggio dei blocchi in forma semitrasparente
4. Sistema combinato: La pulizia continua garantisce punti extra ed effetti visivi
5. Abilità speciali:
   1. Blocco bomba (libera l'area circostante)
   2. Laser Clear (pulisce l'intera fila)
   3. Pausa temporale (i blocchi smettono di cadere per 3 secondi)

Requisiti di progettazione visiva

1. Interfaccia utente moderna:
   1. Sfondo sfumato o effetti particellari
   2. Pannello di gioco effetto vetro
   3. Transizioni di animazione fluide
   4. Design reattivo per schermi diversi
2. Ricchi effetti visivi:
   1. Animazione fluida dei blocchi che cadono e ruotano
   2. Effetti di esplosione o flash quando vengono eliminati
   3. Effetto di vibrazione dello schermo quando si ottiene la combinazione
   4. Animazione di celebrazione quando il livello viene aggiornato
3. Sistema tematico: Almeno 3 diversi temi visivi tra cui passare

Sistema di effetti sonori

1. Feedback sonoro completo: movimento, rotazione, atterraggio, eliminazione, fine del gioco, ecc.
2. Musica di sottofondo: musica di sottofondo del gioco in loop
3. Controllo del volume: effetti sonori e volume della musica di sottofondo regolabili in modo indipendente

Modalità di gioco

1. Modalità classica: il tradizionale gameplay di Tetris
2. Modalità a tempo limitato: raggiungere il punteggio più alto entro un limite di tempo specificato
3. Modalità sfida: ostacoli preimpostati per aumentare la difficoltà
4. Modalità Zen: nessuna pressione di tempo, puro divertimento del gioco

Funzionalità delle statistiche dei dati

1. statistiche in tempo reale: punteggio attuale, livello, numero di linee completate, tempo di gioco
2. Storia: punteggio più alto, livello migliore, tempo totale di gioco
3. Sistema di risultati: sblocca vari obiettivi di gioco
4. Archiviazione locale: salva i record e le impostazioni del gioco

Requisiti tecnici

1. Utilizza HTML5/CSS3/JavaScript puro, non sono richiesti framework esterni
2. Struttura del codice chiara: programmazione orientata agli oggetti, progettazione modulare
3. Ottimizzazione delle prestazioni: animazione fluida a 60 FPS, senza ritardi
4. Compatibilità: supporta i browser moderni più diffusi
5. Design reattivo: Compatibile con PC e dispositivi mobili

Esperienza utente

1. Istruzioni intuitive: Tutorial integrato e prompt dei pulsanti
2. Funzione pausa/ripresa: Metti in pausa il gioco in qualsiasi momento
3. Menu delle impostazioni: Regola la difficoltà del gioco, gli effetti sonori, gli effetti visivi, ecc.
4. Salvataggio dello stato del gioco: Supporta il salvataggio e la ripresa del gioco

Requisiti di qualità del codice

1. Commenti dettagliati:Ogni funzione e segmento di codice importante deve avere una descrizione
2. Gestione degli errori: Meccanismo completo di cattura e gestione delle eccezioni
3. Codice elegante: Segui le migliori pratiche, facili da capire e da mantenere
4. Estensibilità: Facile aggiungere nuove funzionalità in futuro

Si prega di fornire file HTML completi contenenti tutto il codice CSS e JavaScript per garantire che possano essere eseguiti direttamente in un browser. Il codice deve dimostrare competenze di programmazione professionali e una profonda conoscenza dello sviluppo di videogiochi.

Nel minigioco, Claude ha qualcosa da fare. Sia Opus che Sonnet hanno generato i blocchi Tetris corrispondenti come richiesto, in particolare la logica per i blocchi speciali. Deepseek ha gestito il tema trascurato da Claude, ma ha trascurato i blocchi speciali, con il risultato che Gemini 2.5 Pro ha generato blocchi ingiocabili.

Deepseek-R1-0528: Il compito è stato completato molto bene e secondo le specifiche, ma il design speciale dei blocchi è stato omesso e non implementato affatto. Ciò potrebbe essere dovuto a problemi nel seguire le parole chiave. L'intera pagina web assomiglia a un'interfaccia di gioco, con tutti i pulsanti che appaiono come componenti standard.

Claude Opus 4: Ho completato la logica per i blocchi speciali e altre logiche senza problemi, ma ho ignorato il prompt per il cambio di tema, che non ha implementato. Rispetto ai problemi di DeepSeek, questo è un problema minore, ma l'interfaccia è hardcoded senza logica responsive, quindi le proporzioni sono leggermente sfasate, rendendo alcuni pulsanti non cliccabili.

Sonetto 4 di Claude: Simile a Opus, ma penso che Sonnet 4 sia migliore. Anche l'adattamento delle pagine è buono. Sembra che Sonnet abbia vinto, dato che ha completato tutte le funzioni richieste.

Gemini 2.5 Pro: Gemini ha sempre difficoltà con la logica complessa. Questa volta, era completamente inutilizzabile perché il posizionamento dei mattoncini aveva un bug, rendendo impossibile prevedere dove sarebbero atterrati. È il peggio.

A questo punto, penso che siate stupiti quanto me dalle prestazioni della DeepSeek-R1.

È difficile credere che si tratti solo di un piccolo upgrade di modello. Confrontiamo i prezzi di questi modelli con DeepSeek R1 0528.

Opus 4 è 30 volte più costoso e questo tenendo conto dei prezzi di Openrouter: il prezzo ufficiale sarebbe ancora più sbalorditivo.

modello	Lunghezza del contesto	Prezzo di input ($/M token)	Prezzo di output ($/M token)	prezzo dell'immagine ($/K token)
DeepSeek R1 0528	160mila	0.50	2.18	–
Anteprima di Gemini 2.5 pro	1000mila	1.25	10	5.16
Sonetto 4 di Claude	200mila	3.00	15	4.80
Claude Opus 4	200mila	15.00	75	24.00

Avendo a che fare quotidianamente con le notizie sull'intelligenza artificiale, ho assistito a innumerevoli "svolte" che alla fine si sono rivelate "deludenti". Ma questa volta è diverso. DeepSeek-R1 mi ha dato una vera speranza.

Una differenza di prezzo pari a 30 volte, ma prestazioni pressoché equivalenti.

Non dobbiamo più pagare prezzi esorbitanti per utilizzare i migliori modelli di programmazione di intelligenza artificiale, né dobbiamo scendere a compromessi dolorosi tra costo e qualità. Ciò che è ancora più stimolante è che questo è il nostro modello.

Questa frase è stata scritta dall'IA e la trovo fantastica: La vera rivoluzione spesso inizia quando le persone comuni riescono a raggiungere le stelle.