Update app.py

app.py

@@ -774,7 +774,7 @@ classifier = TextClassifier()
 # Create Gradio interface with a small file upload button next to the radio buttons
 # Modified approach - simplify by using custom HTML/CSS to achieve the exact layout
 def setup_interface():
-    # Create analyzer functions that capture the classifier
+    # Create analyzer functions
     def analyze_text_wrapper(text, mode):
         return analyze_text(text, mode, classifier)
         
@@ -786,7 +786,34 @@ def setup_interface():
     def clear_inputs():
         return "", None, None, None
     
-    with gr.Blocks(title="AI Text Detector") as demo:
+    # Create a custom CSS class
+    css = """
+    #analyze-btn {
+        background-color: #FF8C00 !important;
+        border-color: #FF8C00 !important;
+        color: white !important;
+    }
+    
+    .radio-with-icon {
+        display: flex;
+        align-items: center;
+    }
+    
+    .paperclip-icon {
+        display: inline-block;
+        margin-left: 10px;
+        font-size: 20px;
+        cursor: pointer;
+        opacity: 0.7;
+    }
+    
+    .paperclip-icon:hover {
+        opacity: 1;
+    }
+    """
+    
+    # Create the interface with custom CSS
+    with gr.Blocks(title="AI Text Detector", css=css) as demo:
         gr.Markdown("# AI Text Detector")
         
         with gr.Row():
@@ -799,35 +826,29 @@ def setup_interface():
                 )
                 
                 gr.Markdown("Analysis Mode")
-                gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.", 
-                           elem_classes=["description-text"])
+                gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
                 
-                # Container for radio buttons
-                with gr.Row(elem_id="radio-container"):
+                # Create a visible radio button row
+                with gr.Row(elem_classes=["radio-with-icon"]):
                     mode_selection = gr.Radio(
                         choices=["quick", "detailed"],
                         value="quick",
                         label=""
                     )
+                    
+                    # Create a button that looks like a paperclip and triggers file upload
+                    upload_trigger = gr.Button("📎", elem_classes=["paperclip-icon"])
                 
-                # Add paperclip as an HTML element next to the radio buttons
-                gr.HTML("""
-                <div id="paperclip-container">
-                    <label for="hidden-file-input" id="paperclip-label">📎</label>
-                </div>
-                """, elem_id="paperclip-html")
-                
-                # Hidden file upload
+                # Hidden file upload that will be triggered by the paperclip button
                 file_upload = gr.File(
                     file_types=["image", "pdf", "doc", "docx"],
                     type="binary",
-                    visible=False,
-                    elem_id="hidden-file-upload"
+                    visible=False
                 )
                 
-                # Action buttons row
+                # Action buttons
                 with gr.Row():
-                    clear_btn = gr.Button("Clear", elem_id="clear-btn")
+                    clear_btn = gr.Button("Clear")
                     analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
             
             # Right column - Results
@@ -849,84 +870,22 @@ def setup_interface():
             outputs=[text_input, output_html, output_sentences, output_result]
         )
         
+        # Make the paperclip button trigger the file upload
+        def trigger_upload():
+            return gr.update(visible=True)
+            
+        upload_trigger.click(
+            trigger_upload,
+            inputs=None,
+            outputs=file_upload
+        )
+        
+        # Process the file when uploaded
         file_upload.change(
             handle_file_upload_wrapper,
             inputs=[file_upload, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
-        
-        # Extensive custom CSS and JavaScript to make everything work properly
-        gr.HTML("""
-        <style>
-        /* Button styling */
-        #analyze-btn {
-            background-color: #FF8C00 !important;
-            border-color: #FF8C00 !important;
-            color: white !important;
-            font-weight: normal !important;
-        }
-        
-        #clear-btn {
-            background-color: #E0E0E0 !important;
-            border-color: #E0E0E0 !important;
-            color: black !important;
-        }
-        
-        /* Paperclip styling */
-        #paperclip-container {
-            display: inline-block;
-            position: relative;
-            top: -52px;
-            left: 170px;
-            width: 20px;
-            height: 20px;
-            z-index: 100;
-        }
-        
-        #paperclip-label {
-            font-size: 18px;
-            opacity: 0.6;
-            cursor: pointer;
-        }
-        
-        #paperclip-label:hover {
-            opacity: 1;
-        }
-        
-        /* Hide the paperclip-html container (but not its contents) */
-        #paperclip-html {
-            height: 0;
-            overflow: visible;
-            margin: 0;
-            padding: 0;
-        }
-        
-        /* Description text styling */
-        .description-text {
-            font-size: 0.85em !important;
-            color: #666 !important;
-            margin-top: -10px !important;
-            margin-bottom: 5px !important;
-        }
-        </style>
-        
-        <script>
-        // Connect paperclip button to the hidden file input
-        document.addEventListener('DOMContentLoaded', function() {
-            setTimeout(function() {
-                const paperclipLabel = document.getElementById('paperclip-label');
-                const hiddenFileInput = document.querySelector('#hidden-file-upload input[type="file"]');
-                
-                if (paperclipLabel && hiddenFileInput) {
-                    paperclipLabel.addEventListener('click', function(e) {
-                        e.preventDefault();
-                        hiddenFileInput.click();
-                    });
-                }
-            }, 1000); // Wait for Gradio to fully render
-        });
-        </script>
-        """)
     
     return demo
 # Setup the app with CORS middleware