DEV Community

Cover image for I Built an AI That Yells at You (In a Good Way) Using ElevenLabs & Gemini
Tanmay Patwary
Tanmay Patwary

Posted on

I Built an AI That Yells at You (In a Good Way) Using ElevenLabs & Gemini

#devchallenge #weekendchallenge

DEV Weekend Challenge: Passion Edition Submission

*This is a submission for Weekend Challenge: Passion Edition*

What I Built

Locker Room is an AI-powered hype machine that generates personalized, emotional pep talks before you tackle your passions. Tell it what you're facing, pick a "Cornerman" (like a Coach or Narrator), and it creates a custom spoken audio tape alongside dynamically generated retro cassette artwork.

Demo

locker-room-ecru.vercel.app

Code

GitHub logo TanCodeX / locker-room

🎙️ Locker Room

"Select your intent, choose your persona, and get the exact hype you need before you step onto the field."

Locker Room is the ultimate hype-machine, built specifically for the DEV Weekend Challenge: Passion. Whether you are playing your bitter rivals in a Sunday league championship, watching your nation in a World Cup penalty shootout, or shipping your passion side-project to Product Hunt at midnight—Locker Room gives you a fully custom, intense, AI-voiced pep talk to fuel your fire.

🏆 Prize Categories Targeted

1. Best use of Google AI

Locker Room leans heavily into Gemini 3.5 Flash for its extreme speed and creative abilities, using it for two completely different critical tasks:

  1. The Director: Gemini takes your intense scenario and acts as a theatrical director, writing a 150-word pre-game pep talk tailored specifically to your chosen coach's persona. It even injects stage directions ([shouts], [whispers]…
View on GitHub

How I Built It

  • Tech Stack: Built with React, Tailwind CSS, Node.js, and Express.
  • Parallel AI Generation: A single request triggers Gemini to simultaneously write the speech text (injecting emotional tags like [shouts]) and generate raw SVG markup for the cassette art.
  • Dynamic Audio: ElevenLabs parses the text and tags for intense voice acting. If rate limits hit, the server seamlessly falls back to Gemini's native Audio Modality (gemini-3.1-flash-tts-preview) to generate the voice.
  • Live Visualizer: The frontend hooks into the browser's AudioContext to map live frequency data to a 36-bar animated equalizer during playback.
  • Voice Input: Integrated the Web Speech API so users can dictate their scenarios directly.

Prize Categories

  • Best Use of Google AI: Leveraged gemini-3.5-flash for simultaneous creative writing and complex SVG generation, and implemented the @google/genai SDK's Modality.AUDIO feature as a resilient server-side TTS fallback engine.
  • Best Use of ElevenLabs: Powered the core audio with eleven_v3, mapping four distinct personas to specific voices and utilizing LLM-injected performance tags to maximize the engine's emotional range.

Top comments (0)