data_viewer v1

tinysql_dataset_viewer.py

@@ -1,153 +1,144 @@
-# tinysql_dataset_viewer.py
 import gradio as gr
 from datasets import load_dataset
 import pandas as pd
-import urllib.parse
-import html
-import traceback
 
-HF_DATASETS = {
+# Datasets to include
+DATASETS = {
     "CS1": "withmartian/cs1_dataset",
     "CS2": "withmartian/cs2_dataset",
     "CS3": "withmartian/cs3_dataset",
-    "CS2_synonyms": "withmartian/cs2_dataset_synonyms",
-    "CS3_synonyms": "withmartian/cs3_dataset_synonyms",
-    "CS4_synonyms": "withmartian/cs4_dataset_synonyms",
+    "CS2 Synonyms": "withmartian/cs2_dataset_synonyms",
+    "CS3 Synonyms": "withmartian/cs3_dataset_synonyms",
+    "CS4 Synonyms": "withmartian/cs4_dataset_synonyms",
 }
 
-DEMO_URL = "https://huggingface.co/spaces/abir-hr196/tinysql-demo"
-PREVIEW_LIMIT = 500
-FIELDS = ["english_prompt", "create_statement", "sql_statement"]
-dataset_cache = {}
+# Columns to show
+COLUMNS = ["create_statement", "english_prompt", "sql_statement"]
 
-# ---------------- Helpers ----------------
-def load_preview(dataset_id, limit=PREVIEW_LIMIT):
+# Load small preview of dataset (first 500 rows)
+def load_preview(dataset_name):
     try:
-        ds = load_dataset(dataset_id, split=f"train[:{limit}]")
-    except Exception:
-        full = load_dataset(dataset_id)
-        first_split = list(full.keys())[0] if isinstance(full, dict) else None
-        if first_split:
-            ds = full[first_split].select(range(min(len(full[first_split]), limit)))
-        else:
-            ds = full.select(range(min(len(full), limit)))
-    df = pd.DataFrame(ds)
-    for f in FIELDS:
-        if f not in df.columns:
-            df[f] = ""
-    df = df[FIELDS].copy()
-    df.reset_index(inplace=True)
-    df.rename(columns={"index": "example_index"}, inplace=True)
-    return df
-
-def get_dataset_preview(name):
-    if name in dataset_cache:
-        return dataset_cache[name]
-    df = load_preview(HF_DATASETS[name])
-    dataset_cache[name] = df
-    return df
-
-def make_dropdown_options(df):
-    opts = []
-    for _, row in df.iterrows():
-        idx = int(row["example_index"])
-        prompt = (row["english_prompt"] or "")
-        short = " ".join(prompt.split())[:120] + ("…" if len(prompt) > 120 else "")
-        opts.append((f"{idx} — {short}", idx))
-    return opts
-
-def filter_dataframe(df, query):
-    if not query:
+        ds = load_dataset(DATASETS[dataset_name], split="train")
+        df = pd.DataFrame(ds)[COLUMNS].head(500)
         return df
-    q = str(query).lower()
-    mask = df["english_prompt"].fillna("").str.lower().str.contains(q) | df["sql_statement"].fillna("").str.lower().str.contains(q)
-    return df[mask].reset_index(drop=True)
-
-# ---------------- Gradio callbacks ----------------
-def on_dataset_change(dataset_name):
-    try:
-        df = get_dataset_preview(dataset_name)
-        displayed = df[["example_index", "english_prompt", "sql_statement", "create_statement"]]
-        opts = make_dropdown_options(displayed)
-        return displayed, gr.Dropdown.update(choices=opts, value=opts[0][1] if opts else None), ""
     except Exception as e:
-        tb = traceback.format_exc()
-        return pd.DataFrame([], columns=["id", "english_prompt", "sql_statement", "create_statement"]), gr.Dropdown.update(choices=[], value=None), f"Error loading dataset: {e}\n{tb}"
+        return pd.DataFrame({"Error": [str(e)]})
 
-def on_search(dataset_name, query):
-    try:
-        df = get_dataset_preview(dataset_name)
-        filtered = filter_dataframe(df, query)
-        displayed = filtered[["example_index", "english_prompt", "sql_statement", "create_statement"]]
-        opts = make_dropdown_options(displayed)
-        return displayed, gr.Dropdown.update(choices=opts, value=opts[0][1] if opts else None)
-    except Exception as e:
-        return pd.DataFrame([], columns=["id", "english_prompt", "sql_statement", "create_statement"]), gr.Dropdown.update(choices=[], value=None)
+# CSS: deep black background + orange accents, no purple
+custom_css = """
+:root {
+    --martian-orange: #FF6B4A;
+    --martian-black: #0A0A0A;
+    --martian-gray-dark: #1A1A1A;
+    --martian-gray-medium: #2A2A2A;
+    --martian-gray-light: #3A3A3A;
+    --martian-bg: #0A0A0A;
+}
 
-def send_to_demo(dataset_name, selected_index):
-    try:
-        df = get_dataset_preview(dataset_name)
-        row = df[df["example_index"] == int(selected_index)]
-        if row.empty:
-            return html.escape("Selected example not found.")
-        instr = str(row.iloc[0]["english_prompt"] or "")
-        schema = str(row.iloc[0]["create_statement"] or "")
-        q_instr = urllib.parse.quote_plus(instr)
-        q_schema = urllib.parse.quote_plus(schema)
-        url = f"{DEMO_URL}?instruction={q_instr}&schema={q_schema}"
-        safe_url = html.escape(url, quote=True)
-        html_out = f"""
-        <script>
-            window.open("{safe_url}", "_blank");
-        </script>
-        <div style="color: #E0E0E0; font-family: Inter, sans-serif;">
-            Opened the demo in a new tab. If your browser blocked the popup, <a href="{safe_url}" target="_blank" rel="noreferrer">click here</a>.
-        </div>
-        """
-        return gr.HTML.update(value=html_out)
-    except Exception as e:
-        tb = traceback.format_exc()
-        return gr.HTML.update(value=f"<pre style='color:#ffb3a7'>Error: {html.escape(str(e))}\n{html.escape(tb)}</pre>")
+.gradio-container {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--martian-bg) !important;
+    color: #E0E0E0 !important;
+}
+
+.header-section {
+    text-align: center;
+    padding: 2rem 1rem;
+    background: linear-gradient(135deg, var(--martian-gray-dark) 0%, var(--martian-gray-medium) 100%);
+    border-radius: 12px;
+    margin-bottom: 1.5rem;
+    color: white;
+}
+
+.header-section h1 {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+}
+
+.header-section .subtitle {
+    font-size: 1rem;
+    opacity: 0.85;
+    line-height: 1.5;
+}
+
+.orange-accent {
+    color: var(--martian-orange);
+    font-weight: 600;
+}
+
+button.primary {
+    background: var(--martian-orange) !important;
+    border: none !important;
+    color: white !important;
+}
+
+button.primary:hover {
+    background: #FF5733 !important;
+}
+
+input, select, textarea {
+    background: var(--martian-gray-medium) !important;
+    border-color: var(--martian-gray-light) !important;
+    color: #E0E0E0 !important;
+}
+
+.dataframe-container {
+    background: var(--martian-gray-dark) !important;
+    color: #E0E0E0 !important;
+}
+"""
 
-# ---------------- Dataset viewer function ----------------
 def dataset_viewer():
-    custom_css = """
-    :root {
-        --martian-orange: #FF6B4A;
-        --martian-dark: #0E0E0E;
-        --martian-gray-dark: #1A1A1A;
-        --martian-gray-medium: #2A2A2A;
-        --martian-gray-light: #3A3A3A;
-        --martian-bg: #0E0E0E;
-    }
-    .gradio-container { background-color: var(--martian-bg) !important; font-family: 'Inter', sans-serif; }
-    .header-section { text-align: center; padding: 2rem; background: linear-gradient(135deg, var(--martian-dark) 0%, var(--martian-gray-dark) 100%); border-radius: 12px; margin-bottom: 1rem; color:white;}
-    .header-section h1 { font-size: 2rem; margin-bottom: 0.5rem; }
-    .info-box { background: var(--martian-gray-dark); border-left: 4px solid var(--martian-orange); border-radius: 10px; padding:1rem; margin:1rem 0; color:#E0E0E0;}
-    button, .gr-button { background: var(--martian-orange) !important; color:white !important; border:none !important;}
-    .input-text, textarea, select, input, .gradio-dataframe { background: var(--martian-gray-medium) !important; border-color: var(--martian-gray-light) !important; color: #E0E0E0 !important; }
-    a { color: var(--martian-orange) !important; }
-    """
-
-    with gr.Blocks(css=custom_css) as viewer:
-        gr.HTML("""<div class="header-section"><h1>TinySQL — Dataset Viewer</h1><div class="subtitle">Browse dataset variants, filter examples, and send a selected example to the TinySQL model demo.</div></div>""")
-        gr.HTML("""<div class="info-box"><strong>Note:</strong> Previews load the first 500 examples for fast exploration. Use the search box to filter prompts or SQL statements.</div>""")
+    with gr.Blocks(css=custom_css, title="TinySQL Dataset Viewer") as viewer:
+        # Header
+        gr.HTML("""
+            <div class="header-section">
+                <h1>TinySQL Dataset Viewer</h1>
+                <p class="subtitle">
+                    Browse dataset previews, search, and filter queries with <span class="orange-accent">ease</span>
+                </p>
+            </div>
+        """)
+
+        # Dataset selection dropdown
         with gr.Row():
             with gr.Column(scale=1):
-                dataset_dropdown = gr.Dropdown(choices=list(HF_DATASETS.keys()), value=list(HF_DATASETS.keys())[0], label="Dataset Variant")
-                search_box = gr.Textbox(label="Search (prompt or SQL)", placeholder="Type keywords to filter prompts or SQL...")
-                select_dropdown = gr.Dropdown(choices=[], label="Select example to try")
-                try_button = gr.Button("Try in Model Demo", variant="primary")
-                status_html = gr.HTML("")
+                dataset_dropdown = gr.Dropdown(
+                    choices=list(DATASETS.keys()),
+                    value="CS1",
+                    label="Select Dataset"
+                )
+
+                # Button to open Model Demo in new tab
+                gr.Button(
+                    "Try in Model Demo",
+                    variant="primary",
+                    elem_id="open_model_demo"
+                ).click(
+                    lambda: "https://huggingface.co/spaces/abir-hr196/tinysql-demo",
+                    None,
+                    None,
+                    _js="(url)=>{ window.open(url,'_blank'); }"
+                )
+
             with gr.Column(scale=3):
                 df_display = gr.Dataframe(
-                    headers=["id", "english_prompt", "sql_statement", "create_statement"],
-                    value=pd.DataFrame(columns=["id", "english_prompt", "sql_statement", "create_statement"]),
-                    label="Preview (first 500 rows)"
+                    headers=COLUMNS,
+                    datatype=["str", "str", "str"],
+                    interactive=False,
+                    label="Dataset Preview",
+                    max_rows=20
                 )
 
-        dataset_dropdown.change(fn=on_dataset_change, inputs=[dataset_dropdown], outputs=[df_display, select_dropdown, status_html])
-        search_box.change(fn=on_search, inputs=[dataset_dropdown, search_box], outputs=[df_display, select_dropdown])
-        try_button.click(fn=send_to_demo, inputs=[dataset_dropdown, select_dropdown], outputs=[status_html])
+        # Update preview when dataset changes
+        dataset_dropdown.change(
+            fn=load_preview,
+            inputs=dataset_dropdown,
+            outputs=df_display
+        )
 
     return viewer
+
+if __name__ == "__main__":
+    dataset_viewer().launch()