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;
    --martian-gray-medium: #2A2A2A;
}

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

/* Better tabs - bold, bigger, no icons, ORANGE selection */
.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.2rem !important;
    font-weight: 700 !important;
    padding: 1rem 2rem !important;
    border-radius: 8px !important;
    margin: 0 0.25rem !important;
    transition: all 0.3s ease !important;
    color: #888 !important;
    border: none !important;
}

.tab-nav button:hover {
    background: var(--martian-gray-medium) !important;
    color: #E0E0E0 !important;
}

.tab-nav button.selected {
    background: var(--martian-orange) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3) !important;
}

/* REMOVE ALL PURPLE - Replace with orange */
label, .label-wrap {
    color: #E0E0E0 !important;
}

.label-wrap span {
    background: var(--martian-orange) !important;
    color: white !important;
    padding: 0.35rem 0.75rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Orange dropdown and inputs - NO PURPLE */
select, input, textarea {
    background: var(--martian-gray-medium) !important;
    border: 1px solid #3A3A3A !important;
    color: #E0E0E0 !important;
}

select:focus, input:focus, textarea:focus {
    border-color: var(--martian-orange) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(255, 107, 74, 0.2) !important;
}

/* Orange sliders - properly following thumb position */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-track {
    background: #3A3A3A;
    height: 6px;
    border-radius: 3px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--martian-orange);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -6px;
    box-shadow: 0 2px 4px rgba(255, 107, 74, 0.3);
}

input[type="range"]::-moz-range-track {
    background: #3A3A3A;
    height: 6px;
    border-radius: 3px;
}

input[type="range"]::-moz-range-thumb {
    background: var(--martian-orange);
    height: 18px;
    width: 18px;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(255, 107, 74, 0.3);
}

input[type="range"]::-moz-range-progress {
    background: var(--martian-orange);
    height: 6px;
    border-radius: 3px;
}

/* For Webkit browsers, use a gradient workaround */
input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, 
        var(--martian-orange) 0%, 
        var(--martian-orange) var(--value, 0%), 
        #3A3A3A var(--value, 0%), 
        #3A3A3A 100%);
    height: 6px;
    border-radius: 3px;
}

/* Remove any purple/blue colors */
.primary, .secondary {
    background: var(--martian-orange) !important;
    border-color: var(--martian-orange) !important;
}

button {
    border: none !important;
}

/* 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: 80px !important;
    height: auto !important;
    margin: 1rem auto !important;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    display: block;
}

.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); }
}

.citation-box {
    background: #2A2A2A;
    border: 1px solid #3A3A3A;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem auto;
    max-width: 900px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.85rem;
}

.citation-header {
    font-weight: 700;
    color: #FF6B4A;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-align: center;
}

.citation-box pre {
    color: #D0D0D0;
    background: #1A1A1A;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 0;
}
"""

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"):
            viewer_components = dataset_viewer(shared_instruction, shared_schema)
        
        with gr.Tab("Model Demo"):
            model_components = model_demo(shared_instruction, shared_schema)
    
    # Citation section
    gr.HTML("""
        <div class="citation-box">
            <div class="citation-header">Cite Our Work</div>
            <pre>@misc{harrasse2025tinysqlprogressivetexttosqldataset,
    title={TinySQL: A Progressive Text-to-SQL Dataset for Mechanistic Interpretability Research}, 
    author={Abir Harrasse and Philip Quirke and Clement Neo and Dhruv Nathawani and Luke Marks and Amir Abdullah},
    year={2025},
    eprint={2503.12730},
    archivePrefix={arXiv},
    primaryClass={cs.LG},
    url={https://arxiv.org/abs/2503.12730}
}</pre>
        </div>
    """)
    
    # Footer with Martian branding
    gr.HTML("""
        <div class="footer">
            <p class="footer-text">
                Brought to you with <span class="heart">❤️</span> from the Martian science team
            </p>
            <img src="file/static/images/martian_logo.jpg" alt="Martian" class="footer-logo" style="width: 80px; margin: 1rem auto; display: block;">
            <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(ssr_mode=False)