Update app.py

app.py

@@ -780,64 +780,50 @@ def create_interface():
         color: white !important;
     }
     
-    /* Make upload button container match radio button container size */
+    /* Style the file upload container */
     .file-upload-container {
         margin-left: 15px;
-        width: 150px;
-        height: 40px;
         display: inline-block;
-        vertical-align: middle;
-        position: relative;
+        vertical-align: top;
     }
     
-    /* Hide ALL the default file upload elements */
+    /* Hide all elements except what we want */
     .file-upload-container .file-preview,
-    .file-upload-container .file-drop,
-    .file-upload-container p,
+    .file-upload-container p:not(.drop-text),
     .file-upload-container svg,
-    .file-upload-container [data-testid="chunkFileDropArea"],
-    .file-upload-container [data-testid="droparea"] {
+    .file-upload-container label span {
         display: none !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;
+    /* Style the drop area properly */
+    .file-upload-container [data-testid="chunkFileDropArea"] {
         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: center !important;
-        margin: 0 !important;
+        justify-content: flex-start !important;
+        width: 320px !important;
     }
     
-    /* Style the button text */
-    .file-upload-container label span {
+    /* Style the drop text */
+    .file-upload-container .drop-text {
+        margin: 0 !important;
         font-size: 14px !important;
         font-weight: normal !important;
-        margin: 0 !important;
-        display: inline-block !important;
-    }
-    
-    /* Hover effect */
-    .file-upload-container > div:last-child:hover {
-        background-color: #e0e0e0 !important;
+        color: #555 !important;
     }
     
-    /* Hide any additional elements that might appear */
-    .file-upload-container * {
-        margin: 0 !important;
+    /* Hide "or" text but keep "Drop File Here" */
+    .file-upload-container .drop-text + * {
+        display: none !important;
     }
     
-    /* Hide the file selection area */
-    .file-upload-container div[data-testid="block"] > div[data-testid="droparea"] {
-        display: none !important;
+    /* Hover effect */
+    .file-upload-container [data-testid="chunkFileDropArea"]:hover {
+        background-color: #e0e0e0 !important;
     }
     """
     
@@ -869,10 +855,13 @@ def create_interface():
                     )
                     
                     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="Upload Document"
+                            label=""
                         )
                 
                 # Analyze button