Update app.py

app.py

@@ -779,32 +779,35 @@ def create_interface():
         border-color: #FF8C00 !important;
         color: white !important;
     }
-
-    /* Style for our special file upload button to look like a paperclip */
-    .paperclip-button {
-        background: transparent;
+    
+    /* 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;
-        min-width: 30px;
-        cursor: pointer;
-    }
-    
-    /* 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;
+        width: 24px;
+        height: 24px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
     }
     
-    /* Ensure the paperclip button appears next to the radio buttons */
-    .radio-container {
-        display: flex;
-        align-items: center;
+    .paperclip-btn:hover {
+        opacity: 0.7;
     }
     
-    .radio-container > div:first-child {
-        flex-grow: 1;
+    /* Hide the actual file upload element but make it accessible */
+    #file-upload {
+        display: none;
     }
     """
     
@@ -822,13 +825,13 @@ def create_interface():
                     label="Input Text"
                 )
                 
-                # Analysis Mode section
+                # Analysis Mode label
                 gr.Markdown("Analysis Mode")
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.")
                 
-                # Container for radio buttons and paperclip
-                with gr.Row(elem_classes=["radio-container"]):
-                    # Radio buttons for analysis mode
+                # 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",
@@ -836,24 +839,15 @@ def create_interface():
                         show_label=False
                     )
                     
-                    # 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"
-                        )
+                    # 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
+                    )
                 
-                # Analyze button
+                # Analyze button with custom styling
                 analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
             
             # Right column - Results
@@ -870,25 +864,45 @@ def create_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # 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
+        # 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