Update app.py

app.py

@@ -772,6 +772,7 @@ def analyze_text(text: str, mode: str, classifier: TextClassifier) -> tuple:
 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
     def analyze_text_wrapper(text, mode):
@@ -782,44 +783,43 @@ 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") as demo:
+    with gr.Blocks(title="AI Text Detector", css="#analyze-btn { background-color: #FF8C00 !important; }") as demo:
         gr.Markdown("# AI Text Detector")
         
         with gr.Row():
             # Left column - Input
-            with gr.Column():
+            with gr.Column(scale=1):
                 text_input = gr.Textbox(
                     lines=8,
                     placeholder="Enter text to analyze...",
                     label="Input Text"
                 )
                 
-                # 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"])
-                    
-                    with gr.Row():
+                gr.Markdown("Analysis Mode")
+                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="",
-                            elem_classes=["mode-radio"]
+                            label=""
                         )
-                        
-                        # Tiny file button (hidden until CSS applies)
+                    
+                    # 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="tiny-file-upload"
+                            elem_id="hidden-file-upload"
                         )
                 
-                analyze_button = gr.Button("Analyze Text")
+                analyze_button = gr.Button("Analyze Text", elem_id="analyze-btn")
             
             # Right column - Results
-            with gr.Column():
+            with gr.Column(scale=1):
                 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)
@@ -837,89 +837,88 @@ def setup_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Custom CSS that completely transforms the file upload into a small icon
+        # Applying extensive CSS to completely hide the file upload drop area
+        # and replace it with a small paperclip
         gr.HTML("""
         <style>
-        /* Hide the default file upload completely */
-        #tiny-file-upload {
-            position: relative;
-            width: 40px !important;
-            vertical-align: middle !important;
-            margin-left: 10px !important;
-            margin-top: 5px !important;
+        /* Make analyze button orange */
+        #analyze-btn {
+            background-color: #FF8C00 !important;
+            border-color: #FF8C00 !important;
         }
         
-        #tiny-file-upload > .wrap {
+        /* File upload container styling */
+        #file-upload-column {
             position: relative;
-            display: inline-block;
             width: 32px !important;
-            height: 32px !important;
-            overflow: hidden;
+            padding-left: 0 !important;
+            padding-right: 0 !important;
+            margin-top: 8px;
         }
         
-        /* 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 {
+        /* Hide all default file upload elements */
+        #hidden-file-upload > * {
             display: none !important;
         }
         
-        /* Create a paperclip-like button */
-        #tiny-file-upload .wrap:before {
+        #hidden-file-upload {
+            position: relative;
+            width: 32px !important;
+            height: 32px !important;
+            padding: 0 !important;
+            margin: 0 !important;
+        }
+        
+        /* Create our custom paperclip button */
+        #hidden-file-upload::before {
             content: "📎";
-            font-size: 20px;
             position: absolute;
             top: 2px;
-            left: 5px;
-            opacity: 0.7;
+            left: 8px;
+            font-size: 20px;
             cursor: pointer;
-            z-index: 10;
+            z-index: 999;
+            opacity: 0.7;
         }
         
-        #tiny-file-upload .wrap:hover:before {
+        #hidden-file-upload::before:hover {
             opacity: 1;
         }
         
-        /* Adjust upload zone to be clickable but mostly invisible */
-        #tiny-file-upload .upload-button {
-            position: absolute;
+        /* Make only the actual input button clickable but invisible */
+        #hidden-file-upload .upload-button {
+            position: absolute !important;
             width: 32px !important;
             height: 32px !important;
-            left: 0 !important;
-            top: 0 !important;
-            opacity: 0.01 !important;
+            opacity: 0 !important;
+            cursor: pointer !important;
+            z-index: 1000 !important;
             margin: 0 !important;
             padding: 0 !important;
-            cursor: pointer !important;
-            z-index: 5 !important;
         }
         
-        /* Fix the radio button alignment */
-        .mode-radio {
-            margin-top: 0 !important;
-            display: inline-block !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 {
-            font-size: 0.85em;
-            color: #666;
-            margin-top: -5px;
-            margin-bottom: 5px;
-        }
-        
-        /* More compact layout */
-        #analysis-mode-label {
-            margin-bottom: 0 !important;
+            font-size: 0.85em !important;
+            color: #666 !important;
+            margin-top: -10px !important;
+            margin-bottom: 5px !important;
         }
         </style>
         """)
     
     return demo
-
 # Setup the app with CORS middleware
 def setup_app():
     demo = setup_interface()