Selama beberapa hari terakhir, Deepseek-R1 0528 telah resmi menjadi sumber terbuka.
Pada LiveCodeBench, kinerjanya hampir setara dengan o3 (tinggi) milik OpenAI; dalam uji benchmark multibahasa Aider, ia mampu bersaing dengan Claude Opus.
Ketika diluncurkan di situs web resmi, kami segera menguji kemampuan front-end-nya dan menemukan bahwa kemampuan tersebut sangat kuat, yang mengarah pada pengujian yang dibahas dalam artikel ini. Kami bertujuan untuk berbagi kinerja spesifik dari berbagai model dengan Anda.
Penting untuk dicatat bahwa pengujian ini terutama berfokus pada kapabilitas front-end, jadi penting untuk melihat kinerja berbagai model secara objektif. Anda dapat menggunakan petunjuk yang kami berikan untuk melakukan pengujian Anda sendiri dan berbagi wawasan serta temuan Anda.
Menggunakan perintah yang sama, kami mengirimkannya ke Claude Opus 4, Sonnet 4, Gemini 2.5 Pro, dan Nomor DeepSeek R1-0528, dan meminta mereka berkompetisi dalam enam tugas pengembangan front-end yang semakin menantang.
Bagi mereka yang tidak sabar, berikut kesimpulannya:
Deepseek-R1-0528 sedikit tertinggal dari Opus 4 dalam kemampuan front-end tetapi mengungguli Soneta 4 dan Gemini 2.5 Pro.
Pada dasarnya, tugas apa pun yang dapat diselesaikan Opus, juga dapat diselesaikan R1, dan bahkan tugas yang tidak dapat diselesaikan Opus 4, dapat ditangani R1, meskipun dengan tingkat penyelesaian dan kualitas hasil yang sedikit lebih rendah.
Mengingat perbedaan harga antara R1 dan tiga lainnya, performanya sudah sangat baik, dan kita hanya bisa membayangkan betapa mengesankannya R2 nanti.
Uji 1: Sistem Manajemen Gudang
Prompt: Tolong bantu saya membuat alat manajemen produk berbasis web lengkap dengan persyaratan berikut:
Persyaratan Fungsional
- Manajemen Produk
- Entri Informasi Produk: Nama produk, jenis/kategori, nomor SKU, harga, jumlah stok
- Manajemen gambar produk: Mendukung pengunggahan dan pratinjau gambar (disimulasikan dengan pemilih file)
- Tampilan daftar produk: Menampilkan semua produk dalam format tabel, dengan dukungan pencarian dan filter
- Pengeditan produk: Mendukung modifikasi informasi produk
- Penghapusan produk: Mendukung penghapusan produk (dengan konfirmasi)
- Manajemen inventaris
- Operasi masuk: Meningkatkan jumlah inventaris produk, mencatat waktu dan jumlah masuk
- Operasi keluar: Kurangi jumlah inventaris produk, catat waktu dan jumlah keluar
- Catatan inventaris: Menampilkan riwayat perubahan inventaris untuk setiap produk
- Fitur antarmuka
- Dasbor: Menampilkan statistik seperti jumlah total produk, nilai total inventaris, peringatan inventaris rendah, dll.
- Desain responsif: Dapat disesuaikan dengan perangkat desktop dan seluler
- Ketahanan data: Menggunakan localStorage untuk menyimpan data
Persyaratan teknis
Gaya dan ikon
- kerangka kerja CSS: Menggunakan TailwindCSS 3.0+ CDN
- Perpustakaan ikon: Menggunakan Heroicons atau Feather Icons CDN
- Huruf: Gunakan Google Fonts
Struktur Kode
- Aplikasi satu halaman: Bahasa Indonesia: HTML + CSS + JavaScript
- Desain modular: Membagi fungsi menjadi beberapa modul JavaScript
- Format data: Gunakan format JSON untuk menyimpan data produk
Persyaratan Desain Antarmuka
- Antarmuka Pengguna Modern: Desain antarmuka yang sederhana dan indah
- Skema warna: Gunakan kombinasi warna bisnis profesional
- Umpan balik interaktif: Klik tombol, validasi formulir, dan efek interaktif lainnya
- Validasi formulir: Validasi bidang yang diperlukan, validasi format data
Contoh Struktur Data
Harap buat berkas HTML lengkap berisi semua kode CSS dan JavaScript yang diperlukan, pastikan semua fitur berfungsi dan dapat berjalan langsung di browser.
Mari kita lihat hasil pengujiannya. Logikanya sebenarnya cukup rumit, menguji panjang konteks model, rasa estetika, dan kemampuan pemrosesan logis.
Dalam kasus ini, semua model kecuali Deepseek gagal. Terjemahan Claude 4 cukup aneh, sejujurnya.
Deepseek-R1-0528: Versi R1 yang ditingkatkan sangat canggih. Seperti yang Anda lihat, antarmukanya sangat profesional, dan Anda juga dapat membuat produk baru, melakukan operasi keluar dan masuk normal, serta membagi produk, manajemen inventaris, dan laporan inventaris ke dalam tiga halaman, yang secara keseluruhan sangat jelas. Ada juga halaman dasbor khusus, dan ia menulis beberapa contoh data untuk pengujian. Model lainnya tidak memiliki data, dan menambahkan produk tidak berfungsi, jadi pengujian sama sekali tidak mungkin dilakukan.
Claude Karya 4: Dimulai dengan antarmuka yang besar, sangat sederhana, menggunakan bilah navigasi atas, bukan bilah sisi yang umum di platform SaaS. Menambahkan produk akan menyebabkan kesalahan saat menyimpan, sehingga pengujian menjadi tidak mungkin.
Claude Soneta 4: Dibandingkan dengan Opus 4, antarmukanya bahkan lebih mendasar. Mengklik tombol “Tambah Produk” tidak memberikan respons, dan tidak ada formulir pop-up yang muncul. Halaman lainnya pada dasarnya hanya sebagai pengganti.
Gemini 2.5 Pro: Versi Google lebih baik daripada Claude. Versi ini memungkinkan penambahan produk dan proses, tetapi ada beberapa bug. Versi ini berfungsi saat saya pertama kali mencobanya, tetapi tidak berfungsi saat saya merekam video. Namun, desain interaksi Gemini cukup rumit, dengan manajemen inventaris dan pencatatan semuanya dalam satu tabel, yang menambah beberapa kesulitan.
Tes 2: Editor Animasi Pixel
Berikutnya adalah tes kemampuan visual. Saya meminta mereka membuat editor animasi seni piksel menggunakan P5.js, yang mendukung mode gerakan, menyesuaikan bentuk titik, ukuran, kecepatan, dan kondisi lainnya.
Petunjuk: Buat generator animasi seni piksel interaktif layar penuh berdasarkan P5.js, yang memenuhi persyaratan teknis berikut:
Fitur Inti
- Terapkan animasi seni piksel layar penuh menggunakan P5.js, dengan animasi yang mencakup seluruh area viewport
- Luas total grid piksel harus setidaknya 10 kali luas area yang terlihat untuk memastikan cakupan penuh bahkan pada jarak grid terkecil
- Menyediakan beberapa mode animasi: Gelombang, Pulsa, Riak, Kebisingan
- Mendukung berbagai pilihan bentuk titik: lingkaran, persegi, salib, segitiga, berlian, dll.
- Semua panel kontrol ditempatkan di sisi kanan halaman dan dapat dilipat ke bawah pada perangkat seluler
Parameter yang Dapat Disesuaikan
- Kepadatan titik: Kontrol jumlah titik per baris/kolom
- Ukuran bentuk: Sesuaikan ukuran titik
- Kecepatan animasi: Kontrol kecepatan dan amplitudo efek animasi
- Jarak grid: Sesuaikan jarak antar titik
Spesifikasi Teknis
- Gunakan HTML5, TailwindCSS 3.0+ (diperkenalkan melalui CDN), dan P5.js
- Terapkan fungsi peralihan mode gelap/terang secara penuh, dengan pengaturan default pada sistem
- Kode harus menyertakan logika pengoptimalan kinerja, hanya merender titik dalam area yang terlihat dan di dekat tepi
- Animasi harus berjalan lancar tanpa jeda
Desain responsif
- Halaman harus ditampilkan dengan sempurna di semua perangkat (ponsel, tablet, desktop)
- Panel kontrol harus dapat dilipat/diperluas dalam tampilan seluler
- Optimalkan tata letak dan ukuran font untuk berbagai ukuran layar
- Pastikan pengalaman sentuhan yang baik pada perangkat seluler
Elemen Antarmuka
- Pemilih mode animasi (gelombang, pulsa, riak, kebisingan)
- Pemilih bentuk (menampilkan berbagai bentuk dengan ikon)
- Kontrol slider: kepadatan, ukuran, kecepatan, jarak
- Tombol pengalih tema
- Menampilkan informasi overlay matriks dan jumlah total titik
Lihatlah hasilnya. Sejujurnya, saya tidak menyangka model lain akan berkinerja sangat buruk dalam pengujian ini. Kecuali Deepseek-R1, animasi model lain tidak berfungsi sama sekali.
Deepseek-R1-0528: Sempurna tanpa cacat. Setiap tombol dan slider berfungsi normal, dan titik-titik bergerak dengan lancar. Bahkan ditambahkan data dot matrix, dan warna tetap konsisten setelah beralih ke mode malam. Satu-satunya masalah kecil adalah bahwa status pemilihan warna memiliki sedikit masalah, tetapi ini dapat diabaikan dibandingkan dengan kinerja buruk model lainnya.
Claude Karya 4: Kabar baik: ada seni piksel. Kabar buruk: tidak bergerak. Konten di sisi kanan dapat dioperasikan secara normal, tetapi skema warnanya salah setelah beralih ke mode malam.
Claude Soneta 4: Yang ini bencana. Tidak ada seni piksel, dan bahkan status pemilihan tombol pun hilang. Slidernya hanya titik-titik—sebaiknya gunakan saja komponen default.
Gemini 2.5 Pro: Juga melaporkan kesalahan tanpa kisi piksel. Konten di sisi kanan dapat dioperasikan secara normal, dan pergantian tema berfungsi dengan baik, tetapi komponen default agak jelek.
Uji 3: Alat ekstraksi warna gradien gambar
Ini adalah alat yang saya tulis sebelumnya. Tidak banyak penjelasan tentang logikanya, tetapi ada lebih banyak penjelasan tentang gayanya. Fungsi utamanya adalah mengekstrak lima set warna gradien dari sebuah gambar.
Prompt: Buat halaman web HTML berdasarkan konten file berikut, dukung ekstraksi lima set warna gradien dari gambar yang diunggah, dan izinkan pengguna untuk langsung menyalin lima set warna gradien heksadesimal. Fungsi ekstraksi warna perlu diimplementasikan.
- Gunakan desain visual gaya NetEase Cloud Music, latar belakang putih dengan warna yang mirip dengan #FE1110 sebagai sorotan
- Tekankan huruf atau angka yang besar untuk menyorot poin-poin penting. Sertakan elemen visual yang berukuran besar untuk menekankan area fokus, sehingga menciptakan kontras dengan elemen yang lebih kecil.
- Campurkan teks bahasa Mandarin dan Inggris. Gunakan karakter bahasa Mandarin yang tebal dan besar serta teks bahasa Inggris yang lebih kecil sebagai aksen.
- Gunakan grafik garis sederhana untuk visualisasi data atau sebagai elemen dekoratif.
- Gunakan gradien transparansi warna sorotan untuk menciptakan efek terinspirasi teknologi, tetapi pastikan bahwa warna sorotan yang berbeda tidak saling bercampur.
- Meniru animasi situs web resmi Apple, dengan animasi pemicu pengguliran mouse
- Data dapat direferensikan dari komponen grafik online, dengan gaya yang konsisten dengan tema
- Gunakan Framer Motion (melalui CDN)
- Gunakan HTML5, TailwindCSS 3.0+ (melalui CDN), dan JavaScript yang diperlukan
- Gunakan pustaka ikon profesional seperti Font Awesome atau Material Icons (melalui CDN)
- Hindari penggunaan emoji sebagai ikon utama
- Tombol kapsul di pojok kiri bawah menampilkan pegangan Twitter penulis
Dalam kasus ini, Claude akhirnya melakukan pekerjaan yang hebat. Detail halaman dan estetika Deepseek-R1-0528 sangat mengesankan, tetapi fungsionalitasnya tidak diterapkan. Halaman Opus 4 dan Sonnet 4 lebih sederhana tetapi setidaknya fungsional, sedangkan Gemini tidak fungsional sama sekali.
Deepseek-R1-0528: Setelah menggunakan perintah saya lagi, estetika halaman Deepseek benar-benar tak tertandingi. Ia juga menambahkan banyak konten yang ramah SEO ke halaman tersebut, seperti skenario aplikasi dan waktu pemrosesan. Kartu tampilan berwarna gradien juga sangat terperinci, tetapi logika pemilihan warna tidak diterapkan.
Claude Karya 4: Kali ini, Claude akhirnya tidak mengecewakan, melengkapi fungsionalitas halaman, tetapi konten halaman sangat mendasar, hanya memiliki tempat untuk mengunggah gambar dan hasilnya, dan logika pemilihan warna juga buruk. Namun, setidaknya berfungsi.
Claude Soneta 4: Sonnet 4 juga melengkapi fungsionalitasnya, dan saya bahkan berpikir hasil Sonnet lebih baik daripada Opus, meski masih belum sekaya Deepseek.
Gemini 2.5 Pro: Ini yang terburuk. Tidak hanya detail halaman dan estetikanya yang kurang, tetapi fungsinya juga tidak diterapkan, dan macet saat memulai.
Uji 4: Situs Web Kutipan Harian White Noise
Berikutnya adalah generator situs web kutipan harian white noise, yang sangat cocok untuk plugin halaman tab baru. Plugin ini mendukung pemutaran white noise dari Spotify, dan halaman web ditampilkan
Prompt: Tolong bantu saya membuat situs web kutipan harian yang sederhana dan elegan dengan persyaratan berikut:
Desain Visual
- Gambar Latar Belakang: Pilih secara acak gambar lanskap berkualitas tinggi dari tautan berikut sebagai gambar latar belakang
- Tautan Gambar: : XXX
- Pengolahan Gambar: Tambahkan topeng hitam 25% dan sedikit Gaussian blur untuk memastikan teks tetap jelas dan dapat dibaca
- Gaya Keseluruhan: Minimalis dan modern, dengan gambar lanskap sebagai latar belakang halaman web untuk meningkatkan imersi
- Gunakan anime.js (diperkenalkan melalui CDN: JsDelivr jsdelivr.com) untuk kerangka kerja animasi, HTML5, TailwindCSS 3.0+ (diperkenalkan melalui CDN), dan JavaScript yang diperlukan, dan gunakan pustaka ikon profesional seperti Font Awesome atau Material Icons (diperkenalkan melalui CDN).
Modul tampilan waktu
- Atas: Menampilkan format bulan dan hari (misalnya, “29 Mei”), dalam font yang lebih kecil, di tengah
- Baris kedua: Menampilkan format “Minggu X · Kalender lunar bulan ke-X tanggal ke-X” dalam font yang lebih kecil
- Tengah: Menyorot tanggal saat ini dalam font putih besar, di tengah
Modul tampilan kutipan
- Isi: Menampilkan kutipan klasik dari filsuf dan penulis Tiongkok dan asing secara acak
- Tata Letak:Kutipan dipusatkan, ukuran font sedang, dan spasi baris nyaman
- Atribusi:“Penulis, XXX” atau “Filsuf, XXX” ditampilkan di kanan bawah
- Perpustakaan Kutipan:Berisi kutipan tentang berbagai topik seperti motivasi, wawasan hidup, dan kebijaksanaan
Fungsi Pemutaran Musik
- Lokasi: Pojok kiri bawah halaman, diciutkan secara default
- Isi: Sematkan daftar putar white noise Spotify
- Kode:
Implementasi Teknis
- Desain Responsif:Diadaptasi untuk perangkat desktop dan seluler
- Pemilihan Font: Gunakan font Cina yang elegan, diperkenalkan oleh Google Fonts
- Skema Warna: Terutama menggunakan teks putih untuk memastikan keterbacaan di semua latar belakang
- Optimasi Pemuatan: Pemuatan gambar yang lambat untuk meningkatkan kinerja halaman
Fitur Interaktif
- Penyegaran Otomatis: Secara otomatis mengubah gambar latar belakang dan kutipan setiap hari
- Penyegaran Manual: Menyediakan tombol penyegaran untuk memungkinkan pengguna mengubah konten secara manual
Gaya Penulisan Naskah Iklan
- Pemilihan Kutipan:Lebih suka kutipan yang pendek, positif, dan filosofis
- Gaya bahasa: Ringkas dan kuat, menghindari panjang yang berlebihan
- Klasifikasi TemaWawasan hidup, pertumbuhan yang inspiratif, pemikiran bijak, ekspresi emosi, dll.
Harap buat situs web HTML/CSS/JavaScript lengkap sesuai persyaratan di atas, pastikan antarmukanya menyenangkan secara estetika, fungsional, dan memberikan pengalaman pengguna yang baik.
Pengujian ini semata-mata untuk menilai pemahaman masing-masing model tentang estetika. Jenis halaman web yang berorientasi pada tampilan ini umumnya dapat dicapai.
Harus dikatakan bahwa Claude Opus 4 masih cukup berwibawa di area ini, dengan perhatian yang sangat baik terhadap detail. Gemini 2.5 Pro juga bagus, bahkan menambahkan efek animasi pada transisi gambar. Deepseek dan Sonnet 4 berada pada level yang sama.
Deepseek-R1-0528: Saya menjalankan Deepseek terlebih dahulu dan menurut saya sudah cukup bagus. Masalah pertama dengan estetika keseluruhan adalah tombol musik di sudut kiri bawah, yang agak terlalu datar. Bagian kutipan juga bermasalah—topeng hitam seharusnya tidak ditambahkan, dan perataan teks agak tidak tepat. Namun, ia menambahkan efek animasi untuk penyegaran.
Claude Karya 4: Estetika Opus 4 benar-benar sempurna. Ukuran dan spasi semua font sangat nyaman, dan kutipan untuk ucapan-ucapan terkenal telah ditangani dengan transparansi baik untuk teks kutipan maupun tanda kutip. Bahkan pemutar Spotify telah dibungkus dalam UI dengan animasi perluas/ciutkan. Sempurna.
Claude Soneta 4: Efek Soneta 4 mirip dengan edisi Deepseek. Tombol pemutar musik, ukuran teks, perataan, dan spasi semuanya dapat dioptimalkan lebih lanjut.
Gemini 2.5 Pro: Efek Gemini juga bagus, tetapi menghilangkan bayangan teks akan membuatnya lebih baik. Aplikasi ini juga telah menyesuaikan UI pemutar Spotify, dan detail teksnya bagus. Efek transisi terlihat jelas, dengan efek peregangan pada gambar.
Uji 5: Pembuatan halaman aplikasi tidur
Berikutnya adalah pengujian aplikasi seluler. Mintalah masing-masing dari mereka membuat aplikasi pemantauan tidur. Perintah tersebut akan menentukan tumpukan teknis dan persyaratan desain, serta mengharuskan pembuatan beberapa halaman interaktif.
Prompt: Persyaratan pengembangan aplikasi pemantauan tidur
Gambaran umum proyek
Tolong bantu saya membuat aplikasi pemantauan tidur lengkap dengan empat halaman fungsional utama. Antarmukanya harus menarik secara estetika dan profesional.
Persyaratan tumpukan teknis
Teknologi front-end
– Bahasa Indonesia: HTML5 – Struktur halaman
– Bahasa Indonesia: TailwindCSS v3.0+ – Kerangka gaya (diperkenalkan melalui CDN)
– Bahasa Indonesia: JavaScript – Logika interaksi yang diperlukan
– Anime.js v4.0.2 – Perpustakaan efek animasi
- Bahasa Inggris CDN:
https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm
Ikon dan grafik
- Pustaka ikon: Font Awesome atau Material Icons (CDN)
- Komponen bagan: Komponen bagan online, gaya harus konsisten dengan tema
- Visualisasi data: Mendukung tampilan grafik data tidur
Persyaratan desain
Desain responsif
- Tata letak yang sepenuhnya responsif
- Desain yang mengutamakan perangkat seluler
- Tampilan bagus di perangkat desktop dan seluler
Efek interaksi
- Interaksi tombol: Efek sedikit diperbesar saat mengarahkan kursor
Interaksi formulir: Menampilkan batas gradien saat bidang input difokuskan
Interaksi kartu: Menggelapkan bayangan saat melayang
Efek animasi: Gunakan Anime.js untuk mendapatkan animasi halaman yang halus
Persyaratan Halaman Fungsional
Harap buat semua halaman yang diperlukan untuk aplikasi pemantauan tidur, termasuk namun tidak terbatas pada:
- Halaman beranda/dasbor
- Halaman catatan tidur
- Halaman analisis data
- Halaman pengaturan
- Halaman fungsional terkait lainnya
Persyaratan Keluaran Kode
- Setiap halaman adalah file HTML independen
- Struktur kode yang jelas dengan komentar yang lengkap
- Pastikan semua tautan CDN dapat diakses
- Menyediakan kode yang lengkap dan dapat dijalankan
Dalam hal logika dan antarmuka seluler, Cluade Opus 4 sekali lagi menunjukkan kekuatannya, menyelesaikan beberapa halaman dengan logika yang baik. Model lain hanya menghasilkan satu halaman, tetapi Deepseek R1 0528 tiba-tiba menjadi pusat perhatian dalam hal estetika, dengan gaya yang indah. Meskipun hanya menghasilkan satu halaman, hasilnya sangat lengkap.
Deepseek-R1-0528: Hanya menghasilkan satu halaman, tetapi estetika keseluruhannya bagus. Detail kartu dan penanganan ikon dilakukan dengan baik, dan seluruh halaman lengkap dan panjang. Selain itu, desain responsif diterapkan untuk navigasi, menghasilkan tata letak yang sama sekali berbeda pada perangkat seluler dan desktop.
Claude Karya 4: Memang hebat, hanya Opus4 yang menghasilkan semua halaman secara lengkap, tetapi desain estetika kali ini tidak bagus, menggunakan logika halaman web, dengan ikon navigasi yang terlalu kecil.
Claude Soneta 4: Hanya menghasilkan satu halaman dan melaporkan kesalahan, dengan desain estetika yang buruk, hanya menyelesaikan tugas.
Gemini 2.5 Pro: Google selalu melakukan hal-hal yang berbeda. Google membuat setiap halaman secara individual, menyediakan empat file yang tidak dapat berinteraksi satu sama lain. Selain itu, semua halaman melaporkan kesalahan, dengan setiap halaman hanya berisi navigasi dan tidak ada konten, yang cukup mengecewakan.
Tes 6: Fungsionalitas Kompleks—Tetris
Akhirnya, saya mengakhirinya dengan uji coba permainan kecil. Saya merancang permainan Tetris yang relatif rumit dengan blok-blok khusus, pergantian tema, prediksi pendaratan blok, penyimpanan blok, dan banyak lagi—tantangan pamungkas yang sesungguhnya.
Prompt: Tolong bantu saya membuat game web Tetris yang berfungsi penuh dan menarik secara visual dengan persyaratan berikut:
Fitur permainan inti
- Mekanisme Tetris Lengkap: 7 blok standar (I, O, T, S, Z, J, L)
- Kontrol halus: gerakan kiri dan kanan, rotasi, jatuhkan cepat, jatuhkan instan
- Sistem eliminasi cerdas: mendukung penghapusan 1-4 baris sekaligus dengan efek animasi khusus
- Sistem kesulitan progresif: secara otomatis meningkatkan kecepatan jatuh dan level berdasarkan jumlah baris yang dihilangkan
Fitur lanjutan
- Sistem pratinjau: menampilkan blok berikutnya dan blok berikutnya-berikutnya
- Fungsi Tahan: Tekan tombol Hold untuk menyimpan blok saat ini sementara. Hanya dapat digunakan sekali per ronde
- Blok Hantu: Menampilkan posisi pendaratan blok dalam bentuk semi-transparan
- Sistem Kombo: Pembersihan berkelanjutan memberikan poin ekstra dan efek visual
- Keterampilan Khusus:
- Blok Bom (membersihkan area sekitar)
- Laser Clear (membersihkan seluruh baris)
- Jeda Waktu (balok berhenti jatuh selama 3 detik)
Persyaratan Desain Visual
- Antarmuka UI Modern:
- Latar belakang gradien atau efek partikel
- Panel permainan efek kaca
- Transisi animasi yang halus
- Desain responsif untuk layar yang berbeda
- Efek visual yang kaya:
- Animasi halus dari balok yang jatuh dan berputar
- Efek ledakan atau kilatan saat dihilangkan
- Efek goyangan layar saat kombo tercapai
- Animasi perayaan saat level ditingkatkan
- Sistem tema: Setidaknya 3 tema visual berbeda untuk beralih di antara
Sistem efek suara
- Umpan balik suara lengkap: pergerakan, rotasi, pendaratan, eliminasi, akhir permainan, dll.
- Musik latar: permainan berulang BGM
- Kontrol volume: efek suara dan volume musik latar yang dapat disesuaikan secara independen
Mode permainan
- Mode klasik: permainan Tetris tradisional
- Mode terbatas waktu: mencapai skor tertinggi dalam batas waktu yang ditentukan
- Mode tantangan: rintangan yang telah ditetapkan untuk meningkatkan kesulitan
- modus zen: tidak ada tekanan waktu, kesenangan murni dari permainan
Fitur statistik data
- Statistik waktu nyata: skor saat ini, level, jumlah baris yang dihapus, waktu permainan
- Sejarah: skor tertinggi, level terbaik, total waktu permainan
- Sistem pencapaian: membuka berbagai pencapaian permainan
- Penyimpanan lokal: menyimpan catatan dan pengaturan permainan
Persyaratan teknis
- Menggunakan HTML5/CSS3/JavaScript murni, tidak memerlukan kerangka kerja eksternal
- Struktur kode yang jelas: pemrograman berorientasi objek, desain modular
- Optimasi kinerja: Animasi 60FPS yang halus, tanpa jeda
- Kesesuaian: mendukung browser modern arus utama
- Desain responsif: Kompatibel dengan PC dan perangkat seluler
Pengalaman pengguna
- Instruksi intuitif: Tutorial bawaan dan petunjuk tombol
- Fungsi jeda/lanjutkan: Hentikan permainan kapan saja
- Menu pengaturan: Sesuaikan tingkat kesulitan permainan, efek suara, efek visual, dll.
- Penyimpanan status permainan: Mendukung penyimpanan dan melanjutkan permainan
Persyaratan kualitas kode
- Komentar terperinci:Setiap fungsi dan segmen kode penting harus memiliki deskripsi
- Penanganan kesalahan: Mekanisme penanganan dan penangkapan pengecualian yang komprehensif
- Kode elegan: Ikuti praktik terbaik, mudah dipahami dan dipelihara
- Kemungkinan diperpanjang: Mudah untuk menambahkan fitur baru di masa mendatang
Harap berikan berkas HTML lengkap yang berisi semua kode CSS dan JavaScript untuk memastikan bahwa berkas tersebut dapat dijalankan langsung di peramban. Kode tersebut harus menunjukkan keterampilan pemrograman profesional dan pemahaman mendalam tentang pengembangan game.
Dalam mini-game, Claude memiliki sesuatu yang terjadi. Baik Opus maupun Sonnet menghasilkan blok Tetris yang sesuai sebagaimana yang dibutuhkan, khususnya logika untuk blok khusus. Deepseek menangani tema yang diabaikan Claude, tetapi melewatkan blok khusus, yang mengakibatkan Gemini 2.5 Pro menghasilkan blok yang tidak dapat dimainkan.
Deepseek-R1-0528: Tugas diselesaikan dengan sangat baik dan sesuai spesifikasi, tetapi desain blok khusus dihilangkan dan tidak diterapkan sama sekali. Ini mungkin karena masalah dalam mengikuti kata-kata perintah. Seluruh halaman web menyerupai antarmuka permainan, dengan semua tombol muncul seperti komponen standar.
Claude Karya 4: Menyelesaikan logika untuk blok khusus dan logika lainnya tanpa masalah, tetapi mengabaikan perintah untuk peralihan tema, yang tidak ia terapkan. Dibandingkan dengan masalah DeepSeek, ini adalah masalah yang lebih kecil, tetapi antarmuka dikodekan secara keras tanpa logika yang responsif, sehingga proporsinya sedikit tidak tepat, membuat beberapa tombol tidak dapat diklik.
Claude Soneta 4: Mirip dengan Opus, tetapi menurut saya Sonnet 4 lebih baik daripada Opus. Adaptasi halamannya juga bagus. Rasanya Sonnet menang, karena telah menyelesaikan semua fungsi yang dibutuhkan.
Gemini 2.5 Pro: Gemini terus-menerus berjuang dengan logika yang rumit. Kali ini, logika itu sama sekali tidak dapat digunakan karena penempatan batu batanya bermasalah, sehingga mustahil untuk memprediksi di mana batu bata itu akan mendarat. Itu yang terburuk.
Sekarang, saya pikir Anda sama kagumnya seperti saya dengan kinerja DeepSeek-R1.
Sulit dipercaya bahwa ini hanyalah peningkatan model kecil. Mari bandingkan harga model ini dengan DeepSeek R1 0528.
Opus 4 30 kali lebih mahal, dan itu menggunakan harga Openrouter—harga resminya akan jauh lebih mengejutkan.
| model | Panjang konteks | Harga input (token $/M) | Harga keluaran (token $/M) | harga gambar (token $/K) |
| Nomor DeepSeek R1 0528 | 160 ribu | 0.50 | 2.18 | – |
| Pratinjau Gemini 2.5 pro | 1000 ribu | 1.25 | 10 | 5.16 |
| Claude Soneta 4 | 200 ribu | 3.00 | 15 | 4.80 |
| Claude Karya 4 | 200 ribu | 15.00 | 75 | 24.00 |
Sebagai seseorang yang setiap hari membaca berita AI, saya telah menyaksikan banyak sekali "terobosan" yang pada akhirnya menjadi "mengecewakan." Namun kali ini berbeda. DeepSeek-R1 telah memberi saya harapan nyata.
Perbedaan harga 30 kali lipat namun kinerjanya hampir setara.
Kita tidak perlu lagi membayar harga selangit untuk menggunakan model pemrograman AI terbaik, kita juga tidak perlu membuat pilihan yang sulit antara biaya dan kualitas. Yang lebih menginspirasi adalah bahwa ini adalah model kita sendiri.
Kalimat ini ditulis oleh AI, dan menurutku bagus sekali: Revolusi sesungguhnya sering kali dimulai ketika orang-orang biasa dapat meraih bintang.
