Update app.py

app.py

@@ -2,7 +2,7 @@
 import json
 import math
 import gradio as gr
-from PIL import Image
+from PIL import Image, ImageDraw
 import os
 from utils.keyframe_utils import generate_keyframe_prompt
 
@@ -23,12 +23,36 @@ def get_keyframe_images(segment_id):
             images.append(Image.new("RGB", (256, 144), color=(200, 200, 200)))
     return images
 
-# UI component for a single segment row
+
 def segment_display(segment):
-    description = segment["description"]
-    seg_id = segment["segment_id"]
-    row = [f"Segment {seg_id}", description]
-    row.extend(get_keyframe_images(seg_id))
+    """
+    Format one row for Gradio display:
+    - Truncate and wrap description
+    - Load and resize keyframe images to thumbnail size
+    """
+    seg_id = segment.get("segment_id")
+    description = segment.get("description", "")
+    short_desc = description if len(description) <= 120 else description[:117] + "..."
+
+    # Wrap long text with newlines every ~40 chars
+    def wrap_text(text, width=40):
+        return "\n".join([text[i:i+width] for i in range(0, len(text), width)])
+
+    display_desc = wrap_text(short_desc)
+
+    row = [f"Segment {seg_id}", display_desc]
+
+    for i in range(1, 4):
+        img_path = f"keyframes/segment_{seg_id}_v{i}.png"
+        if os.path.exists(img_path):
+            img = Image.open(img_path).resize((128, 72))
+        else:
+            # Placeholder if not found
+            img = Image.new("RGB", (128, 72), color=(200, 200, 200))
+            draw = ImageDraw.Draw(img)
+            draw.text((10, 30), "No Image", fill=(0, 0, 0))
+        row.append(img)
+
     return row
 
 # Pagination logic