Update app.py

app.py

@@ -183,7 +183,7 @@ def segment_frame(evt: gr.SelectData, label, video_state):
     video_state["input_labels"].append(label_value)
     height, width = video_state["origin_images"][0].shape[0:2]
     scaled_points = []
-    for pt in video_state["input_points"]:
+    for pt in video_state["input_points"]):
         sx = pt[0] / width
         sy = pt[1] / height
         scaled_points.append([sx, sy])
@@ -270,7 +270,7 @@ def segment_ref_frame(evt: gr.SelectData, label, ref_state):
     h, w = img.shape[:2]
 
     scaled_points = []
-    for pt in ref_state["input_points"]:
+    for pt in ref_state["input_points"]):
         sx = pt[0] / w
         sy = pt[1] / h
         scaled_points.append([sx, sy])
@@ -542,68 +542,6 @@ with gr.Blocks() as demo:
         }
     )
 
-    demo.css = """
-    .gradio-container {
-        max-width: 60% !important;
-        margin: 0 auto !important;
-    }
-
-    #my-btn {
-       width: 60% !important;
-       margin: 0 auto;
-    }
-    #my-video1 {
-       width: 60% !important;
-       height: 35% !important;
-       margin: 0 auto;
-    }
-    #my-video {
-       width: 60% !important;
-       height: 35% !important;
-       margin: 0 auto;
-    }
-    #my-md {
-       margin: 0 auto;
-    }
-    #my-btn2 {
-        width: 60% !important;
-        margin: 0 auto;
-    }
-    #my-btn2 button {
-        width: 120px !important;
-        max-width: 120px !important;
-        min-width: 120px !important;
-        height: 70px !important;
-        max-height: 70px !important;
-        min-height: 70px !important;
-        margin: 8px !important;
-        border-radius: 8px !important;
-        overflow: hidden !important;
-        white-space: normal !important;
-    }
-    #my-btn3 {
-        width: 60% !important;
-        margin: 0 auto;
-    }
-    #ref_title {
-        text-align: center;
-    }
-    #ref-image {
-       width: 60% !important;
-       height: 35% !important;
-       margin: 0 auto;
-    }
-    #ref-mask {
-       width: 60% !important;
-       height: 35% !important;
-       margin: 0 auto;
-    }
-    #mesh-row {
-       width: 60% !important;
-       margin: 0 auto;
-    }
-    """
-
     gr.Markdown(f"<div style='text-align:center;'>{text}</div>")
 
     with gr.Column():
@@ -630,6 +568,63 @@ with gr.Blocks() as demo:
             elem_id="my-video",
         )
 
+        demo.css = """
+        #my-btn {
+           width: 60% !important;
+           margin: 0 auto;
+        }
+        #my-video1 {
+           width: 60% !important;
+           height: 35% !important;
+           margin: 0 auto;
+        }
+        #my-video {
+           width: 60% !important;
+           height: 35% !important;
+           margin: 0 auto;
+        }
+        #my-md {
+           margin: 0 auto;
+        }
+        #my-btn2 {
+            width: 60% !important;
+            margin: 0 auto;
+        }
+        #my-btn2 button {
+            width: 120px !important;
+            max-width: 120px !important;
+            min-width: 120px !important;
+            height: 70px !important;
+            max-height: 70px !important;
+            min-height: 70px !important;
+            margin: 8px !important;
+            border-radius: 8px !important;
+            overflow: hidden !important;
+            white-space: normal !important;
+        }
+        #my-btn3 {
+            width: 60% !important;
+            margin: 0 auto;
+        }
+        #ref_title {
+            text-align: center;
+        }
+        #ref-image {
+           width: 60% !important;
+           height: 35% !important;
+           margin: 0 auto;
+        }
+        #ref-mask {
+           width: 60% !important;
+           height: 35% !important;
+           margin: 0 auto;
+        }
+        #mesh-row {
+           width: 60% !important;
+           margin: 0 auto;
+        }
+        """
+
         with gr.Row(elem_id="my-btn"):
             point_prompt = gr.Radio(
                 ["Positive", "Negative"], label="Click Type", value="Positive"