Cuộc so tài của bốn mẫu máy hàng đầu! Đánh giá cho thấy sức mạnh của Deepseek R1

Trong vài ngày qua, Deepseek-R1 0528 đã chính thức được mở mã nguồn.

Trên LiveCodeBench, hiệu suất của nó gần ngang bằng với o3 của OpenAI (cao); trong bài kiểm tra chuẩn đa ngôn ngữ của Aider, nó ngang bằng với Claude Opus.

Khi ra mắt trên trang web chính thức, chúng tôi đã nhanh chóng kiểm tra khả năng front-end của nó và thấy chúng cực kỳ mạnh mẽ, dẫn đến các bài kiểm tra được đề cập trong bài viết này. Chúng tôi muốn chia sẻ hiệu suất cụ thể của các mẫu khác nhau với bạn.

Điều quan trọng cần lưu ý là bài kiểm tra này chủ yếu tập trung vào khả năng front-end, vì vậy điều cần thiết là phải xem xét hiệu suất của các mô hình khác nhau một cách khách quan. Bạn có thể sử dụng lời nhắc mà chúng tôi cung cấp để tiến hành các bài kiểm tra của riêng bạn và chia sẻ hiểu biết và phát hiện của bạn.

Sử dụng cùng một lời nhắc, chúng tôi đã gửi nó đến Claude Opus 4, Sonnet 4, Gemini 2.5 Pro và DeepSeek R1-0528và yêu cầu họ cạnh tranh trong sáu nhiệm vụ phát triển giao diện người dùng ngày càng khó khăn hơn.

Đối với những ai không thể chờ đợi, đây là kết luận:

Deepseek-R1-0528 kém Opus 4 một chút về khả năng front-end nhưng lại vượt trội hơn Bài thơ 4 và Gemini 2.5 Pro.

Về cơ bản, bất kỳ nhiệm vụ nào Opus có thể hoàn thành thì R1 cũng có thể hoàn thành, thậm chí cả những nhiệm vụ mà Opus 4 không thể hoàn thành thì R1 cũng có thể xử lý, mặc dù tỷ lệ hoàn thành và chất lượng kết quả thấp hơn một chút.

Xét đến mức chênh lệch giá giữa R1 và ba chiếc còn lại, hiệu năng này đã rất tuyệt vời rồi, và chúng ta chỉ có thể tưởng tượng R2 sẽ ấn tượng đến mức nào.

Bài kiểm tra 1: Hệ thống quản lý kho

Yêu cầu: Vui lòng giúp tôi tạo một công cụ quản lý sản phẩm hoàn chỉnh trên nền tảng web với các yêu cầu sau:

Yêu cầu chức năng

1. Quản lý sản phẩm

• Nhập thông tin sản phẩm: Tên sản phẩm, loại/danh mục, số SKU, giá, số lượng hàng tồn kho
• Quản lý hình ảnh sản phẩm: Hỗ trợ tải lên và xem trước hình ảnh (mô phỏng bằng trình chọn tệp)
• Hiển thị danh sách sản phẩm: Hiển thị tất cả sản phẩm theo định dạng bảng, có hỗ trợ tìm kiếm và lọc
• Chỉnh sửa sản phẩm: Hỗ trợ sửa đổi thông tin sản phẩm
• Xóa sản phẩm: Hỗ trợ xóa sản phẩm (có nhắc nhở xác nhận)

2. Quản lý hàng tồn kho

• Hoạt động nhập cảnh: Tăng số lượng hàng tồn kho, ghi lại thời gian và số lượng hàng nhập
• Hoạt động xuất cảnh: Giảm số lượng hàng tồn kho, ghi lại thời gian và số lượng hàng xuất
• Hồ sơ kiểm kê: Hiển thị lịch sử thay đổi hàng tồn kho cho từng sản phẩm

3. Tính năng giao diện

• Bảng điều khiển: Hiển thị số liệu thống kê như tổng số sản phẩm, tổng giá trị hàng tồn kho, cảnh báo hàng tồn kho thấp, v.v.
• Thiết kế đáp ứng: Có thể thích ứng với máy tính để bàn và thiết bị di động
• Sự tồn tại của dữ liệu: Sử dụng localStorage để lưu dữ liệu

Yêu cầu kỹ thuật

Kiểu dáng và biểu tượng

• Khung CSS: Sử dụng TailwindCSS 3.0+ CDN
• Thư viện biểu tượng: Sử dụng Heroicons hoặc Feather Icons CDN
• Phông chữ: Sử dụng Google Fonts

Cấu trúc mã

• Ứng dụng một trang: HTML + CSS + JavaScript
• Thiết kế mô-đun: Chia nhỏ các hàm thành các mô-đun JavaScript khác nhau
• Định dạng dữ liệu: Sử dụng định dạng JSON để lưu trữ dữ liệu sản phẩm

Yêu cầu thiết kế giao diện

• Giao diện người dùng hiện đại: Thiết kế giao diện đơn giản và đẹp
• Bảng màu: Sử dụng các kết hợp màu sắc kinh doanh chuyên nghiệp
• Phản hồi tương tác: Nhấp vào nút, xác thực biểu mẫu và các hiệu ứng tương tác khác
• Xác thực biểu mẫu: Xác thực trường bắt buộc, xác thực định dạng dữ liệu

Ví dụ về cấu trúc dữ liệu

Vui lòng tạo một tệp HTML hoàn chỉnh chứa tất cả mã CSS và JavaScript cần thiết, đảm bảo rằng tất cả các tính năng đều hoạt động và có thể chạy trực tiếp trên trình duyệt.

Chúng ta hãy xem xét kết quả thử nghiệm. Logic thực sự khá phức tạp, kiểm tra độ dài ngữ cảnh, cảm quan thẩm mỹ và khả năng xử lý logic của mô hình.

Trong trường hợp này, tất cả các mô hình ngoại trừ Deepseek đều thất bại. Bản dịch của Claude 4 Thành thật mà nói thì khá là sai lầm.

Tìm kiếm sâu-R1-0528: Phiên bản nâng cấp của R1 rất mạnh mẽ. Như bạn thấy, giao diện rất chuyên nghiệp và bạn cũng có thể tạo sản phẩm mới, thực hiện các hoạt động xuất và nhập bình thường và chia sản phẩm, quản lý hàng tồn kho và báo cáo hàng tồn kho thành ba trang, nhìn chung rất rõ ràng. Ngoài ra còn có một trang bảng điều khiển chuyên dụng và anh ấy đã viết một số dữ liệu mẫu để thử nghiệm. Các mô hình khác không có dữ liệu và việc thêm sản phẩm không hoạt động, vì vậy việc thử nghiệm là hoàn toàn không thể.

Tác phẩm 4 của Claude: Nó bắt đầu với một giao diện lớn, rất đơn giản, sử dụng thanh điều hướng trên cùng thay vì thanh bên phổ biến trong các nền tảng SaaS. Việc thêm sản phẩm sẽ dẫn đến lỗi khi lưu, khiến việc kiểm tra trở nên bất khả thi.

Bài thơ Sonnet số 4 của Claude: So với Opus 4, giao diện thậm chí còn cơ bản hơn. Nhấp vào nút "Thêm sản phẩm" không phản hồi và không có cửa sổ bật lên biểu mẫu nào xuất hiện. Các trang khác về cơ bản chỉ là chỗ giữ chỗ.

Phiên bản Gemini 2.5 Pro: Phiên bản của Google tốt hơn phiên bản của Claude. Nó cho phép thêm sản phẩm và lượt chạy, nhưng có lỗi. Nó hoạt động khi tôi thử lần đầu, nhưng không hoạt động khi tôi quay video. Tuy nhiên, thiết kế tương tác của Gemini khá phức tạp, với việc quản lý hàng tồn kho và lưu giữ hồ sơ tất cả trong một bảng, điều này làm tăng thêm một số khó khăn.

Bài kiểm tra 2: Trình chỉnh sửa hoạt ảnh pixel

Tiếp theo là bài kiểm tra khả năng thị giác. Tôi yêu cầu họ tạo trình chỉnh sửa hoạt hình pixel art bằng P5.js, hỗ trợ chế độ chuyển động, điều chỉnh hình dạng điểm, kích thước, tốc độ và các điều kiện khác.

Yêu cầu: Tạo trình tạo hoạt ảnh pixel art tương tác toàn màn hình dựa trên P5.js, đáp ứng các yêu cầu kỹ thuật sau:

Tính năng cốt lõi

• Triển khai hoạt ảnh nghệ thuật pixel toàn màn hình bằng P5.js, với hoạt ảnh bao phủ toàn bộ khu vực khung nhìn
• Tổng diện tích của lưới pixel phải lớn hơn ít nhất 10 lần diện tích có thể nhìn thấy để đảm bảo phủ sóng toàn bộ ngay cả ở khoảng cách lưới nhỏ nhất
• Cung cấp nhiều chế độ hoạt hình: Sóng, Xung, Gợn sóng, Tiếng ồn
• Hỗ trợ nhiều tùy chọn hình dạng điểm: hình tròn, hình vuông, hình chữ thập, hình tam giác, hình thoi, v.v.
• Tất cả các bảng điều khiển được đặt ở bên phải của trang và có thể thu gọn xuống dưới cùng trên thiết bị di động

Các thông số có thể điều chỉnh

• Mật độ chấm: Kiểm soát số chấm trên mỗi hàng/cột
• Kích thước hình dạng: Điều chỉnh kích thước của các chấm
• Tốc độ hoạt hình: Kiểm soát tốc độ và biên độ của hiệu ứng hoạt hình
• Khoảng cách lưới: Điều chỉnh khoảng cách giữa các chấm

Thông số kỹ thuật

• Sử dụng HTML5, TailwindCSS 3.0+ (được giới thiệu qua CDN) và P5.js
• Triển khai chức năng chuyển đổi chế độ tối/sáng đầy đủ, mặc định là cài đặt hệ thống
• Mã phải bao gồm logic tối ưu hóa hiệu suất, chỉ hiển thị các điểm trong vùng hiển thị và gần các cạnh
• Hoạt ảnh phải chạy mượt mà không bị trễ

Thiết kế đáp ứng

• Các trang phải hiển thị hoàn hảo trên mọi thiết bị (di động, máy tính bảng, máy tính để bàn)
• Bảng điều khiển phải có thể thu gọn/mở rộng trong chế độ xem trên thiết bị di động
• Tối ưu hóa bố cục và kích thước phông chữ cho các kích thước màn hình khác nhau
• Đảm bảo trải nghiệm cảm ứng tốt trên thiết bị di động

Các thành phần giao diện

• Bộ chọn chế độ hoạt hình (sóng, xung, gợn sóng, tiếng ồn)
• Bộ chọn hình dạng (hiển thị nhiều hình dạng khác nhau với các biểu tượng)
• Thanh trượt điều khiển: mật độ, kích thước, tốc độ, khoảng cách
• Nút chuyển đổi chủ đề
• Hiển thị thông tin lớp phủ ma trận và tổng số điểm

Hãy xem kết quả. Thành thật mà nói, tôi không ngờ các mô hình khác lại hoạt động kém đến vậy trong bài kiểm tra này. Ngoại trừ Deepseek-R1, hoạt ảnh của các mô hình khác không hoạt động chút nào.

Tìm kiếm sâu-R1-0528: Hoàn hảo không tì vết. Mọi nút và thanh trượt đều hoạt động bình thường, các điểm di chuyển mượt mà. Nó thậm chí còn thêm dữ liệu ma trận điểm, và màu sắc vẫn nhất quán sau khi chuyển sang chế độ ban đêm. Vấn đề nhỏ duy nhất là trạng thái đã chọn của lựa chọn màu có một chút vấn đề, nhưng điều này không đáng kể so với hiệu suất thảm hại của các mẫu khác.

Tác phẩm 4 của Claude: Tin tốt: nó có pixel art. Tin xấu: nó không di chuyển. Nội dung ở phía bên phải có thể hoạt động bình thường, nhưng bảng màu không chính xác sau khi chuyển sang chế độ ban đêm.

Bài thơ Sonnet số 4 của Claude: Cái này là thảm họa. Không có pixel art, và thậm chí trạng thái chọn nút cũng không có. Các thanh trượt chỉ là các chấm—cũng có thể sử dụng các thành phần mặc định.

Phiên bản Gemini 2.5 Pro: Cũng báo lỗi không có lưới pixel. Nội dung bên phải có thể hoạt động bình thường và chuyển đổi chủ đề hoạt động tốt, nhưng các thành phần mặc định hơi xấu.

Bài kiểm tra 3: Công cụ trích xuất màu gradient hình ảnh

Đây là một công cụ tôi đã viết trước đó. Không có nhiều mô tả về logic, nhưng có nhiều mô tả hơn về kiểu dáng. Chức năng chính là trích xuất năm bộ màu gradient từ một hình ảnh.

Yêu cầu: Tạo trang web HTML dựa trên nội dung tệp sau, hỗ trợ trích xuất năm bộ màu gradient từ hình ảnh đã tải lên và cho phép người dùng sao chép trực tiếp năm bộ màu gradient thập lục phân. Cần triển khai chức năng trích xuất màu.

1. Sử dụng thiết kế hình ảnh theo phong cách NetEase Cloud Music, nền trắng với màu tương tự như #FE1110 làm điểm nhấn
2. Nhấn mạnh phông chữ lớn hoặc số để làm nổi bật các điểm chính. Bao gồm các yếu tố hình ảnh quá khổ để nhấn mạnh các khu vực trọng tâm, tạo sự tương phản với các yếu tố nhỏ hơn.
3. Trộn văn bản tiếng Trung và tiếng Anh. Sử dụng chữ tiếng Trung in đậm, lớn và chữ tiếng Anh nhỏ hơn làm dấu.
4. Sử dụng đồ họa vẽ đường đơn giản để trực quan hóa dữ liệu hoặc làm yếu tố trang trí.
5. Sử dụng hiệu ứng chuyển màu trong suốt của màu nổi bật để tạo hiệu ứng lấy cảm hứng từ công nghệ, nhưng đảm bảo rằng các màu nổi bật khác nhau không hòa trộn vào nhau.
6. Mô phỏng hoạt ảnh trang web chính thức của Apple, với hoạt ảnh kích hoạt cuộn chuột
7. Dữ liệu có thể được tham chiếu từ các thành phần biểu đồ trực tuyến, với các kiểu phù hợp với chủ đề
8. Sử dụng Framer Motion (qua CDN)
9. Sử dụng HTML5, TailwindCSS 3.0+ (qua CDN) và JavaScript cần thiết
10. Sử dụng các thư viện biểu tượng chuyên nghiệp như Font Awesome hoặc Material Icons (qua CDN)
11. Tránh sử dụng biểu tượng cảm xúc làm biểu tượng chính
12. Nút viên nang ở góc dưới bên trái hiển thị tên người dùng Twitter của tác giả

Trong trường hợp này, Claude cuối cùng đã làm rất tốt. Chi tiết trang và tính thẩm mỹ của Deepseek-R1-0528 rất ấn tượng, nhưng chức năng thì không được triển khai. Các trang Opus 4 và Sonnet 4 đơn giản hơn nhưng ít nhất là có chức năng, trong khi Gemini thì không có chức năng gì cả.

Tìm kiếm sâu-R1-0528: Sau khi sử dụng lại lời nhắc của tôi, tính thẩm mỹ của trang Deepseek thực sự không gì sánh bằng. Anh ấy cũng đã thêm rất nhiều nội dung thân thiện với SEO vào trang, chẳng hạn như các tình huống ứng dụng và thời gian xử lý. Các thẻ hiển thị màu gradient cũng rất chi tiết, nhưng logic lựa chọn màu không được triển khai.

Tác phẩm 4 của Claude: Lần này, Claude cuối cùng đã không làm mọi người thất vọng, hoàn thiện chức năng của trang, nhưng nội dung trang rất cơ bản, chỉ có một nơi để tải hình ảnh và kết quả, logic chọn màu cũng kém. Tuy nhiên, ít nhất thì nó vẫn hoạt động.

Bài thơ Sonnet số 4 của Claude: Sonnet 4 cũng hoàn thiện chức năng này và tôi thậm chí nghĩ rằng kết quả của Sonnet còn tốt hơn Opus, mặc dù vẫn chưa phong phú bằng Deepseek.

Phiên bản Gemini 2.5 Pro: Đây là cái tệ nhất. Không chỉ thiếu chi tiết và tính thẩm mỹ của trang, mà chức năng cũng không được triển khai và nó bị sập khi khởi động.

Bài kiểm tra 4: White Noise Daily Quote Website

Tiếp theo là một trình tạo trang web trích dẫn tiếng ồn trắng hàng ngày, hoàn hảo cho một plugin trang tab mới. Nó hỗ trợ phát tiếng ồn trắng từ Spotify và trang web hiển thị

Yêu cầu: Vui lòng giúp tôi tạo một trang web trích dẫn hàng ngày đơn giản và thanh lịch với các yêu cầu sau:

Thiết kế trực quan

• Hình nền: Chọn ngẫu nhiên các hình ảnh phong cảnh chất lượng cao từ các liên kết sau làm hình nền
• Liên kết hình ảnh: XXXX
• Xử lý hình ảnh: Thêm mặt nạ đen 25% và làm mờ Gaussian nhẹ để đảm bảo văn bản vẫn rõ ràng và dễ đọc
• Phong cách tổng thể: Tối giản và hiện đại, với hình ảnh phong cảnh làm nền trang web để tăng cường sự đắm chìm
• Sử dụng anime.js (giới thiệu qua CDN: JsDelivr jsdelivr.com) cho khung hoạt hình, HTML5, TailwindCSS 3.0+ (giới thiệu qua CDN) và JavaScript cần thiết, đồng thời sử dụng các thư viện biểu tượng chuyên nghiệp như Font Awesome hoặc Material Icons (giới thiệu qua CDN).

Mô-đun hiển thị thời gian

• Đứng đầu: Hiển thị định dạng tháng và ngày (ví dụ: “Ngày 29 tháng 5”), bằng phông chữ nhỏ hơn, căn giữa
• Hàng thứ hai: Hiển thị định dạng “Tuần X · Âm lịch tháng X ngày X” bằng phông chữ nhỏ hơn
• Trung tâm: Làm nổi bật ngày hiện tại bằng phông chữ lớn màu trắng, ở giữa

Mô-đun hiển thị báo giá

• Nội dung: Hiển thị ngẫu nhiên các trích dẫn kinh điển từ các nhà triết học và nhà văn Trung Quốc và nước ngoài
• Cách trình bày: Trích dẫn được căn giữa, cỡ chữ vừa phải và khoảng cách dòng thoải mái
• Ghi công: “Nhà văn, XXX” hoặc “Nhà triết học, XXX” được hiển thị ở góc dưới bên phải
• Thư viện trích dẫn: Bao gồm các trích dẫn về nhiều chủ đề khác nhau như động lực, hiểu biết sâu sắc về cuộc sống và trí tuệ

Chức năng phát nhạc

• Vị trí: Góc dưới bên trái của trang, thu gọn theo mặc định
• Nội dung: Nhúng danh sách phát tiếng ồn trắng Spotify
• Mã số:

Triển khai kỹ thuật

• Thiết kế đáp ứng: Thích hợp cho máy tính để bàn và thiết bị di động
• Lựa chọn phông chữ: Sử dụng phông chữ Trung Quốc thanh lịch, được giới thiệu bởi Google Fonts
• Bảng màu: Chủ yếu sử dụng văn bản màu trắng để đảm bảo khả năng đọc trên mọi nền
• Tối ưu hóa tải: Tải hình ảnh chậm để cải thiện hiệu suất trang

Tính năng tương tác

• Tự động làm mới: Tự động thay đổi hình nền và trích dẫn mỗi ngày
• Làm mới thủ công: Cung cấp nút làm mới để cho phép người dùng thay đổi nội dung theo cách thủ công

Phong cách viết quảng cáo

• Lựa chọn trích dẫn:Thích những câu trích dẫn ngắn gọn, tích cực và mang tính triết lý
• Phong cách ngôn ngữ: Ngắn gọn và mạnh mẽ, tránh dài dòng
• Phân loại chủ đề: Những hiểu biết sâu sắc về cuộc sống, sự phát triển đầy cảm hứng, suy nghĩ sáng suốt, biểu lộ cảm xúc, v.v.

Vui lòng tạo một trang web HTML/CSS/JavaScript hoàn chỉnh theo các yêu cầu trên, đảm bảo giao diện đẹp mắt, chức năng và mang lại trải nghiệm tốt cho người dùng.

Bài kiểm tra này chỉ nhằm đánh giá mức độ hiểu biết về tính thẩm mỹ của từng mô hình. Kiểu trang web hướng đến hiển thị này thường có thể đạt được.

Phải nói rằng Claude Opus 4 vẫn khá có thẩm quyền trong lĩnh vực này, với sự chú ý tuyệt vời đến từng chi tiết. Gemini 2.5 Pro cũng tốt, thậm chí còn thêm hiệu ứng hoạt hình vào các chuyển đổi hình ảnh. Deepseek và Sonnet 4 ở cùng một cấp độ.

Tìm kiếm sâu-R1-0528: Tôi đã chạy Deepseek trước và nghĩ rằng nó khá tốt. Vấn đề đầu tiên về mặt thẩm mỹ tổng thể là nút nhạc ở góc dưới bên trái, hơi phẳng. Phần trích dẫn cũng có vấn đề—không nên thêm mặt nạ đen và căn chỉnh văn bản hơi lệch. Tuy nhiên, nó đã thêm hiệu ứng hoạt hình để làm mới.

Tác phẩm 4 của Claude: Tính thẩm mỹ của Opus 4 thực sự hoàn hảo. Kích thước và khoảng cách của tất cả các phông chữ đều rất thoải mái, và các trích dẫn cho những câu nói nổi tiếng đã được xử lý với độ trong suốt cho cả văn bản trích dẫn và dấu ngoặc kép. Ngay cả trình phát Spotify cũng được bao bọc trong một giao diện người dùng với hoạt ảnh mở rộng/thu gọn. Thật hoàn hảo.

Bài thơ Sonnet số 4 của Claude: Hiệu ứng của Sonnet 4 tương tự như vấn đề của Deepseek. Nút phát nhạc, kích thước văn bản, căn chỉnh và khoảng cách đều có thể được tối ưu hóa thêm.

Phiên bản Gemini 2.5 Pro: Hiệu ứng của Gemini cũng tốt, nhưng xóa bóng đổ của văn bản sẽ tốt hơn. Nó cũng tùy chỉnh giao diện người dùng của trình phát Spotify và các chi tiết văn bản đều ổn. Hiệu ứng chuyển tiếp rất đáng chú ý, với hiệu ứng kéo dài trên hình ảnh.

Bài kiểm tra 5: Tạo trang ứng dụng Sleep

Tiếp theo là bài kiểm tra ứng dụng di động. Yêu cầu mỗi người tạo một ứng dụng theo dõi giấc ngủ. Lời nhắc sẽ chỉ định ngăn xếp kỹ thuật và yêu cầu thiết kế, và yêu cầu tạo nhiều trang tương tác.

Yêu cầu: Yêu cầu phát triển ứng dụng theo dõi giấc ngủ

Tổng quan dự án

Vui lòng giúp tôi tạo một ứng dụng theo dõi giấc ngủ hoàn chỉnh với bốn trang chức năng chính. Giao diện phải đẹp mắt và chuyên nghiệp.

Yêu cầu về ngăn xếp kỹ thuật

Công nghệ frontend

– HTML5 – Cấu trúc trang

– TailwindCSS v3.0+ – Khung kiểu (giới thiệu qua CDN)

– JavaScript – Logic tương tác cần thiết

– Anime.js v4.0.2 – Thư viện hiệu ứng hoạt hình

• Mạng lưới phân phối nội địa: https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm

Biểu tượng và biểu đồ

• Thư viện biểu tượng: Font Awesome hoặc Material Icons (CDN)
• Thành phần biểu đồ: Các thành phần biểu đồ trực tuyến, kiểu dáng phải phù hợp với chủ đề
• Hiển thị dữ liệu: Hỗ trợ hiển thị biểu đồ dữ liệu giấc ngủ

Yêu cầu thiết kế

Thiết kế đáp ứng

• Bố cục đáp ứng đầy đủ
• Thiết kế ưu tiên di động
• Hiển thị tốt trên cả máy tính để bàn và thiết bị di động

Hiệu ứng tương tác

• Tương tác nút: Hiệu ứng mở rộng nhẹ khi di chuột

Tương tác biểu mẫu: Hiển thị đường viền chuyển màu khi trường nhập được tập trung

Tương tác thẻ: Làm tối bóng khi di chuột

Hiệu ứng hoạt hình: Sử dụng Anime.js để tạo hiệu ứng hoạt hình mượt mà cho trang

Yêu cầu về trang chức năng

Vui lòng tạo tất cả các trang cần thiết cho ứng dụng theo dõi giấc ngủ, bao gồm nhưng không giới hạn ở:

• Trang chủ/bảng điều khiển
• Trang ghi chép giấc ngủ
• Trang phân tích dữ liệu
• Trang cài đặt
• Các trang chức năng liên quan khác

Yêu cầu đầu ra mã

• Mỗi trang là một tập tin HTML độc lập
• Cấu trúc mã rõ ràng với các bình luận đầy đủ
• Đảm bảo tất cả các liên kết CDN đều có thể truy cập được
• Cung cấp mã hoàn chỉnh, có thể chạy được

Về mặt logic và giao diện di động, Cluade Opus 4 một lần nữa chứng minh sức mạnh của mình, hoàn thành nhiều trang với logic tốt. Các mô hình khác chỉ tạo ra một trang duy nhất, nhưng Deepseek R1 0528 đột nhiên đạt được mục tiêu về mặt thẩm mỹ, với phong cách đẹp. Mặc dù chỉ tạo ra một trang duy nhất, nhưng nó rất hoàn chỉnh.

Tìm kiếm sâu-R1-0528: Chỉ tạo ra một trang duy nhất, nhưng tính thẩm mỹ tổng thể là tốt. Các chi tiết của thẻ và cách xử lý các biểu tượng được thực hiện tốt, và toàn bộ trang đầy đủ và dài. Ngoài ra, thiết kế đáp ứng đã được triển khai cho điều hướng, dẫn đến các bố cục hoàn toàn khác nhau trên thiết bị di động và máy tính để bàn.

Tác phẩm 4 của Claude: Thật sự mạnh mẽ, chỉ có Opus4 tạo ra tất cả các trang một cách đầy đủ, nhưng thiết kế thẩm mỹ lần này không được tốt, sử dụng logic trang web, với các biểu tượng điều hướng quá nhỏ.

Bài thơ Sonnet số 4 của Claude: Chỉ tạo ra một trang duy nhất và báo cáo lỗi, thiết kế thẩm mỹ kém, chỉ hoàn thành nhiệm vụ.

Phiên bản Gemini 2.5 Pro: Google luôn làm mọi thứ khác nhau. Nó tạo ra từng trang riêng lẻ, cung cấp bốn tệp không thể tương tác với nhau. Ngoài ra, tất cả các trang đều báo lỗi, với mỗi trang chỉ chứa điều hướng và không có nội dung, điều này khá đáng thất vọng.

Bài kiểm tra 6: Chức năng phức tạp—Tetris

Cuối cùng, tôi đã hoàn thành một bài kiểm tra trò chơi nhỏ. Tôi đã thiết kế một trò chơi Tetris khá phức tạp với các khối đặc biệt, chuyển đổi chủ đề, dự đoán khối hạ cánh, lưu trữ khối và nhiều hơn nữa—một thử thách thực sự tuyệt vời.

Yêu cầu: Vui lòng giúp tôi tạo một trò chơi Tetris trên web có đầy đủ chức năng và hấp dẫn về mặt hình ảnh với các yêu cầu sau:

Các tính năng cốt lõi của trò chơi

1. Cơ chế Tetris hoàn chỉnh: 7 khối chuẩn (I, O, T, S, Z, J, L)
2. Điều khiển mượt mà: di chuyển trái và phải, xoay, thả nhanh, thả tức thời
3. Hệ thống loại bỏ thông minh: hỗ trợ loại bỏ 1-4 hàng cùng một lúc với hiệu ứng hoạt hình đặc biệt
4. Hệ thống độ khó tăng dần: tự động tăng tốc độ thả và cấp độ dựa trên số lượng hàng bị loại bỏ

Tính năng nâng cao

1. Hệ thống xem trước: hiển thị các khối tiếp theo và khối tiếp theo-tiếp theo
2. Chức năng giữ: Giữ phím Hold để tạm thời lưu khối hiện tại. Chỉ có thể sử dụng một lần mỗi vòng
3. Khối Ma: Hiển thị vị trí hạ cánh của các khối ở dạng bán trong suốt
4. Hệ thống kết hợp: Việc xóa liên tục sẽ mang lại thêm điểm và hiệu ứng hình ảnh
5. Kỹ năng đặc biệt:
   1. Khối bom (dọn sạch khu vực xung quanh)
   2. Laser Clear (xóa toàn bộ hàng)
   3. Tạm dừng thời gian (các khối dừng rơi trong 3 giây)

Yêu cầu thiết kế trực quan

1. Giao diện UI hiện đại:
   1. Nền chuyển màu hoặc hiệu ứng hạt
   2. Bảng điều khiển trò chơi hiệu ứng kính
   3. Chuyển đổi hoạt hình mượt mà
   4. Thiết kế đáp ứng cho các màn hình khác nhau
2. Hiệu ứng hình ảnh phong phú:
   1. Hoạt ảnh mượt mà của các khối rơi và xoay
   2. Hiệu ứng nổ hoặc chớp sáng khi bị loại bỏ
   3. Hiệu ứng rung màn hình khi đạt được combo
   4. Hoạt ảnh ăn mừng khi cấp độ được nâng cấp
3. Hệ thống chủ đề: Ít nhất 3 chủ đề hình ảnh khác nhau để chuyển đổi giữa

Hệ thống hiệu ứng âm thanh

1. Phản hồi âm thanh hoàn chỉnh: di chuyển, xoay, hạ cánh, loại bỏ, kết thúc trò chơi, v.v.
2. Nhạc nền: trò chơi lặp lại BGM
3. Kiểm soát âm lượng: hiệu ứng âm thanh và âm lượng nhạc nền có thể điều chỉnh độc lập

Chế độ chơi

1. Chế độ cổ điển: cách chơi Tetris truyền thống
2. Chế độ giới hạn thời gian: đạt được điểm cao nhất trong thời gian quy định
3. Chế độ thử thách: các chướng ngại vật được thiết lập trước để tăng độ khó
4. Chế độ Zen: không có áp lực thời gian, tận hưởng trò chơi một cách trọn vẹn

Tính năng thống kê dữ liệu

1. Thống kê thời gian thực: điểm hiện tại, cấp độ, số dòng đã xóa, thời gian chơi
2. Lịch sử: điểm cao nhất, cấp độ tốt nhất, tổng thời gian chơi
3. Hệ thống thành tích: mở khóa nhiều thành tích trong trò chơi
4. Lưu trữ cục bộ: lưu lại các bản ghi và cài đặt trò chơi

Yêu cầu kỹ thuật

1. Sử dụng HTML5/CSS3/JavaScript thuần túy, không cần khuôn khổ bên ngoài
2. Cấu trúc mã rõ ràng: lập trình hướng đối tượng, thiết kế mô-đun
3. Tối ưu hóa hiệu suất: hoạt ảnh 60FPS mượt mà, không có độ trễ
4. Khả năng tương thích: hỗ trợ các trình duyệt hiện đại chính thống
5. Thiết kế đáp ứng: Tương thích với máy tính và thiết bị di động

Trải nghiệm người dùng

1. Hướng dẫn trực quan: Hướng dẫn tích hợp và nút nhắc nhở
2. Chức năng tạm dừng/tiếp tục: Tạm dừng trò chơi bất cứ lúc nào
3. Menu cài đặt: Điều chỉnh độ khó của trò chơi, hiệu ứng âm thanh, hiệu ứng hình ảnh, v.v.
4. Lưu trạng thái trò chơi: Hỗ trợ lưu và tiếp tục trò chơi

Yêu cầu về chất lượng mã

1. Bình luận chi tiết: Mỗi chức năng và đoạn mã quan trọng phải có mô tả
2. Xử lý lỗi: Cơ chế xử lý và nắm bắt ngoại lệ toàn diện
3. Mã thanh lịch: Thực hiện theo các thông lệ tốt nhất, dễ hiểu và dễ bảo trì
4. Khả năng mở rộng: Dễ dàng thêm các tính năng mới trong tương lai

Vui lòng cung cấp các tệp HTML đầy đủ chứa tất cả mã CSS và JavaScript để đảm bảo chúng có thể chạy trực tiếp trên trình duyệt. Mã phải thể hiện kỹ năng lập trình chuyên nghiệp và hiểu biết sâu sắc về phát triển trò chơi.

Trong trò chơi nhỏ, Claude có điều gì đó đang diễn ra. Cả Opus và Sonnet đều tạo ra các khối Tetris tương ứng theo yêu cầu, đặc biệt là logic cho các khối đặc biệt. Deepseek xử lý chủ đề mà Claude bỏ qua, nhưng lại bỏ lỡ các khối đặc biệt, dẫn đến việc Gemini 2.5 Pro tạo ra các khối không thể chơi được.

Tìm kiếm sâu-R1-0528: Nhiệm vụ đã được hoàn thành rất tốt và theo đúng thông số kỹ thuật, nhưng thiết kế khối đặc biệt đã bị bỏ qua và không được triển khai. Điều này có thể là do sự cố khi làm theo các từ nhắc. Toàn bộ trang web giống với giao diện trò chơi, với tất cả các nút xuất hiện như các thành phần tiêu chuẩn.

Tác phẩm 4 của Claude: Đã hoàn thành logic cho các khối đặc biệt và logic khác mà không có vấn đề gì, nhưng bỏ qua lời nhắc chuyển đổi chủ đề, mà anh ấy đã không triển khai. So với các vấn đề của DeepSeek, đây là một vấn đề nhỏ hơn, nhưng giao diện được mã hóa cứng mà không có logic phản hồi, do đó tỷ lệ hơi lệch, khiến một số nút không thể nhấp được.

Bài thơ Sonnet số 4 của Claude: Tương tự như Opus, nhưng tôi nghĩ Sonnet 4 tốt hơn Opus. Việc chuyển đổi trang cũng tốt. Cảm giác như Sonnet đã thắng, vì nó hoàn thành tất cả các chức năng cần thiết.

Phiên bản Gemini 2.5 Pro: Gemini liên tục vật lộn với logic phức tạp. Lần này, nó hoàn toàn không sử dụng được vì vị trí đặt gạch có lỗi, khiến không thể dự đoán được họ sẽ hạ cánh ở đâu. Thật tệ.

Tôi nghĩ bây giờ bạn cũng ngạc nhiên như tôi về hiệu suất của DeepSeek-R1.

Thật khó tin đây chỉ là một bản nâng cấp mô hình nhỏ. Hãy cùng so sánh giá của các mô hình này với DeepSeek R1 0528.

Opus 4 đắt hơn gấp 30 lần và đó là giá của Openrouter, giá chính thức sẽ còn cao hơn nữa.

người mẫu	Độ dài ngữ cảnh	Giá đầu vào ($/M token)	Giá đầu ra ($/M token)	giá hình ảnh ($/K token)
DeepSeek R1 0528	160k	0.50	2.18	–
Bản xem trước Gemini 2.5 pro	1000k	1.25	10	5.16
Bài thơ Sonnet 4 của Claude	200k	3.00	15	4.80
Claude Opus 4	200k	15.00	75	24.00

Là người thường xuyên tiếp xúc với tin tức về AI, tôi đã chứng kiến vô số "bước đột phá" cuối cùng lại trở nên "thất vọng". Nhưng lần này thì khác. DeepSeek-R1 đã mang lại cho tôi hy vọng thực sự.

Giá chênh lệch gấp 30 lần nhưng hiệu suất gần như tương đương.

Chúng ta không còn phải trả giá cắt cổ để sử dụng các mô hình lập trình AI tốt nhất, cũng không phải đánh đổi đau đớn giữa chi phí và chất lượng. Điều thậm chí còn truyền cảm hứng hơn là đây là mô hình của riêng chúng ta.

Câu này được viết bởi AI và tôi nghĩ nó rất tuyệt: Cuộc cách mạng thực sự thường bắt đầu khi những người bình thường có thể vươn tới các vì sao.