feat: full story text display with paragraph highlight on slider

- Load story txt paragraphs on book select (split by blank line)
- Render all paragraphs in scrollable panel; current paragraph highlighted in orange
- Slider max = paragraph count, updates highlight on drag
- Play/Pause show paragraph N / total instead of chunk count
- Story-finished triggers when slider reaches last paragraph

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

app.py

@@ -293,6 +293,27 @@ 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:
@@ -330,6 +351,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
 
     books_state = gr.State(mock_books)
     voices_state = gr.State(mock_voices)
+    paragraphs_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;">
@@ -433,15 +455,9 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
                         </div>
                     """, visible=False)
 
-                    # Synced subtitle
-                    synced_subtitle_ticker = gr.HTML("""
-                        <div class="dialog-synced" style="margin-top: 16px; display: none;">
-                            &ldquo;&rdquo;
-                        </div>
-                    """)
-                    timeline_slider = gr.Slider(minimum=0, maximum=5, step=1, value=0, label="Story position", visible=False)
-
-                    m_synopsis = gr.Textbox(interactive=False, label="Synopsis", lines=3, value="", visible=False)
+                    # Story text display + slider
+                    story_text_display = gr.HTML(visible=False)
+                    timeline_slider = gr.Slider(minimum=0, maximum=0, step=1, value=0, label="📍 Story position (paragraph)", visible=False)
 
                     # Q&A Panel
                     qa_panel = gr.HTML("""
@@ -607,19 +623,20 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     # 2. Book card click → load into player
     def handle_book_select(title_chosen, current_inventory):
         if not title_chosen:
-            return [gr.update()] * 9
+            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: 24px; margin-top: 16px;">
-            <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>
+        <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: 8px;">Active Narrator: {selected['voice_name']}</span>
+            <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>
         """
-        total_chunks = len(narrative_subtitles)
-        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">Chunk 0 / {total_chunks} — ready to play</div>"""
+        paras = load_paragraphs(selected["story_path"])
+        total = max(len(paras) - 1, 0)
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #64748b; font-family: monospace; text-align: center;">Paragraph 1 / {len(paras)} — ready to 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>
@@ -627,6 +644,7 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             </div>
         """
         audio = selected["audio_path"] or "sample_sounds/willow.wav"
+        story_html = render_story_text(paras, 0)
         return (
             player_html,
             gr.Audio(value=audio, visible=True),
@@ -636,14 +654,17 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
             gr.Button(visible=False),  # pause_btn
             gr.Button(visible=False),  # ask_btn
             gr.HTML(visible=False),    # story_finished_panel
-            gr.Textbox(value=selected["synopsis"], visible=True),
+            paras,                     # paragraphs_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, m_synopsis]
+                 play_btn, pause_btn, ask_btn, story_finished_panel,
+                 paragraphs_state, story_text_display, timeline_slider]
     )
 
     # 3. Extract vocal weights trigger
@@ -743,9 +764,9 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     )
 
     # 5. Play button — PLAYING state
-    def enter_playing_state(slider_val):
-        total_chunks = len(narrative_subtitles)
-        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #4ade80; font-family: monospace; text-align: center;">Chunk {int(slider_val) + 1} / {total_chunks} — streaming</div>"""
+    def enter_playing_state(slider_val, paras):
+        total = len(paras) if paras else 1
+        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #4ade80; font-family: monospace; text-align: center;">Paragraph {int(slider_val) + 1} / {total} — streaming</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: #4ade80; display: inline-block;"></span>
@@ -762,14 +783,14 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
 
     play_btn.click(
         enter_playing_state,
-        inputs=[timeline_slider],
+        inputs=[timeline_slider, paragraphs_state],
         outputs=[player_status_bar, chunk_status, play_btn, pause_btn, ask_btn]
     )
 
     # 6. Pause button — PAUSED state
-    def enter_paused_state(slider_val):
-        total_chunks = len(narrative_subtitles)
-        chunk_html = f"""<div style="margin-top: 8px; font-size: 10px; color: #f59e0b; font-family: monospace; text-align: center;">Chunk {int(slider_val) + 1} / {total_chunks} — paused</div>"""
+    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>
@@ -785,17 +806,18 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
 
     pause_btn.click(
         enter_paused_state,
-        inputs=[timeline_slider],
+        inputs=[timeline_slider, paragraphs_state],
         outputs=[player_status_bar, chunk_status, play_btn, pause_btn]
     )
 
-    # 7. Timeline slider → subtitle sync
-    def update_synced_subtitles(percentage_index_choice):
-        idx = int(percentage_index_choice)
-        txt_excerpt = narrative_subtitles[idx % len(narrative_subtitles)]
-        return f"""<div class="dialog-synced" style="margin-top: 16px;">&ldquo;{txt_excerpt}&rdquo;</div>"""
+    # 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_synced_subtitles, inputs=[timeline_slider], outputs=[synced_subtitle_ticker])
+    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():
@@ -883,12 +905,12 @@ with gr.Blocks(css=css_code, title="VoiceBook Gradio Hub") as demo:
     )
 
     # 11. Story-finished check
-    def check_story_finished(slider_val):
-        if int(slider_val) >= 5:
+    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])
 
     # 12. Sandbox outage toggle
     def toggle_outage_sandbox(checked):