Upload app.py

app.py

@@ -285,34 +285,43 @@ body, .gradio-container {
     color: #e0e7ff !important;
 }
 
-/* Fix for Image Components having weird background/glitches */
+/* 
+   UI Fixes for deployment 
+   - Ensure inputs and buttons are clearly visible 
+   - Remove overlay icons on images
+*/
+
+/* Reset z-indexes to avoid layering issues */
 .gradio-container button, .gradio-container img {
-    z-index: 100;
+    z-index: auto;
 }
 
-/* Ensure images sit on top of glass effects and remove overlay icons */
-div[data-testid="image"], 
-.image-container,
-[class*="image"],
-.input-image {
+/* Specific fix for the main image container to prevent glass overlay */
+.image-container, div[data-testid="image"] {
     background: transparent !important;
+    border: none !important;
     backdrop-filter: none !important;
 }
 
-/* Remove the upload icon overlay on image display */
-.image-frame::before,
-[data-testid="image"]::before,
-.upload-icon,
-.image-container .icon {
+/* Hide the 'upload' icon/placeholder when an image is showing */
+/* This targets the SVG usually found in the center */
+div[data-testid="image"] svg {
     display: none !important;
-    opacity: 0 !important;
-    visibility: hidden !important;
 }
 
-/* Clean image display without artifacts */
-.image-frame img {
-    display: block !important;
-    max-width: 100% !important;
+/* Styling for the buttons to pop out */
+button.primary {
+    background: linear-gradient(90deg, #8b5cf6, #d946ef) !important;
+    border: none !important;
+    color: white !important;
+    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4) !important;
+}
+
+/* Hide the label 'Document Source' if it overlaps */
+label span {
+    color: #e0e7ff !important;
+    font-weight: bold;
+    font-size: 1.1em;
 }
 
 @keyframes gradient {
@@ -401,10 +410,11 @@ with gr.Blocks(title="Ultra OCR", theme=theme, css=custom_css) as demo:
             with gr.Column(scale=4):
                 input_img = gr.Image(
                     type="pil", 
-                    label="📄 Document Source", 
+                    label="Document Source", 
                     height=500,
                     sources=['upload', 'clipboard'],
-                    format="png"
+                    format="png",
+                    show_label=False  # Hide label to prevent text overlay on image
                 )
                 run_btn = gr.Button("⚡ Start Transcription", variant="primary", size="lg")