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 clear "Upload Document" button
+# Create Gradio interface with a file upload button matched to the radio buttons
 def create_interface():
     # Custom CSS for the interface
     css = """
@@ -780,28 +780,32 @@ def create_interface():
         color: white !important;
     }
     
-    /* Styling for file upload button */
-    .file-uploader {
+    /* 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 the standard file upload appearance */
-    .file-uploader .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;
     }
     
-    /* Hide the drop area text */
-    .file-uploader .file-drop {
-        display: none !important;
-    }
-    
-    /* Hide the "or" text */
-    .file-uploader p {
-        display: none !important;
-    }
-    
-    /* Style the actual button */
-    .file-uploader > div:last-child {
+    /* 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;
@@ -810,19 +814,31 @@ def create_interface():
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
+        margin: 0 !important;
     }
     
     /* Style the button text */
-    .file-uploader label span {
+    .file-upload-container label span {
         font-size: 14px !important;
         font-weight: normal !important;
         margin: 0 !important;
+        display: inline-block !important;
     }
     
     /* Hover effect */
-    .file-uploader > div:last-child:hover {
+    .file-upload-container > div:last-child:hover {
         background-color: #e0e0e0 !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;
+    }
     """
     
     with gr.Blocks(css=css, title="AI Text Detector") as demo:
@@ -843,9 +859,8 @@ def create_interface():
                 gr.Markdown("Analysis Mode")
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
                 
-                # Create a row for radio buttons and upload button
+                # Simple row layout for radio buttons and file upload
                 with gr.Row():
-                    # Radio buttons for analysis mode
                     mode_selection = gr.Radio(
                         choices=["quick", "detailed"],
                         value="quick",
@@ -853,14 +868,12 @@ def create_interface():
                         show_label=False
                     )
                     
-                    # File upload component
-                    file_upload = gr.File(
-                        file_types=["image", "pdf", "doc", "docx"],
-                        type="binary",
-                        label="Upload Document",
-                        elem_classes=["file-uploader"],
-                        interactive=True
-                    )
+                    with gr.Column(elem_classes=["file-upload-container"], scale=0):
+                        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")
@@ -879,7 +892,7 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 2. File upload change event - directly handle file upload without an intermediate button
+        # 2. File upload change event
         file_upload.change(
             fn=handle_file_upload_and_analyze,
             inputs=[file_upload, mode_selection],