upds

app.py

@@ -10,254 +10,79 @@ custom_css = """
     --martian-gray-medium: #2A2A2A;
 }
 
-/* FORCE DARK MODE - Override Gradio's light mode */
-.gradio-container, .gradio-container * {
-    color-scheme: dark !important;
-}
-
 .gradio-container {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background-color: var(--martian-black) !important;
-    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 */
-.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;
 }
 
+/* TABS - Bigger and bolder */
 .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;
-    background: transparent !important;
-}
-
-.tab-nav button:hover {
-    background: var(--martian-gray-medium) !important;
-    color: #E0E0E0 !important;
+    font-size: 1.6rem !important;
+    font-weight: 800 !important;
+    padding: 1.25rem 2.5rem !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;
-}
-
-/* Orange labels */
-label, .label-wrap {
-    color: #E0E0E0 !important;
 }
 
-.label-wrap span {
+/* ORANGE RECTANGLE LABELS - Force in both light and dark mode */
+label span, .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;
+    padding: 0.5rem 1rem !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;
-    color: #E0E0E0 !important;
+/* Fix CS1, CS2 etc visibility in light mode */
+.dataset-info strong {
+    color: #000 !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;
+@media (prefers-color-scheme: dark) {
+    .dataset-info strong {
+        color: #E0E0E0 !important;
+    }
 }
 
-/* Orange sliders */
-input[type="range"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background: transparent;
-    cursor: pointer;
+/* Citation box - match container background */
+.citation-content {
+    background: #2A2A2A !important;
+    padding: 1rem !important;
+    border-radius: 8px !important;
 }
 
-input[type="range"]::-webkit-slider-track {
-    background: #3A3A3A;
-    height: 6px;
-    border-radius: 3px;
+.citation-content pre {
+    background: #1A1A1A !important;
+    color: #D0D0D0 !important;
+    margin: 0 !important;
 }
 
 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;
+    background: var(--martian-orange) !important;
 }
 
 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;
+    background: var(--martian-orange) !important;
 }
 
-/* Orange buttons */
-.primary, .secondary {
+.primary {
     background: var(--martian-orange) !important;
     border-color: var(--martian-orange) !important;
-    color: white !important;
-}
-
-button {
-    border: none !important;
-    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;
-    color: #FF6B4A;
-    margin: 0;
-    line-height: 1.2;
-}
-
-.compact-header p {
-    color: #999;
-    font-size: 0.95rem;
-    margin-top: 0.25rem;
-}
-
-/* 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 !important;
-    font-size: 0.95rem;
-    margin: 0.5rem 0;
-}
-
-.footer-text .heart {
-    color: var(--martian-orange);
-    animation: heartbeat 1.5s ease-in-out infinite;
-}
-
-.footer-text a {
-    color: #FF6B4A !important;
-}
-
-@keyframes heartbeat {
-    0%, 100% { transform: scale(1); }
-    50% { transform: scale(1.1); }
-}
-
-.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;
-}
-
-.citation-header {
-    font-weight: 700;
-    color: #FF6B4A !important;
-    margin-bottom: 1rem;
-    font-size: 1.1rem;
-    text-align: center;
-}
-
-.citation-box pre {
-    color: #D0D0D0 !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
+with gr.Blocks(css=custom_css, title="TinySQL Demo") as demo:
     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 style="text-align: center; padding: 1.5rem 0 1rem 0;">
+            <h1 style="font-size: 2rem; font-weight: 700; color: #FF6B4A; margin: 0;">TinySQL</h1>
+            <p style="color: #999; font-size: 0.95rem; margin-top: 0.25rem;">Mechanistic Interpretability for Text-to-SQL</p>
         </div>
     """)
     
-    # Shared state for passing data between tabs
     shared_instruction = gr.State("")
     shared_schema = gr.State("")
     
@@ -268,11 +93,11 @@ 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>
-            <pre>@misc{harrasse2025tinysqlprogressivetexttosqldataset,
+        <div style="border-radius: 12px; padding: 1.5rem; margin: 2rem auto; max-width: 900px; background: #2A2A2A;">
+            <div style="font-weight: 700; color: #FF6B4A; margin-bottom: 1rem; font-size: 1.1rem; text-align: center;">Cite Our Work</div>
+            <div class="citation-content">
+                <pre style="font-family: 'Monaco', monospace; font-size: 0.85rem; overflow-x: auto;">@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},
@@ -281,20 +106,16 @@ with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as
     primaryClass={cs.LG},
     url={https://arxiv.org/abs/2503.12730}
 }</pre>
+            </div>
         </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> • 
-                <a href="https://huggingface.co/collections/withmartian/tinysql-6760e92748b63fa56a6ffc9f">Dataset</a>
+        <div style="text-align: center; padding: 2rem 0; margin-top: 3rem;">
+            <p style="font-size: 0.85rem; margin-top: 1rem;">
+                <a href="https://arxiv.org/abs/2503.12730" style="color: #FF6B4A;">Paper</a> • 
+                <a href="https://github.com/withmartian/TinySQL" style="color: #FF6B4A;">Code</a> • 
+                <a href="https://huggingface.co/collections/withmartian/tinysql-6760e92748b63fa56a6ffc9f" style="color: #FF6B4A;">Dataset</a>
             </p>
         </div>
     """)