Update app.py

app.py

@@ -802,15 +802,27 @@ def setup_interface():
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.", 
                            elem_classes=["description-text"])
                 
-                # 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=""
-                    )
+                # Radio buttons with inline file upload
+                with gr.Row(elem_id="control-row"):
+                    # First column for radio buttons
+                    with gr.Column(scale=10):
+                        mode_selection = gr.Radio(
+                            choices=["quick", "detailed"],
+                            value="quick",
+                            label=""
+                        )
+                    
+                    # Second column for tiny paperclip button
+                    with gr.Column(scale=1, elem_id="paperclip-column"):
+                        file_upload = gr.File(
+                            file_types=["image", "pdf", "doc", "docx"],
+                            type="binary",
+                            label="📎",
+                            elem_id="paperclip-upload",
+                            elem_classes=["paperclip-button"]
+                        )
                 
-                # Buttons row
+                # Action 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")
@@ -821,22 +833,6 @@ def setup_interface():
                 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_btn.click(
             analyze_text_wrapper,
@@ -856,10 +852,10 @@ def setup_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Add custom CSS and JavaScript
+        # Add custom CSS to style everything correctly
         gr.HTML("""
         <style>
-        /* Button styling to match original */
+        /* Button styling */
         #analyze-btn {
             background-color: #FF8C00 !important;
             border-color: #FF8C00 !important;
@@ -875,29 +871,65 @@ def setup_interface():
         
         #button-row {
             gap: 10px !important;
+            margin-top: 10px !important;
+        }
+        
+        /* Paperclip styling - make it tiny and minimal */
+        #paperclip-column {
+            min-width: 30px !important;
+            width: 30px !important;
+            padding: 0 !important;
+            margin-left: -15px !important;
+            margin-top: 8px !important;
+        }
+        
+        /* Hide virtually everything in the file upload except the emoji */
+        .paperclip-button .wrap {
+            border: none !important;
+            background: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            height: 30px !important;
+            min-height: 0 !important;
+        }
+        
+        .paperclip-button .file-preview {
+            display: none !important;
+        }
+        
+        .paperclip-button label {
+            display: none !important;
         }
         
-        /* Radio button container styling */
-        #radio-container {
-            position: relative;
+        .paperclip-button .upload-button {
+            background: none !important;
+            border: none !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            width: 25px !important;
+            height: 25px !important;
+            opacity: 0.6 !important;
         }
         
-        /* Paperclip styling */
-        #paperclip-wrapper {
-            position: absolute;
-            top: 334px;
-            left: 160px;
-            z-index: 100;
+        .paperclip-button .upload-button:hover {
+            opacity: 1 !important;
         }
         
-        #paperclip-label {
-            cursor: pointer;
-            font-size: 20px;
-            opacity: 0.7;
+        /* Fix file upload icon to be paperclip only */
+        .paperclip-button .upload-button::before {
+            content: "📎" !important;
+            font-size: 18px !important;
+            position: absolute !important;
+            left: 3px !important;
+            top: 2px !important;
         }
         
-        #paperclip-label:hover {
-            opacity: 1;
+        .paperclip-button .upload-button .icon {
+            display: none !important;
+        }
+        
+        .paperclip-button .upload-button .text-button {
+            display: none !important;
         }
         
         /* Description text styling */
@@ -908,18 +940,6 @@ 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