Update app.py

app.py

@@ -148,6 +148,21 @@ def create_demo():
         gr.HTML("""
         <style>
         @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap');
+        @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%; }
+        }
         body {
             background: #000000 !important;
             color: #FFFFFF !important;
@@ -189,24 +204,26 @@ def create_demo():
             justify-content: center;
             background: #000000 !important;
             color: #FFFFFF !important;
+            /* border: 1px solid blue; */ /* Debug */
         }
         #input_column {
             background: #000000 !important;
-            border: 1px solid #FFFFFF !important;
+            border: none !important; /* Invisible outer border */
             border-radius: 8px;
             padding: 1rem !important;
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Subtle white glow */
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important; /* White glow */
             width: 100% !important;
             max-width: 100vw !important;
             box-sizing: border-box !important;
             color: #FFFFFF !important;
+            /* border: 1px solid red; */ /* Debug */
         }
         h1 {
             font-size: 5rem;
             font-weight: 700;
             text-align: center;
             color: #FFFFFF !important;
-            text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+            text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
             margin: 0 auto 0.5rem auto;
             display: block;
             max-width: 100%;
@@ -234,18 +251,35 @@ def create_demo():
             max-width: 100vw !important;
             min-height: 500px;
             height: auto;
-            border: 1px solid #FFFFFF !important;
+            border: 0.5px solid #FFFFFF !important; /* Thinner white border */
             border-radius: 4px;
             box-sizing: border-box !important;
             background: #000000 !important;
-            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3); /* Subtle white glow */
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important; /* White glow */
             position: relative;
             color: #FFFFFF !important;
+            /* border: 1px solid green; */ /* Debug */
         }
         .image-container img {
-            width: 100%;
+            width: 100% !important;
             height: auto;
             box-sizing: border-box !important;
+            display: block !important;
+        }
+        /* Exhaustive selectors to hide upload/webcam/paste toolbar */
+        .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 {
+            display: none !important; /* Force hide all toolbar elements */
         }
         .image-container.processing {
             background: #000000 !important;
@@ -269,36 +303,37 @@ def create_demo():
         input, textarea {
             background: #000000 !important;
             color: #FFFFFF !important;
-            border: 1px solid #FFFFFF !important;
+            border: 1px solid #FFFFFF !important; /* White border */
             border-radius: 4px;
             padding: 0.5rem;
             width: 100% !important;
             max-width: 100vw !important;
             box-sizing: border-box !important;
-            display: block;
         }
         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: #000000 !important;
+            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: 1px solid #FFFFFF !important; /* White border */
             border-radius: 6px;
             padding: 0.75rem 1.5rem;
             font-size: 1.1rem;
             font-weight: 600;
-            box-shadow: 0 0 8px rgba(0, 255, 128, 0.3); /* Greenish glow */
+            box-shadow: 0 0 14px rgba(0, 255, 128, 0.7) !important; /* Breathing green glow */
             transition: box-shadow 0.3s, transform 0.3s;
             width: 100% !important;
             max-width: 100vw !important;
             min-height: 48px;
             cursor: pointer;
-            display: block;
         }
         .gr-button-primary:hover {
-            box-shadow: 0 0 12px rgba(0, 255, 128, 0.5); /* Stronger greenish glow */
+            box-shadow: 0 0 20px rgba(0, 255, 128, 0.9) !important; /* Stronger glow */
+            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="Fullscreen"]:hover,
@@ -310,15 +345,15 @@ def create_demo():
             transform-origin: top right;
             background: #000000 !important;
             color: #FFFFFF !important;
-            border: 1px solid #FFFFFF !important;
+            border: 1px solid #FFFFFF !important; /* White border */
             border-radius: 4px;
             padding: 0.4rem !important;
             margin: 0.5rem !important;
-            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;
         }
         button[aria-label="Download"]:hover {
-            box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
+            box-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
         }
         .progress-text, .gr-progress {
             display: none !important;
@@ -326,6 +361,12 @@ def create_demo():
         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;
@@ -336,14 +377,17 @@ def create_demo():
             .gr-button-primary {
                 padding: 0.6rem 1rem;
                 font-size: 1rem;
-                box-shadow: 0 0 6px rgba(0, 255, 128, 0.3);
+                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;
             }
             .gr-button-primary:hover {
-                box-shadow: 0 0 10px rgba(0, 255, 128, 0.5);
+                box-shadow: 0 0 12px rgba(0, 255, 128, 0.9) !important;
+                animation: slide 4s ease-in-out infinite, glow-hover 3s ease-in-out infinite;
             }
             .image-container {
                 min-height: 300px;
-                box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+                box-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
+                border: 0.5px solid #FFFFFF !important; /* Thinner white border */
             }
             .image-container.processing::before {
                 font-size: 0.9rem;
@@ -353,13 +397,13 @@ def create_demo():
         }
         </style>
         <script>
-        // Debug: Log container dimensions and glow properties
+        // Debug: Log container dimensions, glow, background, border, and toolbar visibility
         document.addEventListener('DOMContentLoaded', () => {
             const containers = document.querySelectorAll('#general_items, #input_column, .image-container');
             containers.forEach(container => {
                 const width = container.offsetWidth;
                 const style = window.getComputedStyle(container);
-                console.log(`Container ${container.id || container.className}: width=${width}px, box-shadow=${style.boxShadow} (Viewport: ${window.innerWidth}px)`);
+                console.log(`Container ${container.id || container.className}: width=${width}px, box-shadow=${style.boxShadow}, background=${style.background}, border=${style.border} (Viewport: ${window.innerWidth}px)`);
                 container.setAttribute('data-width', `${width}px`);
             });
             const processingText = document.querySelectorAll('.image-container.processing::before');
@@ -370,11 +414,52 @@ def create_demo():
             const editButton = document.querySelector('.gr-button-primary');
             if (editButton) {
                 const style = window.getComputedStyle(editButton);
-                console.log(`Edit button: box-shadow=${style.boxShadow}`);
+                console.log(`Edit button: box-shadow=${style.boxShadow}, background=${style.background}, border=${style.border}, animation=${style.animation}, background-position=${style.backgroundPosition}`);
             }
+            // Log all toolbar elements
+            const toolbarSelectors = [
+                '.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'
+            ];
+            toolbarSelectors.forEach(selector => {
+                const elements = document.querySelectorAll(selector);
+                elements.forEach(el => {
+                    const style = window.getComputedStyle(el);
+                    console.log(`Toolbar element ${selector}: display=${style.display}, class=${el.className}`);
+                });
+            });
+            // Force hide any residual toolbar elements
+            const toolbars = document.querySelectorAll(
+                '.image-container[aria-label="Input Image"] > div > div:not(.image-container), ' +
+                '.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"] .gr-button'
+            );
+            toolbars.forEach(toolbar => {
+                toolbar.style.display = 'none';
+                console.log(`Forced hide toolbar: ${toolbar.className}`);
+            });
             // Toggle processing state
             const runButton = document.querySelector('.gr-button-primary');
-            const resultImage = document.querySelector('.image-container:nth-child(4)'); // Adjusted for new order
+            const resultImage = document.querySelector('.image-container[aria-label="Result Image"]');
             if (runButton && resultImage) {
                 runButton.addEventListener('click', () => {
                     resultImage.classList.add('processing');
@@ -400,21 +485,21 @@ def create_demo():
                 input_image = gr.Image(
                     label="Input Image",
                     type="pil",
-                    interactive=True,
+                    sources=["upload"],  # Restrict to file upload only
                     show_download_button=False,
                     show_share_button=False,
+                    interactive=True,
                     elem_classes=["gradio-component", "image-container"]
                 )
                 prompt = gr.Textbox(
                     label="Prompt",
-                    placeholder="Describe the edit instruction",
                     lines=3,
-                    elem_classes="gradio-component"
+                    elem_classes=["gradio-component"]
                 )
                 run_button = gr.Button(
                     "Edit!",
                     variant="primary",
-                    elem_classes="gr-button-primary"
+                    elem_classes=["gradio-component", "gr-button-primary"]
                 )
                 result_image = gr.Image(
                     label="Result Image",