Pojedynek czterech najlepszych modeli! Recenzja pokazuje, jak potężny jest Deepseek R1

W ciągu ostatnich kilku dni Deepseek-R1 0528 został oficjalnie udostępniony jako oprogramowanie typu open source.

W teście LiveCodeBench jego wydajność jest niemal porównywalna z o3 OpenAI (wysoka); w wielojęzycznym teście porównawczym Aidera wypada równie dobrze, co Claude Opus.

Gdy został uruchomiony na oficjalnej stronie, szybko przetestowaliśmy jego możliwości front-endu i stwierdziliśmy, że są wyjątkowo silne, co doprowadziło do testów opisanych w tym artykule. Naszym celem jest podzielenie się z Tobą konkretnymi wynikami różnych modeli.

Ważne jest, aby zauważyć, że ten test koncentruje się przede wszystkim na możliwościach front-end, więc ważne jest, aby obiektywnie oceniać wydajność różnych modeli. Możesz użyć podpowiedzi, które udostępniamy, aby przeprowadzić własne testy i podzielić się swoimi spostrzeżeniami i odkryciami.

Korzystając z tego samego monitu, wysłaliśmy go do Claude Opus 4, Sonnet 4, Gemini 2.5 Pro i DeepSeek R1-0528i kazał im rywalizować w sześciu coraz trudniejszych zadaniach z zakresu programowania front-end.

Dla tych, którzy nie mogą się doczekać, oto podsumowanie:

Deepseek-R1-0528 nieznacznie ustępuje Opus 4 pod względem możliwości front-endu, ale przewyższa go wydajnością Sonet 4 i Gemini 2.5 Pro.

Zasadniczo każde zadanie, którego Opus może wykonać, R1 również może wykonać, a nawet zadania, których Opus 4 nie może wykonać, R1 może wykonać, choć z nieco niższym wskaźnikiem ukończenia i jakością wyników.

Biorąc pod uwagę różnicę w cenie między R1 a pozostałymi trzema modelami, osiągi są już teraz znakomite, możemy sobie tylko wyobrazić, jak imponujący będzie R2.

Test 1: System zarządzania magazynem

Polecenie: Pomóż mi stworzyć kompletne narzędzie do zarządzania produktami oparte na sieci Web, które będzie spełniało następujące wymagania:

Wymagania funkcjonalne

1. Zarządzanie produktem

• Wprowadzanie informacji o produkcie: Nazwa produktu, typ/kategoria, numer SKU, cena, ilość w magazynie
• Zarządzanie wizerunkiem produktu:Obsługa przesyłania i podglądu obrazów (symulowanych za pomocą selektora plików)
• Wyświetlanie listy produktów: Wyświetlaj wszystkie produkty w formie tabeli, z obsługą wyszukiwania i filtrowania
• Edycja produktu:Wsparcie modyfikacji informacji o produkcie
• Usunięcie produktu:Wsparcie usuwania produktu (z monitem o potwierdzenie)

2. Zarządzanie zapasami

• Operacje przychodzące: Zwiększ ilość zapasów produktów, zarejestruj czas i ilość przychodzących produktów
• Operacje wychodzące: Zmniejsz ilość zapasów produktów, zapisz czas i ilość wysyłki
• Zapisy inwentaryzacyjne:Wyświetla historię zmian stanu magazynowego dla każdego produktu

3. Funkcje interfejsu

• Pulpit nawigacyjny: Wyświetla statystyki, takie jak całkowita liczba produktów, całkowita wartość zapasów, alerty o niskim stanie zapasów itp.
• Responsywny projekt:Możliwość dostosowania do komputerów stacjonarnych i urządzeń mobilnych
• Trwałość danych:Używa localStorage do zapisywania danych

Wymagania techniczne

Style i ikony

• Struktura CSS:Używa TailwindCSS 3.0+ CDN
• Biblioteka ikon:Używa Heroicons lub Feather Icons CDN
• Chrzcielnica:Użyj czcionek Google

Struktura kodu

• Aplikacja jednostronicowa:HTML + CSS + JavaScript
• Konstrukcja modułowa:Podzielenie funkcji na różne moduły JavaScript
• Format danych:Użyj formatu JSON do przechowywania danych produktu

Wymagania dotyczące projektu interfejsu

• Nowoczesny interfejs użytkownika:Prosty i piękny projekt interfejsu
• Paleta kolorów:Używaj profesjonalnych kombinacji kolorów biznesowych
• Interaktywna informacja zwrotna:Kliknięcie przycisku, walidacja formularza i inne interaktywne efekty
• Walidacja formularza:Weryfikacja wymaganego pola, walidacja formatu danych

Przykład struktury danych

Wygeneruj kompletny plik HTML zawierający cały niezbędny kod CSS i JavaScript, aby mieć pewność, że wszystkie funkcje będą działać i będą mogły działać bezpośrednio w przeglądarce.

Przyjrzyjmy się wynikom testu. Logika jest w rzeczywistości dość złożona, testując długość kontekstu modelu, poczucie estetyki i możliwości przetwarzania logicznego.

W tym przypadku wszystkie modele oprócz Deepseek zakończyły się niepowodzeniem. Tłumaczenie Claude'a 4 szczerze mówiąc, było całkiem nie tak.

Głębokie poszukiwanie-R1-0528: Ulepszona wersja R1 jest bardzo wydajna. Jak widać, interfejs jest bardzo profesjonalny, a także można tworzyć nowe produkty, wykonywać normalne operacje wychodzące i przychodzące oraz dzielić raporty o produktach, zarządzaniu zapasami i zapasach na trzy strony, co jest ogólnie bardzo przejrzyste. Jest również dedykowana strona pulpitu nawigacyjnego, a on napisał kilka przykładowych danych do testowania. Pozostałe modele nie mają danych, a dodawanie produktów nie działa, więc testowanie jest całkowicie niemożliwe.

Klaudiusz Opus 4: Zaczyna się od dużego interfejsu, bardzo prostego, używającego górnego paska nawigacyjnego zamiast paska bocznego, powszechnego na platformach SaaS. Dodawanie produktów powoduje błąd podczas zapisywania, co uniemożliwia testowanie.

Sonet Claude'a 4: W porównaniu do Opus 4 interfejs jest jeszcze bardziej podstawowy. Kliknięcie przycisku „Dodaj produkt” nie odpowiada, a nie pojawia się żadne wyskakujące okienko formularza. Pozostałe strony są w zasadzie tylko symbolami zastępczymi.

Gemini 2.5 Pro: Wersja Google jest lepsza od Claude'a. Pozwala dodawać produkty i uruchamia się, ale ma błędy. Działało, gdy próbowałem po raz pierwszy, ale nie, gdy nagrywałem wideo. Jednak projekt interakcji Gemini jest dość złożony, z zarządzaniem zapasami i prowadzeniem rejestrów w jednej tabeli, co dodaje trochę trudności.

Test 2: Edytor animacji pikselowych

Następnie jest test zdolności wizualnych. Poprosiłem ich o stworzenie edytora animacji pikselowej przy użyciu P5.js, obsługującego tryby ruchu, dostosowującego kształty punktów, rozmiary, prędkości i inne warunki.

Polecenie: Utwórz pełnoekranowy generator interaktywnych animacji pikselowych oparty na P5.js, spełniający następujące wymagania techniczne:

Główne cechy

• Wdróż animację pikselową na pełnym ekranie przy użyciu P5.js, tak aby animacja obejmowała cały obszar widoku
• Całkowita powierzchnia siatki pikseli musi być co najmniej 10 razy większa od widocznego obszaru, aby zapewnić pełne pokrycie nawet przy najmniejszych odstępach siatki
• Zapewnij wiele trybów animacji: Fala, Puls, Falowanie, Szum
• Obsługa wielu kształtów punktów: okrąg, kwadrat, krzyż, trójkąt, romb itp.
• Wszystkie panele sterowania umieszczono po prawej stronie strony i można je zwinąć do dołu na urządzeniach mobilnych

Regulowane parametry

• Gęstość punktów: Kontroluj liczbę punktów na wiersz/kolumnę
• Rozmiar kształtu: Dostosuj rozmiar kropek
• Prędkość animacji: Kontroluj prędkość i amplitudę efektu animacji
• Odstępy siatki: Dostosuj odległość między kropkami

Dane techniczne

• Użyj HTML5, TailwindCSS 3.0+ (wprowadzonego za pośrednictwem CDN) i P5.js
• Wdrożenie pełnej funkcjonalności przełączania trybu ciemnego/jasnego, domyślne ustawienia systemowe
• Kod musi zawierać logikę optymalizacji wydajności, renderującą tylko punkty znajdujące się w widocznym obszarze i blisko krawędzi
• Animacje muszą działać płynnie, bez opóźnień

Responsywny projekt

• Strony muszą wyświetlać się idealnie na wszystkich urządzeniach (telefonie komórkowym, tablecie, komputerze stacjonarnym)
• Panele sterowania powinny być zwijane/rozwijane w widoku mobilnym
• Optymalizacja układu i rozmiarów czcionek dla różnych rozmiarów ekranu
• Zapewnij dobre wrażenia dotykowe na urządzeniach mobilnych

Elementy interfejsu

• Wybór trybu animacji (fala, puls, tętnienie, szum)
• Selektor kształtów (wyświetla różne kształty z ikonami)
• Sterowanie suwakiem: gęstość, rozmiar, prędkość, odstępy
• Przycisk zmiany motywu
• Wyświetl informacje o nakładce macierzy i całkowitą liczbę punktów

Spójrz na wyniki. Szczerze mówiąc, nie spodziewałem się, że inne modele wypadną tak słabo w tym teście. Poza Deepseek-R1, animacje innych modeli w ogóle nie działały.

Głębokie poszukiwanie-R1-0528: Idealnie bezbłędny. Każdy przycisk i suwak działają normalnie, a punkty poruszają się płynnie. Dodano nawet dane matrycy punktowej, a kolory pozostają spójne po przełączeniu na tryb nocny. Jedynym drobnym problemem jest to, że wybrany stan wyboru kolorów ma niewielki problem, ale jest to nieistotne w porównaniu do katastrofalnej wydajności innych modeli.

Klaudiusz Opus 4: Dobra wiadomość: ma grafikę pikselową. Zła wiadomość: nie porusza się. Zawartość po prawej stronie można obsługiwać normalnie, ale schemat kolorów jest niepoprawny po przełączeniu na tryb nocny.

Sonet Claude'a 4: Ten jest katastrofą. Nie ma grafiki pikselowej, a nawet brakuje stanu wyboru przycisku. Suwaki to tylko kropki — równie dobrze można użyć domyślnych komponentów.

Gemini 2.5 Pro: Zgłasza również błąd bez siatki pikseli. Zawartość po prawej stronie można obsługiwać normalnie, a przełączanie motywów działa dobrze, ale domyślne komponenty są trochę brzydkie.

Test 3: Narzędzie do ekstrakcji kolorów gradientu obrazu

To narzędzie, które napisałem wcześniej. Nie ma zbyt wielu opisów logiki, ale jest więcej opisów stylu. Główną funkcją jest wyodrębnienie pięciu zestawów kolorów gradientowych z obrazu.

Monit: Wygeneruj stronę internetową HTML na podstawie następującej zawartości pliku, obsługuj wyodrębnianie pięciu zestawów kolorów gradientu z przesłanych obrazów i pozwól użytkownikom na bezpośrednie kopiowanie pięciu zestawów heksadecymalnych kolorów gradientu. Funkcja wyodrębniania kolorów musi zostać zaimplementowana.

1. Użyj projektu wizualnego w stylu NetEase Cloud Music, białego tła z kolorem podobnym do #FE1110 jako wyróżnienia
2. Podkreśl duże czcionki lub liczby, aby wyróżnić kluczowe punkty. Dołącz elementy wizualne o dużych rozmiarach, aby podkreślić obszary skupienia, tworząc kontrast z mniejszymi elementami.
3. Połącz tekst chiński i angielski. Użyj pogrubionych, dużych znaków chińskich i mniejszego tekstu angielskiego jako akcentów.
4. Użyj prostej grafiki rysowanej linią do wizualizacji danych lub jako elementu dekoracyjnego.
5. Użyj gradientu przezroczystości kolorów wyróżniających, aby stworzyć efekt inspirowany technologią, ale upewnij się, że różne kolory wyróżniające nie mieszają się ze sobą.
6. Naśladuj animacje z oficjalnej strony internetowej Apple, wykorzystując przewijanie myszy jako wyzwalacz animacji
7. Dane można odwoływać się do komponentów wykresów online, stosując style zgodne z tematem
8. Użyj Framer Motion (przez CDN)
9. Użyj HTML5, TailwindCSS 3.0+ (przez CDN) i niezbędnego JavaScript
10. Użyj profesjonalnych bibliotek ikon, takich jak Font Awesome lub Material Icons (za pośrednictwem CDN)
11. Unikaj używania emotikonów jako głównych ikon
12. Przycisk kapsułki w lewym dolnym rogu wyświetla nazwę autora na Twitterze

W tym przypadku Claude w końcu wykonał świetną robotę. Szczegóły strony i estetyka Deepseek-R1-0528 są imponujące, ale funkcjonalność nie jest zaimplementowana. Strony Opus 4 i Sonnet 4 są prostsze, ale przynajmniej funkcjonalne, podczas gdy Gemini w ogóle nie jest funkcjonalny.

Głębokie poszukiwanie-R1-0528: Po ponownym użyciu mojego monitu estetyka strony Deepseek jest naprawdę niezrównana. Dodał również wiele treści przyjaznych dla SEO do strony, takich jak scenariusze aplikacji i czasy przetwarzania. Karty wyświetlania w gradientowych kolorach są również bardzo szczegółowe, ale logika wyboru kolorów nie jest zaimplementowana.

Klaudiusz Opus 4: Tym razem Claude w końcu nie zawiódł, kończąc funkcjonalność strony, ale jej zawartość jest bardzo podstawowa, z miejscem na przesyłanie obrazów i wyników, a logika doboru kolorów jest również słaba. Jednak przynajmniej działa.

Sonet Claude'a 4: Sonnet 4 również uzupełnił tę funkcjonalność i uważam, że wyniki Sonnet są lepsze niż Opus, choć nadal nie są tak bogate jak Deepseek.

Gemini 2.5 Pro: Ta jest najgorsza. Nie tylko brakuje szczegółów i estetyki strony, ale funkcjonalność nie jest również zaimplementowana i zawiesza się przy uruchomieniu.

Test 4: Biały szum, codzienna strona internetowa z cytatami

Następny jest generator witryny internetowej z codziennymi cytatami z białego szumu, który idealnie nadaje się do wtyczki na nowej karcie. Obsługuje odtwarzanie białego szumu ze Spotify, a strona internetowa wyświetla

Polecenie: Pomóż mi stworzyć prostą i elegancką stronę internetową z codziennymi cytatami, spełniającą następujące wymagania:

Projekt wizualny

• Obraz tła: Wybierz losowo wysokiej jakości obrazy krajobrazowe z następujących linków jako obraz tła
• Linki do obrazów:XXXX
• Przetwarzanie obrazu: Dodaj czarną maskę 25% i delikatne rozmycie Gaussa, aby tekst pozostał wyraźny i czytelny
• Ogólny styl:Minimalistyczny i nowoczesny, z obrazami krajobrazowymi jako tłem strony internetowej, co zwiększa immersję
• Użyj anime.js (wprowadzonego przez CDN: JsDelivr jsdelivr.com) do stworzenia struktury animacji, HTML5, TailwindCSS 3.0+ (wprowadzonego przez CDN) i niezbędnego JavaScript, a także korzystaj z profesjonalnych bibliotek ikon, takich jak Font Awesome lub Material Icons (wprowadzonych przez CDN).

Moduł wyświetlania czasu

• Szczyt: Wyświetl miesiąc i dzień w formacie (np. „29 maja”), mniejszą czcionką i wyśrodkowanym
• Drugi rząd: Wyświetla format „Tydzień X · Kalendarz księżycowy X miesiąc X dzień” mniejszą czcionką
• Centrum:Podświetla bieżącą datę dużą białą czcionką, wyśrodkowaną

Moduł wyświetlania ofert

• Treść:Losowo wyświetla klasyczne cytaty chińskich i zagranicznych filozofów i pisarzy
• Układ:Cytaty są wyśrodkowane, rozmiar czcionki jest umiarkowany, a odstępy między wierszami są wygodne
• Atrybucja: „Pisarz, XXX” lub „Filozof, XXX” wyświetla się w prawym dolnym rogu
• Biblioteka cytatów:Zawiera cytaty na różne tematy, takie jak motywacja, spostrzeżenia życiowe i mądrość

Funkcja odtwarzania muzyki

• Lokalizacja:Lewy dolny róg strony, domyślnie zwinięty
• Treść: Osadź playlistę Spotify z białym szumem
• Kod:

Wdrożenie techniczne

• Projekt responsywny:Dostosowany do komputerów stacjonarnych i urządzeń mobilnych
• Wybór czcionki:Używaj eleganckich chińskich czcionek wprowadzonych przez Google Fonts
• Schemat kolorów: Używaj głównie białego tekstu, aby zapewnić czytelność na wszystkich tłach
• Optymalizacja ładowania:Leniuchowe ładowanie obrazów w celu poprawy wydajności strony

Funkcje interaktywne

• Automatyczne odświeżanie: Automatycznie zmienia obraz tła i cytat każdego dnia
• Odświeżanie ręczne:Zapewnia przycisk odświeżania, umożliwiający użytkownikom ręczną zmianę treści

Styl copywritingu

• Wybór oferty:Preferuj krótkie, pozytywne i filozoficzne cytaty
• Styl języka:Zwięzły i mocny, unikający nadmiernej długości
• Klasyfikacja tematyczna:Wgląd w życie, inspirujący rozwój, mądre myśli, wyrażanie emocji itp.

Prosimy o wygenerowanie kompletnej witryny HTML/CSS/JavaScript zgodnie z powyższymi wymaganiami, upewniając się, że interfejs jest estetyczny, funkcjonalny i zapewnia dobre doświadczenie użytkownika.

Ten test ma na celu wyłącznie ocenę zrozumienia estetyki przez każdy model. Ten typ strony internetowej zorientowanej na wyświetlanie jest ogólnie osiągalny.

Trzeba powiedzieć, że Claude Opus 4 jest nadal dość autorytatywny w tej dziedzinie, z doskonałą dbałością o szczegóły. Gemini 2.5 Pro jest również dobry, nawet dodając efekty animacji do przejść obrazu. Deepseek i Sonnet 4 są na tym samym poziomie.

Głębokie poszukiwanie-R1-0528: Najpierw uruchomiłem Deepseek i pomyślałem, że jest już całkiem dobry. Pierwszym problemem z ogólną estetyką był przycisk muzyki w lewym dolnym rogu, który był trochę za płaski. Sekcja cytatów również miała problemy — czarna maska nie powinna zostać dodana, a wyrównanie tekstu było trochę nie tak. Jednak dodano efekt animacji dla odświeżenia.

Klaudiusz Opus 4: Estetyka Opus 4 jest naprawdę nieskazitelna. Rozmiar i odstępy między wszystkimi czcionkami są bardzo wygodne, a cytaty znanych powiedzeń zostały potraktowane z przezroczystością zarówno dla tekstu cytatu, jak i cudzysłowów. Nawet odtwarzacz Spotify został owinięty w interfejs użytkownika z animacją rozwijania/zwijania. Jest idealny.

Sonet Claude'a 4: Efekt Sonnet 4 jest podobny do problemu Deepseek. Przycisk odtwarzania muzyki, rozmiar tekstu, wyrównanie i odstępy można dalej zoptymalizować.

Gemini 2.5 Pro: Efekt Gemini jest również dobry, ale usunięcie cienia tekstu mogłoby go ulepszyć. Dostosowano również interfejs użytkownika odtwarzacza Spotify, a szczegóły tekstu są w porządku. Efekt przejścia jest zauważalny, z efektem rozciągania na obrazie.

Test 5: Generowanie strony aplikacji do spania

Następny jest test aplikacji mobilnej. Niech każdy z nich stworzy aplikację do monitorowania snu. Monit określi stos techniczny i wymagania projektowe oraz będzie wymagał wygenerowania wielu interaktywnych stron.

Monit: Wymagania dotyczące rozwoju aplikacji do monitorowania snu

Przegląd projektu

Pomóż mi stworzyć kompletną aplikację do monitorowania snu z czterema głównymi stronami funkcjonalnymi. Interfejs powinien być estetyczny i profesjonalny.

Wymagania techniczne dotyczące stosu

Technologie front-endowe

– HTML5 – Struktura strony

– TailwindCSS w wersji 3.0+ – Struktura stylów (wprowadzona poprzez CDN)

– JavaScript – Niezbędna logika interakcji

– Anime.js w wersji 4.0.2 – Biblioteka efektów animacji

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

Ikony i wykresy

• Biblioteka ikon: Font Awesome lub Material Icons (CDN)
• Elementy wykresu: Elementy wykresu online, style muszą być spójne z motywem
• Wizualizacja danych: Obsługuje wyświetlanie wykresów danych dotyczących snu

Wymagania projektowe

Responsywny projekt

• W pełni responsywny układ
• Projektowanie mobilne
• Dobry wyświetlacz zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych

Efekty interakcji

• Interakcja z przyciskiem: Nieco powiększony efekt najechania kursorem

Interakcja formularza: Wyświetl obramowanie gradientowe, gdy pole wprowadzania danych jest aktywne

Interakcja z kartą: Przyciemnij cień po najechaniu kursorem

Efekty animacji: Użyj Anime.js, aby uzyskać płynne animacje stron

Wymagania dotyczące strony funkcjonalnej

Wygeneruj wszystkie strony wymagane dla aplikacji monitorującej sen, w tym między innymi:

• Strona główna/pulpit nawigacyjny
• Strona z zapisem snu
• Strona analizy danych
• Strona ustawień
• Inne powiązane strony funkcjonalne

Wymagania dotyczące wyjścia kodu

• Każda strona jest niezależnym plikiem HTML
• Przejrzysta struktura kodu z pełnymi komentarzami
• Upewnij się, że wszystkie łącza CDN są dostępne
• Dostarcz kompletny, możliwy do uruchomienia kod

Jeśli chodzi o mobilną logikę i interfejs, Cluade Opus 4 po raz kolejny pokazał swoją moc, kończąc wiele stron dobrą logiką. Pozostałe modele generowały tylko jedną stronę, ale Deepseek R1 0528 nagle trafił w sedno pod względem estetyki, pięknym stylem. Chociaż wygenerował tylko jedną stronę, był bardzo kompletny.

Głębokie poszukiwanie-R1-0528: Wygenerowano tylko jedną stronę, ale ogólna estetyka jest dobra. Szczegóły kart i obsługa ikon są dobrze wykonane, a cała strona jest kompletna i długa. Ponadto wprowadzono responsywny projekt nawigacji, co zaowocowało zupełnie innymi układami na urządzeniach mobilnych i stacjonarnych.

Klaudiusz Opus 4: Rzeczywiście potężny, tylko Opus4 wygenerował wszystkie strony w całości, ale tym razem estetyczny projekt nie jest najlepszy, wykorzystuje logikę strony internetowej, a ikony nawigacyjne są zbyt małe.

Sonet Claude'a 4: Wygenerowano tylko jedną stronę i zgłoszono błędy, a projekt był mało estetyczny. Zadanie zostało wykonane zaledwie na tej podstawie.

Gemini 2.5 Pro: Google zawsze robi rzeczy inaczej. Generuje każdą stronę osobno, dostarczając cztery pliki, które nie mogą ze sobą współdziałać. Ponadto wszystkie strony zgłaszały błędy, przy czym każda strona zawierała tylko nawigację i żadnej treści, co jest dość rozczarowujące.

Test 6: Złożona funkcjonalność — Tetris

Na koniec zakończyłem małym testem gry. Zaprojektowałem stosunkowo skomplikowaną grę Tetris ze specjalnymi blokami, przełączaniem motywów, przewidywaniem lądowania bloków, przechowywaniem bloków i wieloma innymi rzeczami — prawdziwe ostateczne wyzwanie.

Polecenie: Pomóż mi stworzyć w pełni funkcjonalną, atrakcyjną wizualnie grę internetową Tetris, spełniającą następujące wymagania:

Główne cechy gry

1. Kompletny mechanizm Tetrisa: 7 standardowych bloków (I, O, T, S, Z, J, L)
2. Płynne sterowanie: ruch w lewo i prawo, obrót, szybkie opadanie, natychmiastowe opadanie
3. Inteligentny system eliminacji:obsługuje usuwanie 1-4 wierszy na raz za pomocą specjalnych efektów animacji
4. System progresywnego poziomu trudności:automatycznie zwiększa prędkość i poziom opadania na podstawie liczby wyeliminowanych rzędów

Zaawansowane funkcje

1. System podglądu: wyświetla bloki następny i następny-następny
2. Funkcja przytrzymania: Przytrzymaj klawisz Hold, aby tymczasowo zapisać bieżący blok. Można użyć tylko raz na rundę
3. Bloki Duchów:Wyświetla pozycję lądowania bloków w formie półprzezroczystej
4. System kombinowany:Ciągłe czyszczenie zapewnia dodatkowe punkty i efekty wizualne
5. Specjalne umiejętności:
   1. Blokada bombowa (oczyszcza okolicę)
   2. Laser Clear (czyści cały rząd)
   3. Pauza czasowa (bloki przestają spadać na 3 sekundy)

Wymagania dotyczące projektu wizualnego

1. Nowoczesny interfejs użytkownika:
   1. Tło gradientowe lub efekty cząsteczkowe
   2. Panel do gry z efektem szkła
   3. Płynne przejścia animacji
   4. Responsywny projekt dla różnych ekranów
2. Bogate efekty wizualne:
   1. Płynna animacja spadających i obracających się bloków
   2. Efekty eksplozji lub błysku po wyeliminowaniu
   3. Efekt drżenia ekranu po osiągnięciu kombinacji
   4. Animacja świętowania po podniesieniu poziomu
3. System tematyczny:Co najmniej 3 różne motywy wizualne, między którymi można się przełączać

System efektów dźwiękowych

1. Pełne sprzężenie zwrotne dźwięku: ruch, obrót, lądowanie, eliminacja, koniec gry itp.
2. Muzyka w tle: pętla gry BGM
3. Regulacja głośności: niezależnie regulowane efekty dźwiękowe i głośność muzyki w tle

Tryby gry

1. Tryb klasyczny:tradycyjna rozgrywka w Tetrisa
2. Tryb ograniczony czasowo:osiągnąć najwyższy wynik w określonym czasie
3. Tryb wyzwania:wstępnie ustawione przeszkody zwiększające trudność
4. Tryb zen:brak presji czasu, czysta przyjemność z gry

Funkcje statystyk danych

1. Statystyki w czasie rzeczywistym: aktualny wynik, poziom, liczba wyczyszczonych linii, czas gry
2. Historia:najwyższy wynik, najlepszy poziom, całkowity czas gry
3. System osiągnięć:odblokuj różne osiągnięcia w grze
4. Pamięć lokalna:zapisz zapisy gry i ustawienia

Wymagania techniczne

1. Używa czystego HTML5/CSS3/JavaScript, nie są wymagane żadne zewnętrzne ramy
2. Przejrzysta struktura kodu:programowanie obiektowe, projektowanie modułowe
3. Optymalizacja wydajności: płynna animacja 60FPS, bez opóźnień
4. Zgodność: obsługuje główne nowoczesne przeglądarki
5. Responsywny projekt:Kompatybilny z komputerami PC i urządzeniami mobilnymi

Doświadczenie użytkownika

1. Intuicyjne instrukcje:Wbudowany samouczek i monity przycisków
2. Funkcja pauzy/wznowienia: Wstrzymaj grę w dowolnym momencie
3. Menu ustawień: Dostosuj poziom trudności gry, efekty dźwiękowe, efekty wizualne itp.
4. Zapisywanie stanu gry:Obsługuje zapisywanie i wznawianie gry

Wymagania dotyczące jakości kodu

1. Szczegółowe komentarze:Każda funkcja i ważny segment kodu musi mieć opis
2. Obsługa błędów:Kompleksowy mechanizm przechwytywania i obsługi wyjątków
3. Elegancki kod: Postępuj zgodnie z najlepszymi praktykami, łatwymi do zrozumienia i utrzymania
4. Rozciągliwość:Łatwe dodawanie nowych funkcji w przyszłości

Proszę dostarczyć kompletne pliki HTML zawierające cały kod CSS i JavaScript, aby mieć pewność, że można je uruchomić bezpośrednio w przeglądarce. Kod powinien demonstrować profesjonalne umiejętności programistyczne i głębokie zrozumienie tworzenia gier.

W tej minigrze Claude ma coś do roboty. Zarówno Opus, jak i Sonnet wygenerowały odpowiednie bloki Tetris zgodnie z wymaganiami, zwłaszcza logikę bloków specjalnych. Deepseek zajął się tematem, który Claude przeoczył, ale pominął bloki specjalne, co spowodowało, że Gemini 2.5 Pro wygenerował niegrywalne bloki.

Głębokie poszukiwanie-R1-0528: Zadanie zostało wykonane bardzo dobrze i zgodnie ze specyfikacją, ale specjalny projekt bloku został pominięty i w ogóle nie został zaimplementowany. Może to być spowodowane problemami z podążaniem za słowami zachęty. Cała strona internetowa przypomina interfejs gry, a wszystkie przyciski wyglądają jak standardowe komponenty.

Klaudiusz Opus 4: Ukończył logikę dla specjalnych bloków i inną logikę bez problemów, ale zignorował monit o zmianę motywu, którego nie zaimplementował. W porównaniu do problemów DeepSeek, jest to mniejszy problem, ale interfejs jest zakodowany na stałe bez żadnej responsywnej logiki, więc proporcje są nieco nieodpowiednie, przez co niektóre przyciski są nieklikalne.

Sonet Claude'a 4: Podobnie jak Opus, ale myślę, że Sonnet 4 jest lepszy niż Opus. Adaptacja strony jest również dobra. Wydaje się, że wygrał Sonnet, ponieważ spełnił wszystkie wymagane funkcje.

Gemini 2.5 Pro: Gemini stale zmaga się ze skomplikowaną logiką. Tym razem było to całkowicie bezużyteczne, ponieważ układ cegieł miał błąd, uniemożliwiający przewidzenie, gdzie wylądują. To najgorsze.

Myślę, że jesteś równie zdumiony jak ja wydajnością DeepSeek-R1.

Trudno uwierzyć, że to tylko mała aktualizacja modelu. Porównajmy ceny tych modeli z DeepSeek R1 0528.

Opus 4 jest 30 razy droższy, i to przy użyciu cennika Openrouter — oficjalna cena byłaby jeszcze bardziej oszałamiająca.

model	Długość kontekstu	Cena wejściowa (tokeny $/M)	Cena wyjściowa (1 tokenów TP12T/M)	cena obrazu (tokeny $/K)
DeepSeek R1 0528	160 tys.	0.50	2.18	–
Podgląd Gemini 2.5 pro	1000 tys.	1.25	10	5.16
Sonet Claude'a 4	200 tys.	3.00	15	4.80
Claude Opus 4	200 tys.	15.00	75	24.00

Jako osoba zajmująca się codziennie wiadomościami o AI, byłem świadkiem niezliczonych „przełomów”, które ostatecznie okazały się „rozczarowujące”. Ale tym razem jest inaczej. DeepSeek-R1 dał mi prawdziwą nadzieję.

30-krotna różnica w cenie, a niemal taka sama wydajność.

Nie musimy już płacić wygórowanych cen, aby korzystać z najlepszych modeli programowania AI, ani nie musimy dokonywać bolesnych kompromisów między kosztami a jakością. Co jeszcze bardziej inspirujące, to fakt, że jest to nasz własny model.

To zdanie zostało napisane przez sztuczną inteligencję i uważam, że jest świetne: Prawdziwa rewolucja często zaczyna się wtedy, gdy zwykli ludzie mogą sięgnąć gwiazd.