Challenge AI

Inspiration

I always see those "AI guesses your drawing" games, and I wanted to flip it into a little challenge: instead of the AI just showing off, can you draw something well enough for it to recognize — or weird enough to completely stump it? I was also curious how an AI actually "sees" a rough sketch, so I wanted to show its thinking, not just a single answer.

What it does

You draw any object on a sketch pad, hit "Challenge AI," and the AI tries to guess what it is. Instead of one guess, it gives you a ranked list with confidence percentages shown as a bar graph (like "house 90%, building 70%, shed 40%"), plus a quick reason for its top pick and a lighthearted roast of your drawing. If the AI isn't confident, you stumped it and earn points, with a score and streak to chase.

How I built it

It's a Next.js + TypeScript app styled with Tailwind and shadcn/ui, with Framer Motion for the animations. The sketch pad is a custom HTML canvas engine that works with both mouse and touch and supports undo/redo, brush size, colors, and an eraser. When you challenge the AI, the drawing is sent as an image to a vision model through the official OpenAI SDK, pointed at a fast Groq endpoint. The model returns its guesses as JSON, and the app renders the confidence graph and handles the scoring.

Challenges I ran into

The trickiest bug was the UI freezing — the drawing kept showing the old state even though React had updated it, which turned out to be a Framer Motion quirk with React

1. I also had to work to get the model to reliably return clean JSON with a realistic spread of confidence values, and getting the canvas to feel smooth on both touch and mouse with proper high-DPI scaling took some tuning.

Accomplishments that I'm proud of

The confidence bar graph turned out really clean and satisfying to watch fill up. The drawing feels smooth on phone and desktop, the error handling is solid, and the whole thing looks polished with a dark, modern UI. Most of all, it actually works end-to-end and is genuinely fun to play.

What I learned

I learned a lot about feeding images to a vision model and getting structured JSON back, working with canvas pointer events, and the little pitfalls of animation libraries. I also learned you can use the OpenAI SDK with other providers, and how to keep API keys safely out of the codebase.

What's next for Challenge AI

I'd like to add a timed mode and a head-to-head "who can stump the AI" versus mode, let people share their drawing along with the AI's verdict, add a global leaderboard, and try more vision models to compare how differently they see the same sketch.

Built with

next.js, typescript, tailwindcss, shadcn/ui, framer-motion, groq, llama, openai-sdk, html-canvas

Built With

• css3
• html5
• javascript
• next.js
• openai
• tailwind.css
• typescript