Update web-demos/hugging_face/app.py

web-demos/hugging_face/app.py

@@ -623,62 +623,59 @@ with gr.Blocks(theme=gr.themes.Monochrome(), css=css) as iface:
                                             value=10,)
   
     with gr.Column():
-        # input video
-        gr.Markdown("## Step1: Upload video")
-        with gr.Row(equal_height=True):
-            with gr.Column(scale=2):      
-                video_input = gr.Video(elem_classes="video")
-                extract_frames_button = gr.Button(value="Get video info", interactive=True, variant="primary") 
-            with gr.Column(scale=2):
-                run_status = gr.HighlightedText(value=[("",""), ("Try to upload your video and click the Get video info button to get started! (Kindly ensure that the uploaded video consists of fewer than 500 frames in total)", "Normal")],
-                                                color_map={"Normal": "green", "Error": "red", "Clear clicks": "gray", "Add mask": "green", "Remove mask": "red"})
-                video_info = gr.Textbox(label="Video Info")
-                
-        
-        # add masks
-        step2_title = gr.Markdown("---\n## Step2: Add masks", visible=False)
-        with gr.Row(equal_height=True):
-            with gr.Column(scale=2):
-                brush_settings = gr.Brush(
-                    default_size=2,
-                    colors=["#FFFFFF"],  # Белый цвет кисти
-                    default_color="#FFFFFF"
-                )
-                template_frame = gr.ImageEditor(type="numpy",label="Draw mask manually or click to add",interactive=True,visible=False,elem_id="template_frame",elem_classes="image",brush=brush_settings)
-                image_selection_slider = gr.Slider(minimum=1, maximum=100, step=1, value=1, label="Track start frame", visible=False)
-                track_pause_number_slider = gr.Slider(minimum=1, maximum=100, step=1, value=1, label="Track end frame", visible=False)
-            with gr.Column(scale=2, elem_classes="jc_center"):
-                mask_mode_selector = gr.Radio(
+    # Step 1: Upload video
+    gr.Markdown("## Step1: Upload video")
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=2):      
+            video_input = gr.Video(elem_classes="video")
+            extract_frames_button = gr.Button(value="Get video info", interactive=True, variant="primary") 
+        with gr.Column(scale=2):
+            run_status = gr.HighlightedText(value=[("",""), ("Try to upload your video and click the Get video info button to get started!", "Normal")],
+                                            color_map={"Normal": "green", "Error": "red", "Clear clicks": "gray", "Add mask": "green", "Remove mask": "red"})
+            video_info = gr.Textbox(label="Video Info")
+
+    # Step 2: Add masks
+    step2_title = gr.Markdown("---\n## Step2: Add masks", visible=False)
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=2):
+            template_frame = gr.Image(type="numpy", label="Draw mask manually or click to add", tool="sketch", brush_radius=2, interactive=True, visible=False, elem_id="template_frame", elem_classes="image")
+            image_selection_slider = gr.Slider(minimum=1, maximum=100, step=1, value=1, label="Track start frame", visible=False)
+            track_pause_number_slider = gr.Slider(minimum=1, maximum=100, step=1, value=1, label="Track end frame", visible=False)
+        with gr.Column(scale=2, elem_classes="jc_center"):
+            run_status2 = gr.HighlightedText(value=[("",""), ("Use click or draw to select mask, then track or inpaint.", "Normal")],
+                                             color_map={"Normal": "green", "Error": "red", "Clear clicks": "gray", "Add mask": "green", "Remove mask": "red"},
+                                             visible=False)
+            mask_mode_selector = gr.Radio(
                 choices=["Click", "Draw"],
                 value="Click",
                 label="Mask input mode",
                 interactive=True,
                 visible=False
-                )
-                with gr.Column():
-                    point_prompt = gr.Radio(
-                        choices=["Positive", "Negative"],
-                        value="Positive",
-                        label="Point prompt",
-                        interactive=True,
-                        visible=False,
-                        min_width=100,
-                        scale=1,)
-                    with gr.Row(elem_classes="mask_button_group"):
-                        Add_mask_button = gr.Button(value="Add mask", interactive=True, visible=False, elem_classes="add_button")
-                        remove_mask_button = gr.Button(value="Remove mask", interactive=True, visible=False, elem_classes="remove_button")
-                        clear_button_click = gr.Button(value="Clear clicks", interactive=True, visible=False, elem_classes="clear_button")
-                mask_dropdown = gr.Dropdown(multiselect=True, value=[], label="Mask selection", info=".", visible=False)
-            
-        # output video
-        step3_title = gr.Markdown("---\n## Step3: Track masks and get the inpainting result", visible=False)
-        with gr.Row(equal_height=True):
-            with gr.Column(scale=2):
-                tracking_video_output = gr.Video(visible=False, elem_classes="video")
-                tracking_video_predict_button = gr.Button(value="1. Tracking", visible=False, elem_classes="margin_center")
-            with gr.Column(scale=2):
-                inpaiting_video_output = gr.Video(visible=False, elem_classes="video")
-                inpaint_video_predict_button = gr.Button(value="2. Inpainting", visible=False, elem_classes="margin_center")
+            )
+            point_prompt = gr.Radio(
+                choices=["Positive", "Negative"],
+                value="Positive",
+                label="Point prompt",
+                interactive=True,
+                visible=False,
+                min_width=100,
+                scale=1
+            )
+            with gr.Row(elem_classes="mask_button_group"):
+                Add_mask_button = gr.Button(value="Add mask", interactive=True, visible=False, elem_classes="add_button")
+                remove_mask_button = gr.Button(value="Remove mask", interactive=True, visible=False, elem_classes="remove_button")
+                clear_button_click = gr.Button(value="Clear clicks", interactive=True, visible=False, elem_classes="clear_button")
+            mask_dropdown = gr.Dropdown(multiselect=True, value=[], label="Mask selection", info=".", visible=False)
+
+    # Step 3: Tracking & Inpainting
+    step3_title = gr.Markdown("---\n## Step3: Track masks and get the inpainting result", visible=False)
+    with gr.Row(equal_height=True):
+        with gr.Column(scale=2):
+            tracking_video_output = gr.Video(visible=False, elem_classes="video")
+            tracking_video_predict_button = gr.Button(value="1. Tracking", visible=False, elem_classes="margin_center")
+        with gr.Column(scale=2):
+            inpaiting_video_output = gr.Video(visible=False, elem_classes="video")
+            inpaint_video_predict_button = gr.Button(value="2. Inpainting", visible=False, elem_classes="margin_center")
 
     # first step: get the video information 
     extract_frames_button.click(