Real, saveable episodes in the Library

Replace the placeholder Library grid with the user's actual generated
episodes. run_tts now persists each episode's wav under _episodes/ and
returns an episode record; a "Save to library" button on the result screen
stores it (in-session) and opens the Library, which renders a fixed pool of
slots with a real audio player per saved episode. Empty-state shown when none.

allowed_paths covers the episodes + samples dirs so the players can serve
the files. _episodes/ is gitignored (runtime-generated).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

.gitignore

@@ -3,6 +3,9 @@
 .venv/
 *.wav.tmp
 
+# Runtime-generated episodes (saved to the in-session library)
+_episodes/
+
 # Claude Code artifacts — never push these to the Space
 .claude/
 CLAUDE.md

app.py

@@ -12,6 +12,8 @@ from __future__ import annotations
 
 import html
 import os
+import shutil
+import uuid
 from typing import List
 
 import gradio as gr
@@ -220,6 +222,75 @@ def _episode_meta(topic: str, script: str, bed: str) -> str:
     )
 
 
+# ------------------------------------------------------------------------- library
+MAX_LIBRARY = 9
+EPISODES_DIR = os.path.join(os.path.dirname(os.path.abspath(__file__)), "_episodes")
+os.makedirs(EPISODES_DIR, exist_ok=True)
+_CARD_GRADIENTS = [
+    "linear-gradient(135deg,#4d8dff,#7c5cff)",
+    "linear-gradient(135deg,#b14dff,#ff5cce)",
+    "linear-gradient(135deg,#3ad0ff,#4d7bff)",
+    "linear-gradient(135deg,#ffb45c,#ff7a59)",
+    "linear-gradient(135deg,#c9a3ff,#a78bfa)",
+    "linear-gradient(135deg,#3ddf9f,#2bbf8f)",
+]
+
+
+def _episode_duration(script: str) -> str:
+    total = 0.0
+    for _, txt in parse_script(script or ""):
+        total += max(3.0, len(txt.split()) / 2.6)
+    return f"{int(total // 60)}:{int(total % 60):02d}"
+
+
+def _episode_card_html(ep: dict, idx: int) -> str:
+    import random
+
+    grad = _CARD_GRADIENTS[idx % len(_CARD_GRADIENTS)]
+    rnd = random.Random(hash(ep.get("title", "")) & 0xFFFF)
+    bars = "".join(f"<i style='height:{rnd.randint(20, 90)}%'></i>" for _ in range(34))
+    return (
+        f"<div class='pf-ep-art' style='background:{grad}'>"
+        f"<div class='pf-ep-wave'>{bars}</div>"
+        f"<span class='pf-ep-dur'>{html.escape(ep.get('dur', ''))}</span></div>"
+        "<div class='pf-ep-body'>"
+        f"<div class='pf-ep-title'>{html.escape(ep.get('title', 'Untitled episode'))}</div>"
+        f"<div class='pf-ep-meta'>🎙 {html.escape(ep.get('meta', ''))}</div>"
+        "</div>"
+    )
+
+
+def render_library(lib):
+    """Build updates for the fixed pool of library slots from the saved-episode list."""
+    lib = lib or []
+    out = [
+        gr.update(
+            value="<div class='pf-step-h'><span class='t'>▥ Your episodes</span>"
+            f"<span class='h'>{len(lib)}</span></div>"
+        ),
+        gr.update(visible=len(lib) == 0),
+    ]
+    for i in range(MAX_LIBRARY):
+        if i < len(lib):
+            out += [gr.update(visible=True),
+                    gr.update(value=_episode_card_html(lib[i], i)),
+                    gr.update(value=lib[i]["wav_path"])]
+        else:
+            out += [gr.update(visible=False), gr.update(), gr.update()]
+    return out
+
+
+def save_episode(ep, lib):
+    if not ep:
+        raise gr.Error("Generate an episode first, then save it.")
+    lib = list(lib or [])
+    if any(e.get("wav_path") == ep.get("wav_path") for e in lib):
+        gr.Info("This episode is already in your library.")
+        return lib
+    gr.Info("Saved to library.")
+    return ([ep] + lib)[:MAX_LIBRARY]
+
+
 # ------------------------------------------------------------------- Phase 1 handler
 def run_research(topic, style, duration, num_speakers, *voice_names, progress=gr.Progress()):
     topic = (topic or "").strip()
@@ -280,11 +351,27 @@ def run_tts(lines, speakers, topic, bed, *voice_names, progress=gr.Progress()):
 
     # Rebuild a script string from the (possibly edited) lines for the transcript.
     script = "\n".join(f"{spk}: {txt}" for spk, txt in lines)
+
+    # Persist the wav under EPISODES_DIR so it survives for library playback.
+    wav_file = os.path.join(EPISODES_DIR, f"episode_{uuid.uuid4().hex[:8]}.wav")
+    shutil.copyfile(tts_engine.write_wav(sr, audio), wav_file)
+
+    voices = " & ".join(speakers) if speakers else "Podify"
+    dur = _episode_duration(script)
+    episode = {
+        "title": (topic or "").strip() or "Untitled episode",
+        "script": script,
+        "wav_path": wav_file,
+        "bed": bed,
+        "dur": dur,
+        "meta": f"{voices} · {bed} · {dur}",
+    }
     return (
         (sr, audio),
-        tts_engine.write_wav(sr, audio),
+        wav_file,
         _episode_meta(topic, script, bed),
         script_to_transcript(script),
+        episode,
     )
 
 
@@ -550,6 +637,8 @@ def build_ui():
     with gr.Blocks(title="Podify — AI Podcast Studio", theme=theme, css=CUSTOM_CSS) as demo:
         lines_state = gr.State([])
         speakers_state = gr.State([])
+        library_state = gr.State([])
+        current_episode = gr.State(None)
 
         with gr.Row(elem_id="pf-shell"):
             # ---------------------------------------------------------- sidebar
@@ -652,6 +741,7 @@ def build_ui():
                     with gr.Column(visible=False) as step3:
                         with gr.Row(elem_classes=["pf-eyebrow-row"]):
                             gr.HTML("<span class='pf-pill'><span class='pf-dot'></span> Episode generated</span>")
+                            save_btn = gr.Button("⭳  Save to library", elem_classes=["pf-ghost"], scale=0)
                             new_ep_btn2 = gr.Button("＋  New episode", elem_classes=["pf-ghost"], scale=0)
                         with gr.Column(elem_classes=["pf-card"]):
                             result_meta = gr.HTML(_episode_meta("", "", "Ambient Drift"))
@@ -714,13 +804,38 @@ def build_ui():
                 # ===================== LIBRARY PAGE =====================
                 with gr.Column(visible=False) as page_library:
                     gr.HTML(_header("Library", "Every episode you've produced"))
-                    gr.HTML(_library_html())
+                    lib_header = gr.HTML(
+                        "<div class='pf-step-h'><span class='t'>▥ Your episodes</span>"
+                        "<span class='h'>0</span></div>"
+                    )
+                    lib_empty = gr.HTML(
+                        "<div class='pf-empty'>No episodes yet — generate one, then tap "
+                        "“Save to library” on the result screen.</div>"
+                    )
+                    lib_cards, lib_headers, lib_audios = [], [], []
+                    for _r in range(0, MAX_LIBRARY, 3):
+                        with gr.Row():
+                            for _i in range(_r, min(_r + 3, MAX_LIBRARY)):
+                                with gr.Column(elem_classes=["pf-ep-card"], visible=False,
+                                               min_width=240) as _col:
+                                    _h = gr.HTML()
+                                    _a = gr.Audio(show_label=False, interactive=False,
+                                                  container=False, elem_classes=["pf-voice-audio"])
+                                lib_cards.append(_col)
+                                lib_headers.append(_h)
+                                lib_audios.append(_a)
 
         # ------------------------------------------------------------- wiring
         nav_outputs = [page_create, page_voices, page_library, nav_create, nav_voices, nav_library]
+        lib_render_outputs = [lib_header, lib_empty]
+        for _c, _h, _a in zip(lib_cards, lib_headers, lib_audios):
+            lib_render_outputs += [_c, _h, _a]
+
         nav_create.click(goto_create, outputs=nav_outputs)
         nav_voices.click(goto_voices, outputs=nav_outputs)
-        nav_library.click(goto_library, outputs=nav_outputs)
+        nav_library.click(goto_library, outputs=nav_outputs).then(
+            render_library, inputs=[library_state], outputs=lib_render_outputs
+        )
 
         for btn in suggestion_btns:
             btn.click(lambda s=btn.value: s, outputs=[topic])
@@ -777,9 +892,16 @@ def build_ui():
         ).then(
             run_tts,
             inputs=[lines_state, speakers_state, topic, bed] + voice_pickers,
-            outputs=[audio_out, file_out, result_meta, result_transcript],
+            outputs=[audio_out, file_out, result_meta, result_transcript, current_episode],
         ).then(lambda: show_step(3), outputs=step_views)
 
+        # Save the produced episode to the library, then show it there.
+        save_btn.click(
+            save_episode, inputs=[current_episode, library_state], outputs=[library_state]
+        ).then(
+            render_library, inputs=[library_state], outputs=lib_render_outputs
+        ).then(goto_library, outputs=nav_outputs)
+
         # New episode -> back to a fresh Step 1 on the Create page
         def reset_create():
             return (*goto_create(), *show_step(1), "")
@@ -805,39 +927,5 @@ def _voice_card_chips(chips: list) -> str:
     return f"<div class='pf-chips'>{row}</div>"
 
 
-def _library_html() -> str:
-    import random
-    eps = [
-        ("Could we actually live on Mars?", "Space & Science · Today", "12:40", "linear-gradient(135deg,#4d8dff,#7c5cff)", "1.2k"),
-        ("The science of why we dream", "Psychology · Yesterday", "08:15", "linear-gradient(135deg,#b14dff,#ff5cce)", "840"),
-        ("How AI is reshaping music", "Technology · 2 days ago", "15:02", "linear-gradient(135deg,#3ad0ff,#4d7bff)", "3.4k"),
-        ("The hidden history of coffee", "Culture · 4 days ago", "06:48", "linear-gradient(135deg,#ffb45c,#ff7a59)", "560"),
-        ("Why do cities feel lonely?", "Society · Last week", "10:30", "linear-gradient(135deg,#c9a3ff,#a78bfa)", "2.1k"),
-        ("Deep ocean: the final frontier", "Nature · Last week", "18:22", "linear-gradient(135deg,#3ddf9f,#2bbf8f)", "4.9k"),
-    ]
-    cards = []
-    rnd = random.Random(7)
-    for title, meta, dur, grad, likes in eps:
-        bars = "".join(
-            f"<i style='height:{rnd.randint(20,90)}%'></i>" for _ in range(34)
-        )
-        cards.append(
-            "<div class='pf-ep-card'>"
-            f"<div class='pf-ep-art' style='background:{grad}'>"
-            f"<div class='pf-ep-wave'>{bars}</div>"
-            f"<span class='pf-ep-dur'>{dur}</span></div>"
-            "<div class='pf-ep-body'>"
-            f"<div class='pf-ep-title'>{html.escape(title)}</div>"
-            f"<div class='pf-ep-meta'>🌐 {html.escape(meta)} &nbsp;·&nbsp; ♥ {likes}</div>"
-            "</div></div>"
-        )
-    return (
-        "<div class='pf-eyebrow-row'>"
-        "<div class='pf-step-h'><span class='t'>▥ Your episodes</span>"
-        "<span class='h'>6</span></div></div>"
-        "<div class='pf-grid'>" + "".join(cards) + "</div>"
-    )
-
-
 if __name__ == "__main__":
-    build_ui().launch()
+    build_ui().launch(allowed_paths=[EPISODES_DIR, _SAMPLES_DIR])