Update app.py

app.py

@@ -802,28 +802,31 @@ def setup_interface():
                 gr.Markdown("Quick mode for faster analysis. Detailed mode for sentence-level analysis.", 
                            elem_classes=["description-text"])
                 
-                # 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"]
-                        )
+                # Container for radio buttons
+                with gr.Row(elem_id="radio-container"):
+                    mode_selection = gr.Radio(
+                        choices=["quick", "detailed"],
+                        value="quick",
+                        label=""
+                    )
+                
+                # Add paperclip as an HTML element next to the radio buttons
+                gr.HTML("""
+                <div id="paperclip-container">
+                    <label for="hidden-file-input" id="paperclip-label">📎</label>
+                </div>
+                """, elem_id="paperclip-html")
+                
+                # Hidden file upload
+                file_upload = gr.File(
+                    file_types=["image", "pdf", "doc", "docx"],
+                    type="binary",
+                    visible=False,
+                    elem_id="hidden-file-upload"
+                )
                 
                 # Action buttons row
-                with gr.Row(elem_id="button-row"):
+                with gr.Row():
                     clear_btn = gr.Button("Clear", elem_id="clear-btn")
                     analyze_btn = gr.Button("Analyze Text", elem_id="analyze-btn")
             
@@ -852,7 +855,7 @@ def setup_interface():
             outputs=[output_html, output_sentences, output_result]
         )
         
-        # Add custom CSS to style everything correctly
+        # Extensive custom CSS and JavaScript to make everything work properly
         gr.HTML("""
         <style>
         /* Button styling */
@@ -869,67 +872,33 @@ def setup_interface():
             color: black !important;
         }
         
-        #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 styling */
+        #paperclip-container {
+            display: inline-block;
+            position: relative;
+            top: -52px;
+            left: 170px;
+            width: 20px;
+            height: 20px;
+            z-index: 100;
         }
         
-        .paperclip-button label {
-            display: none !important;
+        #paperclip-label {
+            font-size: 18px;
+            opacity: 0.6;
+            cursor: pointer;
         }
         
-        .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-label:hover {
+            opacity: 1;
         }
         
-        .paperclip-button .upload-button:hover {
-            opacity: 1 !important;
-        }
-        
-        /* 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-button .upload-button .icon {
-            display: none !important;
-        }
-        
-        .paperclip-button .upload-button .text-button {
-            display: none !important;
+        /* Hide the paperclip-html container (but not its contents) */
+        #paperclip-html {
+            height: 0;
+            overflow: visible;
+            margin: 0;
+            padding: 0;
         }
         
         /* Description text styling */
@@ -940,6 +909,23 @@ def setup_interface():
             margin-bottom: 5px !important;
         }
         </style>
+        
+        <script>
+        // Connect paperclip button to the hidden file input
+        document.addEventListener('DOMContentLoaded', function() {
+            setTimeout(function() {
+                const paperclipLabel = document.getElementById('paperclip-label');
+                const hiddenFileInput = document.querySelector('#hidden-file-upload input[type="file"]');
+                
+                if (paperclipLabel && hiddenFileInput) {
+                    paperclipLabel.addEventListener('click', function(e) {
+                        e.preventDefault();
+                        hiddenFileInput.click();
+                    });
+                }
+            }, 1000); // Wait for Gradio to fully render
+        });
+        </script>
         """)
     
     return demo