updates_logo

app.py

@@ -72,43 +72,63 @@ select:focus, input:focus, textarea:focus {
     box-shadow: 0 0 0 2px rgba(255, 107, 74, 0.2) !important;
 }
 
-/* Orange sliders - selected area is orange */
+/* Orange sliders - properly following thumb position */
 input[type="range"] {
-    background: transparent !important;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
 }
 
-input[type="range"]::-webkit-slider-thumb {
-    background: var(--martian-orange) !important;
-    cursor: pointer !important;
-    width: 16px !important;
-    height: 16px !important;
-    border-radius: 50% !important;
+input[type="range"]::-webkit-slider-track {
+    background: #3A3A3A;
+    height: 6px;
+    border-radius: 3px;
 }
 
-input[type="range"]::-moz-range-thumb {
-    background: var(--martian-orange) !important;
-    cursor: pointer !important;
-    width: 16px !important;
-    height: 16px !important;
-    border-radius: 50% !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"]::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, var(--martian-orange) 0%, var(--martian-orange) var(--value, 50%), #3A3A3A var(--value, 50%), #3A3A3A 100%) !important;
-    height: 4px !important;
-    border-radius: 2px !important;
+input[type="range"]::-moz-range-track {
+    background: #3A3A3A;
+    height: 6px;
+    border-radius: 3px;
 }
 
-input[type="range"]::-moz-range-track {
-    background: #3A3A3A !important;
-    height: 4px !important;
-    border-radius: 2px !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) !important;
-    height: 4px !important;
-    border-radius: 2px !important;
+    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 */
@@ -132,10 +152,12 @@ button {
 }
 
 .footer-logo {
-    width: 120px;
-    margin-bottom: 1rem;
+    width: 80px !important;
+    height: auto !important;
+    margin: 1rem auto !important;
     opacity: 0.9;
     transition: opacity 0.3s ease;
+    display: block;
 }
 
 .footer-logo:hover {
@@ -227,14 +249,14 @@ with gr.Blocks(css=custom_css, title="TinySQL Demo", theme=gr.themes.Soft()) as
     # Footer with Martian branding
     gr.HTML("""
         <div class="footer">
-            <img src="https://withmartian.com/logo.png" alt="Martian" class="footer-logo" onerror="this.style.display='none'">
             <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-tinysql-6760e92748b63fa56a6ffc9f" style="color: #FF6B4A; text-decoration: none;">Dataset</a>
+                <a href="https://huggingface.co/collections/withmartian/tinysql-6760e92748b63fa56a6ffc9f" style="color: #FF6B4A; text-decoration: none;">Dataset</a>
             </p>
         </div>
     """)

tinysql_model_demo.py

@@ -30,7 +30,7 @@ def load_model(model_name):
         model_cache[model_name] = (tokenizer, model)
     return model_cache[model_name]
 
-def generate_sql(model_name, instruction, schema, max_length=256, temperature=0.7):
+def generate_sql(model_name, instruction, schema, max_length=256, temperature=0.0):
     if not model_name or not instruction or not schema:
         return "Please fill in all fields and select a model"
     
@@ -46,7 +46,7 @@ def generate_sql(model_name, instruction, schema, max_length=256, temperature=0.
         outputs = model.generate(
             **inputs,
             max_length=max_length,
-            temperature=temperature,
+            temperature=temperature if temperature > 0 else 1.0,
             do_sample=temperature > 0,
             pad_token_id=tokenizer.eos_token_id
         )
@@ -89,7 +89,6 @@ def model_demo(shared_instruction, shared_schema):
                 info="Larger models = better accuracy"
             )
             
-            # Better formatted guide with base models
             gr.HTML("""
                 <div style="background: #2A2A2A; border-radius: 12px; padding: 1.5rem; margin: 1.5rem 0; border: 1px solid #3A3A3A;">
                     <h4 style="color: #FF6B4A; font-size: 1rem; margin: 0 0 1.25rem 0; font-weight: 700; border-bottom: 2px solid #3A3A3A; padding-bottom: 0.75rem;">Model Guide</h4>
@@ -125,14 +124,13 @@ def model_demo(shared_instruction, shared_schema):
         with gr.Column(scale=2):
             gr.Markdown("### Your Query")
             
-            # Query as Textbox styled like a code box
             instruction = gr.Textbox(
                 label="Natural Language Query",
                 placeholder="e.g., Find all employees earning more than 50000 sorted by name",
                 lines=2,
                 value=""
             )
-            # Database schema as Code (SQL formatted)
+            
             schema = gr.Code(
                 label="Database Schema",
                 language="sql",
@@ -142,29 +140,33 @@ def model_demo(shared_instruction, shared_schema):
             
             with gr.Row():
                 max_length = gr.Slider(64, 512, value=256, step=32, label="Max Length", info="Token limit")
-                temperature = gr.Slider(0.0, 1.0, value=0.1, step=0.1, label="Temperature", info="Creativity level")
+                temperature = gr.Slider(0.0, 1.0, value=0.0, step=0.1, label="Temperature", info="Creativity level (0 = deterministic)")
             
             generate_btn = gr.Button("Generate SQL", variant="primary", size="lg")
             
-            # Output as Code (SQL formatted)
             output = gr.Code(label="Generated SQL Query", language="sql", lines=6)
 
     gr.Markdown("### Example Query")
     
-    # Custom example with query in styled box
+    # 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: 0.75rem;">
-                <strong style="color: #FF6B4A;">Model:</strong> <span style="color: #D0D0D0;">BM2_CS2_Syn (0.5B)</span>
+            <div style="margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #3A3A3A;">
+                <div style="color: #FF6B4A; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem;">Model</div>
+                <div style="background: #1A1A1A; padding: 0.75rem; border-radius: 6px; color: #D0D0D0; font-family: 'Inter', sans-serif; font-size: 0.9rem;">BM2_CS2_Syn (0.5B)</div>
             </div>
-            <div style="margin-bottom: 0.75rem;">
-                <strong style="color: #FF6B4A;">Query:</strong>
-                <pre style="background: #1A1A1A; padding: 0.75rem; border-radius: 6px; margin-top: 0.5rem; color: #D0D0D0; font-size: 0.85rem; line-height: 1.5;">List worker earnings from highest to lowest</pre>
+            
+            <div style="margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #3A3A3A;">
+                <div style="color: #FF6B4A; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem;">Natural Language Query</div>
+                <div style="background: #1A1A1A; padding: 0.75rem; border-radius: 6px; color: #D0D0D0; font-family: 'Inter', sans-serif; font-size: 0.9rem; line-height: 1.5;">List worker earnings from highest to lowest</div>
             </div>
+            
             <div>
-                <strong style="color: #FF6B4A;">Schema:</strong>
-                <pre style="background: #1A1A1A; padding: 0.75rem; border-radius: 6px; margin-top: 0.5rem; color: #D0D0D0; font-size: 0.85rem; line-height: 1.5;">CREATE TABLE employees (
-    name VARCHAR(100), salary INT, department VARCHAR(100)
+                <div style="color: #FF6B4A; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem;">Database Schema</div>
+                <pre style="background: #1A1A1A; padding: 0.75rem; border-radius: 6px; margin: 0; color: #D0D0D0; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.85rem; line-height: 1.5; overflow-x: auto;">CREATE TABLE employees (
+    name VARCHAR(100), 
+    salary INT, 
+    department VARCHAR(100)
 )</pre>
             </div>
         </div>