PodSnippet Studio：以 Gemma 2 和 ElevenLabs 將技術文章改編成音訊預告及 Podcast

Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle Submission 💸

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 2: Side Hustle

What I Built

PodSnippet Studio is an open-source audio repurposing engine that turns written technical articles, dev blogs, and Substack newsletters into broadcast-quality 60-second audio teasers and multi-host conversational podcasts.

Who Would Pay For This?

• Technical Bloggers & DEV Authors: Writers spending 10+ hours on in-depth posts who want to drive 3x–5x more reach on social feeds (LinkedIn, X) using audio carousels.
• Substack / Newsletter Operators: Creators adding an "Audio Edition" to boost paid subscriptions ($15–$30/mo).
• Indie Hackers & DevRel Teams: Developers who need audio teasers without spending $100/episode hiring freelance audio editors.

The Two Products in One App:

1. ⚡ Solo Flash Teaser (60s): An energetic, punchy audio teaser structured with a compelling hook, 3 key takeaways, and a call-to-action.
2. 🎙️ Dual-Host Deep Dive (2.5–3.5m): A dynamic, "NotebookLM-style" conversational episode where two AI co-hosts (Alex & Sam) banter and analyze the engineering trade-offs of the article.

Demo

• Live Demo (GitHub Pages): https://inusha-thathsara.github.io/podsnippet-studio/
• Full-Stack Web Service (Render): https://podsnippet-studio.onrender.com
• Key Interactive Features:
  • 🌐 3D WebGL Studio Stage (Three.js): Audio-reactive 3D condenser studio microphone and neon cyber frequency rings with dynamic camera presets (Studio View, Host Cam, Top-Down Orbit) and active-speaker reactive lighting (Cyan for Alex, Violet for Sam).
  • 🌊 Interactive Waveform Scrubbing: Canvas-rendered waveform with hover timestamp tooltips, click-to-seek, and variable playback speeds (0.75x–2.0x).
  • ✨ Synchronized Karaoke Captions: Real-time word-by-word highlighted subtitles powered by ElevenLabs alignment timestamps, with click-to-seek phrase navigation.
  • ✍️ Gemma 2 Script Studio: 4 tone presets (Viral, Deep Technical, Casual, Story-Driven), in-browser line editor, live turn-taking duration estimators, and phonetic jargon translation.
  • 📥 Creator Studio Exports: 1-Click broadcast MP3 download and embeddable iframe player card generator.

Code

inusha-thathsara / podsnippet-studio

🎙️ Open-source AI podcast & audio teaser engine for technical writers with Gemma 2 and ElevenLabs. Built for Hacktoberfest Week 2.

• GitHub Repository: https://github.com/inusha-thathsara/podsnippet-studio
• License: MIT License

How I Built It

The architecture combines open-weight AI with high-fidelity speech synthesis and 3D WebGL:

flowchart TD
    Article[Blog Post URL or Markdown] --> Ingest[Article Extractor & Sanitizer]
    Ingest --> Gemma[Gemma 2 9B Script Engine]
    Gemma -->|Mode A: Solo Hook| ScriptA[Solo 60s Script + Tech Phonetics]
    Gemma -->|Mode B: Dialogue| ScriptB[Alex & Sam Multi-Turn Script]
    ScriptA --> ElevenLabs[ElevenLabs TTS with Timestamps]
    ScriptB --> Stitcher[Multi-Speaker Audio Stitcher]
    ElevenLabs --> ThreeJS[Three.js 3D Stage Visualizer]
    Stitcher --> ThreeJS
    ThreeJS --> WebAudio[Web Audio API Waveform Visualizer]
    WebAudio --> Studio[Karaoke Subtitles + Player + MP3 Export]

1. Open-Weight AI Core (Google Gemma 2): Rewrites written prose "for the ear", injecting oral contractions, hook structures, and phoneticizing developer jargon (e.g., CI/CD → "see-eye-see-dee", SQL → "sequel", k8s → "kubernetes").
2. Voice Engine (ElevenLabs): Synthesizes speech using curated voice profiles (Rachel, Adam, Domi, George) and extracts word-level timestamps (characters and start_times_seconds) to drive real-time karaoke subtitles.
3. Dialogue Stitcher & Audio Buffer Engine: In Dual-Host mode, the backend synthesizes Alex and Sam's lines with distinct voice IDs, concatenates the MP3 buffers with 350ms conversational pauses, and recalculates continuous word timestamp offsets for gapless playback.
4. 3D WebGL Audiogram Studio (Three.js): A full real-time 3D canvas featuring a vintage studio condenser mic, suspension shock mounts, pulsing acoustic waves, and orbital frequency rings that bounce dynamically to Web Audio API frequency data.

Why Does Open Innovation Matter?

In a micro-SaaS business, unit economics are everything:

┌─────────────────────────────────────────────────────────────┐
│                 Micro-SaaS Unit Economics                   │
├──────────────────────────┬──────────────────────────────────┤
│ Subscription Pricing     │ $19 / month (30 episodes)        │
│ Script Generation Cost   │ $0.00 (Open-Weight Gemma 2)      │
│ Voice Synthesis Cost     │ ~$2.20 (ElevenLabs API / mo)     │
│ Cloud Hosting (Render)   │ $0.00 (Free Tier)                │
├──────────────────────────┼──────────────────────────────────┤
│ Net Gross Profit Margin  │ 88.4%                            │
└──────────────────────────┴──────────────────────────────────┘

1. Preserving 88%+ Profit Margins: Summarizing a 4,000-word article with commercial closed APIs costs significant token fees on every regeneration and edit. Running open-weight Gemma 2 brings marginal text-processing costs to $0, allowing an affordable $19/month indie subscription to remain highly profitable.
2. Domain-Specific Phonetic Dictionaries: Open models can be customized and prompted with developer-specific pronunciation rules without third-party API censorship or arbitrary rate-limiting.
3. Privacy for Unreleased Drafts: Authors generating audio teasers for embargoed company announcements or unpublished proprietary research never risk leaking sensitive drafts into public commercial model training datasets.

My First User

I showed PodSnippet Studio to a fellow technical writer who publishes weekly tutorials on system architecture and cloud infrastructure. They tested the Dual-Host Deep Dive on their recent deep-dive post and shared:

"Hearing two AI co-hosts banter naturally about my article felt like having an NPR podcast team produce a breakdown of my work in under 30 seconds. I would easily pay $15 to $20/month just to embed these audio players at the top of my Substack posts to increase reader engagement."

What Did They Ask For Next?

When asked what would make it a daily necessity for their publishing workflow, they requested:

1. Automated RSS Podcast Feeds: The ability to auto-generate an Apple/Spotify-compliant podcast RSS feed so every new blog post is immediately distributed to podcast directories.
2. 1-Click Audiogram Video Export: An automated vertical (9:16) MP4 video export with the 3D visualizer and animated subtitles for posting directly to TikTok, LinkedIn, and YouTube Shorts.

Prize Categories

• Featured: Best Use of Gemma — Open-weight Gemma 2 powers the scriptwriting engine, spoken cadence adaptation, and phonetic tech dictionaries.
• Featured: Best Use of Render — Full-stack web service deployed on Render using declarative render.yaml with zero-downtime static asset serving.
• Partner: Best Use of ElevenLabs — Multi-voice synthesis, speaker stitching, and word-level alignment timestamps driving real-time karaoke captions.
• Partner: Best Use of a .tech Domain — Target custom production domain: podsnippet.tech.