Geçtiğimiz günlerde Deepseek-R1 0528 resmi olarak açık kaynaklı hale getirildi.
LiveCodeBench'te performansı OpenAI'nin o3 (yüksek) seviyesine yakın; Aider'in çok dilli kıyaslama testinde ise Claude Opus'a rakip oluyor.
Resmi web sitesinde piyasaya sürüldüğünde, ön uç yeteneklerini hızla test ettik ve bunların olağanüstü güçlü olduğunu gördük, bu da bu makalede ele alınan testlere yol açtı. Farklı modellerin belirli performanslarını sizinle paylaşmayı amaçlıyoruz.
Bu testin öncelikli olarak ön uç yeteneklerine odaklandığını ve bu nedenle farklı modellerin performansını nesnel olarak incelemenin önemli olduğunu belirtmek önemlidir. Kendi testlerinizi yürütmek ve içgörülerinizi ve bulgularınızı paylaşmak için sağladığımız istemleri kullanabilirsiniz.
Aynı istemi kullanarak bunu Claude Opus 4, Sonnet 4, Gemini 2.5 Pro ve DeepSeek R1-0528ve giderek zorlaşan altı ön uç geliştirme görevinde yarışmalarını sağladık.
Sabırsızlananlar için sonuç şu şekilde:
Deepseek-R1-0528, ön uç yeteneklerinde Opus 4'ün biraz gerisinde kalıyor ancak daha iyi performans gösteriyor Sone 4 ve Gemini 2.5 Pro.
Temel olarak, Opus'un tamamlayabildiği herhangi bir görevi R1 de tamamlayabilir ve hatta Opus 4'ün tamamlayamadığı görevleri bile R1 halledebilir, ancak tamamlanma oranları ve sonuç kalitesi biraz daha düşük olur.
R1 ile diğer üçü arasındaki fiyat farkını düşündüğümüzde bu performansın zaten mükemmel olduğunu görüyoruz, R2'nin ne kadar etkileyici olacağını ise ancak tahmin edebiliyoruz.
Test 1: Depo Yönetim Sistemi
İstem: Lütfen aşağıdaki gereksinimleri karşılayan eksiksiz bir web tabanlı ürün yönetim aracı oluşturmama yardım edin:
İşlevsel Gereksinimler
- Ürün Yönetimi
- Ürün Bilgi Girişi: Ürün adı, türü/kategorisi, SKU numarası, fiyatı, stok miktarı
- Ürün görsel yönetimi: Resim yükleme ve önizleme desteği (bir dosya seçiciyle simüle edilmiştir)
- Ürün listesi görüntüleme: Tüm ürünleri tablo biçiminde, arama ve filtreleme desteğiyle görüntüleyin
- Ürün düzenleme: Ürün bilgisi değişikliğini destekleyin
- Ürün silme: Ürün silme desteği (onay istemiyle)
- Envanter yönetimi
- Gelen operasyonlar: Ürün stok miktarını artırın, gelen zamanı ve miktarı kaydedin
- Giden operasyonlar: Ürün stok miktarını azaltın, çıkış zamanını ve miktarını kaydedin
- Envanter kayıtları: Her ürün için envanter değişikliği geçmişini görüntüler
- Arayüz özellikleri
- Gösterge Tablosu: Toplam ürün sayısı, toplam stok değeri, düşük stok uyarıları vb. gibi istatistikleri görüntüler.
- Duyarlı tasarım: Masaüstü ve mobil cihazlara uyarlanabilir
- Veri kalıcılığı: Verileri kaydetmek için localStorage'ı kullanır
Teknik gereksinimler
Stiller ve simgeler
- CSS çerçevesi: TailwindCSS 3.0+ CDN'yi kullanır
- Simge kütüphanesi: Heroicons veya Feather Icons CDN'yi kullanır
- Yazı tipi: Google Fontlarını Kullan
Kod Yapısı
- Tek sayfalık başvuru: HTML + CSS + JavaScript
- Modüler tasarım: Fonksiyonları farklı JavaScript modüllerine ayırın
- Veri biçimi: Ürün verilerini depolamak için JSON formatını kullanın
Arayüz Tasarım Gereksinimleri
- Modern kullanıcı arayüzü: Basit ve güzel arayüz tasarımı
- Renk düzeni: Profesyonel iş renk kombinasyonlarını kullanın
- Etkileşimli geri bildirim: Düğme tıklamaları, form doğrulaması ve diğer etkileşimli efektler
- Form doğrulaması: Gerekli alan doğrulaması, veri biçimi doğrulaması
Veri Yapısı Örneği
Lütfen tüm özelliklerin işlevsel olduğundan ve doğrudan tarayıcıda çalışabildiğinden emin olarak, gerekli tüm CSS ve JavaScript kodlarını içeren eksiksiz bir HTML dosyası oluşturun.
Test sonuçlarına bir bakalım. Mantık aslında oldukça karmaşıktır, modelin bağlam uzunluğunu, estetik duygusunu ve mantıksal işleme yeteneklerini test eder.
Bu durumda Deepseek haricindeki tüm modeller başarısız oldu. Claude 4'ün çevirisi Dürüst olmak gerekirse pek de öyle değildi.
Derin Arama-R1-0528: R1'in yükseltilmiş sürümü çok güçlü. Gördüğünüz gibi, arayüz çok profesyonel ve ayrıca yeni ürünler yaratabilir, normal giden ve gelen işlemleri gerçekleştirebilir ve ürün, envanter yönetimi ve envanter raporlarını üç sayfaya bölebilirsiniz, bu da genel olarak çok açıktır. Ayrıca özel bir gösterge paneli sayfası var ve test için bazı örnek veriler yazdı. Diğer modellerde veri yok ve ürün eklemek işe yaramıyor, bu nedenle test etmek tamamen imkansız.
Claude'un Eseri 4: SaaS platformlarında yaygın olan kenar çubuğu yerine üst gezinme çubuğunu kullanan, çok basit, büyük bir arayüzle başlar. Ürün eklemek, kaydederken bir hataya neden olur ve test etmeyi imkansız hale getirir.
Claude Sone 4: Opus 4 ile karşılaştırıldığında, arayüz daha da basit. "Ürün Ekle" düğmesine tıklamak yanıt vermiyor ve hiçbir form açılır penceresi görünmüyor. Diğer sayfalar esasen sadece yer tutucular.
İkizler 2.5 Pro: Google'ın sürümü Claude'unkinden daha iyi. Ürün eklemeye ve çalıştırmaya izin veriyor, ancak hatalar var. İlk denediğimde çalışıyordu, ancak video kaydettiğimde çalışmıyordu. Ancak, Gemini'nin etkileşim tasarımı oldukça karmaşık, envanter yönetimi ve kayıt tutmanın hepsi tek bir tabloda, bu da biraz zorluk yaratıyor.
Test 2: Piksel Animasyon Düzenleyicisi
Sırada görsel yetenek testi var. Onlardan P5.js kullanarak hareket modlarını destekleyen, nokta şekillerini, boyutlarını, hızlarını ve diğer koşulları ayarlayan bir piksel sanat animasyon editörü oluşturmalarını istedim.
Komut: Aşağıdaki teknik gereksinimleri karşılayan, P5.js tabanlı tam ekran etkileşimli piksel sanat animasyon oluşturucusu oluşturun:
Temel Özellikler
- P5.js kullanarak tam ekran piksel sanat animasyonu uygulayın, animasyon tüm görüntüleme alanını kaplasın
- Piksel ızgarasının toplam alanı, en küçük ızgara aralığında bile tam kapsama sağlamak için görünür alanın en az 10 katı olmalıdır
- Birden fazla animasyon modu sağlayın: Dalga, Darbe, Dalgalanma, Gürültü
- Birden fazla nokta şekli seçeneğini destekler: daire, kare, çarpı, üçgen, elmas vb.
- Tüm kontrol panelleri sayfanın sağ tarafına yerleştirilmiştir ve mobil cihazlarda alt tarafa daraltılabilir
Ayarlanabilir Parametreler
- Nokta yoğunluğu: Satır/sütun başına nokta sayısını kontrol edin
- Şekil boyutu: Noktaların boyutunu ayarlayın
- Animasyon hızı: Animasyon efektinin hızını ve genliğini kontrol edin
- Izgara aralığı: Noktalar arasındaki mesafeyi ayarlayın
Teknik Özellikler
- HTML5, TailwindCSS 3.0+ (CDN aracılığıyla tanıtıldı) ve P5.js kullanın
- Sistem ayarlarına varsayılan olarak tam karanlık/aydınlık mod değiştirme işlevselliğini uygulayın
- Kod, yalnızca görünür alandaki ve kenarlara yakın noktaları işleyen performans optimizasyon mantığını içermelidir
- Animasyonlar gecikme olmadan sorunsuz bir şekilde çalışmalıdır
Duyarlı tasarım
- Sayfalar tüm cihazlarda (mobil, tablet, masaüstü) kusursuz bir şekilde görüntülenmelidir
- Kontrol panelleri mobil görünümde daraltılabilir/genişletilebilir olmalıdır
- Farklı ekran boyutları için düzeni ve yazı tipi boyutlarını optimize edin
- Mobil cihazlarda iyi bir dokunmatik deneyimi sağlayın
Arayüz Elemanları
- Animasyon modu seçici (dalga, darbe, dalgalanma, gürültü)
- Şekil seçici (çeşitli şekilleri simgelerle görüntüler)
- Kaydırıcı denetimleri: yoğunluk, boyut, hız, aralık
- Tema değiştirme düğmesi
- Matris kaplama bilgilerini ve toplam nokta sayısını görüntüle
Sonuçlara bir göz atın. Dürüst olmak gerekirse, diğer modellerin bu testte bu kadar kötü performans göstereceğini beklemiyordum. Deepseek-R1 hariç, diğer modellerin animasyonları hiç çalışmadı.
Derin Arama-R1-0528: Kusursuz. Her düğme ve kaydırıcı normal şekilde çalışıyor ve noktalar düzgün bir şekilde hareket ediyor. Hatta nokta matrisi verisi bile ekledi ve renkler gece moduna geçtikten sonra bile tutarlı kalıyor. Tek küçük sorun, renk seçiminin seçili durumunda ufak bir sorun olması ancak bu, diğer modellerin feci performansıyla karşılaştırıldığında önemsiz.
Claude'un Eseri 4: İyi haber: piksel sanatı var. Kötü haber: hareket etmiyor. Sağ taraftaki içerik normal şekilde çalıştırılabiliyor ancak gece moduna geçtikten sonra renk şeması yanlış.
Claude Sone 4: Bu bir felaket. Piksel sanatı yok ve hatta düğme seçimi durumu bile eksik. Kaydırıcılar sadece noktalardan oluşuyor—varsayılan bileşenleri kullanabilirsiniz.
İkizler 2.5 Pro: Ayrıca piksel ızgarası olmayan bir hata bildiriyor. Sağ taraftaki içerik normal şekilde çalıştırılabiliyor ve tema değiştirme iyi çalışıyor, ancak varsayılan bileşenler biraz çirkin.
Test 3: Görüntü gradyan renk çıkarma aracı
Bu daha önce yazdığım bir araçtır. Mantığın çok fazla açıklaması yoktur, ancak stilin daha fazla açıklaması vardır. Ana işlevi bir görüntüden beş set degrade renk çıkarmaktır.
İstem: Aşağıdaki dosya içeriğine dayalı bir HTML web sayfası oluşturun, yüklenen resimlerden beş set degrade renginin çıkarılmasını destekleyin ve kullanıcıların beş set onaltılık degrade rengini doğrudan kopyalamasına izin verin. Renk çıkarma işlevinin uygulanması gerekir.
- NetEase Cloud Music tarzı görsel tasarımını kullanın, vurgu olarak #FE1110'a benzer bir renkle beyaz arka plan kullanın
- Önemli noktaları vurgulamak için büyük yazı tiplerini veya sayıları vurgulayın. Odak alanlarını vurgulamak için büyük boyutlu görsel öğeler ekleyin ve daha küçük öğelerle kontrast yaratın.
- Çince ve İngilizce metinleri karıştırın. Kalın, büyük Çince karakterler ve daha küçük İngilizce metinleri vurgu olarak kullanın.
- Veri görselleştirme veya dekoratif öğeler olarak basit çizgi çizilmiş grafikler kullanın.
- Teknolojik bir etki yaratmak için vurgu renklerinin şeffaflık geçişini kullanın; ancak farklı vurgu renklerinin birbirine karışmamasına dikkat edin.
- Apple'ın resmi web sitesi animasyonlarını taklit edin, fare kaydırma animasyonları tetikler
- Veriler, temayla tutarlı stiller ile çevrimiçi grafik bileşenlerinden referans alınabilir
- Framer Motion'ı kullanın (CDN aracılığıyla)
- HTML5, TailwindCSS 3.0+ (CDN aracılığıyla) ve gerekli JavaScript'i kullanın
- Font Awesome veya Material Icons (CDN aracılığıyla) gibi profesyonel simge kitaplıklarını kullanın
- Birincil simgeler olarak emojileri kullanmaktan kaçının
- Sol alt köşedeki kapsül düğmesi yazarın Twitter kullanıcı adını görüntüler
Bu durumda Claude sonunda harika bir iş çıkardı. Deepseek-R1-0528'in sayfa detayları ve estetiği etkileyici, ancak işlevsellik uygulanmamış. Opus 4 ve Sonnet 4 sayfaları daha basit ama en azından işlevsel, Gemini ise hiç işlevsel değil.
Derin Arama-R1-0528: İstemimi tekrar kullandıktan sonra Deepseek'in sayfa estetiği gerçekten eşsiz. Ayrıca sayfaya uygulama senaryoları ve işlem süreleri gibi çok sayıda SEO dostu içerik ekledi. Gradyan renkli ekran kartları da oldukça ayrıntılı, ancak renk seçimi mantığı uygulanmamış.
Claude'un Eseri 4: Bu sefer Claude sonunda hayal kırıklığına uğratmadı ve sayfa işlevselliğini tamamladı, ancak sayfa içeriği çok basit, yalnızca görselleri ve sonuçları yüklemek için bir yer var ve renk seçme mantığı da zayıf. Ancak, en azından işe yarıyor.
Claude Sone 4: Sonnet 4'te de işlevsellik tamamlanmış durumda ve hatta Sonnet'in sonuçlarının Opus'unkinden daha iyi olduğunu düşünüyorum, yine de Deepseek kadar zengin değil.
İkizler 2.5 Pro: En kötüsü bu. Sadece sayfa detayları ve estetiği eksik değil, aynı zamanda işlevsellik de uygulanmamış ve başlangıçta çöküyor.
Test 4: Beyaz Gürültü Günlük Alıntı Web Sitesi
Sırada yeni bir sekme sayfası eklentisi için mükemmel olan beyaz gürültü günlük alıntı web sitesi oluşturucusu var. Spotify'dan beyaz gürültü çalmayı destekler ve web sayfası görüntülenir
Komut: Lütfen aşağıdaki gereksinimleri karşılayan basit ve şık bir günlük alıntı web sitesi oluşturmama yardım edin:
Görsel Tasarım
- Arkaplan Görüntüsü: Aşağıdaki bağlantılardan rastgele yüksek kaliteli manzara resimlerini arka plan resmi olarak seçin
- Resim Bağlantıları:XXXXXX
- Görüntü İşleme: Metnin net ve okunabilir kalmasını sağlamak için 25% siyah maske ve hafif bir Gauss bulanıklığı ekleyin
- Genel Stil: Minimalist ve modern, web sayfasının arka planında yer alan manzara resimleriyle daldırma hissini arttırın
- Animasyon çerçevesi için anime.js'i (CDN aracılığıyla tanıtıldı: JsDelivr jsdelivr.com), HTML5'i, TailwindCSS 3.0+'ı (CDN aracılığıyla tanıtıldı) ve gerekli JavaScript'i kullanın ve Font Awesome veya Material Icons (CDN aracılığıyla tanıtıldı) gibi profesyonel simge kütüphanelerini kullanın.
Zaman görüntüleme modülü
- Tepe: Ay ve gün biçimini (örneğin, "29 Mayıs") daha küçük bir yazı tipinde, ortada görüntüleyin
- İkinci sıra: “Hafta X · Ay takvimi X. ay X. gün” biçimini daha küçük bir yazı tipinde görüntüler
- Merkez: Güncel tarihi büyük beyaz yazı tipiyle, ortada vurgular
Teklif görüntüleme modülü
- İçerik: Çinli ve yabancı filozof ve yazarların klasik alıntılarını rastgele görüntüler
- Düzen: Alıntılar ortalanmış, yazı tipi boyutu orta ve satır aralığı rahat
- Atıf: “Yazar, XXX” veya “Filozof, XXX” sağ altta görüntülenir
- Alıntı Kütüphanesi: Motivasyon, yaşam içgörüleri ve bilgelik gibi çeşitli konularda alıntılar içerir
Müzik Çalma İşlevi
- Konum: Sayfanın sol alt köşesi, varsayılan olarak daraltılmıştır
- İçerik: Spotify beyaz gürültü çalma listesini yerleştir
- Kod:
Teknik Uygulama
- Duyarlı Tasarım: Masaüstü ve mobil cihazlara uyarlanmıştır
- Yazı Tipi Seçimi: Google Fonts tarafından sunulan zarif Çince yazı tiplerini kullanın
- Renk Şeması: Her türlü arka planda okunabilirliği sağlamak için çoğunlukla beyaz metin kullanın
- Yükleme Optimizasyonu: Sayfa performansını iyileştirmek için görsellerin tembel yüklenmesi
Etkileşimli Özellikler
- Otomatik Yenileme: Arka plan resmini ve alıntıyı her gün otomatik olarak değiştirir
- Manuel Yenileme: Kullanıcıların içeriği manuel olarak değiştirmesine olanak tanıyan bir yenileme düğmesi sağlar
Metin Yazarlığı Stili
- Teklif Seçimi: Kısa, olumlu ve felsefi alıntıları tercih ederim
- Dil Stili: Öz ve güçlü, aşırı uzunluktan kaçınılmış
- Tema Sınıflandırması: Yaşam anlayışları, ilham verici gelişim, bilge düşünceler, duygusal ifade vb.
Lütfen yukarıdaki gereksinimlere uygun, arayüzün estetik açıdan hoş, işlevsel olmasını ve iyi bir kullanıcı deneyimi sağlamasını sağlayarak eksiksiz bir HTML/CSS/JavaScript web sitesi oluşturun.
Bu test tamamen her modelin estetik anlayışını değerlendirmek içindir. Bu tür görüntüleme odaklı web sayfaları genellikle elde edilebilir.
Claude Opus 4'ün bu alanda hala oldukça yetkili olduğunu, ayrıntılara mükemmel dikkat gösterdiğini söylemek gerekir. Gemini 2.5 Pro da iyidir, hatta görüntü geçişlerine animasyon efektleri ekler. Deepseek ve Sonnet 4 aynı seviyededir.
Derin Arama-R1-0528: Önce Deepseek'i çalıştırdım ve zaten oldukça iyi olduğunu düşündüm. Genel estetikle ilgili ilk sorun, sol alt köşedeki müzik düğmesiydi, biraz fazla düzdü. Alıntı bölümünde de sorunlar vardı—siyah maske eklenmemeliydi ve metin hizalaması biraz bozuktu. Ancak, yenileme için bir animasyon efekti ekledi.
Claude'un Eseri 4: Opus 4'ün estetiği gerçekten kusursuz. Tüm yazı tiplerinin boyutu ve aralıkları çok rahat ve ünlü sözlerin alıntıları hem alıntı metni hem de tırnak işaretleri için şeffaflıkla işlenmiş. Spotify oynatıcısı bile genişletme/daraltma animasyonlu bir kullanıcı arayüzüne sarılmış. Mükemmel.
Claude Sone 4: Sonnet 4'ün etkisi Deepseek'in sorununa benzer. Müzik çalma düğmesi, metin boyutu, hizalama ve aralık daha da optimize edilebilir.
İkizler 2.5 Pro: Gemini'nin efekti de iyi, ancak metin gölgesini kaldırmak daha iyi olurdu. Ayrıca Spotify oynatıcı kullanıcı arayüzünü özelleştirdi ve metin ayrıntıları iyi. Geçiş efekti fark edilir, görüntüde bir germe efekti var.
Test 5: Uyku uygulaması sayfası oluşturma
Sırada mobil uygulama testi var. Her birinin bir uyku izleme uygulaması oluşturmasını sağlayın. İstem, teknik yığını ve tasarım gereksinimlerini belirleyecek ve birden fazla etkileşimli sayfanın oluşturulmasını gerektirecektir.
İstem: Uyku izleme uygulaması geliştirme gereksinimleri
Proje genel bakışı
Lütfen dört ana işlevsel sayfadan oluşan eksiksiz bir uyku izleme uygulaması oluşturmama yardım edin. Arayüz estetik açıdan hoş ve profesyonel olmalıdır.
Teknik yığın gereksinimleri
Önyüz teknolojileri
– HTML5 – Sayfa yapısı
– TailwindCSS v3.0+ – Stil çerçevesi (CDN aracılığıyla tanıtıldı)
– JavaScript – Gerekli etkileşim mantığı
– Anime.js v4.0.2 – Animasyon efekt kütüphanesi
- Kanada:
https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm
Simgeler ve grafikler
- Simge kütüphanesi: Font Awesome veya Material Icons (CDN)
- Grafik bileşenleri: Çevrimiçi grafik bileşenleri, stilleri temayla tutarlı olmalıdır
- Veri görselleştirme: Uyku verilerinin grafiksel gösterimini destekler
Tasarım gereksinimleri
Duyarlı tasarım
- Tamamen duyarlı düzen
- Mobil öncelikli tasarım
- Hem masaüstü hem de mobil cihazlarda iyi görüntü
Etkileşim etkileri
- Düğme etkileşimi: Gezinme sırasındaki efekt biraz büyütüldü
Form etkileşimi: Giriş alanı odaklandığında bir degrade kenarlık görüntüle
Kart etkileşimi: Üzerine gelindiğinde gölgeyi koyulaştır
Animasyon efektleri: Pürüzsüz sayfa animasyonları elde etmek için Anime.js kullanın
İşlevsel Sayfa Gereksinimleri
Lütfen bir uyku izleme uygulaması için gerekli olan tüm sayfaları oluşturun. Bunlara şunlar dahildir ancak bunlarla sınırlı değildir:
- Ana sayfa/gösterge paneli
- Uyku kaydı sayfası
- Veri analizi sayfası
- Ayarlar sayfası
- Diğer ilgili işlevsel sayfalar
Kod Çıktı Gereksinimleri
- Her sayfa bağımsız bir HTML dosyasıdır
- Tam yorumlarla net kod yapısı
- Tüm CDN bağlantılarının erişilebilir olduğundan emin olun
- Tam, çalıştırılabilir kod sağlayın
Mobil mantık ve arayüz açısından Cluade Opus 4, iyi mantıkla birden fazla sayfayı tamamlayarak gücünü bir kez daha gösterdi. Diğer modeller yalnızca tek bir sayfa üretti, ancak Deepseek R1 0528 estetik açıdan aniden hedefi tutturdu, güzel bir stile sahipti. Yalnızca tek bir sayfa üretmesine rağmen çok eksiksizdi.
Derin Arama-R1-0528: Sadece tek bir sayfa oluşturuldu, ancak genel estetik iyi. Kartların detayları ve simgelerin kullanımı iyi yapılmış ve tüm sayfa tamamlanmış ve uzun. Ayrıca, gezinme için duyarlı tasarım uygulandı ve bu da mobil ve masaüstü cihazlarda tamamen farklı düzenlerle sonuçlandı.
Claude'un Eseri 4: Gerçekten güçlü, sadece Opus4 tüm sayfaları eksiksiz oluşturuyordu, ancak bu seferki estetik tasarım çok iyi değil, web sayfası mantığı kullanılıyor ve gezinme ikonları çok küçük.
Claude Sone 4: Sadece tek bir sayfa oluşturuldu ve hatalar bildirildi, estetik açıdan kötü bir tasarıma sahip olmasına rağmen görev tamamlandı.
İkizler 2.5 Pro: Google her zaman işleri farklı yapar. Her sayfayı ayrı ayrı oluşturur ve birbirleriyle etkileşime giremeyen dört dosya sağlar. Ek olarak, tüm sayfalar hatalar bildirdi, her sayfa yalnızca gezinme içeriyordu ve içerik içermiyordu, bu da oldukça hayal kırıklığı yarattı.
Test 6: Karmaşık İşlevsellik—Tetris
Son olarak, küçük bir oyun testiyle bitirdim. Özel bloklar, tema değiştirme, blok iniş tahmini, blok depolama ve daha fazlasıyla nispeten karmaşık bir Tetris oyunu tasarladım - gerçek bir nihai meydan okuma.
Komut: Lütfen aşağıdaki gereksinimleri karşılayan, tam işlevli, görsel olarak çekici bir Tetris web oyunu oluşturmama yardım edin:
Temel oyun özellikleri
- Tam Tetris mekanizması: 7 standart blok (I, O, T, S, Z, J, L)
- Pürüzsüz kontroller: sola ve sağa hareket, dönme, hızlı bırakma, anında bırakma
- Smart elimination system: supports eliminating 1-4 rows at a time with special animation effects
- Progressive difficulty system: automatically increases the drop speed and level based on the number of rows eliminated
Gelişmiş özellikler
- Preview system: displays the next and next-next blocks
- Hold Function: Hold the Hold key to temporarily store the current block. Can only be used once per round
- Ghost Blocks: Displays the landing position of blocks in semi-transparent form
- Combo System: Continuous clearing grants extra points and visual effects
- Special Skills:
- Bomb Block (clears surrounding area)
- Laser Clear (clears entire row)
- Time Pause (blocks stop falling for 3 seconds)
Görsel Tasarım Gereksinimleri
- Modern UI Interface:
- Gradient background or particle effects
- Glass effect game panel
- Smooth animation transitions
- Responsive design for different screens
- Rich visual effects:
- Smooth animation of blocks falling and rotating
- Explosion or flash effects when eliminated
- Screen shake effect when combo is achieved
- Celebration animation when level is upgraded
- Theme system: At least 3 different visual themes to switch between
Ses efekti sistemi
- Complete sound feedback: movement, rotation, landing, elimination, game end, etc.
- Background music: looping game BGM
- Volume control: independently adjustable sound effects and background music volume
Oyun modları
- Classic mode: traditional Tetris gameplay
- Time-limited mode: achieve the highest score within a specified time limit
- Challenge mode: pre-set obstacles to increase difficulty
- Zen mode: no time pressure, pure enjoyment of the game
Veri istatistikleri özellikleri
- Real-time statistics: current score, level, number of lines cleared, game time
- History: highest score, best level, total game time
- Achievement system: unlock various game achievements
- Local storage: save game records and settings
Teknik gereksinimler
- Uses pure HTML5/CSS3/JavaScript, no external frameworks required
- Clear code structure: object-oriented programming, modular design
- Performance optimization: smooth 60FPS animation, no lag
- Compatibility: supports mainstream modern browsers
- Duyarlı tasarım: Compatible with PCs and mobile devices
Kullanıcı deneyimi
- Intuitive instructions: Built-in tutorial and button prompts
- Pause/resume function: Pause the game at any time
- Settings menu: Adjust game difficulty, sound effects, visual effects, etc.
- Game state saving: Supports saving and resuming the game
Kod kalitesi gereksinimleri
- Detailed comments: Each function and important code segment must have a description
- Error handling: Comprehensive exception capture and handling mechanism
- Elegant code: Follow best practices, easy to understand and maintain
- Extensibility: Easy to add new features in the future
Please provide complete HTML files containing all CSS and JavaScript code to ensure that they can be run directly in a browser. The code should demonstrate professional programming skills and a deep understanding of game development.
In the mini-game, Claude has something going on. Both Opus and Sonnet generated the corresponding Tetris blocks as required, especially the logic for special blocks. Deepseek handled the theme that Claude overlooked, but missed the special blocks, resulting in Gemini 2.5 Pro generating unplayable blocks.
Derin Arama-R1-0528: The task was completed very well and according to specifications, but the special block design was omitted and not implemented at all. This may be due to issues with following the prompt words. The entire webpage resembles a game interface, with all buttons appearing like standard components.
Claude'un Eseri 4: Completed the logic for special blocks and other logic without issues, but ignored the prompt for theme switching, which he did not implement. Compared to DeepSeek’s issues, this is a smaller problem, but the interface is hardcoded with no responsive logic, so the proportions are slightly off, making some buttons unclickable.
Claude Sone 4: Similar to Opus, but I think Sonnet 4 is better than Opus. The page adaptation is also good. This feels like Sonnet won, as it completed all the required functions.
İkizler 2.5 Pro: Gemini consistently struggles with complex logic. This time, it was completely unusable because the brick placement had a bug, making it impossible to predict where they would land. It’s the worst.
By now, I think you’re as amazed as I am by DeepSeek-R1’s performance.
It’s hard to believe this is just a small model upgrade. Let’s compare the prices of these models with DeepSeek R1 0528.
Opus 4 is 30 times more expensive, and that’s using Openrouter’s pricing—the official price would be even more staggering.
model | Context length | Input price($/M tokens) | Output price($/M tokens) | image price($/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 |
As someone who deals with AI news daily, I’ve witnessed countless “breakthroughs” that ultimately turn out to be “disappointing.” But this time is different. DeepSeek-R1 has given me real hope.
A 30-fold price difference yet nearly equivalent performance.
We no longer need to pay exorbitant prices to use the best AI programming models, nor do we have to make painful trade-offs between cost and quality. What’s even more inspiring is that this is our own model.
This sentence was written by AI, and I think it’s great: The true revolution often begins when ordinary people can reach for the stars.