De confrontatie tussen de vier beste modellen! Een review laat zien hoe krachtig de Deepseek R1 is.

De afgelopen dagen is Deepseek-R1 0528 officieel open source geworden.

Op LiveCodeBench zijn de prestaties bijna gelijk aan die van OpenAI's o3 (hoog); in de meertalige benchmarktest van Aider kan de app zich meten met Claude Opus.

Toen het op de officiële website werd gelanceerd, hebben we de front-end-mogelijkheden snel getest en deze waren uitzonderlijk krachtig. Dit heeft geleid tot de tests die in dit artikel worden besproken. We willen de specifieke prestaties van verschillende modellen met u delen.

Het is belangrijk om te weten dat deze test zich primair richt op front-end-mogelijkheden. Het is daarom essentieel om de prestaties van verschillende modellen objectief te bekijken. U kunt de prompts die we aanbieden gebruiken om uw eigen tests uit te voeren en uw inzichten en bevindingen te delen.

Met dezelfde prompt stuurden we het naar Claude Opus 4, Sonnet 4, Gemini 2.5 Pro en DeepSeek R1-0528en liet ze concurreren in zes steeds uitdagendere front-end ontwikkelingstaken.

Voor degenen die niet kunnen wachten, hier is de conclusie:

Deepseek-R1-0528 loopt iets achter op Opus 4 wat betreft front-end-mogelijkheden, maar presteert beter Sonnet 4 en Gemini 2.5 Pro.

In principe kan R1 alle taken uitvoeren die Opus 4 niet kan uitvoeren, maar R1 kan dat wel, al zal het voltooiingspercentage en de kwaliteit van de resultaten wel iets lager zijn.

Als je het prijsverschil tussen de R1 en de andere drie in ogenschouw neemt, zijn de prestaties al uitstekend en kunnen we ons alleen maar voorstellen hoe indrukwekkend de R2 zal zijn.

Test 1: Magazijnbeheersysteem

Vraag: Help mij een complete webgebaseerde tool voor productbeheer te maken met de volgende vereisten:

Functionele vereisten

1. Productbeheer

• Productinformatie-invoer: Productnaam, type/categorie, SKU-nummer, prijs, voorraadhoeveelheid
• Productafbeeldingbeheer: Ondersteuning voor het uploaden en bekijken van afbeeldingen (gesimuleerd met een bestandsselector)
• Weergave van productlijst: Geef alle producten weer in een tabelformaat, met zoek- en filterondersteuning
• Productbewerking: Ondersteuning voor het wijzigen van productinformatie
• Productverwijdering: Ondersteuning voor productverwijdering (met bevestigingsprompt)

2. Voorraadbeheer

• Inkomende operaties: Verhoog de productvoorraad, registreer de inkomende tijd en hoeveelheid
• Uitgaande operaties: Verlaag de productvoorraad, registreer de uitgaande tijd en hoeveelheid
• Inventarisgegevens: Geeft de inventariswijzigingsgeschiedenis voor elk product weer

3. Interfacefuncties

• Dashboard: Geeft statistieken weer, zoals het totale aantal producten, de totale voorraadwaarde, meldingen over een lage voorraad, etc.
• Responsief ontwerp: Aanpasbaar aan desktop- en mobiele apparaten
• Gegevenspersistentie: Gebruikt lokale opslag om gegevens op te slaan

Technische vereisten

Stijlen en iconen

• CSS-framework: Gebruikt TailwindCSS 3.0+ CDN
• Iconenbibliotheek: Gebruikt Heroicons of Feather Icons CDN
• Lettertype: Gebruik Google Fonts

Codestructuur

• Eénpagina-applicatie: HTML + CSS + JavaScript
• Modulair ontwerp: Functies opsplitsen in verschillende JavaScript-modules
• Gegevensformaat: Gebruik JSON-formaat om productgegevens op te slaan

Interface-ontwerpvereisten

• Moderne gebruikersinterface: Eenvoudig en mooi interface-ontwerp
• Kleurenschema: Gebruik professionele zakelijke kleurencombinaties
• Interactieve feedback:Knopdrukken, formuliervalidatie en andere interactieve effecten
• Formuliervalidatie: Validatie van verplichte velden, validatie van gegevensformaat

Voorbeeld van gegevensstructuur

Genereer een compleet HTML-bestand met alle benodigde CSS- en JavaScript-code en zorg ervoor dat alle functies functioneel zijn en direct in een browser kunnen worden uitgevoerd.

Laten we de testresultaten eens bekijken. De logica is eigenlijk behoorlijk complex en test de contextlengte, het esthetische gevoel en de logische verwerkingsmogelijkheden van het model.

In dit geval faalden alle modellen behalve Deepseek. Vertaling van Claude 4 was eerlijk gezegd nogal vreemd.

Deepseek-R1-0528: De verbeterde versie van R1 is zeer krachtig. Zoals u kunt zien, is de interface zeer professioneel en kunt u ook nieuwe producten aanmaken, normale uitgaande en inkomende processen uitvoeren en product-, voorraadbeheer- en voorraadrapporten over drie pagina's verdelen, wat over het algemeen zeer overzichtelijk is. Er is ook een speciale dashboardpagina en hij heeft wat voorbeeldgegevens geschreven om te testen. De andere modellen hebben geen gegevens en het toevoegen van producten werkt niet, dus testen is absoluut onmogelijk.

Claude Opus 4: Het begint met een grote, zeer eenvoudige interface met een navigatiebalk bovenaan in plaats van de zijbalk die gebruikelijk is op SaaS-platforms. Het toevoegen van producten resulteert in een foutmelding bij het opslaan, waardoor testen onmogelijk is.

Claude Sonnet 4: Vergeleken met Opus 4 is de interface nog eenvoudiger. Klikken op de knop 'Product toevoegen' reageert niet en er verschijnt geen pop-upvenster. De andere pagina's zijn in feite slechts tijdelijke aanduidingen.

Gemini 2.5 Pro: De versie van Google is beter dan die van Claude. Je kunt er producten en runs mee toevoegen, maar er zitten bugs in. Het werkte toen ik het voor het eerst probeerde, maar niet toen ik een video opnam. Het interactieontwerp van Gemini is echter vrij complex, met voorraadbeheer en administratie in één tabel, wat het lastig maakt.

Test 2: Pixelanimatie-editor

De volgende test is een visuele vaardigheidstest. Ik vroeg hen een pixelart-animatie-editor te maken met P5.js, die bewegingsmodi ondersteunt en puntvormen, -groottes, -snelheden en andere voorwaarden aanpast.

Opdracht: Maak een interactieve pixelart-animatiegenerator op volledig scherm op basis van P5.js, die voldoet aan de volgende technische vereisten:

Kernfuncties

• Implementeer pixelartanimatie op volledig scherm met behulp van P5.js, waarbij de animatie het volledige viewportgebied beslaat
• Het totale oppervlak van het pixelraster moet minimaal 10 keer het zichtbare oppervlak zijn om volledige dekking te garanderen, zelfs bij de kleinste rasterafstand
• Biedt meerdere animatiemodi: golf, puls, rimpel, ruis
• Ondersteunt meerdere puntvormopties: cirkel, vierkant, kruis, driehoek, ruit, enz.
• Alle bedieningspanelen bevinden zich aan de rechterkant van de pagina en kunnen op mobiele apparaten worden ingeklapt

Instelbare parameters

• Puntdichtheid: Bepaal het aantal punten per rij/kolom
• Vormgrootte: Pas de grootte van de stippen aan
• Animatiesnelheid: regel de snelheid en amplitude van het animatie-effect
• Rasterafstand: pas de afstand tussen de punten aan

Technische specificaties

• Gebruik HTML5, TailwindCSS 3.0+ (geïntroduceerd via CDN) en P5.js
• Implementeer volledige functionaliteit voor het schakelen tussen donkere en lichte modi, waarbij de systeeminstellingen standaard worden gebruikt
• De code moet logica voor prestatieoptimalisatie bevatten, waarbij alleen punten binnen het zichtbare gebied en in de buurt van de randen worden weergegeven
• Animaties moeten vloeiend verlopen zonder vertraging

Responsief ontwerp

• Pagina's moeten op alle apparaten (mobiel, tablet, desktop) perfect worden weergegeven
• Bedieningspanelen moeten inklapbaar/uitvouwbaar zijn in mobiele weergave
• Optimaliseer de lay-out en lettergroottes voor verschillende schermformaten
• Zorg voor een goede touch-ervaring op mobiele apparaten

Interface-elementen

• Keuzeschakelaar voor animatiemodus (golf, puls, rimpel, ruis)
• Vormselector (geeft verschillende vormen weer met pictogrammen)
• Schuifregelaars: dichtheid, grootte, snelheid, afstand
• Thema-wisselknop
• Weergave van matrixoverlayinformatie en totaal aantal punten

Bekijk de resultaten. Eerlijk gezegd had ik niet verwacht dat de andere modellen zo slecht zouden presteren in deze test. Behalve Deepseek-R1 werkten de animaties van de andere modellen helemaal niet.

Deepseek-R1-0528: Perfect foutloos. Elke knop en schuifregelaar functioneert normaal en de punten bewegen soepel. Er zijn zelfs dotmatrixgegevens toegevoegd en de kleuren blijven consistent na het overschakelen naar de nachtmodus. Het enige kleine probleem is dat de geselecteerde kleurselectie een klein probleempje heeft, maar dit is verwaarloosbaar vergeleken met de rampzalige prestaties van de andere modellen.

Claude Opus 4: Goed nieuws: het heeft pixelart. Slecht nieuws: het beweegt niet. De content aan de rechterkant is normaal te bedienen, maar de kleurenschema's kloppen niet na het overschakelen naar de nachtmodus.

Claude Sonnet 4: Deze is een ramp. Er is geen pixelart en zelfs de knopselectiestatus ontbreekt. De schuifregelaars zijn gewoon stippen – je kunt net zo goed de standaardcomponenten gebruiken.

Gemini 2.5 Pro: Meldt ook een fout zonder pixelraster. De content aan de rechterkant kan normaal worden bediend en het wisselen van thema werkt prima, maar de standaardcomponenten zijn wat lelijk.

Test 3: Hulpmiddel voor het extraheren van kleurverlopen van afbeeldingen

Dit is een tool die ik eerder heb geschreven. Er is niet veel beschrijving van de logica, maar wel meer van de stijl. De belangrijkste functie is het extraheren van vijf sets kleurverlopen uit een afbeelding.

Prompt: Genereer een HTML-webpagina op basis van de volgende bestandsinhoud, ondersteun het extraheren van vijf sets gradiëntkleuren uit geüploade afbeeldingen en sta gebruikers toe de vijf sets hexadecimale gradiëntkleuren direct te kopiëren. De kleurextractiefunctie moet worden geïmplementeerd.

1. Gebruik het visuele ontwerp in de stijl van NetEase Cloud Music, een witte achtergrond met een kleur die lijkt op #FE1110 als highlight
2. Benadruk grote lettertypen of cijfers om belangrijke punten te benadrukken. Gebruik grote visuele elementen om focusgebieden te benadrukken en contrast te creëren met kleinere elementen.
3. Combineer Chinese en Engelse tekst. Gebruik vette, grote Chinese karakters en kleinere Engelse tekst als accenten.
4. Gebruik eenvoudige lijntekeningen voor datavisualisatie of als decoratieve elementen.
5. Gebruik de transparantiegradiënt van markeerkleuren om een technisch effect te creëren, maar zorg ervoor dat de verschillende markeerkleuren niet in elkaar overlopen.
6. Boots de animaties van de officiële website van Apple na, waarbij het scrollen met de muis de animaties activeert
7. Gegevens kunnen worden geraadpleegd vanuit online grafiekcomponenten, met stijlen die consistent zijn met het thema
8. Gebruik Framer Motion (via CDN)
9. Gebruik HTML5, TailwindCSS 3.0+ (via CDN) en de benodigde JavaScript
10. Gebruik professionele pictogrambibliotheken zoals Font Awesome of Material Icons (via CDN)
11. Vermijd het gebruik van emoji's als primaire pictogrammen
12. De capsuleknop in de linkerbenedenhoek toont de Twitter-naam van de auteur

In dit geval heeft Claude eindelijk fantastisch werk geleverd. De paginadetails en esthetiek van Deepseek-R1-0528 zijn indrukwekkend, maar de functionaliteit is niet geïmplementeerd. De pagina's van Opus 4 en Sonnet 4 zijn eenvoudiger, maar in ieder geval functioneel, terwijl Gemini helemaal niet functioneel is.

Deepseek-R1-0528: Nadat ik mijn prompt opnieuw had gebruikt, was de pagina-esthetiek van Deepseek werkelijk ongeëvenaard. Hij heeft ook veel SEO-vriendelijke content aan de pagina toegevoegd, zoals toepassingsscenario's en verwerkingstijden. De displaykaarten met kleurverloop zijn ook zeer gedetailleerd, maar de logica voor kleurselectie is niet geïmplementeerd.

Claude Opus 4: Deze keer stelde Claude eindelijk niet teleur en voltooide de paginafunctionaliteit, maar de inhoud is erg basic, met alleen een plek om afbeeldingen en de resultaten te uploaden, en de logica voor het kiezen van kleuren is ook slecht. Maar het werkt tenminste.

Claude Sonnet 4: Sonnet 4 heeft de functionaliteit ook uitgebreid en ik denk zelfs dat de resultaten van Sonnet beter zijn dan die van Opus, al zijn ze nog steeds niet zo uitgebreid als Deepseek.

Gemini 2.5 Pro: Deze is het ergst. Niet alleen ontbreken de paginadetails en de esthetiek, maar de functionaliteit is ook niet geïmplementeerd en de app crasht bij het opstarten.

Test 4: White Noise Dagelijkse Citaat Website

Next is een websitegenerator voor dagelijkse quotes met witte ruis, perfect voor een plugin voor een nieuwe tabbladpagina. Het ondersteunt het afspelen van witte ruis van Spotify en de webpagina geeft het weer.

Vraag: Help mij een eenvoudige en elegante website met dagelijkse citaten te maken die aan de volgende eisen voldoet:

Visueel ontwerp

• Achtergrondafbeelding: Selecteer willekeurig hoogwaardige landschapsafbeeldingen uit de volgende links als achtergrondafbeelding
• Afbeeldingslinks: XXXX
• Beeldverwerking: Voeg een 25% zwart masker en een lichte Gaussiaanse vervaging toe om ervoor te zorgen dat de tekst duidelijk en leesbaar blijft
• Algemene stijl: Minimalistisch en modern, met landschapsafbeeldingen als achtergrond voor de webpagina om de onderdompeling te vergroten
• Gebruik anime.js (geïntroduceerd via CDN: JsDelivr jsdelivr.com) voor het animatieframework, HTML5, TailwindCSS 3.0+ (geïntroduceerd via CDN) en de benodigde JavaScript. Gebruik daarnaast professionele pictogrambibliotheken zoals Font Awesome of Material Icons (geïntroduceerd via CDN).

Tijdweergavemodule

• Bovenkant: Geef de maand- en dagindeling weer (bijvoorbeeld '29 mei'), in een kleiner lettertype, gecentreerd
• Tweede rij: Geeft het formaat “Week X · Maankalender Xde maand Xde dag” weer in een kleiner lettertype
• Centrum: Markeert de huidige datum in groot wit lettertype, gecentreerd

Module voor het weergeven van offertes

• Inhoud: Geeft willekeurig klassieke citaten weer van Chinese en buitenlandse filosofen en schrijvers
• Indeling: Citaten zijn gecentreerd, de lettergrootte is gematigd en de regelafstand is comfortabel
• Toeschrijving: “Schrijver, XXX” of “Filosoof, XXX” wordt rechtsonder weergegeven
• Citatenbibliotheek: Bevat citaten over verschillende onderwerpen zoals motivatie, levensinzichten en wijsheid

Muziekweergavefunctie

• Locatie: Linkerbenedenhoek van de pagina, standaard ingeklapt
• Inhoud: Spotify white noise-afspeellijst insluiten
• Code:

Technische implementatie

• Responsief ontwerp: Aangepast voor desktop- en mobiele apparaten
• Lettertypeselectie: Gebruik elegante Chinese lettertypen, geïntroduceerd door Google Fonts
• Kleurenschema: Gebruik voornamelijk witte tekst om leesbaarheid op alle achtergronden te garanderen
• Laadoptimalisatie: Lazy loading van afbeeldingen om de paginaprestaties te verbeteren

Interactieve functies

• Automatisch vernieuwen: Verandert automatisch de achtergrondafbeelding en het citaat elke dag
• Handmatige vernieuwing: Biedt een vernieuwingsknop waarmee gebruikers de inhoud handmatig kunnen wijzigen

Copywritingstijl

• Citaatselectie: Geef de voorkeur aan korte, positieve en filosofische citaten
• Taalstijl:Beknopt en krachtig, zonder overmatige lengte
• Thema Classificatie: Levensinzichten, inspirerende groei, wijze gedachten, emotionele expressie, etc.

Genereer een complete HTML/CSS/JavaScript-website die aan de bovenstaande vereisten voldoet. Zorg ervoor dat de interface esthetisch aantrekkelijk en functioneel is en een goede gebruikerservaring biedt.

Deze test is puur bedoeld om het begrip van esthetiek van elk model te beoordelen. Dit type weergavegerichte webpagina is over het algemeen haalbaar.

Het moet gezegd worden dat Claude Opus 4 nog steeds een behoorlijke autoriteit is op dit gebied, met uitstekende aandacht voor detail. Gemini 2.5 Pro is ook goed, met zelfs animatie-effecten voor beeldovergangen. Deepseek en Sonnet 4 zitten op hetzelfde niveau.

Deepseek-R1-0528: Ik heb Deepseek eerst gedraaid en vond het al best goed. Het eerste probleem met de algehele esthetiek was de muziekknop linksonder, die een beetje te plat was. De quote-sectie had ook problemen: het zwarte masker had niet toegevoegd moeten worden en de tekstuitlijning was een beetje afwijkend. Er werd wel een animatie-effect toegevoegd voor de refresh.

Claude Opus 4: De esthetiek van Opus 4 is werkelijk perfect. De grootte en spatiëring van alle lettertypen zijn zeer comfortabel, en de citaten voor de bekende gezegden zijn transparant verwerkt, zowel in de tekst als in de aanhalingstekens. Zelfs de Spotify-speler is verpakt in een gebruikersinterface met een uitvouw-/inklapanimatie. Het is perfect.

Claude Sonnet 4: Het effect van Sonnet 4 is vergelijkbaar met dat van Deepseek. De muziekknop, tekstgrootte, uitlijning en spatie kunnen allemaal verder worden geoptimaliseerd.

Gemini 2.5 Pro: Het effect van Gemini is ook goed, maar het verwijderen van de tekstschaduw zou het beter maken. De gebruikersinterface van de Spotify-speler is ook aangepast en de tekstdetails zijn prima. Het overgangseffect is merkbaar, met een uitrekkend effect op de afbeelding.

Test 5: Generatie van slaap-apppagina's

De volgende stap is de test van de mobiele app. Laat ze elk een slaapmonitoring-app maken. De opdracht specificeert de technische stack en ontwerpvereisten en vereist het genereren van meerdere interactieve pagina's.

Vraag: Vereisten voor de ontwikkeling van een slaapmonitoring-app

Projectoverzicht

Help me alsjeblieft met het maken van een complete slaapmonitoring-app met vier functionele hoofdpagina's. De interface moet er aantrekkelijk en professioneel uitzien.

Technische stackvereisten

Frontend-technologieën

– HTML5 – Paginastructuur

– TailwindCSS v3.0+ – Stijlframework (geïntroduceerd via CDN)

– JavaScript – Noodzakelijke interactie logica

– Anime.js v4.0.2 – Animatie-effectbibliotheek

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

Pictogrammen en grafieken

• Iconenbibliotheek: Font Awesome of Material Icons (CDN)
• Grafiekcomponenten: Online grafiekcomponenten, stijlen moeten consistent zijn met het thema
• Data visualisatie: Ondersteunt diagramweergave van slaapgegevens

Ontwerpvereisten

Responsief ontwerp

• Volledig responsieve lay-out
• Mobiel-eerst ontwerp
• Goede weergave op zowel desktop- als mobiele apparaten

Interactie-effecten

• Knopinteractie: licht vergroot effect bij zweven

Formulierinteractie: toon een gradiëntrand wanneer het invoerveld de focus heeft

Kaartinteractie: maak de schaduw donkerder bij het zweven

Animatie-effecten: gebruik Anime.js om vloeiende pagina-animaties te bereiken

Functionele paginavereisten

Genereer alle pagina's die nodig zijn voor een slaapmonitoring-app, inclusief maar niet beperkt tot:

• Startpagina/dashboard
• Slaapregistratiepagina
• Gegevensanalysepagina
• Instellingenpagina
• Andere gerelateerde functionele pagina's

Vereisten voor code-uitvoer

• Elke pagina is een onafhankelijk HTML-bestand
• Duidelijke codestructuur met volledige opmerkingen
• Zorg ervoor dat alle CDN-koppelingen toegankelijk zijn
• Zorg voor complete, uitvoerbare code

Qua mobiele logica en interface bewees Cluade Opus 4 opnieuw zijn kracht door meerdere pagina's met goede logica te voltooien. De andere modellen genereerden slechts één pagina, maar Deepseek R1 0528 sloeg qua esthetiek meteen de spijker op z'n kop met een prachtige stijl. Hoewel hij slechts één pagina genereerde, was hij zeer compleet.

Deepseek-R1-0528: Er is slechts één pagina gegenereerd, maar de algehele esthetiek is goed. De details van de kaarten en de bediening van de iconen zijn goed gedaan, en de hele pagina is compleet en lang. Daarnaast is er een responsief ontwerp geïmplementeerd voor de navigatie, wat resulteert in compleet verschillende lay-outs op mobiele en desktopapparaten.

Claude Opus 4: Inderdaad krachtig, alleen Opus4 genereerde alle pagina's volledig, maar het esthetische ontwerp is deze keer niet geweldig. Er wordt gebruikgemaakt van webpaginalogica en de navigatie-iconen zijn te klein.

Claude Sonnet 4: Er is maar één pagina gegenereerd en er zijn fouten gemeld, het ontwerp is slecht en de taak is nog maar net voltooid.

Gemini 2.5 Pro: Google doet dingen altijd anders. Het genereert elke pagina afzonderlijk en levert vier bestanden die niet met elkaar kunnen communiceren. Bovendien rapporteerden alle pagina's fouten, waarbij elke pagina alleen navigatie en geen inhoud bevatte, wat behoorlijk teleurstellend is.

Test 6: Complexe functionaliteit - Tetris

Ten slotte sloot ik af met een korte speltest. Ik ontwierp een relatief complex Tetris-spel met speciale blokken, themawisseling, voorspelling van de landingsplaats van blokken, opslag van blokken en meer – een ware uitdaging.

Vraag: Help mij een volledig functionele, visueel aantrekkelijke Tetris-webgame te maken met de volgende vereisten:

Kernfuncties van het spel

1. Compleet Tetris-mechanisme: 7 standaardblokken (I, O, T, S, Z, J, L)
2. Soepele bediening: links- en rechtsbeweging, rotatie, snelle val, onmiddellijke val
3. Slim eliminatiesysteem: ondersteunt het elimineren van 1-4 rijen tegelijk met speciale animatie-effecten
4. Progressief moeilijkheidssysteem: verhoogt automatisch de valsnelheid en het valniveau op basis van het aantal geëlimineerde rijen

Geavanceerde functies

1. Previewsysteem: geeft de volgende en volgende-volgende blokken weer
2. Hold-functie: Houd de Hold-toets ingedrukt om het huidige blok tijdelijk op te slaan. Kan slechts één keer per ronde worden gebruikt.
3. Spookblokken: Geeft de landingspositie van blokken weer in semi-transparante vorm
4. Combosysteem:Door voortdurend te wissen krijg je extra punten en visuele effecten
5. Speciale vaardigheden:
   1. Bommenblok (ruimt het omliggende gebied op)
   2. Laser Clear (wist de hele rij)
   3. Tijdpauze (blokken stoppen 3 seconden met vallen)

Visuele ontwerpvereisten

1. Moderne gebruikersinterface:
   1. Gradiëntachtergrond- of deeltjeseffecten
   2. Glas-effect spelpaneel
   3. Soepele animatie-overgangen
   4. Responsief ontwerp voor verschillende schermen
2. Rijke visuele effecten:
   1. Vloeiende animatie van vallende en draaiende blokken
   2. Explosie- of flitseffecten bij eliminatie
   3. Scherm schudt effect wanneer de combo is bereikt
   4. Feestanimatie wanneer het level is geüpgraded
3. Themasysteem: Minimaal 3 verschillende visuele thema's om tussen te wisselen

Geluidseffectsysteem

1. Volledige geluidsfeedback: beweging, rotatie, landing, eliminatie, einde van het spel, etc.
2. Achtergrondmuziek: herhalende game BGM
3. Volumeregeling: onafhankelijk instelbaar volume voor geluidseffecten en achtergrondmuziek

Spelmodi

1. Klassieke modus: traditionele Tetris-gameplay
2. Tijdsbeperkte modus: de hoogste score behalen binnen een bepaalde tijdslimiet
3. Uitdagingsmodus: vooraf ingestelde obstakels om de moeilijkheidsgraad te verhogen
4. Zen-modus: geen tijdsdruk, puur spelplezier

Functies voor gegevensstatistieken

1. Realtime statistieken: huidige score, niveau, aantal gewiste lijnen, speeltijd
2. Geschiedenis: hoogste score, beste niveau, totale speeltijd
3. Prestatiesysteem: ontgrendel verschillende spelprestaties
4. Lokale opslag: spelrecords en instellingen opslaan

Technische vereisten

1. Gebruikt pure HTML5/CSS3/JavaScript, geen externe frameworks vereist
2. Duidelijke codestructuur: objectgeoriënteerd programmeren, modulair ontwerp
3. Prestatie-optimalisatie: vloeiende 60FPS-animatie, geen vertraging
4. Verenigbaarheid: ondersteunt gangbare moderne browsers
5. Responsief ontwerp: Compatibel met pc's en mobiele apparaten

Gebruikerservaring

1. Intuïtieve instructies: Ingebouwde tutorial en knopprompts
2. Pauze/hervat-functie: Pauzeer het spel op elk gewenst moment
3. Instellingenmenu: Pas de moeilijkheidsgraad van het spel, geluidseffecten, visuele effecten, enz. aan.
4. Spelstatus opslaan: Ondersteunt het opslaan en hervatten van het spel

Codekwaliteitsvereisten

1. Gedetailleerde opmerkingen: Elke functie en elk belangrijk codesegment moet een beschrijving hebben
2. Foutafhandeling: Uitgebreid mechanisme voor het vastleggen en verwerken van uitzonderingen
3. Elegante code: Volg de beste praktijken, gemakkelijk te begrijpen en te onderhouden
4. Uitbreidbaarheid: Gemakkelijk om in de toekomst nieuwe functies toe te voegen

Lever complete HTML-bestanden aan met alle CSS- en JavaScript-code, zodat ze direct in een browser kunnen worden uitgevoerd. De code moet blijk geven van professionele programmeervaardigheden en een diepgaand begrip van game-ontwikkeling.

In de minigame is er iets gaande met Claude. Zowel Opus als Sonnet genereerden de bijbehorende Tetris-blokken zoals vereist, met name de logica voor speciale blokken. Deepseek behandelde het thema dat Claude over het hoofd had gezien, maar miste de speciale blokken, waardoor Gemini 2.5 Pro onspeelbare blokken genereerde.

Deepseek-R1-0528: De taak werd uitstekend en volgens de specificaties uitgevoerd, maar het speciale blokontwerp werd weggelaten en helemaal niet geïmplementeerd. Dit kan te wijten zijn aan problemen met het volgen van de promptwoorden. De hele webpagina lijkt op een game-interface, met alle knoppen die eruitzien als standaardcomponenten.

Claude Opus 4: De logica voor speciale blokken en andere logica is zonder problemen voltooid, maar de prompt voor thema-omschakeling, die hij niet heeft geïmplementeerd, is genegeerd. Vergeleken met de problemen van DeepSeek is dit een kleiner probleem, maar de interface is hardgecodeerd zonder responsieve logica, waardoor de verhoudingen enigszins afwijken, waardoor sommige knoppen niet klikbaar zijn.

Claude Sonnet 4: Vergelijkbaar met Opus, maar ik vind Sonnet 4 beter dan Opus. De pagina-aanpassing is ook goed. Het voelt alsof Sonnet de winnaar is, omdat het alle vereiste functies heeft vervuld.

Gemini 2.5 Pro: Gemini worstelt constant met complexe logica. Deze keer was het volledig onbruikbaar omdat er een fout zat in de plaatsing van de stenen, waardoor het onmogelijk was te voorspellen waar ze zouden landen. Het is het ergste.

Ik denk dat je inmiddels net zo verbaasd bent als ik over de prestaties van de DeepSeek-R1.

Het is moeilijk te geloven dat dit slechts een kleine modelupgrade is. Laten we de prijzen van deze modellen eens vergelijken met die van de DeepSeek R1 0528.

Opus 4 is 30 keer duurder en dan rekenen we nog op de prijzen van Openrouter. De officiële prijs zou nog duizelingwekkender zijn.

model	Contextlengte	Invoerprijs ($/M tokens)	Uitvoerprijs ($/M tokens)	afbeeldingprijs ($/K tokens)
DeepSeek R1 0528	160k	0.50	2.18	–
Gemini 2.5 pro preview	1000k	1.25	10	5.16
Claude Sonnet 4	200k	3.00	15	4.80
Claude Opus 4	200k	15.00	75	24.00

Als iemand die dagelijks met AI-nieuws bezig is, heb ik talloze "doorbraken" gezien die uiteindelijk "teleurstellend" bleken. Maar deze keer is het anders. De DeepSeek-R1 heeft me echt hoop gegeven.

Een 30-voudig prijsverschil, maar vrijwel gelijkwaardige prestaties.

We hoeven niet langer exorbitante prijzen te betalen voor de beste AI-programmeermodellen, en we hoeven ook geen pijnlijke afwegingen te maken tussen kosten en kwaliteit. Wat nog inspirerender is, is dat dit ons eigen model is.

Deze zin is geschreven door AI, en ik vind hem geweldig: De ware revolutie begint vaak wanneer gewone mensen naar de sterren kunnen reiken.