Update app.py

app.py

@@ -11,7 +11,6 @@ INFERENCE_URL = "https://moonmath-ai-dev--moonmath-i2v-backend-moonmathinference
 
 # -------- settings --------
 MAX_SLOTS = 12          # max image slots user can reveal
-MAX_TIMELINE = 20       # max clips in the timeline
 
 # -------- small helpers --------
 def _save_video_bytes(data: bytes, tag: str) -> str:
@@ -32,6 +31,9 @@ def _download_to_bytes(url: str) -> bytes:
     return r.content
 
 def stitch_call(start_img: Image.Image, end_img: Image.Image, prompt: str, seed: Optional[int]) -> Optional[str]:
+    """
+    Calls your Modal backend with two images + prompt + seed and returns a local /tmp video path.
+    """
     if start_img is None or end_img is None:
         return None
 
@@ -56,11 +58,11 @@ def stitch_call(start_img: Image.Image, end_img: Image.Image, prompt: str, seed:
 
         # JSON with url or base64
         data = resp.json()
-        video_url = data.get("video_url") or data.get("url") or data.get("result")
-        if isinstance(video_url, str) and video_url.startswith("http"):
+        video_url = data.get("video_url") or data.get("url") or data.get("result") or data.get("output")
+        if isinstance(video_url, str) and video_url.startswith(("http://", "https://")):
             return _save_video_bytes(_download_to_bytes(video_url), "stitch")
 
-        video_b64 = data.get("video_b64")
+        video_b64 = data.get("video_b64") or data.get("videoBase64")
         if isinstance(video_b64, str):
             pad = (-len(video_b64)) % 4
             if pad:
@@ -93,21 +95,44 @@ def concat_many(videos: List[str]) -> Optional[str]:
         print("concat_many error:", e)
         return None
 
+# -------- Timeline HTML renderer --------
+def render_timeline_html(paths: List[str]):
+    vids = [p for p in (paths or []) if p]
+    if not vids:
+        return "<div class='tl-grid tl-empty'>No clips yet. Generate and click ‘Add to timeline’.</div>"
+    items = []
+    for i, p in enumerate(vids, 1):
+        items.append(
+            f"""
+            <div class="tl-item">
+              <video src="{p}" controls playsinline></video>
+              <div class="tl-label">Clip {i}</div>
+            </div>
+            """
+        )
+    return f"<div class='tl-grid'>{''.join(items)}</div>"
+
 # =========================
 # Gradio callbacks / state ops
 # =========================
 def add_image_slot(visible_slots: int):
     """Reveal one more upload slot (up to MAX_SLOTS)."""
-    new_count = min(MAX_SLOTS, visible_slots + 1)
-    return new_count
+    return min(MAX_SLOTS, int(visible_slots) + 1)
+
+def _reveal_slots(n, *imgs):
+    """Update visibility of image upload components based on visible_slots state."""
+    n = int(n)
+    updates = []
+    for i in range(MAX_SLOTS):
+        updates.append(gr.update(visible=(i < n)))
+    return updates
 
 def collect_choices(*imgs):
-    """Build dropdown choices of available indices (1-based labels)."""
+    """Build dropdown choices of available indices (1-based labels) based on non-empty slots."""
     choices = []
     for i, img in enumerate(imgs, start=1):
         if img is not None:
             choices.append(str(i))
-    # Return same list for both start/end dropdowns
     return gr.update(choices=choices), gr.update(choices=choices)
 
 def stitch_selected(prompt, seed, start_idx_str, end_idx_str, *imgs):
@@ -125,6 +150,7 @@ def stitch_selected(prompt, seed, start_idx_str, end_idx_str, *imgs):
     if s < 0 or e < 0 or s >= len(imgs) or e >= len(imgs):
         gr.Warning("Start/End out of range.")
         return None
+
     start_img = imgs[s]
     end_img = imgs[e]
     if start_img is None or end_img is None:
@@ -138,24 +164,13 @@ def stitch_selected(prompt, seed, start_idx_str, end_idx_str, *imgs):
     return vid  # path for preview
 
 def add_to_timeline(preview_path, timeline_paths: List[str]):
-    """Append preview_path to timeline state; return updated per-slot outputs."""
+    """Append preview to timeline; return updated state and HTML."""
+    tl = list(timeline_paths or [])
     if not preview_path:
         gr.Warning("Generate a clip first.")
-        return timeline_paths, *([gr.update(value=None)] * MAX_TIMELINE)
-
-    # append if room
-    tl = list(timeline_paths or [])
-    if len(tl) >= MAX_TIMELINE:
-        gr.Warning("Timeline full.")
-        return tl, *([gr.update(value=None)] * MAX_TIMELINE)
-
+        return tl, gr.update(value=render_timeline_html(tl))
     tl.append(preview_path)
-
-    # map into video components
-    outputs = []
-    for i in range(MAX_TIMELINE):
-        outputs.append(gr.update(value=tl[i] if i < len(tl) else None))
-    return tl, *outputs
+    return tl, gr.update(value=render_timeline_html(tl))
 
 def stitch_all_from_timeline(timeline_paths: List[str]):
     vids = list(timeline_paths or [])
@@ -176,17 +191,35 @@ CSS = """
 .rounded textarea { border-radius: 16px !important; }
 .gallery-row { display:flex; gap:16px; overflow-x:auto; padding:8px 4px; }
 .gallery-row .gradio-image { min-width: 220px; }
-.timeline-row { display:flex; gap:16px; overflow-x:auto; padding:8px 4px; }
+.tl-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+.tl-grid video {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  border-radius: 12px;
+  display: block;
+}
+.tl-label {
+  font-size: 12px;
+  color: #9aa0a6;
+  margin-top: 4px;
+  text-align: center;
+}
+.tl-empty { color: #9aa0a6; padding: 8px 4px; }
 """
 
 with gr.Blocks(css=CSS, title="StitchMaster") as demo:
-    gr.Markdown("## StitchMaster — Upload images, stitch between frames, build a timeline, and export a single video.")
+    gr.Markdown("## StitchMaster")
 
     # --- State ---
-    visible_slots = gr.State(value=3)      # how many image slots are visible
+    visible_slots = gr.State(value=3)      # number of visible image slots
     timeline_state = gr.State(value=[])    # list[str] of video file paths (timeline)
 
-    # --- Image gallery (growing) ---
+    # --- Image gallery (horizontal, grows on demand) ---
     with gr.Row(elem_classes=["gallery-row"]):
         img_comps = []
         for i in range(MAX_SLOTS):
@@ -202,20 +235,13 @@ with gr.Blocks(css=CSS, title="StitchMaster") as demo:
     )
 
     # reflect visibility changes whenever visible_slots changes
-    # (we re-render all image components with correct visibility)
-    def _reveal_slots(n, *imgs):
-        updates = []
-        for i in range(MAX_SLOTS):
-            updates.append(gr.update(visible=(i < int(n))))
-        return updates
-
     visible_slots.change(
         fn=_reveal_slots,
         inputs=[visible_slots] + img_comps,
         outputs=img_comps
     )
 
-    # --- Stitch controls ---
+    # Seed + Start/End selection + Prompt + Stitch + Preview
     seed = gr.Number(value=0, precision=0, label="Seed (0 = random)")
 
     with gr.Row():
@@ -226,12 +252,12 @@ with gr.Blocks(css=CSS, title="StitchMaster") as demo:
                 placeholder="Describe the transition between the selected start and end frames…",
                 lines=3, label="Prompt", elem_classes=["rounded"]
             )
-            run_btn = gr.Button("Stitch", elem_classes=["pill"])
+            run_btn = gr.Button("Generate", elem_classes=["pill"])
             add_tl_btn = gr.Button("Add to timeline", elem_classes=["pill"])
         with gr.Column(scale=1, min_width=420):
             preview = gr.Video(label="Video output", interactive=False)
 
-    # keep start/end dropdowns up to date based on which slots actually have images
+    # keep start/end dropdowns up to date based on which slots have images
     for comp in img_comps:
         comp.change(
             fn=collect_choices,
@@ -246,15 +272,14 @@ with gr.Blocks(css=CSS, title="StitchMaster") as demo:
         outputs=[preview]
     )
 
-    # add to timeline action → update state and visible clips
-    # Prepare timeline video components (scroll row)
-    with gr.Row(elem_classes=["timeline-row"]):
-        timeline_videos = [gr.Video(label=f"Clip {i+1}", interactive=False) for i in range(MAX_TIMELINE)]
+    # --- Dynamic timeline (no placeholders) ---
+    with gr.Row():
+        timeline_html = gr.HTML(value=render_timeline_html([]))
 
     add_tl_btn.click(
         fn=add_to_timeline,
         inputs=[preview, timeline_state],
-        outputs=[timeline_state] + timeline_videos
+        outputs=[timeline_state, timeline_html]
     )
 
     # final stitch all (concatenate in order)