This is a submission for Weekend Challenge: Passion Edition
What I Built
HahaNotes is an interactive web application designed to help developers, office workers, and students vent their daily stress by transforming real-world struggles (legacy code at 3 AM, unpaid overtime, sแบฟp hรฃm, or exam stress) into hilarious, sarcastic AI-voiced banters, complete podcasts, and ready-to-share short videos.
The application features a dynamic dialogue between two contrasting AI hosts:
- Rookie (The Naive Optimist): A starry-eyed beginner who sees the world through rose-colored glasses and speaks in trendy buzzwords.
- Cynic (The Sarcastic Senior): A battle-hardened veteran who gently (or not so gently) pops Rookie's bubble with witty, dry, and highly relatable tech sarcasm.
Users can input their struggles, choose their favorite voices for the hosts, generate structured comedy scripts, chat continuously with the hosts to extend the banter, listen to fully produced podcasts with ambient lo-fi background music/laugh tracks, and export 9:16 vertical short videos with synchronized karaoke captions and visual memes.
Demo
Video Demo:
Website Demo: https://hahanotes.vercel.app/
Code
๐๏ธ HahaNotes
Banishing Developer Burnout with AI Banter Podcasts & Short Videos
Live Demo: hahanotes.vercel.app Weekend Challenge: Submitted for Weekend Challenge: Passion Edition
๐ Introduction
HahaNotes is an interactive web application designed to help developers, office workers, and students vent their daily stress by transforming real-world struggles (e.g. legacy bugs at 3 AM, unpaid overtime, or exam anxiety) into hilarious, sarcastic AI-voiced banters, complete podcasts, and ready-to-share short videos.
The application features a dialogue between two contrasting AI hosts:
- Rookie (The Naive Optimist): A starry-eyed beginner who sees the world through rose-colored glasses, uses corporate buzzwords, and believes completely in hustle culture.
- Cynic (The Sarcastic Senior): A battle-hardened veteran who gently (or not so gently) pops Rookie's bubble with dry, witty tech sarcasm and relatable references.
๐ Key Features
- AI Comedy Script Generation: Powered by Google Gemini, creating hilarious 4-6 scene dialogs on-demand based on user category, topic, andโฆ
How I Built It
HahaNotes is built with a modern stack optimized for smooth real-time generation and high-quality media rendering:
-
Frontend: Built with Next.js (App Router), TailwindCSS, and a custom vertical
<canvas>renderer. The browser records the canvas frames at 24fps and merges them with the live audio stream using the Web MediaRecorder API to generate downloadable.webmshort videos directly on the client side. - Backend: Powered by a FastAPI server that acts as a robust orchestrator for generative text and audio processing.
- SQLite Metadata & Cache Database: Designed to cache script results and register unique MD5 voice mappings on-demand, minimizing Gemini API calls and ElevenLabs API quota consumption.
-
Precise Timing Sync Engine: To solve the out-of-sync karaoke subtitles, we built a server-side metadata generator using
pydub. It reads the exact millisecond length of each cached audio scene and laugh track, allowing the frontend to render perfectly synced karaoke highlights on the canvas. -
Visual Assets: Contains 7 high-quality cartoon meme illustrations (
clown,harold,fine_dog,drake_no,drake_yes,doge, andburn) generated dynamically using Google's generative image capabilities.
Prize Categories
We are submitting our project to the following categories:
Best Use of ElevenLabs:
We utilized ElevenLabs' state-of-the-art TTS voices (like Bella, Rachel, Antoni, and Adam) to bring our hosts to life. The backend handles dynamic generation with asynchronous HTTP client calls, merges them into a cohesive multi-speaker podcast with ambient music and laughing sound effects usingpydub, and supports a robust gTTS fallback mechanism.-
Best Use of Google AI:
HahaNotes is built from the ground up using the official Google GenAI SDK.- We use
gemini-3.5-flashwith structured Pydantic schemas (HahaNoteScript) to guarantee strict JSON output format for dialogue script generation. - We leverage Gemini's stateful Interactions API (
client.interactions.createwithprevious_interaction_id) to keep a continuous, contextual memory of the chat history when users comment or prompt the hosts further. - We also used Google's image models to design custom meme templates for the video renderer.
- We use
Top comments (0)