Update app.py

app.py

@@ -392,55 +392,134 @@ with gr.Blocks(title="CLIP-ViT Image Analyzer", theme=gr.themes.Soft()) as demo:
     # Load example images
     example_images_list = get_example_images()
     
-    # Custom CSS to remove gallery selection frames
+    # # Custom CSS to remove gallery selection frames
+    # #custom_css = """
+    # #.gradio-container {
+    # #    max-height: 95vh !important;
+    # #    overflow-y: auto !important;
+    # #}
+
+    # #blocks-container {
+    #     max-height: 100% !important;
+    #     overflow: auto !important;
+    # }
+
+    # #.gallery .wrap.contain .grid .wrap {
+    #     border: none !important;
+    #     box-shadow: none !important;
+    #     outline: none !important;
+    # }
+    # .gallery .wrap.contain .grid .wrap.selected {
+    #     border: none !important;
+    #     box-shadow: none !important;
+    #     outline: none !important;
+    # }
+    # .gallery .thumbnail {
+    #     border: none !important;
+    #     box-shadow: none !important;
+    #     outline: none !important;
+    # }
+    # .gallery .thumbnail.selected {
+    #     border: none !important;
+    #     box-shadow: none !important;
+    #     outline: none !important;
+    # }
+    # .gallery .wrap.gradio-image {
+    #     border: none !important;
+    #     box-shadow: none !important;
+    #     outline: none !important;
+    # }
+    # .gallery .wrap.gradio-image.selected {
+    #     border: none !important;
+    #     box-shadow: none !important;
+    #     outline: none !important;
+    # }
+    # /* Prevent infinite expansion */
+    # .panel {
+    #     max-height: 80vh !important;
+    #     overflow-y: auto !important;
+    # }
+    # #"""
+
+
     custom_css = """
+    <style>
     .gradio-container {
-        max-height: 95vh !important;
-        overflow-y: auto !important;
+        height: 100vh !important;
+        max-height: 100vh !important;
+        overflow: hidden !important;
     }
-
+    
     #blocks-container {
-        max-height: 100% !important;
-        overflow: auto !important;
-    }
-
-    .gallery .wrap.contain .grid .wrap {
-        border: none !important;
-        box-shadow: none !important;
-        outline: none !important;
-    }
-    .gallery .wrap.contain .grid .wrap.selected {
-        border: none !important;
-        box-shadow: none !important;
-        outline: none !important;
-    }
-    .gallery .thumbnail {
-        border: none !important;
-        box-shadow: none !important;
-        outline: none !important;
-    }
-    .gallery .thumbnail.selected {
-        border: none !important;
-        box-shadow: none !important;
-        outline: none !important;
-    }
-    .gallery .wrap.gradio-image {
-        border: none !important;
-        box-shadow: none !important;
-        outline: none !important;
+        height: calc(100vh - 100px) !important;
+        overflow-y: auto !important;
     }
+    
+    /* Remove gallery selection frames */
+    .gallery .wrap.contain .grid .wrap,
+    .gallery .wrap.contain .grid .wrap.selected,
+    .gallery .thumbnail,
+    .gallery .thumbnail.selected,
+    .gallery .wrap.gradio-image,
     .gallery .wrap.gradio-image.selected {
         border: none !important;
         box-shadow: none !important;
         outline: none !important;
     }
-    /* Prevent infinite expansion */
-    .panel {
-        max-height: 80vh !important;
-        overflow-y: auto !important;
-    }
+    </style>
     """
     
+    # Add this JavaScript separately
+    javascript = """
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // Force container height immediately
+        const forceHeight = function() {
+            const containers = document.querySelectorAll('.gradio-container, .container, #blocks-container');
+            containers.forEach(container => {
+                container.style.height = '100vh';
+                container.style.maxHeight = '100vh';
+                container.style.overflowY = 'auto';
+            });
+        };
+        
+        // Run immediately
+        forceHeight();
+        
+        // Run again after a short delay to catch dynamic content
+        setTimeout(forceHeight, 100);
+        setTimeout(forceHeight, 500);
+        
+        // Monitor for ANY DOM changes
+        const observer = new MutationObserver(function(mutations) {
+            forceHeight();
+            // Constrain any new elements
+            mutations.forEach(function(mutation) {
+                mutation.addedNodes.forEach(function(node) {
+                    if (node.nodeType === 1) {
+                        node.style.maxHeight = '100%';
+                        if (node.querySelectorAll) {
+                            node.querySelectorAll('*').forEach(child => {
+                                child.style.maxHeight = '100%';
+                            });
+                        }
+                    }
+                });
+            });
+        });
+        
+        observer.observe(document.body, { 
+            childList: true, 
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['style', 'class']
+        });
+    });
+    </script>
+    """
+
+
+    
     with gr.Row():
         with gr.Column():
             input_image = gr.Image(