updates

app.py

@@ -15,7 +15,7 @@ custom_css = """
     background-color: var(--martian-black) !important;
 }
 
-/* Cute HuggingFace-style tabs */
+/* Better tabs - bold, bigger, no icons */
 .tab-nav {
     border-bottom: 2px solid var(--martian-gray-dark) !important;
     background: var(--martian-gray-dark) !important;
@@ -24,9 +24,9 @@ custom_css = """
 }
 
 .tab-nav button {
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    padding: 0.75rem 1.5rem !important;
+    font-size: 1.2rem !important;
+    font-weight: 700 !important;
+    padding: 1rem 2rem !important;
     border-radius: 8px !important;
     margin: 0 0.25rem !important;
     transition: all 0.3s ease !important;
@@ -44,7 +44,46 @@ custom_css = """
     box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3) !important;
 }
 
-/* Cute footer */
+/* Orange labels - remove all purple */
+label, .label-wrap {
+    color: #E0E0E0 !important;
+}
+
+.label-wrap span {
+    background: var(--martian-orange) !important;
+    color: white !important;
+    padding: 0.35rem 0.75rem !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
+}
+
+/* Orange sliders */
+input[type="range"] {
+    background: var(--martian-gray-medium) !important;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    background: var(--martian-orange) !important;
+    cursor: pointer !important;
+}
+
+input[type="range"]::-moz-range-thumb {
+    background: var(--martian-orange) !important;
+    cursor: pointer !important;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, var(--martian-orange) 0%, var(--martian-gray-light) 100%) !important;
+}
+
+/* Remove any purple/blue colors */
+.primary, .secondary {
+    background: var(--martian-orange) !important;
+    border-color: var(--martian-orange) !important;
+}
+
+/* Footer */
 .footer {
     text-align: center;
     padding: 2rem 0;
@@ -97,10 +136,10 @@ with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as
     shared_schema = gr.State("")
     
     with gr.Tabs():
-        with gr.Tab("📊 Dataset Viewer"):
+        with gr.Tab("Dataset Viewer"):
             viewer_components = dataset_viewer(shared_instruction, shared_schema)
         
-        with gr.Tab("🤖 Model Demo"):
+        with gr.Tab("Model Demo"):
             model_components = model_demo(shared_instruction, shared_schema)
     
     # Footer with Martian branding
@@ -111,9 +150,9 @@ with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as
                 Brought to you with <span class="heart">❤️</span> from the Martian science team
             </p>
             <p class="footer-text" style="font-size: 0.85rem; margin-top: 1rem;">
-                <a href="https://arxiv.org/abs/2503.12730" style="color: #FF6B4A; text-decoration: none;">📄 Paper</a> • 
-                <a href="https://github.com/withmartian/TinySQL" style="color: #FF6B4A; text-decoration: none;">💻 Code</a> • 
-                <a href="https://huggingface.co/collections/withmartian/tinysql-6760e92748b63fa56a6ffc9f" style="color: #FF6B4A; text-decoration: none;">🤗 Dataset</a>
+                <a href="https://arxiv.org/abs/2503.12730" style="color: #FF6B4A; text-decoration: none;">Paper</a> • 
+                <a href="https://github.com/withmartian/TinySQL" style="color: #FF6B4A; text-decoration: none;">Code</a> • 
+                <a href="https://huggingface.co/collections/withmartian/tinysql-6760e92748b63fa56a6ffc9f" style="color: #FF6B4A; text-decoration: none;">Dataset</a>
             </p>
         </div>
     """)

tinysql_dataset_viewer.py

@@ -33,180 +33,10 @@ def filter_dataframe(df, search_query):
     )
     return df[mask]
 
-# HuggingFace-style CSS
-hf_style_css = """
-/* HuggingFace-inspired table styling */
-.dataframe-container {
-    border-radius: 12px !important;
-    overflow: hidden !important;
-    border: 1px solid #2A2A2A !important;
-    background: #1A1A1A !important;
-}
-
-.dataframe table {
-    border-collapse: separate !important;
-    border-spacing: 0 !important;
-    width: 100% !important;
-}
-
-.dataframe thead {
-    background: linear-gradient(135deg, #2A2A2A 0%, #3A3A3A 100%) !important;
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 10 !important;
-}
-
-.dataframe thead th {
-    color: #FF6B4A !important;
-    font-weight: 600 !important;
-    text-align: left !important;
-    padding: 1rem !important;
-    border-bottom: 2px solid #FF6B4A !important;
-    font-size: 0.9rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
-}
-
-.dataframe tbody tr {
-    background: #1A1A1A !important;
-    transition: all 0.2s ease !important;
-    border-bottom: 1px solid #2A2A2A !important;
-}
-
-.dataframe tbody tr:hover {
-    background: #2A2A2A !important;
-    box-shadow: 0 2px 8px rgba(255, 107, 74, 0.1) !important;
-    transform: scale(1.01) !important;
-}
-
-.dataframe tbody td {
-    padding: 0.75rem 1rem !important;
-    color: #D0D0D0 !important;
-    font-size: 0.9rem !important;
-    line-height: 1.5 !important;
-}
-
-.dataframe tbody tr:nth-child(even) {
-    background: #181818 !important;
-}
-
-.dataframe tbody tr:nth-child(even):hover {
-    background: #2A2A2A !important;
-}
-
-/* Cute badges for dataset types */
-.dataset-badge {
-    display: inline-block;
-    padding: 0.25rem 0.75rem;
-    border-radius: 12px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    margin: 0.25rem;
-}
-
-.badge-basic {
-    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
-    color: white;
-}
-
-.badge-medium {
-    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
-    color: white;
-}
-
-.badge-advanced {
-    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
-    color: white;
-}
-
-/* Cute info boxes */
-.cute-info-box {
-    background: linear-gradient(135deg, #2A2A2A 0%, #3A3A3A 100%);
-    border-radius: 16px;
-    padding: 1.5rem;
-    margin: 1rem 0;
-    border: 2px solid #FF6B4A;
-    box-shadow: 0 4px 12px rgba(255, 107, 74, 0.15);
-    position: relative;
-    overflow: hidden;
-}
-
-.cute-info-box::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 4px;
-    height: 100%;
-    background: linear-gradient(180deg, #FF6B4A 0%, #FF5733 100%);
-}
-
-.cute-info-box h3 {
-    color: #FF6B4A;
-    font-size: 1.1rem;
-    margin-bottom: 0.5rem;
-    font-weight: 600;
-}
-
-.cute-info-box p {
-    color: #D0D0D0;
-    line-height: 1.6;
-    margin: 0;
-}
-
-/* Loading animation */
-.loading {
-    display: inline-block;
-    width: 20px;
-    height: 20px;
-    border: 3px solid #3A3A3A;
-    border-top: 3px solid #FF6B4A;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
-/* Cute buttons */
-.cute-button {
-    background: linear-gradient(135deg, #FF6B4A 0%, #FF5733 100%) !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 0.75rem 1.5rem !important;
-    font-weight: 600 !important;
-    color: white !important;
-    box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3) !important;
-    transition: all 0.3s ease !important;
-}
-
-.cute-button:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 16px rgba(255, 107, 74, 0.4) !important;
-}
-
-/* Search box */
-.search-box input {
-    background: #2A2A2A !important;
-    border: 2px solid #3A3A3A !important;
-    border-radius: 12px !important;
-    padding: 0.75rem !important;
-    color: #E0E0E0 !important;
-    transition: all 0.3s ease !important;
-}
-
-.search-box input:focus {
-    border-color: #FF6B4A !important;
-    box-shadow: 0 0 0 3px rgba(255, 107, 74, 0.1) !important;
-}
-"""
-
 def dataset_viewer(shared_instruction, shared_schema):
     gr.HTML("""
         <div style="text-align: center; padding: 2rem 1.5rem; background: linear-gradient(135deg, #2A2A2A 0%, #3A3A3A 100%); border-radius: 16px; margin-bottom: 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
-            <h2 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: #FF6B4A;">📊 Dataset Explorer</h2>
+            <h2 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: #FF6B4A;">Dataset Explorer</h2>
             <p style="font-size: 1rem; opacity: 0.9; line-height: 1.6; color: #D0D0D0;">
                 Browse, search, and explore TinySQL datasets
             </p>
@@ -214,15 +44,16 @@ def dataset_viewer(shared_instruction, shared_schema):
     """)
     
     gr.HTML("""
-        <div class="cute-info-box">
-            <h3>🎯 Quick Start</h3>
-            <p>Select a dataset, click "Load Dataset", then use search to filter. Pick any row and send it to the Model Demo tab!</p>
+        <div style="background: linear-gradient(135deg, #2A2A2A 0%, #3A3A3A 100%); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; border-left: 4px solid #FF6B4A;">
+            <p style="color: #D0D0D0; margin: 0; line-height: 1.6;">
+                <strong style="color: #FF6B4A;">Quick Start:</strong> Select a dataset, click Load Dataset, then use search to filter. Pick any row and send it to the Model Demo tab.
+            </p>
         </div>
     """)
     
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### 🎛️ Controls")
+            gr.Markdown("### Controls")
             
             dataset_dropdown = gr.Dropdown(
                 choices=list(DATASETS.keys()),
@@ -231,35 +62,44 @@ def dataset_viewer(shared_instruction, shared_schema):
                 info="Select complexity level"
             )
             
+            # Better formatted model guide card
             gr.HTML("""
-                <div style="background: #2A2A2A; border-radius: 12px; padding: 1.25rem; margin: 1rem 0; border: 1px solid #3A3A3A;">
-                    <h4 style="color: #FF6B4A; font-size: 0.95rem; margin-bottom: 1rem;">Dataset Levels</h4>
-                    <div style="margin: 0.5rem 0;">
-                        <span class="dataset-badge badge-basic">CS1</span>
-                        <span style="color: #999; font-size: 0.85rem; margin-left: 0.5rem;">Basic SELECT</span>
-                    </div>
-                    <div style="margin: 0.5rem 0;">
-                        <span class="dataset-badge badge-basic">CS2</span>
-                        <span style="color: #999; font-size: 0.85rem; margin-left: 0.5rem;">+ ORDER BY</span>
+                <div style="background: #2A2A2A; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border: 1px solid #3A3A3A;">
+                    <h4 style="color: #FF6B4A; font-size: 1rem; margin: 0 0 1.25rem 0; font-weight: 700; border-bottom: 2px solid #3A3A3A; padding-bottom: 0.75rem;">Dataset Complexity Levels</h4>
+                    
+                    <div style="margin-bottom: 1.5rem;">
+                        <div style="color: #4CAF50; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem;">Basic Level</div>
+                        <div style="margin-left: 1rem; color: #999; font-size: 0.85rem; line-height: 1.8;">
+                            <div><strong style="color: #D0D0D0;">CS1:</strong> Basic SELECT-FROM queries</div>
+                            <div><strong style="color: #D0D0D0;">CS2:</strong> Adds ORDER BY clauses</div>
+                        </div>
                     </div>
-                    <div style="margin: 0.5rem 0;">
-                        <span class="dataset-badge badge-medium">CS3</span>
-                        <span style="color: #999; font-size: 0.85rem; margin-left: 0.5rem;">+ Aggregations</span>
+                    
+                    <div style="margin-bottom: 1.5rem;">
+                        <div style="color: #FF9800; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem;">Intermediate Level</div>
+                        <div style="margin-left: 1rem; color: #999; font-size: 0.85rem; line-height: 1.8;">
+                            <div><strong style="color: #D0D0D0;">CS3:</strong> Aggregations (COUNT, SUM, AVG)</div>
+                            <div><strong style="color: #D0D0D0;">CS4:</strong> Adds WHERE filters</div>
+                        </div>
                     </div>
-                    <div style="margin: 0.5rem 0;">
-                        <span class="dataset-badge badge-advanced">CS4</span>
-                        <span style="color: #999; font-size: 0.85rem; margin-left: 0.5rem;">+ WHERE filters</span>
+                    
+                    <div>
+                        <div style="color: #f44336; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.5rem;">Advanced Level</div>
+                        <div style="margin-left: 1rem; color: #999; font-size: 0.85rem; line-height: 1.8;">
+                            <div><strong style="color: #D0D0D0;">CS5:</strong> Multi-table JOINs</div>
+                        </div>
                     </div>
-                    <div style="margin: 0.5rem 0; padding-top: 0.5rem; border-top: 1px solid #3A3A3A;">
-                        <span style="color: #FF6B4A; font-size: 0.85rem;">✨ Synonyms</span>
-                        <span style="color: #999; font-size: 0.85rem; margin-left: 0.5rem;">Natural variations</span>
+                    
+                    <div style="margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid #3A3A3A;">
+                        <div style="color: #FF6B4A; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem;">Synonym Variants</div>
+                        <div style="color: #999; font-size: 0.85rem; line-height: 1.6;">Natural language variations with semantic mappings</div>
                     </div>
                 </div>
             """)
             
-            load_btn = gr.Button("📥 Load Dataset", variant="primary", size="lg", elem_classes="cute-button")
+            load_btn = gr.Button("Load Dataset", variant="primary", size="lg")
             
-            gr.Markdown("### 🎯 Test Example")
+            gr.Markdown("### Test Example")
             row_selector = gr.Number(
                 label="Row Number",
                 value=0,
@@ -268,18 +108,74 @@ def dataset_viewer(shared_instruction, shared_schema):
                 info="Pick a row to test"
             )
             
-            send_to_model_btn = gr.Button("🚀 Run in Model Demo", variant="primary", elem_classes="cute-button")
+            send_to_model_btn = gr.Button("Run in Model Demo", variant="primary")
         
         with gr.Column(scale=3):
-            gr.Markdown("### 📋 Dataset Preview")
+            gr.Markdown("### Dataset Preview")
             
             search_box = gr.Textbox(
-                label="🔍 Search",
+                label="Search",
                 placeholder="Search across all columns...",
-                lines=1,
-                elem_classes="search-box"
+                lines=1
             )
             
+            # HuggingFace-style table
+            gr.HTML("""
+                <style>
+                /* True HuggingFace-style table */
+                .dataframe-container {
+                    border-radius: 8px !important;
+                    overflow: hidden !important;
+                    border: 1px solid #374151 !important;
+                }
+
+                .dataframe table {
+                    border-collapse: collapse !important;
+                    width: 100% !important;
+                    font-size: 0.875rem !important;
+                }
+
+                .dataframe thead {
+                    background: #1f2937 !important;
+                }
+
+                .dataframe thead th {
+                    color: #9ca3af !important;
+                    font-weight: 600 !important;
+                    text-align: left !important;
+                    padding: 0.75rem 1rem !important;
+                    border-bottom: 1px solid #374151 !important;
+                    font-size: 0.75rem !important;
+                    text-transform: uppercase !important;
+                    letter-spacing: 0.05em !important;
+                }
+
+                .dataframe tbody tr {
+                    background: #111827 !important;
+                    border-bottom: 1px solid #1f2937 !important;
+                    transition: background-color 0.15s ease !important;
+                }
+
+                .dataframe tbody tr:hover {
+                    background: #1f2937 !important;
+                }
+
+                .dataframe tbody td {
+                    padding: 0.75rem 1rem !important;
+                    color: #d1d5db !important;
+                    font-size: 0.875rem !important;
+                    line-height: 1.5 !important;
+                    max-width: 400px !important;
+                    overflow: hidden !important;
+                    text-overflow: ellipsis !important;
+                }
+
+                .dataframe tbody tr:last-child {
+                    border-bottom: none !important;
+                }
+                </style>
+            """)
+            
             df_display = gr.Dataframe(
                 headers=COLUMNS,
                 datatype=["str", "str", "str"],
@@ -289,18 +185,15 @@ def dataset_viewer(shared_instruction, shared_schema):
                 elem_classes="dataframe-container"
             )
             
-            stats_display = gr.Markdown(
-                "👆 Click **Load Dataset** to begin exploring",
-                elem_classes="stats-info"
-            )
+            stats_display = gr.Markdown("Click **Load Dataset** to begin exploring")
     
     df_state = gr.State(value=pd.DataFrame())
     
     def load_and_display(dataset_name):
         df = load_preview(dataset_name)
         if "Error" in df.columns:
-            return df, df, "❌ Error loading dataset"
-        stats = f"✅ **Loaded {len(df)} rows** • {', '.join(COLUMNS)}"
+            return df, df, "Error loading dataset"
+        stats = f"**Loaded {len(df)} rows** • Columns: {', '.join(COLUMNS)}"
         return df, df, stats
     
     load_btn.click(
@@ -311,12 +204,12 @@ def dataset_viewer(shared_instruction, shared_schema):
     
     def search_and_display(df, query):
         if df.empty:
-            return df, "⚠️ Load a dataset first"
+            return df, "Load a dataset first"
         
         filtered_df = filter_dataframe(df, query)
-        stats = f"📊 **Showing {len(filtered_df)} of {len(df)} rows**"
+        stats = f"**Showing {len(filtered_df)} of {len(df)} rows**"
         if query:
-            stats += f" • 🔍 Search: '{query}'"
+            stats += f" • Search: '{query}'"
         return filtered_df, stats
     
     search_box.change(
@@ -327,13 +220,13 @@ def dataset_viewer(shared_instruction, shared_schema):
     
     def send_to_model(df, row_num):
         if df.empty or row_num >= len(df):
-            return "", "", "⚠️ Invalid row or no data loaded"
+            return "", "", "Invalid row or no data loaded"
         
         row = df.iloc[int(row_num)]
         instruction = row['english_prompt'] if 'english_prompt' in row else ""
         schema = row['create_statement'] if 'create_statement' in row else ""
         
-        return instruction, schema, f"✅ **Row {row_num} loaded!** Switch to Model Demo tab 👉"
+        return instruction, schema, f"**Row {row_num} loaded!** Switch to Model Demo tab"
     
     send_to_model_btn.click(
         fn=send_to_model,

tinysql_model_demo.py

@@ -2,7 +2,6 @@ import gradio as gr
 from transformers import AutoTokenizer, AutoModelForCausalLM
 import torch
 
-# Model configurations
 MODELS = {
     "BM1_CS1_Syn (33M)": "withmartian/sql_interp_bm1_cs1_experiment_1.10",
     "BM1_CS2_Syn (33M)": "withmartian/sql_interp_bm1_cs2_experiment_2.10",
@@ -62,39 +61,30 @@ def generate_sql(model_name, instruction, schema, max_length=256, temperature=0.
     except Exception as e:
         return f"Error: {str(e)}"
 
+# Only ONE example
 examples = [
-    [
-        "BM1_CS1_Syn (33M)",
-        "Show me the name and salary from employees",
-        "CREATE TABLE employees (name VARCHAR(100), salary INT, department VARCHAR(100))"
-    ],
     [
         "BM2_CS2_Syn (0.5B)",
         "List worker earnings from highest to lowest",
         "CREATE TABLE employees (name VARCHAR(100), salary INT, department VARCHAR(100))"
     ],
-    [
-        "BM3_CS3_Syn (1B)",
-        "Count how many employees in each department",
-        "CREATE TABLE employees (name VARCHAR(100), salary INT, department VARCHAR(100))"
-    ],
 ]
 
 def model_demo(shared_instruction, shared_schema):
-    """Model demo component that can receive examples from dataset viewer"""
-    
     gr.HTML("""
-        <div style="text-align: center; padding: 3rem 2rem; background: linear-gradient(135deg, #3A3A3A 0%, #4A4A4A 100%); border-radius: 16px; margin-bottom: 2rem; color: white;">
-            <h1 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem;">TinySQL Interactive Demo</h1>
-            <p style="font-size: 1.2rem; opacity: 0.9; line-height: 1.6;">
-                Transform natural language into SQL queries using <span style="color: #FF6B4A; font-weight: 600;">mechanistically interpretable</span> models
+        <div style="text-align: center; padding: 2rem; background: linear-gradient(135deg, #3A3A3A 0%, #4A4A4A 100%); border-radius: 16px; margin-bottom: 1.5rem;">
+            <h2 style="font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: white;">Interactive SQL Generation</h2>
+            <p style="font-size: 1rem; opacity: 0.9; line-height: 1.6; color: #D0D0D0;">
+                Transform natural language into SQL using <span style="color: #FF6B4A; font-weight: 600;">mechanistically interpretable</span> models
             </p>
         </div>
     """)
     
     gr.HTML("""
-        <div style="background: #3A3A3A; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border-left: 4px solid #FF6B4A; color: #E0E0E0;">
-            <strong>How it works:</strong> Select a model, describe your query in plain English, and watch the model generate SQL.
+        <div style="background: linear-gradient(135deg, #2A2A2A 0%, #3A3A3A 100%); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; border-left: 4px solid #FF6B4A;">
+            <p style="color: #D0D0D0; margin: 0; line-height: 1.6;">
+                <strong style="color: #FF6B4A;">How it works:</strong> Select a model, describe your query in plain English, and watch the model generate SQL.
+            </p>
         </div>
     """)
     
@@ -105,51 +95,87 @@ def model_demo(shared_instruction, shared_schema):
                 choices=list(MODELS.keys()),
                 value="BM2_CS2_Syn (0.5B)",
                 label="Model Selection",
-                info="Larger models = better accuracy, slower inference"
+                info="Larger models = better accuracy"
             )
+            
+            # Better formatted guide
             gr.HTML("""
-                <div style="background: #3A3A3A; border-radius: 8px; padding: 1rem; margin-top: 1rem; font-size: 0.9rem; color: #D0D0D0;">
-                    <strong>BM1 (33M)</strong> - Lightning fast, simple queries<br>
-                    <strong>BM2 (0.5B)</strong> - Balanced performance<br>
-                    <strong>BM3 (1B)</strong> - Most accurate, complex queries<br><br>
-                    <strong>Dataset Complexity:</strong><br>
-                    CS1: Basic SELECT-FROM<br>
-                    CS2: Adds ORDER BY<br>
-                    CS3: Aggregations<br>
-                    CS4: Adds WHERE filters<br>
-                    CS5: Multi-table JOINs
+                <div style="background: #2A2A2A; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border: 1px solid #3A3A3A;">
+                    <h4 style="color: #FF6B4A; font-size: 1rem; margin: 0 0 1.25rem 0; font-weight: 700; border-bottom: 2px solid #3A3A3A; padding-bottom: 0.75rem;">Model Guide</h4>
+                    
+                    <div style="margin-bottom: 1rem;">
+                        <div style="color: #4CAF50; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem;">BM1 (33M parameters)</div>
+                        <div style="color: #999; font-size: 0.85rem; margin-left: 1rem;">Lightning fast, ideal for simple queries</div>
+                    </div>
+                    
+                    <div style="margin-bottom: 1rem;">
+                        <div style="color: #FF9800; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem;">BM2 (0.5B parameters)</div>
+                        <div style="color: #999; font-size: 0.85rem; margin-left: 1rem;">Balanced performance and speed</div>
+                    </div>
+                    
+                    <div style="margin-bottom: 1.25rem;">
+                        <div style="color: #f44336; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem;">BM3 (1B parameters)</div>
+                        <div style="color: #999; font-size: 0.85rem; margin-left: 1rem;">Most accurate for complex queries</div>
+                    </div>
+                    
+                    <div style="padding-top: 1rem; border-top: 1px solid #3A3A3A;">
+                        <div style="color: #FF6B4A; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem;">Dataset Complexity</div>
+                        <div style="color: #999; font-size: 0.85rem; line-height: 1.8;">
+                            <div><strong style="color: #D0D0D0;">CS1:</strong> Basic SELECT-FROM</div>
+                            <div><strong style="color: #D0D0D0;">CS2:</strong> Adds ORDER BY</div>
+                            <div><strong style="color: #D0D0D0;">CS3:</strong> Aggregations</div>
+                            <div><strong style="color: #D0D0D0;">CS4:</strong> WHERE filters</div>
+                            <div><strong style="color: #D0D0D0;">CS5:</strong> Multi-table JOINs</div>
+                        </div>
+                    </div>
                 </div>
             """)
 
         with gr.Column(scale=2):
             gr.Markdown("### Your Query")
             instruction = gr.Textbox(
-                label="What do you want to know?",
-                placeholder="e.g., Find all employees earning more than $50,000 sorted by name",
-                lines=2,
-                value=""
+                label="Natural Language Query",
+                placeholder="e.g., Find all employees earning more than 50000 sorted by name",
+                lines=2
             )
-            schema = gr.Textbox(
+            
+            # Database schema as Code (SQL formatted)
+            schema = gr.Code(
                 label="Database Schema",
-                placeholder="CREATE TABLE employees (name VARCHAR, salary INT, department VARCHAR)",
-                lines=3,
-                value="CREATE TABLE employees (name VARCHAR(100), salary INT, department VARCHAR(100))"
+                language="sql",
+                value="CREATE TABLE employees (name VARCHAR(100), salary INT, department VARCHAR(100))",
+                lines=3
             )
             
             with gr.Row():
-                max_length = gr.Slider(64, 512, value=256, step=32, label="Max Length")
-                temperature = gr.Slider(0.0, 1.0, value=0.1, step=0.1, label="Temperature")
+                max_length = gr.Slider(64, 512, value=256, step=32, label="Max Length", info="Token limit")
+                temperature = gr.Slider(0.0, 1.0, value=0.1, step=0.1, label="Temperature", info="Creativity level")
             
             generate_btn = gr.Button("Generate SQL", variant="primary", size="lg")
-            output = gr.Code(label="Generated SQL Query", language="sql", lines=8)
-
-    gr.Markdown("### Example Queries")
-    gr.Examples(examples=examples, inputs=[model_dropdown, instruction, schema])
+            
+            # Output as Code (SQL formatted)
+            output = gr.Code(label="Generated SQL Query", language="sql", lines=6)
 
-    # Update instruction and schema from shared state when values change
-    def update_from_shared(shared_inst, shared_sch):
-        return shared_inst if shared_inst else "", shared_sch if shared_sch else ""
+    gr.Markdown("### Example Query")
     
+    # Custom examples with 2-line schema display
+    gr.HTML("""
+        <div style="background: #2A2A2A; border-radius: 12px; padding: 1.5rem; margin: 1rem 0; border: 1px solid #3A3A3A;">
+            <div style="margin-bottom: 0.75rem;">
+                <strong style="color: #FF6B4A;">Model:</strong> <span style="color: #D0D0D0;">BM2_CS2_Syn (0.5B)</span>
+            </div>
+            <div style="margin-bottom: 0.75rem;">
+                <strong style="color: #FF6B4A;">Query:</strong> <span style="color: #D0D0D0;">List worker earnings from highest to lowest</span>
+            </div>
+            <div>
+                <strong style="color: #FF6B4A;">Schema:</strong>
+                <pre style="background: #1A1A1A; padding: 0.75rem; border-radius: 6px; margin-top: 0.5rem; color: #D0D0D0; font-size: 0.85rem; line-height: 1.5;">CREATE TABLE employees (
+    name VARCHAR(100), salary INT, department VARCHAR(100)
+)</pre>
+            </div>
+        </div>
+    """)
+
     shared_instruction.change(
         fn=lambda x: x,
         inputs=shared_instruction,
@@ -168,8 +194,4 @@ def model_demo(shared_instruction, shared_schema):
         outputs=output
     )
     
-    return {
-        'instruction': instruction,
-        'schema': schema,
-        'output': output
-    }
+    return {'instruction': instruction, 'schema': schema, 'output': output}