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 file upload button matched to the radio buttons
+# Create Gradio interface with a properly sized file upload button
 def create_interface():
     # Custom CSS for the interface
     css = """
@@ -780,50 +780,49 @@ def create_interface():
         color: white !important;
     }
     
-    /* Style the file upload container */
+    /* Style the file upload container to match the radio buttons */
     .file-upload-container {
         margin-left: 15px;
         display: inline-block;
-        vertical-align: top;
+        vertical-align: middle;
     }
     
-    /* Hide all elements except what we want */
-    .file-upload-container .file-preview,
-    .file-upload-container p:not(.drop-text),
-    .file-upload-container svg,
-    .file-upload-container label span {
+    /* Hide file info and preview */
+    .file-upload-container .file-preview {
         display: none !important;
     }
     
-    /* Style the drop area properly */
+    /* Style the upload button to a proper size */
     .file-upload-container [data-testid="chunkFileDropArea"] {
+        width: 150px !important;
+        height: 40px !important;
         background-color: #f0f0f0 !important;
         border: 1px solid #d9d9d9 !important;
         border-radius: 4px !important;
-        height: 42px !important; /* Slightly taller to align with radio buttons */
-        padding: 10px 15px !important;
         display: flex !important;
         align-items: center !important;
-        justify-content: flex-start !important;
-        width: 320px !important;
-    }
-    
-    /* Style the drop text */
-    .file-upload-container .drop-text {
+        justify-content: center !important;
+        padding: 0 10px !important;
         margin: 0 !important;
-        font-size: 14px !important;
-        font-weight: normal !important;
-        color: #555 !important;
     }
     
-    /* Hide "or" text but keep "Drop File Here" */
-    .file-upload-container .drop-text + * {
+    /* 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;
+        font-size: 14px !important;
+        color: #444 !important;
+    }
+    
     /* Hover effect */
     .file-upload-container [data-testid="chunkFileDropArea"]:hover {
         background-color: #e0e0e0 !important;
+        cursor: pointer !important;
     }
     """
     
@@ -854,14 +853,14 @@ def create_interface():
                         show_label=False
                     )
                     
+                    # File upload component with compact styling
                     with gr.Column(elem_classes=["file-upload-container"], scale=0):
-                        # Add a special class to identify and style the drop text
-                        gr.HTML("<p class='drop-text'>Drop File Here</p>", visible=False)
-                        
                         file_upload = gr.File(
                             file_types=["image", "pdf", "doc", "docx"],
                             type="binary",
-                            label=""
+                            label="",
+                            show_label=False,
+                            elem_id="file-upload"
                         )
                 
                 # Analyze button