compare to chicory-ui

ui.py

@@ -68,31 +68,50 @@ def create_demo():
             min-height: 600px !important; 
             overflow-y: auto !important;
             padding: 15px !important;
-            border: 1px solid #ddd !important;
-            background-color: #333 !important; /* Dark background for better contrast with white text */
-            color: #fff !important; /* White text for visibility */
+            border: 1px solid #333 !important;
+            background-color: #121212 !important; 
+            color: #fff !important;
         }
-        table tr:hover {
-            background-color: #444 !important; /* Slightly lighter hover effect */
+        .product-result {
+            background-color: #1e1e1e !important;
+            border-radius: 8px !important;
+            padding: 15px !important;
+            margin-bottom: 20px !important;
         }
-        .container { gap: 30px !important; }
         .product-result h3 {
-            margin-top: 15px !important;
-            border-bottom: 2px solid #555 !important; /* Adjusted for dark background */
-            padding-bottom: 5px !important;
+            margin-top: 5px !important;
+            border-bottom: 2px solid #333 !important;
+            padding-bottom: 8px !important;
+            color: #e0e0e0 !important;
+        }
+        .result-section {
+            margin: 15px 0 !important;
+            border-radius: 8px !important;
+        }
+        .result-section h4 {
+            color: #e0e0e0 !important;
+            font-size: 16px !important;
+            font-weight: 500 !important;
+        }
+        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') {
-            // Check if we're in the text input tab
-            const activeTextarea = document.querySelector('.tab-nav button[aria-selected="true"]').textContent.includes("Text Input") ? 
-                document.querySelector('.tab-panel[style*="display: block"] textarea') : null;
+            // 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;
             
-            if (activeTextarea) {
-                // Find and click the corresponding button
-                const categorizeBtn = document.querySelector('.tab-panel[style*="display: block"] button:contains("Categorize")');
-                if (categorizeBtn) categorizeBtn.click();
+            // Find the submit button in the active tab
+            const submitButton = activeTabContent.querySelector('button');
+            if (submitButton) {
+                submitButton.click();
                 e.preventDefault();
             }
         }

utils.py

@@ -51,47 +51,40 @@ def parse_product_file(file_path):
 
 def format_categories_html(product, similarities, chicory_result=None):
     """Format the similarities as HTML with bootstrap styling"""
-    html = f"<div class='product-result'><h3>{product}</h3>"
+    html = f"<div class='product-result'><h3 style='color: #fff;'>{product}</h3>"
     
-    # Add Chicory results with simplified styling similar to embedding results
-    if (chicory_result):
-        html += "<h4 style='margin-top: 15px;'>Chicory Parser Results:</h4>"
-        html += "<div style='overflow-x: auto;'>"
-        html += "<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>"
-        html += "<tr><th style='text-align: left; padding: 8px; border-bottom: 2px solid #ddd;'>Ingredient</th>"
-        html += "<th style='text-align: right; padding: 8px; border-bottom: 2px solid #ddd;'>Confidence</th></tr>"
+    # Add Chicory results with enhanced styling
+    if chicory_result:
+        html += "<div class='result-section chicory-section' style='background-color: #1a3c6e; color: white; padding: 15px; border-radius: 5px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'>"
+        html += "<h4 style='margin-top: 0; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 8px;'>Chicory Parser Results</h4>"
         
         if isinstance(chicory_result, dict):
-            # Simplified display - just ingredient and confidence
+            # Extract important fields with better formatting
             ingredient = chicory_result.get("ingredient", "Not found")
             confidence = chicory_result.get("confidence", 0)
             confidence_pct = int(confidence * 100) if confidence else 0
-            color = get_confidence_color(confidence)
             
-            html += f"<tr><td style='padding: 8px; border-bottom: 1px solid #eee;'>{ingredient}</td>"
-            html += f"<td style='text-align: right; padding: 8px; border-bottom: 1px solid #eee;'>"
-            html += f"<span style='color: {color}; font-weight: bold;'>{confidence_pct}%</span></td></tr>"
-        
-        html += "</table></div>"
-    else:
-        html += "<p style='color: #757575; font-style: italic; margin: 10px 0;'>No Chicory parser results available.</p>"
+            html += f"<div style='display: flex; justify-content: space-between; align-items: center; background-color: rgba(255,255,255,0.1); padding: 10px; border-radius: 4px;'>"
+            html += f"<span style='font-size: 1.1em;'>{ingredient}</span>"
+            html += f"<span style='background-color: {get_confidence_bg_color(confidence)}; color: {get_confidence_text_color(confidence)}; padding: 4px 8px; border-radius: 12px; font-weight: bold;'>{confidence_pct}%</span>"
+            html += "</div>"
+        html += "</div>"
     
-    # Add similarities with enhanced styling
+    # Add embedding similarities with matching styling
     if similarities:
-        html += "<h4 style='margin-top: 15px;'>Similar Ingredients (Based on Embedding Similarity):</h4>"
-        html += "<div style='overflow-x: auto;'>"
-        html += "<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;'>"
-        html += "<tr><th style='text-align: left; padding: 8px; border-bottom: 2px solid #ddd;'>Ingredient</th>"
-        html += "<th style='text-align: right; padding: 8px; border-bottom: 2px solid #ddd;'>Embedding Similarity</th></tr>"
-        for ingredient, score in similarities:
-            confidence = int(score * 100)
-            color = get_confidence_color(score)
-            html += f"<tr><td style='padding: 8px; border-bottom: 1px solid #eee;'>{ingredient}</td>"
-            html += f"<td style='text-align: right; padding: 8px; border-bottom: 1px solid #eee;'>"
-            html += f"<span style='color: {color}; font-weight: bold;'>{confidence}%</span></td></tr>"
-        html += "</table></div>"
+        html += "<div class='result-section embedding-section' style='background-color: #263238; color: white; padding: 15px; border-radius: 5px; margin: 15px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'>"
+        html += "<h4 style='margin-top: 0; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 8px;'>Embedding Similarity</h4>"
+        
+        for i, (ingredient, score) in enumerate(similarities):
+            confidence_pct = int(score * 100)
+            html += f"<div style='display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 4px; margin: 4px 0; background-color: rgba(255,255,255,{0.07 + (i * 0.01)});'>"
+            html += f"<span>{ingredient}</span>"
+            html += f"<span style='background-color: {get_confidence_bg_color(score)}; color: {get_confidence_text_color(score)}; padding: 4px 8px; border-radius: 12px; font-weight: bold;'>{confidence_pct}%</span>"
+            html += "</div>"
+        
+        html += "</div>"
     else:
-        html += "<p style='color: #757575; font-style: italic;'>No similar ingredients found above the confidence threshold.</p>"
+        html += "<p style='color: #b0bec5; font-style: italic; padding: 10px; background-color: rgba(255,255,255,0.05); border-radius: 4px; margin: 10px 0;'>No similar ingredients found above the confidence threshold.</p>"
     
     html += "</div>"
     return html
@@ -105,4 +98,22 @@ def get_confidence_color(score):
     elif score >= 0.5:
         return "#8bc34a"  # Light green
     else:
-        return "#9e9e9e"  # Gray
+        return "#9e9e9e"  # Gray
+
+def get_confidence_bg_color(score):
+    """Get background color for confidence badge based on score"""
+    if score >= 0.8:
+        return "#2e7d32"  # Dark green
+    elif score >= 0.65:
+        return "#558b2f"  # Medium green
+    elif score >= 0.5:
+        return "#9e9d24"  # Light green/yellow
+    else:
+        return "#757575"  # Gray
+
+def get_confidence_text_color(score):
+    """Get text color that's readable on the confidence background"""
+    if score >= 0.5:
+        return "#ffffff"  # White text on dark backgrounds
+    else:
+        return "#f5f5f5"  # Light gray on gray background