Update app.py

app.py

@@ -780,46 +780,49 @@ def create_interface():
         color: white !important;
     }
     
-    /* Styling for the file upload component to make it look like a button */
-    .custom-file-upload {
+    /* Styling for file upload button */
+    .file-uploader {
         margin-left: 15px;
     }
     
-    /* Hide file upload preview */
-    .custom-file-upload .file-preview {
+    /* Hide the standard file upload appearance */
+    .file-uploader .file-preview {
         display: none !important;
     }
     
-    /* Remove the "or" text in the file upload component */
-    .custom-file-upload .file-preview + p {
+    /* Hide the drop area text */
+    .file-uploader .file-drop {
         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;
+    /* Hide the "or" text */
+    .file-uploader p {
+        display: none !important;
+    }
+    
+    /* Style the actual button */
+    .file-uploader > div:last-child {
+        height: 40px !important;
         padding: 0 15px !important;
         background-color: #f0f0f0 !important;
         border: 1px solid #d9d9d9 !important;
         border-radius: 4px !important;
-        width: 100% !important;
+        display: flex !important;
+        align-items: center !important;
+        justify-content: center !important;
     }
     
-    /* Style the upload button text */
-    .custom-file-upload label span {
+    /* Style the button text */
+    .file-uploader label span {
         font-size: 14px !important;
         font-weight: normal !important;
+        margin: 0 !important;
     }
     
     /* Hover effect */
-    .custom-file-upload > div:last-child:hover {
+    .file-uploader > div:last-child:hover {
         background-color: #e0e0e0 !important;
     }
-    
-    /* Align the button container width with radio buttons */
-    .button-container {
-        width: 184px !important;
-    }
     """
     
     with gr.Blocks(css=css, title="AI Text Detector") as demo:
@@ -840,26 +843,24 @@ 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
                 with gr.Row():
-                    # Column for radio buttons
-                    with gr.Column(scale=0):
-                        # Radio buttons for analysis mode
-                        mode_selection = gr.Radio(
-                            choices=["quick", "detailed"],
-                            value="quick",
-                            label="",
-                            show_label=False
-                        )
+                    # Radio buttons for analysis mode
+                    mode_selection = gr.Radio(
+                        choices=["quick", "detailed"],
+                        value="quick",
+                        label="",
+                        show_label=False
+                    )
                     
-                    # Column for upload button with fixed width to match radio buttons
-                    with gr.Column(elem_classes=["button-container"], scale=0):
-                        # Custom styled file upload component
-                        with gr.Column(elem_classes=["custom-file-upload"], scale=0):
-                            file_upload = gr.File(
-                                file_types=["image", "pdf", "doc", "docx"],
-                                type="binary",
-                                label="Upload Document"
-                            )
+                    # File upload component
+                    file_upload = gr.File(
+                        file_types=["image", "pdf", "doc", "docx"],
+                        type="binary",
+                        label="Upload Document",
+                        elem_classes=["file-uploader"],
+                        interactive=True
+                    )
                 
                 # Analyze button
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")