{"slug": "passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs", "title": "PassionCast: I Built an AI Hype Man for World Cup Fans Using Gemini + ElevenLabs", "summary": "A developer built PassionCast, an AI hype man for World Cup fans that generates 60-second audio commentary clips using Google's Gemini 2.0 Flash for script generation and ElevenLabs for voice synthesis. The tool lets users pick a team and passion mode, producing personalized commentary referencing players, history, and rivals. The project uses vanilla JavaScript, Vite, and GitHub Pages, with no backend to enable easy forking.", "body_md": "*This is a submission for Weekend Challenge: Passion Edition*\n\nThe World Cup quarter-finals are on right now. I'm watching matches, yelling at my screen, and I thought: what if I could bottle that feeling into an audio clip?\n\n**PassionCast** lets you pick your team, choose a passion mode (hype speech, glory moment, rivalry fire, heartbreak, fan anthem, or custom), and generates a 60-second AI commentary clip. Not the generic \"your team is amazing\" stuff. Actual references to your team's players, history, and rivals.\n\nPick India, select \"Rivalry Fire,\" hit generate. You get a breathless commentator talking about the India-Pakistan cricket-meets-football tension, with real names and real context. Try Argentina and you get Maradona, La Albiceleste, the Diego legacy. That's what I was going for.\n\nThree pre-generated sample clips are on the page. Hit play, no keys needed. You'll hear:\n\nTo generate your own, you'll need free API keys (30 seconds each):\n\n**The flow:**\n\n**Your personal AI hype man for the World Cup 2026.**\n\nPick your team. Choose a moment. Get a passionate, AI-generated audio commentary that captures the fire of football fandom.\n\n| Layer | Technology | Why |\n|---|---|---|\n| Script generation | Google AI (Gemini 2.0 Flash) | High temperature (0.9) + cultural context = scripts that feel personal, not generic |\n| Voice synthesis | ElevenLabs (Multilingual v2) | Low stability (0.4) for emotional range, high style (0.6) for expressiveness |\n| Frontend | Vanilla JS + Vite | Fast, no framework overhead, deploys anywhere |\n| Hosting | GitHub Pages | Free, automatic deploys via GitHub Actions |\n\nNo backend. No database…\n\nNo backend. No framework. One page, vanilla JS, two API calls. Vite for bundling, GitHub Pages for hosting.\n\n```\nBrowser → Gemini 2.0 Flash (writes script) → ElevenLabs (speaks it) → Audio playback\n```\n\nI specifically didn't want a backend here. The whole point is that someone can fork this, drop in their own keys, and have it running in 30 seconds.\n\nGetting Gemini to write *passionate* content was harder than I expected. At temperature 0.7, everything came out bland. \"Your team has a proud history. The fans are excited.\" Useless.\n\nAt **0.9**, things got interesting. Combined with a detailed system prompt that includes the team name, their rivals, their football culture, and the specific style I want (narrator vs commentator vs poet), the output started feeling real.\n\nThe trick was constraining length. I needed 150-200 words, the sweet spot for 45-60 seconds of audio. Too short and it feels empty. Too long and ElevenLabs starts rushing or the clip drags.\n\n```\n// Note: ${apiKey} is a template literal variable, not a real key. \n// Users provide their own free key from aistudio.google.com/apikey\nconst response = await fetch(\n  `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`,\n  {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({\n      contents: [{ parts: [{ text: prompt }] }],\n      generationConfig: { temperature: 0.9, maxOutputTokens: 500 }\n    })\n  }\n);\n```\n\nI tested default voice settings first. Sounded flat. Like a GPS reading football commentary.\n\nThe fix: crank down **stability to 0.4** (default is higher). This adds emotional variation. The voice wavers, speeds up, gets louder on key phrases. Exactly what you want for sports commentary.\n\nThen **style to 0.6** for extra expressiveness, and **speaker boost on** for clarity.\n\nThree voices, matched to content:\n\n```\nbody: JSON.stringify({\n  text: script,\n  model_id: 'eleven_multilingual_v2',\n  voice_settings: {\n    stability: 0.4,\n    similarity_boost: 0.8,\n    style: 0.6,\n    use_speaker_boost: true,\n  }\n})\n```\n\nI used flag images from flagcdn.com instead of emoji because emoji flags don't render on Windows for England, Wales, and Scotland (they show as black rectangles). Learned that the hard way after building the whole grid with emoji first.\n\nDark theme with gold/fire accents because... it's a passion app. Light mode would feel wrong.\n\nIf I had another weekend: social sharing (let people post their clips), match-day mode that checks today's fixtures and auto-suggests hype content, and a gallery so you can hear what other fans generated. PRs welcome if you want to tackle any of these.\n\n**Best Use of Google AI**: Gemini 2.0 Flash with temperature 0.9 and detailed cultural prompting. Produces scripts with real player names, real rivalry history, and team-specific fan culture for 48 nations. Three distinct writing styles (narrator, commentator, poet) via style instructions in the prompt.\n\n**Best Use of ElevenLabs**: Multilingual v2 model with deliberately tuned settings. Stability at 0.4 for emotional range (default sounds robotic for sports content). Style at 0.6 for expressiveness. Three voices paired to content types. The output sounds like broadcast commentary, not text-to-speech.", "url": "https://wpnews.pro/news/passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs", "canonical_source": "https://dev.to/sarvar_04/passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs-1ilh", "published_at": "2026-07-12 16:57:52+00:00", "updated_at": "2026-07-12 17:15:58.453365+00:00", "lang": "en", "topics": ["artificial-intelligence", "generative-ai", "ai-tools", "large-language-models", "developer-tools"], "entities": ["Google AI", "Gemini 2.0 Flash", "ElevenLabs", "GitHub Pages", "Vite"], "alternates": {"html": "https://wpnews.pro/news/passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs", "markdown": "https://wpnews.pro/news/passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs.md", "text": "https://wpnews.pro/news/passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs.txt", "jsonld": "https://wpnews.pro/news/passioncast-i-built-an-ai-hype-man-for-world-cup-fans-using-gemini-elevenlabs.jsonld"}}