"It's not who I am underneath, but what I do that defines me." - Batman
When Gotham needs a hero, the Bat-Signal lights up the sky. When YOU need an AI assistant that truly understands you, Gotham AI answers the call.
This isn't just another AI chatbot. This is a multi-modal AI experience featuring three distinct personalities - Batman, Alfred, and The Joker - each with unique voice profiles, analysis styles, and character-authentic responses.
- Voice: Deep (pitch 0.5), slow, commanding
- Personality: Direct, tactical, no-nonsense
- Image Analysis: Security-focused threat assessment
- Use Case: When you need strategic, mission-critical responses
- Voice: British accent, refined, measured
- Personality: Sophisticated, eloquent, wise
- Image Analysis: Artistic appreciation and cultural insight
- Use Case: When you need elegant advice and refined analysis
- Voice: High-pitched (pitch 1.5), fast, manic
- Personality: Chaotic, sarcastic, darkly humorous
- Image Analysis: Finds absurdity and irony in everything
- Use Case: When you need unconventional perspectives
- Voice Input: Biometric voice recognition with speaker identification
- Voice Output: Character-specific Text-to-Speech (Batman sounds deep and menacing, Joker sounds manic)
- Vision AI: Image analysis using Llama 4 Scout vision model
- Text Chat: Natural language conversations with persistent context
- Character-Specific Intro Videos: Each mode has its own cinematic startup animation
- Batman: Lego Batman intro clip (16 seconds)
- Alfred: Lego Batman alfred piano clip (14 seconds)
- Joker: Lego Batman Joker hijaking plane clip (12 seconds)
- Full-Screen Experience: Videos play after biometric authentication
- Click-to-Skip: Users can skip videos by clicking anywhere
- Responsive Scaling: Videos fit all screen sizes with
object-contain - Mode-Aware: Only plays when signing in with Batman, Alfred, or Joker mode (Council mode skips directly to app)
- Auto-Transition: Seamlessly transitions to main app when video completes
- Character-Specific Audio: Each personality has unique sound effects
- Batman: SilentProtector.mp3 for bat-signal easter eggs
- Alfred: Elegant refined chime
- Joker: Evil-laugh-89423.mp3 for chaos mode
- Hybrid Sound System: MP3 files with procedural fallbacks
- Sound Caching: Files loaded once and cached for performance
- Message Sounds: Audio feedback when sending and receiving messages
- Mute Control: Toggle button in header to enable/disable sounds
- Web Audio API: Procedurally generated sounds as fallbacks
- Ask All Three Characters: Get perspectives from Batman, Alfred, AND The Joker simultaneously
- Parallel Processing: All characters respond to the same question at once
- Beautiful Grid Layout: Responses displayed side-by-side with character portraits
- Individual Voice Playback: Each response can be spoken in their unique voice
- Perfect for Decision Making: Compare tactical, wise, and chaotic viewpoints
🎁 Hidden Easter Eggs & Interactive Surprises
Discover secret interactions with special visual effects and responses!
- "I'm Batman" - Triggers golden bat-signal flash across screen
- "Where are they?" / "TELL ME!" - Interrogation mode activation
- "Swear to me" - Iconic line callback with bat-signal effect
- "Justice" - Subtle bat-signal pulse
- "Bat signal" - Full bat-signal activation with sound
- "Tea time" / "Tea break" - Elegant silver glow effect with refined response
- "Master Wayne" / "Master Bruce" - Formal butler acknowledgment
- "Thank you Alfred" - Gracious response with tea time effect
- "Butler" - Witty response about his proper title
- "Why so serious" - CHAOS MODE! Screen shakes with purple/green glitch
- "Want to see a trick" / "Magic trick" - Disappearing pencil reference
- "Do I look like a guy with a plan" - Philosophy of chaos with effects
- "Chaos" - Visual chaos effect activation
- "Haha" / "Lol" / "Lmao" - Triggers chaotic laughter and effects
- "Agent of chaos" - Full chaos mode with manic response
- "Gotham" - Bat-signal effect in any character mode
- "Konami" / "Up up down down" - Secret achievement unlocked
Visual Effects Include:
- 🦇 Bat-Signal Flash: 1.5s golden radial glow pulse
- 🃏 Chaos Mode: Purple/green glitch with screen shake and rotation
- ☕ Tea Time: 2s elegant silver brightness glow
The AI can actually USE TOOLS to get real information:
- Calculator: "What's 15% of 47?" → AI performs calculation
- Weather: "What's the weather in Gotham?" → AI checks weather
- Time/Date: "What time is it?" → AI gets current time
Upload images and each character analyzes them differently:
- Batman: Identifies security threats, entry points, vulnerabilities
- Alfred: Provides artistic critique, historical context, aesthetic analysis
- Joker: Finds chaos, humor, and absurdity in the scene
- Face Recognition: Camera-based facial authentication
- Voice Authentication: Unique voiceprint enrollment and verification
- Dual-Factor: Requires BOTH voice AND face to access the system
- Password Fallback: Traditional authentication option
Three distinct visual themes that adapt to each character:
- Batman: Gold accents, dark Gotham aesthetics
- Alfred: Silver accents, elegant refinement
- Joker: Purple/green chaos with animated effects
Take a break from saving Gotham with AI and try your hand at these Batman-themed games!
Access via the "Games" button in the main header - 5 fully-featured games:
1. 🦇 Bat-Sweeper (Minesweeper)
- 10×10 grid with 15 Joker traps 🃏
- Left-click to reveal, right-click to flag
- Timer and move counter
- Smart flood-fill algorithm
- Sound effects: start, click, win, lose
2. ⚔️ Bat vs Joker (Tic Tac Toe)
- Smart AI using Minimax algorithm (unbeatable!)
- Batman 🦇 vs Joker 🃏
- Score tracking across rounds
- Winning line animations
- Sound effects: click, win, tie
3. ✊ Gotham Showdown (Rock Paper Scissors)
- Batarang ⭐ vs Grapple Gun 🔫 vs Cape 🦇
- Win streak tracker with best streak record
- Animated battle arena
- Real-time stat display
4. 🎴 Detective's Memory (Memory Card Flip)
- 8 pairs of Batman symbols
- Timer, move counter, and accuracy tracker
- Best time/moves leaderboard
- Smooth flip animations
- Sound effects: flip, win
5. 🏙️ Gotham Protector (Cookie Clicker) ⭐ FEATURE-RICH!
- Click System: Earn citizens by clicking the bat button
- Passive Income: Buy upgrades for automatic citizen generation
- 8 Upgrades: Batarang → Grapple Gun → Batmobile → Robin → Batcave → Watchtower → Alfred AI → Justice League
- Exponential Scaling: Costs increase by 15% per purchase
- Batarangs: Every 5 = +1 click power (balanced progression)
- Milestone Bonuses: Every 10 levels on ANY upgrade = +1 click power
- Visual Progress Bars: Track progress to next bonus
- Stacking System: All bonuses add together
Switch between "Upgrades" and "Citizens" tabs for permanent boosts!
Grapple Gun Boosts:
- Reinforced Cable (1K) - 2× effectiveness
- Quick Deploy (5K) - +5 citizens/sec
- Auto-Retract (50K) - 3× effectiveness
Batmobile Boosts:
- Turbo Engine (11K) - 2× effectiveness
- Armor Plating (55K) - +50 citizens/sec
- AI Autopilot (550K) - 3× effectiveness
Robin Boosts:
- Combat Training (120K) - 2× effectiveness
- Team Tactics (600K) - +500 citizens/sec
- Nightwing Protocol (6M) - 3× effectiveness
Batcave Boosts:
- Supercomputer (1.3M) - 2× effectiveness
- Crime Lab (6.5M) - +3K citizens/sec
- Advanced Security (65M) - 3× effectiveness
Global Boosts:
- Gotham United (100K) - +10% all production
- City-Wide Alert (1M) - +25% all production
- Hope Restored (10M) - +50% all production
- Image: Uses
batman_logo.png(80×80px) - Spawn Rate: Every 10-30 seconds (super frequent!)
- Bonus Amount: 10×-100× your current saves/sec
- Duration: 10 seconds to click
- Smart Spawning: Appears near your mouse cursor (never off-screen)
- Visual Effects:
- Yellow/amber triple-layer glowing rings
- Pinging outer ring animation (150px)
- Bouncing animation (batBounce)
- Brightness pulse effect
- Shows exact bonus amount below logo
- Sound Effects: Click sound on collection + notification
- Image: Uses
blue_batman.png(80×80px) - Spawn Rate: Every 60-180 seconds (1-3 minutes, rare!)
- Bonus Amount: 1000×-100000× your current saves/sec (MASSIVE!)
- Duration: 10 seconds to click
- Smart Spawning: Appears near your mouse cursor (never off-screen)
- Visual Effects:
- Blue/cyan triple-layer glowing rings
- Pinging outer ring animation (150px)
- Bouncing animation (batBounce)
- Enhanced brightness pulse (1.5× brighter)
- Shows exact bonus with 💎 emoji
- Sound Effects: Click sound on collection + notification
- Rarity: Much rarer than Golden Cookie, but rewards are 10-1000× higher!
The ultimate engagement mode! Click the 🧟 Brainrot button to activate split-screen mode.
Desktop Layout:
- Left Half: Cookie Clicker game (all panels stacked vertically)
- Right Half: Subway Surfers video (
subway_surfers.mp4) - 50/50 split using flexbox layout
- Game section is scrollable if content overflows
Mobile Layout:
- Top Half: Cookie Clicker game
- Bottom Half: Subway Surfers video
- Vertical stack for optimal mobile experience
Video Features:
- ✅ Auto-plays when brainrot mode is enabled
- ✅ Loops continuously (infinite playback)
- ✅ Muted by default (autoplay compliance)
- ✅ Centered with
object-contain(shows entire video) - ✅ Purple border matching brainrot theme
- ✅ Responsive sizing (fills allocated space)
- ✅ Optimized 90MB video file
Button States:
- Normal: Purple border, "Brainrot" text
- Active: Purple background glow, "Normal" text to toggle back
Why "Brainrot Mode"? Maximum engagement while you idle! Watch Subway Surfers while passively earning citizens. Perfect for multitasking or just having fun with the ultimate internet culture reference.
- Export 💾: Download your game as JSON file
- Import 📂: Load saved game from file
- Auto-naming: Files named
gotham-protector-save-[timestamp].json - Full State: Saves all progress, upgrades, and purchases
- Validation: Checks file integrity before loading
- Notifications: Success/failure feedback
- Decimal Precision: Shows accurate values (0.10/sec, 1.50/sec, etc.)
- Number Formatting: K, M, B, T abbreviations for large numbers
- Achievement System: 4 built-in achievements with progress tracking
- Milestone Notifications: Animated popups for upgrades (🦇 +X Click Power!)
- Tab System: Clean switching between Upgrades and Citizens
- Progress Tracking: Visual bars for Batarang and Milestone progress
- Multiplier Stacking: All citizen upgrades stack multiplicatively
Base: 10 Grapple Guns × 1 saves/sec = 10/sec
Buy "Reinforced Cable" (2×): = 20/sec
Buy "Auto-Retract" (3×): = 60/sec
Buy "Gotham United" (+10%): = 66/sec
Result: 6.6× boost from citizen upgrades!
- Early game: Focus on clicking and basic upgrades
- Mid game: Unlock citizen upgrades for exponential growth
- Late game: Stack multipliers and hunt for cookies
- Golden Cookies (10-30s): Frequent small-medium bonuses (10×-100×)
- Diamond Cookies (1-3min): Rare but MASSIVE bonuses (1000×-100000×)
- Brainrot Mode: Perfect for idle play - watch video while game runs
- Strategy: Golden cookies provide steady boost, Diamond cookies are jackpots!
- Click sound on main button
- Upgrade sound on purchases
- Smooth audio feedback on all actions
- Games Button: In main app header (next to Profile)
- Game Selection Menu: Beautiful grid layout with hover effects
- Individual Games: Click any card to play
- Return: Back button in each game to return to menu
- Responsive Design: All games work on mobile and desktop
- Batman Theming: Consistent gold/yellow color scheme
- Smooth Animations: CSS transitions and transforms
- Sound Integration: Pixabay sound effects (royalty-free)
- State Management: React hooks for game logic
- TypeScript: Full type safety
src/
├── pages/
│ └── Games.tsx # Main game selection page
├── components/
│ └── games/
│ ├── BatmanMinesweeper.tsx
│ ├── BatmanTicTacToe.tsx
│ ├── BatmanRockPaperScissors.tsx
│ ├── BatmanMemoryGame.tsx
│ └── BatmanCookieClicker.tsx
└── assets/
├── minesweeper/ # click.mp3, lose.wav, start.wav, win.mp3
├── tic-tac-toe/ # click.mp3, tie.mp3, win.mp3
├── memory/ # flip.mp3, win.mp3
└── cookie-clicker/ # click.mp3, upgrade.wav, batman_logo.png,
# blue_batman.png, subway_surfers.mp4 (90MB)
Built with cutting-edge, production-grade technology:
- React 18 + TypeScript - Type-safe, modern UI framework
- Vite - Lightning-fast build tool and dev server
- Tailwind CSS - Utility-first styling with custom theme system
- shadcn/ui - High-quality, accessible component library
- Supabase - PostgreSQL database + Edge Functions
- Groq API - Ultra-fast AI inference (400+ tokens/second)
- Llama 4 Scout - State-of-the-art vision model for image analysis
- Llama 3.3 70B - Advanced language model for conversations
- Web Speech API - Browser-native TTS and voice recognition
- Face-api.js - Browser-based facial recognition
- Custom Voice Biometrics - MFCC-based voice authentication
- Supabase Auth - Password-based fallback authentication
- Node.js 18+ & npm (install via nvm)
- Supabase Account (create free account)
- Groq API Key (get free key)
# Clone the repository
git clone <YOUR_GIT_URL>
cd digital-whisperer-ai
# Install dependencies
npm install
# Configure environment variables
cp .env.example .env
# Edit .env with your credentials:
# - VITE_SUPABASE_URL=your_supabase_url
# - VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_key
# - GROQ_API_KEY=your_groq_key (in Supabase Edge Function secrets)
# Run locally
npm run dev# Install Supabase CLI
npm install -g supabase
# Deploy chat function
supabase functions deploy chat --project-ref your-project-ref
# Set Groq API key secret
supabase secrets set GROQ_API_KEY=your_groq_api_keyThe app uses Supabase PostgreSQL for:
- User profiles (
user_profiles) - Voice biometrics (
voice_profiles) - Face recognition data (
face_profiles)
Schema is auto-created on first authentication attempt.
All features use FREE tiers:
| Service | Free Tier | Usage |
|---|---|---|
| Groq API | 500k tokens/day | Text & image AI |
| Supabase | 500MB database, 2GB storage | User data & auth |
| Web Speech API | Unlimited | Voice recognition & TTS |
| Llama 4 Scout | Free via Groq | Image analysis |
| Llama 3.3 70B | Free via Groq | Conversations |
Estimated costs for 1000 users/month: $0 🎉
"The app begins with a cinematic intro video..."
- Start in Batman mode
- Complete biometric authentication
- Batmobile startup video plays full-screen
- Click anywhere to skip or let it play
- "Each character has their own intro video - Batman's Batmobile, Alfred's manor, Joker's chaos!"
- Explain videos are mode-aware (only play for Batman/Alfred/Joker, not Council)
"First, I'll demonstrate our dual-factor biometric authentication..."
- Show face + voice authentication
- Explain it requires BOTH to access
- Mention data is encrypted in Supabase
"The app features three distinct AI personalities..."
- Toggle between Batman, Alfred, and Joker
- Point out visual theme changes (colors, animations)
- Highlight the 3-button selector
"Each character has a unique voice profile and sound effects..."
- Send a message to Batman → Click speaker button
- "Notice the deep (0.5 pitch), slow voice and SilentProtector.mp3 sound"
- Switch to Joker → Send same message → Click speaker
- "Now it's high-pitched (1.5) and fast with evil-laugh-89423.mp3!"
- Switch to Alfred → Click speaker
- "British accent, refined with elegant chime"
- Show the mute button to toggle sounds
"The app has hidden interactive surprises..."
- In Batman mode, type: "I'm Batman"
- Show the golden bat-signal flash effect + SilentProtector.mp3 sound
- Switch to Joker, type: "Why so serious"
- Show chaos mode with screen shake, glitch, and evil laugh audio
- Switch to Alfred, type: "Tea time"
- Show elegant silver glow effect
- "There are 15+ easter eggs total - users love discovering them!"
"You can ask all three characters the same question..."
- Click the "Council" button in header
- Ask: "What is the best approach to solving a difficult problem?"
- Show all three responses appearing simultaneously
- Batman: Tactical/strategic approach
- Alfred: Wise/refined advice
- Joker: Chaotic/creative perspective
- Click speaker icons to hear each character speak
- "Perfect for decision-making and brainstorming!"
"The AI can use tools to get real information..."
- Ask Batman: "What's 15% of 47?"
- Show it uses the calculator tool
- Ask Alfred: "What time is it?"
- Show it uses the time tool
- Ask Joker: "What's the weather in Gotham?"
- Show it uses the weather tool (simulated)
"The AI can analyze images with character-specific perspectives..."
- Upload an image to Batman
- "See how he identifies security vulnerabilities, entry points"
- Upload same image to Alfred
- "Alfred provides artistic analysis and cultural context"
- Upload to Joker
- "Joker finds chaos and humor in everything"
"You can also interact via voice..."
- Click microphone button
- Speak a question
- Show voice recognition + AI response + TTS
✅ Multi-modal AI (Text + Voice + Vision) ✅ Real-time streaming responses (Groq's 400+ tokens/sec) ✅ Function calling / tool augmentation ✅ Biometric authentication (face + voice) ✅ Character-specific TTS with pitch/rate tuning ✅ NEW: Cinematic startup videos (55+ MB total, mode-aware playback) ✅ NEW: Hybrid audio system (MP3 files + Web Audio API fallbacks) ✅ NEW: Multi-character parallel AI queries (Council Mode) ✅ NEW: Dynamic visual effects system with CSS animations
✅ Vision model integration (Llama 4 Scout - latest 2025 model) ✅ Context-aware prompts (different for text vs images) ✅ Tool/function calling with multi-step reasoning ✅ Character personality consistency across modalities ✅ NEW: Pattern-based easter egg detection system ✅ NEW: Parallel API orchestration for council responses
✅ 3 distinct visual themes with smooth transitions ✅ Mobile-responsive design ✅ Real-time voice recognition with speaker ID ✅ Accessible UI with keyboard navigation ✅ NEW: Cinematic character-specific startup videos ✅ NEW: Immersive sound effects (MP3 + procedural audio) ✅ NEW: 15+ hidden easter eggs with visual + audio effects ✅ NEW: Council mode for multi-perspective analysis ✅ NEW: Click-to-skip video intros for accessibility ✅ NEW: 5 Batman-themed mini-games with full sound integration
✅ Feature-rich incremental game (Gotham Protector Cookie Clicker) ✅ Citizens upgrade system with 18+ permanent boosts ✅ NEW: Dual bonus cookie system (Golden + Diamond) ✅ NEW: Golden Cookie spawns every 10-30s (10×-100× bonus) ✅ NEW: Diamond Cookie spawns every 1-3min (1000×-100000× bonus) ✅ NEW: Brainrot Mode - split-screen with Subway Surfers video (90MB) ✅ Save/load system with JSON export/import ✅ Balanced progression with milestone bonuses ✅ 4 additional arcade-style games (Minesweeper, Tic-Tac-Toe, RPS, Memory) ✅ Minimax AI for unbeatable Tic-Tac-Toe opponent ✅ Triple-layer glowing visual effects (yellow/amber + blue/cyan) ✅ Mouse-tracking spawn system with viewport clamping ✅ Video integration with autoplay, loop, and responsive centering
✅ Groq API - Free tier (500k tokens/day) ✅ Web Speech API - Built into browsers ✅ Supabase - Free tier PostgreSQL + Edge Functions ✅ All models and APIs are free for development ✅ NEW: Videos/audio included as bundled assets (no API costs)
[0:00 - 0:30] Introduction "Gotham AI is a multi-modal AI assistant featuring three distinct personalities from the Batman universe, each with unique voices, visual themes, cinematic intros, analysis styles, and interactive surprises."
[0:30 - 1:00] Cinematic Startup + Biometric Auth ⭐
- Start in Batman mode
- Demonstrate face + voice authentication
- Batmobile intro video plays full-screen
- Click to skip or let it play
- "Each character has their own cinematic intro - Batman's Batmobile, Alfred's manor, Joker's chaos!"
[1:00 - 1:45] Character Modes, TTS & Sound Effects
- Show all 3 characters
- Demonstrate voice differences with speaker button
- Highlight visual theme transitions
- NEW: Show character-specific sound effects (SilentProtector.mp3, evil-laugh-89423.mp3)
[1:45 - 2:15] Easter Eggs ⭐
- Batman: Type "I'm Batman" → Bat-signal flash + SilentProtector.mp3
- Joker: Type "Why so serious" → Chaos mode + evil laugh
- Alfred: Type "Tea time" → Elegant glow
- "15+ hidden easter eggs with visual AND audio effects!"
[2:15 - 3:00] Council Mode ⭐
- Click "Council" button
- Ask: "What's the best way to solve a complex problem?"
- Show all three characters responding simultaneously
- Click speaker icons to hear different voices
- "Multi-perspective decision making!"
[3:00 - 3:45] Function Calling
- Demo calculator tool
- Demo time/date tool
- Demo weather tool
- Explain how AI decides when to use tools
[3:45 - 4:45] Vision Analysis
- Upload image to Batman (security analysis)
- Upload same image to Alfred (artistic critique)
- Show how prompts adapt to images
[4:45 - 5:30] Voice Interaction
- Use voice input
- Show complete loop: Voice → AI → TTS response
[5:30 - 6:30] Closing "All of this runs on 100% free APIs and demonstrates advanced AI engineering - cinematic experiences, function calling, vision models, biometrics, character-specific personalities, hybrid audio system, and interactive effects. The startup videos alone are 55+ MB of immersive content. Plus, users love discovering the hidden easter eggs!"
First AI assistant where personality extends across ALL modalities:
- Text responses match character voice
- TTS pitch/rate reflects personality
- Image analysis style differs by character
- Visual themes adapt to persona
- NEW: Character-specific sound effects and audio feedback
AI maintains character even when using tools:
- Batman: "Calculation complete. Result: 7.05"
- Alfred: "The calculation yields 7.05, sir."
- Joker: "HAHAHA! Math time! The answer is 7.05!"
Combining face + voice recognition in browser:
- No server-side image processing (privacy-first)
- MFCC-based voice feature extraction
- Face embeddings stored encrypted
Custom prompts for each character's image analysis style:
- Batman: Security-focused, tactical assessment
- Alfred: Artistic appreciation, cultural context
- Joker: Finds absurdity and chaos
Pattern-based detection with dynamic visual effects:
- 15+ hidden easter eggs across all three modes
- Real-time regex matching for iconic quotes
- Procedurally generated visual effects (bat-signal, chaos, tea time)
- Character-specific easter egg responses
- Gamification element that encourages exploration
Parallel AI orchestration for multi-perspective analysis:
- Simultaneous queries to all three character personalities
- Promise.all() for parallel API execution
- Beautiful grid layout with individual voice playback
- Perfect for decision-making and brainstorming
- Demonstrates advanced state management and API orchestration
Combining MP3 files with Web Audio API:
- Character-specific MP3 sound files (SilentProtector.mp3, evil-laugh-89423.mp3)
- Sound caching for performance (loaded once, reused)
- Procedural fallbacks using Web Audio API
- Mute/unmute control for accessibility
- Professional sound design with optimal quality
Mode-aware video playback system:
- 3 Character-Specific Videos: Batman (Batmobile), Alfred (Manor), Joker (Chaos)
- Dynamic Import System: Videos loaded via Vite's asset bundling
- Mode-Aware Logic: Only plays for character modes (not Council)
- Responsive Scaling:
object-containensures full video visibility on all screens - Skip Functionality: Click anywhere to skip, auto-transitions when complete
- Total Size: 55.6 MB (batmobileIntro: 18.6 MB, batmanIntro: 44.2 mb, AlfredIntro: 14.8 MB, JokerIntro: 22.2 MB)
- File Format: MP4 with audio, optimized for web playback
This project demonstrates that AI should adapt to humans, not the other way around.
By combining biometric authentication, multi-modal interaction, and distinct AI personalities, we create an experience that feels natural, engaging, and genuinely helpful - whether you need Batman's tactical advice, Alfred's refined wisdom, or Joker's chaotic perspective.
Gotham wasn't protected by one hero alone. If you want to join the mission:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is open source because true heroes share their knowledge to make the world a better place.
┌─────────────────────────────────────────────────────┐
│ Frontend (React) │
│ ┌──────────┐ ┌──────────┐ ┌───────────────────┐ │
│ │ Face Rec │ │ Voice │ │ Chat Interface │ │
│ │ (Camera) │ │ Input │ │ (Text/Images) │ │
│ └──────────┘ └──────────┘ └───────────────────┘ │
│ │ │ │ │
│ └────────────┴────────────────┘ │
│ │ │
└──────────────────────┼────────────────────────────────┘
│
▼
┌──────────────────────────────┐
│ Supabase Edge Function │
│ (Function Calling Logic) │
└──────────────────────────────┘
│
┌─────────────┴─────────────┐
▼ ▼
┌─────────────────┐ ┌──────────────────┐
│ Groq API │ │ Tool Execution │
│ - Llama 4 │ │ - Calculator │
│ - Llama 3.3 │ │ - Weather │
│ - Vision Model │ │ - Time/Date │
└─────────────────┘ └──────────────────┘
│
▼
┌─────────────────────────────────┐
│ AI Response Generated │
│ (Character-Specific Format) │
└─────────────────────────────────┘
│
▼
┌─────────────────────────────────┐
│ Frontend Renders Response │
│ + TTS Speaks (Character Voice) │
└─────────────────────────────────┘
const systemPrompts = {
batman: "You are Batman, the Dark Knight. Direct, terse, commanding...",
alfred: "You are Alfred Pennyworth. Refined, articulate, proper...",
joker: "You are The Joker. Unpredictable, sarcastic, chaotic..."
};const voiceConfigs = {
batman: { rate: 0.75, pitch: 0.5 }, // Deep, slow
alfred: { rate: 0.88, pitch: 0.9 }, // Refined
joker: { rate: 1.3, pitch: 1.5 } // Fast, high
};const tools = [
{ name: "calculate", description: "Perform math" },
{ name: "get_weather", description: "Get weather" },
{ name: "get_current_time", description: "Get time/date" }
];// Import character-specific videos
let batmanVideo: string | null = null;
let alfredVideo: string | null = null;
let jokerVideo: string | null = null;
try {
batmanVideo = new URL('../assets/batmanIntro.mp4', import.meta.url).href;
alfredVideo = new URL('../assets/AlfredIntro.mp4', import.meta.url).href;
jokerVideo = new URL('../assets/JokerIntro.mp4', import.meta.url).href;
} catch (e) {
console.warn('Intro videos not found');
}
// Select video based on current theme
const videoSource = theme === 'batman' ? batmanVideo
: theme === 'alfred' ? alfredVideo
: theme === 'joker' ? jokerVideo
: null;
// Only show video for character modes (not Council)
setShowStartupVideo(theme === 'batman' || theme === 'alfred' || theme === 'joker');// Import sound files
let silentProtectorSound: string | null = null;
let evilLaughSound: string | null = null;
try {
silentProtectorSound = new URL('../assets/SilentProtector.mp3', import.meta.url).href;
evilLaughSound = new URL('../assets/evil-laugh-89423.mp3', import.meta.url).href;
} catch (e) {
console.warn('Sound files not found');
}
// Play with caching
private playSound(soundUrl: string, volume: number = 1.0) {
let audio = this.soundCache.get(soundUrl);
if (!audio) {
audio = new Audio(soundUrl);
this.soundCache.set(soundUrl, audio);
} else {
audio.currentTime = 0; // Reset for replay
}
audio.volume = volume * this.effectsVolume;
audio.play();
}Built this as a learning project? Check out these resources:
- Groq API Documentation
- Llama 4 Vision Models
- Web Speech API
- Supabase Edge Functions
- Function Calling Guide
Technologies:
- Meta AI for Llama models
- Groq for blazing-fast inference
- Supabase for backend infrastructure
- The open-source community
Inspiration: "A hero can be anyone. Even someone building AI to make the world more accessible."
Remember: The night is darkest just before the dawn. And the dawn of truly interactive, multi-modal AI is here.
Now go forth and whisper to the digital darkness. 🦇🎩🃏