A négy legjobb modell leszámolása! Egy teszt bemutatja, milyen erős a Deepseek R1

Az elmúlt napokban a Deepseek-R1 0528 hivatalosan is nyílt forráskódúvá vált.

A LiveCodeBench-en a teljesítménye majdnem megegyezik az OpenAI o3-asával (magas); az Aider többnyelvű benchmark tesztjében pedig Claude Opusszal vetekszik.

Amikor megjelent a hivatalos weboldalon, gyorsan teszteltük a front-end képességeit, és kivételesen erősnek találtuk őket, ami a cikkben tárgyalt tesztekhez vezetett. Célunk, hogy megosszuk veletek a különböző modellek konkrét teljesítményét.

Fontos megjegyezni, hogy ez a teszt elsősorban a felhasználói felület képességeire összpontosít, ezért elengedhetetlen a különböző modellek teljesítményének objektív vizsgálata. Az általunk biztosított feladatokat felhasználhatod saját tesztek elvégzéséhez, és megoszthatod a meglátásaidat és eredményeidet.

Ugyanezzel a prompttal elküldtük Claude Opus 4-nek, Sonnet 4-nek, Gemini 2.5 Pro-nak és DeepSeek R1-0528, és hat egyre nagyobb kihívást jelentő front-end fejlesztési feladatban versenyeztetette őket.

Azoknak, akik alig várják, íme a konklúzió:

A Deepseek-R1-0528 front-end képességeiben kissé elmarad az Opus 4-től, de felülmúlja. Szonett 4 és a Gemini 2.5 Pro.

Alapvetően minden olyan feladatot, amit az Opus el tud végezni, az R1 is el tud végezni, sőt, még azokat a feladatokat is, amiket az Opus 4 nem tud elvégezni, az R1 is képes kezelni, bár valamivel alacsonyabb befejezési aránnyal és eredményminőséggel.

Figyelembe véve az R1 és a másik három közötti árkülönbséget, ez a teljesítmény már most is kiváló, és csak elképzelni tudjuk, mennyire lenyűgöző lesz az R2.

1. teszt: Raktárkezelő rendszer

Kérdés: Kérem, segítsen nekem létrehozni egy teljes web-alapú termékkezelő eszközt a következő követelményeknek megfelelően:

Funkcionális követelmények

1. Termékmenedzsment

• Termékinformációk beviteleTermék neve, típus/kategória, cikkszám, ár, készletmennyiség
• Termékkép-kezelés: Képfeltöltés és előnézet támogatása (fájlválasztóval szimulálva)
• Terméklista megjelenítése: Az összes termék megjelenítése táblázatos formátumban, keresési és szűrési támogatással
• Termékszerkesztés: Termékinformációk módosításának támogatása
• Termék törlése: Termék törlésének támogatása (megerősítési kéréssel)

2. Készletgazdálkodás

• Bejövő műveletek: Növelje a termékkészlet mennyiségét, rögzítse a beérkezési időt és mennyiséget
• Kimenő műveletek: Csökkentse a termékkészlet mennyiségét, rögzítse a kiszállítás idejét és mennyiségét
• Leltárnyilvántartás: Megjeleníti az egyes termékek készletváltozási előzményeit

3. Interfész jellemzői

• Műszerfal: Statisztikákat jelenít meg, például a termékek teljes számát, a teljes készletértéket, az alacsony készletszintre vonatkozó riasztásokat stb.
• Reszponzív dizájnAsztali és mobil eszközökhöz is adaptálható
• Adatmegőrzés: A localStorage tárhelyet használja az adatok mentéséhez

Műszaki követelmények

Stílusok és ikonok

• CSS keretrendszerTailwindCSS 3.0+ CDN-t használ
• IkonkönyvtárHősök vagy Toll ikonokat használ CDN-en
• BetűtípusHasználj Google Betűtípusokat

Kódszerkezet

• Egyoldalas jelentkezésHTML + CSS + JavaScript
• Moduláris kialakítás: Bontsd le a függvényeket különböző JavaScript modulokra
• Adatformátum: JSON formátum használata a termékadatok tárolására

Interfésztervezési követelmények

• Modern felhasználói felületEgyszerű és gyönyörű felületkialakítás
• SzínsémaHasználjon professzionális üzleti színkombinációkat
• Interaktív visszajelzésGombkattintások, űrlapérvényesítés és egyéb interaktív effektek
• ŰrlapérvényesítésKötelező mezőérvényesítés, adatformátum-érvényesítés

Adatszerkezeti példa

Kérjük, generáljon egy teljes HTML-fájlt, amely tartalmazza az összes szükséges CSS- és JavaScript-kódot, biztosítva, hogy minden funkció működőképes és közvetlenül futtatható legyen a böngészőben.

Vessünk egy pillantást a teszt eredményeire. A logika valójában meglehetősen összetett, a modell kontextushosszát, esztétikai érzékét és logikai feldolgozási képességeit teszteli.

Ebben az esetben a Deepseek kivételével az összes modell kudarcot vallott. Claude 4 fordítása eléggé félresikerült, őszintén szólva.

Deepseek-R1-0528: Az R1 frissített verziója nagyon hatékony. Amint látható, a felület nagyon professzionális, és új termékeket is létrehozhatsz, normál kimenő és bejövő műveleteket végezhetsz, valamint a termék-, készletgazdálkodási és készletjelentéseket három oldalra oszthatod, ami összességében nagyon áttekinthető. Van egy dedikált irányítópult oldal is, és írt néhány minta adatot tesztelésre. A többi modellhez nincsenek adatok, és a termékek hozzáadása sem működik, így a tesztelés teljesen lehetetlen.

Claude Opus 4: Egy nagy, nagyon egyszerű felülettel kezdődik, a SaaS platformokon megszokott oldalsáv helyett egy felső navigációs sávot használ. A termékek hozzáadása mentéskor hibát okoz, így a tesztelés lehetetlenné válik.

Claude Szonett 4: Az Opus 4-hez képest a kezelőfelület még alapvetőbb. A „Termék hozzáadása” gombra kattintva nem történik semmi, és nem jelenik meg felugró űrlap. A többi oldal lényegében csak helykitöltő.

Gemini 2.5 Pro: A Google verziója jobb, mint Claude-é. Lehetővé teszi termékek és futási mennyiségek hozzáadását, de vannak hibák. Amikor először próbáltam, működött, de amikor videót rögzítettem, nem. A Gemini interakciós kialakítása azonban meglehetősen összetett, a készletkezelés és a nyilvántartás egyetlen táblázatban történik, ami némi nehézséget okoz.

2. teszt: Pixel animáció szerkesztő

Következőként a vizuális képességeket tesztelték. Arra kértem őket, hogy készítsenek egy pixel art animációszerkesztőt P5.js használatával, amely támogatja a mozgásmódokat, valamint beállítja a pontok alakját, méretét, sebességét és egyéb feltételeket.

Feladat: Hozz létre egy teljes képernyős interaktív pixel art animációgenerátort a P5.js alapján, amely megfelel a következő technikai követelményeknek:

Alapvető jellemzők

• Teljes képernyős pixel art animáció implementálása P5.js használatával, a teljes nézetablak területét lefedve.
• A pixelrács teljes területének legalább tízszeresének kell lennie a látható területnek, hogy a legkisebb rácstávolság esetén is teljes lefedettséget biztosítson.
• Több animációs módot biztosít: Hullám, Pulzus, Fodrozódás, Zaj
• Több pontalakzat támogatása: kör, négyzet, kereszt, háromszög, rombusz stb.
• Minden vezérlőpanel az oldal jobb oldalán található, és mobileszközökön az aljára csukható.

Állítható paraméterek

• Pontsűrűség: Szabályozza a soronként/oszloponkénti pontok számát
• Alakzat mérete: Állítsa be a pontok méretét
• Animáció sebessége: Szabályozza az animációs effektus sebességét és amplitúdóját
• Rácstávolság: Állítsa be a pontok közötti távolságot

Műszaki adatok

• Használj HTML5-öt, TailwindCSS 3.0+-t (CDN-en keresztül bevezetve) és P5.js-t
• Teljes sötét/világos módváltási funkció megvalósítása, a rendszerbeállítások alapértelmezés szerinti használatával
• A kódnak tartalmaznia kell teljesítményoptimalizálási logikát, csak a látható területen belüli és az élekhez közeli pontokat jelenítve meg.
• Az animációknak simán, késés nélkül kell futniuk

Reszponzív dizájn

• Az oldalaknak minden eszközön (mobilon, tableten, asztali számítógépen) tökéletesen kell megjelenniük.
• A vezérlőpaneleknek mobil nézetben összecsukhatónak/kibonthatónak kell lenniük.
• Optimalizálja az elrendezést és a betűméreteket a különböző képernyőméretekhez
• Biztosítson kellemes érintőképernyős élményt mobileszközökön

Interfész elemek

• Animációs módválasztó (hullám, impulzus, fodrozódás, zaj)
• Alakzatválasztó (különböző alakzatokat jelenít meg ikonokkal)
• Csúszkavezérlők: sűrűség, méret, sebesség, térköz
• Témaváltó gomb
• Mátrix átfedési információk és a pontok teljes számának megjelenítése

Vess egy pillantást az eredményekre. Őszintén szólva nem számítottam arra, hogy a többi modell ilyen rosszul fog teljesíteni ebben a tesztben. A Deepseek-R1 kivételével a többi modell animációi egyáltalán nem működtek.

Deepseek-R1-0528: Tökéletesen hibátlan. Minden gomb és csúszka normálisan működik, a pontok pedig simán mozognak. Még mátrixadatokat is hozzáadott, és a színek éjszakai módra váltás után is konzisztensek maradnak. Az egyetlen apró probléma, hogy a színválasztás kiválasztott állapotával van egy kis probléma, de ez elhanyagolható a többi modell katasztrofális teljesítményéhez képest.

Claude Opus 4: Jó hír: pixel art van rajta. Rossz hír: nem mozog. A jobb oldali tartalom normálisan kezelhető, de a színséma éjszakai módra váltás után helytelen.

Claude Szonett 4: Ez egy katasztrófa. Nincsenek pixelgrafikák, sőt, még a gombkijelölési állapot is hiányzik. A csúszkák csak pontok – akár az alapértelmezett komponenseket is használhatnánk.

Gemini 2.5 Pro: Hibát jelez pixelrács hiányában is. A jobb oldali tartalom normálisan kezelhető, és a témaváltás is jól működik, de az alapértelmezett komponensek kicsit csúnyák.

3. teszt: Képátmenet színkivonó eszköz

Ez egy olyan eszköz, amiről korábban írtam. A logikáról nincs sok leírás, de a stílusról bővebben. A fő funkció öt színátmenetes színkészlet kinyerése egy képből.

Prompt: Generáljon egy HTML weboldalt a következő fájltartalom alapján, amely támogatja öt színátmenetes színkészlet kinyerését a feltöltött képekből, és lehetővé teszi a felhasználók számára az öt hexadecimális színátmenetes színkészlet közvetlen másolását. A színkinyerési függvényt implementálni kell.

1. Használj NetEase Cloud Music stílusú vizuális designt, fehér háttérrel, az #FE1110-hez hasonló színnel kiemelve
2. A fontos pontok kiemeléséhez hangsúlyozd a nagy betűméreteket vagy számokat. A fókuszterületek kiemeléséhez használj túlméretezett vizuális elemeket, kontrasztot teremtve a kisebb elemekkel.
3. Keverjen kínai és angol szöveget. Használjon félkövér, nagyméretű kínai karaktereket és kisebb angol szöveget ékezetként.
4. Használjon egyszerű vonalrajzolt grafikákat adatvizualizációhoz vagy díszítőelemként.
5. Használd a kiemelő színek átlátszósági gradiensét egy tech-ihlette hatás létrehozásához, de ügyelj arra, hogy a különböző kiemelő színek ne olvadjanak össze egymással.
6. Az Apple hivatalos weboldalának animációit utánozza, egérgörgetéssel aktiválódó animációkkal
7. Az adatok online diagramkomponensekből hivatkozhatók, a stílusok pedig összhangban vannak a témával
8. Használja a Framer Motiont (CDN-en keresztül)
9. Használj HTML5-öt, TailwindCSS 3.0+-t (CDN-en keresztül) és a szükséges JavaScriptet
10. Használj professzionális ikonkönyvtárakat, mint például a Font Awesome vagy a Material Icons (CDN-en keresztül)
11. Kerüld az emojik használatát elsődleges ikonként
12. A bal alsó sarokban található kapszulagomb a szerző Twitter-felhasználónevét jeleníti meg.

Ebben az esetben Claude végre nagyszerű munkát végzett. A Deepseek-R1-0528 oldalának részletei és esztétikája lenyűgöző, de a funkcionalitás nincs megvalósítva. Az Opus 4 és a Sonnet 4 oldalak egyszerűbbek, de legalább működőképesek, míg a Gemini egyáltalán nem működik.

Deepseek-R1-0528: Miután ismét használtam a promptomat, a Deepseek oldalának esztétikája valóban páratlan. Emellett rengeteg SEO-barát tartalmat is hozzáadott az oldalhoz, például alkalmazásforgatókönyveket és feldolgozási időket. A színátmenetes kijelzőkártyák is nagyon részletesek, de a színkiválasztási logika nincs megvalósítva.

Claude Opus 4: Claude ezúttal végre nem okozott csalódást, kiegészítette az oldal funkcionalitását, de az oldal tartalma nagyon alapvető, csak egy hely van a képek feltöltésére és az eredmények megjelenítésére, és a színválasztási logika is gyenge. De legalább működik.

Claude Szonett 4: A Sonnet 4 szintén kiegészítette a funkcionalitást, sőt szerintem a Sonnet eredményei jobbak, mint az Opusé, bár még mindig nem olyan gazdagok, mint a Deepseek.

Gemini 2.5 Pro: Ez a legrosszabb. Nemcsak az oldal részletei és esztétikája hiányzik, de a funkcionalitás sem valósult meg, és indításkor összeomlik.

4. teszt: Fehér zaj napi idézet weboldal

Következő egy fehérzajú napi idézet weboldalgenerátor, amely tökéletes egy új lap oldal bővítményhez. Támogatja a Spotify fehérzajának lejátszását, és a weboldal megjelenik

Kérdés: Kérlek, segíts nekem egy egyszerű és elegáns napi idézeteket tartalmazó weboldalt létrehozni a következő követelményekkel:

Vizuális tervezés

• Háttérkép: Véletlenszerűen válasszon ki kiváló minőségű tájképeket a következő linkekről háttérképként
• KéplinkekXXXX
• Képfeldolgozás: Adjon hozzá egy 25% fekete maszkot és egy enyhe Gauss-elmosást, hogy a szöveg tiszta és olvasható maradjon.
• Általános stílusMinimalista és modern, fekvő képekkel a weboldal háttereként a fokozott elmerülés érdekében.
• Használj anime.js-t (CDN-en keresztül bevezetve: JsDelivr jsdelivr.com) az animációs keretrendszerhez, HTML5-öt, TailwindCSS 3.0+-t (CDN-en keresztül bevezetve) és a szükséges JavaScriptet, valamint professzionális ikonkönyvtárakat, például Font Awesome-ot vagy Material Icons-t (CDN-en keresztül bevezetve).

Időkijelző modul

• Felső: A hónap és nap formátumát (pl. „május 29.”) kisebb betűtípussal, középre igazítva jeleníti meg
• Második sor: Kisebb betűtípussal jeleníti meg a „X. hét · Holdnaptár X. hónap X. nap” formátumot
• Központ: Kiemeli az aktuális dátumot nagy fehér betűtípussal, középre igazítva

Árajánlatmegjelenítő modul

• Tartalom: Véletlenszerűen jelenít meg klasszikus idézeteket kínai és külföldi filozófusoktól és íróktól
• ElrendezésAz idézetek középre igazítottak, a betűméret mérsékelt, a sorköz pedig kényelmes.
• Nevezd meg: A jobb alsó sarokban az „Író, XXX” vagy a „Filozófus, XXX” felirat látható.
• Idézetkönyvtár: Idézeteket tartalmaz különböző témákban, például motivációról, életvezetési tanácsokról és bölcsességről

Zenelejátszási funkció

• Elhelyezkedés: Az oldal bal alsó sarka, alapértelmezés szerint összecsukva
• Tartalom: Spotify fehérzaj lejátszási lista beágyazása
• Kód:

Műszaki megvalósítás

• Reszponzív dizájnAsztali és mobil eszközökhöz adaptálva
• Betűtípus kiválasztásaHasználjon elegáns kínai betűtípusokat, amelyeket a Google Fonts vezetett be
• Színséma: Főként fehér szöveget használjon az olvashatóság biztosítása érdekében minden háttéren
• Optimalizálás betöltéseA képek lassú betöltése az oldal teljesítményének javítása érdekében

Interaktív funkciók

• Automatikus frissítés: Automatikusan megváltoztatja a háttérképet és az idézetet minden nap
• Manuális frissítés: Frissítés gombot biztosít, amely lehetővé teszi a felhasználók számára a tartalom manuális módosítását

Szövegírási stílus

• Idézet kiválasztása: Előnyben részesítsd a rövid, pozitív és filozofikus idézeteket
• Nyelvi stílusTömör és erőteljes, kerüli a túlzott hosszúságot
• Téma osztályozás: Életre szóló felismerések, inspiráló fejlődés, bölcs gondolatok, érzelmi kifejezés stb.

Kérjük, hozzon létre egy teljes HTML/CSS/JavaScript weboldalt a fenti követelményeknek megfelelően, ügyelve arra, hogy a felület esztétikus, funkcionális és jó felhasználói élményt nyújtson.

Ez a teszt pusztán az egyes modellek esztétikai megértésének felmérésére szolgál. Az ilyen típusú, megjelenítésre orientált weboldalak általában megvalósíthatók.

Azt meg kell jegyezni, hogy a Claude Opus 4 továbbra is meglehetősen mérvadó ezen a téren, kiváló odafigyeléssel a részletekre. A Gemini 2.5 Pro is jó, még animációs effekteket is hozzáad a képátmenetekhez. A Deepseek és a Sonnet 4 ugyanazon a szinten vannak.

Deepseek-R1-0528: Először a Deepseeket futtattam le, és szerintem már egészen jó volt. Az általános esztétikával kapcsolatos első probléma a bal alsó sarokban lévő zenegomb volt, ami egy kicsit túl lapos volt. Az idézetek részleggel is voltak problémák – a fekete maszkot nem kellett volna hozzáadni, és a szöveg igazítása is kicsit elromlott. Viszont hozzáadott egy animációs effektust a frissítéshez.

Claude Opus 4: Az Opus 4 esztétikája valóban hibátlan. Az összes betűtípus mérete és térköze nagyon kényelmes, a híres mondások idézeteit pedig átláthatóan kezelték mind az idézet szövege, mind az idézőjelek esetében. Még a Spotify lejátszót is egy kibontás/összecsukás animációval ellátott felhasználói felületbe csomagolták. Tökéletes.

Claude Szonett 4: A Sonnet 4 hatása hasonló a Deepseek problémájához. A zenelejátszó gomb, a szövegméret, az igazítás és a térköz mind tovább optimalizálható.

Gemini 2.5 Pro: A Gemini effektusa is jó, de a szövegárnyék eltávolítása jobb lenne. A Spotify lejátszó felhasználói felületét is testre szabta, és a szöveg részletei rendben vannak. Az átmeneti effektus észrevehető, a kép nyújtásával.

5. teszt: Alvás alkalmazás oldal generálása

Ezután következik a mobilalkalmazás tesztelése. Kérd meg őket, hogy mindegyikük készítsen egy alvásfigyelő alkalmazást. A feladat meghatározza a technikai veremet és a tervezési követelményeket, valamint több interaktív oldal létrehozását írja elő.

Prompt: Alvásfigyelő alkalmazás fejlesztési követelményei

Projekt áttekintése

Kérlek, segíts nekem egy komplett alvásfigyelő alkalmazás létrehozásában, négy fő funkcionális oldallal. A felületnek esztétikusnak és professzionálisnak kell lennie.

Technikai veremkövetelmények

Frontend technológiák

– HTML5 – Oldalszerkezet

– TailwindCSS v3.0+ – Stílus keretrendszer (CDN-en keresztül bevezetve)

– JavaScript – Szükséges interakciós logika

– Anime.js v4.0.2 – Animációs effektusok könyvtára

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

Ikonok és diagramok

• Ikonkönyvtár: Font Awesome vagy Material Icons (CDN)
• Diagram összetevői: Az online diagram összetevőinek és stílusainak összhangban kell lenniük a témával.
• Adatvizualizáció: Támogatja az alvásadatok diagramos megjelenítését

Tervezési követelmények

Reszponzív dizájn

• Teljesen reszponzív elrendezés
• Mobilközpontú tervezés
• Jó megjelenítés asztali és mobil eszközökön egyaránt

Interakciós hatások

• Gomb interakció: Enyhén megnövelt hatás az egérrel való lebegéskor

Űrlap interakció: Színátmenetes szegély megjelenítése, amikor a beviteli mező fókuszban van

Kártya interakció: Sötétíti az árnyékot lebegés közben

Animációs effektek: Az Anime.js használatával zökkenőmentes oldalanimációkat érhet el.

Funkcionális oldalkövetelmények

Kérjük, hozza létre az alvásfigyelő alkalmazáshoz szükséges összes oldalt, beleértve, de nem kizárólagosan:

• Kezdőlap/műszerfal
• Alvásrögzítő oldal
• Adatelemzés oldal
• Beállítások oldal
• Egyéb kapcsolódó funkcionális oldalak

Kódkimeneti követelmények

• Minden oldal egy független HTML fájl
• Átlátható kódstruktúra teljes körű megjegyzésekkel
• Győződjön meg arról, hogy minden CDN-hivatkozás elérhető
• Teljes, futtatható kódot biztosít

Mobil logika és felület tekintetében a Cluade Opus 4 ismét bebizonyította erejét, jó logikával több oldalt is kitöltött. A többi modell csak egyetlen oldalt generált, de a Deepseek R1 0528 hirtelen esztétikailag, gyönyörű stílusával telire sikeredett. Bár csak egyetlen oldalt generált, nagyon komplett volt.

Deepseek-R1-0528: Csak egyetlen oldalt generáltam, de az összkép jó. A kártyák részletei és az ikonok kezelése jól kidolgozott, az egész oldal teljes és hosszú. Ezenkívül reszponzív navigációt alkalmaztunk, ami teljesen eltérő elrendezést eredményezett mobil és asztali eszközökön.

Claude Opus 4: Valóban erős, csak az Opus4 generálta ki teljesen az összes oldalt, de az esztétikai design ezúttal nem a legjobb, weboldallogikát használ, túl kicsi navigációs ikonokkal.

Claude Szonett 4: Csak egyetlen oldalt generáltam és hibákat jelzett, gyenge esztétikai dizájnnal, éppen csak elvégeztem a feladatot.

Gemini 2.5 Pro: A Google mindig másképp csinálja a dolgokat. Minden oldalt külön generál, négy fájlt biztosítva, amelyek nem tudnak egymással kölcsönhatásba lépni. Ezenkívül minden oldal hibákat jelzett, mindegyik csak navigációt tartalmazott, tartalmat nem, ami elég kiábrándító.

6. teszt: Komplex funkcionalitás – Tetris

Végül egy rövid játékteszttel zártam. Terveztem egy viszonylag összetett Tetris játékot speciális blokkokkal, témaváltással, blokkok érkezésének előrejelzőjével, blokkok tárolásával és egyebekkel – ami igazi kihívást jelentett.

Feladat: Kérlek, segíts nekem egy teljesen működőképes, vizuálisan vonzó Tetris webjáték létrehozásában a következő követelményekkel:

A játék alapvető jellemzői

1. Teljes Tetris mechanizmus7 szabványos blokk (I, O, T, S, Z, J, L)
2. Sima vezérlésbalra és jobbra mozgás, forgatás, gyors esés, azonnali esés
3. Intelligens eliminációs rendszer: támogatja az 1-4 sor egyidejű eltávolítását speciális animációs effektusokkal
4. Progresszív nehézségi rendszer: automatikusan növeli az esési sebességet és a szintet a kiesett sorok száma alapján

Speciális funkciók

1. Előnézeti rendszer: megjeleníti a következő és a következő-következő blokkokat
2. Tartás funkció: Tartsd lenyomva a Hold gombot az aktuális blokk ideiglenes tárolásához. Körönként csak egyszer használható.
3. Szellemblokkok: Félig átlátszó formában jeleníti meg a blokkok leszállási pozícióját
4. Kombinált rendszerA folyamatos tisztogatás extra pontokat és vizuális effekteket biztosít.
5. Különleges képességek:
   1. Bombablokk (megtisztítja a környező területet)
   2. Lézeres tisztítás (teljes sort kiürít)
   3. Időszünet (a blokkok 3 másodpercig nem esnek)

Vizuális tervezési követelmények

1. Modern felhasználói felület:
   1. Gradiens háttér vagy részecskehatások
   2. Üveghatású játékpanel
   3. Sima animációs átmenetek
   4. Reszponzív dizájn különböző képernyőkhöz
2. Gazdag vizuális effektek:
   1. A blokkok esésének és forgásának sima animációja
   2. Robbanás vagy villanás hatásai megszűnésük után
   3. Képernyőremegés hatása a kombináció elérésekor
   4. Ünnepi animáció szintlépéskor
3. TémarendszerLegalább 3 különböző vizuális téma közül lehet választani

Hangeffektus-rendszer

1. Teljes hangvisszajelzés: mozgás, forgás, leszállás, kiesés, játék vége stb.
2. Háttérzene: ismétlődő játék háttérzene
3. Hangerőszabályzó: függetlenül állítható hangeffektusok és háttérzene hangereje

Játékmódok

1. Klasszikus módhagyományos Tetris játékmenet
2. Időkorlátos mód: a megadott időn belül a legmagasabb pontszám elérése
3. Kihívás módelőre beállított akadályok a nehézség növelése érdekében
4. Zen módnincs időnyomás, a játék tiszta élvezete

Adatstatisztikai funkciók

1. Valós idejű statisztikák: aktuális pontszám, szint, teljesített vonalak száma, játékidő
2. Történelem: legmagasabb pontszám, legjobb szint, teljes játékidő
3. Teljesítményrendszer: oldj fel különféle játékbeli eredményeket
4. Helyi tároló: mentse el a játékrekordokat és a beállításokat

Műszaki követelmények

1. Tiszta HTML5/CSS3/JavaScriptet használnincs szükség külső keretrendszerekre
2. Tiszta kódstruktúraobjektumorientált programozás, moduláris tervezés
3. Teljesítményoptimalizálás: sima 60FPS animáció, késleltetés nélkül
4. Kompatibilitástámogatja a modern böngészőket
5. Reszponzív dizájnKompatibilis PC-kkel és mobileszközökkel

Felhasználói élmény

1. Intuitív utasításokBeépített oktatóanyag és gombokkal megjelenő utasítások
2. Szüneteltetés/folytatás funkció: A játék bármikor szüneteltethető
3. Beállítások menü: Állítsa be a játék nehézségét, hangeffektusokat, vizuális effektusokat stb.
4. Játékállapot mentése: Támogatja a játék mentését és folytatását

Kódminőségi követelmények

1. Részletes megjegyzésekMinden függvénynek és fontos kódszegmensnek kell lennie leírással.
2. HibakezelésÁtfogó kivételrögzítési és -kezelési mechanizmus
3. Elegáns kód: Kövesse a legjobb gyakorlatokat, könnyen érthető és karbantartható
4. NyújthatóságKönnyű új funkciókat hozzáadni a jövőben

Kérjük, adj meg teljes HTML fájlokat, amelyek tartalmazzák az összes CSS és JavaScript kódot, hogy azok közvetlenül futtathatók legyenek egy böngészőben. A kódnak professzionális programozási készségeket és a játékfejlesztés mélyreható ismeretét kell igazolnia.

A minijátékban Claude-nak van valami terve. Az Opus és a Sonnet is generálta a megfelelő Tetris blokkokat a követelményeknek megfelelően, különösen a speciális blokkok logikáját. A Deepseek kezelte a Claude által figyelmen kívül hagyott témát, de a speciális blokkok kimaradtak, aminek eredményeként a Gemini 2.5 Pro játszhatatlan blokkokat generált.

Deepseek-R1-0528: A feladatot nagyon jól és a specifikációknak megfelelően végezték el, de a speciális blokktervezést kihagyták, és egyáltalán nem implementálták. Ennek oka valószínűleg a felszólító szavak követésével kapcsolatos problémák voltak. A teljes weboldal egy játékfelületre hasonlít, minden gomb szabványos komponensként jelenik meg.

Claude Opus 4: A speciális blokkok és egyéb logikák logikáját probléma nélkül befejeztem, de a témaváltásra vonatkozó promptot figyelmen kívül hagytam, amelyet nem implementáltam. Az DeepSeek problémáihoz képest ez egy kisebb probléma, de a felület fixen kódolt, reszponzív logika nélkül, így az arányok kissé eltérnek, és egyes gombokra nem lehet kattintani.

Claude Szonett 4: Hasonló az Opushoz, de szerintem a Sonnet 4 jobb, mint az Opus. Az oldal adaptációja is jó. Úgy érzem, mintha a Sonnet nyert volna, mivel minden szükséges funkciót ellátott.

Gemini 2.5 Pro: A Gemini folyamatosan küzd a bonyolult logikával. Ezúttal teljesen használhatatlanná vált, mert a téglaelhelyezés hibája miatt lehetetlen volt megjósolni, hová fognak landolni. Ez a legrosszabb.

Azt hiszem, mostanra te is annyira lenyűgözött vagy az DeepSeek-R1 teljesítményétől, mint én.

Nehéz elhinni, hogy ez csak egy apró modellfrissítés. Hasonlítsuk össze ezeknek a modelleknek az árait az DeepSeek R1 0528-éval.

Az Opus 4 30-szor drágább, és ez az Openrouter árazását használja – a hivatalos ár még ennél is megdöbbentőbb lenne.

modell	Kontextus hossza	Beviteli ár ($/M tokenek)	Kimeneti ár ($/M tokenek)	kép ára ($/K tokenek)
DeepSeek R1 0528	160 ezer	0.50	2.18	–
Gemini 2.5 pro előzetes	1000 ezer	1.25	10	5.16
Claude Szonett 4	200 ezer	3.00	15	4.80
Claude Opus 4	200 ezer	15.00	75	24.00

Mint aki naponta foglalkozik mesterséges intelligenciával kapcsolatos hírekkel, számtalan „áttörésnek” voltam tanúja, amelyek végül „csalódást okoztak”. De ezúttal más a helyzet. Az DeepSeek-R1 valódi reményt adott nekem.

30-szoros árkülönbség, mégis majdnem ugyanolyan teljesítmény.

Nem kell többé elképesztő árakat fizetnünk a legjobb MI programozási modellek használatáért, és nem kell fájdalmas kompromisszumokat kötnünk a költségek és a minőség között. Ami még inspirálóbb, hogy ez a saját modellünk.

Ezt a mondatot mesterséges intelligencia írta, és szerintem nagyszerű: Az igazi forradalom gyakran akkor kezdődik, amikor a hétköznapi emberek elérhetik a csillagokat.