I Built an AI That Judges Your Drawings

[MyrinNew]

I Built an AI That Judges Your Drawings lol

Here's what happened when I got tired of unfair drawing games





The Problem Was Driving Me Crazy

You know those online drawing games? The ones where you spend five minutes making a perfect cat and nobody guesses it. But then your friend draws three lines and wins because their buddy "gets it."


That happened to me one too many times.


So I built something different. An AI that judges your drawings instantly and fairly.





Here's How It Works

The AI looks at your drawing and gives you a score in seconds. No waiting for people to guess. No politics. Just you vs the art judge.


You can play with up to 7 friends at once. Everyone draws the same thing. Best score wins.


And you can watch everyone else draw while you're drawing. It gets intense.


Try it here →


The Technical Stack

Built this as a web app using Next.js 14 and WebRTC. Here's what it does:


Real-Time Canvas Synchronization

• 8 simultaneous HTML5 canvases streaming drawing data via WebRTC
• Sub-100ms latency for stroke replication across all clients
• Delta compression for drawing events to minimize bandwidth
• Canvas state recovery when players drop/rejoin mid-game

WebRTC Data Channels

• Peer-to-peer drawing data transmission
• Voice chat integration (optional)
• Connection fallback through TURN servers
• Handles network drops gracefully

AI Integration

• Canvas-to-image conversion on the client
• Real-time image analysis via REST API
• Multi-criteria scoring (accuracy, creativity, technique)
• Confidence intervals for edge case handling

Live Commentary System

• Azure Speech Services for text-to-speech
• AI-generated commentary based on drawing progress
• Real-time narration of player actions and scores
• Dynamic voice modulation for different game events

Game State Management

• Server-authoritative scoring and timing
• Real-time leaderboard updates
• Player authentication and persistence
• Room management with invite codes

Performance Optimizations

• Canvas virtualization for memory efficiency
• Selective rendering updates (only dirty regions)
• WebGL acceleration where supported
• Smart throttling of drawing events

Current Status: Beta & Looking for Feedback

Right now Artbitrator is in beta. The core tech works - you can draw, compete, and get AI scores in real-time. But I'm actively looking for feedback from other developers.


What's Working Well:

• WebRTC connections are stable across different networks
• Canvas performance handles 8 simultaneous drawings smoothly
• AI scoring is consistent and fast (under 2 seconds)
• Azure Speech Services provides smooth live commentary
• Next.js SSR plays nicely with real-time features

What Could Be Better:

• Mobile touch drawing needs work
• AI sometimes misses obvious drawings
• Connection recovery could be more graceful
• Need better handling of network edge cases

Tech Stack Details:

• Frontend: Next.js 14, TypeScript, Tailwind CSS
• Real-time: WebRTC data channels + signaling server
• Canvas: HTML5 Canvas API with custom drawing engine
• AI: REST API for image analysis and scoring
• Speech: Azure Speech Services for live commentary
• State: Zustand for client state, PostgreSQL for persistence
• Auth: Clerk for user management
• Deployment: Docker containers on cloud infrastructure

If you've built similar real-time multiplayer web apps, I'd love to hear about your approach to the networking challenges.


Try the Beta & Give Feedback

The beta is live and working. Quick signup with social logins:


artbitrator.10kv.games


I'm especially interested in feedback on:

• WebRTC connection stability on your network
• Canvas drawing performance on your device
• How the AI commentary sounds and feels
• Any bugs or edge cases you find
• Ideas for improving the AI judging

Feel free to test it with friends and let me know how it performs!


Email feedback to 10kvgames@gmail.com

The Bottom Line

What started as me being annoyed at drawing games turned into a full-stack real-time web application.


Next.js + WebRTC + Canvas API + AI = surprisingly powerful combination for creative multiplayer games.


The web platform can handle way more than people think.





Built something similar with WebRTC? Or thinking about AI-judged creative competitions? Let me know in the comments.


Tags: #nextjs #webrtc #canvas #ai #gamedev #multiplayer #webdev #realtime




More...