Update app.py

app.py

@@ -493,7 +493,7 @@ class TextClassifier:
         }
 
 # Function to handle file upload, OCR processing, and text analysis
-def handle_file_upload_and_analyze(file_obj, mode: str, classifier) -> tuple:
+def handle_file_upload_and_analyze(file_obj, mode: str, classifier: TextClassifier) -> tuple:
     """
     Handle file upload, OCR processing, and text analysis
     """
@@ -772,13 +772,39 @@ classifier = TextClassifier()
 
 # Create Gradio interface with a file upload button matched to the radio buttons
 def create_interface():
-    # Simplified CSS - no longer trying to style the file upload component
+    # Custom CSS for the interface - simplified to focus on essential styling
     css = """
     #analyze-btn {
         background-color: #FF8C00 !important;
         border-color: #FF8C00 !important;
         color: white !important;
     }
+    
+    /* Style file upload button container */
+    .upload-btn-container {
+        display: inline-block;
+        margin-left: 15px;
+        vertical-align: middle;
+    }
+    
+    /* Target Gradio's file upload component */
+    .upload-btn-container > div {
+        width: 150px !important;
+        box-sizing: border-box !important;
+    }
+    
+    /* Fix the height to match radio buttons */
+    .upload-btn-container button {
+        height: 40px !important;
+        border-radius: 4px !important;
+        background-color: #f0f0f0 !important;
+        color: #333 !important;
+        border: 1px solid #d9d9d9 !important;
+        font-size: 14px !important;
+        line-height: normal !important;
+        padding: 8px 12px !important;
+        margin: 0 !important;
+    }
     """
     
     with gr.Blocks(css=css, title="AI Text Detector") as demo:
@@ -799,7 +825,7 @@ def create_interface():
                 gr.Markdown("Analysis Mode")
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
                 
-                # Create layout with two separate rows
+                # Simple row layout for radio buttons
                 with gr.Row():
                     mode_selection = gr.Radio(
                         choices=["quick", "detailed"],
@@ -807,56 +833,14 @@ def create_interface():
                         label="",
                         show_label=False
                     )
-                
-                # Create a separate HTML component for custom file upload
-                file_html = gr.HTML("""
-                <div style="margin-top: 10px; margin-bottom: 15px;">
-                    <label for="custom-file-upload" 
-                           style="display: inline-block; 
-                                  padding: 8px 12px; 
-                                  background-color: #f0f0f0; 
-                                  border: 1px solid #d9d9d9; 
-                                  border-radius: 4px; 
-                                  cursor: pointer;
-                                  font-size: 14px;
-                                  width: 150px;
-                                  text-align: center;">
-                        Upload Document
-                    </label>
-                    <input type="file" 
-                           id="custom-file-upload" 
-                           style="display: none;" 
-                           onchange="uploadFile(this)">
-                </div>
-                <script>
-                function uploadFile(input) {
-                    if (input.files && input.files[0]) {
-                        // Create a visible element to show the file name
-                        var fileNameElem = document.createElement('span');
-                        fileNameElem.textContent = input.files[0].name;
-                        fileNameElem.style.marginLeft = '10px';
-                        input.parentNode.appendChild(fileNameElem);
-                        
-                        // Get the file data
-                        var reader = new FileReader();
-                        reader.onload = function(e) {
-                            // Here we'd normally send this to the backend
-                            // For now, we'll just log it
-                            console.log("File loaded");
-                        };
-                        reader.readAsDataURL(input.files[0]);
-                    }
-                }
-                </script>
-                """)
-                
-                # Hidden file component for actual upload (to be triggered by custom HTML)
-                file_upload = gr.File(
-                    file_types=["image", "pdf", "doc", "docx"],
-                    type="binary",
-                    label="",
-                    visible=False  # Hide the actual component
-                )
+                    
+                    # File upload in a custom-styled container
+                    with gr.Column(elem_classes=["upload-btn-container"], scale=0):
+                        file_upload = gr.UploadButton(
+                            label="Upload Document",
+                            file_types=["image", "pdf", "doc", "docx"],
+                            size="sm"
+                        )
                 
                 # Analyze button
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
@@ -874,53 +858,15 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Keep the file upload handler (though it won't be directly visible)
-        file_upload.change(
-            fn=handle_file_upload_and_analyze,
+        # Connect file upload
+        file_upload.upload(
+            fn=lambda file, mode: handle_file_upload_and_analyze(file, mode, classifier),
             inputs=[file_upload, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
-        
-        # JavaScript to connect custom button to the hidden file input
-        demo.load(fn=None, inputs=None, outputs=None, _js="""
-        function() {
-            // Connect our custom file input to the hidden gradio component
-            document.getElementById('custom-file-upload').addEventListener('change', function(e) {
-                // Find the hidden file input in the Gradio UI
-                const hiddenFileInputs = document.querySelectorAll('input[type="file"]');
-                for (let input of hiddenFileInputs) {
-                    if (input.id !== 'custom-file-upload' && input.style.display !== 'none') {
-                        // Clone the FileList from our custom input to the hidden one
-                        const dataTransfer = new DataTransfer();
-                        for (let file of this.files) {
-                            dataTransfer.items.add(file);
-                        }
-                        input.files = dataTransfer.files;
-                        
-                        // Trigger change event
-                        const event = new Event('change', { bubbles: true });
-                        input.dispatchEvent(event);
-                        
-                        // Remove any previously displayed filename
-                        const prevFilename = document.querySelector('span.custom-filename');
-                        if (prevFilename) prevFilename.remove();
-                        
-                        // Display filename
-                        const fileNameElem = document.createElement('span');
-                        fileNameElem.textContent = this.files[0].name;
-                        fileNameElem.className = 'custom-filename';
-                        fileNameElem.style.marginLeft = '10px';
-                        fileNameElem.style.fontSize = '14px';
-                        this.parentNode.appendChild(fileNameElem);
-                        break;
-                    }
-                }
-            });
-        }
-        """)
     
     return demo
-
+    
 # Setup the app with CORS middleware
 def setup_app():
     demo = create_interface()