increase image editor zone

app.py

@@ -7,6 +7,18 @@ import gradio as gr
 from ultralytics import YOLO  # Now used for Yolov8spose with integrated tracker & pose estimation
 import torch
 
+css = """
+/* This targets the container of the ImageEditor by its element ID */
+#my_image_editor {
+    height: 1000px !important;  /* Change 600px to your desired height */
+}
+
+/* You might also need to target inner elements if the component uses nested divs */
+#my_image_editor .image-editor-canvas {
+    height: 1000px !important;
+}
+"""
+
 # Get the directory where the current script is located.
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 EXAMPLE_VIDEO = os.path.join(BASE_DIR, "examples", "faint.mp4")
@@ -270,7 +282,7 @@ def process_video_with_zone(video_file, threshold_secs, velocity_threshold, edit
 
 # ----------------------------
 # Gradio Interface Construction
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     gr.HTML("<style>body { margin: 0; padding: 0; }</style>")
     gr.Markdown("## 🚨 Faint Detection in a User-Defined Alert Zone")
     gr.Markdown(
@@ -298,7 +310,12 @@ with gr.Blocks() as demo:
             )
 
         load_frame_btn = gr.Button("Load First Frame to Editor")
-        frame_editor = gr.ImageEditor(label="Draw Alert Zone on this frame (use red brush)", type="numpy",)
+        # Assign an elem_id for targeting via CSS.
+        frame_editor = gr.ImageEditor(
+            label="Draw Alert Zone on this frame (use red brush)",
+            type="numpy",
+            elem_id="my_image_editor"
+        )
         preview_button = gr.Button("Preview Alert Zone")    
         polygon_info = gr.Textbox(label="Alert Zone Polygon Info", lines=3)
         preview_image = gr.Image(label="Alert Zone Preview (Polygon Overlay)", type="numpy")