updates

app.py

@@ -10,6 +10,7 @@ custom_css = """
     --martian-gray-medium: #2A2A2A;
 }
 
+/* FORCE DARK MODE - Override Gradio's light mode */
 .gradio-container, .gradio-container * {
     color-scheme: dark !important;
 }
@@ -20,15 +21,17 @@ 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;
 }
 
-/* TABS - Bigger, bolder */
+/* 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;
@@ -37,9 +40,9 @@ h1, h2, h3, h4, h5, h6, p, span, label, div {
 }
 
 .tab-nav button {
-    font-size: 1.5rem !important;
-    font-weight: 800 !important;
-    padding: 1.25rem 2.5rem !important;
+    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;
@@ -59,22 +62,21 @@ h1, h2, h3, h4, h5, h6, p, span, label, div {
     box-shadow: 0 2px 8px rgba(255, 107, 74, 0.3) !important;
 }
 
-/* ORANGE LABELS - works in both light and dark mode */
+/* Orange labels */
 label, .label-wrap {
     color: #E0E0E0 !important;
-    background: transparent !important;
 }
 
-.label-wrap span, label span {
+.label-wrap span {
     background: var(--martian-orange) !important;
     color: white !important;
-    padding: 0.4rem 0.9rem !important;
-    border-radius: 8px !important;
-    font-weight: 700 !important;
-    font-size: 0.95rem !important;
-    display: inline-block !important;
+    padding: 0.35rem 0.75rem !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
+    font-size: 0.9rem !important;
 }
 
+/* Orange inputs */
 select, input, textarea {
     background: var(--martian-gray-medium) !important;
     border: 1px solid #3A3A3A !important;
@@ -87,6 +89,7 @@ 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;
@@ -128,6 +131,13 @@ 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;
@@ -139,12 +149,18 @@ 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;
@@ -159,6 +175,7 @@ button {
     margin-top: 0.25rem;
 }
 
+/* Footer */
 .footer {
     text-align: center;
     padding: 2rem 0;
@@ -168,6 +185,19 @@ 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;
@@ -188,50 +218,46 @@ button {
     50% { transform: scale(1.1); }
 }
 
-/* CITATION BOX - proper dark background */
 .citation-box {
-    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;
+    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;
 }
 
 .citation-header {
-    font-weight: 700 !important;
+    font-weight: 700;
     color: #FF6B4A !important;
-    margin-bottom: 1rem !important;
-    font-size: 1.1rem !important;
-    text-align: center !important;
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+    text-align: center;
 }
 
 .citation-box pre {
     color: #D0D0D0 !important;
-    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;
+    background: #1A1A1A !important;
+    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:
+    # 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("")
     
@@ -242,6 +268,7 @@ 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>
@@ -257,11 +284,13 @@ 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="abir-hr196/tinysql-demo/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 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 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>
                     </div>
                 </div>
@@ -148,6 +148,7 @@ 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;">