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 small file upload button next to the radio buttons
+# Create Gradio interface with a clear "Upload Document" button
 def create_interface():
     # Custom CSS for the interface
     css = """
@@ -780,34 +780,28 @@ def create_interface():
         color: white !important;
     }
     
-    /* Custom styling for the radio group container */
-    .radio-group-container {
-        display: flex;
-        align-items: center;
-    }
-    
-    /* Paperclip button styling */
-    .paperclip-btn {
+    /* Clean styling for the upload button */
+    .upload-document-btn {
+        margin-left: 15px;
+        height: 38px;
+        padding: 0 15px;
+        border-radius: 4px;
+        background-color: #f0f0f0;
+        border: 1px solid #d9d9d9;
         cursor: pointer;
-        background: none;
-        border: none;
-        font-size: 18px;
-        margin-left: 10px;
-        padding: 0;
-        width: 24px;
-        height: 24px;
+        font-size: 14px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
     
-    .paperclip-btn:hover {
-        opacity: 0.7;
+    .upload-document-btn:hover {
+        background-color: #e0e0e0;
     }
     
-    /* Hide the actual file upload element but make it accessible */
-    #file-upload {
-        display: none;
+    /* Hide the standard file upload component */
+    #hidden-file-upload {
+        display: none !important;
     }
     """
     
@@ -825,13 +819,13 @@ def create_interface():
                     label="Input Text"
                 )
                 
-                # Analysis Mode label
+                # Analysis Mode section
                 gr.Markdown("Analysis Mode")
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
                 
-                # Create a row for radio buttons and paperclip
-                with gr.Row(elem_classes=["radio-group-container"]):
-                    # Radio buttons for analysis mode selection
+                # Create a row for radio buttons and upload button
+                with gr.Row():
+                    # Radio buttons for analysis mode
                     mode_selection = gr.Radio(
                         choices=["quick", "detailed"],
                         value="quick",
@@ -839,15 +833,21 @@ def create_interface():
                         show_label=False
                     )
                     
-                    # File upload component (will be triggered by paperclip)
+                    # Hidden file upload component
                     file_upload = gr.File(
                         file_types=["image", "pdf", "doc", "docx"],
                         type="binary",
-                        elem_id="file-upload",
-                        visible=True,  # Set to visible but we'll hide it with CSS
+                        elem_id="hidden-file-upload",
+                        visible=False
+                    )
+                    
+                    # Visible upload button
+                    upload_btn = gr.Button(
+                        "Upload Document",
+                        elem_classes=["upload-document-btn"]
                     )
                 
-                # Analyze button with custom styling
+                # Analyze button
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
             
             # Right column - Results
@@ -864,45 +864,20 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 2. File upload change event
+        # 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
         file_upload.change(
             fn=handle_file_upload_and_analyze,
             inputs=[file_upload, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
-        
-        # Add custom JavaScript for the paperclip functionality
-        demo.load(js="""
-        function setupPaperclip() {
-            // Get the file upload element and its parent
-            const fileUpload = document.getElementById('file-upload');
-            const radioGroup = document.querySelector('.radio-group-container');
-            
-            // Create paperclip button
-            const paperclip = document.createElement('button');
-            paperclip.innerHTML = '📎';
-            paperclip.className = 'paperclip-btn';
-            paperclip.title = 'Upload a document';
-            
-            // Insert paperclip button after the radio group
-            radioGroup.appendChild(paperclip);
-            
-            // When paperclip is clicked, trigger the file upload dialog
-            paperclip.addEventListener('click', function() {
-                fileUpload.querySelector('input[type="file"]').click();
-            });
-            
-            // Make the file upload container itself invisible (but still functional)
-            fileUpload.style.display = 'none';
-        }
-        
-        // Run setup when page loads
-        if (document.readyState === 'complete') {
-            setupPaperclip();
-        } else {
-            window.addEventListener('load', setupPaperclip);
-        }
-        """)
     
     return demo