Update app.py

app.py

@@ -514,71 +514,9 @@ 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(css=css) as demo:
+with gr.Blocks() as demo:
     video_state = gr.State(
         {
             "origin_images": None,
@@ -604,6 +542,68 @@ with gr.Blocks(css=css) 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():
@@ -782,5 +782,3 @@ with gr.Blocks(css=css) as demo:
         )
 
 demo.launch()
-
-