Update app.py

app.py

@@ -772,68 +772,13 @@ classifier = TextClassifier()
 
 # Create Gradio interface with a file upload button matched to the radio buttons
 def create_interface():
-    # Custom CSS for the interface
+    # Simplified CSS - no longer trying to style the file upload component
     css = """
     #analyze-btn {
         background-color: #FF8C00 !important;
         border-color: #FF8C00 !important;
         color: white !important;
     }
-    
-    /* Create a compact file upload button */
-    [data-testid="file"] {
-        width: 150px !important;
-        margin-left: 15px !important;
-        height: 38px !important; /* Match height to radio buttons */
-    }
-    
-    /* Hide the drop area completely */
-    [data-testid="file"] [data-testid="droparea"] {
-        height: 38px !important;
-        min-height: 38px !important;
-        max-height: 38px !important;
-        padding: 0 !important;
-        margin: 0 !important;
-        border-radius: 4px !important;
-        background-color: #f0f0f0 !important;
-        border: 1px solid #d9d9d9 !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-        overflow: hidden !important;
-    }
-    
-    /* Hide all elements inside the drop area */
-    [data-testid="file"] [data-testid="droparea"] > * {
-        display: none !important;
-    }
-    
-    /* Add a custom button */
-    [data-testid="file"] [data-testid="droparea"]::before {
-        content: "Upload Document" !important;
-        display: block !important;
-        font-size: 14px !important;
-        color: #333 !important;
-    }
-    
-    /* Make sure the file input is still accessible but invisible */
-    [data-testid="file"] input[type="file"] {
-        position: absolute !important;
-        width: 150px !important;
-        height: 38px !important;
-        top: 0 !important;
-        left: 15px !important;
-        opacity: 0 !important;
-        cursor: pointer !important;
-        z-index: 100 !important;
-    }
-    
-    /* Hide the "or" text and other elements */
-    [data-testid="file"] .or,
-    [data-testid="file"] p,
-    [data-testid="file"] svg {
-        display: none !important;
-    }
     """
     
     with gr.Blocks(css=css, title="AI Text Detector") as demo:
@@ -854,23 +799,64 @@ def create_interface():
                 gr.Markdown("Analysis Mode")
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
                 
-                # Simple row layout for radio buttons and file upload
+                # Create layout with two separate rows
                 with gr.Row():
-                    with gr.Column(elem_classes=["radio-container"], scale=3):
-                        mode_selection = gr.Radio(
-                            choices=["quick", "detailed"],
-                            value="quick",
-                            label="",
-                            show_label=False
-                        )
-                    
-                    # Use an explicit column with a class for file upload
-                    with gr.Column(elem_classes=["file-container"], scale=1):
-                        file_upload = gr.File(
-                            file_types=["image", "pdf", "doc", "docx"],
-                            type="binary",
-                            label=""  # Remove label to use our pseudo-element
-                        )
+                    mode_selection = gr.Radio(
+                        choices=["quick", "detailed"],
+                        value="quick",
+                        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
+                )
                 
                 # Analyze button
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
@@ -888,11 +874,50 @@ 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,
             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