Update app.py

app.py

@@ -783,12 +783,15 @@ def setup_interface():
             return analyze_text_wrapper("", mode)
         return handle_file_upload_and_analyze(file_obj, mode, classifier)
     
-    with gr.Blocks(title="AI Text Detector", css="#analyze-btn { background-color: #FF8C00 !important; }") as demo:
+    def clear_inputs():
+        return "", None, None, None
+    
+    with gr.Blocks(title="AI Text Detector") as demo:
         gr.Markdown("# AI Text Detector")
         
         with gr.Row():
             # Left column - Input
-            with gr.Column(scale=1):
+            with gr.Column():
                 text_input = gr.Textbox(
                     lines=8,
                     placeholder="Enter text to analyze...",
@@ -799,116 +802,105 @@ def setup_interface():
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.", 
                            elem_classes=["description-text"])
                 
-                with gr.Row():
-                    with gr.Column(scale=12):
-                        mode_selection = gr.Radio(
-                            choices=["quick", "detailed"],
-                            value="quick",
-                            label=""
-                        )
-                    
-                    # Hidden file upload that will be repositioned with CSS
-                    with gr.Column(scale=1, elem_id="file-upload-column"):
-                        file_upload = gr.File(
-                            file_types=["image", "pdf", "doc", "docx"],
-                            type="binary",
-                            label="",
-                            elem_id="hidden-file-upload"
-                        )
+                # Container for radio buttons with embedded file upload
+                with gr.Row(elem_id="radio-container"):
+                    mode_selection = gr.Radio(
+                        choices=["quick", "detailed"],
+                        value="quick",
+                        label=""
+                    )
                 
-                analyze_button = gr.Button("Analyze Text", elem_id="analyze-btn")
+                # Buttons row
+                with gr.Row(elem_id="button-row"):
+                    clear_btn = gr.Button("Clear", elem_id="clear-btn")
+                    analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
             
             # Right column - Results
-            with gr.Column(scale=1):
+            with gr.Column():
                 output_html = gr.HTML(label="Highlighted Analysis")
                 output_sentences = gr.Textbox(label="Sentence-by-Sentence Analysis", lines=10)
                 output_result = gr.Textbox(label="Overall Result", lines=4)
         
+        # Custom file upload area for paperclip
+        gr.HTML("""
+        <div id="paperclip-wrapper">
+            <label for="paperclip-input" id="paperclip-label">📎</label>
+            <input type="file" id="paperclip-input" style="display:none;">
+        </div>
+        """)
+        
+        # Add hidden file upload that we'll control with custom JS
+        file_upload = gr.File(
+            file_types=["image", "pdf", "doc", "docx"],
+            type="binary",
+            visible=False,
+            elem_id="hidden-file-upload"
+        )
+        
         # Connect the components
-        analyze_button.click(
+        analyze_btn.click(
             analyze_text_wrapper,
             inputs=[text_input, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
         
+        clear_btn.click(
+            clear_inputs,
+            inputs=None,
+            outputs=[text_input, output_html, output_sentences, output_result]
+        )
+        
         file_upload.change(
             handle_file_upload_wrapper,
             inputs=[file_upload, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Applying extensive CSS to completely hide the file upload drop area
-        # and replace it with a small paperclip
+        # Add custom CSS and JavaScript
         gr.HTML("""
         <style>
-        /* Make analyze button orange */
+        /* Button styling to match original */
         #analyze-btn {
             background-color: #FF8C00 !important;
             border-color: #FF8C00 !important;
+            color: white !important;
+            font-weight: normal !important;
         }
         
-        /* File upload container styling */
-        #file-upload-column {
-            position: relative;
-            width: 32px !important;
-            padding-left: 0 !important;
-            padding-right: 0 !important;
-            margin-top: 8px;
+        #clear-btn {
+            background-color: #E0E0E0 !important;
+            border-color: #E0E0E0 !important;
+            color: black !important;
         }
         
-        /* Hide all default file upload elements */
-        #hidden-file-upload > * {
-            display: none !important;
+        #button-row {
+            gap: 10px !important;
         }
         
-        #hidden-file-upload {
+        /* Radio button container styling */
+        #radio-container {
             position: relative;
-            width: 32px !important;
-            height: 32px !important;
-            padding: 0 !important;
-            margin: 0 !important;
         }
         
-        /* Create our custom paperclip button */
-        #hidden-file-upload::before {
-            content: "📎";
+        /* Paperclip styling */
+        #paperclip-wrapper {
             position: absolute;
-            top: 2px;
-            left: 8px;
-            font-size: 20px;
+            top: 334px;
+            left: 160px;
+            z-index: 100;
+        }
+        
+        #paperclip-label {
             cursor: pointer;
-            z-index: 999;
+            font-size: 20px;
             opacity: 0.7;
         }
         
-        #hidden-file-upload::before:hover {
+        #paperclip-label:hover {
             opacity: 1;
         }
         
-        /* Make only the actual input button clickable but invisible */
-        #hidden-file-upload .upload-button {
-            position: absolute !important;
-            width: 32px !important;
-            height: 32px !important;
-            opacity: 0 !important;
-            cursor: pointer !important;
-            z-index: 1000 !important;
-            margin: 0 !important;
-            padding: 0 !important;
-        }
-        
-        /* Hide everything else in the file upload container */
-        #hidden-file-upload .hide,
-        #hidden-file-upload p,
-        #hidden-file-upload > .wrap > div:not(.upload-button),
-        #hidden-file-upload > label,
-        #hidden-file-upload > .wrap > p,
-        #hidden-file-upload .file-preview,
-        #hidden-file-upload .absolute {
-            display: none !important;
-        }
-        
-        /* Make description text smaller */
+        /* Description text styling */
         .description-text {
             font-size: 0.85em !important;
             color: #666 !important;
@@ -916,6 +908,18 @@ def setup_interface():
             margin-bottom: 5px !important;
         }
         </style>
+        
+        <script>
+        // Connect custom paperclip to the hidden file input
+        document.addEventListener('DOMContentLoaded', function() {
+            const paperclipLabel = document.getElementById('paperclip-label');
+            const hiddenFileInput = document.querySelector('#hidden-file-upload input[type="file"]');
+            
+            paperclipLabel.addEventListener('click', function() {
+                hiddenFileInput.click();
+            });
+        });
+        </script>
         """)
     
     return demo