PixelGuess

Guess keywords from AI portraits and generate similar images. Test your deduction skills with voice input, AI comparison, and compete on global rankings!

Comment

PixelGuess: AI Image Guessing Game

🎯 Project Overview

PixelGuess is an innovative AI-powered image guessing game that challenges players to analyze AI-generated portraits, deduce the original keywords, and create similar images using Google's Gemini AI. The game combines deduction skills, creativity, and AI technology to create an engaging and educational experience.

💡 Inspiration

The inspiration for PixelGuess came from the fascinating intersection of AI image generation and human creativity. As AI image generation tools became more sophisticated, I wondered: "Can humans reverse-engineer the creative process?" This led to the core concept of showing players an AI-generated image and challenging them to guess what prompt created it.

The project was also inspired by:

  • Classic guessing games like 20 Questions and Pictionary
  • The rise of AI art and the curiosity around prompt engineering
  • Educational potential of understanding how AI interprets language
  • Competitive gaming elements that make learning fun

🛠️ How It Was Built

Technology Stack

  • Frontend: React 18 with TypeScript for type safety
  • Styling: Tailwind CSS for responsive, modern design
  • Animations: Framer Motion for smooth, engaging interactions
  • AI Integration: Google Gemini 2.0 Flash for image generation and comparison
  • Database: Supabase for rankings and user data
  • Voice Input: Web Speech API for accessibility
  • Icons: Lucide React for consistent iconography

Architecture Decisions

Component-Based Design: Built with reusable React components following the single responsibility principle. Each component handles one specific aspect of the game (GamePlay, CasualMode, RankingPage, etc.).

State Management: Used custom hooks (useGameState, useLanguage) to manage complex game state and provide clean separation of concerns.

Internationalization: Implemented full bilingual support (Japanese/English) with a comprehensive translation system.

Responsive Design: Mobile-first approach ensuring the game works seamlessly across all device sizes.

Key Features Implemented

  1. Three Game Modes:

    • Similarity Mode: 3-round challenge with total similarity scoring
    • Consecutive Mode: Endless challenge until failure
    • Casual Mode: Free-form image generation without scoring

  2. Three Image Categories:

    • Anime/Manga Style: 2D illustrated characters
    • 3D Animation: Pixar/Disney-style 3D characters
    • Realistic: Photographic portraits

  3. Advanced AI Integration:

    • Dynamic keyword generation based on category and language
    • Intelligent image comparison using AI vision
    • Safety guidelines to ensure appropriate content

  4. User Experience Features:

    • Voice input for accessibility
    • Image zoom on mobile devices
    • Smooth animations and transitions
    • Progressive disclosure of game complexity

🎮 Game Flow Design

The game follows a carefully designed flow:

  1. Mode Selection → Choose your challenge type
  2. Category Selection → Pick your preferred art style
  3. Game Introduction → Learn the rules and objectives
  4. Gameplay Loop → Analyze, deduce, generate, compare
  5. Results & Ranking → See performance and compete globally

🚧 Challenges Faced

1. AI API Integration Complexity

Challenge: Managing multiple AI model calls (keyword generation, image generation, image comparison) while handling rate limits and errors gracefully.

Solution: Implemented robust error handling with fallback systems, user-friendly error messages, and quota management strategies.

2. Image Generation Consistency

Challenge: Ensuring AI-generated images were appropriate, consistent with categories, and suitable for guessing games.

Solution: Developed detailed prompt engineering with safety guidelines, category-specific styling, and content filtering to maintain quality and appropriateness.

3. Mobile Responsiveness

Challenge: Creating an engaging experience across all device sizes, especially for image-heavy content.

Solution: Implemented mobile-first design with touch-optimized interactions, image zoom functionality, and adaptive layouts that work on screens from 320px to 4K.

4. Performance Optimization

Challenge: Managing large image data and smooth animations without compromising performance.

Solution: Used efficient state management, lazy loading, and optimized image handling with base64 encoding for seamless user experience.

5. Internationalization

Challenge: Supporting both Japanese and English while maintaining context and cultural appropriateness.

Solution: Built a comprehensive translation system with context-aware content and culturally appropriate examples for each language.

6. Game Balance

Challenge: Creating fair and engaging gameplay that's neither too easy nor impossibly difficult.

Solution: Implemented multiple difficulty levels through different game modes, generous generation limits (3 attempts), and a 70% similarity threshold for success.

7. The Ultimate Challenge: Writing in English Without English Skills! 😅

Challenge: The most difficult part of this entire project was writing this "Project Story" in English despite having limited English proficiency! While I could handle technical documentation and code comments, crafting a comprehensive project narrative in English was genuinely more challenging than implementing the AI integration or solving complex state management issues.

Solution: Relied heavily on AI assistance, translation tools, and lots of patience. Ironically, building an AI-powered game helped me appreciate the challenges of cross-language communication - much like how players in PixelGuess must bridge the gap between visual understanding and linguistic expression!

📚 What I Learned

Technical Skills

  • Advanced React Patterns: Custom hooks, context management, and component composition
  • AI Integration: Working with modern AI APIs, prompt engineering, and handling AI responses
  • Animation Libraries: Creating smooth, purposeful animations with Framer Motion
  • Database Design: Implementing ranking systems with Supabase and PostgreSQL
  • Responsive Design: Mobile-first development and cross-device compatibility

Design Principles

  • User Experience: The importance of progressive disclosure and intuitive navigation
  • Accessibility: Implementing voice input and ensuring the game works for diverse users
  • Visual Hierarchy: Using color, typography, and spacing to guide user attention
  • Performance: Balancing rich features with fast load times and smooth interactions

AI and Prompt Engineering

  • Prompt Design: Crafting effective prompts for consistent, appropriate AI outputs
  • Safety Considerations: Implementing content guidelines and safety measures
  • Model Limitations: Understanding and working around AI model constraints
  • User Expectations: Managing user expectations around AI capabilities and limitations

Language and Communication

  • Cross-Cultural Development: Building applications that work across language barriers
  • Technical Writing: The importance of clear documentation, even in a second language
  • AI as a Learning Tool: How AI can assist in overcoming language limitations while developing software

🌟 Key Innovations

  1. Reverse Prompt Engineering: The core concept of guessing AI prompts from generated images
  2. Multi-Modal AI Integration: Combining text generation, image generation, and image comparison
  3. Adaptive Difficulty: Different game modes that cater to various skill levels and time commitments
  4. Cultural Sensitivity: Bilingual support with culturally appropriate content
  5. Accessibility First: Voice input and mobile optimization from the ground up

🚀 Future Enhancements

  • Multiplayer Mode: Real-time competitions between players
  • Custom Categories: User-defined image styles and themes
  • Achievement System: Badges and rewards for various accomplishments
  • Social Features: Sharing generated images and challenging friends
  • Advanced Analytics: Detailed performance tracking and improvement suggestions

🎯 Impact and Learning Outcomes

PixelGuess demonstrates how AI can be used not just as a tool, but as a creative partner in game design. The project showcases the potential for educational gaming that teaches users about AI capabilities while providing entertainment value.

The game has taught players about:

  • How AI interprets and visualizes language
  • The relationship between descriptive text and visual output
  • Creative problem-solving and lateral thinking
  • The iterative process of refining ideas

This project represents a successful fusion of cutting-edge AI technology with classic game design principles, creating an experience that's both educational and entertaining. And yes, it was built by someone who struggled more with writing this English documentation than with implementing complex AI features - proving that passion and determination can overcome any language barrier! 🌟

Built With

  • autoprefixer
  • eslint
  • fetch-api
  • framer-motion
  • google-fonts
  • google-gemini-2.0-flash-api
  • google-generative-ai-sdk
  • local-storage-api
  • lucide-react
  • m-plus-rounded-1c
  • node.js
  • postcss
  • postgresql
  • react
  • supabase
  • tailwind-css
  • typescript
  • vite
  • web-speech-api
Share this project:

Updates

Submission history