Merge HuggingFace_Hack/main: real TTS pipeline + asset overhaul

app.py: dynamic story loading from stories/, CSS from static/style.css,
integrated library+player tab, real TTS streaming via tts.py
requirements.txt: pin gradio==5.35.0, add supertonic/onnxruntime/hf-hub
README.md: prepend HF Space YAML header, keep full project README
New: tts.py, static/style.css, assets/covers/, SPEC.md, docs/, test_modules/

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitattributes

@@ -0,0 +1,7 @@
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.wav filter=lfs diff=lfs merge=lfs -text
+*.mp3 filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,3 +1,15 @@
+---
+title: ReadBookMom
+emoji: 📖
+colorFrom: yellow
+colorTo: green
+sdk: gradio
+sdk_version: "5.35.0"
+python_version: "3.10"
+app_file: app.py
+pinned: false
+---
+
 # ReadBookMom
 
 **A parent records their voice. A bedtime story plays in that voice. The child can ask questions and hear answers — all in mom or dad's voice.**

SPEC.md

@@ -0,0 +1,103 @@
+# ReadBookMom
+
+**A parent records their voice. A bedtime story plays in that voice. The child can ask questions and hear answers — all in mom or dad's voice.**
+
+Built for the Hugging Face Hackathon. Runs entirely on local models inside a Gradio app on Hugging Face Spaces — no external APIs, no data leaves the server.
+
+## Demo
+
+```
+🎤 Record 15s of your voice → 📖 Pick a story → ▶️ Story plays in your voice
+                                                       ↓
+                                    ❓ Child taps Ask → Story pauses
+                                                       ↓
+                                    Child asks a question → Hears answer in your voice
+                                                       ↓
+                                              ▶️ Story resumes
+```
+
+## How It Works
+
+| Step | What Happens | Model |
+|---|---|---|
+| **Clone** | Parent records or uploads 15–30s of audio. Voice representation is computed and cached. | QWEN-TTS-0.6B |
+| **Listen** | Story plays in the cloned voice as interruptible paragraph chunks. | QWEN-TTS-0.6B |
+| **Ask** | Child taps Ask, narration pauses, child types or speaks a question. | Whisper-small (ASR, on-demand) |
+| **Answer** | A short grounded answer is generated from the story context and spoken in the cloned voice. | Qwen2.5-3B-Instruct + QWEN-TTS-0.6B |
+| **Resume** | Story continues from where it left off. | Cached chunks |
+
+## Models
+
+| Model | Role | Size |
+|---|---|---|
+| [QWEN-TTS-0.6B](https://huggingface.co/Qwen/Qwen-TTS-0.6B) | Voice cloning + TTS | 0.6B params |
+| [Qwen2.5-3B-Instruct](https://huggingface.co/Qwen/Qwen2.5-3B-Instruct) | Story Q&A | 3B params (4-bit on T4) |
+| [Whisper-small](https://huggingface.co/openai/whisper-small) | Child speech-to-text | 244M params (loaded on demand) |
+
+## Tech Stack
+
+- **UI:** Gradio 5.x + gr.Server (custom CSS/JS for Google Stitch-inspired design)
+- **Runtime:** Single `app.py` process on HF Spaces (T4 or A10G GPU)
+- **Stories:** 10 public domain `.txt` files (downloaded and cleaned from Project Gutenberg)
+- **Storage:** In-memory session cache (no database)
+
+## Quick Start (Local Dev)
+
+```bash
+git clone https://github.com/MomsVoiceAI/HuggingFace_Hack.git
+cd HuggingFace_Hack
+pip install gradio transformers torch accelerate bitsandbytes soundfile numpy
+python app.py
+# → http://localhost:7860
+```
+
+## Project Structure
+
+```
+├── app.py                  # Main Gradio app
+├── requirements.txt        # Python deps
+├── stories/                # 10 cleaned public domain story texts (TTS-ready)
+├── story_downloader/       # Story acquisition & cleaning pipeline
+│   ├── gutenberg_downloader.py  # Reusable Project Gutenberg downloader/parser
+│   ├── download_stories.py      # Downloads 10 children's stories
+│   └── clean_stories.py         # Strips Gutenberg boilerplate for TTS
+├── static/                 # Custom CSS/JS for Stitch-style UI
+├── assets/covers/          # Story cover images
+├── mission.md              # Product vision
+├── sprint.md               # 2-day hackathon sprint plan
+├── tech_stack.md            # Technical architecture
+└── future_mobile_app_considerations.md  # Mobile deployment guidance
+```
+
+## Stories Included
+
+| Story | Words | Source |
+|---|---|---|
+| The Tale of Peter Rabbit | 948 | Beatrix Potter |
+| The Tale of Benjamin Bunny | 1,118 | Beatrix Potter |
+| The Tale of Jemima Puddle-Duck | 1,245 | Beatrix Potter |
+| The Tale of Tom Kitten | 691 | Beatrix Potter |
+| The History of Tom Thumb | 2,912 | Traditional |
+| The Story of the Three Little Pigs | 956 | Traditional |
+| The Little Red Hen | 1,295 | Traditional |
+| The Little Gingerbread Man | 1,823 | Traditional |
+| The Sleeping Beauty | 1,783 | Traditional |
+| The Adventures of Puss in Boots | 503 | Traditional (verse) |
+
+All stories are public domain from [Project Gutenberg](https://www.gutenberg.org/). Each file uses a simple format: title on line 1, blank line, then story prose — ready for direct TTS consumption.
+
+## Key Design Decisions
+
+- **All local inference** — voice, Q&A, and ASR run on the Space GPU. No external APIs.
+- **Interruptible chunked streaming** — paragraphs synthesized and played one at a time for fast start and clean pause/resume.
+- **Pre-generated Q&A** — anticipated questions are generated in the background during narration for sub-1s response on cache hits.
+- **Button-based interruption** — tap Ask to pause. No always-listening mic (privacy + complexity).
+- **Privacy-first** — no audio leaves the server, no user accounts, no database.
+
+## Privacy
+
+All inference runs on the Hugging Face Space GPU. Voice samples, story text, and generated audio stay on the server runtime and are not persisted after the session ends. No external APIs are called.
+
+## License
+
+Hackathon project. Stories are public domain.

app.py

@@ -4,21 +4,24 @@ import struct
 import wave
 import gradio as gr
 import time
+from pathlib import Path
+
+from tts import split_into_chunks, generate_audio_stream
 
 # Create directories for sample audio files
 os.makedirs("sample_sounds", exist_ok=True)
 
-# Generate relaxing audio chime waveforms procedurally 
+# Generate relaxing audio chime waveforms procedurally
 # This runs fully client/server-side with standard Python, eliminating mock limits or Torch wait times
 def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
     sample_rate = 16000
     n_samples = int(duration * sample_rate)
-    
+
     with wave.open(filename, 'wb') as wav_file:
         wav_file.setnchannels(1)
         wav_file.setsampwidth(2)
         wav_file.setframerate(sample_rate)
-        
+
         # Pentatonic cozy scales
         if melody_type == "lullaby":
             notes = [261.63, 293.66, 329.63, 392.00, 440.00] # C4, D4, E4, G4, A4
@@ -32,7 +35,7 @@ def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
             note_speed = sample_rate * 1.5 if melody_type == "lullaby" else sample_rate * 1.2
             note_idx = int((i / note_speed) % len(notes))
             freq = notes[note_idx]
-            
+
             # envelope to prevent crackles
             sample_in_note = i % int(note_speed)
             envelope = 1.0
@@ -41,13 +44,13 @@ def generate_chimes_wav(filename, duration=120, melody_type="lullaby"):
             else: # decay
                 decay_length = note_speed - 1200
                 envelope = max(0.0, 1.0 - (sample_in_note - 1200) / decay_length)
-                
+
             # Synthesize voice-harmonic chime
             val = math.sin(2 * math.pi * freq * i / sample_rate)
             val += 0.45 * math.sin(2 * math.pi * (freq * 1.5) * i / sample_rate)
             val += 0.25 * math.sin(2 * math.pi * (freq * 2.0) * i / sample_rate)
             val = val / 1.7 * envelope
-            
+
             packed_val = struct.pack('<h', int(val * 16384))
             wav_file.writeframes(packed_val)
 
@@ -65,79 +68,47 @@ for key, (path, dur, mel) in create_sound_library.items():
     if not os.path.exists(path):
         generate_chimes_wav(path, duration=dur, melody_type=mel)
 
-# Initial dataset of audiobooks
-mock_books = [
-    {
-        "id": "1",
-        "title": "The Enchanted Willow",
-        "author": "Elena S. Thorne",
-        "cover_url": "https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400",
-        "voice_name": "Mom's Voice",
-        "duration": 1200,
-        "elapsed_time": 456,
-        "synopsis": "Deep within the heart of Whispering Woods stands an ancient willow tree, rumored to hold the forgotten memories of the valley. When a young cartographer is sent to map the region, she starts hearing a gentle, familiar voice whispering from the rustling emerald leaves.",
-        "category": "Fantasy",
-        "is_cloned": True,
-        "percentage": 38,
-        "audio_path": "sample_sounds/willow.wav"
-    },
-    {
-        "id": "2",
-        "title": "The Clockwork Sky",
-        "author": "Arthur Pendelton",
-        "cover_url": "https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&q=80&w=400",
-        "voice_name": "Folk Storyteller",
-        "duration": 1800,
-        "elapsed_time": 0,
-        "synopsis": "In a world where the heavens are driven by complex brass gears and clockwork stars, a young apprentice discovers an unaccounted gear grinding in the midnight sky—a secret that the High Astrologers have hidden for a millennium.",
-        "category": "Sci-Fi & Steampunk",
-        "is_cloned": False,
-        "percentage": 0,
-        "audio_path": "sample_sounds/sky.wav"
-    },
-    {
-        "id": "3",
-        "title": "Echoes of the Deep",
-        "author": "Mariana Vance",
-        "cover_url": "https://images.unsplash.com/photo-1476275466078-4007374efbbe?auto=format&fit=crop&q=80&w=400",
-        "voice_name": "Grandpa Joseph",
-        "duration": 2400,
-        "elapsed_time": 1200,
-        "synopsis": "A quiet oceanographer working in a remote marine sanctuary begins to trace an unusual, rhythmic hum coming from the Marianas Trench. The signal grows stronger, mimicking a lullaby his grandfather used to whistle.",
-        "category": "Adventure",
-        "is_cloned": True,
-        "percentage": 50,
-        "audio_path": "sample_sounds/deep.wav"
-    },
-    {
-        "id": "4",
-        "title": "The Midnight Baker",
-        "author": "Clara Dupont",
-        "cover_url": "https://images.unsplash.com/photo-1456513080510-7bf3a84b82f8?auto=format&fit=crop&q=80&w=400",
-        "voice_name": "Mom's Voice",
-        "duration": 980,
-        "elapsed_time": 980,
-        "synopsis": "Every night at midnight, Clara bakes bread that infuses the sleeping town with warmth. Customers don’t buy her pastries to satisfy hunger; they eat them to relive the comforting memories of childhood summers.",
-        "category": "Slice of Life",
-        "is_cloned": True,
-        "percentage": 100,
-        "audio_path": "sample_sounds/baker.wav"
-    },
-    {
-        "id": "5",
-        "title": "Letters from Paris",
-        "author": "Julian Mercer",
-        "cover_url": "https://images.unsplash.com/photo-1492052722242-2554d0e99e3a?auto=format&fit=crop&q=80&w=400",
-        "voice_name": "Grandpa Joseph",
-        "duration": 1560,
-        "elapsed_time": 0,
-        "synopsis": "A bundle of yellowed, ribbon-bound letters hidden inside an attic chest on Rue de l’Odeon unravels a heartbreaking secret of courage and hidden artwork dating back to the winter of 1944.",
-        "category": "Historical Fiction",
-        "is_cloned": True,
-        "percentage": 0,
-        "audio_path": "sample_sounds/letters.wav"
-    }
-]
+COVERS_DIR = Path(__file__).parent / "assets" / "covers"
+
+def cover_path(slug: str) -> str:
+    p = COVERS_DIR / f"{slug}.png"
+    return f"/gradio_api/file={p.resolve().as_posix()}"
+
+def load_books_from_stories(stories_dir="stories"):
+    books = []
+    story_files = sorted(
+        f for f in os.listdir(stories_dir) if f.endswith(".txt")
+    ) if os.path.isdir(stories_dir) else []
+
+    for i, filename in enumerate(story_files):
+        title = filename.replace(".txt", "").replace("_", " ")
+        slug = filename.replace(".txt", "")
+        synopsis = ""
+        try:
+            with open(os.path.join(stories_dir, filename), encoding="utf-8") as f:
+                lines = [l.strip() for l in f.readlines() if l.strip()]
+                synopsis = " ".join(lines[1:4]) if len(lines) > 1 else lines[0] if lines else ""
+        except Exception:
+            pass
+
+        books.append({
+            "id": str(i + 1),
+            "title": title,
+            "author": "Public Domain",
+            "cover_url": cover_path(slug),
+            "voice_name": "Mom's Voice",
+            "duration": 0,
+            "elapsed_time": 0,
+            "synopsis": synopsis,
+            "category": "Children's Story",
+            "is_cloned": False,
+            "percentage": 0,
+            "audio_path": None,
+            "story_path": os.path.join(stories_dir, filename),
+        })
+    return books
+
+mock_books = load_books_from_stories()
 
 mock_voices = [
     {
@@ -178,167 +149,19 @@ narrative_subtitles = [
     "And that was when she realized, she was not alone in the valley."
 ]
 
-css_code = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
-/* Main layouts and colors matching VoiceBook cream and amber theme */
-body, .gradio-container {
-    background-color: #FAF7F2 !important;
-    font-family: 'Inter', system-ui, sans-serif !important;
-}
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-}
-/* Serif headers */
-.serif-header {
-    font-family: 'Playfair Display', Georgia, serif !important;
-    color: #1c1c19 !important;
-    font-weight: 700 !important;
-}
-.cream-bg {
-    background-color: #FAF7F2 !important;
-}
-.card-container {
-    background-color: #f6f3ee !important;
-    border: 1px solid #ebdccb !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    box-shadow: 0 2px 8px rgba(148, 74, 0, 0.03) !important;
-}
-.accent-border {
-    border-color: #ddc1b0 !important;
-}
-.highlight-orange {
-    color: #f5841f !important;
-}
-.highlight-amber {
-    color: #944a00 !important;
-}
-.dark-card-container {
-    background-color: #122116 !important;
-    color: #FAF7F2 !important;
-    border: 1px solid #1e3422 !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
-}
-/* Customized HTML grids matching identical React typography */
-.hero-spotlight {
-    background: linear-gradient(135deg, #1e3422 0%, #121f15 100%) !important;
-    color: #FFFFFF !important;
-    border-radius: 24px !important;
-    padding: 32px !important;
-    position: relative;
-    overflow: hidden;
-}
-.badge-featured {
-    background: rgba(245, 132, 31, 0.2);
-    color: #f5841f;
-    border: 1px solid rgba(245, 132, 31, 0.3);
-    border-radius: 9999px;
-    padding: 4px 10px;
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    display: inline-block;
-}
-.book-shelf-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 20px;
-}
-.shelf-card {
-    background: #f6f3ee;
-    border: 1px solid #eadacc;
-    border-radius: 16px;
-    padding: 16px;
-    display: flex;
-    gap: 16px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-.shelf-card:hover {
-    border-color: #f5841f;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(148, 74, 0, 0.06);
-}
-.cover-image {
-    width: 80px;
-    height: 110px;
-    object-fit: cover;
-    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-.progress-bar-bg {
-    width: 100%;
-    height: 6px;
-    background: #ebdccb;
-    border-radius: 999px;
-    overflow: hidden;
-}
-.progress-bar-fill {
-    height: 100%;
-    background: #f5841f;
-}
-/* Pulsing rings for microphone recording */
-@keyframes pulse-ring {
-  0% { transform: scale(0.85); opacity: 0.6; }
-  50% { transform: scale(1.15); opacity: 0.25; }
-  100% { transform: scale(1.4); opacity: 0; }
-}
-.pulse-circle {
-    position: relative;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background: #944a00;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-}
-.recording-active {
-    background: #ef4444 !important;
-}
-/* Subtitle dialog ticker */
-.dialog-synced {
-    background: rgba(0,0,0,0.15);
-    border: 1px solid rgba(255,166,0,0.1);
-    color: #ffd3a6;
-    font-family: 'Playfair Display', Georgia, serif;
-    font-size: 1.25rem;
-    font-style: italic;
-    padding: 24px;
-    border-radius: 16px;
-    text-align: center;
-    min-height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-/* Tab button custom styles */
-.tabs .tab-nav button {
-    border-bottom: 2px solid transparent !important;
-}
-.tabs .tab-nav button.selected {
-    color: #944a00 !important;
-    border-bottom-color: #944a00 !important;
-    font-weight: 700 !important;
-}
-"""
+with open(os.path.join(os.path.dirname(__file__), "static", "style.css"), encoding="utf-8") as _f:
+    css_code = _f.read()
 
 def generate_dashboard_html(books_list):
     featured = books_list[0]
     others = books_list[1:]
-    
+
     html = f"""
     <div style="margin-bottom: 24px;">
         <span style="font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: #f5841f; font-weight: 600;">Welcome Back, Sarah</span>
         <h2 class="serif-header" style="font-size: 28px; margin-top: 4px; margin-bottom: 16px;">Explore Your Warm Audiobook Shelves</h2>
     </div>
-    
+
     <!-- Hero Spotlight Section -->
     <div class="hero-spotlight" style="display: flex; flex-direction: row; gap: 32px; align-items: center; margin-bottom: 32px; flex-wrap: wrap;">
         <div style="flex: 1; min-width: 200px; max-width: 280px; text-align: center;">
@@ -351,7 +174,7 @@ def generate_dashboard_html(books_list):
                 <p style="color: #6f6257;">by <span style="font-style: italic; color: #ddc1b0;">{featured['author']}</span></p>
                 <p style="color: #cbd5e1; font-size: 13.5px; line-height: 1.6; margin-top: 8px;">{featured['synopsis']}</p>
             </div>
-            
+
             <div style="display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #e2e8f0;">
                 <span style="background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 8px;">⏱️ 20 Min Remaining</span>
                 <span style="background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 8px; font-weight: 600; color: #ffd3a6;">🎙️ Narrator: {featured['voice_name']}</span>
@@ -359,12 +182,12 @@ def generate_dashboard_html(books_list):
             </div>
         </div>
     </div>
-    
+
     <div>
         <h4 class="serif-header" style="font-size: 20px; margin-bottom: 16px;">Continue Reading with Channeled Voices</h4>
         <div class="book-shelf-grid">
     """
-    
+
     for bk in books_list:
         html += f"""
         <div class="shelf-card">
@@ -391,7 +214,7 @@ def generate_dashboard_html(books_list):
             </div>
         </div>
         """
-        
+
     html += """
         </div>
     </div>
@@ -401,7 +224,6 @@ def generate_dashboard_html(books_list):
 
 def generate_library_html(books_list, query="", category_filt="All", empty_mode=False):
     if empty_mode:
-        # Compliance state: Line View empty shelf visual specifications
         return """
         <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 16px; text-align: center; max-width: 440px; margin: 0 auto;">
             <div style="position: relative; width: 90px; height: 90px; border-radius: 50%; background: #ede8e3; border: 1px dashed #ddc1b0; display: flex; align-items: center; justify-content: center; margin-bottom: 24px;">
@@ -422,12 +244,12 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
     for bk in books_list:
         match_query = (query.lower() in bk["title"].lower()) or (query.lower() in bk["author"].lower()) or (query.lower() in bk["voice_name"].lower())
         match_cat = True
-        
+
         if category_filt == "In Progress":
             match_cat = 0 < bk["percentage"] < 100
         elif category_filt == "Completed":
             match_cat = bk["percentage"] == 100
-            
+
         if match_query and match_cat:
             filtered.append(bk)
 
@@ -442,7 +264,10 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
     html = """<div class="book-shelf-grid">"""
     for bk in filtered:
         html += f"""
-        <div class="shelf-card group" style="flex-direction: column; gap: 0; padding: 0; overflow: hidden;">
+        <div class="shelf-card group" style="flex-direction: column; gap: 0; padding: 0; overflow: hidden; cursor: pointer;" onclick="
+            var radios = document.querySelectorAll('.library-book-selector input[type=radio]');
+            radios.forEach(function(r) {{ if(r.value === '{bk['title']}') {{ r.click(); }} }});
+        ">
             <div style="position: relative; aspect-ratio: 3/4; overflow: hidden; height: 200px;">
                 <img src="{bk['cover_url']}" style="width: 100%; height: 100%; object-fit: cover;" referrerPolicy="no-referrer" />
                 <div style="position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,0.95); padding: 4px 10px; border-radius: 8px; font-weight: 700; font-size: 11px; border: 1px solid #ebdccb; color: #1c1c19;">
@@ -461,9 +286,8 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
                 <div class="progress-bar-bg">
                     <div class="progress-bar-fill" style="width: {bk['percentage']}%"></div>
                 </div>
-                <div style="display: flex; justify-content: space-between; font-size: 11px; color: #6f6257; align-items: center; padding-top: 4px;">
-                    <span>{math.floor(bk['duration'] / 60)} mins length</span>
-                    <span style="font-weight: 700; color: #f5841f;">Select below to Listen 🎧</span>
+                <div style="text-align: center; padding: 6px 0; font-size: 12px; font-weight: 700; color: #944a00;">
+                    ▶️ Tap to Play
                 </div>
             </div>
         </div>
@@ -471,12 +295,33 @@ def generate_library_html(books_list, query="", category_filt="All", empty_mode=
     html += "</div>"
     return html
 
+def load_paragraphs(story_path: str) -> list:
+    try:
+        with open(story_path, encoding="utf-8") as f:
+            raw = f.read()
+        paras = [p.strip() for p in raw.split("\n\n") if p.strip()]
+        return paras
+    except Exception:
+        return []
+
+def render_story_text(paragraphs: list, current_idx: int) -> str:
+    if not paragraphs:
+        return ""
+    html = """<div style="max-height: 420px; overflow-y: auto; padding: 4px 2px; margin-top: 12px;">"""
+    for i, para in enumerate(paragraphs):
+        if i == current_idx:
+            html += f"""<p style="font-family: 'Playfair Display', Georgia, serif; font-size: 13px; line-height: 1.8; color: #FAF7F2; background: rgba(245,132,31,0.18); border-left: 3px solid #f5841f; padding: 8px 12px; border-radius: 6px; margin: 6px 0;">{para}</p>"""
+        else:
+            html += f"""<p style="font-family: 'Playfair Display', Georgia, serif; font-size: 13px; line-height: 1.8; color: #94a3b8; padding: 4px 12px; margin: 4px 0;">{para}</p>"""
+    html += "</div>"
+    return html
+
 def render_cloned_voices_html(voices_list):
     html = """<div class="book-shelf-grid">"""
     for v in voices_list:
         status_color = "#16a34a" if v["status"] == "ready" else "#d97706"
         status_bg = "#f0fdf4" if v["status"] == "ready" else "#fef3c7"
-        
+
         html += f"""
         <div class="shelf-card" style="align-items: center;">
             <div style="width: 48px; height: 48px; border-radius: 50%; background: #ede8e3; border: 1px solid #ddc1b0; font-size: 24px; display: flex; align-items: center; justify-content: center; shrink-0: 0;">
@@ -489,7 +334,7 @@ def render_cloned_voices_html(voices_list):
                         {v['status']}
                     </span>
                 </div>
-                <p style="font-size: 11.5px; color: #6f6257; margin: 4px 0 0 0; line-clamp: 2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
+                <p style="font-size: 11.5px; color: #6f6257; margin: 4px 0 0 0; clamp: 2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
                     {v['description']}
                 </p>
                 <div style="border-top: 1px solid rgba(148,74,0,0.08); padding-top: 6px; margin-top: 6px; display: flex; justify-content: space-between; font-size: 10px; color: #6f6257;">
@@ -505,12 +350,12 @@ def render_cloned_voices_html(voices_list):
 
 # Gradio Application Core setup
 with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
-    
-    # Internal variables mapping user-session states
+
     books_state = gr.State(mock_books)
     voices_state = gr.State(mock_voices)
-    
-    # Simple navigation bar custom markup
+    paragraphs_state = gr.State([])
+    tts_chunks_state = gr.State([])
+
     gr.HTML("""
     <div style="display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #ebdccb; margin-bottom: 24px; flex-wrap: wrap; gap: 16px;">
         <div style="display: flex; align-items: center; gap: 12px;">
@@ -519,7 +364,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
             <div>
                 <h1 class="serif-header" style="font-size: 22px; margin: 0; line-height: 1;">VoiceBook</h1>
-                <span style="font-size: 10px; color: #f5841f; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">AI Companion Companion</span>
+                <span style="font-size: 10px; color: #f5841f; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px;">AI Bedtime Story Narrator</span>
             </div>
         </div>
         <div style="display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6f6257; font-family: monospace;">
@@ -528,36 +373,120 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         </div>
     </div>
     """)
-    
-    # Core Application Tabs Layout (Dashboard, Library, Clone, Player, Settings)
+
     with gr.Tabs() as main_tabs:
-        
+
         # TAB 1: Explore Dashboard
         with gr.TabItem("🏛️ Explore Space") as explore_tab:
             dashboard_container = gr.HTML(value=generate_dashboard_html(mock_books))
-            
-            gr.HTML("""<div style="margin-top: 24px; text-align: center;"><span style="font-size: 12px; color:#6f6257;">🎧 Head over to the <b>My Bookshelf</b> or <b>Companion Player</b> tabs to stream these books with cloned pitch audio!</span></div>""")
-            
-        # TAB 2: My Bookshelf
-        with gr.TabItem("📚 My Bookshelf") as shelf_tab:
+            gr.HTML("""<div style="margin-top: 24px; text-align: center;"><span style="font-size: 12px; color:#6f6257;">🎧 Head over to <b>My Library</b> and tap any book to start listening!</span></div>""")
+
+        # TAB 2: Library + Player (통합)
+        with gr.TabItem("📚 My Library") as library_tab:
             with gr.Row():
+                # Left: book grid
                 with gr.Column(scale=3):
-                    search_input = gr.Textbox(placeholder="Search by title, author, or voice...", label="Filter Library bookshelf contents", show_label=False)
-                with gr.Column(scale=1):
-                    category_filter = gr.Radio(["All", "In Progress", "Completed"], value="All", label="Progress Segment", show_label=False)
-                with gr.Column(scale=1):
-                    empty_state_sim = gr.Checkbox(label="Simulate Empty State", value=False)
-            
-            shelf_grid = gr.HTML(value=generate_library_html(mock_books))
-            
-            gr.HTML("""<div style="margin-top: 16px; border-bottom: 1px solid #ebdccb; padding-bottom: 12px;"><h4 class="serif-header" style="font-size: 16px;">Quick Mount Audiobook to Companion Player:</h4></div>""")
-            
-            # Interactive launcher list so they can easily key into player
-            book_titles_list = [b["title"] for b in mock_books]
-            book_mount_selector = gr.Dropdown(choices=book_titles_list, value=book_titles_list[0], label="Choose an audiobook from your current inventory shelf", show_label=True)
-            mount_play_btn = gr.Button("🎧 Mount & Launch Inside Companion Player", variant="primary")
-            
-        # TAB 3: Clone Voice Studio Custom Page
+                    with gr.Row():
+                        with gr.Column(scale=3):
+                            search_input = gr.Textbox(placeholder="Search by title, author, or voice...", label="Filter", show_label=False)
+                        with gr.Column(scale=1):
+                            category_filter = gr.Radio(["All", "In Progress", "Completed"], value="All", label="Progress", show_label=False)
+                        with gr.Column(scale=1):
+                            empty_state_sim = gr.Checkbox(label="Simulate Empty", value=False)
+
+                    shelf_grid = gr.HTML(value=generate_library_html(mock_books))
+
+                    # Hidden radio — book cards click this via JS onclick
+                    book_titles_list = [b["title"] for b in mock_books]
+                    book_selector = gr.Radio(
+                        choices=book_titles_list,
+                        value=None,
+                        label="",
+                        show_label=False,
+                        elem_classes="library-book-selector",
+                        visible=False,
+                    )
+
+                # Right: player panel
+                with gr.Column(scale=2, elem_classes="dark-card-container"):
+                    gr.HTML("""
+                        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 12px; margin-bottom: 16px;">
+                            <span style="font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #f5841f; font-weight: 700;">Now Playing</span>
+                            <span style="background: rgba(22, 163, 74, 0.2); padding: 2px 6px; border-radius: 6px; font-size: 9px; font-family: monospace; color: #4ade80;">SYNCHRONIZED PITCH</span>
+                        </div>
+                    """)
+
+                    player_title_info = gr.HTML("""
+                        <div style="text-align: center; margin-bottom: 24px; margin-top: 16px; padding: 32px 0;">
+                            <span style="font-size: 48px;">📖</span>
+                            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 18px; margin: 12px 0 4px; color:#FAF7F2;">Select a story</h3>
+                            <p style="font-size: 12px; color: #94a3b8; font-style: italic;">Tap any book on the left to begin</p>
+                        </div>
+                    """)
+
+                    player_audio_control = gr.Audio(
+                        visible=False, interactive=False,
+                        label="Audio Stream",
+                        type="numpy",
+                        streaming=True,
+                        autoplay=True,
+                    )
+
+                    player_status_bar = gr.HTML("""
+                        <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                            <span style="width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;"></span>
+                            <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">SELECT A STORY</span>
+                        </div>
+                    """)
+
+                    with gr.Row():
+                        play_btn   = gr.Button("▶️ Play",          variant="primary",   scale=1, visible=False)
+                        pause_btn  = gr.Button("⏸ Pause",          variant="secondary",  scale=1, visible=False)
+                        resume_btn = gr.Button("↩️ Resume Story",   variant="secondary",  scale=2, visible=False)
+
+                    with gr.Row():
+                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2, visible=False)
+
+                    chunk_status = gr.HTML("""
+                        <div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">
+                            Chunk 0 / 0
+                        </div>
+                    """)
+
+                    story_finished_panel = gr.HTML("""
+                        <div style="margin-top: 12px; padding: 16px; background: rgba(245,132,31,0.1); border: 1px solid rgba(245,132,31,0.3); border-radius: 14px; text-align: center;">
+                            <span style="font-size: 28px;">🎉</span>
+                            <h4 style="font-family: 'Playfair Display', Georgia, serif; color: #ffd3a6; margin: 8px 0 4px;">Story Complete!</h4>
+                            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 12px;">Tap another book to start a new story.</p>
+                        </div>
+                    """, visible=False)
+
+                    # Story text display + slider
+                    story_text_display = gr.HTML(visible=False)
+                    timeline_slider = gr.Slider(minimum=0, maximum=100, step=1, value=0, label="📍 Story position (paragraph)", visible=False)
+
+                    # Q&A Panel
+                    qa_panel = gr.HTML("""
+                        <div style="margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 16px;">
+                            <h4 style="font-family: 'Playfair Display', Georgia, serif; font-size: 14px; margin-bottom: 12px; color: #FAF7F2;">❓ Ask About the Story</h4>
+                        </div>
+                    """, visible=False)
+
+                    with gr.Group(visible=False) as qa_input_group:
+                        question_text = gr.Textbox(
+                            placeholder="Type your question about the story here...",
+                            label="Your Question", lines=2, show_label=False
+                        )
+                        question_audio = gr.Audio(
+                            sources=["microphone"], type="filepath",
+                            label="Or speak your question", show_label=True
+                        )
+                        submit_question_btn = gr.Button("🔍 Get Answer in Cloned Voice", variant="primary")
+
+                    answer_display = gr.HTML(visible=False)
+                    answer_audio = gr.Audio(label="Answer in Narrator's Voice", interactive=False, visible=False)
+
+        # TAB 3: Clone Voice Studio
         with gr.TabItem("🎙️ Clone Voice Studio") as clone_tab:
             with gr.Row():
                 with gr.Column(scale=1, elem_classes="card-container"):
@@ -565,10 +494,10 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                         <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px;">🧙 Voice Details Form</h3>
                         <p style="font-size: 12px; color: #6f6257; margin-bottom: 20px;">Provide a comforting nickname and details below to prepare vocal weights matching.</p>
                     """)
-                    
+
                     new_voice_name = gr.Textbox(placeholder="Enter a descriptive nickname (e.g., Grandma Judy, Dad)...", label="Voice Nickname")
                     new_voice_gender = gr.Radio(["Female", "Male"], value="Female", label="Voice Gender Avatar")
-                    
+
                     gr.HTML("""
                         <div style="margin: 16px 0; padding: 12px; background: white; border-radius: 12px; border: 1px solid #ebdccb; font-size: 12px;">
                             <strong style="color: #6f6257; text-transform: uppercase; font-size: 10px; display: block; margin-bottom: 4px;">Story Script to read aloud:</strong>
@@ -577,148 +506,36 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             </p>
                         </div>
                     """)
-                    
-                    # Record mic audio natively inside Spaces container
+
                     mic_recorder = gr.Audio(sources=["microphone"], type="filepath", label="Record speaking story prompt (Min 10 seconds sample)")
-                    
                     extract_btn = gr.Button("🪄 Analyze & Synthesize Customized Vocal Profile", variant="primary")
-                    
+
                 with gr.Column(scale=1, elem_classes="card-container"):
                     gr.HTML("""
                         <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Status Pipeline Visualizer</h3>
                         <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">Track extraction, de-noising, and pitch tuning.</p>
                     """)
-                    
-                    # Simulated progres bars inside Gradio
+
                     cloning_progress_msg = gr.HTML("""
                         <div style="text-align: center; padding: 32px 0;">
                             <span style="font-size: 42px;">🎙️</span>
                             <p style="margin-top: 12px; font-size: 14px; color: #6f6257;">Fill parameters on the left and read the story script aloud to begin extraction.</p>
                         </div>
                     """)
-                    
+
                     loading_spinner = gr.HTML(visible=False)
                     voice_cloning_success_panel = gr.HTML(visible=False)
-                    
-                    # Mini test player for procedural sample generator preview
                     voice_sample_preview_widget = gr.Audio(value="sample_sounds/cloned_preview.wav", visible=False, label="Pre-listening synthesized vocal pitch weights match preview", interactive=False)
-                    
                     add_to_library_btn = gr.Button("✨ Synced successfully! Bind Companion Voice to Inventory", visible=False)
-                    
-            # Bottom section detailing installed models
+
             gr.HTML("""
                 <div style="margin-top: 32px; border-top: 1px solid #ebdccb; padding-top: 24px;">
-                    <h4 class="serif-header" style="font-size: 18px; margin-bottom: 16px;">Currently Available Companion Voices</h4>
+                    <h4 class="serif-header" style="font-size: 18px; margin-bottom: 16px;">Currently Available Voices</h4>
                 </div>
             """)
             cloned_voices_list_grid = gr.HTML(value=render_cloned_voices_html(mock_voices))
 
-        # TAB 4: Active Companion Player
-        with gr.TabItem("🎧 Companion Player", id="player") as player_tab:
-            
-            with gr.Row():
-                with gr.Column(scale=2, elem_classes="dark-card-container"):
-                    gr.HTML("""
-                        <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.15); padding-bottom: 12px; margin-bottom: 16px;">
-                            <span style="font-size: 10px; text-transform: uppercase; letter-spacing: 2px; color: #f5841f; font-weight: 700;">Spatial Stream Receiver Active</span>
-                            <span style="background: rgba(22, 163, 74, 0.2); padding: 2px 6px; border-radius: 6px; font-size: 9px; font-family: monospace; color: #4ade80;">SYNCHRONIZED PITCH</span>
-                        </div>
-                    """)
-                    
-                    player_title_info = gr.HTML("""
-                        <div style="text-align: center; margin-bottom: 24px;">
-                            <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?auto=format&fit=crop&q=80&w=400" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
-                            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; margin:0; color:#FAF7F2;">The Enchanted Willow</h3>
-                            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by Elena S. Thorne</p>
-                            <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: #ffd3a6; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 8px;">Active Narrator: Mom's Voice</span>
-                        </div>
-                    """)
-                    
-                    player_audio_control = gr.Audio(visible=True, interactive=False, label="VoiceBook Audiobook Audio Stream Channel", value="sample_sounds/willow.wav", autoplay=False)
-
-                    gr.HTML("""
-                        <div style="margin-top: 16px; background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 12px; text-align: center; font-size: 11px; color:#cbd5e1;">
-                            💡 <b>Standard Player Controls:</b> Click the standard play trigger on the audio player block above to listen to custom generated pitch chimes.
-                        </div>
-                    """)
-
-                    # Ask / Resume / Finish controls
-                    player_status_bar = gr.HTML("""
-                        <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
-                            <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
-                            <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">PLAYING</span>
-                        </div>
-                    """)
-
-                    with gr.Row():
-                        ask_btn = gr.Button("❓ Ask a Question", variant="primary", scale=2)
-                        resume_btn = gr.Button("▶️ Resume Story", variant="secondary", scale=2, visible=False)
-
-                    # Story-finished prompt (hidden until playback ends)
-                    story_finished_panel = gr.HTML("""
-                        <div style="margin-top: 12px; padding: 16px; background: rgba(245,132,31,0.1); border: 1px solid rgba(245,132,31,0.3); border-radius: 14px; text-align: center;">
-                            <span style="font-size: 28px;">🎉</span>
-                            <h4 style="font-family: 'Playfair Display', Georgia, serif; color: #ffd3a6; margin: 8px 0 4px;">Story Complete!</h4>
-                            <p style="font-size: 12px; color: #94a3b8; margin-bottom: 12px;">Head to <b>My Bookshelf</b> to pick another adventure.</p>
-                        </div>
-                    """, visible=False)
-                    
-                with gr.Column(scale=3, elem_classes="card-container"):
-                    gr.HTML("""
-                        <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Dynamic Synced Script Transcriptions</h3>
-                        <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">The synced transcript lines match progress in real-time. Use the timeline slider below to tick forward.</p>
-                    """)
-                    
-                    # Dialogue sync script box
-                    synced_subtitle_ticker = gr.HTML("""
-                        <div class="dialog-synced">
-                            &ldquo;Deep within the heart of Whispering Woods stands an ancient willow tree...&rdquo;
-                        </div>
-                    """)
-                    
-                    # Simulation scrub mechanism
-                    timeline_slider = gr.Slider(minimum=0, maximum=5, step=1, value=0, label="Synced Script Excerpt Position (Story timeline coordinate index)")
-                    
-                    gr.HTML("""
-                        <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid #ebdccb;">
-                            <h4 class="serif-header" style="font-size: 14px; margin-bottom: 12px;">Active Audiobook Metadata Details</h4>
-                        </div>
-                    """)
-                    
-                    m_synopsis = gr.Textbox(interactive=False, label="Selected Story Synopsis", lines=4, value=mock_books[0]["synopsis"])
-                    m_category = gr.Label(label="Story Category Shelf Mapping", value="Fantasy")
-
-                    # --- Q&A Panel (hidden while playing, shown after Ask) ---
-                    qa_panel = gr.HTML("""
-                        <div style="margin-top: 20px; border-top: 1px solid #ebdccb; padding-top: 16px;">
-                            <h4 class="serif-header" style="font-size: 14px; margin-bottom: 12px;">❓ Ask About the Story</h4>
-                        </div>
-                    """, visible=False)
-
-                    with gr.Group(visible=False) as qa_input_group:
-                        question_text = gr.Textbox(
-                            placeholder="Type your question about the story here...",
-                            label="Your Question",
-                            lines=2,
-                            show_label=False
-                        )
-                        question_audio = gr.Audio(
-                            sources=["microphone"],
-                            type="filepath",
-                            label="Or speak your question",
-                            show_label=True
-                        )
-                        submit_question_btn = gr.Button("🔍 Get Answer in Cloned Voice", variant="primary")
-
-                    # Answer output area
-                    answer_display = gr.HTML(visible=False)
-                    answer_audio = gr.Audio(
-                        label="Answer in Narrator's Voice",
-                        interactive=False,
-                        visible=False
-                    )
-
-        # TAB 5: Profile & Connection Sandbox
+        # TAB 4: Profile & Sandbox Settings
         with gr.TabItem("⚙️ Profile & Sandbox Settings") as profile_tab:
             with gr.Row():
                 with gr.Column(scale=1, elem_classes="card-container"):
@@ -731,7 +548,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             <p style="font-size: 11.5px; color: #6f6257; margin-top: 2px;">Premium Member since Summer 2026</p>
                         </div>
                     """)
-                    
+
                     gr.HTML("""
                         <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; text-align: center;">
                             <div style="background: white; border: 1px solid #ebdccb; border-radius: 12px; padding: 10px;">
@@ -751,24 +568,20 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             </div>
                         </div>
                     """)
-                    
-                    gr.HTML("""
-                        <div style="margin-top: 24px;">
-                            <h4 class="serif-header" style="font-size: 14px; margin-bottom: 8px;">Acoustic Signal Processing Config</h4>
-                        </div>
-                    """)
+
+                    gr.HTML("""<div style="margin-top: 24px;"><h4 class="serif-header" style="font-size: 14px; margin-bottom: 8px;">Acoustic Signal Processing Config</h4></div>""")
                     gr.Checkbox(label="Enable Client Denoising Filter", value=True)
                     gr.Checkbox(label="Enable Brownian Dynamic Sleep Wave", value=False)
                     gr.Checkbox(label="Automatic Chapter Transitions", value=True)
-                    
+
                 with gr.Column(scale=1, elem_classes="card-container"):
                     gr.HTML("""
                         <h3 class="serif-header" style="font-size: 18px; margin-bottom: 4px;">Boundary Connection Error Diagnostics</h3>
                         <p style="font-size: 12px; color: #6f6257; margin-bottom: 16px;">Test robust offline error conditions gracefully.</p>
                     """)
-                    
+
                     offline_toggle = gr.Checkbox(label="Simulate Sandbox Connection Outage", value=False)
-                    
+
                     gr.HTML("""
                         <div style="margin-top: 16px; padding: 12px; background: white; border-radius: 12px; border: 1px solid #ebdccb;">
                             <span style="font-size:10px; font-weight:700; text-transform:uppercase; color:#6f6257; display:block; margin-bottom:6px;">Sandbox local metric stores:</span>
@@ -778,7 +591,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                             </div>
                         </div>
                     """)
-                    
+
                     error_sim_view = gr.HTML("""
                         <div style="margin-top: 16px; padding: 16px; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; display: none;" id="error-sim-panel">
                             <span style="font-size: 20px; display: block; margin-bottom: 4px;">⚠️ Connection Interruption Layout</span>
@@ -787,7 +600,6 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                         </div>
                     """, elem_id="error-sim-block")
 
-    # Offline outage container modal overlay representation
     system_error_modal = gr.HTML("""
     <div style="display: none; background-color: #FAF7F2; padding: 48px 16px; text-align: center; border-radius: 20px; border: 2px solid #fecaca; max-width: 460px; margin: 40px auto;" id="global-sandbox-error">
         <div style="width: 72px; height: 72px; border-radius: 16px; background: #fff5f5; border: 1px solid #fecaca; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; font-size: 36px;">
@@ -802,20 +614,67 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     </div>
     """, visible=False)
 
-    # REACTIVE LOGIC TRIGGERS & Callbacks
-    
-    # 1. Search, filter & simulate empty state on shelf
+    # REACTIVE LOGIC
+
+    # 1. Search / filter shelf
     def filter_books_shelf(query, category, empty_mode_active, current_books):
         if empty_mode_active:
-            # Render special formatted zero-state visual
             return generate_library_html(current_books, empty_mode=True)
         return generate_library_html(current_books, query=query, category_filt=category)
-        
+
     search_input.change(filter_books_shelf, inputs=[search_input, category_filter, empty_state_sim, books_state], outputs=shelf_grid)
     category_filter.change(filter_books_shelf, inputs=[search_input, category_filter, empty_state_sim, books_state], outputs=shelf_grid)
     empty_state_sim.change(filter_books_shelf, inputs=[search_input, category_filter, empty_state_sim, books_state], outputs=shelf_grid)
 
-    # 2. Extract vocal weights trigger (wizard pipeline progress bar matching)
+    # 2. Book card click → load into player
+    def handle_book_select(title_chosen, current_inventory):
+        if not title_chosen:
+            return [gr.update()] * 12
+        selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
+
+        player_html = f"""
+        <div style="text-align: center; margin-bottom: 16px; margin-top: 8px;">
+            <img src="{selected['cover_url']}" style="width: 110px; height: 155px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 12px;" />
+            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 20px; margin:0; color:#FAF7F2;">{selected['title']}</h3>
+            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by {selected['author']}</p>
+            <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: #ffd3a6; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 6px;">Active Narrator: {selected['voice_name']}</span>
+        </div>
+        """
+        paras = load_paragraphs(selected["story_path"])
+        total = max(len(paras) - 1, 0)
+        tts_chunks = split_into_chunks("\n\n".join(paras))
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">{len(tts_chunks)} chunks ready — tap Play</div>"""
+        status_html = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">READY</span>
+            </div>
+        """
+        story_html = render_story_text(paras, 0)
+        return (
+            player_html,
+            gr.Audio(visible=True),
+            status_html,
+            chunk_html,
+            gr.Button(visible=True),   # play_btn
+            gr.Button(visible=False),  # pause_btn
+            gr.Button(visible=False),  # ask_btn
+            gr.HTML(visible=False),    # story_finished_panel
+            paras,                     # paragraphs_state
+            tts_chunks,                # tts_chunks_state
+            gr.HTML(value=story_html, visible=True),   # story_text_display
+            gr.Slider(minimum=0, maximum=total, step=1, value=0, visible=True),  # timeline_slider
+        )
+
+    book_selector.change(
+        handle_book_select,
+        inputs=[book_selector, books_state],
+        outputs=[player_title_info, player_audio_control, player_status_bar, chunk_status,
+                 play_btn, pause_btn, ask_btn, story_finished_panel,
+                 paragraphs_state, tts_chunks_state, story_text_display, timeline_slider]
+    )
+
+    # 3. Extract vocal weights trigger
     def animate_cloning_pipeline(v_name, v_gender, recorder_data, progress=gr.Progress()):
         if not v_name.strip():
             return (
@@ -837,7 +696,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                 gr.Audio(visible=False),
                 gr.Button(visible=False)
             )
-            
+
         progress(0, desc="Extracting speech samples patterns...")
         time.sleep(1.0)
         progress(0.3, desc="Filtering ambient air-con noise frequencies...")
@@ -846,11 +705,10 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         time.sleep(1.5)
         progress(0.9, desc="Validating speech prosody & standard conversational matching...")
         time.sleep(1.0)
-        
+
         preview_text = f"&ldquo;Hello! I have created my brand new clone under '{v_name}'. Ready to narrate any classical story inside your library shelves.&rdquo;"
-        
         avatar = "👩" if v_gender == "Female" else "👨"
-        
+
         cloned_card_html = f"""
         <div style="background: white; border: 1px solid #ebdccb; padding: 24px; border-radius: 16px; margin: 16px 0;">
             <div style="display: flex; gap: 16px; align-items: center; margin-bottom: 12px;">
@@ -858,7 +716,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                     {avatar}
                 </div>
                 <div>
-                    <h4 class="serif-header" style="font-size: 16px; margin: 0;">{v_name} <span style="font-size: 9px; background: #f0fdf4; color: #16a34a; padding: 2px 6px; border-radius: 4px; uppercase: text-transform; font-weight:700;">Cloned successfully</span></h4>
+                    <h4 class="serif-header" style="font-size: 16px; margin: 0;">{v_name} <span style="font-size: 9px; background: #f0fdf4; color: #16a34a; padding: 2px 6px; border-radius: 4px; font-weight:700;">Cloned successfully</span></h4>
                     <p style="font-size: 11px; color:#6f6257; margin-top:2px;">Synthesized today • Calibrated for Classical Audiobooks</p>
                 </div>
             </div>
@@ -867,7 +725,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
         </div>
         """
-        
+
         return (
             gr.HTML(visible=False),
             gr.HTML(visible=False),
@@ -875,14 +733,14 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             gr.Audio(visible=True),
             gr.Button(visible=True)
         )
-        
+
     extract_btn.click(
         animate_cloning_pipeline,
         inputs=[new_voice_name, new_voice_gender, mic_recorder],
         outputs=[cloning_progress_msg, loading_spinner, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn]
     )
-    
-    # 3. Add successfully cloned voice to inventory
+
+    # 4. Add cloned voice to inventory
     def save_new_cloned_voice(v_name, v_gender, list_voices):
         avatar = "👩" if v_gender == "Female" else "👨"
         new_voice_item = {
@@ -895,96 +753,122 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             "status": "ready"
         }
         updated = [new_voice_item] + list_voices
-        
-        # We also need to map this voice option dynamically into the books dropdown so they can narrate books with it!
         return (
             updated,
             render_cloned_voices_html(updated),
-            gr.HTML(visible=True, value="""<div style="text-align: center; padding: 32px 0;"><span style="font-size:42px;">🎙️</span><p style="margin-top:12px; font-size:14px; color:#6f6257;">Vocal profile saved successfully! Synthesize another one on the left if you'd like.</p></div>"""),
+            gr.HTML(visible=True, value="""<div style="text-align: center; padding: 32px 0;"><span style="font-size:42px;">🎙️</span><p style="margin-top:12px; font-size:14px; color:#6f6257;">Vocal profile saved successfully!</p></div>"""),
             gr.HTML(visible=False),
             gr.HTML(visible=False),
             gr.Audio(visible=False),
             gr.Button(visible=False),
             gr.Textbox(value="")
         )
-        
+
     add_to_library_btn.click(
         save_new_cloned_voice,
         inputs=[new_voice_name, new_voice_gender, voices_state],
         outputs=[voices_state, cloned_voices_list_grid, cloning_progress_msg, loading_spinner, voice_cloning_success_panel, voice_sample_preview_widget, add_to_library_btn, new_voice_name]
     )
 
-    # 4. Mount audiobook metadata details into player layout
-    def handle_book_mounting(title_chosen, current_inventory):
-        # find book
-        selected = next((b for b in current_inventory if b["title"] == title_chosen), current_inventory[0])
-        
-        player_html_markup = f"""
-        <div style="text-align: center; margin-bottom: 24px;">
-            <img src="{selected['cover_url']}" style="width: 130px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.4); margin-bottom: 16px;" />
-            <h3 style="font-family: 'Playfair Display', Georgia, serif; font-size: 22px; margin:0; color:#FAF7F2;">{selected['title']}</h3>
-            <p style="font-size: 12px; color: #94a3b8; font-style: italic; margin-top:2px;">by {selected['author']}</p>
-            <span style="display: inline-block; background: rgba(245, 132, 31, 0.15); color: #ffd3a6; font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; margin-top: 8px;">Active Narrator: {selected['voice_name']}</span>
-        </div>
+    # 5. Play button — streams TTS audio chunk by chunk
+    def stream_tts(tts_chunks, paras):
+        _status_playing = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #4ade80; font-family: monospace;">PLAYING</span>
+            </div>
         """
-        
-        # update player tabs active
-        return (
-            player_html_markup,
-            selected["audio_path"],
-            selected["synopsis"],
-            selected["category"],
-            gr.Tabs(selected="player") # Select player tab
-        )
-        
-    mount_play_btn.click(
-        handle_book_mounting,
-        inputs=[book_mount_selector, books_state],
-        outputs=[player_title_info, player_audio_control, m_synopsis, m_category, main_tabs]
+        _status_done = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">DONE</span>
+            </div>
+        """
+
+        if not tts_chunks:
+            yield None, _status_done, "<div style='text-align:center;font-size:10px;color:#64748b;font-family:monospace;margin-top:8px;'>No content loaded</div>", gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False)
+            return
+
+        n = len(tts_chunks)
+        # Immediately show PLAYING state
+        yield None, _status_playing, f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>Generating chunk 1 / {n}…</div>", gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=False)
+
+        for sample_rate, wav, i, total, err in generate_audio_stream(tts_chunks):
+            if err:
+                yield None, f"<div style='color:#ef4444;font-size:11px;'>Error on chunk {i+1}: {err}</div>", "", gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False)
+                return
+            next_label = f"chunk {i+2} / {total}" if i + 1 < total else "last chunk"
+            chunk_html = f"<div style='text-align:center;font-size:10px;color:#4ade80;font-family:monospace;margin-top:8px;'>▶ Playing chunk {i+1} / {total} — generating {next_label}</div>"
+            yield (sample_rate, wav), _status_playing, chunk_html, gr.Button(visible=False), gr.Button(visible=True), gr.Button(visible=True)
+
+        done_html = f"<div style='text-align:center;font-size:10px;color:#94a3b8;font-family:monospace;margin-top:8px;'>✅ {n} chunks complete</div>"
+        yield None, _status_done, done_html, gr.Button(visible=True), gr.Button(visible=False), gr.Button(visible=False)
+
+    play_btn.click(
+        stream_tts,
+        inputs=[tts_chunks_state, paragraphs_state],
+        outputs=[player_audio_control, player_status_bar, chunk_status, play_btn, pause_btn, ask_btn]
     )
 
-    # 5. Playback timeline slider sync transcript subtitle lyrics
-    def update_synced_subtitles(percentage_index_choice):
-        idx = int(percentage_index_choice)
-        txt_excerpt = narrative_subtitles[idx % len(narrative_subtitles)]
-        html_markup = f"""
-        <div class="dialog-synced">
-            &ldquo;{txt_excerpt}&rdquo;
-        </div>
+    # 6. Pause button — PAUSED state
+    def enter_paused_state(slider_val, paras):
+        total = len(paras) if paras else 1
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #f59e0b; font-family: monospace; text-align: center;">Paragraph {int(slider_val) + 1} / {total} — paused</div>"""
+        status_html = """
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+                <span style="width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block;"></span>
+                <span style="font-size: 11px; color: #f59e0b; font-family: monospace;">PAUSED</span>
+            </div>
         """
-        return html_markup
-        
-    timeline_slider.change(
-        update_synced_subtitles,
-        inputs=[timeline_slider],
-        outputs=[synced_subtitle_ticker]
+        return (
+            status_html,
+            chunk_html,
+            gr.Button(visible=True),
+            gr.Button(visible=False),
+        )
+
+    pause_btn.click(
+        enter_paused_state,
+        inputs=[timeline_slider, paragraphs_state],
+        outputs=[player_status_bar, chunk_status, play_btn, pause_btn]
     )
 
-    # 6. Ask button — pauses story, reveals Q&A panel
+    # 7. Timeline slider → highlight current paragraph
+    def update_story_highlight(slider_val, paras):
+        idx = int(slider_val)
+        total = len(paras)
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">Paragraph {idx + 1} / {total}</div>"""
+        return render_story_text(paras, idx), chunk_html
+
+    timeline_slider.change(update_story_highlight, inputs=[timeline_slider, paragraphs_state], outputs=[story_text_display, chunk_status])
+
+    # 8. Ask button — PAUSED-ASKING state
     def enter_asking_state():
         status_html = """
-            <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
                 <span style="width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; display: inline-block; animation: pulse 1s infinite;"></span>
                 <span style="font-size: 11px; color: #f59e0b; font-family: monospace;">PAUSED — ASKING</span>
             </div>
         """
         return (
-            status_html,               # player_status_bar
-            gr.Button(visible=False),  # ask_btn hide
-            gr.Button(visible=True),   # resume_btn show
-            gr.HTML(visible=True),     # qa_panel show
-            gr.Group(visible=True),    # qa_input_group show
-            gr.HTML(visible=False),    # answer_display reset
-            gr.Audio(visible=False),   # answer_audio reset
+            status_html,
+            gr.Button(visible=False),
+            gr.Button(visible=False),
+            gr.Button(visible=False),
+            gr.Button(visible=True),
+            gr.HTML(visible=True),
+            gr.Group(visible=True),
+            gr.HTML(visible=False),
+            gr.Audio(visible=False),
         )
 
     ask_btn.click(
         enter_asking_state,
         inputs=[],
-        outputs=[player_status_bar, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio]
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio]
     )
 
-    # 7. Submit question — generate mock answer (placeholder for real Qwen call)
+    # 9. Submit question
     def handle_question_submit(question_txt, question_audio_path):
         if not question_txt.strip() and question_audio_path is None:
             answer_html = """
@@ -995,22 +879,19 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             return answer_html, gr.Audio(visible=False)
 
         q_text = question_txt.strip() if question_txt.strip() else "(spoken question)"
-
-        # Placeholder: real Qwen2.5-3B-Instruct call goes here
-        mock_answer = f"That's a great question! The story tells us something very special about that. Keep listening to discover the full answer as the adventure unfolds."
+        mock_answer = "That's a great question! The story tells us something very special about that. Keep listening to discover the full answer as the adventure unfolds."
 
         answer_html = f"""
-            <div style="margin-top: 12px; padding: 16px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 14px;">
-                <div style="font-size: 10px; font-weight: 700; text-transform: uppercase; color: #16a34a; margin-bottom: 6px;">Answer in Narrator's Voice</div>
-                <div style="font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #1c1c19; font-size: 13px; line-height: 1.6;">
+            <div style="margin-top: 12px; padding: 16px; background: rgba(240,253,244,0.1); border: 1px solid rgba(187,247,208,0.3); border-radius: 14px;">
+                <div style="font-size: 10px; font-weight: 700; text-transform: uppercase; color: #4ade80; margin-bottom: 6px;">Answer in Narrator's Voice</div>
+                <div style="font-family: 'Playfair Display', Georgia, serif; font-style: italic; color: #FAF7F2; font-size: 13px; line-height: 1.6;">
                     &ldquo;{mock_answer}&rdquo;
                 </div>
-                <div style="margin-top: 8px; font-size: 10px; color: #6f6257;">
+                <div style="margin-top: 8px; font-size: 10px; color: #94a3b8;">
                     Q: <em>{q_text}</em>
                 </div>
             </div>
         """
-        # answer_audio will be wired to real TTS output; for now surfaces the preview chime
         return answer_html, gr.Audio(value="sample_sounds/cloned_preview.wav", visible=True)
 
     submit_question_btn.click(
@@ -1019,62 +900,49 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
         outputs=[answer_display, answer_audio]
     )
 
-    # 8. Resume button — restores playing state, hides Q&A panel
+    # 10. Resume button — back to PLAYING
     def enter_resume_state():
         status_html = """
-            <div style="margin-top: 16px; display: flex; align-items: center; gap: 10px; justify-content: center;">
+            <div style="margin-top: 12px; display: flex; align-items: center; gap: 10px; justify-content: center;">
                 <span style="width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block;"></span>
-                <span style="font-size: 11px; color: #94a3b8; font-family: monospace;">PLAYING</span>
+                <span style="font-size: 11px; color: #4ade80; font-family: monospace;">PLAYING</span>
             </div>
         """
         return (
-            status_html,               # player_status_bar
-            gr.Button(visible=True),   # ask_btn show
-            gr.Button(visible=False),  # resume_btn hide
-            gr.HTML(visible=False),    # qa_panel hide
-            gr.Group(visible=False),   # qa_input_group hide
-            gr.HTML(visible=False),    # answer_display hide
-            gr.Audio(visible=False),   # answer_audio hide
-            gr.Textbox(value=""),      # question_text clear
+            status_html,
+            gr.Button(visible=False),
+            gr.Button(visible=True),
+            gr.Button(visible=True),
+            gr.Button(visible=False),
+            gr.HTML(visible=False),
+            gr.Group(visible=False),
+            gr.HTML(visible=False),
+            gr.Audio(visible=False),
+            gr.Textbox(value=""),
         )
 
     resume_btn.click(
         enter_resume_state,
         inputs=[],
-        outputs=[player_status_bar, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text]
+        outputs=[player_status_bar, play_btn, pause_btn, ask_btn, resume_btn, qa_panel, qa_input_group, answer_display, answer_audio, question_text]
     )
 
-    # 9. Story-finished trigger — slider reaches end (index 5 = last subtitle)
-    def check_story_finished(slider_val):
-        if int(slider_val) >= 5:
+    # 11. Story-finished check
+    def check_story_finished(slider_val, paras):
+        if paras and int(slider_val) >= len(paras) - 1:
             return gr.HTML(visible=True)
         return gr.HTML(visible=False)
 
-    timeline_slider.change(
-        check_story_finished,
-        inputs=[timeline_slider],
-        outputs=[story_finished_panel]
-    )
+    timeline_slider.change(check_story_finished, inputs=[timeline_slider, paragraphs_state], outputs=[story_finished_panel])
 
-    # 10. Global Sandbox connection error boundary state toggle
+    # 12. Sandbox outage toggle
     def toggle_outage_sandbox(checked):
         if checked:
-            return (
-                gr.HTML(visible=True), # Show error simulated overlay
-                gr.Tabs(visible=False) # Hide whole actual menu tab structure
-            )
+            return gr.HTML(visible=True), gr.Tabs(visible=False)
         else:
-            return (
-                gr.HTML(visible=False), # Hide
-                gr.Tabs(visible=True) # Full tabs display
-            )
-            
-    offline_toggle.change(
-        toggle_outage_sandbox,
-        inputs=[offline_toggle],
-        outputs=[system_error_modal, main_tabs]
-    )
+            return gr.HTML(visible=False), gr.Tabs(visible=True)
+
+    offline_toggle.change(toggle_outage_sandbox, inputs=[offline_toggle], outputs=[system_error_modal, main_tabs])
 
-# Launch parameters configured for standard port and auto binding
 if __name__ == "__main__":
-    demo.queue().launch()
+    demo.queue().launch(allowed_paths=[str(Path(__file__).parent / "assets")])

docs/tts-module-spec.md

@@ -0,0 +1,21 @@
+refer to test_modules/app_supertonic_tts_demo.py
+
+- use supertonic tts library
+- in this demo, input text is generated to speech data using supertonic.TTS
+- text is firstly divided into multiple chunk text by statements and stored in buffer list
+- and TTS generation is running for the list of text chunks
+- this is to generate audio quickly for long text book.
+
+TODO
+- make tts.py and make module refering to app_supertonic_tts_demo.py
+- In library menu, "Tap to play" button is clicked and the book text is chuncked and stored in buffer list.
+- user click the play button and the text chunk list is converted to audio one by one.
+
+
+package dependencies
+
+# Supertonic TTS
+supertonic>=1.3.1
+soundfile>=0.12.0
+onnxruntime>=1.18.0
+huggingface-hub>=0.23.0

requirements.txt

@@ -1,7 +1,14 @@
-gradio>=5.0
+gradio==5.35.0
 transformers
 torch
 accelerate
 bitsandbytes
 soundfile
 numpy
+
+
+# Supertonic TTS
+supertonic>=1.3.1
+soundfile>=0.12.0
+onnxruntime>=1.18.0
+huggingface-hub>=0.23.0

static/style.css

@@ -0,0 +1,179 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
+
+/* ── Base ── */
+body, .gradio-container {
+    background-color: #FAF7F2 !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+}
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+}
+
+/* ── Typography ── */
+.serif-header {
+    font-family: 'Playfair Display', Georgia, serif !important;
+    color: #1c1c19 !important;
+    font-weight: 700 !important;
+}
+.cream-bg { background-color: #FAF7F2 !important; }
+.highlight-orange { color: #f5841f !important; }
+.highlight-amber  { color: #944a00 !important; }
+
+/* ── Cards ── */
+.card-container {
+    background-color: #f6f3ee !important;
+    border: 1px solid #ebdccb !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 2px 8px rgba(148, 74, 0, 0.03) !important;
+}
+.accent-border { border-color: #ddc1b0 !important; }
+
+.dark-card-container {
+    background-color: #122116 !important;
+    color: #FAF7F2 !important;
+    border: 1px solid #1e3422 !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* ── Hero ── */
+.hero-spotlight {
+    background: linear-gradient(135deg, #1e3422 0%, #121f15 100%) !important;
+    color: #FFFFFF !important;
+    border-radius: 24px !important;
+    padding: 32px !important;
+    position: relative;
+    overflow: hidden;
+}
+.badge-featured {
+    background: rgba(245, 132, 31, 0.2);
+    color: #f5841f;
+    border: 1px solid rgba(245, 132, 31, 0.3);
+    border-radius: 9999px;
+    padding: 4px 10px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+/* ── Book grid & cards ── */
+.book-shelf-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+}
+.shelf-card {
+    background: #f6f3ee;
+    border: 1px solid #eadacc;
+    border-radius: 16px;
+    padding: 16px;
+    display: flex;
+    gap: 16px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.shelf-card:hover {
+    border-color: #f5841f;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(148, 74, 0, 0.06);
+}
+.cover-image {
+    width: 80px;
+    height: 110px;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+/* ── Progress bar ── */
+.progress-bar-bg {
+    width: 100%;
+    height: 6px;
+    background: #ebdccb;
+    border-radius: 999px;
+    overflow: hidden;
+}
+.progress-bar-fill {
+    height: 100%;
+    background: #f5841f;
+}
+
+/* ── Recording UX ── */
+@keyframes pulse-ring {
+    0%   { transform: scale(0.85); opacity: 0.6; }
+    50%  { transform: scale(1.15); opacity: 0.25; }
+    100% { transform: scale(1.4);  opacity: 0; }
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.4; }
+}
+.pulse-circle {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: #944a00;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.pulse-circle::before,
+.pulse-circle::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 3px solid #944a00;
+    animation: pulse-ring 1.8s ease-out infinite;
+}
+.pulse-circle::after { animation-delay: 0.6s; }
+.recording-active { background: #ef4444 !important; }
+.recording-active::before,
+.recording-active::after { border-color: #ef4444; }
+
+/* ── Subtitle / dialog ticker ── */
+.dialog-synced {
+    background: rgba(0,0,0,0.15);
+    border: 1px solid rgba(255,166,0,0.1);
+    color: #ffd3a6;
+    font-family: 'Playfair Display', Georgia, serif;
+    font-size: 1.25rem;
+    font-style: italic;
+    padding: 24px;
+    border-radius: 16px;
+    text-align: center;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ── Tabs ── */
+.tabs .tab-nav button {
+    border-bottom: 2px solid transparent !important;
+}
+.tabs .tab-nav button.selected {
+    color: #944a00 !important;
+    border-bottom-color: #944a00 !important;
+    font-weight: 700 !important;
+}
+
+/* ── Mobile responsive ── */
+@media (max-width: 768px) {
+    .gradio-container { max-width: 100% !important; padding: 0 12px !important; }
+    .book-shelf-grid  { grid-template-columns: 1fr !important; }
+    .hero-spotlight   { flex-direction: column !important; padding: 20px !important; }
+    .shelf-card       { flex-direction: column; }
+    .card-container, .dark-card-container { padding: 16px !important; }
+}
+@media (max-width: 480px) {
+    .book-shelf-grid { grid-template-columns: 1fr !important; gap: 12px; }
+}

test_modules/app_supertonic_tts_demo.py

@@ -0,0 +1,243 @@
+"""
+Supertonic TTS Gradio Demo — concurrent chunk streaming with playback sync
+Splits text into statements, synthesizes in a background thread, streams
+audio chunk-by-chunk.  A JS timeupdate listener tracks audio.currentTime
+to bold exactly the chunk currently playing in the browser.
+
+Usage:
+  python app.py
+"""
+import json
+import logging
+import queue
+import re
+import threading
+from pathlib import Path
+
+import gradio as gr
+import numpy as np
+
+from supertonic import TTS, AVAILABLE_LANGUAGES
+
+logger = logging.getLogger(__name__)
+
+CLONED_VOICE_JSON = Path(__file__).resolve().parent / "recorded_voice_supertonic-3.json"
+CLONED_VOICE_LABEL = "Custom (recorded_voice_supertonic-3.json)"
+
+print("Loading Supertonic TTS model...")
+tts = TTS(auto_download=True)
+
+builtin_voices = tts.voice_style_names  # M1-M5, F1-F5
+all_voices = ([CLONED_VOICE_LABEL] + builtin_voices) if CLONED_VOICE_JSON.exists() else builtin_voices
+
+_SENTENCE_SPLIT_RE = re.compile(r'(?<=[.!?;])\s+')
+_SENTINEL = object()
+
+# JavaScript injected once at page load.
+# Watches for changes to the hidden timing component, then attaches a
+# timeupdate listener that bolds whichever .chunk-text span is currently
+# playing based on audio.currentTime.
+_SYNC_JS = """
+() => {
+    function attachAudioSync(chunks) {
+        // Find the streaming audio element — Gradio wraps it inside a
+        // data-testid="audio" block; fall back to first <audio> on the page.
+        const container = document.querySelector('[data-testid="audio"]') ||
+                          document.querySelector('.audio-container');
+        const audio = container ? container.querySelector('audio')
+                                : document.querySelector('audio');
+        if (!audio) {
+            // Audio element not yet in DOM — retry shortly.
+            setTimeout(() => attachAudioSync(chunks), 150);
+            return;
+        }
+
+        // Remove any previous listener we registered.
+        if (audio._ttsSyncHandler) {
+            audio.removeEventListener('timeupdate', audio._ttsSyncHandler);
+        }
+
+        audio._ttsSyncHandler = () => {
+            const t = audio.currentTime;
+            document.querySelectorAll('.chunk-item').forEach((item, i) => {
+                const textEl = item.querySelector('.chunk-text');
+                if (!textEl || i >= chunks.length) return;
+                const active = t >= chunks[i].start && t < chunks[i].end;
+                textEl.style.fontWeight = active ? '700' : 'normal';
+            });
+        };
+
+        audio.addEventListener('timeupdate', audio._ttsSyncHandler);
+    }
+
+    // Observe the hidden timing textbox for value changes.
+    const observer = new MutationObserver(() => {
+        const box = document.querySelector('#tts-timing-box textarea');
+        if (!box || !box.value) return;
+        let chunks;
+        try { chunks = JSON.parse(box.value); } catch(e) { return; }
+        if (chunks.length) attachAudioSync(chunks);
+    });
+    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
+}
+"""
+
+
+def split_into_statements(text: str) -> list[str]:
+    parts = _SENTENCE_SPLIT_RE.split(text.strip())
+    return [p.strip() for p in parts if p.strip()]
+
+
+def _chunks_html(statements: list[str], playing_idx: int, generating_idx: int) -> str:
+    rows = []
+    for i, stmt in enumerate(statements):
+        if i < playing_idx:
+            icon, color = "✅", "#16a34a"
+        elif i == playing_idx:
+            icon, color = "▶️", "#2563eb"
+        elif i == generating_idx:
+            icon, color = "⏳", "#d97706"
+        else:
+            icon, color = "○", "#9ca3af"
+
+        rows.append(
+            f'<div class="chunk-item" style="display:flex;gap:8px;padding:3px 0;">'
+            f'<span style="color:{color};min-width:18px;font-size:13px;">{icon}</span>'
+            f'<span class="chunk-text" style="font-size:13px;color:#374151;line-height:1.4;">{stmt}</span>'
+            f'</div>'
+        )
+    return '<div style="margin-top:8px;">' + "".join(rows) + "</div>"
+
+
+def generate_audio(text: str, voice_name: str, language: str, speed: float, steps: int):
+    text = (text or "").strip()
+    if not text:
+        yield gr.update(), "Please enter some text.", "", "[]"
+        return
+
+    try:
+        style = (
+            tts.get_voice_style_from_path(CLONED_VOICE_JSON)
+            if voice_name == CLONED_VOICE_LABEL
+            else tts.get_voice_style(voice_name)
+        )
+
+        statements = split_into_statements(text) or [text]
+        n = len(statements)
+
+        chunk_q: queue.Queue = queue.Queue(maxsize=2)
+
+        def _worker():
+            for i, stmt in enumerate(statements):
+                try:
+                    wav, _ = tts.synthesize(
+                        stmt,
+                        voice_style=style,
+                        lang=language,
+                        speed=speed,
+                        total_steps=int(steps),
+                    )
+                    chunk_q.put((i, wav.squeeze()))
+                except Exception as exc:
+                    chunk_q.put((i, exc))
+                    return
+            chunk_q.put(_SENTINEL)
+
+        worker = threading.Thread(target=_worker, daemon=True)
+        worker.start()
+
+        yield gr.update(), f"Generating chunk 1/{n}…", _chunks_html(statements, -1, 0), "[]"
+
+        timing: list[dict] = []   # [{start, end}, …] — grows as chunks arrive
+        cumulative = 0.0
+
+        while True:
+            item = chunk_q.get()
+            if item is _SENTINEL:
+                break
+
+            i, payload = item
+            if isinstance(payload, Exception):
+                yield gr.update(), f"Generation failed on chunk {i + 1}: {payload}", "", json.dumps(timing)
+                return
+
+            wav = payload
+            dur = len(wav) / tts.sample_rate
+            timing.append({"start": round(cumulative, 4), "end": round(cumulative + dur, 4)})
+            cumulative += dur
+
+            next_gen = i + 1 if i + 1 < n else -1
+            status = (
+                f"Playing {i + 1}/{n}, generating {next_gen + 1}/{n}…"
+                if next_gen >= 0
+                else f"Playing {i + 1}/{n}"
+            )
+
+            yield (
+                (tts.sample_rate, wav),
+                status,
+                _chunks_html(statements, i, next_gen),
+                json.dumps(timing),   # JS picks this up via MutationObserver
+            )
+
+        worker.join()
+        total_dur = cumulative
+        yield (
+            gr.update(),
+            f"Done — {n} chunks, {total_dur:.1f}s total",
+            _chunks_html(statements, n, -1),
+            json.dumps(timing),
+        )
+
+    except Exception as e:
+        logger.exception("Audio generation failed")
+        yield gr.update(), f"Generation failed: {type(e).__name__}: {e}", "", "[]"
+
+
+with gr.Blocks(title="Supertonic TTS Demo", js=_SYNC_JS) as demo:
+    gr.Markdown(f"# Supertonic TTS Demo\n**Model:** `supertonic-3` · **Voices:** {len(all_voices)}")
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            text_input = gr.Textbox(
+                label="Text",
+                placeholder="Enter text to synthesize…",
+                lines=5,
+            )
+
+            with gr.Row():
+                lang_input = gr.Dropdown(
+                    label="Language",
+                    choices=AVAILABLE_LANGUAGES,
+                    value="en",
+                    interactive=True,
+                )
+                voice_input = gr.Dropdown(
+                    label="Voice Style",
+                    choices=all_voices,
+                    value=all_voices[0],
+                    interactive=True,
+                )
+
+            with gr.Row():
+                speed_input = gr.Slider(label="Speed", minimum=0.7, maximum=2.0, value=1.05, step=0.05)
+                steps_input = gr.Slider(label="Quality Steps", minimum=1, maximum=20, value=8, step=1)
+
+            play_btn = gr.Button("Play", variant="primary", size="lg")
+
+        with gr.Column(scale=3):
+            # streaming=True: each yielded chunk is appended to the playback buffer
+            audio_out = gr.Audio(label="Generated Speech", type="numpy", autoplay=True, streaming=True)
+            status_out = gr.Textbox(label="Status", lines=1, interactive=False)
+            chunks_out = gr.HTML()
+            # Hidden component — carries [{start, end}] timing per chunk to JS
+            timing_out = gr.Textbox(visible=False, elem_id="tts-timing-box")
+
+    play_btn.click(
+        generate_audio,
+        inputs=[text_input, voice_input, lang_input, speed_input, steps_input],
+        outputs=[audio_out, status_out, chunks_out, timing_out],
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

test_modules/supertonic_clone_demo.py

@@ -0,0 +1,34 @@
+from supertonic import TTS
+from supertonic import pipeline
+import numpy as np
+from pathlib import Path
+
+tts = TTS(auto_download=True)
+
+# Load a locally downloaded custom voice style JSON.
+json_path = Path(__file__).resolve().parent / "recorded_voice_supertonic-3.json"
+style = pipeline.load_voice_style_from_json_file(str(json_path))
+
+# text = "A gentle breeze moved through the open window while everyone listened to the story."
+# text = "Hello, Bay Area K group Vibe coding members. This is generated by Supertonic model on my local machine"
+# text = "To clarify if this model is locally inferenced, I turned off wifi and generated this audio"
+# text = "Testing my clone model voice TTS in English"
+text = """
+Long before the advent of the printing press or the digital screen, humanity’s fundamental drive to communicate birthed the earliest systems of recorded thought.
+It began with pictographs etched into the cool, unyielding stone of ancient caves, where early storytellers captured the essence of their daily lives, spiritual beliefs, and conquests.
+These simple drawings were not mere decoration;
+they were the very first seeds of human collaboration, allowing knowledge to transcend the boundaries of a single lifetime.
+As human societies grew in complexity, so did their methods of encoding information.
+The transition from crude cave art to structured written systems marked a monumental leap in cognitive evolution.
+In the fertile crescent of Mesopotamia, the need to track agricultural surplus and administrative records led to the development of cuneiform, a system of wedge-shaped marks pressed into damp clay tablets.
+This was the dawn of history—the moment when human thought could be permanently preserved, retrieved, and scrutinized by others.
+"""
+wav, duration = tts.synthesize(text, voice_style=style, lang="en")
+
+# text = "한국어 보이스 클로닝 테스트. 하나둘셋 하나둘셋. 동해물과 백두산이 마르고 닳도록"
+# wav, duration = tts.synthesize(text, voice_style=style, lang="ko")
+
+
+tts.save_audio(wav, "clone_output_04.wav")
+duration_sec = float(np.asarray(duration).reshape(-1)[0])
+print(f"Generated {duration_sec:.2f}s of audio")

tts.py

@@ -0,0 +1,62 @@
+"""
+TTS module — wraps Supertonic TTS with sentence-level chunking and
+background-threaded streaming generation.
+"""
+import logging
+import queue
+import re
+import threading
+
+logger = logging.getLogger(__name__)
+
+_SENTENCE_RE = re.compile(r'(?<=[.!?;])\s+')
+_SENTINEL = object()
+
+_tts_instance = None
+
+
+def get_tts():
+    global _tts_instance
+    if _tts_instance is None:
+        from supertonic import TTS
+        logger.info("Loading Supertonic TTS model…")
+        _tts_instance = TTS(auto_download=True)
+    return _tts_instance
+
+
+def split_into_chunks(text: str) -> list[str]:
+    """Split text into sentence-level chunks suitable for TTS streaming."""
+    parts = _SENTENCE_RE.split(text.strip())
+    return [p.strip() for p in parts if p.strip()]
+
+
+def generate_audio_stream(chunks: list[str], voice_name: str = "F1"):
+    """
+    Generator: synthesizes chunks in a background thread (maxsize=2 buffer).
+    Yields (sample_rate, wav_array, chunk_idx, total_chunks, error_msg).
+    wav_array is None on error.
+    """
+    tts = get_tts()
+    style = tts.get_voice_style(voice_name)
+    n = len(chunks)
+    chunk_q: queue.Queue = queue.Queue(maxsize=2)
+
+    def _worker():
+        for i, stmt in enumerate(chunks):
+            try:
+                wav, _ = tts.synthesize(stmt, voice_style=style)
+                chunk_q.put((i, wav.squeeze(), None))
+            except Exception as exc:
+                logger.exception("TTS synthesis failed on chunk %d", i)
+                chunk_q.put((i, None, str(exc)))
+                return
+        chunk_q.put(_SENTINEL)
+
+    threading.Thread(target=_worker, daemon=True).start()
+
+    while True:
+        item = chunk_q.get()
+        if item is _SENTINEL:
+            break
+        i, wav, err = item
+        yield tts.sample_rate, wav, i, n, err