Upload app.py with huggingface_hub

app.py

@@ -14,9 +14,88 @@ print("Model loaded.")
 AGG_OPS = ["", "MAX", "MIN", "COUNT", "SUM", "AVG"]
 OPS = ["=", ">", "<", ">=", "<=", "!="]
 
+CSS = """
+.main-header {
+    text-align: center;
+    margin-bottom: 0.5rem;
+}
+.main-header h1 {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: 2.4rem;
+    font-weight: 800;
+    margin-bottom: 0.25rem;
+}
+.main-header p {
+    color: #6b7280;
+    font-size: 1.05rem;
+    max-width: 600px;
+    margin: 0 auto;
+}
+.pipeline-box {
+    background: linear-gradient(135deg, #f0f4ff 0%, #faf0ff 100%);
+    border: 1px solid #e0d4f5;
+    border-radius: 12px;
+    padding: 1rem 1.5rem;
+    text-align: center;
+    font-family: 'SF Mono', 'Fira Code', monospace;
+    font-size: 0.9rem;
+    color: #4a4a6a;
+    margin-bottom: 1rem;
+}
+.sql-output textarea {
+    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace !important;
+    font-size: 1.1rem !important;
+    background: #1e1e2e !important;
+    color: #cdd6f4 !important;
+    border: 1px solid #45475a !important;
+    border-radius: 10px !important;
+    padding: 1rem !important;
+}
+.raw-output textarea {
+    font-family: 'SF Mono', 'Fira Code', monospace !important;
+    font-size: 0.9rem !important;
+    background: #f8f9fc !important;
+    color: #6b7280 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 8px !important;
+}
+.input-section {
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 1.25rem;
+    background: #fafbff;
+}
+.generate-btn {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    font-size: 1.05rem !important;
+    padding: 0.75rem 2rem !important;
+    border-radius: 10px !important;
+    min-height: 46px !important;
+}
+.generate-btn:hover {
+    opacity: 0.92 !important;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4) !important;
+}
+.info-badge {
+    display: inline-block;
+    background: #eef2ff;
+    color: #4f46e5;
+    padding: 0.2rem 0.6rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+footer { display: none !important; }
+"""
+
 
 def decode_structured_output(text):
-    """Parse model output like 'SEL:0 | AGG:0 | CONDS:3,1,18' into components."""
     sel = agg = None
     conds = []
     try:
@@ -30,7 +109,7 @@ def decode_structured_output(text):
                 cond_str = part[6:].strip()
                 if cond_str:
                     for c in cond_str.split(";"):
-                        vals = c.split(",", 2)  # split max 2 times so value can contain commas
+                        vals = c.split(",", 2)
                         if len(vals) >= 3:
                             conds.append([int(vals[0]), int(vals[1]), vals[2]])
     except Exception:
@@ -39,47 +118,34 @@ def decode_structured_output(text):
 
 
 def parse_schema(schema_str):
-    """Parse schema string like 'users: id, name, age, email' into (table_name, [columns])."""
     schema_str = schema_str.strip()
     if not schema_str:
         return "table", []
-
-    # Take only the first table for now (WikiSQL is single-table)
     first_table = schema_str.split("|")[0].strip()
-
     if ":" in first_table:
         table_name, cols_str = first_table.split(":", 1)
         table_name = table_name.strip()
         columns = [c.strip() for c in cols_str.split(",") if c.strip()]
     else:
-        # No table name, just columns
         table_name = "table"
         columns = [c.strip() for c in first_table.split(",") if c.strip()]
-
     return table_name, columns
 
 
 def structured_to_sql(sel, agg, conds, columns, table_name="table"):
-    """Convert structured indices to a SQL query string."""
     if sel is None or agg is None:
         return None
-
     col_name = columns[sel] if sel < len(columns) else f"col{sel}"
-
-    # SELECT clause
     if agg == 0:
         sql = f"SELECT {col_name} FROM {table_name}"
     else:
         agg_op = AGG_OPS[agg] if agg < len(AGG_OPS) else ""
         sql = f"SELECT {agg_op}({col_name}) FROM {table_name}"
-
-    # WHERE clause
     if conds:
         where_parts = []
         for c_idx, c_op, c_val in conds:
             c_name = columns[c_idx] if c_idx < len(columns) else f"col{c_idx}"
             op_str = OPS[c_op] if c_op < len(OPS) else "="
-            # Quote string values
             try:
                 float(c_val)
                 val_sql = c_val
@@ -88,16 +154,35 @@ def structured_to_sql(sel, agg, conds, columns, table_name="table"):
             where_parts.append(f"{c_name} {op_str} {val_sql}")
         if where_parts:
             sql += " WHERE " + " AND ".join(where_parts)
-
     return sql
 
 
-def predict(question: str, schema: str, num_beams: int, max_length: int):
+def format_parsed(sel, agg, conds, columns):
+    parts = []
+    if sel is not None and sel < len(columns):
+        parts.append(f"Column: {columns[sel]} (index {sel})")
+    elif sel is not None:
+        parts.append(f"Column index: {sel}")
+    if agg is not None:
+        agg_label = AGG_OPS[agg] if agg < len(AGG_OPS) and agg > 0 else "None"
+        parts.append(f"Aggregation: {agg_label}")
+    if conds:
+        cond_strs = []
+        for c_idx, c_op, c_val in conds:
+            c_name = columns[c_idx] if c_idx < len(columns) else f"col{c_idx}"
+            op_str = OPS[c_op] if c_op < len(OPS) else "="
+            cond_strs.append(f"{c_name} {op_str} {c_val}")
+        parts.append(f"Conditions: {', '.join(cond_strs)}")
+    else:
+        parts.append("Conditions: None")
+    return " | ".join(parts)
+
+
+def predict(question, schema, num_beams, max_length):
     if not question.strip():
-        return "Please enter a question.", "", ""
+        return "", "", ""
 
     table_name, columns = parse_schema(schema)
-
     input_text = f"translate to SQL: {question}"
     if schema.strip():
         input_text += f" | schema: {schema.strip()}"
@@ -114,59 +199,139 @@ def predict(question: str, schema: str, num_beams: int, max_length: int):
         )
 
     raw_output = tokenizer.decode(outputs[0], skip_special_tokens=True)
-
-    # Parse structured output
     sel, agg, conds = decode_structured_output(raw_output)
 
     if sel is not None and agg is not None and columns:
         sql = structured_to_sql(sel, agg, conds, columns, table_name)
     else:
-        sql = f"(could not convert — no schema columns provided)"
-
-    return sql, raw_output, f"SEL={sel}, AGG={agg} ({AGG_OPS[agg] if agg and agg < len(AGG_OPS) else 'none'}), CONDS={conds}"
-
-
-demo = gr.Interface(
-    fn=predict,
-    inputs=[
-        gr.Textbox(
-            label="Natural Language Question",
-            placeholder="e.g. Show all users older than 18",
-            lines=2,
-        ),
-        gr.Textbox(
-            label="Database Schema",
-            placeholder="e.g. users: id, name, age, email",
-            lines=2,
-        ),
-        gr.Slider(minimum=1, maximum=10, value=5, step=1, label="Beam Size"),
-        gr.Slider(minimum=64, maximum=512, value=256, step=64, label="Max Output Length"),
-    ],
-    outputs=[
-        gr.Textbox(label="Generated SQL", lines=2),
-        gr.Textbox(label="Raw Model Output", lines=1),
-        gr.Textbox(label="Parsed Components", lines=1),
-    ],
-    title="Text-to-SQL (T5 Fine-tuned on WikiSQL)",
-    description="Converts natural language questions to SQL. The model outputs structured tokens (SEL/AGG/CONDS) which are then converted to SQL using your schema.",
-    examples=[
-        # Table: 1-10015132-16 (Toronto Raptors players)
-        ["What is terrence ross' nationality", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
-        ["What clu was in toronto 1995-96", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
-        ["which club was in toronto 2003-06", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
-        ["how many schools or teams had jalen rose", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
-        # Table: 1-10083598-1 (Racing)
-        ["Where was Assen held?", "races: No, Date, Round, Circuit, Pole Position, Fastest Lap, Race winner, Report", 5, 256],
-        ["What was the number of race that Kevin Curtain won?", "races: No, Date, Round, Circuit, Pole Position, Fastest Lap, Race winner, Report", 5, 256],
-        ["What was the date of the race in Misano?", "races: No, Date, Round, Circuit, Pole Position, Fastest Lap, Race winner, Report", 5, 256],
-        # Table: 1-1013129-2 (NHL Draft)
-        ["How many different positions did Sherbrooke Faucons (qmjhl) provide in the draft?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
-        ["What are the nationalities of the player picked from Thunder Bay Flyers (ushl)", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
-        ["How many different college/junior/club teams provided a player to the Washington Capitals NHL Team?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
-        # Table: 1-1013129-3 (NHL Draft)
-        ["How many different nationalities do the players of New Jersey Devils come from?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
-        ["What's Dorain Anneck's pick number?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
-    ],
+        sql = "(Provide a schema to convert structured output to SQL)"
+
+    parsed = format_parsed(sel, agg, conds, columns) if sel is not None else ""
+    return sql, raw_output, parsed
+
+
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="purple",
+    neutral_hue="slate",
+    font=gr.themes.GoogleFont("Inter"),
+    font_mono=gr.themes.GoogleFont("Fira Code"),
+).set(
+    body_background_fill="#fafbff",
+    block_background_fill="white",
+    block_border_width="1px",
+    block_border_color="#e5e7eb",
+    block_radius="12px",
+    block_shadow="0 1px 3px rgba(0,0,0,0.06)",
+    input_border_color="#d1d5db",
+    input_border_width="1px",
+    input_radius="8px",
+    button_primary_background_fill="linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+    button_primary_text_color="white",
 )
 
+with gr.Blocks(theme=theme, css=CSS, title="Text-to-SQL Demo") as demo:
+    # Header
+    gr.HTML("""
+    <div class="main-header">
+        <h1>Text-to-SQL</h1>
+        <p>Fine-tuned T5 model that converts natural language questions into structured SQL queries using the WikiSQL dataset</p>
+    </div>
+    """)
+
+    # Pipeline visualization
+    gr.HTML("""
+    <div class="pipeline-box">
+        Natural Language &rarr; T5 Encoder &rarr; Structured Tokens (SEL | AGG | CONDS) &rarr; SQL Query
+    </div>
+    """)
+
+    with gr.Row(equal_height=True):
+        # Left: Inputs
+        with gr.Column(scale=1):
+            gr.Markdown("### Input")
+            question = gr.Textbox(
+                label="Natural Language Question",
+                placeholder="e.g. What is terrence ross' nationality?",
+                lines=2,
+                elem_classes=["input-section"],
+            )
+            schema = gr.Textbox(
+                label="Database Schema",
+                placeholder="table_name: col1, col2, col3, ...",
+                lines=2,
+                info="Format: table_name: column1, column2, column3",
+                elem_classes=["input-section"],
+            )
+            with gr.Row():
+                beams = gr.Slider(
+                    minimum=1, maximum=10, value=5, step=1,
+                    label="Beam Size",
+                    info="Higher = better quality, slower",
+                )
+                max_len = gr.Slider(
+                    minimum=64, maximum=512, value=256, step=64,
+                    label="Max Length",
+                )
+            btn = gr.Button("Generate SQL", variant="primary", elem_classes=["generate-btn"])
+
+        # Right: Outputs
+        with gr.Column(scale=1):
+            gr.Markdown("### Output")
+            sql_out = gr.Textbox(
+                label="Generated SQL",
+                lines=3,
+                elem_classes=["sql-output"],
+                show_copy_button=True,
+            )
+            raw_out = gr.Textbox(
+                label="Raw Model Output (Structured Tokens)",
+                lines=1,
+                elem_classes=["raw-output"],
+            )
+            parsed_out = gr.Textbox(
+                label="Decoded Components",
+                lines=1,
+                elem_classes=["raw-output"],
+            )
+
+    btn.click(
+        fn=predict,
+        inputs=[question, schema, beams, max_len],
+        outputs=[sql_out, raw_out, parsed_out],
+    )
+
+    # Examples
+    gr.Markdown("### Try These Examples")
+    gr.Examples(
+        examples=[
+            ["What is terrence ross' nationality", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
+            ["how many schools or teams had jalen rose", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
+            ["What was the date of the race in Misano?", "races: No, Date, Round, Circuit, Pole Position, Fastest Lap, Race winner, Report", 5, 256],
+            ["What was the number of race that Kevin Curtain won?", "races: No, Date, Round, Circuit, Pole Position, Fastest Lap, Race winner, Report", 5, 256],
+            ["Where was Assen held?", "races: No, Date, Round, Circuit, Pole Position, Fastest Lap, Race winner, Report", 5, 256],
+            ["How many different positions did Sherbrooke Faucons (qmjhl) provide in the draft?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
+            ["What are the nationalities of the player picked from Thunder Bay Flyers (ushl)", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
+            ["How many different nationalities do the players of New Jersey Devils come from?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
+            ["What's Dorain Anneck's pick number?", "draft: Pick, Player, Position, Nationality, NHL team, College/junior/club team", 5, 256],
+        ],
+        inputs=[question, schema, beams, max_len],
+        outputs=[sql_out, raw_out, parsed_out],
+        fn=predict,
+        cache_examples=False,
+    )
+
+    # Footer info
+    gr.HTML("""
+    <div style="text-align:center; margin-top:1.5rem; padding:1rem; color:#9ca3af; font-size:0.85rem;">
+        <span class="info-badge">T5-base</span>&nbsp;
+        <span class="info-badge">WikiSQL</span>&nbsp;
+        <span class="info-badge">Seq2Seq</span>&nbsp;
+        <span class="info-badge">Structured Output</span>
+        <p style="margin-top:0.75rem;">
+            Model: <a href="https://huggingface.co/RealMati/t2sql_v6_structured" target="_blank" style="color:#667eea;">RealMati/t2sql_v6_structured</a>
+        </p>
+    </div>
+    """)
+
 demo.launch()