Deepseek-R1 0528 on viime päivinä virallisesti julkaistu avoimen lähdekoodin versiona.
LiveCodeBenchissä sen suorituskyky on lähes OpenAI:n o3:n (korkea) tasolla; Aiderin monikielisessä vertailutestissä se pärjää Claude Opusille.
Kun se julkaistiin virallisella verkkosivustolla, testasimme nopeasti sen käyttöliittymän ominaisuuksia ja havaitsimme ne poikkeuksellisen vahvoiksi, mikä johti tässä artikkelissa käsiteltäviin testeihin. Tavoitteenamme on jakaa kanssasi eri mallien suorituskykytiedot.
On tärkeää huomata, että tämä testi keskittyy ensisijaisesti käyttöliittymän ominaisuuksiin, joten on tärkeää tarkastella eri mallien suorituskykyä objektiivisesti. Voit käyttää tarjoamiamme kehotteita omien testien suorittamiseen ja omien näkemystesi ja havaintojesi jakamiseen.
Samaa kehotetta käyttäen lähetimme sen Claude Opus 4:lle, Sonnet 4:lle, Gemini 2.5 Prolle ja DeepSeek R1-0528, ja antoi heidän kilpailla kuudessa yhä haastavammassa käyttöliittymän kehitystehtävässä.
Niille, jotka eivät malta odottaa, tässä yhteenveto:
Deepseek-R1-0528 jää hieman Opus 4:n jälkeen käyttöliittymän ominaisuuksissa, mutta on parempi Sonetti 4 ja Gemini 2.5 Pro.
Pohjimmiltaan minkä tahansa tehtävän, jonka Opus pystyy suorittamaan, R1 pystyy myös suorittamaan, ja jopa tehtäviä, joita Opus 4 ei pysty suorittamaan, R1 pystyy käsittelemään, tosin hieman alhaisemmilla valmistumisasteilla ja tulosten laadulla.
Ottaen huomioon R1:n ja kolmen muun välisen hintaeron, tämä suorituskyky on jo erinomainen, ja voimme vain kuvitella, kuinka vaikuttava R2 tulee olemaan.
Testi 1: Varastonhallintajärjestelmä
Kysymys: Auta minua luomaan täydellinen verkkopohjainen tuotehallintatyökalu seuraavilla vaatimuksilla:
Toiminnalliset vaatimukset
- Tuotehallinta
- Tuotetietojen syöttöTuotteen nimi, tyyppi/kategoria, SKU-numero, hinta, varastomäärä
- Tuotekuvien hallintaTuki kuvien lataukselle ja esikatselulle (simuloitu tiedostovalitsimella)
- Tuoteluettelon näyttöNäytä kaikki tuotteet taulukkomuodossa, haku- ja suodatustoiminnolla
- TuotemuokkausTuki tuotetietojen muokkaamiselle
- Tuotteen poistaminenTuki tuotteen poistamiselle (vahvistuskehotteella)
- Varastonhallinta
- Saapuvat toiminnotLisää tuotevarastoa, kirjaa sisääntuloaika ja -määrä
- Lähtevät toiminnotVähennä tuotteiden varastomäärää, kirjaa lähtöaika ja -määrä
- VarastotiedotNäyttää kunkin tuotteen varastomuutoshistorian
- Käyttöliittymän ominaisuudet
- KojelautaNäyttää tilastoja, kuten tuotteiden kokonaismäärän, varaston kokonaisarvon, alhaisen varaston hälytykset jne.
- Responsiivinen suunnitteluMukautuva pöytäkoneille ja mobiililaitteille
- Tietojen säilyvyysKäyttää localStorage-tallennustilaa tiedon tallentamiseen
Tekniset vaatimukset
Tyylit ja kuvakkeet
- CSS-kehysKäyttää TailwindCSS 3.0+ CDN:ää
- KuvakekirjastoKäyttää sankari- tai höyhenkuvakkeita CDN:ssä
- FonttiKäytä Google Fontsia
Koodirakenne
- Yhden sivun hakemusHTML + CSS + JavaScript
- Modulaarinen suunnitteluJaa funktiot eri JavaScript-moduuleiksi
- TietomuotoKäytä JSON-muotoa tuotetietojen tallentamiseen
Rajapintasuunnittelun vaatimukset
- Moderni käyttöliittymäYksinkertainen ja kaunis käyttöliittymäsuunnittelu
- VärimaailmaKäytä ammattimaisia väriyhdistelmiä
- Interaktiivinen palautePainikkeiden napsautukset, lomakkeen validointi ja muut interaktiiviset tehosteet
- Lomakkeen validointiPakollisen kentän validointi, tietomuodon validointi
Tietorakenteen esimerkki
Luo täydellinen HTML-tiedosto, joka sisältää kaiken tarvittavan CSS- ja JavaScript-koodin varmistaen, että kaikki ominaisuudet toimivat ja toimivat suoraan selaimessa.
Katsotaanpa testituloksia. Logiikka on itse asiassa melko monimutkaista, ja se testaa mallin kontekstin pituutta, esteettistä tajua ja loogisia prosessointikykyjä.
Tässä tapauksessa kaikki mallit Deepseekiä lukuun ottamatta epäonnistuivat. Claude 4:n käännös oli aika hutera, rehellisesti sanottuna.
Deepseek-R1-0528: R1:n päivitetty versio on erittäin tehokas. Kuten näette, käyttöliittymä on erittäin ammattimainen, ja voit myös luoda uusia tuotteita, suorittaa normaaleja lähteviä ja saapuvia toimintoja sekä jakaa tuote-, varastonhallinta- ja varastoraportit kolmelle sivulle, mikä on kaiken kaikkiaan erittäin selkeää. Mukana on myös erillinen kojelautasivu, ja hän kirjoitti esimerkkidataa testausta varten. Muissa malleissa ei ole dataa, eikä tuotteiden lisääminen toimi, joten testaus on täysin mahdotonta.
Claude Opus 4: Se alkaa suurella ja yksinkertaisella käyttöliittymällä, jossa käytetään SaaS-alustoille tyypillisen sivupalkin sijaan yläreunan navigointipalkkia. Tuotteiden lisääminen aiheuttaa virheen tallennuksen yhteydessä, mikä tekee testaamisesta mahdotonta.
Claude Sonetti 4: Verrattuna Opus 4:ään käyttöliittymä on vieläkin yksinkertaisempi. Lisää tuote -painikkeen napsauttaminen ei vastaa, eikä lomakeikkunaa tule näkyviin. Muut sivut ovat pohjimmiltaan vain paikkamerkkejä.
Gemini 2.5 Pro: Googlen versio on Clauden versiota parempi. Se mahdollistaa tuotteiden ja sarjojen lisäämisen, mutta siinä on bugeja. Se toimi, kun kokeilin sitä ensimmäisen kerran, mutta ei videon tallentamisen yhteydessä. Geminin interaktiosuunnittelu on kuitenkin melko monimutkainen, sillä varastonhallinta ja kirjanpito ovat kaikki samassa taulukossa, mikä lisää hieman vaikeuksia.
Testi 2: Pikselianimaatioeditori
Seuraavaksi on visuaalisten kykyjen testi. Pyysin heitä luomaan pikselitaideanimaatioeditorin P5.js:n avulla, joka tukee liiketiloja ja säätää pisteiden muotoja, kokoja, nopeuksia ja muita ehtoja.
Kehote: Luo P5.js-pohjainen interaktiivinen pikselitaideanimaatiogeneraattori, joka täyttää seuraavat tekniset vaatimukset:
Ydinominaisuudet
- Toteuta koko näytön pikselitaideanimaatio P5.js:n avulla siten, että animaatio peittää koko näyttöalueen.
- Pikseliruudukon kokonaispinta-alan on oltava vähintään 10 kertaa näkyvä pinta-ala, jotta täysi peitto voidaan varmistaa myös pienimmillä ruudukkoväleillä.
- Tarjoaa useita animaatiotiloja: Aalto, Pulssi, Väreily, Kohina
- Tukee useita pisteen muotovaihtoehtoja: ympyrä, neliö, risti, kolmio, vinoneliö jne.
- Kaikki ohjauspaneelit sijaitsevat sivun oikealla puolella ja ne voidaan kutistaa sivun loppuun mobiililaitteilla.
Säädettävät parametrit
- Pistetiheys: Hallitse pisteiden määrää riviä/saraketta kohden
- Muodon koko: Säädä pisteiden kokoa
- Animaation nopeus: Hallitse animaatiotehosteen nopeutta ja amplitudia
- Ruudukon välistys: Säädä pisteiden välistä etäisyyttä
Tekniset tiedot
- Käytä HTML5:tä, TailwindCSS 3.0+:aa (esitelty CDN:n kautta) ja P5.js:ää
- Toteuta täysi tumman/vaalean tilan vaihtotoiminto järjestelmäasetusten oletusarvoisesti
- Koodin on sisällettävä suorituskyvyn optimointilogiikka, joka renderöi vain näkyvän alueen ja reunojen lähellä olevat pisteet.
- Animaatioiden on toimittava sujuvasti ilman viiveitä
Responsiivinen suunnittelu
- Sivujen on näytettävä moitteettomasti kaikilla laitteilla (mobiili, tabletti, tietokone)
- Ohjauspaneelien tulisi olla kokoontaitettavia/laajennettavia mobiilinäkymässä
- Optimoi asettelu ja fonttikoot eri näyttökooille
- Varmista hyvä kosketuskokemus mobiililaitteilla
Käyttöliittymäelementit
- Animaatiotilan valitsin (aalto, pulssi, ripple, kohina)
- Muodonvalitsin (näyttää erilaisia muotoja kuvakkeilla)
- Liukusäätimet: tiheys, koko, nopeus, välistys
- Teemanvaihtopainike
- Näytä matriisin päällekkäistiedot ja pisteiden kokonaismäärä
Katsokaa tuloksia. Rehellisesti sanottuna en odottanut muiden mallien suoriutuvan näin huonosti tässä testissä. Deepseek-R1:tä lukuun ottamatta muiden mallien animaatiot eivät toimineet ollenkaan.
Deepseek-R1-0528: Täysin virheetön. Jokainen painike ja liukusäädin toimivat normaalisti, ja pisteet liikkuvat sujuvasti. Se jopa lisäsi pistematriisitietoja, ja värit pysyvät yhdenmukaisina yötilaan vaihtamisen jälkeen. Ainoa pieni ongelma on, että värivalinnan valitussa tilassa on pieni ongelma, mutta se on merkityksetön verrattuna muiden mallien katastrofaaliseen suorituskykyyn.
Claude Opus 4: Hyviä uutisia: siinä on pikselitaidetta. Huonoja uutisia: se ei liiku. Oikeanpuoleista sisältöä voi käyttää normaalisti, mutta värimaailma on väärä yötilaan vaihtamisen jälkeen.
Claude Sonetti 4: Tämä on katastrofi. Siinä ei ole pikseligrafiikkaa, ja jopa painikkeen valintatila puuttuu. Liukusäätimet ovat vain pisteitä – yhtä hyvin voisi käyttää oletuskomponentteja.
Gemini 2.5 Pro: Raportoi myös virheestä, jossa ei ole pikseliruudukkoa. Oikeanpuoleista sisältöä voi käyttää normaalisti ja teeman vaihto toimii hyvin, mutta oletuskomponentit ovat hieman rumia.
Testi 3: Kuvan liukuvärin erotustyökalu
Tämä on työkalu, josta kirjoitin aiemmin. Logiikkaa ei kuvailla paljon, mutta tyyliä on kuvattu enemmän. Päätehtävänä on poimia kuvasta viisi liukuvärisarjaa.
Kehote: Luo HTML-verkkosivu seuraavan tiedostosisällön perusteella, tue viiden liukuvärisarjan poimimista ladatuista kuvista ja salli käyttäjien kopioida suoraan viisi heksadesimaalimuotoista liukuvärisarjaa. Värien poimintafunktio on toteutettava.
- Käytä NetEase Cloud Music -tyylistä visuaalista suunnittelua, valkoista taustaa ja väriä, joka on samankaltainen kuin #FE1110, korostuksena
- Korosta keskeisiä kohtia käyttämällä suuria fontteja tai numeroita. Sisällytä ylisuuria visuaalisia elementtejä korostaaksesi keskittymisalueita ja luodaksesi kontrastia pienempien elementtien kanssa.
- Sekoita kiinalaista ja englanninkielistä tekstiä. Käytä lihavoituja, suuria kiinalaisia merkkejä ja pienempää englanninkielistä tekstiä aksentteina.
- Käytä yksinkertaisia viivapiirroksia datan visualisointiin tai koriste-elementteinä.
- Käytä korostusvärien läpinäkyvyysgradienttia luodaksesi tekniikkavaikutteisen vaikutelman, mutta varmista, että eri korostusvärit eivät sekoitu toisiinsa.
- Matki Applen virallisten verkkosivustojen animaatioita, joissa hiiren vieritys laukaisee animaatiot
- Tietoihin voidaan viitata online-kaaviokomponenteista, joiden tyylit ovat teeman mukaisia
- Käytä Framer Motionia (CDN:n kautta)
- Käytä HTML5:tä, TailwindCSS 3.0+:aa (CDN:n kautta) ja tarvittavaa JavaScriptiä
- Käytä ammattimaisia kuvakekirjastoja, kuten Font Awesome tai Material Icons (CDN:n kautta)
- Vältä emojien käyttöä ensisijaisina kuvakkeina
- Vasemmassa alakulmassa oleva kapselipainike näyttää kirjoittajan Twitter-käyttäjätunnuksen.
Tässä tapauksessa Claude teki vihdoin hienoa työtä. Deepseek-R1-0528:n sivun yksityiskohdat ja estetiikka ovat vaikuttavia, mutta toiminnallisuutta ei ole toteutettu. Opus 4:n ja Sonnet 4:n sivut ovat yksinkertaisempia, mutta ainakin toimivia, kun taas Gemini ei ole lainkaan toiminnallinen.
Deepseek-R1-0528: Käytettyäni kehotettani uudelleen, Deepseekin sivun estetiikka on todella vertaansa vailla. Hän on myös lisännyt sivulle paljon hakukoneoptimoitua sisältöä, kuten sovellusskenaarioita ja käsittelyaikoja. Myös liukuväriset näyttökortit ovat erittäin yksityiskohtaisia, mutta värinvalintalogiikkaa ei ole toteutettu.
Claude Opus 4: Tällä kertaa Claude ei viimein pettänyt odotuksia ja sai sivun toiminnallisuuden valmiiksi, mutta sisältö on hyvin yksinkertainen, sillä on vain paikka ladata kuvia ja tulokset, ja värien valintalogiikka on myös huono. Se kuitenkin ainakin toimii.
Claude Sonetti 4: Sonnet 4 täydensi myös toiminnallisuuden, ja mielestäni Sonnetin tulokset ovat jopa parempia kuin Opuksen, vaikka se ei olekaan yhtä rikas kuin Deepseek.
Gemini 2.5 Pro: Tämä on huonoin. Sivun yksityiskohdat ja ulkoasu ovat puutteelliset, mutta toiminnallisuuskaan ei ole toteutettu, ja se kaatuu käynnistyksen yhteydessä.
Testi 4: Valkoisen kohinan päivittäisten lainausten verkkosivusto
Seuraavaksi on valkoisen kohinan päivittäisten lainausten verkkosivustogeneraattori, joka sopii täydellisesti uuden välilehden lisäosaksi. Se tukee valkoisen kohinan toistamista Spotifysta, ja verkkosivu näkyy
Haaste: Auta minua luomaan yksinkertainen ja tyylikäs päivittäisten tarjousten verkkosivusto seuraavin vaatimuksin:
Visuaalinen suunnittelu
- TaustakuvaValitse taustakuvaksi satunnaisesti korkealaatuisia maisemakuvia seuraavista linkeistä
- KuvalinkitXXXX
- KuvankäsittelyLisää 25% musta maski ja hieman Gaussin sumennusta, jotta teksti pysyy selkeänä ja luettavana.
- Yleinen tyyliMinimalistinen ja moderni, verkkosivun taustana vaakasuuntaiset kuvat tehostavat katselukokemusta
- Käytä animaatiokehykselle anime.js:ää (esitelty CDN:n kautta: JsDelivr jsdelivr.com), HTML5:tä, TailwindCSS 3.0+:aa (esitelty CDN:n kautta) ja tarvittavaa JavaScriptiä, ja käytä ammattimaisia kuvakekirjastoja, kuten Font Awesome tai Material Icons (esitelty CDN:n kautta).
Aikanäyttömoduuli
- Yläosa: Näytä kuukauden ja päivän muoto (esim. ”29. toukokuuta”) pienemmällä fontilla, keskitettynä
- Toinen rivi: Näyttää muodon ”Viikko X · Kuukalenteri X. kuukausi X. päivä” pienemmällä fontilla
- Keskusta: Korostaa nykyisen päivämäärän suurella valkoisella fontilla, keskitettynä
Tarjousnäyttömoduuli
- SisältöNäyttää satunnaisesti kiinalaisten ja ulkomaisten filosofien ja kirjailijoiden klassisia lainauksia
- LayoutLainaukset ovat keskitettyjä, fonttikoko on kohtuullinen ja riviväli on sopiva
- Nimeäminen: Oikeassa alakulmassa näkyy teksti ”Kirjoittaja, XXX” tai ”Filosofi, XXX”.
- LainauskirjastoSisältää lainauksia eri aiheista, kuten motivaatiosta, elämänkatsomuksesta ja viisaudesta
Musiikin toistotoiminto
- SijaintiSivun vasen alakulma, oletuksena kutistettuna
- SisältöUpota Spotify-valkoisen kohinan soittolista
- Koodi:
Tekninen toteutus
- Responsiivinen suunnitteluMukautettu pöytätietokoneille ja mobiililaitteille
- Fontin valintaKäytä Google Fontsin esittelemiä tyylikkäitä kiinalaisia fontteja
- VärimaailmaKäytä pääasiassa valkoista tekstiä luettavuuden varmistamiseksi kaikilla taustoilla
- Ladataan optimointiKuvien hidas lataus sivun suorituskyvyn parantamiseksi
Interaktiiviset ominaisuudet
- Automaattinen päivitysVaihtaa taustakuvan ja lainauksen automaattisesti joka päivä
- Manuaalinen päivitys: Tarjoaa päivityspainikkeen, jonka avulla käyttäjät voivat muuttaa sisältöä manuaalisesti
Copywriting-tyyli
- LainausvalintaSuosi lyhyitä, myönteisiä ja filosofisia lainauksia
- KielityyliYtimekäs ja voimakas, välttää liiallista pituutta
- TeemaluokitusElämän oivalluksia, inspiroivaa kasvua, viisaita ajatuksia, tunteiden ilmaisua jne.
Ole hyvä ja luo täydellinen HTML/CSS/JavaScript-verkkosivusto yllä olevien vaatimusten mukaisesti varmistaen, että käyttöliittymä on esteettisesti miellyttävä, toimiva ja tarjoaa hyvän käyttökokemuksen.
Tämä testi on tarkoitettu ainoastaan arvioimaan kunkin mallin ymmärrystä estetiikasta. Tämän tyyppinen näyttöpainotteinen verkkosivu on yleensä mahdollista luoda.
On sanottava, että Claude Opus 4 on edelleen varsin arvovaltainen tällä saralla, ja siinä on erinomainen huomio yksityiskohtiin. Gemini 2.5 Pro on myös hyvä, jopa lisäten animaatiotehosteita kuvien siirtymiin. Deepseek ja Sonnet 4 ovat samalla tasolla.
Deepseek-R1-0528: Ajoin ensin Deepseekin ja se oli mielestäni jo varsin hyvä. Ensimmäinen ongelma yleisen ulkonäön kanssa oli vasemmassa alakulmassa oleva musiikkipainike, joka oli hieman liian litteä. Lainausosiossa oli myös ongelmia – mustaa maskia ei olisi pitänyt lisätä, ja tekstin tasaus oli hieman pielessä. Se kuitenkin lisäsi animaatiotehosteen päivitystä varten.
Claude Opus 4: Opus 4:n estetiikka on todella virheetöntä. Kaikkien fonttien koko ja välistys ovat erittäin mukavia, ja kuuluisien sanontojen lainaukset on käsitelty läpinäkyvästi sekä lainaustekstin että lainausmerkkien osalta. Jopa Spotify-soitin on kääritty käyttöliittymään, jossa on laajennus-/kutistusanimaatio. Se on täydellinen.
Claude Sonetti 4: Sonnet 4:n vaikutus on samanlainen kuin Deepseekin ongelma. Musiikin toistopainiketta, tekstin kokoa, tasausta ja välistystä voidaan optimoida entisestään.
Gemini 2.5 Pro: Geminin efekti on myös hyvä, mutta tekstin varjostuksen poistaminen tekisi siitä paremman. Se on myös muokannut Spotify-soittimen käyttöliittymää, ja tekstin yksityiskohdat ovat kunnossa. Siirtymäefekti on havaittavissa, ja kuvassa on venytysefekti.
Testi 5: Uni-sovelluksen sivun luonti
Seuraavaksi on mobiilisovelluksen testaus. Pyydä heitä kaikkia luomaan unen seurantaan tarkoitettu sovellus. Kehotteessa määritellään tekninen pino ja suunnitteluvaatimukset sekä edellytetään useiden interaktiivisten sivujen luomista.
Kysymys: Unen seurantasovelluksen kehitysvaatimukset
Projektin yleiskatsaus
Auta minua luomaan täydellinen unen seurantaan tarkoitettu sovellus, jossa on neljä päätoiminnallista sivua. Käyttöliittymän tulisi olla esteettisesti miellyttävä ja ammattimainen.
Tekniset vaatimukset pinolle
Frontend-teknologiat
– HTML5 – Sivun rakenne
– TailwindCSS v3.0+ – Tyylikehys (esitelty CDN:n kautta)
– JavaScript – Tarpeellinen vuorovaikutuslogiikka
– Anime.js v4.0.2 – Animaatiotehostekirjasto
- CDN:
https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm
Kuvakkeet ja kaaviot
- Kuvakekirjasto: Font Awesome tai Material Icons (CDN)
- Kaavion osat: Verkkokaavion osien ja tyylien on oltava teeman mukaisia.
- Datan visualisointi: Tukee unitietojen kaavionäyttöä
Suunnitteluvaatimukset
Responsiivinen suunnittelu
- Täysin responsiivinen asettelu
- Mobiililähtöinen suunnittelu
- Hyvä näyttö sekä tietokoneella että mobiililaitteilla
Vuorovaikutusvaikutukset
- Painikkeiden vuorovaikutus: Hieman suurennettu vaikutus hiiren osoittimella
Lomakkeen vuorovaikutus: Näytä liukuvärjäysreunus, kun syöttökenttä on kohdistettu
Kortin vuorovaikutus: Tummenna varjoa leijuessa sen päällä
Animaatiotehosteet: Käytä Anime.js:ää saadaksesi sulavia sivuanimaatioita
Toiminnalliset sivuvaatimukset
Luo kaikki unen seurantasovelluksen tarvitsemat sivut, mukaan lukien, mutta ei rajoittuen:
- Etusivu/kojelauta
- Unitietojen sivu
- Data-analyysisivu
- Asetukset-sivu
- Muut asiaankuuluvat toiminnalliset sivut
Koodin tulostusvaatimukset
- Jokainen sivu on itsenäinen HTML-tiedosto
- Selkeä koodirakenne täydellisillä kommenteilla
- Varmista, että kaikki CDN-linkit ovat käytettävissä
- Tarjoa täydellinen, suoritettava koodi
Mobiililogiikan ja käyttöliittymän osalta Cluade Opus 4 osoitti jälleen kerran tehonsa suorittamalla useita sivuja hyvällä logiikalla. Muut mallit loivat vain yhden sivun, mutta Deepseek R1 0528 osui yhtäkkiä maaliin estetiikan ja kauniin tyylin suhteen. Vaikka se loi vain yhden sivun, se oli erittäin täydellinen.
Deepseek-R1-0528: Luotiin vain yksi sivu, mutta kokonaisilme on hyvä. Korttien yksityiskohdat ja kuvakkeiden käsittely on hyvin tehty, ja koko sivu on kattava ja pitkä. Lisäksi navigointiin otettiin käyttöön responsiivinen suunnittelu, minkä tuloksena mobiili- ja pöytäkoneilla on täysin erilaiset asettelut.
Claude Opus 4: Todella tehokas, vain Opus4 loi kaikki sivut kokonaan, mutta esteettinen suunnittelu ei tällä kertaa ole kovin hyvä, sillä se hyödyntää verkkosivun logiikkaa ja navigointikuvakkeet ovat liian pienet.
Claude Sonetti 4: Luoin vain yhden sivun ja raportoin virheistä, huonolla esteettisellä suunnittelulla, juuri ja juuri suoritin tehtävän.
Gemini 2.5 Pro: Google tekee asiat aina eri tavalla. Se luo jokaisen sivun erikseen, jolloin se tarjoaa neljä tiedostoa, jotka eivät voi olla vuorovaikutuksessa keskenään. Lisäksi kaikki sivut raportoivat virheitä, ja jokainen sivu sisälsi vain navigointia eikä lainkaan sisältöä, mikä on melko pettymys.
Testi 6: Monimutkainen toiminnallisuus – Tetris
Lopuksi tein pienen pelitestin. Suunnittelin suhteellisen monimutkaisen Tetris-pelin, jossa oli erikoispalikoita, teeman vaihto, lohkojen laskeutumisen ennustaminen, lohkojen tallennus ja paljon muuta – todellinen äärimmäinen haaste.
Haaste: Auta minua luomaan täysin toimiva ja visuaalisesti miellyttävä Tetris-verkkopeli seuraavilla vaatimuksilla:
Pelin ydinominaisuudet
- Täydellinen Tetris-mekanismi7 vakiolohkoa (I, O, T, S, Z, J, L)
- Sujuvat säätimetvasen ja oikea liike, kierto, nopea pudotus, välitön pudotus
- Älykäs eliminointijärjestelmä: tukee 1–4 rivin poistamista kerrallaan erityisillä animaatiotehosteilla
- Progressiivinen vaikeusjärjestelmä: lisää automaattisesti pudotusnopeutta ja -tasoa poistettujen rivien lukumäärän perusteella
Lisäominaisuudet
- Esikatselujärjestelmä: näyttää seuraavan ja seuraavaksi seuraavan lohkon
- Pidätystoiminto: Pidä Hold-näppäintä painettuna tallentaaksesi nykyisen lohkon väliaikaisesti. Voidaan käyttää vain kerran kierroksella.
- HaamulohkotNäyttää palikoiden laskeutumispaikan puoliläpinäkyvässä muodossa
- YhdistelmäjärjestelmäJatkuva siivoaminen antaa lisäpisteitä ja visuaalisia tehosteita
- Erityistaidot:
- Pommiblokkaus (puhdistaa ympäröivän alueen)
- Laser Clear (puhdistaa koko rivin)
- Aikatauko (lohkot pysähtyvät 3 sekunniksi)
Visuaalisen suunnittelun vaatimukset
- Moderni käyttöliittymä:
- Liukuvärjäystausta tai hiukkastehosteet
- Lasiefektipelipaneeli
- Sujuvat animaatiosiirtymät
- Responsiivinen suunnittelu eri näytöille
- Rikkaat visuaaliset tehosteet:
- Sujuva animaatio lohkojen putoamisesta ja pyörimisestä
- Räjähdys- tai salamavaikutukset eliminoituina
- Näytön tärinäefekti, kun yhdistelmä saavutetaan
- Juhla-animaatio tasoa nostettaessa
- TeemajärjestelmäAinakin 3 erilaista visuaalista teemaa, joiden välillä voi vaihtaa
Äänitehostejärjestelmä
- Täydellinen äänipalaute: liikkuminen, pyöriminen, laskeutuminen, eliminointi, pelin loppu jne.
- Taustamusiikki: toistuvan pelin taustamusiikki
- Äänenvoimakkuuden säätöitsenäisesti säädettävät äänitehosteet ja taustamusiikin äänenvoimakkuus
Pelimuodot
- Klassinen tilaperinteinen Tetris-peli
- Aikarajoitettu tila: saavuta korkein pistemäärä tietyssä aikarajassa
- Haastetila: ennalta asetetut esteet vaikeusasteen lisäämiseksi
- Zen-tilaei aikapaineita, puhdasta pelinautintoa
Datatilasto-ominaisuudet
- Reaaliaikaiset tilastot: nykyinen pistemäärä, taso, selvitettyjen rivien määrä, peliaika
- Historia: korkein pistemäärä, paras taso, pelin kokonaisaika
- Saavutusjärjestelmä: avaa erilaisia pelisaavutuksia
- Paikallinen tallennustila: tallenna pelitiedot ja asetukset
Tekniset vaatimukset
- Käyttää puhdasta HTML5/CSS3/JavaScriptiä, ei tarvita ulkoisia kehyksiä
- Selkeä koodirakenne: olio-ohjelmointi, modulaarinen suunnittelu
- Suorituskyvyn optimointiSujuva 60 FPS:n animaatio, ei viivettä
- Yhteensopivuustukee yleisimpiä nykyaikaisia selaimia
- Responsiivinen suunnitteluYhteensopiva tietokoneiden ja mobiililaitteiden kanssa
Käyttäjäkokemus
- Intuitiiviset ohjeetSisäänrakennettu opetusohjelma ja painikekehotteet
- Tauko-/jatkamistoiminto: Keskeytä peli milloin tahansa
- Asetukset-valikko: Säädä pelin vaikeustasoa, äänitehosteita, visuaalisia tehosteita jne.
- Pelitilanteen tallennus: Tukee pelin tallentamista ja jatkamista
Koodin laatuvaatimukset
- Yksityiskohtaiset kommentitJokaisella funktiolla ja tärkeällä koodisegmentillä on oltava kuvaus
- Virheiden käsittelyKattava poikkeusten tallennus- ja käsittelymekanismi
- Elegantti koodiNoudata parhaita käytäntöjä, helppo ymmärtää ja ylläpitää
- LaajennettavuusHelppo lisätä uusia ominaisuuksia tulevaisuudessa
Toimita täydelliset HTML-tiedostot, jotka sisältävät kaiken CSS- ja JavaScript-koodin, jotta ne voidaan suorittaa suoraan selaimessa. Koodin tulee osoittaa ammattimaisia ohjelmointitaitoja ja syvällistä ymmärrystä pelikehityksestä.
Minipelissä Claudella on jotain meneillään. Sekä Opus että Sonnet generoivat vastaavat Tetris-lohkot tarpeen mukaan, erityisesti erikoislohkojen logiikan. Deepseek käsitteli Clauden huomiotta jättämän teeman, mutta jätti erikoislohkot huomiotta, minkä seurauksena Gemini 2.5 Pro generoi pelattavia lohkoja.
Deepseek-R1-0528: Tehtävä suoritettiin erittäin hyvin ja spesifikaatioiden mukaisesti, mutta erityinen lohkosuunnittelu jätettiin pois eikä sitä toteutettu lainkaan. Tämä voi johtua ongelmista kehotteiden sanojen seuraamisessa. Koko verkkosivu muistuttaa pelin käyttöliittymää, jossa kaikki painikkeet näyttävät vakiokomponenteilta.
Claude Opus 4: Erikoislohkojen ja muun logiikan logiikka valmistui ongelmitta, mutta teeman vaihtokehotteen hän ei toteuttanut. DeepSeek:n ongelmiin verrattuna tämä on pienempi ongelma, mutta käyttöliittymä on kovakoodattu ilman responsiivista logiikkaa, joten mittasuhteet ovat hieman pielessä, minkä vuoksi joitakin painikkeita ei voi klikata.
Claude Sonetti 4: Samankaltainen kuin Opus, mutta mielestäni Sonnet 4 on parempi kuin Opus. Sivun mukautus on myös hyvä. Tämä tuntuu siltä, että Sonnet voitti, koska se suoritti kaikki vaaditut toiminnot.
Gemini 2.5 Pro: Kaksoset kamppailevat jatkuvasti monimutkaisen logiikan kanssa. Tällä kertaa se oli täysin käyttökelvoton, koska tiilien sijoittelussa oli bugi, jonka vuoksi oli mahdotonta ennustaa, mihin he laskeutuisivat. Se on pahin mahdollinen.
Luulen, että olet tähän mennessä yhtä hämmästynyt DeepSeek-R1:n suorituskyvystä kuin minäkin.
On vaikea uskoa, että tämä on vain pieni mallipäivitys. Verrataanpa näiden mallien hintoja DeepSeek R1 0528:aan.
Opus 4 on 30 kertaa kalliimpi, ja se on Openrouterin hinnoittelulla – virallinen hinta olisi vieläkin hämmästyttävämpi.
malli | Kontekstin pituus | Syötehinta ($/M tokenia) | Lähtöhinta ($/M tokenia) | kuvan hinta ($/K tokenia) |
DeepSeek R1 0528 | 160 000 | 0.50 | 2.18 | – |
Gemini 2.5 pro -esikatselu | 1000 000 | 1.25 | 10 | 5.16 |
Claude Sonetti 4 | 200 000 | 3.00 | 15 | 4.80 |
Claude Opus 4 | 200 000 | 15.00 | 75 | 24.00 |
Tekoälyuutisten kanssa päivittäin tekemisissä olevana henkilönä olen nähnyt lukemattomia "läpimurtoja", jotka lopulta osoittautuvat "pettymykseksi". Mutta tällä kertaa tilanne on erilainen. DeepSeek-R1 on antanut minulle todellista toivoa.
Hintaero on 30-kertainen, mutta suorituskyky lähes sama.
Meidän ei enää tarvitse maksaa kohtuuttomia hintoja parhaiden tekoälyohjelmointimallien käyttämisestä, eikä meidän tarvitse tehdä tuskallisia kompromisseja kustannusten ja laadun välillä. Vielä inspiroivampaa on se, että tämä on oma mallimme.
Tämän lauseen kirjoitti tekoäly, ja mielestäni se on loistava: Todellinen vallankumous alkaa usein siitä, kun tavalliset ihmiset voivat kurottaa tähtiin.