🔧 Switch to Inference API (no local model loading)

app.py

@@ -13,14 +13,13 @@ tokenizer = None
 
 
 def load_model():
-    """Load the Yuuki model with proper error handling."""
     global model, tokenizer, MODEL_LOADED
     
     if MODEL_LOADED:
         return True
     
     try:
-        print(f"Loading Yuuki model from {MODEL_ID}...")
+        print("Loading Yuuki model...")
         
         tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
         model = AutoModelForCausalLM.from_pretrained(
@@ -50,7 +49,6 @@ def generate_code(
     top_k: int = 50,
     repetition_penalty: float = 1.1
 ) -> str:
-    """Generate code completion using Yuuki."""
     
     if not MODEL_LOADED:
         if not load_model():
@@ -89,30 +87,10 @@ def generate_code(
 
 
 # ============================================================================
-# Examples
-# ============================================================================
-
-EXAMPLES = [
-    ["module Main where"],
-    ["open import Data.Nat"],
-    ["data Bool : Set where"],
-    ["int main() {"],
-    ["#include <stdio.h>"],
-    ["mov eax,"],
-    ["def hello():"],
-]
-
-
-# ============================================================================
-# CSS - Professional Dark Theme (Vercel/ChatGPT Style)
+# CSS
 # ============================================================================
 
 CUSTOM_CSS = """
-/* Reset and base */
-* {
-    box-sizing: border-box;
-}
-
 .gradio-container {
     max-width: 100% !important;
     padding: 0 !important;
@@ -125,20 +103,10 @@ CUSTOM_CSS = """
     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;
@@ -146,66 +114,28 @@ footer {
     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;
 }
 
-#logo span {
+#version-tag {
     color: #666;
     font-weight: 400;
     font-size: 0.875rem;
     margin-left: 8px;
 }
 
-#nav-buttons {
-    display: flex;
-    gap: 4px;
-}
-
-.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;
-}
-
-.nav-btn:hover {
-    background: #1f1f1f !important;
-    color: #fafafa !important;
-}
-
-.nav-btn.active {
-    background: #1f1f1f !important;
-    color: #fafafa !important;
-}
-
-/* Chat area */
-#chat-area {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 40px 24px;
+#chat-container {
     max-width: 800px;
     margin: 0 auto;
-    width: 100%;
+    padding: 40px 24px;
 }
 
-#welcome-section {
+#welcome-box {
     text-align: center;
     margin-bottom: 32px;
 }
@@ -215,105 +145,56 @@ footer {
     font-weight: 600;
     color: #fafafa;
     margin-bottom: 8px;
-    letter-spacing: -0.03em;
 }
 
 #welcome-subtitle {
     font-size: 1rem;
     color: #666;
-    margin-bottom: 24px;
-}
-
-/* Output display */
-#output-container {
-    width: 100%;
-    margin-bottom: 24px;
+    margin-bottom: 16px;
 }
 
-#output-box {
-    background: #141414 !important;
-    border: 1px solid #262626 !important;
-    border-radius: 12px !important;
-    min-height: 200px;
+#disclaimer {
+    background: #18181b;
+    border: 1px solid #27272a;
+    border-radius: 8px;
+    padding: 12px 16px;
+    color: #a1a1a1;
+    font-size: 0.8rem;
+    text-align: left;
+    display: inline-block;
+    max-width: 600px;
 }
 
 #output-box textarea {
-    background: transparent !important;
+    background: #141414 !important;
     color: #e5e5e5 !important;
-    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
+    font-family: 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;
+    background: #141414 !important;
     color: #fafafa !important;
-    font-size: 1rem !important;
-    padding: 16px !important;
-    padding-right: 100px !important;
+    border: 1px solid #262626 !important;
+    border-radius: 12px !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 {
@@ -322,24 +203,15 @@ footer {
     text-transform: uppercase;
     letter-spacing: 0.05em;
     margin-bottom: 12px;
-}
-
-#examples-grid {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
+    margin-top: 16px;
 }
 
 .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;
+    font-family: monospace !important;
     border-radius: 8px !important;
-    cursor: pointer !important;
-    transition: all 0.15s ease !important;
 }
 
 .example-btn:hover {
@@ -348,14 +220,6 @@ footer {
     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;
@@ -369,49 +233,8 @@ footer {
     font-weight: 600;
     color: #fafafa;
     margin-bottom: 16px;
-    display: flex;
-    align-items: center;
-    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;
@@ -434,12 +257,10 @@ footer {
     font-weight: 500;
 }
 
-/* Score badges */
 .score-grid {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
-    margin-top: 12px;
 }
 
 .score-badge {
@@ -449,25 +270,24 @@ footer {
     font-weight: 600;
 }
 
-.score-badge.good {
+.score-good {
     background: rgba(34, 197, 94, 0.15);
     color: #22c55e;
     border: 1px solid rgba(34, 197, 94, 0.3);
 }
 
-.score-badge.medium {
+.score-medium {
     background: rgba(234, 179, 8, 0.15);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.3);
 }
 
-.score-badge.weak {
+.score-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;
@@ -486,18 +306,16 @@ footer {
     font-weight: 500;
     font-size: 0.75rem;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
 }
 
 .comparison-table td {
     color: #a1a1a1;
 }
 
-.comparison-table td strong {
+.comparison-table strong {
     color: #22c55e;
 }
 
-/* Links */
 .links-grid {
     display: flex;
     gap: 16px;
@@ -508,26 +326,16 @@ footer {
     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;
 }
 
 .gr-tab-nav button.selected {
@@ -535,68 +343,18 @@ footer {
     border-bottom: 2px solid #fafafa !important;
 }
 
-/* Disclaimer banner */
-#disclaimer-banner {
-    background: #18181b;
-    border: 1px solid #27272a;
-    border-radius: 8px;
-    padding: 12px 16px;
-    margin-bottom: 24px;
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-}
-
-#disclaimer-icon {
-    color: #eab308;
-    font-size: 1rem;
-    flex-shrink: 0;
-    margin-top: 2px;
-}
-
-#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 - Professional Dark Theme
+# Interface
 # ============================================================================
 
 with gr.Blocks(
@@ -613,175 +371,115 @@ with gr.Blocks(
         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:
     
-    current_tab = gr.State("chat")
-    
     # Header
-    gr.HTML("""
-        <div id="header">
-            <div id="logo">Yuuki <span>v0.1-preview</span></div>
-        </div>
-    """)
+    gr.HTML('<div id="header"><div id="logo">Yuuki <span id="version-tag">v0.1-preview</span></div></div>')
     
-    # Main Tabs
-    with gr.Tabs() as tabs:
+    # Tabs
+    with gr.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>
-            """)
+        # Chat Tab
+        with gr.Tab("Chat"):
+            gr.HTML('<div id="chat-container">')
+            gr.HTML('<div id="welcome-box"><div id="welcome-title">Yuuki</div><div id="welcome-subtitle">Mobile-trained code generation model</div><div id="disclaimer"><strong>Experimental model.</strong> Best at Agda (55/100). Limited C, Assembly. Weak Python. Trained on smartphone CPU.</div></div>')
             
-            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..."
-                )
+            output = gr.Textbox(
+                label="Output",
+                lines=10,
+                show_copy_button=True,
+                elem_id="output-box",
+                placeholder="Generated code will appear here..."
+            )
             
-            with gr.Column(elem_id="input-container"):
+            with gr.Row():
                 prompt_input = gr.Textbox(
                     label="",
                     placeholder="Enter code prompt... (e.g., module Main where)",
                     lines=2,
                     elem_id="input-box",
-                    show_label=False
-                )
-                generate_btn = gr.Button(
-                    "Generate",
-                    variant="primary",
-                    elem_id="generate-btn",
-                    size="sm"
+                    show_label=False,
+                    scale=4
                 )
+                generate_btn = gr.Button("Generate", variant="primary", elem_id="generate-btn", scale=1)
             
-            # Examples
             gr.HTML('<div id="examples-label">Try these</div>')
-            with gr.Row(elem_id="examples-grid"):
-                ex_btn_1 = gr.Button("module Main where", elem_classes=["example-btn"], size="sm")
-                ex_btn_2 = gr.Button("open import Data.Nat", elem_classes=["example-btn"], size="sm")
-                ex_btn_3 = gr.Button("int main() {", elem_classes=["example-btn"], size="sm")
-                ex_btn_4 = gr.Button("def hello():", elem_classes=["example-btn"], size="sm")
+            with gr.Row():
+                ex1 = gr.Button("module Main where", elem_classes=["example-btn"], size="sm")
+                ex2 = gr.Button("open import Data.Nat", elem_classes=["example-btn"], size="sm")
+                ex3 = gr.Button("int main() {", elem_classes=["example-btn"], size="sm")
+                ex4 = gr.Button("def hello():", elem_classes=["example-btn"], size="sm")
             
-            ex_btn_1.click(lambda: "module Main where", outputs=prompt_input)
-            ex_btn_2.click(lambda: "open import Data.Nat", outputs=prompt_input)
-            ex_btn_3.click(lambda: "int main() {", outputs=prompt_input)
-            ex_btn_4.click(lambda: "def hello():", outputs=prompt_input)
+            gr.HTML('</div>')
         
-        # ===== SETTINGS TAB =====
-        with gr.Tab("Settings", id="settings"):
-            gr.HTML('<div id="panel-container">')
-            
+        # Settings Tab
+        with gr.Tab("Settings"):
             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"
-                        )
+                        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>')
+                        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")
         
-        # ===== INFO TAB =====
-        with gr.Tab("Info", id="info"):
-            gr.HTML('<div id="panel-container">')
-            
-            # Model Info
+        # Info Tab
+        with gr.Tab("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>
-                """)
+                gr.HTML('<div class="info-row"><span class="info-label">Model</span><span class="info-value">Yuuki-best (checkpoint-2000)</span></div>')
+                gr.HTML('<div class="info-row"><span class="info-label">Size</span><span class="info-value">988 MB</span></div>')
+                gr.HTML('<div class="info-row"><span class="info-label">Training Progress</span><span class="info-value">2,000 / 37,500 steps (5.3%)</span></div>')
+                gr.HTML('<div class="info-row"><span class="info-label">Hardware</span><span class="info-value">Snapdragon 685 (CPU only)</span></div>')
+                gr.HTML('<div class="info-row"><span class="info-label">Speed</span><span class="info-value">~86 sec/step</span></div>')
+                gr.HTML('<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</sp
+                gr.HTML('<div class="score-grid"><span class="score-badge score-good">Agda: 55/100</span><span class="score-badge score-medium">C: 20/100</span><span class="score-badge score-medium">Assembly: 15/100</span><span class="score-badge score-weak">Python: 8/100</span></div>')
+                gr.HTML('<p style="color: #666; font-size: 0.8rem; margin-top: 16px;">Average quality: 24.6/100 (+146% from checkpoint 1400)</p>')
+            
+            with gr.Column(elem_classes=["panel-section"]):
+                gr.HTML('<div class="panel-title">Checkpoint Comparison</div>')
+                gr.HTML('<table class="comparison-table"><thead><tr><th>Metric</th><th>CP-1400</th><th>CP-2000</th></tr></thead><tbody><tr><td>Progress</td><td>3.7%</td><td><strong>5.3%</strong></td></tr><tr><td>Agda</td><td>20/100</td><td><strong>55/100</strong></td></tr><tr><td>C</td><td>8/100</td><td><strong>20/100</strong></td></tr><tr><td>Assembly</td><td>2/100</td><td><strong>15/100</strong></td></tr><tr><td>Average</td><td>~10/100</td><td><strong>24.6/100</strong></td></tr></tbody></table>')
+            
+            with gr.Column(elem_classes=["panel-section"]):
+                gr.HTML('<div class="panel-title">About</div>')
+                gr.Markdown("This is the **best model available at this moment**. The full **v0.1** release is coming soon. Once published, plans for **v0.2** will begin.\n\nYuuki is being trained **entirely on a smartphone CPU** by a **single person**. A research paper exploring mobile LLM training will be published soon.\n\n**Why this matters:**\n- Students without GPU access can experiment with ML\n- Democratizes ML research globally\n- Explores edge ML training possibilities")
+            
+            with gr.Column(elem_classes=["panel-section"]):
+                gr.HTML('<div class="panel-title">Links</div>')
+                gr.HTML('<div class="links-grid"><a href="https://huggingface.co/OpceanAI/Yuuki-best" target="_blank" class="link-item">Model Card</a><a href="https://huggingface.co/OpceanAI/Yuuki" target="_blank" class="link-item">Original Yuuki</a><a href="https://github.com/YuuKi-OS/yuuki-training" target="_blank" class="link-item">Training Code</a></div>')
+                gr.HTML('<p style="color: #525252; font-size: 0.75rem; margin-top: 24px;">Licensed under Apache 2.0</p>')
+    
+    # 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
+    )
+    
+    ex1.click(lambda: "module Main where", outputs=prompt_input)
+    ex2.click(lambda: "open import Data.Nat", outputs=prompt_input)
+    ex3.click(lambda: "int main() {", outputs=prompt_input)
+    ex4.click(lambda: "def hello():", outputs=prompt_input)
+
+
+# Launch
+if __name__ == "__main__":
+    demo.launch(share=False, show_error=True, show_api=False)
+