Update app.py

app.py

@@ -515,7 +515,64 @@ text = """
 
 pipe, image_predictor, video_predictor = get_pipe_image_and_video_predictor()
 
-with gr.Blocks() as 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.Blocks(css=css) as demo:
     video_state = gr.State(
         {
             "origin_images": None,
@@ -567,63 +624,6 @@ 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"