feat: Update UI components

comparison.py

@@ -6,7 +6,7 @@ from category_matching import hybrid_category_matching
 from similarity import hybrid_ingredient_matching
 
 from api_utils import process_in_parallel, rank_ingredients_openai
-from ui_formatters import format_comparison_html, create_results_container
+from ui_formatters import format_comparison_html
 
 # from utils import SafeProgress # Removed SafeProgress import
 from chicory_api import call_chicory_parser
@@ -391,10 +391,9 @@ def compare_ingredient_methods_ui(product_input, embedding_top_n=20,
                 expanded_description=expanded_text
             ))
     
-    output_html = create_results_container(
-        result_elements, 
-        header_text=header_text
-    )
+    # Join the HTML elements for each product directly
+    # Add the header text manually before joining
+    output_html = f"<p>{header_text}</p>" + "".join(result_elements)
     
     # progress_tracker(1.0, desc="Complete") # Removed progress
     return output_html

ui.py

@@ -42,150 +42,176 @@ def render_ui():
     # --- Ingredient Matching Tab ---
     with tab_ingredient:
         st.header("Match Products to Ingredients")
-        col1, col2 = st.columns(2)
+        col1, col2 = st.columns([1, 2]) # Give more space to results
         with col1:
-            # Handle button click *before* rendering the text area
-            if st.button("Load Examples", key="ingredient_examples"):
-                st.session_state.ingredient_input = load_examples() # Update state for next rerun
+            with st.container(border=True):
+                st.subheader("Input & Options")
+                # Handle button click *before* rendering the text area
+                if st.button("Load Examples", key="ingredient_examples"):
+                    st.session_state.ingredient_input = load_examples() # Update state for next rerun
 
-            # Input section - Use the session state value
-            text_input = st.text_area(
-                "Product Names (one per line)",
-                value=st.session_state.ingredient_input, # Use value from state
-                placeholder="Enter product names, one per line",
-                height=250,
-                key="ingredient_input_widget" # Use a different key for the widget itself if needed, or manage via value
-            )
-            # Update session state if user types manually
-            st.session_state.ingredient_input = text_input
+                # Input section - Use the session state value
+                text_input = st.text_area(
+                    "Product Names (one per line)",
+                    value=st.session_state.ingredient_input, # Use value from state
+                    placeholder="Enter product names, one per line",
+                    height=200, # Reduced height slightly
+                    key="ingredient_input_widget" # Use a different key for the widget itself if needed, or manage via value
+                )
+                # Update session state if user types manually
+                st.session_state.ingredient_input = text_input
 
-            use_expansion = st.checkbox(
-                "Use Description Expansion (AI)",
-                value=False,
-                key="ingredient_expansion",
-                help="Expand product descriptions using AI before matching"
-            )
-            top_n = st.slider("Top N Results", 1, 25, 10, step=1, key="ingredient_top_n")
-            confidence = st.slider("Similarity Threshold", 0.1, 0.9, 0.5, step=0.05, key="ingredient_confidence")
+                st.markdown("---") # Separator
+                st.caption("Matching Options")
+                use_expansion = st.checkbox(
+                    "Use Description Expansion (AI)",
+                    value=False,
+                    key="ingredient_expansion",
+                    help="Expand product descriptions using AI before matching"
+                )
+                top_n = st.slider("Top N Results", 1, 25, 10, step=1, key="ingredient_top_n")
+                confidence = st.slider("Similarity Threshold", 0.1, 0.9, 0.5, step=0.05, key="ingredient_confidence")
 
-            find_ingredients_btn = st.button("Find Similar Ingredients", type="primary", key="ingredient_find")
+                find_ingredients_btn = st.button("Find Similar Ingredients", type="primary", key="ingredient_find", use_container_width=True)
 
         with col2:
-            # Results section
-            st.subheader("Results")
-            results_placeholder_ingredient = st.empty()
-            if find_ingredients_btn:
-                if st.session_state.ingredient_input: # Check state value
-                    results_html = categorize_products(
-                        st.session_state.ingredient_input,
-                        False,
-                        use_expansion,
-                        top_n,
-                        confidence
-                    )
-                    results_placeholder_ingredient.markdown(results_html, unsafe_allow_html=True)
+            with st.container(border=True):
+                # Results section
+                st.subheader("Results")
+                results_placeholder_ingredient = st.container() # Use container for results area
+                if find_ingredients_btn:
+                    if st.session_state.ingredient_input: # Check state value
+                        with st.spinner("Finding similar ingredients..."):
+                            results_html = categorize_products(
+                                st.session_state.ingredient_input,
+                                False,
+                                use_expansion,
+                                top_n,
+                                confidence
+                            )
+                        results_placeholder_ingredient.markdown(results_html, unsafe_allow_html=True)
+                    else:
+                        results_placeholder_ingredient.warning("Please enter product names.")
                 else:
-                    results_placeholder_ingredient.warning("Please enter product names.")
+                    # Keep the placeholder visible even when no button is clicked yet
+                    results_placeholder_ingredient.write("Results will appear here.")
 
     # --- Category Matching Tab ---
     with tab_category:
         st.header("Match Products to Categories")
-        col1, col2 = st.columns(2)
+        col1, col2 = st.columns([1, 2]) # Give more space to results
         with col1:
-            if st.button("Load Examples", key="category_examples"):
-                st.session_state.category_input = load_examples()
+            with st.container(border=True):
+                st.subheader("Input & Options")
+                if st.button("Load Examples", key="category_examples"):
+                    st.session_state.category_input = load_examples()
 
-            category_text_input = st.text_area(
-                "Product Names (one per line)",
-                value=st.session_state.category_input,
-                placeholder="Enter product names, one per line",
-                height=250,
-                key="category_input_widget"
-            )
-            st.session_state.category_input = category_text_input
+                category_text_input = st.text_area(
+                    "Product Names (one per line)",
+                    value=st.session_state.category_input,
+                    placeholder="Enter product names, one per line",
+                    height=200, # Reduced height
+                    key="category_input_widget"
+                )
+                st.session_state.category_input = category_text_input
 
-            category_use_expansion = st.checkbox(
-                "Use Description Expansion (AI)",
-                value=False,
-                key="category_expansion",
-                help="Expand product descriptions using AI before matching"
-            )
-            category_top_n = st.slider("Top N Categories", 1, 10, 5, step=1, key="category_top_n")
-            category_confidence = st.slider("Matching Threshold", 0.1, 0.9, 0.5, step=0.05, key="category_confidence")
+                st.markdown("---") # Separator
+                st.caption("Matching Options")
+                category_use_expansion = st.checkbox(
+                    "Use Description Expansion (AI)",
+                    value=False,
+                    key="category_expansion",
+                    help="Expand product descriptions using AI before matching"
+                )
+                category_top_n = st.slider("Top N Categories", 1, 10, 5, step=1, key="category_top_n")
+                category_confidence = st.slider("Matching Threshold", 0.1, 0.9, 0.5, step=0.05, key="category_confidence")
 
-            match_categories_btn = st.button("Match to Categories", type="primary", key="category_match")
+                match_categories_btn = st.button("Match to Categories", type="primary", key="category_match", use_container_width=True)
 
         with col2:
-            st.subheader("Results")
-            results_placeholder_category = st.empty()
-            if match_categories_btn:
-                if st.session_state.category_input:
-                    results_html = categorize_products_by_category(
-                        st.session_state.category_input,
-                        False,
-                        category_use_expansion,
-                        category_top_n,
-                        category_confidence
-                    )
-                    results_placeholder_category.markdown(results_html, unsafe_allow_html=True)
+            with st.container(border=True):
+                st.subheader("Results")
+                results_placeholder_category = st.container() # Use container
+                if match_categories_btn:
+                    if st.session_state.category_input:
+                        with st.spinner("Matching to categories..."):
+                            results_html = categorize_products_by_category(
+                                st.session_state.category_input,
+                                False,
+                                category_use_expansion,
+                                category_top_n,
+                                category_confidence
+                            )
+                        results_placeholder_category.markdown(results_html, unsafe_allow_html=True)
+                    else:
+                        results_placeholder_category.warning("Please enter product names.")
                 else:
-                    results_placeholder_category.warning("Please enter product names.")
+                    results_placeholder_category.write("Results will appear here.")
 
     # --- Common function for Reranking Tabs ---
     def create_reranking_ui(tab, tab_key_prefix, tab_name, backend_function, default_match="categories"):
         with tab:
             st.header(f"Match using {tab_name}")
-            col1, col2 = st.columns(2)
+            col1, col2 = st.columns([1, 2]) # Give more space to results
             with col1:
-                if st.button("Load Examples", key=f"{tab_key_prefix}_examples"):
-                    st.session_state[f"{tab_key_prefix}_input"] = load_examples()
+                with st.container(border=True):
+                    st.subheader("Input & Options")
+                    if st.button("Load Examples", key=f"{tab_key_prefix}_examples"):
+                        st.session_state[f"{tab_key_prefix}_input"] = load_examples()
 
-                tab_input_value = st.text_area(
-                    "Product Names (one per line)",
-                    value=st.session_state[f"{tab_key_prefix}_input"],
-                    placeholder="Enter product names, one per line",
-                    height=250,
-                    key=f"{tab_key_prefix}_input_widget"
-                )
-                st.session_state[f"{tab_key_prefix}_input"] = tab_input_value # Update state
+                    tab_input_value = st.text_area(
+                        "Product Names (one per line)",
+                        value=st.session_state[f"{tab_key_prefix}_input"],
+                        placeholder="Enter product names, one per line",
+                        height=200, # Reduced height
+                        key=f"{tab_key_prefix}_input_widget"
+                    )
+                    st.session_state[f"{tab_key_prefix}_input"] = tab_input_value # Update state
+
+                    st.markdown("---") # Separator
+                    st.caption("Matching Options")
+                    tab_match_type = st.radio(
+                        "Match Type",
+                        options=["categories", "ingredients"],
+                        index=0 if default_match == "categories" else 1,
+                        key=f"{tab_key_prefix}_match_type",
+                        horizontal=True,
+                        help="Choose whether to match against ingredients or categories"
+                    )
+                    tab_expansion = st.checkbox(
+                        "Use Description Expansion (AI)",
+                        value=False,
+                        key=f"{tab_key_prefix}_expansion",
+                        help="Expand product descriptions using AI before matching"
+                    )
+                    tab_emb_top_n = st.slider("Embedding Top N Results", 1, 50, 20, step=1, key=f"{tab_key_prefix}_emb_top_n", help="How many candidates to fetch initially using embeddings.")
+                    tab_top_n = st.slider("Final Top N Results", 1, 10, 5, step=1, key=f"{tab_key_prefix}_final_top_n", help="How many final results to show after reranking.")
+                    tab_confidence = st.slider("Matching Threshold", 0.1, 0.9, 0.5, step=0.05, key=f"{tab_key_prefix}_confidence")
 
-                tab_expansion = st.checkbox(
-                    "Use Description Expansion (AI)",
-                    value=False,
-                    key=f"{tab_key_prefix}_expansion",
-                    help="Expand product descriptions using AI before matching"
-                )
-                tab_emb_top_n = st.slider("Embedding Top N Results", 1, 50, 20, step=1, key=f"{tab_key_prefix}_emb_top_n")
-                tab_top_n = st.slider("Final Top N Results", 1, 10, 5, step=1, key=f"{tab_key_prefix}_final_top_n")
-                tab_confidence = st.slider("Matching Threshold", 0.1, 0.9, 0.5, step=0.05, key=f"{tab_key_prefix}_confidence")
-                tab_match_type = st.radio(
-                    "Match Type",
-                    options=["categories", "ingredients"],
-                    index=0 if default_match == "categories" else 1,
-                    key=f"{tab_key_prefix}_match_type",
-                    horizontal=True,
-                    help="Choose whether to match against ingredients or categories"
-                )
 
-                tab_match_btn = st.button(f"Match using {tab_name}", type="primary", key=f"{tab_key_prefix}_match")
+                    tab_match_btn = st.button(f"Match using {tab_name}", type="primary", key=f"{tab_key_prefix}_match", use_container_width=True)
 
             with col2:
-                st.subheader("Results")
-                results_placeholder_rerank = st.empty()
-                if tab_match_btn:
-                    if st.session_state[f"{tab_key_prefix}_input"]:
-                        results_html = backend_function(
-                            st.session_state[f"{tab_key_prefix}_input"],
-                            False,
-                            tab_expansion,
-                            tab_emb_top_n,
-                            tab_top_n,
-                            tab_confidence,
-                            tab_match_type
-                        )
-                        results_placeholder_rerank.markdown(results_html, unsafe_allow_html=True)
+                with st.container(border=True):
+                    st.subheader("Results")
+                    results_placeholder_rerank = st.container() # Use container
+                    if tab_match_btn:
+                        if st.session_state[f"{tab_key_prefix}_input"]:
+                            with st.spinner(f"Matching using {tab_name}..."):
+                                results_html = backend_function(
+                                    st.session_state[f"{tab_key_prefix}_input"],
+                                    False,
+                                    tab_expansion,
+                                    tab_emb_top_n,
+                                    tab_top_n,
+                                    tab_confidence,
+                                    tab_match_type
+                                )
+                            results_placeholder_rerank.markdown(results_html, unsafe_allow_html=True)
+                        else:
+                            results_placeholder_rerank.warning("Please enter product names.")
                     else:
-                        results_placeholder_rerank.warning("Please enter product names.")
+                        results_placeholder_rerank.write("Results will appear here.")
 
     # Create the reranking tabs
     create_reranking_ui(tab_voyage, "voyage", "Voyage AI Reranking", categorize_products_with_voyage_reranking, "categories")
@@ -194,68 +220,78 @@ def render_ui():
     # --- Compare Methods Tab ---
     with tab_compare:
         st.header("Compare Matching Methods")
-        col1, col2 = st.columns(2)
+        col1, col2 = st.columns([1, 2]) # Give more space to results
         with col1:
-            if st.button("Load Examples", key="compare_examples"):
-                st.session_state.compare_input = load_examples()
+            with st.container(border=True):
+                st.subheader("Input & Options")
+                if st.button("Load Examples", key="compare_examples"):
+                    st.session_state.compare_input = load_examples()
 
-            compare_product_input_value = st.text_area(
-                "Product Names (one per line)",
-                value=st.session_state.compare_input,
-                placeholder="4 Tbsp sweet pickle relish\nchocolate chips\nfresh parsley",
-                height=200,
-                key="compare_input_widget"
-            )
-            st.session_state.compare_input = compare_product_input_value # Update state
+                compare_product_input_value = st.text_area(
+                    "Product Names (one per line)",
+                    value=st.session_state.compare_input,
+                    placeholder="4 Tbsp sweet pickle relish\nchocolate chips\nfresh parsley",
+                    height=150, # Reduced height
+                    key="compare_input_widget"
+                )
+                st.session_state.compare_input = compare_product_input_value # Update state
 
-            compare_embedding_top_n = st.slider(
-                "Initial embedding candidates",
-                min_value=5, max_value=50, value=20, step=5,
-                key="compare_emb_top_n"
-            )
-            compare_final_top_n = st.slider(
-                "Final results per method",
-                min_value=1, max_value=10, value=3, step=1,
-                key="compare_final_top_n"
-            )
-            compare_confidence_threshold = st.slider(
-                "Confidence threshold",
-                min_value=0.0, max_value=1.0, value=0.5, step=0.05,
-                key="compare_confidence"
-            )
-            compare_match_type = st.radio(
-                "Match Type",
-                options=["categories", "ingredients"],
-                index=0,
-                key="compare_match_type",
-                horizontal=True,
-                help="Choose whether to match against ingredients or categories"
-            )
-            compare_expansion = st.checkbox(
-                "Use Description Expansion (AI)",
-                value=False,
-                key="compare_expansion",
-                help="Expand product descriptions using AI before matching"
-            )
+                st.markdown("---") # Separator
+                st.caption("Comparison Options")
+                compare_match_type = st.radio(
+                    "Match Type",
+                    options=["categories", "ingredients"],
+                    index=0,
+                    key="compare_match_type",
+                    horizontal=True,
+                    help="Choose whether to match against ingredients or categories"
+                )
+                compare_expansion = st.checkbox(
+                    "Use Description Expansion (AI)",
+                    value=False,
+                    key="compare_expansion",
+                    help="Expand product descriptions using AI before matching"
+                )
+                compare_embedding_top_n = st.slider(
+                    "Initial embedding candidates",
+                    min_value=5, max_value=50, value=20, step=5,
+                    key="compare_emb_top_n",
+                    help="How many candidates to fetch initially using embeddings for reranking methods."
+                )
+                compare_final_top_n = st.slider(
+                    "Final results per method",
+                    min_value=1, max_value=10, value=3, step=1,
+                    key="compare_final_top_n",
+                    help="How many final results to show per method."
+                )
+                compare_confidence_threshold = st.slider(
+                    "Confidence threshold",
+                    min_value=0.0, max_value=1.0, value=0.5, step=0.05,
+                    key="compare_confidence"
+                )
 
-            compare_btn = st.button("Compare Methods", type="primary", key="compare_run")
+                compare_btn = st.button("Compare Methods", type="primary", key="compare_run", use_container_width=True)
 
         with col2:
-            st.subheader("Comparison Results")
-            results_placeholder_compare = st.empty()
-            if compare_btn:
-                if st.session_state.compare_input:
-                    results_html = compare_ingredient_methods_ui(
-                        st.session_state.compare_input,
-                        compare_embedding_top_n,
-                        compare_final_top_n,
-                        compare_confidence_threshold,
-                        compare_match_type,
-                        compare_expansion
-                    )
-                    results_placeholder_compare.markdown(results_html, unsafe_allow_html=True)
+            with st.container(border=True):
+                st.subheader("Comparison Results")
+                results_placeholder_compare = st.container() # Use container
+                if compare_btn:
+                    if st.session_state.compare_input:
+                        with st.spinner("Comparing methods..."):
+                            results_html = compare_ingredient_methods_ui(
+                                st.session_state.compare_input,
+                                compare_embedding_top_n,
+                                compare_final_top_n,
+                                compare_confidence_threshold,
+                                compare_match_type,
+                                compare_expansion
+                            )
+                        results_placeholder_compare.markdown(results_html, unsafe_allow_html=True)
+                    else:
+                        results_placeholder_compare.warning("Please enter product names.")
                 else:
-                    results_placeholder_compare.warning("Please enter product names.")
+                    results_placeholder_compare.write("Results will appear here.")
 
     st.markdown("---")
     st.markdown("Powered by Voyage AI embeddings • Built with Streamlit")

ui_core.py

@@ -114,11 +114,8 @@ def load_examples():
     """Load example product names into the text input"""
     return EXAMPLE_PRODUCTS
 
-from ui_formatters import get_formatted_css, THEME, set_theme
-
-def get_css():
-    """Return the CSS for the Gradio interface"""
-    return get_formatted_css()
+# Removed obsolete theme/CSS imports and functions previously here.
+# Theme is now handled by Streamlit via .streamlit/config.toml
 
 def parse_input(input_text, is_file=False) -> Tuple[List[str], Optional[str]]:
     """Parse user input into a list of product names"""

ui_formatters.py

@@ -1,50 +1,6 @@
 from typing import List, Dict, Tuple, Any
 from utils import get_confidence_color, get_confidence_bg_color
 
-# Theme configuration (can be easily switched between light/dark)
-THEME = "dark"  # Options: "light", "dark"
-
-# Theme-specific colors
-THEMES = {
-    "light": {
-        "background": "#ffffff",
-        "card_bg": "#ffffff",
-        "card_border": "#ddd",
-        "header_bg": "#2c3e50",
-        "header_text": "#ffffff",
-        "text_primary": "#333333",
-        "text_secondary": "#555555",
-        "section_bg": "#f8f9fa",
-    },
-    "dark": {
-        "background": "#121212",
-        "card_bg": "#1e1e1e",
-        "card_border": "#333",
-        "header_bg": "#37474f",
-        "header_text": "#ffffff",
-        "text_primary": "#e0e0e0",
-        "text_secondary": "#b0bec5",
-        "section_bg": "#263238",
-    }
-}
-
-# Get current theme colors
-COLORS = THEMES[THEME]
-
-# Base styling constants (adjusted based on theme)
-STYLES = {
-    "card": f"margin-bottom: 20px; border: 1px solid {COLORS['card_border']}; border-radius: 8px; overflow: hidden; background-color: {COLORS['card_bg']};",
-    "header": f"background-color: {COLORS['header_bg']}; padding: 12px 15px; border-bottom: 1px solid {COLORS['card_border']};",
-    "header_text": f"margin: 0; font-size: 18px; color: {COLORS['header_text']};",
-    "flex_container": "display: flex; flex-wrap: wrap;",
-    "method_container": f"flex: 1; width: 100%; padding: 15px; border-bottom: 1px solid {COLORS['card_border']};",
-    "method_title": f"margin-top: 0; color: {COLORS['text_primary']}; padding-bottom: 8px;",
-    "item_list": "list-style-type: none; padding-left: 0;",
-    "item": "margin-bottom: 8px; padding: 8px; border-radius: 4px;",
-    "empty_message": "color: #7f8c8d; font-style: italic;",
-    "info_panel": f"padding: 10px; background-color: {COLORS['section_bg']}; margin-bottom: 10px; border-radius: 4px;"
-}
-
 # Method colors (consistent across themes)
 METHOD_COLORS = {
     "base": "#f39c12",        # Orange
@@ -53,7 +9,8 @@ METHOD_COLORS = {
     "openai": "#2ecc71",      # Green
     "expanded": "#e74c3c",    # Red
     "hybrid": "#1abc9c",      # Turquoise
-    "categories": "#1abc9c"   # Same as hybrid
+    "categories": "#1abc9c",   # Same as hybrid
+    "ingredients": "#f39c12"  # Same as base
 }
 
 # Method display names
@@ -61,515 +18,240 @@ METHOD_NAMES = {
     "base": "Base Embeddings",
     "voyage": "Voyage AI Reranker",
     "chicory": "Chicory Parser",
-    "openai": "OpenAI",
+    "openai": "OpenAI Reranker",
     "expanded": "Expanded Description",
     "hybrid": "Hybrid Matching",
     "categories": "Category Matches",
     "ingredients": "Ingredient Matches"
 }
 
-def format_method_results(method_key, results, color_hex=None):
-    """
-    Format results for a single method section
-    
-    Args:
-        method_key: Key identifying the method (base, voyage, etc.)
-        results: List of (name, score) tuples or format-specific data structure
-        color_hex: Optional color override (otherwise uses METHOD_COLORS)
-        
-    Returns:
-        HTML string for the method section
-    """
-    # Get color from METHOD_COLORS if not provided
-    if color_hex is None:
-        color_hex = METHOD_COLORS.get(method_key, "#777777")
-        
-    # Get method name from METHOD_NAMES or use the key with capitalization
-    method_name = METHOD_NAMES.get(method_key, method_key.replace('_', ' ').title())
-    
-    html = f"<div class='method-results' style='{STYLES['method_container']}'>"
-    html += f"<h4 style='{STYLES['method_title']}; border-bottom: 2px solid {color_hex};'>{method_name}</h4>"
-    
-    if results:
-        html += f"<ul style='{STYLES['item_list']}'>"
-        
-        # Handle different result formats
-        for item in results:
-            # Handle tuple with 2 elements (name, score)
-            if isinstance(item, tuple) and len(item) == 2:
-                name, score = item
-            # Handle tuple with 3 elements (common in category results)
-            elif isinstance(item, tuple) and len(item) == 3:
-                id_val, text, score = item
-                name = f"<strong>{id_val}</strong>: {text}" if text else id_val
-            # Handle dictionary format
-            elif isinstance(item, dict) and "name" in item and "score" in item:
-                name = item["name"]
-                score = item["score"]
-            # Handle dictionary format with different keys
-            elif isinstance(item, dict) and "category" in item and "confidence" in item:
-                name = item["category"]
-                score = item["confidence"]
-            # Handle dictionary format for ingredients
-            elif isinstance(item, dict) and "ingredient" in item and "relevance_score" in item:
-                name = item["ingredient"]
-                score = item["relevance_score"]
-            # Default case - just convert to string
-            else:
-                name = str(item)
-                score = 0.0
-                
-            # Ensure score is a float
-            try:
-                score = float(score)
-            except (ValueError, TypeError):
-                score = 0.0
-                
-            confidence_percent = int(score * 100)
-            confidence_color = get_confidence_color(score)
-            bg_color = get_confidence_bg_color(score)
-            
-            # Improved layout with better contrast and labeled confidence
-            html += f"<li style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; padding: 6px; border-radius: 4px; background-color: rgba(240, 240, 240, 0.4);'>"
-            html += f"<span style='font-weight: 500; flex: 1;'>{name}</span>"
-            html += f"<span style='background-color: {bg_color}; border: 1px solid {confidence_color}; color: #000; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 70px; text-align: center; margin-left: 8px;'>Confidence: {confidence_percent}%</span>"
-            html += "</li>"
-        
-        html += "</ul>"
-    else:
-        html += f"<p style='{STYLES['empty_message']}'>No results found</p>"
-    
-    html += "</div>"
-    return html
+def parse_result_item(item):
+    """Helper function to parse result items into display text and score"""
+    display_text = str(item) # Default
+    score = 0.0
+    # Handle tuple formats
+    if isinstance(item, tuple):
+        if len(item) == 2:
+            match, score = item
+            display_text = str(match)
+        elif len(item) == 3:
+            id_val, text, score = item
+            display_text = f"<strong>{id_val}</strong>: {text}" if text else str(id_val)
+    # Handle dictionary formats
+    elif isinstance(item, dict):
+        if "name" in item and "score" in item:
+            display_text = item["name"]
+            score = item["score"]
+        elif "category" in item and "confidence" in item:
+            display_text = item["category"]
+            score = item["confidence"]
+        elif "ingredient" in item and "relevance_score" in item:
+            display_text = item["ingredient"]
+            score = item["relevance_score"]
+
+    # Ensure score is a float
+    try:
+        score = float(score)
+    except (ValueError, TypeError):
+        score = 0.0
+
+    return display_text, score
+
+def filter_results_by_threshold(results, confidence_threshold=0.0):
+    """Helper function to filter results by confidence threshold"""
+    filtered_results = []
+    for item in results:
+        _, score = parse_result_item(item)
+        if score >= confidence_threshold:
+            filtered_results.append(item)
+    return filtered_results
+
+def format_confidence_badge(score):
+    """Formats the confidence score as a styled span (badge)"""
+    confidence_percent = int(score * 100)
+    confidence_color = get_confidence_color(score)
+    bg_color = get_confidence_bg_color(score)
+    # Determine text color based on background lightness for better contrast
+    # Simple heuristic: if bg_color is light (e.g., yellow, light green), use black text, otherwise use white/light text.
+    # This is approximate. A proper solution would involve calculating luminance.
+    light_bgs = ["#ffffcc", "#ccffcc", "#cceeff"] # Add more light hex codes if needed
+    text_color = "#000000" if bg_color.lower() in light_bgs else "var(--text-color)" # Default to theme text color otherwise
+
+    return (
+        f"<span style='background-color: {bg_color}; border: 1px solid {confidence_color}; color: {text_color}; "
+        f"font-weight: 600; padding: 3px 8px; border-radius: 5px; font-size: 0.9em; "
+        f"min-width: 80px; text-align: center; display: inline-block; margin-left: 10px;'>"
+        f"{confidence_percent}%</span>"
+    )
 
-def format_result_card(title, content, header_bg_color=None):
-    """
-    Create a styled card with a header and content
-    
-    Args:
-        title: Card title
-        content: HTML content for the card body
-        header_bg_color: Optional header background color
-        
-    Returns:
-        HTML string for the card
-    """
-    if header_bg_color is None:
-        header_bg_color = COLORS['header_bg']  # Default header background color
-    
-    html = f"<div class='result-card' style='{STYLES['card']}'>"
-    html += f"<div class='card-header' style='{STYLES['header']}; background-color: {header_bg_color};'>"
-    html += f"<h3 style='{STYLES['header_text']}'>{title}</h3>"
-    html += "</div>"
-    html += f"<div class='card-content'>{content}</div>"
-    html += "</div>"
+def format_result_list_html(results, confidence_threshold=0.0):
+    """Formats a list of results (matches) into an HTML list."""
+    filtered_results = filter_results_by_threshold(results, confidence_threshold)
+
+    if not filtered_results:
+        return "<p style='color: grey; font-style: italic; margin: 10px 0;'>No matches found above confidence threshold.</p>"
+
+    html = "<ul style='list-style-type: none; padding-left: 0; margin-top: 10px;'>"
+    for item in filtered_results:
+        display_text, score = parse_result_item(item)
+        badge = format_confidence_badge(score)
+        # Reintroduce subtle background and border using theme variables
+        html += (
+            f"<li style='display: flex; justify-content: space-between; align-items: center; "
+            f"margin-bottom: 8px; padding: 8px; border-radius: 4px; "
+            f"background-color: var(--secondary-background-color); " # Use secondary background
+            f"border: 1px solid rgba(128, 128, 128, 0.2);'>" # Subtle grey border
+            f"<span style='flex-grow: 1; margin-right: 10px; word-wrap: break-word; color: var(--text-color);'>{display_text}</span>" # Ensure text uses theme color
+            f"{badge}"
+            f"</li>"
+        )
+    html += "</ul>"
     return html
 
-def format_comparison_html(product, method_results, expanded_description=""):
-    """
-    Format the comparison results as HTML
-    
-    Args:
-        product: Product name
-        method_results: Dictionary with results from different methods
-        expanded_description: Optional expanded product description
-        
-    Returns:
-        HTML string
-    """
-    # Create the methods comparison content with column direction
-    methods_html = f"<div class='methods-comparison' style='{STYLES['flex_container']}; flex-direction: column;'>"
-    
-    # Add expanded description if available
+def format_result_card(title, content_html):
+    """Creates a basic card structure for a single product result."""
+    # Use secondary background for the card, slightly stronger border
+    return (
+        f"<div style='margin-bottom: 20px; border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 8px; padding: 15px; background-color: var(--secondary-background-color);'>"
+        f"<h3 style='margin-top: 0; margin-bottom: 15px; font-size: 1.1em; border-bottom: 1px solid rgba(128, 128, 128, 0.2); padding-bottom: 10px; color: var(--text-color);'>{title}</h3>" # Ensure header uses theme text color
+        f"{content_html}"
+        f"</div>"
+    )
+
+def format_info_panel(title, text):
+    """Formats an informational panel (e.g., for expanded description)."""
+    # Use a slightly different background, maybe derived from primary color with transparency
+    # Or stick to secondary background for consistency
+    return (
+        f"<div style='border-left: 4px solid var(--primary-color); padding: 10px 15px; margin-bottom: 15px; border-radius: 4px; background-color: var(--secondary-background-color);'>"
+        f"<h4 style='margin-top: 0; margin-bottom: 8px; font-size: 1em; color: var(--text-color);'>{title}</h4>" # Use theme text color
+        f"<p style='margin-bottom: 0; font-size: 0.95em; color: var(--text-color);'>{text}</p>" # Use theme text color
+        f"</div>"
+    )
+
+def format_method_results_section(method_key, results, confidence_threshold=0.0):
+    """Formats results for a specific method within a comparison."""
+    method_name = METHOD_NAMES.get(method_key, method_key.replace('_', ' ').title())
+    color_hex = METHOD_COLORS.get(method_key, "var(--text-color)") # Fallback to theme text color
+    results_html = format_result_list_html(results, confidence_threshold)
+
+    # Keep the method-specific color for the header border
+    return (
+        f"<div style='margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed rgba(128, 128, 128, 0.2);'>" # Subtle dashed border between methods
+        f"<h4 style='margin-top: 0; margin-bottom: 10px; color: {color_hex}; border-bottom: 2px solid {color_hex}; padding-bottom: 5px; display: inline-block;'>{method_name}</h4>"
+        f"{results_html}"
+        f"</div>"
+    )
+
+# --- Main Formatting Functions Called by UI Tabs ---
+
+def format_comparison_html(product, method_results, expanded_description="", confidence_threshold=0.5):
+    """Formats the comparison results for multiple methods for one product."""
+    content_html = ""
     if expanded_description:
-        methods_html += f"<div style='{STYLES['info_panel']}'>"
-        methods_html += "<h4 style='margin-top: 0; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 8px;'>Expanded Description</h4>"
-        methods_html += f"<p style='margin-bottom: 8px;'>{expanded_description}</p>"
-        methods_html += "</div>"
-    
-    # Add results for each method
-    for method_key in ["base", "voyage", "chicory", "openai"]:
-        methods_html += format_method_results(
-            method_key=method_key,
-            results=method_results.get(method_key, [])
-        )
-    
-    methods_html += "</div>"
-    
-    # Create the full card with the methods content
-    return format_result_card(title=product, content=methods_html)
+        content_html += format_info_panel("Expanded Description", expanded_description)
+
+    method_order = ["base", "voyage", "chicory", "openai"]
+    sections_html = []
+    for method_key in method_order:
+         if method_key in method_results and method_results[method_key]:
+            sections_html.append(format_method_results_section(
+                method_key=method_key,
+                results=method_results.get(method_key, []),
+                confidence_threshold=confidence_threshold
+            ))
+
+    # Join sections, remove last border if sections exist
+    if sections_html:
+        # Remove the border-bottom style from the last section's div
+        last_section = sections_html[-1]
+        if "border-bottom: 1px dashed rgba(128, 128, 128, 0.2);" in last_section:
+             sections_html[-1] = last_section.replace("border-bottom: 1px dashed rgba(128, 128, 128, 0.2);", "")
 
-def format_reranking_results_html(results, match_type="ingredients", show_scores=True, include_explanation=False, 
+    content_html += "".join(sections_html)
+
+    return format_result_card(title=product, content_html=content_html)
+
+
+def format_reranking_results_html(results, match_type="ingredients", show_scores=True, include_explanation=False,
                                   method="voyage", confidence_threshold=0.0):
-    """
-    Unified formatter that works for both Voyage and OpenAI results, using the individual elements approach
-    with the original visual style.
-    
-    Args:
-        results: List of result dictionaries
-        match_type: Either "ingredients" or "categories"
-        show_scores: Whether to show confidence scores
-        include_explanation: Whether to include expanded descriptions
-        method: Method used for ranking ("voyage" or "openai")
-        confidence_threshold: Threshold for filtering individual items (default 0.0 shows all)
-        
-    Returns:
-        HTML string for displaying results
-    """
-    if not results or len(results) == 0:
-        return f"No {match_type.lower()} matches found."
-    
-    # Method-specific styling
-    method_color = METHOD_COLORS.get(method, "#777777") 
-    method_name = METHOD_NAMES.get(method, method.capitalize())
-    
-    # Create a header text
-    header_text = f"Matched {len(results)} products to {match_type} using {method_name}"
-    
-    # Generate individual HTML elements for each result - using the old style approach
+    """Formats results from reranking methods (Voyage, OpenAI)."""
+    if not results:
+        return f"<p style='color: grey; font-style: italic;'>No {match_type.lower()} matches found.</p>"
+
     html_elements = []
-    
     for result in results:
-        product_name = result.get("product_name", "")
+        product_name = result.get("product_name", "Unknown Product")
         matching_items = result.get("matching_items", [])
         item_scores = result.get("item_scores", [])
         explanation = result.get("explanation", "") if include_explanation else ""
-        
-        # Convert matching items into tuples with scores for format_expanded_results_html
-        formatted_matches = []
-        
-        # Make sure we have scores for all items
+
         if len(item_scores) != len(matching_items):
-            # If scores are missing, use overall confidence for all
-            result_confidence = result.get("confidence", 0.5)
-            item_scores = [result_confidence] * len(matching_items)
-        
+            item_scores = [result.get("confidence", 0.0)] * len(matching_items)
+
+        formatted_matches = []
         for i, item in enumerate(matching_items):
-            score = item_scores[i]
-            if ":" in item and match_type == "categories":
-                # Handle category format "id: description"
-                parts = item.split(":", 1)
-                cat_id = parts[0].strip()
-                cat_text = parts[1].strip() if len(parts) > 1 else ""
-                formatted_matches.append((cat_id, cat_text, score))
+            if ":" in str(item) and match_type == "categories":
+                parts = str(item).split(":", 1)
+                id_val = parts[0].strip()
+                text = parts[1].strip() if len(parts) > 1 else ""
+                formatted_matches.append((id_val, text, item_scores[i]))
             else:
-                # Handle ingredient format (just name and score)
-                formatted_matches.append((item, score))
-        
-        # Only skip if there are no matches at all
-        if not formatted_matches:
-            continue
-            
-        # Use the older style formatter with threshold
-        if include_explanation:
-            # Use expanded_results_html for the old style with expanded descriptions
-            element_html = format_expanded_results_html(
-                product=product_name,
-                results=formatted_matches,
-                expanded_description=explanation,
-                match_type=match_type,
-                confidence_threshold=confidence_threshold
-            )
-        else:
-            # Use hybrid_results_html when no expanded description is available
-            summary_text = f"{match_type.capitalize()} matches using {method_name}."
-            element_html = format_hybrid_results_html(
-                product=product_name,
-                results=formatted_matches,
-                summary=summary_text,
-                expanded_description="",
-                confidence_threshold=confidence_threshold
-            )
-        
-        html_elements.append(element_html)
-    
-    # Combine all elements into a container
-    return create_results_container(html_elements, header_text=header_text)
-
-def create_results_container(html_elements, header_text=None):
-    """
-    Create a container for multiple results
-    
-    Args:
-        html_elements: List of HTML strings to include
-        header_text: Optional header text
-        
-    Returns:
-        HTML string for the container
-    """
-    container = "<div class='results-container' style='font-family: Arial, sans-serif;'>"
-    
-    if header_text:
-        container += f"<p style='color: {COLORS['text_secondary']};'>{header_text}</p>"
-    
-    container += ''.join(html_elements)
-    container += "</div>"
-    
-    return container
+                formatted_matches.append((str(item), item_scores[i]))
 
-def filter_results_by_threshold(results, confidence_threshold=0.0):
-    """Helper function to filter results by confidence threshold"""
-    filtered_results = []
-    for item in results:
-        # Handle both 2-value (match, score) and 3-value (id, text, score) tuples
-        score = item[-1] if isinstance(item, tuple) and len(item) >= 2 else 0.0
-        # Only include results above the threshold
-        if score >= confidence_threshold:
-            filtered_results.append(item)
-    return filtered_results
+        content_html = ""
+        if explanation:
+            content_html += format_info_panel("Expanded Description", explanation)
 
-def parse_result_item(item):
-    """Helper function to parse result items into display text and score"""
-    # Handle both 2-value (match, score) and 3-value (id, text, score) tuples
-    if isinstance(item, tuple):
-        if len(item) == 2:
-            match, score = item
-            display_text = match
-        elif len(item) == 3:
-            cat_id, cat_text, score = item
-            display_text = f"{cat_id}: {cat_text}" if cat_text else cat_id
-        else:
-            display_text = str(item)
-            score = 0.0
-    else:
-        display_text = str(item)
-        score = 0.0
-    return display_text, score
+        list_html = format_result_list_html(formatted_matches, confidence_threshold)
+        content_html += list_html
+
+        # Only add card if there's content to show (explanation or non-empty list html)
+        if explanation or "<li" in list_html: # Check if list contains items
+             html_elements.append(format_result_card(title=product_name, content_html=content_html))
+
+    return "".join(html_elements)
+
+
+def format_categories_html(product, categories, chicory_result=None, explanation="", match_type="categories", confidence_threshold=0.0):
+    """Formats category or ingredient matching results (non-reranked)."""
+    content_html = ""
+    has_content = False
 
-def format_expanded_results_html(product, results, expanded_description, match_type="ingredients", confidence_threshold=0.0):
-    """Format results using expanded descriptions"""
-    content = ""
-    
-    # Add expanded description section
-    content += f"<div style='{STYLES['info_panel']}'>"
-    content += "<h4 style='margin-top: 0; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 8px;'>Expanded Description</h4>"
-    content += f"<p style='margin-bottom: 8px;'>{expanded_description}</p>"
-    content += "</div>"
-    
-    # Format the results section - create custom section
-    color_hex = METHOD_COLORS.get(match_type, "#1abc9c")
-    
-    # Add results section with custom title
-    content += f"<div class='method-results' style='margin-top: 15px; border-left: 3px solid {color_hex}; padding-left: 15px;'>"
-    title_text = "Ingredients" if match_type == "ingredients" else "Categories"
-    content += f"<h4 style='margin-top: 0; color: {color_hex};'>{title_text}</h4>"
-    
-    # Filter results by confidence threshold
-    filtered_results = filter_results_by_threshold(results, confidence_threshold)
-    
-    if filtered_results:
-        content += "<ul style='margin-top: 5px; padding-left: 20px;'>"
-        for item in filtered_results:
-            display_text, score = parse_result_item(item)
-            confidence_percent = int(score * 100)
-            # Improved styling for confidence percentage - using black text for better contrast
-            confidence_color = get_confidence_color(score)
-            bg_color = get_confidence_bg_color(score)
-            content += f"<li style='display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;'>"
-            content += f"<span style='font-weight: 500; flex: 1;'>{display_text}</span>"
-            content += f"<span style='background-color: {bg_color}; border: 1px solid {confidence_color}; color: #000; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 70px; text-align: center; margin-left: 8px;'>Confidence: {confidence_percent}%</span>"
-            content += "</li>"
-        content += "</ul>"
-    else:
-        content += "<p style='color: #777; font-style: italic; margin: 5px 0;'>No matches found above confidence threshold.</p>"
-        
-    content += "</div>"
-    
-    return format_result_card(title=product, content=content)
-
-def format_hybrid_results_html(product, results, summary, expanded_description="", confidence_threshold=0.0):
-    """
-    Format results for hybrid matching
-    
-    Args:
-        product: Product name
-        results: List of result tuples (name, score) or (id, name, score)
-        summary: Summary text to display
-        expanded_description: Optional expanded description
-        confidence_threshold: Threshold for filtering individual items
-        
-    Returns:
-        HTML string for displaying results
-    """
-    content = ""
-    
-    # Add summary text
-    if summary:
-        content += f"<div style='{STYLES['info_panel']}'>"
-        content += f"<p style='margin: 0;'>{summary}</p>"
-        content += "</div>"
-    
-    # Add expanded description if provided
-    if expanded_description:
-        content += f"<div style='{STYLES['info_panel']}'>"
-        content += "<h4 style='margin-top: 0; margin-bottom: 8px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 5px;'>Expanded Description</h4>"
-        content += f"<p style='margin: 0;'>{expanded_description}</p>"
-        content += "</div>"
-    
-    # Filter results by confidence threshold
-    filtered_results = filter_results_by_threshold(results, confidence_threshold)
-    
-    # Format the results
-    if filtered_results:
-        content += "<div style='padding: 10px;'>"
-        content += "<table style='width: 100%; border-collapse: collapse;'>"
-        content += "<thead><tr>"
-        content += "<th style='text-align: left; padding: 8px; border-bottom: 2px solid #ddd;'>Match</th>"
-        content += "<th style='text-align: right; padding: 8px; border-bottom: 2px solid #ddd; width: 100px;'>Confidence</th>"
-        content += "</tr></thead>"
-        content += "<tbody>"
-        
-        for item in filtered_results:
-            display_text, score = parse_result_item(item)
-            confidence_percent = int(score * 100)
-            confidence_color = get_confidence_color(score)
-            bg_color = get_confidence_bg_color(score)
-            
-            content += "<tr>"
-            content += f"<td style='text-align: left; padding: 8px; border-bottom: 1px solid #ddd;'>{display_text}</td>"
-            content += f"<td style='text-align: center; padding: 8px; border-bottom: 1px solid #ddd;'>"
-            content += f"<span style='background-color: {bg_color}; border: 1px solid {confidence_color}; color: #000;"
-            content += f"font-weight: 600; padding: 2px 6px; border-radius: 4px; display: inline-block; width: 70px;'>"
-            content += f"{confidence_percent}%</span></td>"
-            content += "</tr>"
-            
-        content += "</tbody></table>"
-        content += "</div>"
-    else:
-        content += "<p style='color: #777; font-style: italic; padding: 10px; margin: 0;'>No matches found above confidence threshold.</p>"
-    
-    return format_result_card(title=product, content=content)
-
-def get_formatted_css():
-    """
-    Generate CSS for the UI based on current theme
-    
-    Returns:
-        CSS string for styling the UI
-    """
-    return f"""
-        .gradio-container .prose {{
-            max-width: 100%;
-        }}
-        #results-container {{
-            height: 600px !important;
-            overflow-y: auto !important;
-            overflow-x: hidden !important;
-            padding: 15px !important;
-            border: 1px solid {COLORS['card_border']} !important;
-            background-color: {COLORS['background']} !important; 
-            color: {COLORS['text_primary']} !important;
-        }}
-        /* Style for method columns */
-        .methods-comparison {{
-            display: flex;
-            flex-wrap: wrap;
-        }}
-        .method-results {{
-            flex: 1;
-            min-width: 200px;
-            padding: 15px;
-            border-right: 1px solid {COLORS['card_border']};
-        }}
-        /* Make the product header more visible */
-        .product-header {{
-            background-color: {COLORS['header_bg']} !important;
-            padding: 12px 15px !important;
-            border-bottom: 1px solid {COLORS['card_border']} !important;
-        }}
-        .product-header h3 {{
-            margin: 0 !important;
-            font-size: 18px !important;
-            color: {COLORS['header_text']} !important;
-            background-color: transparent !important;
-        }}
-        /* Remove all nested scrollbars */
-        #results-container * {{
-            overflow: visible !important;
-            height: auto !important;
-            max-height: none !important;
-        }}
-    """
-
-def set_theme(theme_name):
-    """
-    Update the global theme setting
-    
-    Args:
-        theme_name: Theme name to set ("light" or "dark")
-        
-    Returns:
-        Boolean indicating success
-    """
-    global THEME, COLORS, STYLES
-    if theme_name in THEMES:
-        THEME = theme_name
-        COLORS = THEMES[THEME]
-        # Update styles with new colors
-        STYLES = {
-            "card": f"margin-bottom: 20px; border: 1px solid {COLORS['card_border']}; border-radius: 8px; overflow: hidden; background-color: {COLORS['card_bg']};",
-            "header": f"background-color: {COLORS['header_bg']}; padding: 12px 15px; border-bottom: 1px solid {COLORS['card_border']};",
-            "header_text": f"margin: 0; font-size: 18px; color: {COLORS['header_text']};",
-            "flex_container": "display: flex; flex-wrap: wrap;",
-            "method_container": f"flex: 1; width: 100%; padding: 15px; border-bottom: 1px solid {COLORS['card_border']};",
-            "method_title": f"margin-top: 0; color: {COLORS['text_primary']}; padding-bottom: 8px;",
-            "item_list": "list-style-type: none; padding-left: 0;",
-            "item": "margin-bottom: 8px; padding: 8px; border-radius: 4px;",
-            "empty_message": "color: #7f8c8d; font-style: italic;",
-            "info_panel": f"padding: 10px; background-color: {COLORS['section_bg']}; margin-bottom: 10px; border-radius: 4px;"
-        }
-        return True
-    return False
-
-def format_categories_html(product, categories, chicory_result=None, header_color=None, explanation="", match_type="categories"):
-    """
-    Format category matching results as HTML
-    
-    Args:
-        product: Product name
-        categories: List of (category, score) tuples
-        chicory_result: Optional chicory parser result for the product
-        header_color: Optional header background color
-        explanation: Optional expanded description text
-        match_type: Either "ingredients" or "categories"
-        
-    Returns:
-        HTML string
-    """
-    content = ""
-    
-    # Add expanded description if available
     if explanation:
-        content += f"<div style='{STYLES['info_panel']}'>"
-        content += "<h4 style='margin-top: 0; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 8px;'>Expanded Description</h4>"
-        content += f"<p style='margin-bottom: 8px;'>{explanation}</p>"
-        content += "</div>"
-    
-    # Add Chicory results if available
-    if chicory_result:
-        content += f"<div style='{STYLES['info_panel']}'>"
-        content += "<h4 style='margin-top: 0; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 8px;'>Chicory Parser Results</h4>"
-        
+        content_html += format_info_panel("Expanded Description", explanation)
+        has_content = True
+
+    # Add Chicory results if available and applicable
+    if chicory_result and match_type == "ingredients":
+        chicory_title = METHOD_NAMES.get("chicory", "Chicory Parser")
+        content_html += f"<h4 style='margin-top: 15px; margin-bottom: 10px; color: {METHOD_COLORS.get('chicory', '#9b59b6')};'>{chicory_title}</h4>"
         if isinstance(chicory_result, dict):
             ingredient = chicory_result.get("ingredient", "Not found")
-            confidence = chicory_result.get("confidence", 0)
-            confidence_percent = int(confidence * 100)
-            
-            content += f"<div style='display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 4px;'>"
-            content += f"<span style='font-weight: bold;'>{ingredient}</span>"
-            content += f"<span style='background-color: {get_confidence_bg_color(confidence)}; border: 1px solid {get_confidence_color(confidence)}; color: #000; font-weight: 600; padding: 2px 6px; border-radius: 4px; min-width: 70px; text-align: center;'>Confidence: {confidence_percent}%</span>"
-            content += "</div>"
+            score = chicory_result.get("confidence", 0)
+            badge = format_confidence_badge(score)
+            content_html += (
+                f"<div style='display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 4px; margin-bottom: 15px; background-color: var(--secondary-background-color); border: 1px solid rgba(128, 128, 128, 0.2);'>" # Use theme bg/border
+                f"<span style='flex-grow: 1; margin-right: 10px; color: var(--text-color);'>{ingredient}</span>" # Use theme text color
+                f"{badge}"
+                f"</div>"
+            )
+            has_content = True
         else:
-            content += f"<p style='{STYLES['empty_message']}'>No Chicory results available</p>"
-            
-        content += "</div>"
-    
-    # Add the category results
-    content += format_method_results(
-        method_key=match_type, 
-        results=categories,
-        color_hex=header_color or METHOD_COLORS.get(match_type, "#1abc9c")
-    )
-    
-    return format_result_card(title=product, content=content)
+             content_html += "<p style='color: grey; font-style: italic;'>No Chicory results available.</p>"
+
 
+    # Add the main category/ingredient results
+    match_title = METHOD_NAMES.get(match_type, match_type.capitalize())
+    color_hex = METHOD_COLORS.get(match_type, "var(--text-color)") # Fallback to theme text color
+    content_html += f"<h4 style='margin-top: 15px; margin-bottom: 10px; color: {color_hex};'>{match_title}</h4>"
+    list_html = format_result_list_html(categories, confidence_threshold)
+    content_html += list_html
+    if "<li" in list_html: # Check if list contains items
+        has_content = True
+
+    # Only return card if there's content to show
+    if has_content:
+        return format_result_card(title=product, content_html=content_html)
+    else:
+        return "" # Return empty string if nothing to show

ui_hybrid_matching.py

@@ -3,7 +3,7 @@
 from category_matching import load_categories, hybrid_category_matching
 from similarity import hybrid_ingredient_matching, compute_similarities
 from ui_core import embeddings, parse_input
-from ui_formatters import format_hybrid_results_html, create_results_container, format_reranking_results_html
+from ui_formatters import format_reranking_results_html
 from openai_expansion import expand_product_descriptions
 from api_utils import get_voyage_client
 

ui_ingredient_matching.py

@@ -4,7 +4,7 @@ from embeddings import create_product_embeddings
 from similarity import compute_similarities
 from chicory_api import call_chicory_parser
 from ui_core import embeddings, parse_input
-from ui_formatters import format_categories_html, create_results_container
+from ui_formatters import format_categories_html
 from openai_expansion import expand_product_descriptions
 
 def categorize_products(product_input, is_file=False, use_expansion=False, top_n=10, confidence_threshold=0.5):
@@ -82,5 +82,5 @@ def categorize_products(product_input, is_file=False, use_expansion=False, top_n
         output_html = "<div style='color: #d32f2f; font-weight: bold; padding: 20px;'>No results found. Please check your input or try different products.</div>"
 
     progress_tracker(1.0, desc="Done!")
-    return create_results_container(output_html)
+    return output_html # Return the generated HTML directly
 

utils.py

@@ -152,5 +152,4 @@ def get_confidence_text_color(score):
 
 # Remove any UI formatting-specific functions that now exist in ui_formatters.py:
 # - format_categories_html
-# - create_results_container
 # - Any other UI formatting functions