DEV Community

Adam
Adam

Posted on

I Built an AI That Judges Your Drawings

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.

Artbitrator Screenshot

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

Top comments (0)