Update app.py

app.py

@@ -779,42 +779,46 @@ def setup_interface():
         
     def handle_file_upload_wrapper(file_obj, mode):
         if file_obj is None:
-            return analyze_text_wrapper("", mode)  # Return empty analysis
+            return analyze_text_wrapper("", mode)
         return handle_file_upload_and_analyze(file_obj, mode, classifier)
     
-    # Create the interface similar to the original but with a small file upload button
     with gr.Blocks(title="AI Text Detector") as demo:
         gr.Markdown("# AI Text Detector")
         
         with gr.Row():
-            # Left column for input
+            # Left column - Input
             with gr.Column():
                 text_input = gr.Textbox(
-                    lines=8, 
+                    lines=8,
                     placeholder="Enter text to analyze...",
                     label="Input Text"
                 )
                 
-                with gr.Row():
-                    # Mode selection (same as original)
-                    mode_selection = gr.Radio(
-                        choices=["quick", "detailed"],
-                        value="quick",
-                        label="Analysis Mode",
-                        info="Quick mode for faster analysis. Detailed mode for sentence-level analysis."
-                    )
+                # Custom container for radio buttons and small file upload
+                with gr.Column():
+                    gr.Markdown("Analysis Mode", elem_id="analysis-mode-label")
+                    gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.", 
+                               elem_classes=["description-text"])
                     
-                    # Small file upload button (like the Claude paperclip)
-                    file_upload = gr.File(
-                        label="",
-                        file_types=["image", "pdf", "doc", "docx"],
-                        type="binary",
-                        elem_classes=["small-file-upload"]
-                    )
+                    with gr.Row():
+                        mode_selection = gr.Radio(
+                            choices=["quick", "detailed"],
+                            value="quick",
+                            label="",
+                            elem_classes=["mode-radio"]
+                        )
+                        
+                        # Tiny file button (hidden until CSS applies)
+                        file_upload = gr.File(
+                            file_types=["image", "pdf", "doc", "docx"],
+                            type="binary",
+                            label="",
+                            elem_id="tiny-file-upload"
+                        )
                 
                 analyze_button = gr.Button("Analyze Text")
             
-            # Right column for output
+            # Right column - Results
             with gr.Column():
                 output_html = gr.HTML(label="Highlighted Analysis")
                 output_sentences = gr.Textbox(label="Sentence-by-Sentence Analysis", lines=10)
@@ -833,44 +837,83 @@ def setup_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Custom CSS to style the file upload button like a small paperclip
+        # Custom CSS that completely transforms the file upload into a small icon
         gr.HTML("""
         <style>
-        /* Make the file upload small and positioned correctly */
-        .small-file-upload {
+        /* Hide the default file upload completely */
+        #tiny-file-upload {
+            position: relative;
             width: 40px !important;
+            vertical-align: middle !important;
             margin-left: 10px !important;
-            margin-top: 15px !important;
+            margin-top: 5px !important;
         }
         
-        .small-file-upload > .wrap {
-            padding: 0 !important;
-            margin: 0 !important;
+        #tiny-file-upload > .wrap {
+            position: relative;
+            display: inline-block;
+            width: 32px !important;
+            height: 32px !important;
+            overflow: hidden;
         }
         
-        .small-file-upload .file-preview {
-            min-height: 0 !important;
+        /* Hide all the default upload UI elements */
+        #tiny-file-upload .file-preview,
+        #tiny-file-upload .file-preview p,
+        #tiny-file-upload .hidden-upload,
+        #tiny-file-upload .upload-prompt,
+        #tiny-file-upload .remove-file,
+        #tiny-file-upload > label {
+            display: none !important;
+        }
+        
+        /* Create a paperclip-like button */
+        #tiny-file-upload .wrap:before {
+            content: "📎";
+            font-size: 20px;
+            position: absolute;
+            top: 2px;
+            left: 5px;
+            opacity: 0.7;
+            cursor: pointer;
+            z-index: 10;
+        }
+        
+        #tiny-file-upload .wrap:hover:before {
+            opacity: 1;
+        }
+        
+        /* Adjust upload zone to be clickable but mostly invisible */
+        #tiny-file-upload .upload-button {
+            position: absolute;
+            width: 32px !important;
+            height: 32px !important;
+            left: 0 !important;
+            top: 0 !important;
+            opacity: 0.01 !important;
+            margin: 0 !important;
             padding: 0 !important;
+            cursor: pointer !important;
+            z-index: 5 !important;
         }
         
-        /* Make file upload look like a paperclip icon */
-        .small-file-upload .icon {
-            font-size: 1.2em !important;
-            opacity: 0.7 !important;
+        /* Fix the radio button alignment */
+        .mode-radio {
+            margin-top: 0 !important;
+            display: inline-block !important;
         }
         
-        .small-file-upload .upload-button {
-            border-radius: 50% !important;
-            padding: 5px !important;
-            width: 30px !important;
-            height: 30px !important;
-            display: flex !important;
-            align-items: center !important;
-            justify-content: center !important;
+        /* Make description text smaller */
+        .description-text {
+            font-size: 0.85em;
+            color: #666;
+            margin-top: -5px;
+            margin-bottom: 5px;
         }
         
-        .small-file-upload .upload-button:hover {
-            background-color: #f0f0f0 !important;
+        /* More compact layout */
+        #analysis-mode-label {
+            margin-bottom: 0 !important;
         }
         </style>
         """)