Upload app.py

app.py

@@ -255,12 +255,23 @@ else:
 custom_css = """
 /* Dark Purple Gradient Background */
 body, .gradio-container {
-    background: linear-gradient(-45deg, #0f0c29, #302b63, #24243e);
+    background-color: #0f0c29 !important; /* Fallback */
+    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.svelte-1pel5v0, .gradio-container img.svelte-1pel5v0 {
+    z-index: 100;
+}
+/* Ensure images sit on top of glass effects */
+div[data-testid="image"] {
+    background: transparent !important;
+    backdrop-filter: none !important;
+}
+
 @keyframes gradient {
     0% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }
@@ -350,7 +361,9 @@ with gr.Blocks(title="Ultra OCR", theme=theme, css=custom_css) as demo:
                     label="📄 Document Source", 
                     height=500,
                     sources=['upload', 'clipboard'],
-                    format="png"
+                    format="png",
+                    show_label=True,
+                    image_mode="RGB" 
                 )
                 run_btn = gr.Button("⚡ Start Transcription", variant="primary", size="lg")
             
@@ -385,7 +398,9 @@ with gr.Blocks(title="Ultra OCR", theme=theme, css=custom_css) as demo:
     )
 
 if __name__ == "__main__":
-    # Removed ssr_mode=False as it breaks some interactions on Spaces
+    # Fix for spaces visual/SSR errors: Disable SSR (Server Side Rendering)
+    # This fixes "weird UI" glitches and image compatibility issues on modern Gradio versions
     demo.launch(
-        allowed_paths=[os.path.dirname(os.path.abspath(__file__))]
+        allowed_paths=[os.path.dirname(os.path.abspath(__file__))], 
+        ssr_mode=False
     )