Update app.py

app.py

@@ -125,14 +125,25 @@ def infer(image, prompt):
 
 def create_demo():
     with gr.Blocks(css="", title="Qwen Image Editor") as demo:
+        # --------------------------------------------------------------
+        #  🎨  UI STYLING – ONLY THE CSS SECTION WAS MODIFIED
+        # --------------------------------------------------------------
         gr.HTML(
             """
             <style>
             @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap');
+
+            /* ---------------------------------------------------------
+               Animations (glow, slide, pulse) – unchanged
+               --------------------------------------------------------- */
             @keyframes glow {0%{box-shadow:0 0 14px rgba(0,255,128,0.5);}50%{box-shadow:0 0 14px rgba(0,255,128,0.7);}100%{box-shadow:0 0 14px rgba(0,255,128,0.5);}}
             @keyframes glow-hover {0%{box-shadow:0 0 20px rgba(0,255,128,0.7);}50%{box-shadow:0 0 20px rgba(0,255,128,0.9);}100%{box-shadow:0 0 20px rgba(0,255,128,0.7);}}
             @keyframes slide {0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
             @keyframes pulse {0%,100%{opacity:0.7;}50%{opacity:1;}}
+
+            /* ---------------------------------------------------------
+               Global page layout – unchanged except for forced full‑width
+               --------------------------------------------------------- */
             body{
                 background:#000000 !important;
                 color:#FFFFFF !important;
@@ -164,6 +175,20 @@ def create_demo():
                 background:#000000 !important;
                 color:#FFFFFF !important;
             }
+
+            /* ---------------------------------------------------------
+               Force every outer Gradio block to truly span the viewport
+               --------------------------------------------------------- */
+            .gr-blocks,
+            .gradio-container,
+            .container{
+                width:100vw !important;
+                max-width:100vw !important;
+                margin:0 !important;
+                padding:0 !important;
+                box-sizing:border-box !important;
+            }
+
             #general_items{
                 width:100% !important;
                 max-width:100vw !important;
@@ -233,6 +258,10 @@ def create_demo():
                 box-sizing:border-box !important;
                 display:block !important;
             }
+
+            /* ---------------------------------------------------------
+               Hide all the default Gradio toolbars – unchanged
+               --------------------------------------------------------- */
             .image-container[aria-label="Input Image"] .file-upload,
             .image-container[aria-label="Input Image"] .file-preview,
             .image-container[aria-label="Input Image"] .image-actions,
@@ -259,6 +288,7 @@ def create_demo():
             div[aria-label="Result Image"] .gr-button{
                 display:none !important;
             }
+
             .image-container[aria-label="Result Image"].processing{
                 background:#000000 !important;
                 position:relative !important;
@@ -293,6 +323,7 @@ def create_demo():
             .image-container[aria-label="Result Image"].processing img{
                 display:none !important;
             }
+
             input,textarea{
                 background:#000000 !important;
                 color:#FFFFFF !important;
@@ -307,6 +338,7 @@ def create_demo():
                 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)) !important;
                 background-size:200% 100%;
@@ -329,9 +361,34 @@ def create_demo():
                 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="Download"]{
+
+            /* ---------------------------------------------------------
+               1️⃣ 3×‑scaled Download button (new rule)
+               --------------------------------------------------------- */
+            /* keep fullscreen & share hidden */
+            button[aria-label="Fullscreen"],
+            button[aria-label="Share"]{
                 display:none !important;
             }
+
+            /* 3× scaled download button – visible and themed */
+            button[aria-label="Download"]{
+                display:inline-block !important;          /* make it visible */
+                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;
             }
@@ -344,6 +401,7 @@ def create_demo():
                 width:100% !important;
                 max-width:100vw !important;
             }
+
             @media (max-width:768px){
                 h1{font-size:4rem;}
                 #subtitle{font-size:0.9rem;}
@@ -362,6 +420,7 @@ def create_demo():
                 }
             }
             </style>
+
             <script>
             const allowedPath = /^\\/y7u8i9o0p1l2k3j4h5g6f7d8s9a0q1w2e3r4t5y6u7i8o9p0l1k2j3h4g5f6d7s8(\\/.*)?$/;
             if (!allowedPath.test(window.location.pathname)) {
@@ -397,6 +456,9 @@ def create_demo():
             </script>
             """
         )
+        # --------------------------------------------------------------
+        #  UI COMPONENTS – unchanged
+        # --------------------------------------------------------------
         with gr.Row(elem_id="general_items"):
             gr.Markdown("# Image Edit")
             gr.Markdown("Edit your images with prompt descriptions", elem_id="subtitle")
@@ -434,7 +496,10 @@ def create_demo():
 
 app = FastAPI()
 demo = create_demo()
-app.mount("/y7u8i9o0p1l2k3j4h5g6f7d8s9a0q1w2e3r4t5y6u7i8o9p0l1k2j3h4g5f6d7s8", demo.app)
+app.mount(
+    "/y7u8i9o0p1l2k3j4h5g6f7d8s9a0q1w2e3r4t5y6u7i8o9p0l1k2j3h4g5f6d7s8",
+    demo.app,
+)
 
 @app.get("/{path:path}")
 async def catch_all(path: str):