Update app.py

app.py

@@ -2,7 +2,7 @@ import json, textwrap, time
 from datetime import datetime
 import gradio as gr
 
-# ------------- SAMPLE WEEK (edit live on-air) ----------------
+# ----------------- SAMPLE WEEK (edit live on-air) -----------------
 STORIES = [
     {
         "title": "Microsoft 365 Premium launches ($19.99/mo) with integrated Copilot",
@@ -79,11 +79,10 @@ STORIES = [
     }
 ]
 
-# Derive categories
 def all_categories():
     return sorted(list({s["category"] for s in STORIES}))
 
-# Utilities
+# ----------------- Utility fns -----------------
 def fmt_story(story: dict) -> str:
     if not story: return "No story selected."
     date = datetime.fromisoformat(story["date"]).strftime("%b %d, %Y")
@@ -111,8 +110,8 @@ def teleprompter_text(story: dict) -> str:
 Why it matters: {story['why_it_matters']}"""
     return textwrap.fill(text, width=90)
 
-def list_rows(stories):
-    return [[s["date"], s["category"], s["title"]] for s in stories]
+def list_rows(items):
+    return [[s["date"], s["category"], s["title"]] for s in items]
 
 def filter_and_search(category, query):
     items = STORIES
@@ -123,22 +122,7 @@ def filter_and_search(category, query):
         items = [s for s in items if q in s["title"].lower() or q in s["summary"].lower()]
     return items
 
-def pick(idx, items):
-    if not items:
-        return "No stories here.", "", "", ""
-    i = max(0, min(int(idx), len(items)-1))
-    story = items[i]
-    # Ticker content (first 12 headlines)
-    headlines = " • ".join([s["title"] for s in items[:12]])
-    return (
-        fmt_story(story),
-        teleprompter_text(story),
-        build_ticker_html(headlines),
-        build_prompter_html(teleprompter_text(story), speed=40, is_playing=True)
-    )
-
 def build_ticker_html(text):
-    # Controlled by script.js via dataset attributes
     return f"""
 <link rel="stylesheet" href="style.css">
 <div class="zen-ticker shell">
@@ -148,9 +132,7 @@ def build_ticker_html(text):
 """
 
 def build_prompter_html(text, speed=40, is_playing=True):
-    # speed in px/sec; play state toggled via JS buttons
     playing = "true" if is_playing else "false"
-    # Escape < & > minimally for HTML block
     safe = text.replace("&","&amp;").replace("<","&lt;").replace(">","&gt;")
     return f"""
 <link rel="stylesheet" href="style.css">
@@ -173,6 +155,19 @@ def build_prompter_html(text, speed=40, is_playing=True):
 <script src="script.js"></script>
 """
 
+def pick(idx, items):
+    if not items:
+        return ("No stories here.", build_prompter_html(""), build_ticker_html(""), 0)
+    i = max(0, min(int(idx), len(items)-1))
+    story = items[i]
+    headlines = " • ".join([s["title"] for s in items[:12]])
+    return (
+        fmt_story(story),
+        build_prompter_html(teleprompter_text(story)),
+        build_ticker_html(headlines),
+        i
+    )
+
 def add_story(json_blob):
     try:
         obj = json.loads(json_blob)
@@ -200,20 +195,22 @@ def countdown(minutes):
         yield f"{mm:02d}:{ss:02d}"
         time.sleep(1)
 
-# -------------------------- UI -------------------------------
-with gr.Blocks(css="style.css", fill_height=True, title="ZEN Weekly Live Radar PRO") as demo:
+# --------------------------- UI ----------------------------
+with gr.Blocks(css="style.css", title="ZEN Weekly Live Radar PRO") as demo:
     gr.HTML("""<link rel="stylesheet" href="style.css"><script src="script.js"></script>""")
 
     with gr.Row(elem_classes="row-top"):
         gr.Markdown("### 🛰️ ZEN Weekly Live Radar PRO — Paste stories, run teleprompter, scroll ticker")
 
     with gr.Row():
-        with gr.Column(scale=1, elem_classes="card">
+        with gr.Column(scale=1, elem_classes="card"):
             category = gr.Dropdown(choices=["All"] + all_categories(), value="All", label="Category")
             query = gr.Textbox(label="Search", placeholder="Filter titles & summaries…")
             list_state = gr.State([])
+
             table = gr.Dataframe(headers=["Date","Category","Title"], interactive=False, wrap=True)
-            idx = gr.Slider(label="Select", minimum=0, maximum=max(0, len(STORIES)-1), step=1, value=0)
+
+            slider = gr.Slider(label="Select", minimum=0, maximum=max(0, len(STORIES)-1), step=1, value=0)
             refresh = gr.Button("Refresh")
 
             gr.Markdown("#### Add a story (JSON)")
@@ -241,28 +238,51 @@ with gr.Blocks(css="style.css", fill_height=True, title="ZEN Weekly Live Radar P
             prompter_html = gr.HTML(build_prompter_html(teleprompter_text(STORIES[0])))
             ticker_html = gr.HTML(build_ticker_html(" • ".join([s["title"] for s in STORIES[:12]])))
 
-    # ----- Callbacks -----
+    # --------------- Callbacks ----------------
     def refresh_list(cat, q):
         items = filter_and_search(cat, q)
         rows = list_rows(items)
         mx = max(0, len(items)-1)
-        initial = 0 if items else 0
-        sel_story, tele, tick, prom = pick(initial, items)
-        return items, rows, 0, mx, sel_story, prom, tick
+        sel_md, prom_html, tick_html, idx_val = pick(0, items)
+        return (
+            items,                         # list_state
+            rows,                          # table
+            gr.Slider.update(maximum=mx, value=0),
+            sel_md,                        # story_md
+            prom_html,                     # prompter_html
+            tick_html                      # ticker_html
+        )
 
     def on_select(i, cat, q, items):
-        items = filter_and_search(cat, q) if not items else items
-        sel_story, tele, tick, prom = pick(i, items)
-        return sel_story, prom, tick
+        # items may be stale; recompute from cat/q for safety
+        items = filter_and_search(cat, q)
+        sel_md, prom_html, tick_html, _ = pick(i, items)
+        return sel_md, prom_html, tick_html
 
-    refresh.click(refresh_list, [category, query], [list_state, table, idx, idx.maximum, story_md, prompter_html, ticker_html])
-    category.change(refresh_list, [category, query], [list_state, table, idx, idx.maximum, story_md, prompter_html, ticker_html])
-    query.submit(refresh_list, [category, query], [list_state, table, idx, idx.maximum, story_md, prompter_html, ticker_html])
+    refresh.click(
+        refresh_list,
+        inputs=[category, query],
+        outputs=[list_state, table, slider, story_md, prompter_html, ticker_html]
+    )
+    category.change(
+        refresh_list,
+        inputs=[category, query],
+        outputs=[list_state, table, slider, story_md, prompter_html, ticker_html]
+    )
+    query.submit(
+        refresh_list,
+        inputs=[category, query],
+        outputs=[list_state, table, slider, story_md, prompter_html, ticker_html]
+    )
 
-    idx.release(on_select, [idx, category, query, list_state], [story_md, prompter_html, ticker_html])
+    slider.release(
+        on_select,
+        inputs=[slider, category, query, list_state],
+        outputs=[story_md, prompter_html, ticker_html]
+    )
 
     add_btn.click(add_story, [blob], [add_status, category]).then(
-        refresh_list, [category, query], [list_state, table, idx, idx.maximum, story_md, prompter_html, ticker_html]
+        refresh_list, [category, query], [list_state, table, slider, story_md, prompter_html, ticker_html]
     )
 
     start.click(countdown, [mins], [time_left])