From fa85c39f42fc371c6fafd0356476557be5834813 Mon Sep 17 00:00:00 2001
From: Renee Huang <renee.huang@snowflake.com>
Date: Wed, 22 Oct 2025 13:35:44 -0700
Subject: [PATCH] a vibe-coded UI mock

---
 samples/aisql_eval_ui/.gitignore           |   21 +
 samples/aisql_eval_ui/CHANGES.md           |  161 +++
 samples/aisql_eval_ui/README.md            |  217 ++++
 samples/aisql_eval_ui/app.py               |  501 ++++++++
 samples/aisql_eval_ui/requirements.txt     |    3 +
 samples/aisql_eval_ui/start.sh             |   27 +
 samples/aisql_eval_ui/templates/index.html | 1326 ++++++++++++++++++++
 7 files changed, 2256 insertions(+)
 create mode 100644 samples/aisql_eval_ui/.gitignore
 create mode 100644 samples/aisql_eval_ui/CHANGES.md
 create mode 100644 samples/aisql_eval_ui/README.md
 create mode 100644 samples/aisql_eval_ui/app.py
 create mode 100644 samples/aisql_eval_ui/requirements.txt
 create mode 100755 samples/aisql_eval_ui/start.sh
 create mode 100644 samples/aisql_eval_ui/templates/index.html

diff --git a/samples/aisql_eval_ui/.gitignore b/samples/aisql_eval_ui/.gitignore
new file mode 100644
index 00000000..94cb4968
--- /dev/null
+++ b/samples/aisql_eval_ui/.gitignore
@@ -0,0 +1,21 @@
+# Virtual environment
+venv/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+
+# Flask
+instance/
+.webassets-cache
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db
+
diff --git a/samples/aisql_eval_ui/CHANGES.md b/samples/aisql_eval_ui/CHANGES.md
new file mode 100644
index 00000000..f87b611b
--- /dev/null
+++ b/samples/aisql_eval_ui/CHANGES.md
@@ -0,0 +1,161 @@
+# UI Updates
+
+## Update 4: Sequential Golden Dataset Flow (Latest)
+
+### What's New
+Redesigned Step 4 with a **guided, sequential workflow**. Users are now presented with a clear choice first: use existing golden dataset or create new one.
+
+### Key Features
+
+#### 1. **Initial Choice Screen**
+- Clear question: "Do you want to use an existing golden dataset for evaluation?"
+- Two prominent buttons:
+  - **📚 Yes, Select from Existing Golden Datasets**
+  - **✨ No, I'll Create a New Golden Dataset**
+
+#### 2. **Path A: Use Existing (No Creation Needed)**
+- Select from dropdown
+- View full SQL query and metadata
+- Click "Load & Use This Dataset"
+- Golden dataset is loaded - **skip creation entirely**
+- Execute queries and evaluate immediately
+
+#### 3. **Path B: Create New**
+- Shows creation interface
+- Execute query to get AI predictions
+- Edit results to create golden dataset
+- Save for future use
+
+#### 4. **Navigation**
+- "Back" button on each screen
+- Return to choice screen anytime
+- Clean, guided experience
+
+#### 5. **Loaded State View**
+- After loading existing dataset, shows read-only view
+- Green-highlighted golden results
+- Option to choose different dataset
+
+### Benefits
+✅ **Clearer workflow** - Sequential steps vs. all-at-once interface  
+✅ **Skip creation** - When using existing dataset, no need to create new one  
+✅ **Reduced confusion** - One choice at a time  
+✅ **Better guidance** - Clear next steps at each stage  
+
+---
+
+## Update 3: Manual Golden Dataset Selection
+
+### What's New
+Changed from automatic detection to **manual dropdown selection** for golden datasets. You now have full control over which golden dataset to load, with complete visibility of the SQL query.
+
+### Key Features
+
+#### 1. **Dropdown Selector**
+- Always visible blue section at the top of Step 4
+- Browse ALL saved golden datasets in one dropdown
+- Format: `table_name - SQL_query_preview (row_count)`
+
+#### 2. **SQL Query Preview**
+When you select a dataset from the dropdown, you see:
+- **Full SQL query** - Complete, untruncated query in a code block
+- **Table name** - Which table it's for
+- **Row count** - Number of golden records
+- **Timestamp** - When it was created/saved
+
+#### 3. **Manual Load Control**
+- Click "Load Selected" to load the chosen golden dataset
+- No automatic detection or suggestions
+- You decide which version to use for evaluation
+
+#### 4. **Smart Workflow**
+- Load golden dataset anytime (before or after executing query)
+- Execute query to get AI predictions
+- Evaluate by comparing predictions against loaded golden data
+- Edit and re-save golden data to update it
+
+### Benefits
+✅ **Full control** - You choose which golden dataset to use
+✅ **Transparency** - See the exact SQL query before loading
+✅ **Version management** - Easily compare and select between different golden datasets
+✅ **Flexibility** - Load datasets for any table, not just current query
+
+---
+
+## Update 2: Reusable Golden Datasets
+
+### What's New
+Golden datasets can now be **saved and reused** across sessions!
+
+### Key Features
+- Golden datasets keyed by SQL query + table name
+- Persistent storage for reuse
+- Saved datasets available via API endpoint
+
+### Benefits
+✅ **Save time** - Reuse golden datasets instead of recreating them
+✅ **Consistency** - Same query uses same golden standard
+✅ **Iterative improvement** - Load, edit, and save updates to golden data
+
+---
+
+## Update 1: Table-Based Interface
+
+### What Changed
+
+The execution results and golden dataset sections have been updated from a card-based layout to a **table-based format** for easier side-by-side comparison.
+
+## Key Improvements
+
+### 1. **Execution Results Table**
+- Shows all data in a clean, organized table
+- Columns include:
+  - Row number (#)
+  - All input columns (id, product, review, description, etc.)
+  - AI Result column (highlighted in blue badge)
+- **Sticky header** - Header stays visible when scrolling
+- Truncates long text with "..." and shows full text on hover
+
+### 2. **Golden Dataset Editor Table**
+- Comprehensive table view with:
+  - Row number
+  - All input data columns
+  - **AI Result** (read-only) - What the model predicted
+  - **Golden Result** (editable) - Where you make corrections
+- **Visual feedback**:
+  - Modified fields turn yellow when edited
+  - Clear distinction between AI predictions and your corrections
+- Inline editing - Click directly in the table cell to edit
+
+### 3. **Better User Experience**
+- Side-by-side comparison of inputs, predictions, and corrections
+- Easy to scan through multiple rows
+- Clear visual hierarchy
+- Professional table styling with hover effects
+- Responsive layout that handles varying data sizes
+
+## How to Use
+
+1. **Run a query** - See results in table format with AI predictions
+2. **Review the golden dataset table** - Compare AI results with input data
+3. **Edit corrections** - Click on golden result cells to modify
+4. **Visual feedback** - See yellow highlighting on modified values
+5. **Save** - Click "Save as Golden Dataset" button
+
+## Technical Details
+
+- Updated CSS for table styling
+- Refactored `displayResults()` function to generate table HTML
+- Refactored `displayGoldenEditor()` function with inline editing
+- Added `updateGoldenResult()` and `highlightModified()` helper functions
+- Sticky positioning for table headers
+- Responsive column widths with text truncation
+
+## Benefits
+
+✅ **Easier comparison** - All data visible in one view
+✅ **Faster editing** - Direct inline editing vs separate inputs
+✅ **Better readability** - Tabular format is more intuitive
+✅ **Scalable** - Handles any number of columns dynamically
+✅ **Professional** - Clean, modern table design
+
diff --git a/samples/aisql_eval_ui/README.md b/samples/aisql_eval_ui/README.md
new file mode 100644
index 00000000..2bc45b7e
--- /dev/null
+++ b/samples/aisql_eval_ui/README.md
@@ -0,0 +1,217 @@
+# Snowflake AISQL Function Evaluation UI
+
+A comprehensive web-based UI for testing and evaluating Snowflake AISQL functions including `AI_COMPLETE`, `AI_CLASSIFY`, and `AI_FILTER`. This tool allows you to test end-to-end evaluation workflows with mock data without needing an actual Snowflake connection.
+
+## Features
+
+### 1. **Mock Snowflake Tables**
+- Pre-loaded sample tables with realistic data:
+  - `customer_reviews` - Product reviews for sentiment analysis
+  - `support_tickets` - Support tickets for priority classification
+  - `product_descriptions` - Products for summarization
+  - `customer_feedback` - Feedback for filtering
+
+### 2. **Query Editor**
+- Write and execute AISQL queries
+- Sample queries for quick testing:
+  - `AI_CLASSIFY` for sentiment/priority classification
+  - `AI_COMPLETE` for text generation/summarization
+  - `AI_FILTER` for filtering based on conditions
+
+### 3. **Execution Results & Golden Dataset Creation**
+- **Table-based display** for easy side-by-side comparison
+- View execution results with input data and AI predictions in one view
+- **Reusable golden datasets** - Automatically detects and offers to load existing golden data for the same query
+- **Interactive editing** - Directly edit AI results in the golden dataset table
+- **Visual highlighting** - Modified values are highlighted in yellow
+- Sticky table headers for easy navigation through large datasets
+- Save golden data for evaluation and reuse across sessions
+
+### 4. **Evaluation Metrics**
+
+#### Classification Metrics (AI_CLASSIFY, AI_FILTER)
+- Precision, Recall, F1-score per class
+- Overall accuracy
+- Sample-by-sample comparison view
+
+#### Generative Metrics (AI_COMPLETE)
+- LLM-as-judge evaluation
+- Relevance, Coherence, Fluency scores
+- Overall quality assessment
+- Detailed feedback
+
+## Getting Started
+
+### Prerequisites
+- Python 3.8+
+- pip
+
+### Installation
+
+1. Navigate to the project directory:
+```bash
+cd samples/aisql_eval_ui
+```
+
+2. Install dependencies:
+```bash
+pip install -r requirements.txt
+```
+
+### Running the Application
+
+1. Start the Flask server:
+```bash
+python app.py
+```
+
+2. Open your browser and navigate to:
+```
+http://localhost:5000
+```
+
+## Usage Workflow
+
+### Step 1: Select a Table
+Choose one of the pre-loaded mock tables from the dropdown. You'll see the row count and column information.
+
+### Step 2: Write AISQL Query
+Write your query using Snowflake AISQL functions. Click on sample queries for quick examples:
+
+**Example - Sentiment Classification:**
+```sql
+SELECT *, AI_CLASSIFY(review, ARRAY['positive', 'negative', 'neutral']) as ai_result 
+FROM customer_reviews
+```
+
+**Example - Text Summarization:**
+```sql
+SELECT *, AI_COMPLETE('Summarize this: ' || specs) as ai_result 
+FROM product_descriptions
+```
+
+**Example - Filtering:**
+```sql
+SELECT * FROM customer_feedback 
+WHERE AI_FILTER(text, 'needs response or action')
+```
+
+### Step 3: View Results
+After executing the query, review the AI-generated results in a **table format** showing:
+- Row number for easy reference
+- All input columns (ID, description, etc.)
+- AI-generated predictions
+
+The table has a sticky header so you can scroll through large result sets easily.
+
+### Step 4: Golden Dataset (Sequential Flow)
+
+You'll be presented with a choice:
+
+**Option A: Use an Existing Golden Dataset**
+1. Click "Yes, Select from Existing Golden Datasets"
+2. Browse the dropdown to see all saved golden datasets
+   - Format: `table_name - SQL_query (row_count)`
+3. Select a dataset to see:
+   - Full SQL query (untruncated)
+   - Table name, row count, and save timestamp
+4. Click "Load & Use This Dataset"
+5. ✅ Golden dataset is loaded - you can now execute queries and evaluate
+
+**Option B: Create a New Golden Dataset**
+1. Click "No, I'll Create a New Golden Dataset"
+2. Execute a query in Step 2 to get AI predictions
+3. Edit the results in the table:
+   - **AI Result** column (read-only) - Shows what the AI predicted
+   - **Golden Result** column (editable) - Edit to set correct values
+4. Click "Save as Golden Dataset"
+5. ✅ Golden dataset is saved and ready for evaluation
+
+**Tips:**
+- Use "Back" button to return to the choice screen anytime
+- Modified fields turn **yellow** to show they've been changed
+- Saved datasets are available for reuse in future sessions
+- **Golden datasets are keyed by SQL query + table name**
+
+### Step 5: Evaluate Performance
+Choose evaluation type:
+- **Classification Metrics**: For AI_CLASSIFY and AI_FILTER
+  - Calculates precision, recall, F1-score
+  - Shows per-class and overall metrics
+  - Displays sample comparisons
+
+- **LLM as Judge**: For AI_COMPLETE and generative tasks
+  - Evaluates relevance, coherence, fluency
+  - Provides overall quality score
+  - Includes detailed feedback
+
+## API Endpoints
+
+The application exposes the following REST API endpoints:
+
+- `GET /api/tables` - List all available tables
+- `GET /api/table/<table_name>` - Get table data
+- `POST /api/execute` - Execute AISQL query
+- `POST /api/golden` - Save golden dataset (stored by execution ID and query hash)
+- `GET /api/golden/<execution_id>` - Get golden dataset by execution ID
+- `POST /api/golden/query` - Check if golden dataset exists for a query
+- `GET /api/golden/datasets` - List all saved golden datasets
+- `POST /api/evaluate` - Evaluate results against golden data
+- `GET /api/history` - Get evaluation history
+
+## Architecture
+
+### Backend (Flask)
+- Mock data generation
+- Query parsing and execution simulation
+- Metrics calculation (classification and generative)
+- Golden dataset management
+
+### Frontend (HTML/CSS/JavaScript)
+- Modern, responsive UI
+- Interactive query editor
+- Real-time result editing
+- Dynamic metrics visualization
+
+## Sample Data
+
+The application includes several pre-configured tables:
+
+1. **customer_reviews**: Product reviews with sentiment labels
+2. **support_tickets**: Support tickets with priority levels
+3. **product_descriptions**: Products with specifications
+4. **customer_feedback**: Customer feedback messages
+
+All data is mock data generated for testing purposes.
+
+## Metrics Explained
+
+### Classification Metrics
+- **Precision**: Of all items predicted as a class, how many were correct?
+- **Recall**: Of all items that should be a class, how many were found?
+- **F1-Score**: Harmonic mean of precision and recall
+- **Accuracy**: Overall percentage of correct predictions
+
+### LLM as Judge Metrics
+- **Relevance**: How relevant is the generated text to the reference?
+- **Coherence**: How well-structured and logical is the text?
+- **Fluency**: How natural and grammatically correct is the text?
+- **Overall Score**: Combined quality assessment
+
+## Future Enhancements
+
+- [ ] Connect to real Snowflake instance
+- [ ] Batch evaluation support
+- [ ] Export evaluation reports
+- [ ] Historical comparison charts
+- [ ] Custom metric configuration
+- [ ] Multi-user support with authentication
+
+## License
+
+See the main repository LICENSE file.
+
+## Contributing
+
+This is part of the Snowflake samples repository. For contributions, please refer to the main repository guidelines.
+
diff --git a/samples/aisql_eval_ui/app.py b/samples/aisql_eval_ui/app.py
new file mode 100644
index 00000000..8e7fac82
--- /dev/null
+++ b/samples/aisql_eval_ui/app.py
@@ -0,0 +1,501 @@
+"""
+Flask backend for Snowflake AISQL Function Evaluation UI
+Provides mock data and API endpoints for testing AISQL functions
+"""
+
+from flask import Flask, render_template, request, jsonify
+import json
+import re
+from datetime import datetime
+from typing import Dict, List, Any
+import random
+
+app = Flask(__name__)
+
+# Mock data storage
+golden_results = {}  # Key: execution_id
+golden_datasets = {}  # Key: query hash (for reusable golden datasets)
+evaluation_history = []
+
+# Mock Snowflake tables
+MOCK_TABLES = {
+    "customer_reviews": [
+        {"id": 1, "product": "Laptop Pro X1", "review": "Great laptop, fast performance and excellent battery life!", "sentiment": None, "category": "Electronics"},
+        {"id": 2, "product": "Budget Phone", "review": "Poor quality, broke after 2 weeks. Very disappointed.", "sentiment": None, "category": "Electronics"},
+        {"id": 3, "product": "Coffee Maker", "review": "Makes decent coffee but quite noisy in the morning.", "sentiment": None, "category": "Appliances"},
+        {"id": 4, "product": "Running Shoes", "review": "Comfortable and lightweight, perfect for marathons!", "sentiment": None, "category": "Sports"},
+        {"id": 5, "product": "Blender 3000", "review": "Terrible product, motor died within a month.", "sentiment": None, "category": "Appliances"},
+        {"id": 6, "product": "Smart Watch", "review": "Amazing features and great battery life. Highly recommend!", "sentiment": None, "category": "Electronics"},
+        {"id": 7, "product": "Yoga Mat", "review": "Good grip but started peeling after few uses.", "sentiment": None, "category": "Sports"},
+        {"id": 8, "product": "Headphones X", "review": "Sound quality is okay for the price, nothing special.", "sentiment": None, "category": "Electronics"},
+    ],
+    "support_tickets": [
+        {"ticket_id": 101, "description": "Cannot login to my account", "priority": None, "status": "open"},
+        {"ticket_id": 102, "description": "URGENT: System is down, losing revenue!", "priority": None, "status": "open"},
+        {"ticket_id": 103, "description": "How do I change my password?", "priority": None, "status": "open"},
+        {"ticket_id": 104, "description": "CRITICAL: Data breach suspected, need immediate help", "priority": None, "status": "open"},
+        {"ticket_id": 105, "description": "Feature request: add dark mode", "priority": None, "status": "open"},
+        {"ticket_id": 106, "description": "Billing question about last invoice", "priority": None, "status": "open"},
+    ],
+    "product_descriptions": [
+        {"product_id": 1, "name": "Laptop Pro X1", "specs": "16GB RAM, 512GB SSD, Intel i7", "summary": None},
+        {"product_id": 2, "name": "Wireless Mouse", "specs": "Bluetooth 5.0, 6 buttons, ergonomic design", "summary": None},
+        {"product_id": 3, "name": "4K Monitor", "specs": "27 inch, IPS panel, 144Hz refresh rate", "summary": None},
+        {"product_id": 4, "name": "Mechanical Keyboard", "specs": "RGB backlight, Cherry MX switches, aluminum frame", "summary": None},
+    ],
+    "customer_feedback": [
+        {"feedback_id": 1, "text": "Your service is excellent, keep up the good work!", "needs_response": None},
+        {"feedback_id": 2, "text": "I have a question about my recent order #12345", "needs_response": None},
+        {"feedback_id": 3, "text": "Thanks for the quick delivery!", "needs_response": None},
+        {"feedback_id": 4, "text": "There's an issue with my payment, please contact me ASAP", "needs_response": None},
+        {"feedback_id": 5, "text": "Love your products!", "needs_response": None},
+    ]
+}
+
+def mock_ai_complete(prompt: str, context: str = "") -> str:
+    """Mock AI_COMPLETE function"""
+    responses = {
+        "summarize": [
+            "High-performance laptop with excellent specifications and battery life.",
+            "Ergonomic wireless mouse with advanced connectivity.",
+            "Professional-grade 4K monitor with high refresh rate.",
+            "Premium mechanical keyboard with customizable lighting."
+        ],
+        "sentiment": ["positive", "negative", "neutral", "mixed"],
+        "priority": ["low", "medium", "high", "critical"],
+        "category": ["Electronics", "Appliances", "Sports", "Other"],
+    }
+    
+    if "summarize" in prompt.lower() or "summary" in prompt.lower():
+        return random.choice(responses["summarize"])
+    elif "sentiment" in prompt.lower():
+        return random.choice(responses["sentiment"])
+    elif "priority" in prompt.lower():
+        return random.choice(responses["priority"])
+    elif "category" in prompt.lower() or "classify" in prompt.lower():
+        return random.choice(responses["category"])
+    else:
+        return f"Mock response for: {context[:50]}..."
+
+def mock_ai_classify(text: str, labels: List[str]) -> str:
+    """Mock AI_CLASSIFY function"""
+    # Simple keyword-based classification for demo
+    text_lower = text.lower()
+    
+    if "positive" in labels or "negative" in labels or "neutral" in labels:
+        # Sentiment classification
+        positive_words = ["great", "excellent", "amazing", "love", "perfect", "highly recommend"]
+        negative_words = ["poor", "terrible", "broke", "died", "disappointed", "issue"]
+        
+        if any(word in text_lower for word in positive_words):
+            return "positive"
+        elif any(word in text_lower for word in negative_words):
+            return "negative"
+        else:
+            return "neutral"
+    
+    elif "critical" in labels or "high" in labels or "urgent" in labels:
+        # Priority classification
+        if "critical" in text_lower or "urgent" in text_lower or "breach" in text_lower:
+            return "critical"
+        elif "important" in text_lower or "asap" in text_lower:
+            return "high"
+        elif "question" in text_lower or "how" in text_lower:
+            return "low"
+        else:
+            return "medium"
+    
+    return random.choice(labels)
+
+def mock_ai_filter(text: str, condition: str) -> bool:
+    """Mock AI_FILTER function"""
+    text_lower = text.lower()
+    condition_lower = condition.lower()
+    
+    if "response" in condition_lower or "action" in condition_lower:
+        action_keywords = ["question", "issue", "problem", "help", "asap", "urgent"]
+        return any(keyword in text_lower for keyword in action_keywords)
+    
+    elif "positive" in condition_lower:
+        positive_words = ["great", "excellent", "amazing", "love", "perfect"]
+        return any(word in text_lower for word in positive_words)
+    
+    elif "negative" in condition_lower:
+        negative_words = ["poor", "terrible", "broke", "died", "disappointed"]
+        return any(word in text_lower for word in negative_words)
+    
+    return random.choice([True, False])
+
+def execute_mock_query(query: str, table_name: str) -> List[Dict[str, Any]]:
+    """Execute mock AISQL query"""
+    if table_name not in MOCK_TABLES:
+        return []
+    
+    table_data = MOCK_TABLES[table_name].copy()
+    results = []
+    
+    # Parse query to determine function type
+    query_upper = query.upper()
+    
+    for row in table_data:
+        result_row = row.copy()
+        
+        if "AI_COMPLETE" in query_upper:
+            # Extract the prompt and column reference
+            if "summarize" in query.lower():
+                # Generate summary
+                for key, value in row.items():
+                    if isinstance(value, str) and len(value) > 20:
+                        result_row["ai_result"] = mock_ai_complete("summarize", value)
+                        break
+            else:
+                # Generate other completions
+                context = str(list(row.values()))
+                result_row["ai_result"] = mock_ai_complete(query, context)
+        
+        elif "AI_CLASSIFY" in query_upper:
+            # Extract labels from query
+            labels_match = re.search(r"ARRAY\s*\[(.*?)\]", query, re.IGNORECASE)
+            if labels_match:
+                labels_str = labels_match.group(1)
+                labels = [l.strip().strip("'\"") for l in labels_str.split(",")]
+                
+                # Find text column to classify
+                text_col = None
+                for key, value in row.items():
+                    if isinstance(value, str) and len(value) > 10:
+                        text_col = value
+                        break
+                
+                if text_col:
+                    result_row["ai_result"] = mock_ai_classify(text_col, labels)
+        
+        elif "AI_FILTER" in query_upper:
+            # Extract condition
+            condition_match = re.search(r"AI_FILTER\s*\((.*?),\s*'(.*?)'\)", query, re.IGNORECASE)
+            if condition_match:
+                column = condition_match.group(1).strip()
+                condition = condition_match.group(2).strip()
+                
+                # Find text to filter
+                text_col = None
+                for key, value in row.items():
+                    if isinstance(value, str) and len(value) > 10:
+                        text_col = value
+                        break
+                
+                if text_col and mock_ai_filter(text_col, condition):
+                    result_row["ai_result"] = True
+                    results.append(result_row)
+                continue
+        
+        results.append(result_row)
+    
+    return results
+
+def calculate_classification_metrics(predictions: List[str], golden: List[str]) -> Dict[str, float]:
+    """Calculate precision, recall, F1 for classification tasks"""
+    if len(predictions) != len(golden):
+        return {"error": "Mismatched lengths"}
+    
+    # Get unique labels
+    labels = list(set(predictions + golden))
+    
+    metrics = {}
+    total_tp = 0
+    total_fp = 0
+    total_fn = 0
+    
+    for label in labels:
+        tp = sum(1 for p, g in zip(predictions, golden) if p == label and g == label)
+        fp = sum(1 for p, g in zip(predictions, golden) if p == label and g != label)
+        fn = sum(1 for p, g in zip(predictions, golden) if p != label and g == label)
+        
+        total_tp += tp
+        total_fp += fp
+        total_fn += fn
+        
+        precision = tp / (tp + fp) if (tp + fp) > 0 else 0
+        recall = tp / (tp + fn) if (tp + fn) > 0 else 0
+        f1 = 2 * precision * recall / (precision + recall) if (precision + recall) > 0 else 0
+        
+        metrics[f"{label}_precision"] = round(precision, 3)
+        metrics[f"{label}_recall"] = round(recall, 3)
+        metrics[f"{label}_f1"] = round(f1, 3)
+    
+    # Overall metrics
+    overall_precision = total_tp / (total_tp + total_fp) if (total_tp + total_fp) > 0 else 0
+    overall_recall = total_tp / (total_tp + total_fn) if (total_tp + total_fn) > 0 else 0
+    overall_f1 = 2 * overall_precision * overall_recall / (overall_precision + overall_recall) if (overall_precision + overall_recall) > 0 else 0
+    
+    accuracy = sum(1 for p, g in zip(predictions, golden) if p == g) / len(predictions)
+    
+    metrics["overall_precision"] = round(overall_precision, 3)
+    metrics["overall_recall"] = round(overall_recall, 3)
+    metrics["overall_f1"] = round(overall_f1, 3)
+    metrics["accuracy"] = round(accuracy, 3)
+    
+    return metrics
+
+def create_query_key(query: str, table_name: str) -> str:
+    """Create a unique key for a query + table combination"""
+    import hashlib
+    normalized_query = ' '.join(query.strip().split())  # Normalize whitespace
+    key_string = f"{table_name}::{normalized_query}"
+    return hashlib.md5(key_string.encode()).hexdigest()[:16]
+
+def llm_as_judge_evaluation(generated: str, reference: str, criteria: str) -> Dict[str, Any]:
+    """Mock LLM as judge evaluation"""
+    # Simple mock evaluation based on string similarity and length
+    similarity_score = len(set(generated.lower().split()) & set(reference.lower().split())) / max(len(generated.split()), len(reference.split()), 1)
+    
+    length_ratio = min(len(generated), len(reference)) / max(len(generated), len(reference), 1)
+    
+    # Mock scores
+    relevance = round(min(similarity_score * 100, 100), 1)
+    coherence = round(random.uniform(70, 95), 1)
+    fluency = round(random.uniform(75, 98), 1)
+    overall = round((relevance + coherence + fluency) / 3, 1)
+    
+    feedback = []
+    if relevance < 70:
+        feedback.append("Generated text lacks relevance to reference")
+    if len(generated) < 10:
+        feedback.append("Generated text is too short")
+    if len(generated) > len(reference) * 2:
+        feedback.append("Generated text is overly verbose")
+    if not feedback:
+        feedback.append("Good quality response")
+    
+    return {
+        "relevance": relevance,
+        "coherence": coherence,
+        "fluency": fluency,
+        "overall_score": overall,
+        "feedback": feedback
+    }
+
+# API Routes
+
+@app.route('/')
+def index():
+    """Serve the main UI"""
+    return render_template('index.html')
+
+@app.route('/api/tables', methods=['GET'])
+def get_tables():
+    """Get list of available tables"""
+    tables = []
+    for table_name, data in MOCK_TABLES.items():
+        columns = list(data[0].keys()) if data else []
+        tables.append({
+            "name": table_name,
+            "columns": columns,
+            "row_count": len(data)
+        })
+    return jsonify(tables)
+
+@app.route('/api/table/<table_name>', methods=['GET'])
+def get_table_data(table_name):
+    """Get table data"""
+    if table_name not in MOCK_TABLES:
+        return jsonify({"error": "Table not found"}), 404
+    return jsonify(MOCK_TABLES[table_name])
+
+@app.route('/api/execute', methods=['POST'])
+def execute_query():
+    """Execute AISQL query"""
+    data = request.json
+    query = data.get('query', '')
+    table_name = data.get('table_name', '')
+    loaded_golden_data = data.get('loaded_golden_data')  # Optional: if golden dataset was loaded
+    
+    if not query or not table_name:
+        return jsonify({"error": "Query and table_name required"}), 400
+    
+    try:
+        results = execute_mock_query(query, table_name)
+        
+        # Store execution in history
+        execution = {
+            "id": len(evaluation_history) + 1,
+            "timestamp": datetime.now().isoformat(),
+            "query": query,
+            "table_name": table_name,
+            "results": results,
+            "result_count": len(results)
+        }
+        evaluation_history.append(execution)
+        
+        # If a golden dataset was loaded, associate it with this execution
+        if loaded_golden_data:
+            golden_results[execution["id"]] = {
+                "timestamp": datetime.now().isoformat(),
+                "data": loaded_golden_data
+            }
+        
+        return jsonify({
+            "execution_id": execution["id"],
+            "results": results,
+            "row_count": len(results)
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/golden', methods=['POST'])
+def save_golden():
+    """Save golden results"""
+    data = request.json
+    execution_id = data.get('execution_id')
+    golden_data = data.get('golden_data')
+    
+    if not execution_id or not golden_data:
+        return jsonify({"error": "execution_id and golden_data required"}), 400
+    
+    # Find the execution to get query and table name
+    execution = next((e for e in evaluation_history if e["id"] == execution_id), None)
+    if not execution:
+        return jsonify({"error": "Execution not found"}), 404
+    
+    query = execution["query"]
+    table_name = execution["table_name"]
+    query_key = create_query_key(query, table_name)
+    
+    # Save by execution ID
+    golden_results[execution_id] = {
+        "timestamp": datetime.now().isoformat(),
+        "data": golden_data
+    }
+    
+    # Also save as reusable dataset keyed by query
+    golden_datasets[query_key] = {
+        "query": query,
+        "table_name": table_name,
+        "timestamp": datetime.now().isoformat(),
+        "data": golden_data,
+        "row_count": len(golden_data)
+    }
+    
+    return jsonify({
+        "message": "Golden results saved",
+        "execution_id": execution_id,
+        "query_key": query_key
+    })
+
+@app.route('/api/golden/<int:execution_id>', methods=['GET'])
+def get_golden(execution_id):
+    """Get golden results for an execution"""
+    if execution_id not in golden_results:
+        return jsonify({"error": "No golden results found"}), 404
+    return jsonify(golden_results[execution_id])
+
+@app.route('/api/evaluate', methods=['POST'])
+def evaluate():
+    """Evaluate results against golden data"""
+    data = request.json
+    execution_id = data.get('execution_id')
+    eval_type = data.get('type', 'classification')  # classification or generative
+    
+    if execution_id not in golden_results:
+        return jsonify({"error": "No golden results found for this execution"}), 404
+    
+    # Find execution
+    execution = next((e for e in evaluation_history if e["id"] == execution_id), None)
+    if not execution:
+        return jsonify({"error": "Execution not found"}), 404
+    
+    golden_data = golden_results[execution_id]["data"]
+    predicted_results = execution["results"]
+    
+    if eval_type == 'classification':
+        # Extract predictions and golden labels
+        predictions = [r.get("ai_result") for r in predicted_results]
+        golden_labels = [g.get("ai_result") for g in golden_data]
+        
+        metrics = calculate_classification_metrics(predictions, golden_labels)
+        
+        return jsonify({
+            "type": "classification",
+            "metrics": metrics,
+            "sample_comparisons": [
+                {
+                    "predicted": p,
+                    "golden": g,
+                    "match": p == g
+                }
+                for p, g in zip(predictions[:5], golden_labels[:5])
+            ]
+        })
+    
+    else:  # generative
+        # LLM as judge evaluation
+        evaluations = []
+        for pred, gold in zip(predicted_results, golden_data):
+            pred_text = pred.get("ai_result", "")
+            gold_text = gold.get("ai_result", "")
+            
+            eval_result = llm_as_judge_evaluation(pred_text, gold_text, "quality")
+            evaluations.append(eval_result)
+        
+        # Average metrics
+        avg_metrics = {
+            "avg_relevance": round(sum(e["relevance"] for e in evaluations) / len(evaluations), 1),
+            "avg_coherence": round(sum(e["coherence"] for e in evaluations) / len(evaluations), 1),
+            "avg_fluency": round(sum(e["fluency"] for e in evaluations) / len(evaluations), 1),
+            "avg_overall": round(sum(e["overall_score"] for e in evaluations) / len(evaluations), 1)
+        }
+        
+        return jsonify({
+            "type": "generative",
+            "metrics": avg_metrics,
+            "sample_evaluations": evaluations[:5]
+        })
+
+@app.route('/api/golden/query', methods=['POST'])
+def get_golden_by_query():
+    """Get golden dataset for a specific query"""
+    data = request.json
+    query = data.get('query', '')
+    table_name = data.get('table_name', '')
+    
+    if not query or not table_name:
+        return jsonify({"error": "query and table_name required"}), 400
+    
+    query_key = create_query_key(query, table_name)
+    
+    if query_key not in golden_datasets:
+        return jsonify({"exists": False}), 200
+    
+    return jsonify({
+        "exists": True,
+        "query_key": query_key,
+        "golden_data": golden_datasets[query_key]
+    })
+
+@app.route('/api/golden/datasets', methods=['GET'])
+def list_golden_datasets():
+    """List all available golden datasets"""
+    datasets = []
+    for key, data in golden_datasets.items():
+        datasets.append({
+            "query_key": key,
+            "query": data["query"][:100] + "..." if len(data["query"]) > 100 else data["query"],
+            "full_query": data["query"],
+            "table_name": data["table_name"],
+            "timestamp": data["timestamp"],
+            "row_count": data["row_count"]
+        })
+    
+    # Sort by timestamp, most recent first
+    datasets.sort(key=lambda x: x["timestamp"], reverse=True)
+    
+    return jsonify(datasets)
+
+@app.route('/api/history', methods=['GET'])
+def get_history():
+    """Get evaluation history"""
+    return jsonify(evaluation_history)
+
+if __name__ == '__main__':
+    app.run(debug=True, port=5000)
+
diff --git a/samples/aisql_eval_ui/requirements.txt b/samples/aisql_eval_ui/requirements.txt
new file mode 100644
index 00000000..c1933a93
--- /dev/null
+++ b/samples/aisql_eval_ui/requirements.txt
@@ -0,0 +1,3 @@
+Flask==3.0.0
+Werkzeug==3.0.1
+
diff --git a/samples/aisql_eval_ui/start.sh b/samples/aisql_eval_ui/start.sh
new file mode 100755
index 00000000..448ae861
--- /dev/null
+++ b/samples/aisql_eval_ui/start.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+
+echo "🚀 Starting Snowflake AISQL Evaluation UI..."
+echo ""
+
+# Create virtual environment if it doesn't exist
+if [ ! -d "venv" ]; then
+    echo "Creating virtual environment..."
+    python3 -m venv venv
+fi
+
+# Activate virtual environment
+source venv/bin/activate
+
+# Install dependencies
+echo "Installing dependencies..."
+pip install -q -r requirements.txt
+
+echo ""
+echo "Starting Flask server..."
+echo "📱 Open http://localhost:5000 in your browser"
+echo ""
+echo "Press Ctrl+C to stop the server"
+echo ""
+
+python app.py
+
diff --git a/samples/aisql_eval_ui/templates/index.html b/samples/aisql_eval_ui/templates/index.html
new file mode 100644
index 00000000..cba81bfc
--- /dev/null
+++ b/samples/aisql_eval_ui/templates/index.html
@@ -0,0 +1,1326 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Snowflake AISQL Function Evaluation</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+
+        header {
+            background: linear-gradient(135deg, #29323c 0%, #485563 100%);
+            color: white;
+            padding: 30px 40px;
+            border-bottom: 4px solid #667eea;
+        }
+
+        h1 {
+            font-size: 28px;
+            margin-bottom: 8px;
+        }
+
+        .subtitle {
+            opacity: 0.9;
+            font-size: 14px;
+        }
+
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            padding: 30px 40px;
+        }
+
+        .panel {
+            background: #f8f9fa;
+            border-radius: 8px;
+            padding: 20px;
+            border: 1px solid #e0e0e0;
+        }
+
+        .panel-full {
+            grid-column: 1 / -1;
+        }
+
+        .panel h2 {
+            font-size: 18px;
+            margin-bottom: 15px;
+            color: #29323c;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        .badge-step {
+            background: #667eea;
+            color: white;
+        }
+
+        label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 600;
+            color: #485563;
+            font-size: 14px;
+        }
+
+        select, textarea, input {
+            width: 100%;
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 6px;
+            font-size: 14px;
+            font-family: inherit;
+            transition: border-color 0.2s;
+        }
+
+        select:focus, textarea:focus, input:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+
+        textarea {
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            resize: vertical;
+            min-height: 120px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-success {
+            background: #10b981;
+            color: white;
+        }
+
+        .btn-success:hover {
+            background: #059669;
+            transform: translateY(-2px);
+        }
+
+        .btn-secondary {
+            background: #6b7280;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #4b5563;
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none !important;
+        }
+
+        .button-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+
+        .results-container {
+            background: white;
+            border: 2px solid #e0e0e0;
+            border-radius: 6px;
+            padding: 0;
+            margin-top: 15px;
+            max-height: 500px;
+            overflow: auto;
+        }
+
+        .results-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+
+        .results-table thead {
+            position: sticky;
+            top: 0;
+            background: #f8f9fa;
+            z-index: 10;
+        }
+
+        .results-table th {
+            padding: 12px;
+            text-align: left;
+            font-weight: 600;
+            border-bottom: 2px solid #e0e0e0;
+            color: #29323c;
+            white-space: nowrap;
+        }
+
+        .results-table td {
+            padding: 12px;
+            border-bottom: 1px solid #e0e0e0;
+            vertical-align: top;
+        }
+
+        .results-table tbody tr:hover {
+            background: #f8f9fa;
+        }
+
+        .results-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        .result-id {
+            font-weight: 600;
+            color: #667eea;
+            font-size: 12px;
+        }
+
+        .result-content {
+            max-width: 400px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #29323c;
+            line-height: 1.4;
+        }
+
+        .result-content.truncate {
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+        }
+
+        .ai-result-value {
+            font-weight: 600;
+            color: #667eea;
+            padding: 6px 12px;
+            background: #eff6ff;
+            border-radius: 4px;
+            display: inline-block;
+        }
+
+        .result-input {
+            padding: 8px 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 4px;
+            font-size: 13px;
+            width: 100%;
+            min-width: 150px;
+            transition: border-color 0.2s;
+        }
+
+        .result-input:focus {
+            outline: none;
+            border-color: #667eea;
+            background: #fffbeb;
+        }
+
+        .golden-modified {
+            background: #fef3c7;
+            border-color: #f59e0b;
+        }
+
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 15px;
+        }
+
+        .metric-card {
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            border: 2px solid #e0e0e0;
+            text-align: center;
+        }
+
+        .metric-label {
+            font-size: 12px;
+            color: #6b7280;
+            text-transform: uppercase;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+
+        .metric-value {
+            font-size: 32px;
+            font-weight: 700;
+            color: #667eea;
+        }
+
+        .metric-value.good {
+            color: #10b981;
+        }
+
+        .metric-value.warning {
+            color: #f59e0b;
+        }
+
+        .metric-value.poor {
+            color: #ef4444;
+        }
+
+        .info-box {
+            background: #eff6ff;
+            border-left: 4px solid #3b82f6;
+            padding: 12px 16px;
+            border-radius: 4px;
+            margin-bottom: 15px;
+            font-size: 13px;
+            color: #1e40af;
+        }
+
+        .error-box {
+            background: #fef2f2;
+            border-left: 4px solid #ef4444;
+            padding: 12px 16px;
+            border-radius: 4px;
+            margin-top: 15px;
+            font-size: 13px;
+            color: #991b1b;
+        }
+
+        .success-box {
+            background: #f0fdf4;
+            border-left: 4px solid #10b981;
+            padding: 12px 16px;
+            border-radius: 4px;
+            margin-top: 15px;
+            font-size: 13px;
+            color: #065f46;
+        }
+
+        .loading {
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .table-info {
+            display: flex;
+            gap: 20px;
+            margin-top: 10px;
+            font-size: 13px;
+            color: #6b7280;
+        }
+
+        .table-info-item {
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .eval-type-selector {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+
+        .radio-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .radio-label:hover {
+            border-color: #667eea;
+        }
+
+        .radio-label input[type="radio"] {
+            width: auto;
+        }
+
+        .radio-label input[type="radio"]:checked + span {
+            font-weight: 600;
+            color: #667eea;
+        }
+
+        .sample-queries {
+            margin-top: 10px;
+            font-size: 12px;
+        }
+
+        .sample-query {
+            padding: 8px 12px;
+            background: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 4px;
+            margin-top: 5px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .sample-query:hover {
+            border-color: #667eea;
+            background: #f8f9fa;
+        }
+
+        .sample-query code {
+            font-family: 'Monaco', 'Menlo', monospace;
+            font-size: 11px;
+            color: #29323c;
+        }
+
+        .comparison-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 15px;
+            font-size: 13px;
+        }
+
+        .comparison-table th {
+            background: #f8f9fa;
+            padding: 10px;
+            text-align: left;
+            font-weight: 600;
+            border-bottom: 2px solid #e0e0e0;
+        }
+
+        .comparison-table td {
+            padding: 10px;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .match-indicator {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            display: inline-block;
+        }
+
+        .match-indicator.match {
+            background: #10b981;
+        }
+
+        .match-indicator.mismatch {
+            background: #ef4444;
+        }
+
+        .hidden {
+            display: none !important;
+        }
+
+        .golden-selector {
+            background: #eff6ff;
+            border: 2px solid #3b82f6;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 15px;
+            display: block;
+        }
+
+        .golden-selector-header {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 10px;
+            font-weight: 600;
+            color: #1e40af;
+        }
+
+        .golden-selector-content {
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+
+        .golden-selector select {
+            flex: 1;
+        }
+
+        .badge-exists {
+            background: #10b981;
+            color: white;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 600;
+        }
+
+        .badge-new {
+            background: #f59e0b;
+            color: white;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 11px;
+            font-weight: 600;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>❄️ Snowflake AISQL Function Evaluation</h1>
+            <p class="subtitle">Test and evaluate AI functions with mock data - No connection required</p>
+        </header>
+
+        <div class="main-content">
+            <!-- Step 1: Select Table -->
+            <div class="panel">
+                <h2><span class="badge badge-step">Step 1</span> Select Table</h2>
+                <div class="info-box">
+                    Choose a mock Snowflake table to work with
+                </div>
+                <label for="tableSelect">Table</label>
+                <select id="tableSelect">
+                    <option value="">-- Select a table --</option>
+                </select>
+                <div id="tableInfo" class="table-info hidden">
+                    <div class="table-info-item">
+                        <strong>Rows:</strong> <span id="rowCount">0</span>
+                    </div>
+                    <div class="table-info-item">
+                        <strong>Columns:</strong> <span id="columnCount">0</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 2: Write Query -->
+            <div class="panel">
+                <h2><span class="badge badge-step">Step 2</span> Write AISQL Query</h2>
+                <div class="info-box">
+                    Test AI_COMPLETE, AI_CLASSIFY, or AI_FILTER functions
+                </div>
+                <label for="queryInput">SQL Query</label>
+                <textarea id="queryInput" placeholder="SELECT AI_CLASSIFY(review, ARRAY['positive', 'negative', 'neutral']) as sentiment FROM customer_reviews"></textarea>
+                
+                <div class="sample-queries">
+                    <strong>Sample Queries:</strong>
+                    <div class="sample-query" onclick="useSampleQuery('classify')">
+                        <code>AI_CLASSIFY(review, ARRAY['positive', 'negative', 'neutral'])</code>
+                    </div>
+                    <div class="sample-query" onclick="useSampleQuery('complete')">
+                        <code>AI_COMPLETE('Summarize: ' || description)</code>
+                    </div>
+                    <div class="sample-query" onclick="useSampleQuery('filter')">
+                        <code>AI_FILTER(text, 'needs immediate response')</code>
+                    </div>
+                </div>
+
+                <div class="button-group">
+                    <button class="btn btn-primary" onclick="executeQuery()">
+                        <span>▶</span> Execute Query
+                    </button>
+                </div>
+            </div>
+
+            <!-- Step 3: View Results -->
+            <div class="panel panel-full">
+                <h2><span class="badge badge-step">Step 3</span> Execution Results</h2>
+                <div id="executionResults" class="results-container hidden">
+                    <div id="resultsList"></div>
+                </div>
+                <div id="noResults" class="info-box">
+                    No results yet. Execute a query above to see results.
+                </div>
+            </div>
+
+            <!-- Step 4: Golden Dataset -->
+            <div class="panel panel-full">
+                <h2><span class="badge badge-step">Step 4</span> Golden Dataset</h2>
+                
+                <!-- Step 4.1: Choose existing or new -->
+                <div id="goldenChoiceSection" class="golden-selector">
+                    <div class="golden-selector-header">
+                        <span>❓</span>
+                        <span>Do you want to use an existing golden dataset for evaluation?</span>
+                    </div>
+                    <div class="button-group" style="margin-top: 15px;">
+                        <button class="btn btn-primary" onclick="showExistingGoldenSelector()">
+                            <span>📚</span> Yes, Select from Existing Golden Datasets
+                        </button>
+                        <button class="btn btn-secondary" onclick="showNewGoldenCreation()">
+                            <span>✨</span> No, I'll Create a New Golden Dataset
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Step 4.2a: Select Existing Golden Dataset -->
+                <div id="goldenSelectorSection" class="golden-selector hidden">
+                    <div class="golden-selector-header">
+                        <span>📚</span>
+                        <span>Select Existing Golden Dataset</span>
+                        <button class="btn btn-secondary" onclick="backToGoldenChoice()" style="margin-left: auto; padding: 6px 12px; font-size: 12px;">
+                            ← Back
+                        </button>
+                    </div>
+                    <div class="info-box" style="margin-top: 10px;">
+                        Select a previously saved golden dataset below. The evaluation will compare new predictions against this golden standard.
+                    </div>
+                    <div class="golden-selector-content" style="margin-top: 15px;">
+                        <select id="goldenDatasetSelect" onchange="onGoldenDatasetSelected()">
+                            <option value="">-- Select a saved golden dataset --</option>
+                        </select>
+                        <button class="btn btn-primary" onclick="loadSelectedGolden()" id="loadGoldenBtn" disabled>
+                            <span>📥</span> Load & Use This Dataset
+                        </button>
+                    </div>
+                    <div id="selectedGoldenInfo" class="hidden" style="margin-top: 10px; padding: 10px; background: white; border-radius: 4px; border: 1px solid #e0e0e0;">
+                        <div style="font-size: 12px; color: #6b7280; margin-bottom: 5px;"><strong>SQL Query:</strong></div>
+                        <pre id="selectedGoldenSQL" style="background: #f8f9fa; padding: 10px; border-radius: 4px; font-size: 11px; overflow-x: auto; margin: 0;"></pre>
+                        <div style="margin-top: 8px; font-size: 12px; color: #6b7280;">
+                            <strong>Table:</strong> <span id="selectedGoldenTable"></span> | 
+                            <strong>Rows:</strong> <span id="selectedGoldenRows"></span> | 
+                            <strong>Saved:</strong> <span id="selectedGoldenTime"></span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Step 4.2b: Create New Golden Dataset -->
+                <div id="goldenCreationSection" class="golden-selector hidden">
+                    <div class="golden-selector-header">
+                        <span>✨</span>
+                        <span>Create New Golden Dataset</span>
+                        <button class="btn btn-secondary" onclick="backToGoldenChoice()" style="margin-left: auto; padding: 6px 12px; font-size: 12px;">
+                            ← Back
+                        </button>
+                    </div>
+                    <div class="info-box" style="margin-top: 10px;">
+                        <span id="goldenStatusBadge"></span>
+                        <span id="goldenStatusText">Execute a query in Step 2 first, then edit the AI results below to create your golden dataset.</span>
+                    </div>
+                    
+                    <div id="goldenEditor" class="results-container hidden">
+                        <div id="goldenList"></div>
+                    </div>
+                    <div id="noGolden" class="info-box">
+                        Execute a query in Step 2 to start creating a golden dataset.
+                    </div>
+                    <div class="button-group">
+                        <button class="btn btn-success" id="saveGoldenBtn" onclick="saveGolden()" disabled>
+                            <span>💾</span> Save as Golden Dataset
+                        </button>
+                    </div>
+                    <div id="goldenSaveStatus"></div>
+                </div>
+
+                <!-- Golden Dataset Loaded View -->
+                <div id="goldenLoadedSection" class="hidden">
+                    <div class="success-box">
+                        ✓ Golden dataset loaded successfully! You can now execute queries and evaluate against this golden standard.
+                    </div>
+                    <div id="goldenEditor2" class="results-container" style="margin-top: 15px;">
+                        <div id="goldenList2"></div>
+                    </div>
+                    <div class="button-group" style="margin-top: 15px;">
+                        <button class="btn btn-secondary" onclick="backToGoldenChoice()">
+                            <span>←</span> Choose Different Golden Dataset
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Step 5: Evaluate -->
+            <div class="panel panel-full">
+                <h2><span class="badge badge-step">Step 5</span> Evaluate Performance</h2>
+                
+                <div class="eval-type-selector">
+                    <label class="radio-label">
+                        <input type="radio" name="evalType" value="classification" checked>
+                        <span>Classification Metrics (Precision, Recall, F1)</span>
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="evalType" value="generative">
+                        <span>LLM as Judge (Quality Evaluation)</span>
+                    </label>
+                </div>
+
+                <div class="button-group">
+                    <button class="btn btn-primary" id="evaluateBtn" onclick="evaluateResults()" disabled>
+                        <span>📊</span> Run Evaluation
+                    </button>
+                </div>
+
+                <div id="evaluationResults" class="hidden">
+                    <div id="metricsDisplay"></div>
+                    <div id="comparisonDisplay"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentExecutionId = null;
+        let currentResults = [];
+        let goldenData = [];
+        let currentQuery = '';
+        let currentTableName = '';
+        let availableGoldenDatasets = [];
+        let selectedGoldenDataset = null;
+        let goldenDatasetLoaded = false;
+
+        // Load tables on page load
+        window.onload = function() {
+            loadTables();
+            loadGoldenDatasets();
+        };
+
+        // Navigation functions for Step 4
+        function showExistingGoldenSelector() {
+            document.getElementById('goldenChoiceSection').classList.add('hidden');
+            document.getElementById('goldenSelectorSection').classList.remove('hidden');
+            document.getElementById('goldenCreationSection').classList.add('hidden');
+            document.getElementById('goldenLoadedSection').classList.add('hidden');
+        }
+
+        function showNewGoldenCreation() {
+            document.getElementById('goldenChoiceSection').classList.add('hidden');
+            document.getElementById('goldenSelectorSection').classList.add('hidden');
+            document.getElementById('goldenCreationSection').classList.remove('hidden');
+            document.getElementById('goldenLoadedSection').classList.add('hidden');
+            
+            // If there are current results, show them
+            if (currentResults.length > 0) {
+                goldenData = JSON.parse(JSON.stringify(currentResults));
+                displayGoldenEditor(goldenData);
+                document.getElementById('saveGoldenBtn').disabled = false;
+                updateGoldenStatus('new');
+            }
+        }
+
+        function backToGoldenChoice() {
+            document.getElementById('goldenChoiceSection').classList.remove('hidden');
+            document.getElementById('goldenSelectorSection').classList.add('hidden');
+            document.getElementById('goldenCreationSection').classList.add('hidden');
+            document.getElementById('goldenLoadedSection').classList.add('hidden');
+            
+            // Reset selections
+            document.getElementById('goldenDatasetSelect').value = '';
+            document.getElementById('selectedGoldenInfo').classList.add('hidden');
+            document.getElementById('loadGoldenBtn').disabled = true;
+            selectedGoldenDataset = null;
+            goldenDatasetLoaded = false;
+        }
+
+        async function loadTables() {
+            try {
+                const response = await fetch('/api/tables');
+                const tables = await response.json();
+                
+                const select = document.getElementById('tableSelect');
+                tables.forEach(table => {
+                    const option = document.createElement('option');
+                    option.value = table.name;
+                    option.textContent = `${table.name} (${table.row_count} rows)`;
+                    option.dataset.columns = table.columns.join(', ');
+                    option.dataset.rowCount = table.row_count;
+                    option.dataset.columnCount = table.columns.length;
+                    select.appendChild(option);
+                });
+
+                select.addEventListener('change', function() {
+                    const selectedOption = this.options[this.selectedIndex];
+                    if (this.value) {
+                        document.getElementById('tableInfo').classList.remove('hidden');
+                        document.getElementById('rowCount').textContent = selectedOption.dataset.rowCount;
+                        document.getElementById('columnCount').textContent = selectedOption.dataset.columnCount;
+                    } else {
+                        document.getElementById('tableInfo').classList.add('hidden');
+                    }
+                });
+            } catch (error) {
+                console.error('Error loading tables:', error);
+            }
+        }
+
+        async function loadGoldenDatasets() {
+            try {
+                const response = await fetch('/api/golden/datasets');
+                availableGoldenDatasets = await response.json();
+                
+                const select = document.getElementById('goldenDatasetSelect');
+                // Clear existing options except the first one
+                select.innerHTML = '<option value="">-- Select a saved golden dataset --</option>';
+                
+                availableGoldenDatasets.forEach((dataset, index) => {
+                    const option = document.createElement('option');
+                    option.value = dataset.query_key;
+                    const displayQuery = dataset.query.length > 60 ? dataset.query.substring(0, 60) + '...' : dataset.query;
+                    option.textContent = `${dataset.table_name} - ${displayQuery} (${dataset.row_count} rows)`;
+                    option.dataset.index = index;
+                    select.appendChild(option);
+                });
+            } catch (error) {
+                console.error('Error loading golden datasets:', error);
+            }
+        }
+
+        function onGoldenDatasetSelected() {
+            const select = document.getElementById('goldenDatasetSelect');
+            const selectedValue = select.value;
+            
+            if (!selectedValue) {
+                document.getElementById('selectedGoldenInfo').classList.add('hidden');
+                document.getElementById('loadGoldenBtn').disabled = true;
+                selectedGoldenDataset = null;
+                return;
+            }
+            
+            const selectedIndex = select.options[select.selectedIndex].dataset.index;
+            selectedGoldenDataset = availableGoldenDatasets[selectedIndex];
+            
+            // Show the SQL query and metadata
+            document.getElementById('selectedGoldenInfo').classList.remove('hidden');
+            document.getElementById('selectedGoldenSQL').textContent = selectedGoldenDataset.full_query;
+            document.getElementById('selectedGoldenTable').textContent = selectedGoldenDataset.table_name;
+            document.getElementById('selectedGoldenRows').textContent = selectedGoldenDataset.row_count;
+            document.getElementById('selectedGoldenTime').textContent = new Date(selectedGoldenDataset.timestamp).toLocaleString();
+            document.getElementById('loadGoldenBtn').disabled = false;
+        }
+
+        async function loadSelectedGolden() {
+            if (!selectedGoldenDataset) {
+                alert('Please select a golden dataset first');
+                return;
+            }
+            
+            try {
+                const response = await fetch('/api/golden/query', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        query: selectedGoldenDataset.full_query,
+                        table_name: selectedGoldenDataset.table_name
+                    })
+                });
+                
+                const data = await response.json();
+                
+                if (!data.exists) {
+                    alert('Golden dataset not found');
+                    return;
+                }
+                
+                // Load the golden data
+                goldenData = JSON.parse(JSON.stringify(data.golden_data.data)); // Deep copy
+                currentQuery = selectedGoldenDataset.full_query;
+                currentTableName = selectedGoldenDataset.table_name;
+                goldenDatasetLoaded = true;
+                
+                // Show the loaded view
+                document.getElementById('goldenChoiceSection').classList.add('hidden');
+                document.getElementById('goldenSelectorSection').classList.add('hidden');
+                document.getElementById('goldenCreationSection').classList.add('hidden');
+                document.getElementById('goldenLoadedSection').classList.remove('hidden');
+                
+                // Display the golden data in the loaded view
+                displayGoldenEditorInLoadedView(goldenData);
+                
+                // Enable evaluation if we have executed a query
+                document.getElementById('evaluateBtn').disabled = !currentExecutionId;
+                
+            } catch (error) {
+                console.error('Error loading golden dataset:', error);
+                alert('Error loading golden dataset: ' + error.message);
+            }
+        }
+
+        function displayGoldenEditorInLoadedView(golden) {
+            const container = document.getElementById('goldenList2');
+
+            if (!golden || golden.length === 0) {
+                container.innerHTML = '<div class="info-box">No golden data available.</div>';
+                return;
+            }
+
+            // Get all unique keys except ai_result
+            const allKeys = new Set();
+            golden.forEach(row => {
+                Object.keys(row).forEach(key => {
+                    if (key !== 'ai_result') allKeys.add(key);
+                });
+            });
+            const keys = Array.from(allKeys);
+
+            // Build table (read-only view)
+            let tableHTML = '<table class="results-table"><thead><tr>';
+            tableHTML += '<th>#</th>';
+            
+            keys.forEach(key => {
+                tableHTML += `<th>${key.replace(/_/g, ' ').toUpperCase()}</th>`;
+            });
+            tableHTML += '<th>GOLDEN RESULT</th>';
+            tableHTML += '</tr></thead><tbody>';
+
+            golden.forEach((row, index) => {
+                tableHTML += '<tr>';
+                tableHTML += `<td class="result-id">#${index + 1}</td>`;
+                
+                keys.forEach(key => {
+                    const value = row[key] || '';
+                    const displayValue = typeof value === 'string' && value.length > 100 
+                        ? value.substring(0, 100) + '...' 
+                        : value;
+                    tableHTML += `<td><div class="result-content truncate" title="${value}">${displayValue}</div></td>`;
+                });
+                
+                const goldenResult = row.ai_result || 'N/A';
+                tableHTML += `<td><span class="ai-result-value" style="background: #d1fae5; border: 1px solid #10b981;">${goldenResult}</span></td>`;
+                tableHTML += '</tr>';
+            });
+
+            tableHTML += '</tbody></table>';
+            container.innerHTML = tableHTML;
+        }
+
+        function useSampleQuery(type) {
+            const table = document.getElementById('tableSelect').value;
+            const textarea = document.getElementById('queryInput');
+            
+            const queries = {
+                'classify': `SELECT *, AI_CLASSIFY(review, ARRAY['positive', 'negative', 'neutral']) as ai_result FROM ${table || 'customer_reviews'}`,
+                'complete': `SELECT *, AI_COMPLETE('Summarize this: ' || specs) as ai_result FROM ${table || 'product_descriptions'}`,
+                'filter': `SELECT * FROM ${table || 'customer_feedback'} WHERE AI_FILTER(text, 'needs response or action')`
+            };
+            
+            textarea.value = queries[type];
+        }
+
+        async function executeQuery() {
+            const table = document.getElementById('tableSelect').value;
+            const query = document.getElementById('queryInput').value;
+
+            if (!table) {
+                alert('Please select a table first');
+                return;
+            }
+
+            if (!query) {
+                alert('Please enter a query');
+                return;
+            }
+
+            try {
+                // Prepare request body
+                const requestBody = { 
+                    table_name: table, 
+                    query: query 
+                };
+                
+                // If a golden dataset was loaded, include it so backend can associate with this execution
+                if (goldenDatasetLoaded && goldenData.length > 0) {
+                    requestBody.loaded_golden_data = goldenData;
+                }
+                
+                const response = await fetch('/api/execute', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(requestBody)
+                });
+
+                const data = await response.json();
+                
+                if (data.error) {
+                    document.getElementById('noResults').innerHTML = `<div class="error-box">${data.error}</div>`;
+                    return;
+                }
+
+                currentExecutionId = data.execution_id;
+                currentResults = data.results;
+                currentQuery = query;
+                currentTableName = table;
+
+                displayResults(data.results);
+                
+                // If user is in "Create New Golden Dataset" view, update the editor
+                if (!document.getElementById('goldenCreationSection').classList.contains('hidden')) {
+                    goldenData = JSON.parse(JSON.stringify(data.results)); // Deep copy
+                    displayGoldenEditor(goldenData);
+                    document.getElementById('saveGoldenBtn').disabled = false;
+                    updateGoldenStatus('new');
+                }
+                
+                // Enable evaluate button if golden dataset is loaded
+                if (goldenDatasetLoaded) {
+                    document.getElementById('evaluateBtn').disabled = false;
+                }
+                
+                document.getElementById('evaluationResults').classList.add('hidden');
+
+            } catch (error) {
+                console.error('Error executing query:', error);
+                document.getElementById('noResults').innerHTML = `<div class="error-box">Error: ${error.message}</div>`;
+            }
+        }
+
+        function updateGoldenStatus(status) {
+            const badge = document.getElementById('goldenStatusBadge');
+            const text = document.getElementById('goldenStatusText');
+            
+            if (status === 'new') {
+                badge.innerHTML = '<span class="badge-new">NEW</span> ';
+                text.textContent = 'Creating a new golden dataset. Edit the AI results below.';
+            } else if (status === 'loaded') {
+                badge.innerHTML = '<span class="badge-exists">LOADED</span> ';
+                text.textContent = 'Loaded existing golden dataset. You can still edit the values.';
+            }
+        }
+
+        function displayResults(results) {
+            const container = document.getElementById('resultsList');
+            const noResults = document.getElementById('noResults');
+            const resultsDiv = document.getElementById('executionResults');
+
+            if (!results || results.length === 0) {
+                noResults.innerHTML = '<div class="info-box">No results returned from query.</div>';
+                resultsDiv.classList.add('hidden');
+                return;
+            }
+
+            noResults.classList.add('hidden');
+            resultsDiv.classList.remove('hidden');
+
+            // Get all unique keys except ai_result
+            const allKeys = new Set();
+            results.forEach(row => {
+                Object.keys(row).forEach(key => {
+                    if (key !== 'ai_result') allKeys.add(key);
+                });
+            });
+            const keys = Array.from(allKeys);
+
+            // Build table
+            let tableHTML = '<table class="results-table"><thead><tr>';
+            tableHTML += '<th>#</th>';
+            
+            // Add column headers
+            keys.forEach(key => {
+                tableHTML += `<th>${key.replace(/_/g, ' ').toUpperCase()}</th>`;
+            });
+            tableHTML += '<th>AI RESULT</th>';
+            tableHTML += '</tr></thead><tbody>';
+
+            // Add rows
+            results.forEach((row, index) => {
+                tableHTML += '<tr>';
+                tableHTML += `<td class="result-id">#${index + 1}</td>`;
+                
+                // Add data columns
+                keys.forEach(key => {
+                    const value = row[key] || '';
+                    const displayValue = typeof value === 'string' && value.length > 100 
+                        ? value.substring(0, 100) + '...' 
+                        : value;
+                    tableHTML += `<td><div class="result-content truncate" title="${value}">${displayValue}</div></td>`;
+                });
+                
+                // Add AI result
+                const aiResult = row.ai_result || 'N/A';
+                tableHTML += `<td><span class="ai-result-value">${aiResult}</span></td>`;
+                tableHTML += '</tr>';
+            });
+
+            tableHTML += '</tbody></table>';
+            container.innerHTML = tableHTML;
+        }
+
+        function displayGoldenEditor(golden) {
+            const container = document.getElementById('goldenList');
+            const noGolden = document.getElementById('noGolden');
+            const goldenDiv = document.getElementById('goldenEditor');
+
+            if (!golden || golden.length === 0) {
+                noGolden.classList.remove('hidden');
+                goldenDiv.classList.add('hidden');
+                return;
+            }
+
+            noGolden.classList.add('hidden');
+            goldenDiv.classList.remove('hidden');
+
+            // Get all unique keys except ai_result
+            const allKeys = new Set();
+            golden.forEach(row => {
+                Object.keys(row).forEach(key => {
+                    if (key !== 'ai_result') allKeys.add(key);
+                });
+            });
+            const keys = Array.from(allKeys);
+
+            // Build table
+            let tableHTML = '<table class="results-table"><thead><tr>';
+            tableHTML += '<th>#</th>';
+            
+            // Add column headers
+            keys.forEach(key => {
+                tableHTML += `<th>${key.replace(/_/g, ' ').toUpperCase()}</th>`;
+            });
+            tableHTML += '<th>AI RESULT</th>';
+            tableHTML += '<th style="min-width: 200px;">GOLDEN RESULT (Edit)</th>';
+            tableHTML += '</tr></thead><tbody>';
+
+            // Add rows
+            golden.forEach((row, index) => {
+                tableHTML += '<tr>';
+                tableHTML += `<td class="result-id">#${index + 1}</td>`;
+                
+                // Add data columns
+                keys.forEach(key => {
+                    const value = row[key] || '';
+                    const displayValue = typeof value === 'string' && value.length > 100 
+                        ? value.substring(0, 100) + '...' 
+                        : value;
+                    tableHTML += `<td><div class="result-content truncate" title="${value}">${displayValue}</div></td>`;
+                });
+                
+                // Add AI result (read-only)
+                const aiResult = row.ai_result || 'N/A';
+                tableHTML += `<td><span class="ai-result-value">${aiResult}</span></td>`;
+                
+                // Add editable golden result
+                tableHTML += `<td><input type="text" class="result-input" value="${aiResult}" 
+                    data-index="${index}" 
+                    data-original="${aiResult}"
+                    onchange="updateGoldenResult(this)"
+                    oninput="highlightModified(this)"
+                    placeholder="Edit to set correct value"></td>`;
+                
+                tableHTML += '</tr>';
+            });
+
+            tableHTML += '</tbody></table>';
+            container.innerHTML = tableHTML;
+        }
+
+        function updateGoldenResult(input) {
+            const index = parseInt(input.dataset.index);
+            goldenData[index].ai_result = input.value;
+        }
+
+        function highlightModified(input) {
+            const original = input.dataset.original;
+            if (input.value !== original) {
+                input.classList.add('golden-modified');
+            } else {
+                input.classList.remove('golden-modified');
+            }
+        }
+
+        async function saveGolden() {
+            if (!currentExecutionId || !goldenData.length) {
+                alert('No data to save');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/golden', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        execution_id: currentExecutionId,
+                        golden_data: goldenData
+                    })
+                });
+
+                const data = await response.json();
+                
+                if (data.error) {
+                    document.getElementById('goldenSaveStatus').innerHTML = 
+                        `<div class="error-box">${data.error}</div>`;
+                    return;
+                }
+
+                document.getElementById('goldenSaveStatus').innerHTML = 
+                    '<div class="success-box">✓ Golden dataset saved successfully! You can now proceed to Step 5 for evaluation.</div>';
+                
+                // Refresh the golden datasets dropdown for future use
+                await loadGoldenDatasets();
+                
+                // Enable evaluation
+                goldenDatasetLoaded = true;
+                document.getElementById('evaluateBtn').disabled = false;
+
+            } catch (error) {
+                console.error('Error saving golden data:', error);
+                document.getElementById('goldenSaveStatus').innerHTML = 
+                    `<div class="error-box">Error: ${error.message}</div>`;
+            }
+        }
+
+        async function evaluateResults() {
+            if (!currentExecutionId) {
+                alert('No execution to evaluate');
+                return;
+            }
+
+            const evalType = document.querySelector('input[name="evalType"]:checked').value;
+
+            try {
+                const response = await fetch('/api/evaluate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        execution_id: currentExecutionId,
+                        type: evalType
+                    })
+                });
+
+                const data = await response.json();
+                
+                if (data.error) {
+                    alert(data.error);
+                    return;
+                }
+
+                displayEvaluationResults(data, evalType);
+
+            } catch (error) {
+                console.error('Error evaluating:', error);
+                alert('Error during evaluation: ' + error.message);
+            }
+        }
+
+        function displayEvaluationResults(data, evalType) {
+            const resultsDiv = document.getElementById('evaluationResults');
+            const metricsDiv = document.getElementById('metricsDisplay');
+            const comparisonDiv = document.getElementById('comparisonDisplay');
+
+            resultsDiv.classList.remove('hidden');
+
+            if (evalType === 'classification') {
+                // Display classification metrics
+                const metrics = data.metrics;
+                let metricsHTML = '<div class="metrics-grid">';
+                
+                const mainMetrics = ['accuracy', 'overall_precision', 'overall_recall', 'overall_f1'];
+                mainMetrics.forEach(key => {
+                    if (metrics[key] !== undefined) {
+                        const value = metrics[key];
+                        let colorClass = 'good';
+                        if (value < 0.5) colorClass = 'poor';
+                        else if (value < 0.7) colorClass = 'warning';
+                        
+                        metricsHTML += `
+                            <div class="metric-card">
+                                <div class="metric-label">${key.replace(/_/g, ' ')}</div>
+                                <div class="metric-value ${colorClass}">${(value * 100).toFixed(1)}%</div>
+                            </div>
+                        `;
+                    }
+                });
+                metricsHTML += '</div>';
+                metricsDiv.innerHTML = metricsHTML;
+
+                // Display sample comparisons
+                if (data.sample_comparisons) {
+                    let compHTML = '<h3 style="margin: 20px 0 10px 0;">Sample Comparisons</h3>';
+                    compHTML += '<table class="comparison-table"><thead><tr><th>Match</th><th>Predicted</th><th>Golden</th></tr></thead><tbody>';
+                    
+                    data.sample_comparisons.forEach(comp => {
+                        compHTML += `
+                            <tr>
+                                <td><span class="match-indicator ${comp.match ? 'match' : 'mismatch'}"></span></td>
+                                <td>${comp.predicted}</td>
+                                <td>${comp.golden}</td>
+                            </tr>
+                        `;
+                    });
+                    
+                    compHTML += '</tbody></table>';
+                    comparisonDiv.innerHTML = compHTML;
+                }
+
+            } else {
+                // Display LLM as judge metrics
+                const metrics = data.metrics;
+                let metricsHTML = '<div class="metrics-grid">';
+                
+                for (const [key, value] of Object.entries(metrics)) {
+                    let colorClass = 'good';
+                    if (value < 50) colorClass = 'poor';
+                    else if (value < 70) colorClass = 'warning';
+                    
+                    metricsHTML += `
+                        <div class="metric-card">
+                            <div class="metric-label">${key.replace(/_/g, ' ').replace('avg ', '')}</div>
+                            <div class="metric-value ${colorClass}">${value}%</div>
+                        </div>
+                    `;
+                }
+                metricsHTML += '</div>';
+                metricsDiv.innerHTML = metricsHTML;
+
+                // Display sample evaluations
+                if (data.sample_evaluations) {
+                    let compHTML = '<h3 style="margin: 20px 0 10px 0;">Sample Evaluations</h3>';
+                    compHTML += '<table class="comparison-table"><thead><tr><th>Relevance</th><th>Coherence</th><th>Fluency</th><th>Overall</th><th>Feedback</th></tr></thead><tbody>';
+                    
+                    data.sample_evaluations.forEach(eval => {
+                        compHTML += `
+                            <tr>
+                                <td>${eval.relevance}%</td>
+                                <td>${eval.coherence}%</td>
+                                <td>${eval.fluency}%</td>
+                                <td>${eval.overall_score}%</td>
+                                <td>${eval.feedback.join('; ')}</td>
+                            </tr>
+                        `;
+                    });
+                    
+                    compHTML += '</tbody></table>';
+                    comparisonDiv.innerHTML = compHTML;
+                }
+            }
+        }
+    </script>
+</body>
+</html>
+