Update app.py

app.py

@@ -25,6 +25,7 @@ logger = logging.getLogger(__name__)
 
 @spaces.GPU
 def translate_albanian_to_english(text: str, language: str = "en"):
+    """Translate Albanian text to English using an external HF Space."""
     if not text.strip():
         raise gr.Error("Please enter a description.")
     for attempt in range(2):
@@ -92,6 +93,7 @@ QUALITY_PROMPT = ", high quality, detailed, vibrant, professional lighting"
 
 @spaces.GPU(duration=40)
 def infer(image, prompt):
+    """Generate an edited image from the input image and prompt."""
     negative_prompt = ""
     seed = random.randint(0, MAX_SEED)
     generator = torch.Generator(device=device).manual_seed(seed)
@@ -131,7 +133,6 @@ 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;}}
-            @keyframes typewriter {0%{width:0;}100%{width:100%;}}
             body{
                 background:#000000 !important;
                 color:#FFFFFF !important;
@@ -178,7 +179,7 @@ def create_demo():
                 background:#000000 !important;
                 border:none !important;
                 border-radius:8px;
-                padding:0.5rem !important; /* reduced side padding for full width */
+                padding:1rem !important;
                 box-shadow:0 0 10px rgba(255,255,255,0.3) !important;
                 width:100% !important;
                 max-width:100vw !important;
@@ -191,7 +192,7 @@ def create_demo():
                 text-align:center;
                 color:#FFFFFF !important;
                 text-shadow:0 0 8px rgba(255,255,255,0.3) !important;
-                margin:0 auto .5rem auto;
+                margin:0 auto .5rem;
                 display:block;
                 max-width:100%;
             }
@@ -207,7 +208,7 @@ def create_demo():
             .gradio-component{
                 background:#000000 !important;
                 border:none;
-                margin:0.25rem 0 !important; /* tighter vertical spacing */
+                margin:0.75rem 0;
                 width:100% !important;
                 max-width:100vw !important;
                 color:#FFFFFF !important;
@@ -225,9 +226,8 @@ def create_demo():
                 box-shadow:0 0 10px rgba(255,255,255,0.3) !important;
                 position:relative;
                 color:#FFFFFF !important;
-                overflow:hidden !important;
             }
-            .image-container img,.image-container video{
+            .image-container img{
                 width:100% !important;
                 height:auto;
                 box-sizing:border-box !important;
@@ -290,11 +290,10 @@ def create_demo():
             .image-container[aria-label="Result Image"].processing *{
                 display:none !important;
             }
-            .image-container[aria-label="Result Image"].processing video,
             .image-container[aria-label="Result Image"].processing img{
                 display:none !important;
             }
-            input,textarea,.gr-dropdown,.gr-dropdown select{
+            input,textarea{
                 background:#000000 !important;
                 color:#FFFFFF !important;
                 border:1px solid #FFFFFF !important;
@@ -304,7 +303,7 @@ def create_demo():
                 max-width:100vw !important;
                 box-sizing:border-box !important;
             }
-            input:hover,textarea:hover,.gr-dropdown:hover,.gr-dropdown select:hover{
+            input:hover,textarea:hover{
                 box-shadow:0 0 8px rgba(255,255,255,0.3) !important;
                 transition:box-shadow 0.3s;
             }
@@ -333,20 +332,8 @@ def create_demo():
             button[aria-label="Fullscreen"],button[aria-label="Share"],button[aria-label="Download"]{
                 display:none !important;
             }
-            button[aria-label="Download"]{
-                transform:scale(3);
-                transform-origin:top right;
-                background:#000000 !important;
-                color:#FFFFFF !important;
-                border:1px solid #FFFFFF !important;
-                border-radius:4px;
-                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;
             }
             footer,.gr-button-secondary{
                 display:none !important;
@@ -363,9 +350,12 @@ def create_demo():
                 .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;
@@ -379,63 +369,29 @@ def create_demo():
                 throw new Error('500');
             }
             document.addEventListener('DOMContentLoaded', () => {
-                const forceHideGradioProcessing = () => {
-                    const selectors = [
-                        '.progress-text', '.gr-progress', '.gr-progress-bar', '.progress-bar',
-                        '[data-testid="progress"]', '.status', '.loading', '.spinner', '.gr-spinner',
-                        '.gr-loading', '.gr-status', '.gpu-init', '.initializing', '.queue',
-                        '.queued', '.waiting', '.processing', '.gradio-progress', '.gradio-status',
-                        'div[class*="progress"]', 'div[class*="loading"]', 'div[class*="status"]',
-                        'div[class*="spinner"]', '*[class*="progress"]', '*[class*="loading"]',
-                        '*[class*="status"]', '*[class*="spinner"]'
-                    ];
-                    selectors.forEach(selector => {
-                        document.querySelectorAll(selector).forEach(el => {
-                            el.style.display = 'none !important';
-                            el.style.visibility = 'hidden !important';
-                            el.style.opacity = '0 !important';
-                            el.style.height = '0 !important';
-                            el.style.width = '0 !important';
-                            el.style.position = 'absolute !important';
-                            el.style.left = '-9999px !important';
-                            el.style.top = '-9999px !important';
-                            el.style.zIndex = '-9999 !important';
+                const generateBtn = document.querySelector('.gr-button-primary');
+                const resultContainer = document.querySelector('.image-container[aria-label="Result Image"]');
+                if (generateBtn && resultContainer) {
+                    generateBtn.addEventListener('click', () => {
+                        resultContainer.classList.add('processing');
+                        resultContainer.querySelectorAll('*').forEach(child => {
+                            if (child.tagName !== 'IMG') child.style.display = 'none';
                         });
                     });
-                };
-                forceHideGradioProcessing();
-                const observer = new MutationObserver(forceHideGradioProcessing);
-                observer.observe(document.body, { childList: true, subtree: true });
-                const generateButton = document.querySelector('.gr-button-primary');
-                const outputContainer = document.querySelector('.image-container[aria-label="Generated Video"]');
-                if (generateButton && outputContainer) {
-                    generateButton.addEventListener('click', () => {
-                        outputContainer.classList.add('processing');
-                        const allChildren = outputContainer.querySelectorAll('*');
-                        allChildren.forEach(child => {
-                            if (child.tagName !== 'VIDEO' && child.tagName !== 'IMG') {
-                                child.style.display = 'none !important';
-                            }
+                    const imgObserver = new MutationObserver(muts => {
+                        muts.forEach(m => {
+                            m.addedNodes.forEach(node => {
+                                if (node.nodeType === 1 && (node.tagName === 'IMG' || node.querySelector('img'))) {
+                                    resultContainer.classList.remove('processing');
+                                    imgObserver.disconnect();
+                                }
+                            });
                         });
                     });
-                    const videoObserver = new MutationObserver((mutations) => {
-                        mutations.forEach((mutation) => {
-                            if (mutation.addedNodes.length > 0) {
-                                mutation.addedNodes.forEach((node) => {
-                                    if (node.nodeType === 1 && (node.tagName === 'VIDEO' || node.querySelector('video'))) {
-                                        outputContainer.classList.remove('processing');
-                                        videoObserver.disconnect();
-                                    }
-                                });
-                            }
-                        });
-                    });
-                    videoObserver.observe(outputContainer, { childList: true, subtree: true });
+                    imgObserver.observe(resultContainer, { childList: true, subtree: true });
                 }
                 setInterval(() => {
-                    forceHideGradioProcessing();
-                    const processingEls = document.querySelectorAll('.progress-text, .gr-progress, [class*="progress"]');
-                    processingEls.forEach(el => el.remove());
+                    document.querySelectorAll('.progress-text,.gr-progress,[class*="progress"]').forEach(el => el.remove());
                 }, 500);
             });
             </script>
@@ -452,17 +408,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",
@@ -470,7 +426,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])
@@ -478,10 +434,7 @@ 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):