updates

app.py

@@ -10,7 +10,6 @@ custom_css = """
     --martian-gray-medium: #2A2A2A;
 }
 
-/* FORCE DARK MODE - Override Gradio's light mode */
 .gradio-container, .gradio-container * {
     color-scheme: dark !important;
 }
@@ -21,17 +20,15 @@ custom_css = """
     color: #E0E0E0 !important;
 }
 
-/* Force dark backgrounds everywhere */
 .block, .panel, div, section {
     background-color: var(--martian-black) !important;
 }
 
-/* Force text colors */
 h1, h2, h3, h4, h5, h6, p, span, label, div {
     color: #E0E0E0 !important;
 }
 
-/* Better tabs - bold, bigger, no icons, ORANGE selection */
+/* TABS - Bigger, bolder */
 .tab-nav {
     border-bottom: 2px solid var(--martian-gray-dark) !important;
     background: var(--martian-gray-dark) !important;
@@ -40,9 +37,9 @@ h1, h2, h3, h4, h5, h6, p, span, label, div {
 }
 
 .tab-nav button {
-    font-size: 1.2rem !important;
-    font-weight: 700 !important;
-    padding: 1rem 2rem !important;
+    font-size: 1.5rem !important;
+    font-weight: 800 !important;
+    padding: 1.25rem 2.5rem !important;
     border-radius: 8px !important;
     margin: 0 0.25rem !important;
     transition: all 0.3s ease !important;
@@ -62,21 +59,22 @@ h1, h2, h3, h4, h5, h6, p, span, label, div {
     box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3) !important;
 }
 
-/* Orange labels */
+/* ORANGE LABELS - works in both light and dark mode */
 label, .label-wrap {
     color: #E0E0E0 !important;
+    background: transparent !important;
 }
 
-.label-wrap span {
+.label-wrap span, label 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;
+    padding: 0.4rem 0.9rem !important;
+    border-radius: 8px !important;
+    font-weight: 700 !important;
+    font-size: 0.95rem !important;
+    display: inline-block !important;
 }
 
-/* Orange inputs */
 select, input, textarea {
     background: var(--martian-gray-medium) !important;
     border: 1px solid #3A3A3A !important;
@@ -89,7 +87,6 @@ select:focus, input:focus, textarea:focus {
     box-shadow: 0 0 0 2px rgba(255, 107, 74, 0.2) !important;
 }
 
-/* Orange sliders */
 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
@@ -131,13 +128,6 @@ input[type="range"]::-moz-range-thumb {
     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;
-}
-
-/* Orange buttons */
 .primary, .secondary {
     background: var(--martian-orange) !important;
     border-color: var(--martian-orange) !important;
@@ -149,18 +139,12 @@ button {
     color: #E0E0E0 !important;
 }
 
-/* Compact header */
 .compact-header {
     text-align: center;
     padding: 1.5rem 0 1rem 0;
     background: var(--martian-black);
 }
 
-.compact-header img {
-    height: 35px;
-    margin-bottom: 0.5rem;
-}
-
 .compact-header h1 {
     font-size: 2rem;
     font-weight: 700;
@@ -175,7 +159,6 @@ button {
     margin-top: 0.25rem;
 }
 
-/* Footer */
 .footer {
     text-align: center;
     padding: 2rem 0;
@@ -185,19 +168,6 @@ button {
     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 !important;
     font-size: 0.95rem;
@@ -218,46 +188,50 @@ button {
     50% { transform: scale(1.1); }
 }
 
+/* CITATION BOX - proper dark background */
 .citation-box {
-    background: #2A2A2A !important;
-    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;
+    background: var(--martian-gray-medium) !important;
+    border: 1px solid #3A3A3A !important;
+    border-radius: 12px !important;
+    padding: 1.5rem !important;
+    margin: 2rem auto !important;
+    max-width: 900px !important;
+    font-family: 'Monaco', 'Courier New', monospace !important;
+    font-size: 0.85rem !important;
 }
 
 .citation-header {
-    font-weight: 700;
+    font-weight: 700 !important;
     color: #FF6B4A !important;
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-    text-align: center;
+    margin-bottom: 1rem !important;
+    font-size: 1.1rem !important;
+    text-align: center !important;
 }
 
 .citation-box pre {
     color: #D0D0D0 !important;
-    background: #1A1A1A !important;
-    padding: 1rem;
-    border-radius: 8px;
-    overflow-x: auto;
-    margin: 0;
+    background: var(--martian-gray-dark) !important;
+    padding: 1rem !important;
+    border-radius: 8px !important;
+    overflow-x: auto !important;
+    margin: 0 !important;
+}
+
+/* Force dark text for CS1, CS2, etc in all modes */
+.dataset-levels-text, .dataset-levels-text * {
+    color: #E0E0E0 !important;
+    font-weight: 600 !important;
 }
 """
 
 with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as demo:
-    # Compact Header
     gr.HTML("""
         <div class="compact-header">
-            <img src="file/static/images/martian_logo.jpg" alt="Martian">
             <h1>TinySQL</h1>
             <p>Mechanistic Interpretability for Text-to-SQL</p>
         </div>
     """)
     
-    # Shared state for passing data between tabs
     shared_instruction = gr.State("")
     shared_schema = gr.State("")
     
@@ -268,7 +242,6 @@ with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as
         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>
@@ -284,13 +257,11 @@ with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as
         </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="/static/images/martian_logo.jpg" alt="Martian" class="footer-logo">
             <p class="footer-text" style="font-size: 0.85rem; margin-top: 1rem;">
                 <a href="https://arxiv.org/abs/2503.12730">Paper</a> • 
                 <a href="https://github.com/withmartian/TinySQL">Code</a> • 

tinysql_model_demo.py

@@ -110,12 +110,12 @@ def model_demo(shared_instruction, shared_schema):
                     
                     <div style="padding-top: 1rem; border-top: 1px solid #3A3A3A;">
                         <div style="color: #FF6B4A; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem;">Dataset Complexity</div>
-                        <div style="color: #999; font-size: 0.85rem; line-height: 1.8;">
-                            <div><strong style="color: #D0D0D0;">CS1:</strong> Basic SELECT-FROM</div>
-                            <div><strong style="color: #D0D0D0;">CS2:</strong> Adds ORDER BY</div>
-                            <div><strong style="color: #D0D0D0;">CS3:</strong> Aggregations</div>
-                            <div><strong style="color: #D0D0D0;">CS4:</strong> WHERE filters</div>
-                            <div><strong style="color: #D0D0D0;">CS5:</strong> Multi-table JOINs</div>
+                        <div class="dataset-levels-text" style="color: #E0E0E0; font-size: 0.85rem; line-height: 1.8;">
+                            <div><strong style="color: #E0E0E0;">CS1:</strong> Basic SELECT-FROM</div>
+                            <div><strong style="color: #E0E0E0;">CS2:</strong> Adds ORDER BY</div>
+                            <div><strong style="color: #E0E0E0;">CS3:</strong> Aggregations</div>
+                            <div><strong style="color: #E0E0E0;">CS4:</strong> WHERE filters</div>
+                            <div><strong style="color: #E0E0E0;">CS5:</strong> Multi-table JOINs</div>
                         </div>
                     </div>
                 </div>
@@ -148,7 +148,6 @@ def model_demo(shared_instruction, shared_schema):
 
     gr.Markdown("### Example Query")
     
-    # Better styled example with proper font
     gr.HTML("""
         <div style="background: #2A2A2A; border-radius: 12px; padding: 1.5rem; margin: 1rem 0; border: 1px solid #3A3A3A;">
             <div style="margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #3A3A3A;">