Update app.py

app.py

@@ -770,7 +770,7 @@ def analyze_text(text: str, mode: str, classifier: TextClassifier) -> tuple:
 # Initialize the classifier globally
 classifier = TextClassifier()
 
-# Create Gradio interface with a properly sized file upload button
+# Create Gradio interface with a file upload button matched to the radio buttons
 def create_interface():
     # Custom CSS for the interface
     css = """
@@ -780,49 +780,64 @@ def create_interface():
         color: white !important;
     }
     
-    /* Style the file upload container to match the radio buttons */
+    /* Make upload button container match radio button container size */
     .file-upload-container {
         margin-left: 15px;
+        width: 150px;
+        height: 40px;
         display: inline-block;
         vertical-align: middle;
+        position: relative;
     }
     
-    /* Hide file info and preview */
-    .file-upload-container .file-preview {
+    /* Hide ALL the default file upload elements */
+    .file-upload-container .file-preview,
+    .file-upload-container .file-drop,
+    .file-upload-container p,
+    .file-upload-container svg,
+    .file-upload-container [data-testid="chunkFileDropArea"],
+    .file-upload-container [data-testid="droparea"] {
         display: none !important;
     }
     
-    /* Style the upload button to a proper size */
-    .file-upload-container [data-testid="chunkFileDropArea"] {
-        width: 150px !important;
+    /* Style the button to look exactly like we want */
+    .file-upload-container > div:last-child {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
         height: 40px !important;
+        padding: 0 15px !important;
         background-color: #f0f0f0 !important;
         border: 1px solid #d9d9d9 !important;
         border-radius: 4px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
-        padding: 0 10px !important;
         margin: 0 !important;
     }
     
-    /* Show only the "Upload Document" text */
-    .file-upload-container [data-testid="chunkFileDropArea"] * {
-        display: none !important;
-    }
-    
-    /* Add a new label */
-    .file-upload-container [data-testid="chunkFileDropArea"]::before {
-        content: "Upload Document" !important;
-        display: block !important;
+    /* Style the button text */
+    .file-upload-container label span {
         font-size: 14px !important;
-        color: #444 !important;
+        font-weight: normal !important;
+        margin: 0 !important;
+        display: inline-block !important;
     }
     
     /* Hover effect */
-    .file-upload-container [data-testid="chunkFileDropArea"]:hover {
+    .file-upload-container > div:last-child:hover {
         background-color: #e0e0e0 !important;
-        cursor: pointer !important;
+    }
+    
+    /* Hide any additional elements that might appear */
+    .file-upload-container * {
+        margin: 0 !important;
+    }
+    
+    /* Hide the file selection area */
+    .file-upload-container div[data-testid="block"] > div[data-testid="droparea"] {
+        display: none !important;
     }
     """
     
@@ -853,14 +868,11 @@ def create_interface():
                         show_label=False
                     )
                     
-                    # File upload component with compact styling
                     with gr.Column(elem_classes=["file-upload-container"], scale=0):
                         file_upload = gr.File(
                             file_types=["image", "pdf", "doc", "docx"],
                             type="binary",
-                            label="",
-                            show_label=False,
-                            elem_id="file-upload"
+                            label="Upload Document"
                         )
                 
                 # Analyze button