Update app.py

app.py

@@ -138,8 +138,10 @@ def create_demo():
                 min-height:100vh;
                 margin:0 !important;
                 padding:0 !important;
+                width:100% !important;
+                max-width:100vw !important;
                 overflow-x:hidden !important;
-                display:flex;
+                display:flex !important;
                 justify-content:center;
                 align-items:center;
                 flex-direction:column;
@@ -150,95 +152,84 @@ def create_demo():
                 height:600px;
                 background:#000000 !important;
             }
-            .demo-wrapper{
-                width:100%;
-                max-width:100vw;
-                padding:0 1rem;
-                box-sizing:border-box;
-                margin:0 auto;
-                display:flex;
-                flex-direction:column;
-                align-items:center;
-            }
-            .gr-blocks,
-            .gradio-container,
-            .container{
+            .gr-blocks,.container{
                 width:100% !important;
-                max-width:100% !important;
+                max-width:100vw !important;
                 margin:0 !important;
                 padding:0 !important;
                 box-sizing:border-box !important;
+                overflow-x:hidden !important;
                 background:#000000 !important;
                 color:#FFFFFF !important;
             }
             #general_items{
-                width:100%;
-                max-width:100%;
-                margin:2rem 0;
-                display:flex;
+                width:100% !important;
+                max-width:100vw !important;
+                margin:2rem 0 !important;
+                display:flex !important;
                 flex-direction:column;
                 align-items:center;
                 justify-content:center;
-                background:#000000;
-                color:#FFFFFF;
+                background:#000000 !important;
+                color:#FFFFFF !important;
+            }
+            #input_column{
+                background:#000000 !important;
+                border:none !important;
+                border-radius:8px;
+                padding:1rem !important;
+                box-shadow:0 0 10px rgba(255,255,255,0.3) !important;
+                width:100% !important;
+                max-width:100vw !important;
+                box-sizing:border-box !important;
+                color:#FFFFFF !important;
             }
             h1{
                 font-size:5rem;
                 font-weight:700;
                 text-align:center;
-                color:#FFFFFF;
-                text-shadow:0 0 8px rgba(255,255,255,0.3);
-                margin:0 auto .5rem;
+                color:#FFFFFF !important;
+                text-shadow:0 0 8px rgba(255,255,255,0.3) !important;
+                margin:0 auto .5rem auto;
+                display:block;
                 max-width:100%;
-                word-break:break-word;
             }
             #subtitle{
                 font-size:1rem;
                 text-align:center;
-                color:#FFFFFF;
+                color:#FFFFFF !important;
                 opacity:0.8;
                 margin-bottom:1rem;
+                display:block;
                 max-width:100%;
-                word-break:break-word;
-            }
-            #input_column{
-                background:#000000;
-                border:none;
-                border-radius:8px;
-                padding:1rem;
-                box-shadow:0 0 10px rgba(255,255,255,0.3);
-                width:100%;
-                max-width:100%;
-                box-sizing:border-box;
-                color:#FFFFFF;
             }
             .gradio-component{
                 background:#000000 !important;
                 border:none;
                 margin:0.75rem 0;
                 width:100% !important;
-                max-width:100% !important;
+                max-width:100vw !important;
                 color:#FFFFFF !important;
-                box-sizing:border-box;
             }
             .image-container{
                 aspect-ratio:1/1;
-                width:100%;
-                max-width:100%;
+                width:100% !important;
+                max-width:100vw !important;
                 min-height:500px;
                 height:auto;
-                border:0.5px solid #FFFFFF;
+                border:0.5px solid #FFFFFF !important;
                 border-radius:4px;
-                background:#000000;
-                box-shadow:0 0 10px rgba(255,255,255,0.3);
+                box-sizing:border-box !important;
+                background:#000000 !important;
+                box-shadow:0 0 10px rgba(255,255,255,0.3) !important;
                 position:relative;
-                box-sizing:border-box;
-                color:#FFFFFF;
+                color:#FFFFFF !important;
             }
-            .image-container img{
-                width:100%;
+            .image-container img,.image-container video{
+                width:100% !important;
                 height:auto;
-                display:block;
+                box-sizing:border-box !important;
+                display:block !important;
             }
             .image-container[aria-label="Input Image"] .file-upload,
             .image-container[aria-label="Input Image"] .file-preview,
@@ -267,30 +258,32 @@ def create_demo():
                 display:none !important;
             }
             .image-container[aria-label="Result Image"].processing{
-                background:#000000;
-                position:relative;
+                background:#000000 !important;
+                position:relative !important;
             }
             .image-container[aria-label="Result Image"].processing::before{
                 content:"PROCESSING...";
-                position:absolute;
-                top:50%; left:50%;
-                transform:translate(-50%,-50%);
-                color:#FFFFFF;
-                font-family:'Orbitron',sans-serif;
-                font-size:1.8rem;
-                font-weight:700;
-                text-align:center;
-                text-shadow:0 0 10px rgba(0,255,128,0.8);
-                animation:pulse 1.5s ease-in-out infinite,glow 2s ease-in-out infinite;
-                z-index:9999;
-                width:100%; height:100%;
-                display:flex;
-                align-items:center;
-                justify-content:center;
-                pointer-events:none;
-                background:#000000;
-                border-radius:4px;
-                box-sizing:border-box;
+                position:absolute !important;
+                top:50% !important;
+                left:50% !important;
+                transform:translate(-50%,-50%) !important;
+                color:#FFFFFF !important;
+                font-family:'Orbitron',sans-serif !important;
+                font-size:1.8rem !important;
+                font-weight:700 !important;
+                text-align:center !important;
+                text-shadow:0 0 10px rgba(0,255,128,0.8) !important;
+                animation:pulse 1.5s ease-in-out infinite,glow 2s ease-in-out infinite !important;
+                z-index:9999 !important;
+                width:100% !important;
+                height:100% !important;
+                display:flex !important;
+                align-items:center !important;
+                justify-content:center !important;
+                pointer-events:none !important;
+                background:#000000 !important;
+                border-radius:4px !important;
+                box-sizing:border-box !important;
             }
             .image-container[aria-label="Result Image"].processing *{
                 display:none !important;
@@ -305,15 +298,15 @@ def create_demo():
                 border-radius:4px;
                 padding:0.5rem;
                 width:100% !important;
-                max-width:100% !important;
+                max-width:100vw !important;
                 box-sizing:border-box !important;
             }
             input:hover,textarea:hover{
-                box-shadow:0 0 8px rgba(255,255,255,0.3);
+                box-shadow:0 0 8px rgba(255,255,255,0.3) !important;
                 transition:box-shadow 0.3s;
             }
             .gr-button-primary{
-                background:linear-gradient(90deg,rgba(0,255,128,0.3),rgba(0,200,100,0.3),rgba(0,255,128,0.3));
+                background:linear-gradient(90deg,rgba(0,255,128,0.3),rgba(0,200,100,0.3),rgba(0,255,128,0.3)) !important;
                 background-size:200% 100%;
                 animation:slide 4s ease-in-out infinite,glow 3s ease-in-out infinite;
                 color:#FFFFFF !important;
@@ -322,38 +315,21 @@ def create_demo():
                 padding:0.75rem 1.5rem;
                 font-size:1.1rem;
                 font-weight:600;
-                box-shadow:0 0 14px rgba(0,255,128,0.7);
+                box-shadow:0 0 14px rgba(0,255,128,0.7) !important;
                 transition:box-shadow 0.3s,transform 0.3s;
                 width:100% !important;
-                max-width:100% !important;
+                max-width:100vw !important;
                 min-height:48px;
                 cursor:pointer;
             }
             .gr-button-primary:hover{
-                box-shadow:0 0 20px rgba(0,255,128,0.9);
+                box-shadow:0 0 20px rgba(0,255,128,0.9) !important;
                 animation:slide 4s ease-in-out infinite,glow-hover 3s ease-in-out infinite;
                 transform:scale(1.05);
             }
-            button[aria-label="Fullscreen"],
-            button[aria-label="Share"]{
+            button[aria-label="Fullscreen"],button[aria-label="Share"],button[aria-label="Download"]{
                 display:none !important;
             }
-            button[aria-label="Download"]{
-                display:inline-block !important;
-                transform:scale(3);
-                transform-origin:top right;
-                background:#000000 !important;
-                color:#FFFFFF !important;
-                border:1px solid #FFFFFF !important;
-                border-radius:4px !important;
-                padding:0.4rem !important;
-                margin:0.5rem !important;
-                box-shadow:0 0 8px rgba(255,255,255,0.3) !important;
-                transition:box-shadow 0.3s;
-            }
-            button[aria-label="Download"]:hover{
-                box-shadow:0 0 12px rgba(255,255,255,0.5) !important;
-            }
             .progress-text,.gr-progress,.gr-prose,.gr-log{
                 display:none !important;
             }
@@ -364,7 +340,7 @@ def create_demo():
                 background:#000000 !important;
                 border:none !important;
                 width:100% !important;
-                max-width:100% !important;
+                max-width:100vw !important;
             }
             @media (max-width:768px){
                 h1{font-size:4rem;}
@@ -377,7 +353,7 @@ def create_demo():
                     min-height:300px;
                 }
                 .image-container[aria-label="Result Image"].processing::before{
-                    font-size:1.2rem;
+                    font-size:1.2rem !important;
                 }
             }
             </style>
@@ -427,17 +403,17 @@ def create_demo():
                     show_download_button=False,
                     show_share_button=False,
                     interactive=True,
-                    elem_classes=["gradio-component", "image-container"],
+                    elem_classes=["gradio-component", "image-container"]
                 )
                 prompt = gr.Textbox(
                     label="Prompt",
                     lines=3,
-                    elem_classes=["gradio-component"],
+                    elem_classes=["gradio-component"]
                 )
                 run_button = gr.Button(
                     "Edit!",
                     variant="primary",
-                    elem_classes=["gradio-component", "gr-button-primary"],
+                    elem_classes=["gradio-component", "gr-button-primary"]
                 )
                 result_image = gr.Image(
                     label="Result Image",
@@ -445,7 +421,7 @@ def create_demo():
                     interactive=False,
                     show_download_button=True,
                     show_share_button=False,
-                    elem_classes=["gradio-component", "image-container"],
+                    elem_classes=["gradio-component", "image-container"]
                 )
         run_button.click(fn=infer, inputs=[input_image, prompt], outputs=[result_image])
         prompt.submit(fn=infer, inputs=[input_image, prompt], outputs=[result_image])
@@ -464,4 +440,4 @@ async def catch_all(path: str):
 
 if __name__ == "__main__":
     logger.info(f"Gradio version: {gr.__version__}")
-    demo.queue().launch(share=True)
+    demo.queue().launch(share=True)