Update app.py

app.py

@@ -26,7 +26,7 @@ os.makedirs(OUTPUT_DIR, exist_ok=True)
 
 def process(image, progress=gr.Progress()):
     if image is None:
-        return None, None, None
+        return None, None
     try:
         progress(0, desc="Starting processing...")
         orig_image = Image.fromarray(image)
@@ -71,94 +71,94 @@ def process(image, progress=gr.Progress()):
         new_im.save(filepath, format='PNG', quality=100)
         
         # Convert to numpy array for display
-        output_array = np.array(new_im)
-        
-        # Create auto-download HTML
-        auto_download_html = f"""
-            <script>
-                setTimeout(function() {{
-                    const link = document.createElement('a');
-                    link.href = '/file={filepath}';
-                    link.download = '{filename}';
-                    document.body.appendChild(link);
-                    link.click();
-                    document.body.removeChild(link);
-                }}, 1000);
-            </script>
-        """
+        output_array = np.array(new_im.convert('RGBA'))
         
         progress(1.0, desc="Done!")
-        return output_array, filepath, gr.HTML.update(value=auto_download_html, visible=True)
+        return output_array, gr.update(value=filepath, visible=True)
     
     except Exception as e:
         print(f"Error processing image: {str(e)}")
-        return None, None, None
+        return None, None
 
-# Define the interface
-with gr.Blocks(css="""
-    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');
-    
-    .title-text {
-        color: #ff00de;
-        font-family: 'Orbitron', sans-serif;
-        font-size: 2.5em;
-        text-align: center;
-        margin: 20px 0;
-        text-shadow: 0 0 10px rgba(255, 0, 222, 0.7);
-        animation: glow 2s ease-in-out infinite alternate;
-    }
-    
-    .subtitle-text {
-        color: #00ffff;
-        text-align: center;
-        margin-bottom: 30px;
-        font-size: 1.2em;
-        text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
-    }
-    
-    .image-container {
-        background: rgba(10, 10, 30, 0.3);
-        border-radius: 15px;
-        padding: 20px;
-        margin: 10px 0;
-        border: 2px solid #00ffff;
-        box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
-        transition: all 0.3s ease;
-    }
-    
-    .image-container img {
-        max-width: 100%;
-        height: auto;
-        display: block;
-        margin: 0 auto;
-    }
-    
-    .download-btn {
-        background: linear-gradient(45deg, #00ffff, #ff00de);
-        border: none;
-        padding: 12px 25px;
-        border-radius: 8px;
-        color: white;
-        font-family: 'Orbitron', sans-serif;
-        cursor: pointer;
-        transition: all 0.3s ease;
-        margin-top: 10px;
-        text-align: center;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-    }
-    
-    @keyframes glow {
-        from { text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de; }
-        to { text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de; }
-    }
-    
-    @media (max-width: 768px) {
-        .title-text { font-size: 1.8em; }
-        .subtitle-text { font-size: 1em; }
-        .image-container { padding: 10px; }
-    }
-""") as demo:
+css = """
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');
+
+.title-text {
+    color: #ff00de;
+    font-family: 'Orbitron', sans-serif;
+    font-size: 2.5em;
+    text-align: center;
+    margin: 20px 0;
+    text-shadow: 0 0 10px rgba(255, 0, 222, 0.7);
+    animation: glow 2s ease-in-out infinite alternate;
+}
+
+.subtitle-text {
+    color: #00ffff;
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 1.2em;
+    text-shadow: 0 0 8px rgba(0, 255, 255, 0.7);
+}
+
+.image-container {
+    background: rgba(10, 10, 30, 0.3);
+    border-radius: 15px;
+    padding: 20px;
+    margin: 10px 0;
+    border: 2px solid #00ffff;
+    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
+    transition: all 0.3s ease;
+}
+
+.image-container img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+
+.image-container:hover {
+    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
+    transform: translateY(-2px);
+}
+
+.download-btn {
+    background: linear-gradient(45deg, #00ffff, #ff00de);
+    border: none;
+    padding: 12px 25px;
+    border-radius: 8px;
+    color: white;
+    font-family: 'Orbitron', sans-serif;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-top: 10px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    width: 100%;
+    display: block;
+}
+
+.download-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.4);
+}
+
+@keyframes glow {
+    from { text-shadow: 0 0 5px #ff00de, 0 0 10px #ff00de; }
+    to { text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de; }
+}
+
+@media (max-width: 768px) {
+    .title-text { font-size: 1.8em; }
+    .subtitle-text { font-size: 1em; }
+    .image-container { padding: 10px; }
+    .download-btn { padding: 10px 20px; }
+}
+"""
+
+with gr.Blocks(css=css) as demo:
     gr.Markdown("""
         <h1 class="title-text">AI Background Removal</h1>
         <p class="subtitle-text">Remove backgrounds instantly using advanced AI technology</p>
@@ -180,17 +180,39 @@ with gr.Blocks(css="""
             )
             
             download_button = gr.File(
-                label="Download Result",
+                label="Download Processed Image",
                 visible=True,
-                elem_classes="download-btn"
+                elem_classes="download-btn",
+                interactive=True
             )
-            
-            auto_download = gr.HTML(visible=False)
+    
+    # Add JavaScript for auto-download
+    demo.load(None, None, None, _js="""
+        function autoDownload() {
+            const downloadButtons = document.querySelectorAll('.download-btn button');
+            if (downloadButtons.length > 0) {
+                downloadButtons[0].click();
+            }
+        }
+        
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    const downloadButtons = document.querySelectorAll('.download-btn button');
+                    if (downloadButtons.length > 0) {
+                        setTimeout(autoDownload, 1000);
+                    }
+                }
+            });
+        });
+        
+        observer.observe(document.body, { childList: true, subtree: true });
+    """)
     
     input_image.change(
         fn=process,
         inputs=input_image,
-        outputs=[output_image, download_button, auto_download]
+        outputs=[output_image, download_button]
     )
 
 if __name__ == "__main__":