Update app.py

app.py

@@ -514,9 +514,71 @@ text = """
 </div>
 """
 
+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;
+}
+"""
+
 pipe, image_predictor, video_predictor = get_pipe_image_and_video_predictor()
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=css) as demo:
     video_state = gr.State(
         {
             "origin_images": None,
@@ -568,63 +630,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"
@@ -778,3 +783,4 @@ with gr.Blocks() as demo:
 
 demo.launch()
 
+