Update app.py

app.py

@@ -814,7 +814,7 @@ def analyze_text(text: str, mode: str, classifier: TextClassifier) -> tuple:
 # Modified Gradio interface setup function to include file upload
 def setup_gradio_interface(classifier):
     """
-    Set up Gradio interface with original layout plus a small file upload button
+    Set up Gradio interface with a more aligned and compact file upload
     
     Args:
         classifier: The TextClassifier instance
@@ -833,7 +833,6 @@ def setup_gradio_interface(classifier):
             return analyze_text_wrapper("", mode)  # Return empty analysis
         return handle_file_upload_and_analyze(file_obj, mode, classifier)
     
-    # Create layout with side-by-side content
     with gr.Blocks(title="AI Text Detector") as demo:
         gr.Markdown("# AI Text Detector")
         
@@ -847,61 +846,81 @@ def setup_gradio_interface(classifier):
                 )
                 
                 with gr.Row():
-                    # Analysis mode selection
-                    mode_selection = gr.Radio(
-                        choices=["quick", "detailed"],
-                        value="quick",
-                        label="Analysis Mode",
-                        info="Quick mode for faster analysis, Detailed mode for sentence-level analysis"
-                    )
+                    # Left side: Analysis mode radio buttons
+                    with gr.Column(scale=4):
+                        gr.Markdown("Analysis Mode")
+                        gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.", elem_classes=["description-text"])
+                        mode_selection = gr.Radio(
+                            choices=["quick", "detailed"],
+                            value="quick",
+                            label=""
+                        )
                     
-                    # Small file upload button (similar to paperclip in Claude)
-                    file_upload = gr.File(
-                        label="", 
-                        file_types=["image", "pdf", "doc", "docx"],
-                        type="binary",
-                        elem_id="file_upload_small"
-                    )
+                    # Right side: File upload (compact and aligned)
+                    with gr.Column(scale=1, elem_classes=["file-upload-container"]):
+                        file_upload = gr.File(
+                            label="File",
+                            file_types=["image", "pdf", "doc", "docx"],
+                            type="binary",
+                            elem_classes=["compact-file-upload"]
+                        )
                 
-                # Original analyze button
+                # Analyze button
                 analyze_button = gr.Button("Analyze Text")
             
-            # Right column - Results (same as original)
+            # Right column - Results
             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)
         
-        # Connect original analyze button
+        # Connect buttons to functions
         analyze_button.click(
             analyze_text_wrapper,
             inputs=[text_input, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Connect file upload changes to automatically process
+        # Connect file upload to automatically process when changed
         file_upload.change(
             handle_file_upload_wrapper,
             inputs=[file_upload, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Add CSS to make file upload button small and icon-like
+        # Add custom CSS for alignment and styling
         gr.HTML("""
         <style>
-        #file_upload_small {
-            max-width: 50px;
-            margin-top: 25px;
+        /* Make file upload more compact */
+        .compact-file-upload {
+            max-width: 100%;
         }
-        #file_upload_small .label-wrap {
-            display: none;
+        
+        .compact-file-upload > .wrap {
+            margin: 0;
+            padding: 0;
+        }
+        
+        .compact-file-upload .file-preview {
+            min-height: 0;
         }
-        </style>
-        """)
         
-        # Small text about file upload (at bottom)
-        gr.Markdown("""
-        *You can also upload an image, PDF, or Word document (max 1MB) for OCR text extraction and analysis.*
+        /* Align file upload with radio buttons */
+        .file-upload-container {
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            padding-bottom: 10px;
+        }
+        
+        /* Make description text smaller */
+        .description-text {
+            font-size: 0.85em;
+            color: #666;
+            margin-top: -5px;
+            margin-bottom: 5px;
+        }
+        </style>
         """)
     
     return demo