Upload app.py

app.py

@@ -278,47 +278,68 @@ else:
 custom_css = """
 /* Dark Purple Gradient Background */
 body, .gradio-container {
-    background-color: #0f0c29 !important; /* Fallback */
+    background-color: #0f0c29 !important;
     background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e) !important;
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
     color: #e0e7ff !important;
 }
 
-/* Fix for Image Components having weird background/glitches */
-.gradio-container button, .gradio-container img {
-    z-index: 100;
-}
-
-/* Ensure images sit on top of glass effects and remove overlay icons */
-div[data-testid="image"], 
-.image-container,
-[class*="image"],
-.input-image {
-    background: transparent !important;
-    backdrop-filter: none !important;
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
 }
 
-/* Remove the upload icon overlay on image display */
-.image-frame::before,
-[data-testid="image"]::before,
+/* CRITICAL: Remove ALL overlay icons on images (Gradio 5.x and 6.x) */
+[data-testid="image"] button,
+[data-testid="image"] .icon-button,
+[data-testid="image"] svg:not(img svg),
+.image-container button,
+.image-container .overlay,
 .upload-icon,
-.image-container .icon {
+button[aria-label*="Clear"],
+button[aria-label*="Upload"],
+.image-frame button,
+div[class*="icon"] button {
     display: none !important;
     opacity: 0 !important;
     visibility: hidden !important;
+    pointer-events: none !important;
 }
 
-/* Clean image display without artifacts */
+/* Force clean image display without backgrounds or filters */
+[data-testid="image"],
+.image-container,
+.image-frame,
+[class*="image-wrapper"] {
+    background: transparent !important;
+    backdrop-filter: none !important;
+    -webkit-backdrop-filter: none !important;
+}
+
+/* Ensure actual images display properly */
+[data-testid="image"] img,
+.image-container img,
 .image-frame img {
     display: block !important;
     max-width: 100% !important;
+    background: transparent !important;
 }
 
-@keyframes gradient {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+/* Fix buttons to be visible and styled */
+button {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer !important;
+}
+
+.primary,
+button[variant="primary"] {
+    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
+    color: white !important;
+    border: none !important;
 }
 
 /* Enhanced Glassmorphism Classes */