Update app.py

app.py

@@ -780,22 +780,34 @@ def create_interface():
         color: white !important;
     }
     
-    .file-upload-btn {
-        margin-left: 10px;
-        background-color: transparent;
-        border: none;
+    /* Custom styling for the radio group container */
+    .radio-group-container {
+        display: flex;
+        align-items: center;
+    }
+    
+    /* Paperclip button styling */
+    .paperclip-btn {
         cursor: pointer;
+        background: none;
+        border: none;
+        font-size: 18px;
+        margin-left: 10px;
         padding: 0;
+        width: 24px;
+        height: 24px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        width: 30px;
-        height: 30px;
-        font-size: 18px;
     }
     
-    .file-upload-btn:hover {
-        opacity: 0.8;
+    .paperclip-btn:hover {
+        opacity: 0.7;
+    }
+    
+    /* Hide the actual file upload element but make it accessible */
+    #file-upload {
+        display: none;
     }
     """
     
@@ -813,26 +825,26 @@ def create_interface():
                     label="Input Text"
                 )
                 
-                # Analysis mode selection row with file upload button
-                with gr.Row():
+                # Analysis Mode label
+                gr.Markdown("Analysis Mode")
+                gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
+                
+                # Create a row for radio buttons and paperclip
+                with gr.Row(elem_classes=["radio-group-container"]):
+                    # Radio buttons for 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"
+                        label="",
+                        show_label=False
                     )
                     
-                    # Hidden file upload component
+                    # File upload component (will be triggered by paperclip)
                     file_upload = gr.File(
                         file_types=["image", "pdf", "doc", "docx"],
-                        visible=False,
-                        type="binary"
-                    )
-                    
-                    # Visible file upload button (paperclip icon)
-                    file_button = gr.Button(
-                        "📎", 
-                        elem_classes=["file-upload-btn"],
+                        type="binary",
+                        elem_id="file-upload",
+                        visible=True,  # Set to visible but we'll hide it with CSS
                     )
                 
                 # Analyze button with custom styling
@@ -852,19 +864,45 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 2. File button click to trigger file upload
-        file_button.click(
-            fn=lambda: gr.update(visible=True),
-            inputs=None,
-            outputs=file_upload
-        )
-        
-        # 3. File upload change event
+        # 2. File upload change event
         file_upload.change(
             fn=handle_file_upload_and_analyze,
             inputs=[file_upload, mode_selection],
             outputs=[output_html, output_sentences, output_result]
         )
+        
+        # Add custom JavaScript for the paperclip functionality
+        demo.load(js="""
+        function setupPaperclip() {
+            // Get the file upload element and its parent
+            const fileUpload = document.getElementById('file-upload');
+            const radioGroup = document.querySelector('.radio-group-container');
+            
+            // Create paperclip button
+            const paperclip = document.createElement('button');
+            paperclip.innerHTML = '📎';
+            paperclip.className = 'paperclip-btn';
+            paperclip.title = 'Upload a document';
+            
+            // Insert paperclip button after the radio group
+            radioGroup.appendChild(paperclip);
+            
+            // When paperclip is clicked, trigger the file upload dialog
+            paperclip.addEventListener('click', function() {
+                fileUpload.querySelector('input[type="file"]').click();
+            });
+            
+            // Make the file upload container itself invisible (but still functional)
+            fileUpload.style.display = 'none';
+        }
+        
+        // Run setup when page loads
+        if (document.readyState === 'complete') {
+            setupPaperclip();
+        } else {
+            window.addEventListener('load', setupPaperclip);
+        }
+        """)
     
     return demo