Tôi Xây Dựng AI Đánh Giá Tranh Của Bạn
Dưới đây là những gì đã xảy ra khi tôi chán ngấy với các trò chơi vẽ không công bằng.
Vấn Đề Khiến Tôi Khó Chịu
Bạn có biết những trò chơi vẽ trực tuyến không? Những trò mà bạn mất năm phút để vẽ một con mèo hoàn hảo nhưng không ai đoán được. Trong khi đó, bạn của bạn chỉ cần vẽ ba đường và thắng vì bạn bè của họ "hiểu".
Câu chuyện đó đã xảy ra với tôi quá nhiều lần.
Vì vậy, tôi đã xây dựng một thứ khác. Một AI đánh giá tranh của bạn một cách ngay lập tức và công bằng.
Cách Thức Hoạt Động
AI sẽ xem tranh bạn vẽ và đưa cho bạn một điểm số trong vài giây. Không phải chờ đợi người khác đoán. Không có chính trị. Chỉ có bạn và người đánh giá nghệ thuật.
Bạn có thể chơi với tối đa 7 người bạn cùng một lúc. Mọi người đều vẽ cùng một thứ. Điểm số tốt nhất sẽ thắng.
Và bạn có thể theo dõi mọi người khác vẽ trong khi bạn đang vẽ. Điều này thật hấp dẫn.
Thử nghiệm ngay tại đây →
Công Nghệ Đằng Sau
Tôi đã xây dựng ứng dụng web này bằng Next.js 14 và WebRTC. Dưới đây là những gì nó làm:
Đồng Bộ Hóa Canvas Thời Gian Thực
- 8 canvas HTML5 đồng thời truyền dữ liệu vẽ qua WebRTC
- Độ trễ dưới 100ms để tái lập đường vẽ trên tất cả các khách hàng
- Nén delta cho các sự kiện vẽ nhằm giảm băng thông
- Khôi phục trạng thái canvas khi người chơi rời/ tham gia giữa trận
Kênh Dữ Liệu WebRTC
- Truyền tải dữ liệu vẽ peer-to-peer
- Tích hợp hội thoại (tùy chọn)
- Kết nối dự phòng qua máy chủ TURN
- Xử lý sự cố mạng một cách nhẹ nhàng
Tích Hợp AI
- Chuyển đổi canvas thành hình ảnh trên client
- Phân tích hình ảnh thời gian thực qua REST API
- Điểm số đa tiêu chí (độ chính xác, tính sáng tạo, kỹ thuật)
- Khoảng tin cậy cho việc xử lý các trường hợp đặc biệt
Hệ Thống Bình Luận Trực Tiếp
- Dịch vụ giọng nói Azure cho chuyển văn bản thành giọng nói
- Bình luận do AI tạo ra dựa trên tiến trình vẽ
- Tường thuật thời gian thực các hành động và điểm số của người chơi
- Biến điệu giọng nói động cho các sự kiện trong trò chơi
Quản Lý Tình Trạng Trò Chơi
- Đánh giá và tính toán thời gian từ máy chủ
- Cập nhật bảng xếp hạng thời gian thực
- Xác thực người chơi và duy trì trạng thái
- Quản lý phòng với mã mời
Tối Ưu Hiệu Suất
- Ảo hóa canvas để tiết kiệm bộ nhớ
- Cập nhật kết xuất chọn lọc (chỉ các vùng bị thay đổi)
- Tăng tốc WebGL khi có hỗ trợ
- Throttle thông minh các sự kiện vẽ
Tình Trạng Hiện Tại: Beta & Tìm Kiếm Phản Hồi
Hiện tại, Artbitrator đang trong giai đoạn beta. Công nghệ cốt lõi hoạt động - bạn có thể vẽ, cạnh tranh và nhận điểm từ AI trong thời gian thực. Nhưng tôi đang tích cực tìm kiếm phản hồi từ các nhà phát triển khác.
Những Điều Hoạt Động Tốt:
- Kết nối WebRTC ổn định trên các mạng khác nhau
- Hiệu suất canvas xử lý 8 bản vẽ đồng thời một cách mượt mà
- Điểm số AI nhất quán và nhanh (dưới 2 giây)
- Dịch vụ giọng nói Azure cung cấp bình luận trực tiếp mượt mà
- Next.js SSR hoạt động tốt với các tính năng thời gian thực
Những Điều Cần Cải Thiện:
- Vẽ trên thiết bị di động cần được cải thiện
- AI đôi khi bỏ lỡ các bức tranh rõ ràng
- Khôi phục kết nối có thể tốt hơn
- Cần xử lý tốt hơn các trường hợp đặc biệt về mạng
Chi Tiết Công Nghệ:
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Thời gian thực: Kênh dữ liệu WebRTC + máy chủ tín hiệu
- Canvas: API Canvas HTML5 với động cơ vẽ tùy chỉnh
- AI: REST API cho phân tích hình ảnh và điểm số
- Giọng nói: Dịch vụ giọng nói Azure cho bình luận trực tiếp
- Trạng thái: Zustand cho trạng thái client, PostgreSQL cho việc duy trì
- Xác thực: Clerk cho quản lý người dùng
- Triển khai: Containers Docker trên hạ tầng đám mây
Nếu bạn đã xây dựng các ứng dụng web đa người dùng thời gian thực tương tự, tôi rất muốn nghe về cách bạn giải quyết các thách thức về mạng.
Thử Beta & Gửi Phản Hồi
Beta đã hoạt động và sẵn sàng. Đăng ký nhanh chóng với đăng nhập xã hội:
artbitrator.10kv.games
Tôi đặc biệt quan tâm đến phản hồi về:
- Độ ổn định kết nối WebRTC trên mạng của bạn
- Hiệu suất vẽ canvas trên thiết bị của bạn
- Cảm nhận và âm thanh của bình luận AI
- Bất kỳ lỗi hoặc trường hợp đặc biệt nào bạn gặp phải
- Ý tưởng để cải thiện việc đánh giá của AI
Hãy thoải mái thử nghiệm với bạn bè và cho tôi biết hiệu suất của nó!
Gửi phản hồi qua email tới 10kvgames@gmail.com
Tóm Lại
Điều bắt đầu từ việc tôi cảm thấy khó chịu với các trò chơi vẽ đã trở thành một ứng dụng web đa người dùng thời gian thực hoàn chỉnh.
Next.js + WebRTC + Canvas API + AI = sự kết hợp mạnh mẽ bất ngờ cho các trò chơi sáng tạo nhiều người chơi.
Nền tảng web có thể xử lý nhiều hơn những gì người ta nghĩ.
Bạn đã xây dựng một thứ tương tự với WebRTC? Hoặc đang nghĩ về các cuộc thi sáng tạo được đánh giá bởi AI? Hãy cho tôi biết trong phần bình luận.
Tags: #nextjs #webrtc #canvas #ai #gamedev #multiplayer #webdev #realtime
