✨ Professional Gradio UI with comparison table and clean design

app.py

@@ -4,7 +4,6 @@ import torch
 
 # ============================================================================
 # YUUKI - Mobile-Trained Code Generator
-# First LLM Trained Entirely on a Smartphone
 # ============================================================================
 
 MODEL_ID = "OpceanAI/Yuuki-best"
@@ -31,7 +30,6 @@ def load_model():
             trust_remote_code=True
         )
         
-        # Ensure pad token is set
         if tokenizer.pad_token is None:
             tokenizer.pad_token = tokenizer.eos_token
         
@@ -44,10 +42,6 @@ def load_model():
         return False
 
 
-# ============================================================================
-# Generation Function
-# ============================================================================
-
 def generate_code(
     prompt: str,
     max_new_tokens: int = 100,
@@ -63,7 +57,7 @@ def generate_code(
             return "Error: Model failed to load. Please try refreshing the page."
     
     if not prompt or not prompt.strip():
-        return "Please enter a code prompt to generate."
+        return "Please enter a code prompt."
     
     try:
         inputs = tokenizer(
@@ -95,456 +89,703 @@ def generate_code(
 
 
 # ============================================================================
-# Examples by Language Quality
+# Examples
 # ============================================================================
 
 EXAMPLES = [
-    # Agda - Best performance (55/100)
-    ["module Main where", 120, 0.7, 0.9, 50, 1.1],
-    ["open import Data.Nat", 100, 0.7, 0.9, 50, 1.1],
-    ["data Bool : Set where", 100, 0.7, 0.9, 50, 1.1],
-    
-    # C - Limited (20/100)
-    ["int main() {", 100, 0.7, 0.9, 50, 1.1],
-    ["#include <stdio.h>", 80, 0.7, 0.9, 50, 1.1],
-    
-    # Assembly - Basic (15/100)
-    ["mov eax,", 60, 0.8, 0.9, 50, 1.1],
-    
-    # Python - Weak due to dataset order (8/100)
-    ["def hello():", 80, 0.8, 0.9, 50, 1.2],
-    ["import numpy as np", 60, 0.7, 0.9, 50, 1.1],
+    ["module Main where"],
+    ["open import Data.Nat"],
+    ["data Bool : Set where"],
+    ["int main() {"],
+    ["#include <stdio.h>"],
+    ["mov eax,"],
+    ["def hello():"],
 ]
 
 
 # ============================================================================
-# Custom CSS - Clean Modern Design
+# CSS - Professional Dark Theme (Vercel/ChatGPT Style)
 # ============================================================================
 
 CUSTOM_CSS = """
-/* Main container */
+/* Reset and base */
+* {
+    box-sizing: border-box;
+}
+
 .gradio-container {
-    max-width: 1200px !important;
-    margin: auto !important;
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background: #0a0a0a !important;
+    min-height: 100vh;
 }
 
-/* Header styling */
-.header-title {
-    text-align: center;
-    font-size: 2.5rem;
-    font-weight: 700;
-    color: #1a1a2e;
-    margin-bottom: 0.25rem;
+.main {
+    background: #0a0a0a !important;
+}
+
+/* Hide default footer */
+footer {
+    display: none !important;
+}
+
+/* Main app container */
+#app-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    background: #0a0a0a;
+}
+
+/* Header */
+#header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px;
+    border-bottom: 1px solid #1f1f1f;
+    background: #0a0a0a;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+#logo {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #fafafa;
     letter-spacing: -0.02em;
 }
 
-.header-subtitle {
-    text-align: center;
-    font-size: 1.1rem;
-    color: #64748b;
-    margin-bottom: 1.5rem;
+#logo span {
+    color: #666;
+    font-weight: 400;
+    font-size: 0.875rem;
+    margin-left: 8px;
 }
 
-/* Info cards */
-.info-card {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
-    border-radius: 12px;
-    padding: 1.25rem;
-    margin-bottom: 1rem;
+#nav-buttons {
+    display: flex;
+    gap: 4px;
 }
 
-.info-card.warning {
-    background: #fffbeb;
-    border-color: #fcd34d;
-    border-left: 4px solid #f59e0b;
+.nav-btn {
+    background: transparent !important;
+    border: none !important;
+    color: #a1a1a1 !important;
+    padding: 8px 16px !important;
+    font-size: 0.875rem !important;
+    font-weight: 500 !important;
+    border-radius: 6px !important;
+    cursor: pointer !important;
+    transition: all 0.15s ease !important;
 }
 
-.info-card.stats {
-    background: #f0f9ff;
-    border-color: #bae6fd;
-    border-left: 4px solid #0ea5e9;
+.nav-btn:hover {
+    background: #1f1f1f !important;
+    color: #fafafa !important;
 }
 
-.info-card.achievement {
-    background: #faf5ff;
-    border-color: #e9d5ff;
-    border-left: 4px solid #a855f7;
+.nav-btn.active {
+    background: #1f1f1f !important;
+    color: #fafafa !important;
 }
 
-.info-card h3 {
-    margin: 0 0 0.75rem 0;
-    font-size: 1rem;
+/* Chat area */
+#chat-area {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 24px;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+#welcome-section {
+    text-align: center;
+    margin-bottom: 32px;
+}
+
+#welcome-title {
+    font-size: 2rem;
     font-weight: 600;
+    color: #fafafa;
+    margin-bottom: 8px;
+    letter-spacing: -0.03em;
 }
 
-.info-card.warning h3 { color: #92400e; }
-.info-card.stats h3 { color: #0369a1; }
-.info-card.achievement h3 { color: #7c3aed; }
+#welcome-subtitle {
+    font-size: 1rem;
+    color: #666;
+    margin-bottom: 24px;
+}
 
-.info-card p {
-    margin: 0.25rem 0;
-    font-size: 0.9rem;
-    color: #475569;
-    line-height: 1.5;
+/* Output display */
+#output-container {
+    width: 100%;
+    margin-bottom: 24px;
 }
 
-/* Score badges */
-.score-row {
+#output-box {
+    background: #141414 !important;
+    border: 1px solid #262626 !important;
+    border-radius: 12px !important;
+    min-height: 200px;
+}
+
+#output-box textarea {
+    background: transparent !important;
+    color: #e5e5e5 !important;
+    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
+    font-size: 0.875rem !important;
+    line-height: 1.6 !important;
+    padding: 16px !important;
+}
+
+#output-box label {
+    color: #666 !important;
+    font-size: 0.75rem !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.05em !important;
+}
+
+/* Input area */
+#input-container {
+    width: 100%;
+    position: relative;
+}
+
+#input-box {
+    background: #141414 !important;
+    border: 1px solid #262626 !important;
+    border-radius: 12px !important;
+    transition: border-color 0.15s ease !important;
+}
+
+#input-box:focus-within {
+    border-color: #404040 !important;
+}
+
+#input-box textarea {
+    background: transparent !important;
+    color: #fafafa !important;
+    font-size: 1rem !important;
+    padding: 16px !important;
+    padding-right: 100px !important;
+}
+
+#input-box textarea::placeholder {
+    color: #525252 !important;
+}
+
+#input-box label {
+    display: none !important;
+}
+
+#generate-btn {
+    position: absolute !important;
+    right: 8px !important;
+    bottom: 8px !important;
+    background: #fafafa !important;
+    color: #0a0a0a !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 8px 16px !important;
+    font-weight: 600 !important;
+    font-size: 0.875rem !important;
+    cursor: pointer !important;
+    transition: all 0.15s ease !important;
+}
+
+#generate-btn:hover {
+    background: #e5e5e5 !important;
+    transform: translateY(-1px) !important;
+}
+
+#generate-btn:active {
+    transform: translateY(0) !important;
+}
+
+/* Examples */
+#examples-container {
+    width: 100%;
+    margin-top: 16px;
+}
+
+#examples-label {
+    color: #525252;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 12px;
+}
+
+#examples-grid {
     display: flex;
-    gap: 1rem;
     flex-wrap: wrap;
-    margin-top: 0.75rem;
+    gap: 8px;
 }
 
-.score-badge {
-    display: inline-flex;
+.example-btn {
+    background: #141414 !important;
+    border: 1px solid #262626 !important;
+    color: #a1a1a1 !important;
+    padding: 8px 14px !important;
+    font-size: 0.8rem !important;
+    font-family: 'SF Mono', monospace !important;
+    border-radius: 8px !important;
+    cursor: pointer !important;
+    transition: all 0.15s ease !important;
+}
+
+.example-btn:hover {
+    background: #1f1f1f !important;
+    border-color: #404040 !important;
+    color: #fafafa !important;
+}
+
+/* Tabs/Panels */
+#panel-container {
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 24px;
+}
+
+.panel-section {
+    background: #141414;
+    border: 1px solid #262626;
+    border-radius: 12px;
+    padding: 24px;
+    margin-bottom: 16px;
+}
+
+.panel-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #fafafa;
+    margin-bottom: 16px;
+    display: flex;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.375rem 0.75rem;
-    border-radius: 9999px;
-    font-size: 0.8rem;
+    gap: 8px;
+}
+
+.panel-title::before {
+    content: '';
+    width: 4px;
+    height: 16px;
+    background: #fafafa;
+    border-radius: 2px;
+}
+
+/* Settings sliders */
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+
+@media (max-width: 640px) {
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Override Gradio slider styles */
+.gr-slider input[type="range"] {
+    background: #262626 !important;
+}
+
+.gr-slider label {
+    color: #a1a1a1 !important;
+    font-size: 0.8rem !important;
+}
+
+.gr-slider .gr-input {
+    background: #1f1f1f !important;
+    border: 1px solid #262626 !important;
+    color: #fafafa !important;
+}
+
+/* Info cards in panels */
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #1f1f1f;
+}
+
+.info-row:last-child {
+    border-bottom: none;
+}
+
+.info-label {
+    color: #666;
+    font-size: 0.875rem;
+}
+
+.info-value {
+    color: #fafafa;
+    font-size: 0.875rem;
     font-weight: 500;
 }
 
-.score-badge.good {
-    background: #dcfce7;
-    color: #166534;
+/* Score badges */
+.score-grid {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-top: 12px;
 }
 
-.score-badge.medium {
-    background: #fef3c7;
-    color: #92400e;
+.score-badge {
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-size: 0.75rem;
+    font-weight: 600;
 }
 
-.score-badge.weak {
-    background: #fee2e2;
-    color: #991b1b;
+.score-badge.good {
+    background: rgba(34, 197, 94, 0.15);
+    color: #22c55e;
+    border: 1px solid rgba(34, 197, 94, 0.3);
 }
 
-/* Primary button */
-.primary-btn {
-    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
-    border: none !important;
-    color: white !important;
-    font-weight: 600 !important;
-    transition: all 0.2s ease !important;
+.score-badge.medium {
+    background: rgba(234, 179, 8, 0.15);
+    color: #eab308;
+    border: 1px solid rgba(234, 179, 8, 0.3);
 }
 
-.primary-btn:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
+.score-badge.weak {
+    background: rgba(239, 68, 68, 0.15);
+    color: #ef4444;
+    border: 1px solid rgba(239, 68, 68, 0.3);
 }
 
 /* Comparison table */
 .comparison-table {
     width: 100%;
     border-collapse: collapse;
-    margin: 1rem 0;
     font-size: 0.875rem;
 }
 
 .comparison-table th,
 .comparison-table td {
-    padding: 0.75rem;
+    padding: 12px;
     text-align: left;
-    border-bottom: 1px solid #e2e8f0;
+    border-bottom: 1px solid #1f1f1f;
 }
 
 .comparison-table th {
-    background: #f1f5f9;
-    font-weight: 600;
-    color: #334155;
+    color: #666;
+    font-weight: 500;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 }
 
-.comparison-table tr:hover {
-    background: #f8fafc;
+.comparison-table td {
+    color: #a1a1a1;
 }
 
-/* Footer */
-.footer {
-    margin-top: 2rem;
-    padding-top: 1.5rem;
-    border-top: 1px solid #e2e8f0;
-    text-align: center;
-    color: #64748b;
-    font-size: 0.875rem;
+.comparison-table td strong {
+    color: #22c55e;
 }
 
-.footer a {
-    color: #3b82f6;
+/* Links */
+.links-grid {
+    display: flex;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.link-item {
+    color: #a1a1a1;
     text-decoration: none;
+    font-size: 0.875rem;
+    padding: 8px 0;
+    transition: color 0.15s ease;
+}
+
+.link-item:hover {
+    color: #fafafa;
+}
+
+/* Tab styling override */
+.gr-tab-nav {
+    background: transparent !important;
+    border: none !important;
+}
+
+.gr-tab-nav button {
+    background: transparent !important;
+    border: none !important;
+    color: #666 !important;
+    font-size: 0.875rem !important;
+    padding: 12px 16px !important;
 }
 
-.footer a:hover {
-    text-decoration: underline;
+.gr-tab-nav button.selected {
+    color: #fafafa !important;
+    border-bottom: 2px solid #fafafa !important;
 }
 
-/* Links row */
-.links-row {
+/* Disclaimer banner */
+#disclaimer-banner {
+    background: #18181b;
+    border: 1px solid #27272a;
+    border-radius: 8px;
+    padding: 12px 16px;
+    margin-bottom: 24px;
     display: flex;
-    justify-content: center;
-    gap: 1.5rem;
-    flex-wrap: wrap;
-    margin: 1rem 0;
+    align-items: flex-start;
+    gap: 12px;
 }
 
-.link-item {
-    color: #3b82f6;
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 0.9rem;
+#disclaimer-icon {
+    color: #eab308;
+    font-size: 1rem;
+    flex-shrink: 0;
+    margin-top: 2px;
 }
 
-/* Accordion styling */
-.accordion {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 8px !important;
-    margin-top: 0.5rem !important;
+#disclaimer-text {
+    color: #a1a1a1;
+    font-size: 0.8rem;
+    line-height: 1.5;
+}
+
+#disclaimer-text strong {
+    color: #fafafa;
+}
+
+/* Hide Gradio branding */
+.gr-prose {
+    color: #a1a1a1 !important;
+}
+
+.gr-prose h3 {
+    color: #fafafa !important;
+}
+
+.gr-prose strong {
+    color: #fafafa !important;
+}
+
+/* Accordion override */
+.gr-accordion {
+    background: #141414 !important;
+    border: 1px solid #262626 !important;
+    border-radius: 12px !important;
+}
+
+.gr-accordion > .label-wrap {
+    background: transparent !important;
+    color: #fafafa !important;
+}
+
+.gr-accordion > .label-wrap:hover {
+    background: #1f1f1f !important;
 }
 """
 
 
 # ============================================================================
-# Gradio Interface
+# Gradio Interface - Professional Dark Theme
 # ============================================================================
 
 with gr.Blocks(
     css=CUSTOM_CSS, 
-    title="Yuuki - Mobile-Trained Code Generator",
-    theme=gr.themes.Soft()
+    title="Yuuki",
+    theme=gr.themes.Base(
+        primary_hue="neutral",
+        secondary_hue="neutral",
+        neutral_hue="neutral",
+    ).set(
+        body_background_fill="#0a0a0a",
+        body_background_fill_dark="#0a0a0a",
+        block_background_fill="#141414",
+        block_background_fill_dark="#141414",
+        block_border_color="#262626",
+        block_border_color_dark="#262626",
+        block_label_text_color="#666666",
+        block_title_text_color="#fafafa",
+        body_text_color="#a1a1a1",
+        body_text_color_dark="#a1a1a1",
+        color_accent="#fafafa",
+        input_background_fill="#141414",
+        input_background_fill_dark="#141414",
+        input_border_color="#262626",
+        input_border_color_dark="#262626",
+    )
 ) as demo:
     
-    # Header
-    gr.HTML("""
-        <div class="header-title">Yuuki</div>
-        <div class="header-subtitle">
-            First LLM Trained Entirely on a Smartphone | Zero-Budget ML Research
-        </div>
-    """)
-    
-    # Disclaimer Card
-    gr.HTML("""
-        <div class="info-card warning">
-            <h3>Experimental Research Model</h3>
-            <p>
-                Yuuki is the <strong>best model available at this moment</strong>. 
-                The full <strong>v0.1</strong> release is coming soon — once published, 
-                plans for <strong>v0.2</strong> will begin.
-            </p>
-            <p style="margin-top: 0.5rem;">
-                This model is being trained <strong>entirely on a smartphone CPU</strong> by a 
-                <strong>single person</strong>. A research paper exploring mobile LLM training 
-                will be published soon.
-            </p>
-            <div class="score-row">
-                <span class="score-badge good">Agda: 55/100</span>
-                <span class="score-badge medium">C: 20/100</span>
-                <span class="score-badge medium">Assembly: 15/100</span>
-                <span class="score-badge weak">Python: 8/100</span>
-            </div>
-        </div>
-    """)
+    current_tab = gr.State("chat")
     
-    # Stats Card
+    # Header
     gr.HTML("""
-        <div class="info-card stats">
-            <h3>Training Statistics</h3>
-            <p><strong>Hardware:</strong> Snapdragon 685 (CPU only) | <strong>Model Size:</strong> 988 MB</p>
-            <p><strong>Progress:</strong> 2,000 / 37,500 steps (5.3%) | <strong>Speed:</strong> ~86 sec/step</p>
-            <p><strong>Loss:</strong> 1.69 - 2.31 | <strong>Cost:</strong> $0.00 | <strong>Average Quality:</strong> 24.6/100</p>
-            <p><strong>Improvement:</strong> +146% quality gain from checkpoint 1400 to 2000</p>
+        <div id="header">
+            <div id="logo">Yuuki <span>v0.1-preview</span></div>
         </div>
     """)
     
-    # Main Interface
-    with gr.Row():
-        with gr.Column(scale=1):
-            prompt_input = gr.Textbox(
-                label="Code Prompt",
-                placeholder="module Main where",
-                lines=4,
-                info="Try Agda prompts for best results"
-            )
+    # Main Tabs
+    with gr.Tabs() as tabs:
+        
+        # ===== CHAT TAB =====
+        with gr.Tab("Chat", id="chat"):
+            gr.HTML("""
+                <div id="chat-area">
+                    <div id="welcome-section">
+                        <div id="welcome-title">Yuuki</div>
+                        <div id="welcome-subtitle">Mobile-trained code generation model</div>
+                        <div id="disclaimer-banner">
+                            <span id="disclaimer-icon">!</span>
+                            <span id="disclaimer-text">
+                                <strong>Experimental model.</strong> Best at Agda (55/100). Limited C, Assembly. Weak Python.
+                                Trained entirely on smartphone CPU with $0 budget.
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            """)
             
-            with gr.Accordion("Advanced Settings", open=False):
-                max_new_tokens = gr.Slider(
-                    minimum=20,
-                    maximum=256,
-                    value=100,
-                    step=10,
-                    label="Max New Tokens",
-                    info="Number of tokens to generate"
+            with gr.Column(elem_id="output-container"):
+                output = gr.Textbox(
+                    label="Output",
+                    lines=10,
+                    show_copy_button=True,
+                    elem_id="output-box",
+                    placeholder="Generated code will appear here..."
                 )
-                temperature = gr.Slider(
-                    minimum=0.1,
-                    maximum=1.5,
-                    value=0.7,
-                    step=0.1,
-                    label="Temperature",
-                    info="Higher = more creative, lower = more focused"
-                )
-                top_p = gr.Slider(
-                    minimum=0.1,
-                    maximum=1.0,
-                    value=0.9,
-                    step=0.05,
-                    label="Top P (Nucleus Sampling)",
-                    info="Cumulative probability threshold"
-                )
-                top_k = gr.Slider(
-                    minimum=1,
-                    maximum=100,
-                    value=50,
-                    step=5,
-                    label="Top K",
-                    info="Number of top tokens to consider"
+            
+            with gr.Column(elem_id="input-container"):
+                prompt_input = gr.Textbox(
+                    label="",
+                    placeholder="Enter code prompt... (e.g., module Main where)",
+                    lines=2,
+                    elem_id="input-box",
+                    show_label=False
                 )
-                repetition_penalty = gr.Slider(
-                    minimum=1.0,
-                    maximum=2.0,
-                    value=1.1,
-                    step=0.05,
-                    label="Repetition Penalty",
-                    info="Penalize repeated tokens"
+                generate_btn = gr.Button(
+                    "Generate",
+                    variant="primary",
+                    elem_id="generate-btn",
+                    size="sm"
                 )
             
-            generate_btn = gr.Button(
-                "Generate Code", 
-                variant="primary", 
-                size="lg",
-                elem_classes=["primary-btn"]
-            )
+            # Examples
+            gr.HTML('<div id="examples-label">Try these</div>')
+            with gr.Row(elem_id="examples-grid"):
+                for ex in EXAMPLES:
+                    btn = gr.Button(ex[0], elem_classes=["example-btn"], size="sm")
+                    btn.click(lambda x=ex[0]: x, outputs=prompt_input)
         
-        with gr.Column(scale=1):
-            output = gr.Textbox(
-                label="Generated Code",
-                lines=16,
-                show_copy_button=True,
-                info="Output will appear here"
-            )
-    
-    # Examples
-    gr.Markdown("### Examples")
-    gr.Examples(
-        examples=EXAMPLES,
-        inputs=[prompt_input, max_new_tokens, temperature, top_p, top_k, repetition_penalty],
-        outputs=output,
-        fn=generate_code,
-        cache_examples=False,
-        label="Click any example to try it"
-    )
-    
-    # Comparison Section
-    with gr.Accordion("Checkpoint Comparison (1400 vs 2000)", open=False):
-        gr.HTML("""
-            <table class="comparison-table">
-                <thead>
-                    <tr>
-                        <th>Metric</th>
-                        <th>Checkpoint 1400</th>
-                        <th>Checkpoint 2000</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Training Progress</td>
-                        <td>1,400 / 37,500 (3.7%)</td>
-                        <td>2,000 / 37,500 (5.3%)</td>
-                    </tr>
-                    <tr>
-                        <td>Average Loss</td>
-                        <td>1.70 - 2.23</td>
-                        <td>1.69 - 2.31</td>
-                    </tr>
-                    <tr>
-                        <td>Training Speed</td>
-                        <td>~100 sec/step</td>
-                        <td>~86 sec/step</td>
-                    </tr>
-                    <tr>
-                        <td>Agda Score</td>
-                        <td>20/100</td>
-                        <td><strong>55/100</strong></td>
-                    </tr>
-                    <tr>
-                        <td>C Score</td>
-                        <td>8/100</td>
-                        <td><strong>20/100</strong></td>
-                    </tr>
-                    <tr>
-                        <td>Assembly Score</td>
-                        <td>2/100</td>
-                        <td><strong>15/100</strong></td>
-                    </tr>
-                    <tr>
-                        <td>Average Quality</td>
-                        <td>~10/100</td>
-                        <td><strong>24.6/100 (+146%)</strong></td>
-                    </tr>
-                </tbody>
-            </table>
-        """)
-    
-    # Why This Matters
-    with gr.Accordion("Why This Project Matters", open=False):
-        gr.Markdown("""
-        **Yuuki proves that LLM training is accessible** even with zero budget and consumer hardware.
+        # ===== SETTINGS TAB =====
+        with gr.Tab("Settings", id="settings"):
+            gr.HTML('<div id="panel-container">')
+            
+            with gr.Column(elem_classes=["panel-section"]):
+                gr.HTML('<div class="panel-title">Generation Parameters</div>')
+                
+                with gr.Row():
+                    with gr.Column():
+                        max_new_tokens = gr.Slider(
+                            minimum=20,
+                            maximum=256,
+                            value=100,
+                            step=10,
+                            label="Max Tokens"
+                        )
+                        temperature = gr.Slider(
+                            minimum=0.1,
+                            maximum=1.5,
+                            value=0.7,
+                            step=0.1,
+                            label="Temperature"
+                        )
+                        top_p = gr.Slider(
+                            minimum=0.1,
+                            maximum=1.0,
+                            value=0.9,
+                            step=0.05,
+                            label="Top P"
+                        )
+                    with gr.Column():
+                        top_k = gr.Slider(
+                            minimum=1,
+                            maximum=100,
+                            value=50,
+                            step=5,
+                            label="Top K"
+                        )
+                        repetition_penalty = gr.Slider(
+                            minimum=1.0,
+                            maximum=2.0,
+                            value=1.1,
+                            step=0.05,
+                            label="Repetition Penalty"
+                        )
+            
+            gr.HTML('</div>')
         
-        - **Students** without GPU access can experiment with ML training
-        - **Democratizes** ML research globally — barriers are mindset, not money  
-        - **Explores** edge ML training possibilities on mobile devices
-        - **Documents** complete training journey including failures and recoveries
+        # ===== INFO TAB =====
+        with gr.Tab("Info", id="info"):
+            gr.HTML('<div id="panel-container">')
+            
+            # Model Info
+            with gr.Column(elem_classes=["panel-section"]):
+                gr.HTML('<div class="panel-title">Model Information</div>')
+                gr.HTML("""
+                    <div class="info-row">
+                        <span class="info-label">Model</span>
+                        <span class="info-value">Yuuki-best (checkpoint-2000)</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Size</span>
+                        <span class="info-value">988 MB</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Training Progress</span>
+                        <span class="info-value">2,000 / 37,500 steps (5.3%)</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Hardware</span>
+                        <span class="info-value">Snapdragon 685 (CPU only)</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Training Speed</span>
+                        <span class="info-value">~86 sec/step</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Loss Range</span>
+                        <span class="info-value">1.69 - 2.31</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">Cost</span>
+                        <span class="info-value">$0.00</span>
+                    </div>
+                """)
+            
+            # Language Scores
+            with gr.Column(elem_classes=["panel-section"]):
+                gr.HTML('<div class="panel-title">Language Performance</div>')
+                gr.HTML("""
+                    <div class="score-grid">
+                        <span class="score-badge good">Agda: 55/100</span>
+                        <span class="score-badge medium">C: 20/100</span>
+                        <span class="score-badge medium">Assembly: 15/100</span>
+                        <span class="score-badge weak">Python: 8/100</span>
+                    </div>
+                    <p style="color: #666; font-size: 0.8rem; margin-top: 16px; line-height: 1.5;">
+                        Python scores low due to alphabetical dataset ordering. 
+                        Average quality: 24.6/100 (+146% from checkpoint 1400).
+                    </p>
+                """)
+            
         
-        **Key Finding:** Dataset quality matters more than loss value. Checkpoint-2700 achieved 
-        the lowest loss (1.62) but scored 12% worse in quality than checkpoint-2000, proving 
-        that loss alone is unreliable when training data varies.
-        """)
-    
-    # Footer
-    gr.HTML("""
-        <div class="footer">
-            <div class="links-row">
-                <a href="https://huggingface.co/OpceanAI/Yuuki-best" target="_blank">Model Card</a>
-                <a href="https://huggingface.co/OpceanAI/Yuuki" target="_blank">Original Yuuki</a>
-                <a href="https://github.com/YuuKi-OS/yuuki-training" target="_blank">Training Code</a>
-            </div>
-            <p style="margin-top: 1rem;">
-                Built with patience, a phone, and zero budget.<br>
-                <strong>Proving the barrier to AI is mindset, not money.</strong>
-            </p>
-            <p style="margin-top: 0.5rem; font-size: 0.8rem;">
-                Licensed under Apache 2.0 | Powered by 
-                <a href="https://gradio.app" target="_blank">Gradio</a> & 
-                <a href="https://huggingface.co" target="_blank">Hugging Face</a>
-            </p>
-        </div>
-    """)
-    
-    # Event handlers
-    generate_btn.click(
-        fn=generate_code,
-        inputs=[prompt_input, max_new_tokens, temperature, top_p, top_k, repetition_penalty],
-        outputs=output
-    )
-    
-    prompt_input.submit(
-        fn=generate_code,
-        inputs=[prompt_input, max_new_tokens, temperature, top_p, top_k, repetition_penalty],
-        outputs=output
-    )
-
-
-# ============================================================================
-# Launch
-# ============================================================================
-
-if __name__ == "__main__":
-    # Preload model on startup
-    load_model()
-    
-    demo.launch(
-        share=False,
-        show_error=True,
-        show_api=False
-    )