Update app.py

app.py

@@ -780,28 +780,34 @@ def create_interface():
         color: white !important;
     }
     
-    /* Clean styling for the upload button */
-    .upload-document-btn {
+    /* Styling for the file upload component to make it look like a button */
+    .custom-file-upload {
         margin-left: 15px;
-        height: 38px;
-        padding: 0 15px;
-        border-radius: 4px;
-        background-color: #f0f0f0;
-        border: 1px solid #d9d9d9;
-        cursor: pointer;
-        font-size: 14px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
     }
     
-    .upload-document-btn:hover {
-        background-color: #e0e0e0;
+    /* Hide file upload preview */
+    .custom-file-upload .file-preview {
+        display: none !important;
     }
     
-    /* Hide the standard file upload component */
-    #hidden-file-upload {
-        display: none !important;
+    /* Style the file upload button to look like our desired Upload Document button */
+    .custom-file-upload > div:last-child {
+        height: 38px !important;
+        padding: 0 15px !important;
+        background-color: #f0f0f0 !important;
+        border: 1px solid #d9d9d9 !important;
+        border-radius: 4px !important;
+    }
+    
+    /* Style the upload button text */
+    .custom-file-upload label span {
+        font-size: 14px !important;
+        font-weight: normal !important;
+    }
+    
+    /* Hover effect */
+    .custom-file-upload > div:last-child:hover {
+        background-color: #e0e0e0 !important;
     }
     """
     
@@ -833,19 +839,13 @@ def create_interface():
                         show_label=False
                     )
                     
-                    # Hidden file upload component
-                    file_upload = gr.File(
-                        file_types=["image", "pdf", "doc", "docx"],
-                        type="binary",
-                        elem_id="hidden-file-upload",
-                        visible=False
-                    )
-                    
-                    # Visible upload button
-                    upload_btn = gr.Button(
-                        "Upload Document",
-                        elem_classes=["upload-document-btn"]
-                    )
+                    # Custom styled file upload component
+                    with gr.Column(elem_classes=["custom-file-upload"], scale=0, min_width=150):
+                        file_upload = gr.File(
+                            file_types=["image", "pdf", "doc", "docx"],
+                            type="binary",
+                            label="Upload Document"
+                        )
                 
                 # Analyze button
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
@@ -864,15 +864,7 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 2. Upload button click - make file upload visible
-        upload_btn.click(
-            fn=lambda: gr.update(visible=True),
-            inputs=None,
-            outputs=file_upload,
-            _js="() => {document.querySelector('#hidden-file-upload input[type=file]').click(); return {}}"
-        )
-        
-        # 3. File upload change event
+        # 2. File upload change event - directly handle file upload without an intermediate button
         file_upload.change(
             fn=handle_file_upload_and_analyze,
             inputs=[file_upload, mode_selection],