updates

app.py

@@ -7,6 +7,7 @@ custom_css = """
     --martian-orange: #FF6B4A;
     --martian-black: #0A0A0A;
     --martian-gray-dark: #1A1A1A;
+    --martian-gray-medium: #2A2A2A;
 }
 
 .gradio-container {
@@ -14,29 +15,108 @@ custom_css = """
     background-color: var(--martian-black) !important;
 }
 
+/* Cute HuggingFace-style tabs */
+.tab-nav {
+    border-bottom: 2px solid var(--martian-gray-dark) !important;
+    background: var(--martian-gray-dark) !important;
+    padding: 0.5rem 1rem !important;
+    border-radius: 12px 12px 0 0 !important;
+}
+
 .tab-nav button {
-    font-size: 1.1rem !important;
+    font-size: 1rem !important;
     font-weight: 600 !important;
     padding: 0.75rem 1.5rem !important;
+    border-radius: 8px !important;
+    margin: 0 0.25rem !important;
+    transition: all 0.3s ease !important;
+    color: #888 !important;
+}
+
+.tab-nav button:hover {
+    background: var(--martian-gray-medium) !important;
+    color: #E0E0E0 !important;
 }
 
 .tab-nav button.selected {
-    border-bottom: 3px solid var(--martian-orange) !important;
-    color: var(--martian-orange) !important;
+    background: var(--martian-orange) !important;
+    color: white !important;
+    box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3) !important;
+}
+
+/* Cute footer */
+.footer {
+    text-align: center;
+    padding: 2rem 0;
+    margin-top: 3rem;
+    border-top: 2px solid var(--martian-gray-dark);
+    background: var(--martian-gray-dark);
+    border-radius: 12px;
+}
+
+.footer-logo {
+    width: 120px;
+    margin-bottom: 1rem;
+    opacity: 0.9;
+    transition: opacity 0.3s ease;
+}
+
+.footer-logo:hover {
+    opacity: 1;
+}
+
+.footer-text {
+    color: #999;
+    font-size: 0.95rem;
+    margin: 0.5rem 0;
+}
+
+.footer-text .heart {
+    color: var(--martian-orange);
+    animation: heartbeat 1.5s ease-in-out infinite;
+}
+
+@keyframes heartbeat {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.1); }
 }
 """
 
-with gr.Blocks(css=custom_css, title="TinySQL Demo") as demo:
+with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as demo:
+    # Martian Logo Header
+    gr.HTML("""
+        <div style="text-align: center; padding: 2rem 0 1rem 0;">
+            <img src="https://withmartian.com/logo.png" alt="Martian" style="height: 60px; margin-bottom: 1rem;" onerror="this.style.display='none'">
+            <h1 style="font-size: 2.5rem; font-weight: 700; color: #FF6B4A; margin: 0;">TinySQL</h1>
+            <p style="color: #999; font-size: 1.1rem; margin-top: 0.5rem;">Mechanistic Interpretability for Text-to-SQL</p>
+        </div>
+    """)
+    
     # Shared state for passing data between tabs
     shared_instruction = gr.State("")
     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
+    gr.HTML("""
+        <div class="footer">
+            <img src="https://withmartian.com/logo.png" alt="Martian" class="footer-logo" onerror="this.style.display='none'">
+            <p class="footer-text">
+                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>
+            </p>
+        </div>
+    """)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(ssr_mode=False)

tinysql_dataset_viewer.py

@@ -2,7 +2,6 @@ import gradio as gr
 from datasets import load_dataset
 import pandas as pd
 
-# Datasets to include
 DATASETS = {
     "CS1": "withmartian/cs1_dataset",
     "CS2": "withmartian/cs2_dataset",
@@ -15,11 +14,9 @@ DATASETS = {
 COLUMNS = ["create_statement", "english_prompt", "sql_statement"]
 
 def load_preview(dataset_name):
-    """Load first 500 rows of selected dataset"""
     try:
         ds = load_dataset(DATASETS[dataset_name], split="train")
         df = pd.DataFrame(ds).head(500)
-        # Filter to only the columns we want
         if all(col in df.columns for col in COLUMNS):
             df = df[COLUMNS]
         return df
@@ -27,7 +24,6 @@ def load_preview(dataset_name):
         return pd.DataFrame({"Error": [str(e)]})
 
 def filter_dataframe(df, search_query):
-    """Filter dataframe by search query across all columns"""
     if not search_query or df.empty or "Error" in df.columns:
         return df
     
@@ -37,64 +33,251 @@ 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):
-    """Dataset viewer component with ability to send examples to model demo"""
-    
     gr.HTML("""
-        <div class="header-section" style="text-align: center; padding: 2.5rem 1.5rem; background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%); border-radius: 16px; margin-bottom: 2rem; color: white;">
-            <h1 style="font-size: 2.2rem; font-weight: 700; margin-bottom: 0.75rem;">TinySQL Dataset Viewer</h1>
-            <p style="font-size: 1.1rem; opacity: 0.9; line-height: 1.6;">
-                Browse dataset previews, search, and filter queries with <span style="color: #FF6B4A; font-weight: 600;">ease</span>
+        <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>
+            <p style="font-size: 1rem; opacity: 0.9; line-height: 1.6; color: #D0D0D0;">
+                Browse, search, and explore TinySQL datasets
             </p>
         </div>
     """)
     
     gr.HTML("""
-        <div class="info-box" style="background: #3A3A3A; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border-left: 4px solid #FF6B4A; color: #E0E0E0;">
-            <strong>Preview Mode:</strong> Showing first 500 rows of each dataset. Use search to filter results in real-time.
+        <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>
     """)
     
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### Dataset Selection")
+            gr.Markdown("### 🎛️ Controls")
+            
             dataset_dropdown = gr.Dropdown(
                 choices=list(DATASETS.keys()),
                 value="CS1",
                 label="Choose Dataset",
-                info="Select a dataset to preview"
+                info="Select complexity level"
             )
             
             gr.HTML("""
-                <div style="background: #3A3A3A; border-radius: 8px; padding: 1rem; margin-top: 1rem; font-size: 0.9rem; color: #D0D0D0;">
-                    <strong>Complexity Levels:</strong><br><br>
-                    <strong>CS1:</strong> Basic SELECT-FROM<br>
-                    <strong>CS2:</strong> Adds ORDER BY<br>
-                    <strong>CS3:</strong> Aggregations<br>
-                    <strong>CS4:</strong> Adds WHERE filters<br><br>
-                    <strong>Synonyms:</strong> Natural language variations
+                <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>
+                    <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>
+                    <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="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>
                 </div>
             """)
             
-            load_btn = gr.Button("Load Dataset", variant="primary", size="lg")
+            load_btn = gr.Button("📥 Load Dataset", variant="primary", size="lg", elem_classes="cute-button")
             
+            gr.Markdown("### 🎯 Test Example")
             row_selector = gr.Number(
-                label="Select Row to Test",
+                label="Row Number",
                 value=0,
                 minimum=0,
                 precision=0,
-                info="Enter row number to send to Model Demo"
+                info="Pick a row to test"
             )
             
-            send_to_model_btn = gr.Button("🚀 Run This Example in Model Demo", variant="primary")
+            send_to_model_btn = gr.Button("🚀 Run in Model Demo", variant="primary", elem_classes="cute-button")
         
         with gr.Column(scale=3):
-            gr.Markdown("### Dataset Preview (First 500 Rows)")
+            gr.Markdown("### 📋 Dataset Preview")
             
             search_box = gr.Textbox(
-                label="Search",
+                label="🔍 Search",
                 placeholder="Search across all columns...",
-                lines=1
+                lines=1,
+                elem_classes="search-box"
             )
             
             df_display = gr.Dataframe(
@@ -102,20 +285,22 @@ def dataset_viewer(shared_instruction, shared_schema):
                 datatype=["str", "str", "str"],
                 interactive=False,
                 wrap=True,
-                label="Results"
+                label="Results",
+                elem_classes="dataframe-container"
             )
             
-            stats_display = gr.Markdown("Click 'Load Dataset' to begin")
+            stats_display = gr.Markdown(
+                "👆 Click **Load Dataset** to begin exploring",
+                elem_classes="stats-info"
+            )
     
-    # Store the loaded dataframe
     df_state = gr.State(value=pd.DataFrame())
     
-    # Load dataset
     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 | **Columns:** {', '.join(COLUMNS)}"
+        stats = f"✅ **Loaded {len(df)} rows** • {', '.join(COLUMNS)}"
         return df, df, stats
     
     load_btn.click(
@@ -124,15 +309,14 @@ def dataset_viewer(shared_instruction, shared_schema):
         outputs=[df_state, df_display, stats_display]
     )
     
-    # Search functionality
     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(
@@ -141,16 +325,15 @@ def dataset_viewer(shared_instruction, shared_schema):
         outputs=[df_display, stats_display]
     )
     
-    # Send example to model demo
     def send_to_model(df, row_num):
         if df.empty or row_num >= len(df):
-            return "", "", "⚠️ Invalid row number 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,
@@ -158,7 +341,4 @@ def dataset_viewer(shared_instruction, shared_schema):
         outputs=[shared_instruction, shared_schema, stats_display]
     )
     
-    return {
-        'df_state': df_state,
-        'df_display': df_display
-    }
+    return {'df_state': df_state, 'df_display': df_display}