Upload app.py with huggingface_hub

app.py

@@ -1,4 +1,5 @@
 import re
+import os
 import gradio as gr
 from transformers import AutoModelForSeq2SeqLM, AutoTokenizer
 import torch
@@ -14,85 +15,10 @@ 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; }
-"""
+# Load CSS from external file
+css_path = os.path.join(os.path.dirname(__file__), "style.css")
+with open(css_path, "r") as f:
+    CSS = f.read()
 
 
 def decode_structured_output(text):
@@ -216,18 +142,6 @@ theme = gr.themes.Soft(
     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(title="Text-to-SQL Demo") as demo:
@@ -235,33 +149,37 @@ with gr.Blocks(title="Text-to-SQL Demo") as demo:
     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>
+        <p>Fine-tuned T5 model that converts natural language questions
+        into structured SQL queries using the WikiSQL dataset</p>
     </div>
     """)
 
-    # Pipeline visualization
+    # Pipeline visualization - dark background so text is always visible
     gr.HTML("""
     <div class="pipeline-box">
-        Natural Language &rarr; T5 Encoder &rarr; Structured Tokens (SEL | AGG | CONDS) &rarr; SQL Query
+        <span class="stage">Natural Language</span>
+        <span class="arrow"> &rarr; </span>
+        <span class="stage">T5 Encoder</span>
+        <span class="arrow"> &rarr; </span>
+        <span class="highlight">Structured Tokens (SEL | AGG | CONDS)</span>
+        <span class="arrow"> &rarr; </span>
+        <span class="stage">SQL Query</span>
     </div>
     """)
 
     with gr.Row(equal_height=True):
-        # Left: Inputs
         with gr.Column(scale=1):
-            gr.Markdown("### Input")
+            gr.Markdown("### Input", elem_classes=["section-header"])
             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(
@@ -275,9 +193,8 @@ with gr.Blocks(title="Text-to-SQL Demo") as demo:
                 )
             btn = gr.Button("Generate SQL", variant="primary", elem_classes=["generate-btn"])
 
-        # Right: Outputs
         with gr.Column(scale=1):
-            gr.Markdown("### Output")
+            gr.Markdown("### Output", elem_classes=["section-header"])
             sql_out = gr.Textbox(
                 label="Generated SQL",
                 lines=3,
@@ -300,8 +217,7 @@ with gr.Blocks(title="Text-to-SQL Demo") as demo:
         outputs=[sql_out, raw_out, parsed_out],
     )
 
-    # Examples
-    gr.Markdown("### Try These Examples")
+    gr.Markdown("### Try These Examples", elem_classes=["section-header"])
     gr.Examples(
         examples=[
             ["What is terrence ross' nationality", "players: Player, No., Nationality, Position, Years in Toronto, School/Club Team", 5, 256],
@@ -320,15 +236,14 @@ with gr.Blocks(title="Text-to-SQL Demo") as demo:
         cache_examples=False,
     )
 
-    # Footer info
     gr.HTML("""
-    <div style="text-align:center; margin-top:1.5rem; padding:1rem; color:#9ca3af; font-size:0.85rem;">
+    <div class="footer-section">
         <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>
+            Model: <a href="https://huggingface.co/RealMati/t2sql_v6_structured" target="_blank">RealMati/t2sql_v6_structured</a>
         </p>
     </div>
     """)