Add a demo on how to make ui letting user draw on a video preview

ui_demo.py

@@ -0,0 +1,134 @@
+import gradio as gr
+import numpy as np
+import cv2
+import tempfile
+
+def extract_first_frame(video_file):
+    # Open the video using OpenCV. The video_file is assumed to be a file-like object.
+    cap = cv2.VideoCapture(video_file.name if hasattr(video_file, "name") else video_file)
+    frame = None
+    while True:
+        ret, frame = cap.read()
+        if not ret:
+            break
+        if frame is not None and frame.size != 0:
+            break
+    cap.release()
+    if frame is None or frame.size == 0:
+        return None
+    # Convert frame from BGR to RGB format.
+    frame_rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+    return frame_rgb
+
+def process_video(editor_image, epsilon_ratio, video_file):
+    # This function is analogous to your original "process_image" but now,
+    # it uses the drawing from the editor (on the first frame) and overlays
+    # the derived polygon on every frame of the uploaded video.
+    if editor_image is None:
+        return "❌ No image provided.", None
+
+    composite = editor_image.get("composite")
+    original = editor_image.get("background")
+
+    if composite is None or original is None:
+        return "⚠️ Please load the first frame and add a drawing layer.", None
+
+    composite_np = np.array(composite)
+    original_np = np.array(original)
+
+    # Extract red channel information to detect drawn strokes
+    r_channel = composite_np[:, :, 0]
+    g_channel = composite_np[:, :, 1]
+    b_channel = composite_np[:, :, 2]
+    # Use a threshold to detect red strokes (assuming user draws with a vivid red)
+    red_mask = (r_channel > 150) & (g_channel < 100) & (b_channel < 100)
+    binary_mask = red_mask.astype(np.uint8) * 255
+
+    # Find contours from the binary mask
+    contours, _ = cv2.findContours(binary_mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    if not contours:
+        return "⚠️ No visible drawing found. Please use the brush on a new layer.", None
+    largest_contour = max(contours, key=cv2.contourArea)
+
+    # Approximate contour to polygon using provided epsilon_ratio
+    epsilon = epsilon_ratio * cv2.arcLength(largest_contour, True)
+    polygon = cv2.approxPolyDP(largest_contour, epsilon, True)
+    if polygon is None or len(polygon) < 3:
+        return "⚠️ Polygon extraction failed. Try drawing a clearer shape.", None
+
+    polygon = polygon.astype(np.int32).reshape((-1, 1, 2))
+    polygon_coords = polygon.reshape(-1, 2).tolist()
+
+    # Open the input video for overlaying the polygon on every frame.
+    cap = cv2.VideoCapture(video_file.name if hasattr(video_file, "name") else video_file)
+    fourcc = cv2.VideoWriter_fourcc(*'mp4v')
+    fps = cap.get(cv2.CAP_PROP_FPS)
+    width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
+    height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
+    # Create a temporary file for saving the output video
+    temp_output = tempfile.NamedTemporaryFile(delete=False, suffix=".mp4").name
+    out = cv2.VideoWriter(temp_output, fourcc, fps, (width, height))
+    
+    # Process each frame and draw the polygon overlay
+    while True:
+        ret, frame = cap.read()
+        if not ret:
+            break
+        overlay = frame.copy()
+        cv2.polylines(overlay, [polygon], isClosed=True, color=(0, 255, 0), thickness=10)
+        for idx, (x, y) in enumerate(polygon_coords):
+            cv2.circle(overlay, (x, y), 5, (0, 0, 255), -1)
+            cv2.putText(overlay, str(idx + 1), (x + 5, y - 5),
+                        cv2.FONT_HERSHEY_SIMPLEX, 0.6, (255, 255, 255), 2)
+        out.write(overlay)
+    cap.release()
+    out.release()
+
+    msg = f"✅ Polygon with {len(polygon_coords)} points (ε={epsilon_ratio}):\n{polygon_coords}"
+    return msg, temp_output
+
+# Build the Gradio interface using Blocks
+with gr.Blocks() as demo:
+    gr.HTML("<style>body { margin: 0; padding: 0; }</style>")
+    gr.Markdown("## 🖌️ Accurate Polygon Extraction & Video Overlay")
+    gr.Markdown(
+        """
+        **Instructions:**
+        1. Upload a video.
+        2. Click **Load First Frame to Editor** to extract a frame for annotation.
+        3. ➕ Add a drawing layer and draw with the brush (use red strokes).
+        4. Adjust polygon approximation if needed.
+        5. Click **Process Drawing and Overlay on Video** — the generated video will show the green polygon overlaid on every frame.
+        """
+    )
+
+    with gr.Tab("Load Video"):
+        video_input = gr.Video(label="Upload Video", format="mp4")
+        load_frame_btn = gr.Button("Load First Frame to Editor")
+        # The ImageEditor will be preloaded with the extracted frame.
+        frame_editor = gr.ImageEditor(label="Draw on this frame (Add a layer first!)", type="numpy", width=1920, height=1080)
+    
+    epsilon_slider = gr.Slider(
+        label="Polygon Approximation (ε)", minimum=0.001, maximum=0.05, value=0.01, step=0.001
+    )
+
+    with gr.Row():
+        output_text = gr.Textbox(label="Polygon Coordinates", lines=6)
+        video_preview = gr.Video(label="Video with Polygon Overlay", format="mp4")
+
+    # Function to load the first non-empty frame from the uploaded video.
+    def load_frame(video_file):
+        frame = extract_first_frame(video_file)
+        if frame is None:
+            return gr.update(value=None), "❌ Failed to extract frame from video."
+        # Return the frame for the editor and a confirmation message.
+        return frame, "Frame loaded successfully."
+
+    load_frame_btn.click(fn=load_frame, inputs=video_input, outputs=[frame_editor, output_text])
+    
+    # Process the drawing and overlay the polygon on the video.
+    process_btn = gr.Button("Process Drawing and Overlay on Video")
+    process_btn.click(fn=process_video, inputs=[frame_editor, epsilon_slider, video_input],
+                      outputs=[output_text, video_preview])
+
+demo.launch()