AI Dojo

• 

  Before the game begins, the user is prompted to enter their name. They can also click through helpful tips by Dojo Cat.

• 

  When the game is over, the user is able to see the top scores of the day before going back to the main screen.

• 

  Main screen.... press play!

• 

  The main game give the user two options: swipe yes/no normally or swipe in real life with computer-vision tracking

Inspiration

As AI generated content floods social media, it is becoming increasingly harder to tell what is real and what is fake. We believe it is now our responsibility as consumers to sharpen our own critical thinking rather than rely on others to filter what we see.
AI Dojo was built to make that skill-building fun and accessible. Your companion through the journey is Dojo Cat, who arms you with tips and wisdom on how to spot AI generated content before you dive in and stays by your side throughout the game.

What it does

AI Dojo presents players with a series of images and challenges them to swipe left or right based on whether they think the image is AI generated or real. Like Kahoot, speed matters. Answering correctly within a short time window earns you more points, and building an answer streak unlocks bonus multipliers. Players compete to top the leaderboard and put their AI detection skills to the test against other judges.

Beyond the game, AI Dojo is about building AI literacy. By repeatedly making judgment calls on real vs. generated content, players naturally develop a sharper eye for the subtle tells that give AI images away. The goal is to leave players with a more critical and informed approach to the content they consume every day.

How we built it

We built the game using Next.js and React for the frontend, with TypeScript and Tailwind CSS rounding out the stack. For hand tracking, we integrated MediaPipe Tasks Vision, which runs a machine learning hand landmark model directly in the browser via WebAssembly with GPU acceleration. This allowed us to process camera frames and detect gestures with minimal latency, keeping the interaction feel instant.

For the visual design, rather than using stock UI components, we hand-drew most of the interface elements including the title, buttons, and our mascot Dojo Cat, giving the game a cohesive handcrafted feel that ties the whole experience together.

Challenges we ran into

The main challenge we ran into was capturing the swipe gesture with minimal latency. First we decided to stick with what we were familiar with, which is the OpenCV library using Python. What that would stop us from doing is having an in-browser webcam that interacted directly with our game and frontend. This is when we decided to use MediaPipe, which allowed us to run hand tracking directly in the browser using JavaScript, eliminating the need for a backend server to process camera frames.

Getting the detection to feel natural was still non-trivial. Our first approach used a pinch gesture but it proved too sensitive and unreliable across different lighting conditions and hand sizes. We replaced it with a zone-based swipe system that divides the camera feed into left, center, and right zones, firing a swipe when the hand crosses from center into a side zone. This felt far more intuitive for first-time players.

Accomplishments that we're proud of

Most of our UI elements were drawn by hand, giving the game a personal and distinctive look that goes with our mascot, Dojo Cat. Having hand-drawn art stands as a testament to the large amount of AI art flooding media nowadays and hopefully will encourage people to try and make their own graphics instead of using AI. We are also proud of how responsive the hand gesture feature turned out. Getting real-time hand tracking to feel smooth and reliable in the browser was one of our bigger technical hurdles, so seeing it work seamlessly with the gameplay made it one of our favorite parts of the project.

What we learned

As previously noted, our biggest hurdle was implementing computer vision controls that would be seamless and intuitive to users. But because we were able to fail repeatedly, we were given the opportunity to have a better understanding of computer vision and how it can be better implemented into projects. Along with learning new tech skills, another important thing we learned was about the deep influence that AI has already had on our modern world and also mitigation strategies that are being advocated for today. While playtesting the game, nobody we have met has been able to get a perfect score, illustrating how powerful AI is already at misleading the public and how realistic it has become.

What's next for AI Dojo

We recognize that AI Dojo is a useful tool and fun game for identifying AI and comparing it to real images. Because of that, in the future we would love to deploy the site for everyone to use! Additionally, we think it would be fun to have a timed game mode where players can see how many cards they can identify in 30 seconds.

Built With

• computer-vision
• mediapipe
• react
• tailwind
• typescript