Update app.py

app.py

@@ -780,70 +780,59 @@ def create_interface():
         color: white !important;
     }
     
-    /* Container for the file upload */
-    .file-upload-container {
-        margin-left: 15px;
-        width: 150px;
-        height: 50px !important; /* Increased height significantly */
-        display: inline-block;
-        vertical-align: middle;
-        position: relative;
-        overflow: hidden !important; /* Prevent content from spilling out */
+    /* Custom styling for the file upload button */
+    .gradio-file {
+        height: 40px !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        background-color: #f0f0f0 !important;
+        border: 1px solid #d9d9d9 !important;
+        border-radius: 4px !important;
+        margin-left: 15px !important;
+        width: 150px !important;
+        position: relative !important;
+        overflow: hidden !important;
     }
     
-    /* Completely hide ALL elements within the container first */
-    .file-upload-container * {
-        display: none !important;
-        opacity: 0 !important;
-        visibility: hidden !important;
+    /* Style the upload button label */
+    .gradio-file > div:first-child {
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
+        height: 100% !important;
+        width: 100% !important;
     }
     
-    /* Then create a custom button overlay that replaces everything */
-    .file-upload-container::after {
-        content: "Upload Document";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 50px !important;
-        background-color: #f0f0f0;
-        border: 1px solid #d9d9d9;
-        border-radius: 4px;
-        display: flex !important;
-        align-items: center;
-        justify-content: center;
-        font-size: 14px;
-        cursor: pointer;
-        z-index: 100;
+    /* Hide unnecessary elements */
+    .gradio-file p, 
+    .gradio-file .file-preview, 
+    .gradio-file svg {
+        display: none !important;
     }
     
-    /* Show only the actual input element to keep it functional, but make it cover the full area */
-    .file-upload-container input[type="file"] {
-        display: block !important;
-        opacity: 0 !important;
-        visibility: visible !important;
+    /* Make sure the input is accessible to clicks but visually hidden */
+    .gradio-file input[type="file"] {
+        cursor: pointer !important;
         position: absolute !important;
         top: 0 !important;
         left: 0 !important;
         width: 100% !important;
-        height: 50px !important;
-        cursor: pointer !important;
-        z-index: 200 !important;
+        height: 100% !important;
+        opacity: 0 !important;
     }
     
-    /* Style the "- or -" text */
-    .file-upload-container::before {
-        content: "- or -";
-        position: absolute;
-        bottom: -20px;
-        left: 0;
-        width: 100%;
-        text-align: center;
-        font-size: 12px;
-        color: #999;
+    /* Add the text with a pseudo-element */
+    .gradio-file > div:first-child::before {
+        content: "Upload Document" !important;
         display: block !important;
-        visibility: visible !important;
-        opacity: 1 !important;
+        pointer-events: none !important;
+    }
+    
+    /* Ensure the radio buttons and file upload are aligned */
+    .radio-container, .file-container {
+        display: flex !important;
+        align-items: center !important;
     }
     """
     
@@ -867,18 +856,20 @@ def create_interface():
                 
                 # Simple row layout for radio buttons and file upload
                 with gr.Row():
-                    mode_selection = gr.Radio(
-                        choices=["quick", "detailed"],
-                        value="quick",
-                        label="",
-                        show_label=False
-                    )
+                    with gr.Column(elem_classes=["radio-container"], scale=3):
+                        mode_selection = gr.Radio(
+                            choices=["quick", "detailed"],
+                            value="quick",
+                            label="",
+                            show_label=False
+                        )
                     
-                    with gr.Column(elem_classes=["file-upload-container"], scale=0):
+                    # Use an explicit column with a class for file upload
+                    with gr.Column(elem_classes=["file-container"], scale=1):
                         file_upload = gr.File(
                             file_types=["image", "pdf", "doc", "docx"],
                             type="binary",
-                            label="Upload Document"
+                            label=""  # Remove label to use our pseudo-element
                         )
                 
                 # Analyze button
@@ -891,14 +882,12 @@ def create_interface():
                 output_result = gr.Textbox(label="Overall Result", lines=4)
         
         # Connect components
-        # 1. Analyze button click
         analyze_btn.click(
             fn=lambda text, mode: analyze_text(text, mode, classifier),
             inputs=[text_input, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 2. File upload change event
         file_upload.change(
             fn=handle_file_upload_and_analyze,
             inputs=[file_upload, mode_selection],