compare to chicory-ui

ui.py

@@ -55,27 +55,55 @@ def categorize_products(product_input, is_file=False, top_n=5, confidence_thresh
 
 def create_demo():
     """Create the Gradio interface"""
-    with gr.Blocks() as demo:
+    with gr.Blocks(css="""
+        .results-container { min-height: 400px; }
+        .chicory-result { visibility: visible !important; display: block !important; }
+        .container { gap: 20px; }
+    """) as demo:
         gr.Markdown("# Product Categorization Tool\nAnalyze products and find the most similar ingredients using AI embeddings.")
-
+        
         with gr.Tabs():
             with gr.TabItem("Text Input"):
-                text_input = gr.Textbox(lines=10, placeholder="Enter product names, one per line", label="Product Names")
-                text_output = gr.HTML(label="Categorization Results")
-                gr.Button("Categorize").click(
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        # Input section
+                        text_input = gr.Textbox(lines=10, placeholder="Enter product names, one per line", label="Product Names")
+                        input_controls = gr.Row()
+                        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")
+                    
+                    with gr.Column(scale=1):
+                        # Results section
+                        text_output = gr.HTML(label="Categorization Results", elem_classes="results-container")
+                
+                categorize_btn.click(
                     fn=categorize_products,
-                    inputs=[text_input, gr.State(False), gr.Slider(1, 10, 5), gr.Slider(0.1, 0.9, 0.5)],
+                    inputs=[text_input, gr.State(False), top_n, confidence],
                     outputs=text_output
                 )
-
+            
             with gr.TabItem("File Upload"):
-                file_input = gr.File(label="Upload JSON or text file with products", file_types=[".json", ".txt"])
-                file_output = gr.HTML(label="Categorization Results")
-                gr.Button("Process File").click(
+                with gr.Row():
+                    with gr.Column(scale=1):
+                        # Input section
+                        file_input = gr.File(label="Upload JSON or text file with products", file_types=[".json", ".txt"])
+                        file_controls = gr.Row()
+                        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")
+                    
+                    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), gr.Slider(1, 10, 5), gr.Slider(0.1, 0.9, 0.5)],
+                    inputs=[file_input, gr.State(True), file_top_n, file_confidence],
                     outputs=file_output
                 )
-
+                
         gr.Markdown("Powered by Voyage AI embeddings • Built with Gradio")
     return demo

utils.py

@@ -49,38 +49,33 @@ def parse_product_file(file_path):
     
     return product_names
 
-def format_categories_html(product, categories, chicory_result=None):
-    """Format categories as HTML with color-coded confidence scores and optional Chicory comparison"""
-    html = f"<div style='margin-bottom: 10px;'><b>{product}</b></div>"
+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>"
     
-    # Add Chicory result if available
+    # Add Chicory results with explicit visibility classes
     if chicory_result:
-        chicory_status = chicory_result.get("status", "UNKNOWN")
-        chicory_confidence = chicory_result.get("confidence", 0)
-        chicory_ingredient = chicory_result.get("ingredient", "Unknown")
-        
-        status_color = "#4caf50" if chicory_status == "SUCCESS" else "#f44336"
-        confidence_color = get_confidence_color(chicory_confidence)
-        
-        html += f"""
-        <div style='margin-bottom: 15px; padding: 10px; background-color: #f5f5f5; border-left: 4px solid {status_color}; border-radius: 4px;'>
-            <div style='font-weight: bold; margin-bottom: 5px;'>Chicory Parser Result:</div>
-            <div>Matched Ingredient: <span style='font-weight: 500;'>{chicory_ingredient}</span></div>
-            <div>Confidence: <span style='color: {confidence_color}; font-weight: bold;'>{chicory_confidence:.3f}</span></div>
-            <div>Status: <span style='color: {status_color};'>{chicory_status}</span></div>
-        </div>
-        """
+        html += "<div class='chicory-result' style='visibility: visible; display: block;'>"
+        html += "<h4>Chicory Parser Results:</h4>"
+        html += "<ul>"
+        for ingredient in chicory_result:
+            html += f"<li>{ingredient}</li>"
+        html += "</ul></div>"
     
-    if not categories:
-        html += "<div style='color: #666; font-style: italic;'>No matching categories found.</div>"
-        return html
-    
-    html += "<div style='margin-left: 15px;'>"
-    for i, (category, score) in enumerate(categories, 1):
-        # Color code based on confidence
-        color = get_confidence_color(score)
-            
-        html += f"<div style='margin-bottom: 5px;'>{i}. <span style='font-weight: 500;'>{category}</span> <span style='color: {color}; font-weight: bold;'>({score:.3f})</span></div>"
+    # Add similarities
+    if similarities:
+        html += "<h4>Similar Ingredients:</h4>"
+        html += "<table style='width: 100%; border-collapse: collapse;'>"
+        html += "<tr><th style='text-align: left; padding: 8px;'>Ingredient</th><th style='text-align: right; padding: 8px;'>Confidence</th></tr>"
+        for ingredient, score in similarities:
+            # Format score as percentage with color gradient based on confidence
+            confidence = int(score * 100)
+            color = f"hsl({min(confidence, 100) * 1.2}, 70%, 45%)"
+            html += f"<tr><td style='padding: 8px;'>{ingredient}</td>"
+            html += f"<td style='text-align: right; padding: 8px;'><span style='color: {color}; font-weight: bold;'>{confidence}%</span></td></tr>"
+        html += "</table>"
+    else:
+        html += "<p>No similar ingredients found.</p>"
     
     html += "</div>"
     return html