Update app.py

app.py

@@ -779,35 +779,32 @@ def create_interface():
         border-color: #FF8C00 !important;
         color: white !important;
     }
-    
-    /* Custom styling for the radio group container */
-    .radio-group-container {
-        display: flex;
-        align-items: center;
-    }
-    
-    /* Paperclip button styling */
-    .paperclip-btn {
-        cursor: pointer;
-        background: none;
+
+    /* Style for our special file upload button to look like a paperclip */
+    .paperclip-button {
+        background: transparent;
         border: none;
         font-size: 18px;
-        margin-left: 10px;
         padding: 0;
-        width: 24px;
-        height: 24px;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
+        min-width: 30px;
+        cursor: pointer;
     }
     
-    .paperclip-btn:hover {
-        opacity: 0.7;
+    /* Hide the standard gradio file upload interface */
+    .paperclip-container .file-preview,
+    .paperclip-container .file-preview > div:first-child,
+    .paperclip-container label span {
+        display: none !important;
+    }
+    
+    /* Ensure the paperclip button appears next to the radio buttons */
+    .radio-container {
+        display: flex;
+        align-items: center;
     }
     
-    /* Hide the actual file upload element but make it accessible */
-    #file-upload {
-        display: none;
+    .radio-container > div:first-child {
+        flex-grow: 1;
     }
     """
     
@@ -825,13 +822,13 @@ def create_interface():
                     label="Input Text"
                 )
                 
-                # Analysis Mode label
+                # Analysis Mode section
                 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
+                # Container for radio buttons and paperclip
+                with gr.Row(elem_classes=["radio-container"]):
+                    # Radio buttons for analysis mode
                     mode_selection = gr.Radio(
                         choices=["quick", "detailed"],
                         value="quick",
@@ -839,15 +836,24 @@ def create_interface():
                         show_label=False
                     )
                     
-                    # File upload component (will be triggered by paperclip)
-                    file_upload = gr.File(
-                        file_types=["image", "pdf", "doc", "docx"],
-                        type="binary",
-                        elem_id="file-upload",
-                        visible=True,  # Set to visible but we'll hide it with CSS
-                    )
+                    # Create a minimal file upload button that looks like a paperclip
+                    with gr.Column(elem_classes=["paperclip-container"], scale=0, min_width=40):
+                        file_upload = gr.File(
+                            file_types=["image", "pdf", "doc", "docx"],
+                            type="binary",
+                            label="",
+                            show_label=False,
+                            elem_id="file-upload"
+                        )
+                        
+                        # Add a simple overlay button that looks like a paperclip
+                        paperclip_btn = gr.Button(
+                            "📎", 
+                            elem_classes=["paperclip-button"],
+                            size="sm"
+                        )
                 
-                # Analyze button with custom styling
+                # Analyze button
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
             
             # Right column - Results
@@ -864,45 +870,25 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 2. File upload change event
+        # 2. Paperclip button click - trigger file selector dialog
+        def trigger_file_selector():
+            # This function doesn't need to do anything - the button will visually
+            # overlap with the file upload component's button
+            return None
+        
+        paperclip_btn.click(
+            fn=trigger_file_selector,
+            inputs=None,
+            outputs=None,
+            _js="() => {document.querySelector('#file-upload input[type=file]').click()}"
+        )
+        
+        # 3. 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