Update app.py

app.py

@@ -27,7 +27,7 @@ logging.basicConfig(
 logger = logging.getLogger(__name__)
 
 # ----------------------------------------------------------------------
-# Translation function (GPU‑accelerated)
+# Translation (GPU‑accelerated)
 # ----------------------------------------------------------------------
 @spaces.GPU
 def translate_albanian_to_english(text: str, language: str = "en"):
@@ -53,12 +53,12 @@ def translate_albanian_to_english(text: str, language: str = "en"):
     raise gr.Error("Translation failed. Please try again.")
 
 # ----------------------------------------------------------------------
-# Model loading and preparation
+# Model loading & preparation
 # ----------------------------------------------------------------------
 dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
 
-# Scheduler configuration (Lightning‑optimized)
+# Lightning‑optimized scheduler configuration
 scheduler_cfg = {
     "base_image_seq_len": 256,
     "base_shift": math.log(3),
@@ -77,21 +77,21 @@ scheduler_cfg = {
 }
 scheduler = FlowMatchEulerDiscreteScheduler.from_config(scheduler_cfg)
 
-# Load the Qwen‑Image‑Edit pipeline
+# Load Qwen‑Image‑Edit pipeline
 pipe = QwenImageEditPlusPipeline.from_pretrained(
     "Qwen/Qwen-Image-Edit-2509",
     scheduler=scheduler,
     torch_dtype=dtype,
 ).to(device)
 
-# Load and fuse LoRA weights (Lightning)
+# Load + fuse Lightning LoRA
 pipe.load_lora_weights(
     "lightx2v/Qwen-Image-Lightning",
     weight_name="Qwen-Image-Lightning-4steps-V2.0.safetensors",
 )
 pipe.fuse_lora()
 
-# Replace transformer class and set custom attention processor
+# Replace transformer class & set custom attention processor
 pipe.transformer.__class__ = QwenImageTransformer2DModel
 pipe.transformer.set_attn_processor(QwenDoubleStreamAttnProcessorFA3())
 
@@ -106,7 +106,7 @@ MAX_SEED = np.iinfo(np.int32).max
 QUALITY_PROMPT = ", high quality, detailed, vibrant, professional lighting"
 
 # ----------------------------------------------------------------------
-# Inference function (GPU‑accelerated, duration hint for Spaces)
+# Inference (GPU‑accelerated, duration hint for Spaces)
 # ----------------------------------------------------------------------
 @spaces.GPU(duration=40)
 def infer(image, prompt):
@@ -117,10 +117,10 @@ def infer(image, prompt):
     seed = random.randint(0, MAX_SEED)
     generator = torch.Generator(device=device).manual_seed(seed)
 
-    # Translate the prompt from Albanian to English and append quality suffix
+    # Translate prompt + quality suffix
     prompt_en = translate_albanian_to_english(prompt.strip(), language="en") + QUALITY_PROMPT
 
-    # Load the input image as a PIL Image (if provided)
+    # Load input image as PIL.Image (if any)
     pil_img = None
     if image is not None:
         if isinstance(image, Image.Image):
@@ -130,7 +130,7 @@ def infer(image, prompt):
         elif hasattr(image, "name"):
             pil_img = Image.open(image.name).convert("RGB")
 
-    # Run the pipeline
+    # Run pipeline
     output = pipe(
         image=[pil_img] if pil_img is not None else None,
         prompt=prompt_en,
@@ -146,13 +146,13 @@ def infer(image, prompt):
     return output[0] if output else None
 
 # ----------------------------------------------------------------------
-# Gradio UI definition
+# Gradio UI
 # ----------------------------------------------------------------------
 def create_demo():
     with gr.Blocks(css="", title="Qwen Image Editor") as demo:
-        # ------------------------------------------------------------------
-        # Custom HTML + CSS + JS (enforces /spaceishere path & UI tweaks)
-        # ------------------------------------------------------------------
+        # --------------------------------------------------------------
+        # Custom HTML + full CSS (including top gap) + JS
+        # --------------------------------------------------------------
         gr.HTML(
             """
             <style>
@@ -161,38 +161,240 @@ def create_demo():
             @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;}}
-            body{background:#000!important;color:#fff!important;font-family:'Orbitron',sans-serif;min-height:100vh;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-direction:column;}
-            .gr-blocks,.container{width:100%!important;max-width:100vw!important;margin:0;padding:0;box-sizing:border-box;overflow-x:hidden;background:#000;color:#fff;}
-            #general_items{width:100%!important;max-width:100vw!important;margin:2rem 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#fff;}
-            #input_column{background:#000;border:none;border-radius:8px;padding:1rem;box-shadow:0 0 10px rgba(255,255,255,0.3);width:100%!important;max-width:100vw!important;box-sizing:border-box;color:#fff;}
-            h1{font-size:5rem;font-weight:700;text-align:center;color:#fff;text-shadow:0 0 8px rgba(255,255,255,0.3);margin:0 auto .5rem;}
-            #subtitle{font-size:1rem;text-align:center;color:#fff;opacity:.8;margin-bottom:1rem;}
-            .gradio-component{background:#000;border:none;margin:.75rem 0;width:100%!important;max-width:100vw!important;color:#fff;}
-            .image-container{aspect-ratio:1/1;width:100%!important;max-width:100vw!important;min-height:500px;height:auto;border:0.5px solid #fff;border-radius:4px;background:#000;box-shadow:0 0 10px rgba(255,255,255,0.3);position:relative;color:#fff;}
-            .image-container img{width:100%!important;height:auto;display:block;}
-            .image-container[aria-label="Result Image"].processing{background:#000;position:relative;}
-            .image-container[aria-label="Result Image"].processing::before{content:"PROCESSING...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-family:'Orbitron',sans-serif;font-size:1.8rem;font-weight:700;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;background:#000;border-radius:4px;}
-            .image-container[aria-label="Result Image"].processing *{display:none!important;}
-            .image-container[aria-label="Result Image"].processing img{display:none!important;}
-            input,textarea{background:#000;color:#fff;border:1px solid #fff;border-radius:4px;padding:.5rem;width:100%!important;max-width:100vw!important;box-sizing:border-box;}
-            input:hover,textarea:hover{box-shadow:0 0 8px rgba(255,255,255,0.3);transition:box-shadow .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%;animation:slide 4s ease-in-out infinite,glow 3s ease-in-out infinite;color:#fff;border:1px solid #fff;border-radius:6px;padding:.75rem 1.5rem;font-size:1.1rem;font-weight:600;box-shadow:0 0 14px rgba(0,255,128,0.7);transition:box-shadow .3s,transform .3s;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);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"]{display:none!important;}
-            .progress-text,.gr-progress,.gr-prose,.gr-log{display:none!important;}
-            footer,.gr-button-secondary{display:none!important;}
-            .gr-group{background:#000;border:none;width:100%!important;max-width:100vw!important;}
+            body{
+                background:#000000 !important;
+                color:#FFFFFF !important;
+                font-family:'Orbitron',sans-serif;
+                min-height:100vh;
+                margin:0 !important;
+                padding:0 !important;
+                width:100% !important;
+                max-width:100vw !important;
+                overflow-x:hidden !important;
+                display:flex !important;
+                justify-content:center;
+                align-items:center;
+                flex-direction:column;
+            }
+            body::before{
+                content:"";
+                display:block;
+                height:600px;
+                background:#000000 !important;
+            }
+            .gr-blocks,.container{
+                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% !important;
+                max-width:100vw !important;
+                margin:2rem 0 !important;
+                display:flex !important;
+                flex-direction:column;
+                align-items:center;
+                justify-content:center;
+                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 !important;
+                text-shadow:0 0 8px rgba(255,255,255,0.3) !important;
+                margin:0 auto .5rem;
+                display:block;
+                max-width:100%;
+            }
+            #subtitle{
+                font-size:1rem;
+                text-align:center;
+                color:#FFFFFF !important;
+                opacity:0.8;
+                margin-bottom:1rem;
+                display:block;
+                max-width:100%;
+            }
+            .gradio-component{
+                background:#000000 !important;
+                border:none;
+                margin:0.75rem 0;
+                width:100% !important;
+                max-width:100vw !important;
+                color:#FFFFFF !important;
+            }
+            .image-container{
+                aspect-ratio:1/1;
+                width:100% !important;
+                max-width:100vw !important;
+                min-height:500px;
+                height:auto;
+                border:0.5px solid #FFFFFF !important;
+                border-radius:4px;
+                box-sizing:border-box !important;
+                background:#000000 !important;
+                box-shadow:0 0 10px rgba(255,255,255,0.3) !important;
+                position:relative;
+                color:#FFFFFF !important;
+            }
+            .image-container img{
+                width:100% !important;
+                height:auto;
+                box-sizing:border-box !important;
+                display:block !important;
+            }
+            /* Hide upload / toolbar elements */
+            .image-container[aria-label="Input Image"] .file-upload,
+            .image-container[aria-label="Input Image"] .file-preview,
+            .image-container[aria-label="Input Image"] .image-actions,
+            .image-container[aria-label="Input Image"] .gr-file-upload,
+            .image-container[aria-label="Input Image"] .gr-file,
+            .image-container[aria-label="Input Image"] .gr-actions,
+            .image-container[aria-label="Input Image"] .gr-upload-button,
+            .image-container[aria-label="Input Image"] .gr-image-toolbar,
+            .image-container[aria-label="Input Image"] .gr-file-actions,
+            .image-container[aria-label="Input Image"] .gr-upload-options,
+            div[aria-label="Input Image"] > div > div:not(.image-container),
+            div[aria-label="Input Image"] .gr-button,
+            .image-container[aria-label="Result Image"] .file-upload,
+            .image-container[aria-label="Result Image"] .file-preview,
+            .image-container[aria-label="Result Image"] .image-actions,
+            .image-container[aria-label="Result Image"] .gr-file-upload,
+            .image-container[aria-label="Result Image"] .gr-file,
+            .image-container[aria-label="Result Image"] .gr-actions,
+            .image-container[aria-label="Result Image"] .gr-upload-button,
+            .image-container[aria-label="Result Image"] .gr-image-toolbar,
+            .image-container[aria-label="Result Image"] .gr-file-actions,
+            .image-container[aria-label="Result Image"] .gr-upload-options,
+            div[aria-label="Result Image"] > div > div:not(.image-container),
+            div[aria-label="Result Image"] .gr-button{
+                display:none !important;
+            }
+            /* Processing overlay for Result Image */
+            .image-container[aria-label="Result Image"].processing{
+                background:#000000 !important;
+                position:relative !important;
+            }
+            .image-container[aria-label="Result Image"].processing::before{
+                content:"PROCESSING...";
+                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;
+            }
+            .image-container[aria-label="Result Image"].processing img{
+                display:none !important;
+            }
+            input,textarea{
+                background:#000000 !important;
+                color:#FFFFFF !important;
+                border:1px solid #FFFFFF !important;
+                border-radius:4px;
+                padding:0.5rem;
+                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) !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%;
+                animation:slide 4s ease-in-out infinite,glow 3s ease-in-out infinite;
+                color:#FFFFFF !important;
+                border:1px solid #FFFFFF !important;
+                border-radius:6px;
+                padding:0.75rem 1.5rem;
+                font-size:1.1rem;
+                font-weight:600;
+                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:100vw !important;
+                min-height:48px;
+                cursor:pointer;
+            }
+            .gr-button-primary:hover{
+                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="Download"]{
+                display:none !important;
+            }
+            .progress-text,.gr-progress,.gr-prose,.gr-log{
+                display:none !important;
+            }
+            footer,.gr-button-secondary{
+                display:none !important;
+            }
+            .gr-group{
+                background:#000000 !important;
+                border:none !important;
+                width:100% !important;
+                max-width:100vw !important;
+            }
             @media (max-width:768px){
                 h1{font-size:4rem;}
-                #subtitle{font-size:.9rem;}
-                .gr-button-primary{padding:.6rem 1rem;font-size:1rem;box-shadow:0 0 10px rgba(0,255,128,0.7);}
-                .image-container{min-height:300px;box-shadow:0 0 8px rgba(255,255,255,0.3);}
-                .image-container[aria-label="Result Image"].processing::before{font-size:1.2rem;}
+                #subtitle{font-size:0.9rem;}
+                .gr-button-primary{
+                    padding:0.6rem 1rem;
+                    font-size:1rem;
+                    box-shadow:0 0 10px rgba(0,255,128,0.7) !important;
+                    animation:slide 4s ease-in-out infinite,glow 3s ease-in-out infinite;
+                }
+                .image-container{
+                    min-height:300px;
+                    box-shadow:0 0 8px rgba(255,255,255,0.3) !important;
+                }
+                .image-container[aria-label="Result Image"].processing::before{
+                    font-size:1.2rem !important;
+                }
             }
             </style>
             <script>
             // --------------------------------------------------------------
-            // Enforce that the UI only works under /spaceishere (or sub‑paths)
+            // Enforce loading only under /spaceishere (or any sub‑path)
             // --------------------------------------------------------------
             const allowedPath = /^\\/spaceishere(\\/.*)?$/;
             if (!allowedPath.test(window.location.pathname)) {
@@ -201,7 +403,7 @@ def create_demo():
             }
 
             // --------------------------------------------------------------
-            // UI behaviour: hide processing UI, add custom “PROCESSING…” overlay
+            // UI behaviour: processing overlay & hide progress elements
             // --------------------------------------------------------------
             document.addEventListener('DOMContentLoaded', () => {
                 const generateBtn = document.querySelector('.gr-button-primary');
@@ -237,9 +439,9 @@ def create_demo():
             """
         )
 
-        # ------------------------------------------------------------------
+        # --------------------------------------------------------------
         # Layout
-        # ------------------------------------------------------------------
+        # --------------------------------------------------------------
         with gr.Row(elem_id="general_items"):
             gr.Markdown("# Image Edit")
             gr.Markdown("Edit your images with prompt descriptions", elem_id="subtitle")
@@ -272,16 +474,16 @@ def create_demo():
                     elem_classes=["gradio-component", "image-container"],
                 )
 
-        # ------------------------------------------------------------------
+        # --------------------------------------------------------------
         # Event bindings
-        # ------------------------------------------------------------------
+        # --------------------------------------------------------------
         run_button.click(fn=infer, inputs=[input_image, prompt], outputs=[result_image])
         prompt.submit(fn=infer, inputs=[input_image, prompt], outputs=[result_image])
 
     return demo
 
 # ----------------------------------------------------------------------
-# FastAPI application with strict routing
+# FastAPI app with strict routing (only /spaceishere allowed)
 # ----------------------------------------------------------------------
 app = FastAPI()
 demo = create_demo()
@@ -292,8 +494,9 @@ async def catch_all(path: str):
     raise HTTPException(status_code=500, detail="Internal Server Error")
 
 # ----------------------------------------------------------------------
-# Entry point (use `python this_file.py` to run locally)
+# Entry point
 # ----------------------------------------------------------------------
 if __name__ == "__main__":
     logger.info(f"Gradio version: {gr.__version__}")
     demo.queue().launch(share=True)
+```$