compare to chicory-ui

ui.py

@@ -96,31 +96,11 @@ def create_demo():
         hr {
             border-color: #333 !important;
         }
-    """, js="""
-    // Add keyboard shortcut support for Cmd+Enter (Mac) or Ctrl+Enter (Windows/Linux)
-    document.addEventListener('keydown', function(e) {
-        if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
-            // Find the active tab
-            const activeTabButton = document.querySelector('.tab-nav button[aria-selected="true"]');
-            if (!activeTabButton) return;
-            
-            // Find the active tab content
-            const activeTabContent = document.querySelector('.tab-panel[style*="display: block"]');
-            if (!activeTabContent) return;
-            
-            // Find the submit button in the active tab
-            const submitButton = activeTabContent.querySelector('button');
-            if (submitButton) {
-                submitButton.click();
-                e.preventDefault();
-            }
-        }
-    });
     """) as demo:
         gr.Markdown("# Product Categorization Tool\nAnalyze products and find the most similar ingredients using AI embeddings.")
         gr.Markdown("Use **Cmd+Enter** (Mac) or **Ctrl+Enter** (Windows/Linux) to quickly categorize products.")
         
-        with gr.Tabs():
+        with gr.Tabs() as tabs:
             with gr.TabItem("Text Input"):
                 with gr.Row():
                     with gr.Column(scale=1):
@@ -134,21 +114,12 @@ def create_demo():
                         with input_controls:
                             top_n = gr.Slider(1, 10, 5, label="Top N Results")
                             confidence = gr.Slider(0.1, 0.9, 0.5, label="Confidence Threshold")
-                        categorize_btn = gr.Button("Categorize")
+                        categorize_btn = gr.Button("Categorize", variant="primary")
                     
                     with gr.Column(scale=1):
                         # Results section
                         text_output = gr.HTML(label="Categorization Results", elem_classes="results-container")
                 
-                # Connect button click to the categorize function
-                categorize_btn.click(
-                    fn=categorize_products,
-                    inputs=[text_input, gr.State(False), top_n, confidence],
-                    outputs=text_output
-                )
-                
-                # Custom JS handling of Cmd+Enter/Ctrl+Enter is configured in js parameter above
-            
             with gr.TabItem("File Upload"):
                 with gr.Row():
                     with gr.Column(scale=1):
@@ -158,17 +129,55 @@ def create_demo():
                         with file_controls:
                             file_top_n = gr.Slider(1, 10, 5, label="Top N Results")
                             file_confidence = gr.Slider(0.1, 0.9, 0.5, label="Confidence Threshold")
-                        process_btn = gr.Button("Process File")
+                        process_btn = gr.Button("Process File", variant="primary")
                     
                     with gr.Column(scale=1):
                         # Results section
                         file_output = gr.HTML(label="Categorization Results", elem_classes="results-container")
-                
-                process_btn.click(
-                    fn=categorize_products,
-                    inputs=[file_input, gr.State(True), file_top_n, file_confidence],
-                    outputs=file_output
-                )
+        
+        # Connect button click to the categorize function - more explicit binding
+        categorize_btn.click(
+            fn=categorize_products,
+            inputs=[text_input, gr.State(False), top_n, confidence],
+            outputs=text_output
+        )
+        
+        process_btn.click(
+            fn=categorize_products,
+            inputs=[file_input, gr.State(True), file_top_n, file_confidence],
+            outputs=file_output
+        )
+        
+        # Add keyboard shortcut handler for both tabs
+        text_input.change(None, None, None, js="""
+        function() {
+            // Set up the keyboard event listener
+            document.removeEventListener('keydown', cmdEnterHandler);
+            document.addEventListener('keydown', cmdEnterHandler);
+            
+            function cmdEnterHandler(e) {
+                if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+                    // Find the currently visible tab content
+                    const textTab = document.querySelector('.tabitem:nth-child(1)');
+                    const fileTab = document.querySelector('.tabitem:nth-child(2)');
+                    
+                    if (textTab && window.getComputedStyle(textTab).display !== 'none') {
+                        // Text tab is active
+                        const button = textTab.querySelector('button');
+                        if (button) button.click();
+                    } else if (fileTab && window.getComputedStyle(fileTab).display !== 'none') {
+                        // File tab is active  
+                        const button = fileTab.querySelector('button');
+                        if (button) button.click();
+                    }
+                    e.preventDefault();
+                }
+            }
+            
+            return [];
+        }
+        """)
                 
         gr.Markdown("Powered by Voyage AI embeddings • Built with Gradio")
+    
     return demo