app.py

from tinysql_model_demo import model_demo
from tinysql_dataset_viewer import dataset_viewer
import gradio as gr

custom_css = """
:root {
    --martian-orange: #FF6B4A;
    --martian-black: #0A0A0A;
    --martian-gray-dark: #1A1A1A;
}

.gradio-container {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--martian-black) !important;
}

.tab-nav button {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
}

.tab-nav button.selected {
    border-bottom: 3px solid var(--martian-orange) !important;
    color: var(--martian-orange) !important;
}
"""

with gr.Blocks(css=custom_css, title="TinySQL Demo") as demo:
    # Shared state for passing data between tabs
    shared_instruction = gr.State("")
    shared_schema = gr.State("")
    
    with gr.Tabs():
        with gr.Tab("Dataset Viewer"):
            viewer_components = dataset_viewer(shared_instruction, shared_schema)
        
        with gr.Tab("Model Demo"):
            model_components = model_demo(shared_instruction, shared_schema)

if __name__ == "__main__":
    demo.launch()