Upload 4 files

README.md

@@ -1,13 +1,15 @@
 ---
 title: Luau Coder Preview
-emoji: 🐠
-colorFrom: pink
-colorTo: yellow
+emoji: 🦭
+colorFrom: gray
+colorTo: blue
 sdk: gradio
 sdk_version: 6.29.1
 python_version: '3.12'
 app_file: app.py
-pinned: false
+pinned: true
+license: apache-2.0
+short_description: Inference
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,311 @@
+import gc
+import os
+import tempfile
+from collections.abc import Generator
+from functools import wraps
+from pathlib import Path
+from threading import Lock, Thread
+
+import spaces
+import torch
+import transformers
+from fastapi.responses import HTMLResponse
+from gradio import Server
+from transformers import AutoModelForCausalLM, AutoTokenizer, LogitsProcessor, LogitsProcessorList, TextIteratorStreamer
+
+print(f"Transformers version: {transformers.__version__}")
+
+REPO_ID = "khtsly/Luau-Coder-1.0"
+TOKENIZER_REPO_ID = "khtsly/luau-coder-1.0-preview-tokenizer"
+HF_TOKEN = os.environ.get("HF_TOKEN")
+
+# Available model variants. The front-end populates its selector from the
+# /models endpoint, so adding a new entry here is enough to offer it.
+# Only one variant is kept loaded at a time; switching unloads the previous.
+MODEL_VARIANTS = {
+    "0.5B-Base": {"repo_id": f"{REPO_ID}-0.5B-Base", "enabled": True},
+    "1.4B-Base (Stage1)": {"repo_id": f"{REPO_ID}-1.4B-Base-Stage1", "enabled": True},
+}
+DEFAULT_VARIANT = "0.5B-Base"
+
+
+def _repair_checkpoint_keys(weights_path: Path) -> bool:
+    """Remove an obsolete composite-model prefix before Transformers loads."""
+    from safetensors import safe_open
+
+    with safe_open(weights_path, framework="pt", device="cpu") as f:
+        keys = list(f.keys())
+
+    prefixed = [key for key in keys if key.startswith("language_model.")]
+    if not prefixed:
+        return False
+    if len(prefixed) != len(keys):
+        raise RuntimeError(
+            f"Refusing to repair mixed checkpoint keys in {weights_path}: "
+            f"{len(prefixed)} of {len(keys)} use the language_model. prefix"
+        )
+
+    fixed_keys = [key.removeprefix("language_model.") for key in keys]
+    if len(set(fixed_keys)) != len(fixed_keys):
+        raise RuntimeError(f"Prefix removal would create duplicate keys in {weights_path}")
+
+    from safetensors.torch import load_file, save_file
+
+    print(f"Repairing {len(keys)} checkpoint keys in {weights_path} ...")
+    state = load_file(weights_path, device="cpu")
+    fixed = {
+        key.removeprefix("language_model."): tensor.contiguous()
+        for key, tensor in state.items()
+    }
+    tmp_path = weights_path.with_name(f".{weights_path.name}.repair.tmp")
+    try:
+        save_file(fixed, tmp_path)
+        os.replace(tmp_path, weights_path)
+    finally:
+        tmp_path.unlink(missing_ok=True)
+    print("Checkpoint key repair complete")
+    return True
+
+
+def _prepare_model_source(variant: str) -> str:
+    """Return a local model directory whose safetensors keys are loadable."""
+    repo_id = MODEL_VARIANTS[variant]["repo_id"]
+    cache_dir = Path(tempfile.gettempdir()) / f"luau-coder-1.0-{variant}"
+
+    # Local override for the default variant (checked-in model.safetensors).
+    if variant == DEFAULT_VARIANT:
+        app_dir = Path(__file__).resolve().parent
+        weights_path = app_dir / "model.safetensors"
+        if weights_path.is_file():
+            _repair_checkpoint_keys(weights_path)
+            return str(app_dir)
+
+    from huggingface_hub import snapshot_download
+
+    snapshot_download(
+        repo_id=repo_id,
+        local_dir=cache_dir,
+        token=HF_TOKEN,
+        allow_patterns=["*.json", "*.py", "*.jinja", "*.safetensors"],
+    )
+    weights_path = cache_dir / "model.safetensors"
+
+    if not weights_path.is_file():
+        raise FileNotFoundError(f"No model.safetensors found in {cache_dir}")
+
+    _repair_checkpoint_keys(weights_path)
+    return str(cache_dir)
+
+
+tokenizer = AutoTokenizer.from_pretrained(
+    TOKENIZER_REPO_ID,
+    trust_remote_code=True,
+    token=HF_TOKEN
+)
+
+_model = None
+_current_variant = None
+_model_lock = Lock()
+
+
+def _unload_current_model() -> None:
+    """Free the currently loaded variant so the next one can take its place."""
+    global _model, _current_variant
+    if _model is not None:
+        print(f"Unloading model variant: {_current_variant}")
+        del _model
+        _model = None
+    _current_variant = None
+    gc.collect()
+    if torch.cuda.is_available():
+        torch.cuda.empty_cache()
+
+
+def ensure_model(variant: str):
+    """Load `variant` on demand, unloading whatever is currently loaded."""
+    global _model, _current_variant
+    if variant not in MODEL_VARIANTS:
+        print(f"Unknown model variant {variant!r}; falling back to {DEFAULT_VARIANT}")
+        variant = DEFAULT_VARIANT
+    if not MODEL_VARIANTS[variant].get("enabled", True):
+        print(f"Model variant {variant!r} is not enabled yet; falling back to {DEFAULT_VARIANT}")
+        variant = DEFAULT_VARIANT
+    with _model_lock:
+        if _model is not None and _current_variant == variant:
+            return _model
+        _unload_current_model()
+        repo_id = MODEL_VARIANTS[variant]["repo_id"]
+        print(f"Loading model variant: {variant} ({repo_id}) ...")
+        source = _prepare_model_source(variant)
+        loaded = AutoModelForCausalLM.from_pretrained(
+            source,
+            trust_remote_code=True,
+            dtype=torch.bfloat16,
+            token=HF_TOKEN,
+            device_map="cuda",
+        )
+        _install_transformers_516_cache_compat(loaded)
+        _model = loaded
+        _current_variant = variant
+        print(f"Model variant ready: {variant}")
+        return _model
+
+
+def _install_transformers_516_cache_compat(loaded_model) -> None:
+    """Handle empty generation positions with older Kimi remote code."""
+    inner_model = loaded_model.model
+    original_forward = inner_model.forward
+
+    @wraps(original_forward)
+    def compatible_forward(*args, **kwargs):
+        for name in ("cache_position", "position_ids"):
+            value = kwargs.get(name)
+            numel = getattr(value, "numel", None)
+            if callable(numel) and numel() == 0:
+                kwargs[name] = None
+        return original_forward(*args, **kwargs)
+
+    inner_model.forward = compatible_forward
+
+
+class PresencePenaltyLogitsProcessor(LogitsProcessor):
+    """OpenAI-style presence penalty for HF generate (which lacks it natively).
+
+    Subtracts `penalty` once from the logit of every unique token already
+    present in the context, discouraging the model from reusing tokens.
+    """
+
+    def __init__(self, penalty: float):
+        self.penalty = float(penalty)
+
+    def __call__(self, input_ids: torch.LongTensor, scores: torch.FloatTensor) -> torch.FloatTensor:
+        if self.penalty == 0:
+            return scores
+        for batch_idx, ids in enumerate(input_ids):
+            for token_id in set(ids.tolist()):
+                if 0 <= token_id < scores.shape[-1]:
+                    scores[batch_idx, token_id] -= self.penalty
+        return scores
+
+
+demo = Server()
+
+
+@demo.api()
+@spaces.GPU(duration=60)
+def predict(
+    message: str,
+    history: list[list] | None = None,
+    max_tokens: int = 32,
+    temperature: float = 0.6,
+    top_p: float = 0.95,
+    top_k: int = 50,
+    repetition_penalty: float = 1.0,
+    presence_penalty: float = 0.0,
+    model_id: str = "0.5B-Base",
+) -> Generator[str, None, None]:
+    # History is accepted for front-end chat compatibility; generation uses
+    # the current message only to preserve base-model continuation behavior.
+    raw_input_text = message
+    max_tokens = int(max_tokens)
+    active_model = ensure_model(model_id)
+    if next(active_model.parameters()).device.type != "cuda":
+        active_model.to("cuda")
+    inputs = tokenizer(raw_input_text, return_tensors="pt")
+    token_count = inputs["input_ids"].shape[1]
+    print(f"Generation request: {len(raw_input_text)} chars, {token_count} tokens")
+
+    if token_count == 0:
+        seed_token_id = tokenizer.bos_token_id
+        if seed_token_id is None:
+            candidate = tokenizer.convert_tokens_to_ids("[BOS]")
+            if isinstance(candidate, int) and candidate >= 0:
+                seed_token_id = candidate
+        if seed_token_id is None:
+            yield "Please enter a non-empty prompt."
+            return
+        inputs["input_ids"] = torch.tensor([[seed_token_id]], dtype=torch.long)
+        inputs["attention_mask"] = torch.ones((1, 1), dtype=torch.long)
+        token_count = 1
+        print(f"Empty prompt: seeded generation with token {seed_token_id}")
+
+    inputs = inputs.to("cuda")
+    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True)
+
+    generation_kwargs = dict(
+        **inputs,
+        streamer=streamer,
+        max_new_tokens=int(max_tokens),
+        pad_token_id=tokenizer.eos_token_id,
+        use_cache=True,
+        generation_mode=True
+    )
+
+    temperature = float(temperature)
+    top_p = float(top_p)
+    top_k = int(top_k)
+    repetition_penalty = float(repetition_penalty)
+    presence_penalty = float(presence_penalty)
+
+    if temperature > 0.0:
+        generation_kwargs.update(do_sample=True, temperature=temperature)
+        if 0.0 < top_p < 1.0:
+            generation_kwargs["top_p"] = top_p
+        if top_k > 0:
+            generation_kwargs["top_k"] = top_k
+    else:
+        generation_kwargs.update(do_sample=False)
+
+    if repetition_penalty != 1.0:
+        generation_kwargs["repetition_penalty"] = repetition_penalty
+
+    if presence_penalty != 0.0:
+        generation_kwargs["logits_processor"] = LogitsProcessorList(
+            [PresencePenaltyLogitsProcessor(presence_penalty)]
+        )
+
+    generation_error = []
+
+    def run_generation():
+        try:
+            active_model.generate(**generation_kwargs)
+        except Exception as exc:
+            generation_error.append(exc)
+            streamer.end()
+
+    thread = Thread(target=run_generation)
+    thread.start()
+
+    output_buffer = ""
+    for new_text in streamer:
+        output_buffer += new_text
+        yield output_buffer
+    thread.join()
+
+    if generation_error:
+        exc = generation_error[0]
+        message_out = f"Generation failed: {type(exc).__name__}: {exc}"
+        print(message_out)
+        yield f"{output_buffer}\n\n{message_out}" if output_buffer else message_out
+
+
+@demo.get("/models")
+async def list_models():
+    return {
+        "default": DEFAULT_VARIANT,
+        "variants": [
+            {"id": name, "enabled": bool(cfg.get("enabled", True))}
+            for name, cfg in sorted(MODEL_VARIANTS.items())
+        ],
+    }
+
+
+@demo.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        return f.read()
+
+
+if __name__ == "__main__":
+    demo.launch(show_error=True)

index.html

@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Luau Coder Preview | khtsly</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/18.0.12/lib/marked.umd.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.18.7/katex.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.18.7/katex.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.18.7/contrib/auto-render.min.js"></script>
+    <style>
+        :root {
+            --bg: #ffffff;
+            --blue: #00A2FF;
+            --cyan: #0077C8;
+            --text: #1e293b;
+            --text-muted: #64748b;
+            --glass: rgba(0, 0, 0, 0.02);
+            --glass-border: #e2e8f0;
+            --accent: #00A2FF;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            height: 100vh;
+            margin: 0;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+
+        .chat-scroll-area {
+            flex: 1;
+            overflow-y: auto;
+            padding-bottom: 140px;
+            -webkit-overflow-scrolling: touch;
+            scroll-behavior: smooth;
+        }
+
+        .chat-scroll-area::-webkit-scrollbar { width: 4px; }
+        .chat-scroll-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
+
+        .message-bubble {
+            max-width: 85%;
+            padding: 15px;
+            animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(12px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .user-message {
+            background: linear-gradient(135deg, var(--blue), var(--cyan));
+            color: #ffffff;
+            box-shadow: 0 4px 14px rgba(0, 162, 255, 0.28);
+            border-radius: 20px 20px 4px 20px;
+        }
+
+        .bot-message {
+            background: #f8fafc;
+            border: 1px solid var(--glass-border);
+            border-radius: 20px 20px 20px 4px;
+        }
+
+        .typing-dot {
+            width: 4px; height: 4px;
+            background: var(--accent);
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+
+        @keyframes bounce {
+            0%, 80%, 100% { transform: scale(0.3); opacity: 0.4; }
+            40% { transform: scale(1); opacity: 1; }
+        }
+
+        .input-pill {
+            background: #ffffff;
+            border: 1px solid var(--glass-border);
+            transition: all 0.3s ease;
+        }
+
+        .input-pill:focus-within {
+            border-color: rgba(0, 162, 255, 0.45);
+            box-shadow: 0 0 0 3px rgba(0, 162, 255, 0.12);
+        }
+
+        .logo-glow {
+            filter: drop-shadow(0 0 8px rgba(0, 162, 255, 0.35));
+        }
+
+        .send-btn {
+            background: linear-gradient(135deg, #334155, #0f172a);
+            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
+            transition: all 0.3s ease;
+        }
+        .send-btn:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.25); }
+
+        .settings-panel {
+            background: rgba(255, 255, 255, 0.98);
+            backdrop-filter: blur(20px);
+            border-left: 1px solid var(--glass-border);
+            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+        }
+
+        .control-slider {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 4px;
+            background: #e2e8f0;
+            border-radius: 2px;
+            outline: none;
+        }
+        .control-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 12px; height: 12px;
+            background: var(--accent);
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
+        .bot-message pre {
+            background: #f1f5f9;
+            border: 1px solid #e2e8f0;
+            border-radius: 10px;
+            padding: 12px;
+            overflow-x: auto;
+        }
+        .bot-message code { color: #0284C7; }
+    </style>
+</head>
+<body>
+
+    <header class="h-16 flex items-center justify-between px-6 md:px-10 shrink-0 z-50 border-b border-slate-200 bg-white">
+        <div class="flex items-center gap-3">
+            <div class="w-10 h-10 logo-glow rounded-lg flex items-center justify-center overflow-hidden" style="background: #0f172a;">
+                <img src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Luau_Logo_%28Programming_Language%29.svg"
+                     alt="Luau" class="w-9 h-9">
+            </div>
+            <div>
+                <h1 class="text-lg font-bold text-slate-800">Luau Coder</h1>
+                <p class="text-[10px] text-slate-400 uppercase tracking-[0.2em] font-semibold">By khtsly &middot; Preview</p>
+            </div>
+        </div>
+        <div class="flex items-center gap-4">
+            <button id="toggle-settings" class="p-2 rounded-xl hover:bg-slate-100 text-slate-500 hover:text-slate-800 transition-all">
+                <i data-lucide="sliders-horizontal" class="w-5 h-5"></i>
+            </button>
+        </div>
+    </header>
+
+    <div id="settings-panel" class="fixed top-0 right-0 h-full w-72 z-[100] translate-x-full settings-panel p-6 flex flex-col gap-6 shadow-[-12px_0_40px_rgba(0,0,0,0.08)] overflow-y-auto">
+        <div class="flex items-center justify-between">
+            <h2 class="text-base font-bold text-slate-800">Settings</h2>
+            <button id="close-settings" class="text-slate-400 hover:text-slate-700">
+                <i data-lucide="x" class="w-5 h-5"></i>
+            </button>
+        </div>
+
+        <div class="space-y-5">
+            <div class="space-y-2">
+                <div class="flex justify-between text-xs font-bold text-slate-400 uppercase tracking-widest">
+                    <span>Temperature</span>
+                    <span id="temp-val">0.6</span>
+                </div>
+                <input type="range" id="temp-slider" min="0" max="1.5" step="0.05" value="0.6" class="control-slider">
+                <p class="text-[11px] text-slate-400">0.0 = Greedy</p>
+            </div>
+
+            <div class="space-y-2">
+                <div class="flex justify-between text-xs font-bold text-slate-400 uppercase tracking-widest">
+                    <span>Max tokens</span>
+                    <span id="tokens-val">32</span>
+                </div>
+                <input type="range" id="tokens-slider" min="16" max="256" step="1" value="32" class="control-slider">
+            </div>
+
+            <div class="space-y-2">
+                <div class="flex justify-between text-xs font-bold text-slate-400 uppercase tracking-widest">
+                    <span>Top-p</span>
+                    <span id="topp-val">0.95</span>
+                </div>
+                <input type="range" id="topp-slider" min="0" max="1" step="0.05" value="0.95" class="control-slider">
+                <p class="text-[11px] text-slate-400">1.0 = Off</p>
+            </div>
+
+            <div class="space-y-2">
+                <div class="flex justify-between text-xs font-bold text-slate-400 uppercase tracking-widest">
+                    <span>Top-k</span>
+                    <span id="topk-val">50</span>
+                </div>
+                <input type="range" id="topk-slider" min="0" max="100" step="1" value="50" class="control-slider">
+                <p class="text-[11px] text-slate-400">0 = Off</p>
+            </div>
+
+            <div class="space-y-2">
+                <div class="flex justify-between text-xs font-bold text-slate-400 uppercase tracking-widest">
+                    <span>Repetition penalty</span>
+                    <span id="rep-val">1.0</span>
+                </div>
+                <input type="range" id="rep-slider" min="1" max="2" step="0.05" value="1.0" class="control-slider">
+                <p class="text-[11px] text-slate-400">1.0 = Off</p>
+            </div>
+
+            <div class="space-y-2">
+                <div class="flex justify-between text-xs font-bold text-slate-400 uppercase tracking-widest">
+                    <span>Presence penalty</span>
+                    <span id="pres-val">0.0</span>
+                </div>
+                <input type="range" id="pres-slider" min="0" max="2" step="0.1" value="0.0" class="control-slider">
+                <p class="text-[11px] text-slate-400">0.0 = Off</p>
+            </div>
+
+            <button onclick="clearHistory()" class="w-full py-3 rounded-xl bg-red-50 border border-red-200 text-red-600 text-sm font-bold hover:bg-red-100 transition-all flex items-center justify-center gap-2 mt-4">
+                <i data-lucide="trash-2" class="w-4 h-4"></i>
+                Clear History
+            </button>
+        </div>
+    </div>
+
+    <main id="chat-messages" class="chat-scroll-area px-4 flex-1">
+        <div class="max-w-3xl mx-auto space-y-6 pt-6 pb-32" id="chat-container">
+            <div class="flex gap-3 items-start">
+                <div class="bot-message message-bubble shadow-sm">
+                    <p class="text-slate-700 leading-relaxed text-[15px]">
+                        Hello!
+                    </p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <div class="fixed bottom-0 left-0 right-0 p-4 md:p-8 pointer-events-none z-50">
+        <div class="max-w-3xl mx-auto pointer-events-auto">
+            <div class="input-pill rounded-[1.5rem] p-2 shadow-lg">
+                <textarea id="user-input" placeholder="Enter a prompt or code to continue..." rows="1"
+                    class="w-full bg-transparent border-none focus:ring-0 text-slate-800 placeholder-slate-400 py-3 px-3 resize-none max-h-40 leading-relaxed font-medium outline-none"></textarea>
+                <div class="flex items-center justify-between pl-2 pr-1 pb-1">
+                    <div class="relative" id="model-picker">
+                        <button id="model-select-btn" title="Model variant" class="text-xs font-semibold border border-slate-200 rounded-full pl-3 pr-8 py-1.5 bg-slate-50 text-slate-600 hover:bg-slate-100 hover:text-slate-800 transition-all focus:outline-none focus:border-sky-300 focus:ring-2 focus:ring-sky-100 max-w-[11rem] truncate">
+                            0.5B-Base
+                        </button>
+                        <i data-lucide="chevron-down" class="w-3.5 h-3.5 absolute right-2.5 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
+                        <div id="model-menu" class="hidden absolute bottom-full left-0 mb-2 min-w-[10rem] bg-white border border-slate-200 rounded-2xl shadow-xl p-1.5 z-50"></div>
+                    </div>
+                    <button id="send-btn" class="send-btn w-9 h-9 text-white rounded-full flex items-center justify-center shrink-0">
+                        <i data-lucide="arrow-up" class="w-5 h-5" id="send-icon"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+        lucide.createIcons();
+
+        const chatContainer = document.getElementById('chat-container');
+        const chatScrollArea = document.getElementById('chat-messages');
+        const userInput = document.getElementById('user-input');
+        const sendBtn = document.getElementById('send-btn');
+        const settingsPanel = document.getElementById('settings-panel');
+        const toggleSettings = document.getElementById('toggle-settings');
+        const closeSettings = document.getElementById('close-settings');
+        const tempSlider = document.getElementById('temp-slider');
+        const tokensSlider = document.getElementById('tokens-slider');
+        const modelSelectBtn = document.getElementById('model-select-btn');
+        const modelMenu = document.getElementById('model-menu');
+        const modelPicker = document.getElementById('model-picker');
+        const toppSlider = document.getElementById('topp-slider');
+        const topkSlider = document.getElementById('topk-slider');
+        const repSlider = document.getElementById('rep-slider');
+        const presSlider = document.getElementById('pres-slider');
+
+        let client = null;
+        let chatHistory = [];
+        let currentJob = null;
+        let isSettingsOpen = false;
+        let currentModel = "0.5B-Base";
+        let modelVariants = [
+            { id: "0.5B-Base", enabled: true },
+            { id: "1.4B-Base (Stage1)", enabled: true },
+        ];
+        let pendingModelLoad = false;
+
+        async function init() {
+            try {
+                client = await Client.connect(window.location.origin, { events: ["data", "status"] });
+            } catch (err) {
+                console.error("Gradio connection error", err);
+            }
+        }
+        init();
+        loadModelOptions();
+
+        async function loadModelOptions() {
+            let fallback = "0.5B-Base";
+            try {
+                const res = await fetch(window.location.origin + "/models");
+                if (res.ok) {
+                    const data = await res.json();
+                    if (Array.isArray(data.variants) && data.variants.length) {
+                        modelVariants = data.variants.map((v) =>
+                            typeof v === "string" ? { id: v, enabled: true } : { id: v.id, enabled: v.enabled !== false }
+                        );
+                    }
+                    if (data.default) fallback = data.default;
+                }
+            } catch (err) {
+                console.error("Model list fetch error", err);
+            }
+            const enabledIds = modelVariants.filter((v) => v.enabled).map((v) => v.id);
+            currentModel = enabledIds.includes(fallback) ? fallback : enabledIds[0];
+            renderModelMenu();
+        }
+
+        function renderModelMenu() {
+            modelMenu.innerHTML = "";
+            for (const v of modelVariants) {
+                const item = document.createElement("button");
+                const isCurrent = v.id === currentModel;
+                if (v.enabled) {
+                    item.className = `w-full flex items-center justify-between gap-3 px-3 py-2 rounded-xl text-xs font-semibold transition-all ${isCurrent ? "bg-sky-50 text-sky-700" : "text-slate-600 hover:bg-slate-100"}`;
+                } else {
+                    item.className = "w-full flex items-center justify-between gap-3 px-3 py-2 rounded-xl text-xs font-semibold text-slate-400 opacity-70 cursor-not-allowed";
+                    item.disabled = true;
+                    item.title = "Coming soon";
+                }
+                const left = document.createElement("span");
+                left.className = "flex items-center gap-2 min-w-0";
+                const label = document.createElement("span");
+                label.className = "truncate";
+                label.textContent = v.id;
+                left.appendChild(label);
+                if (!v.enabled) {
+                    const badge = document.createElement("span");
+                    badge.className = "text-[9px] font-bold tracking-widest px-1.5 py-0.5 rounded-md bg-amber-100 text-amber-700 border border-amber-200 shrink-0";
+                    badge.textContent = "SOON";
+                    left.appendChild(badge);
+                }
+                item.appendChild(left);
+                if (isCurrent) {
+                    const check = document.createElement("i");
+                    check.setAttribute("data-lucide", "check");
+                    check.className = "w-3.5 h-3.5 shrink-0";
+                    item.appendChild(check);
+                }
+                if (v.enabled) {
+                    item.onclick = (e) => { e.stopPropagation(); selectModel(v.id); };
+                }
+                modelMenu.appendChild(item);
+            }
+            modelSelectBtn.textContent = currentModel;
+            if (window.lucide) lucide.createIcons();
+        }
+
+        function toggleModelMenu(open) {
+            const willOpen = open === undefined ? modelMenu.classList.contains("hidden") : open;
+            modelMenu.classList.toggle("hidden", !willOpen);
+        }
+
+        function selectModel(next) {
+            toggleModelMenu(false);
+            if (next === currentModel) return;
+            if (chatHistory.length > 0) {
+                if (!confirm(`Switch model to ${next}? Conversation history will be cleared.`)) return;
+            }
+            currentModel = next;
+            pendingModelLoad = true;
+            clearHistory();
+            renderModelMenu();
+        }
+
+        function renderMath(el) {
+            if (window.renderMathInElement) {
+                renderMathInElement(el, {
+                    delimiters: [
+                        {left: '$$', right: '$$', display: true},
+                        {left: '$', right: '$', display: false},
+                    ],
+                    throwOnError: false
+                });
+            }
+        }
+
+        function appendMessage(role, text = '') {
+            const div = document.createElement('div');
+            div.className = `flex gap-3 items-start ${role === 'user' ? 'flex-row-reverse' : ''}`;
+            const bubbleClass = role === 'user' ? 'user-message' : 'bot-message';
+            div.innerHTML = `
+                <div class="${bubbleClass} message-bubble shadow-sm">
+                    <div class="content-container leading-relaxed text-[15px]">${role === 'user' ? escapeHtml(text) : marked.parse(text)}</div>
+                </div>
+            `;
+            chatContainer.appendChild(div);
+            if (role === 'bot') renderMath(div.querySelector('.content-container'));
+            chatScrollArea.scrollTo({ top: chatScrollArea.scrollHeight, behavior: 'smooth' });
+            return div;
+        }
+
+        function escapeHtml(s) {
+            return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+        }
+
+        function updateBotMessage(div, fullText) {
+            const contentContainer = div.querySelector('.content-container');
+            if (fullText) {
+                contentContainer.innerHTML = marked.parse(fullText);
+            } else {
+                contentContainer.innerHTML = '';
+            }
+            renderMath(contentContainer);
+            chatScrollArea.scrollTo({ top: chatScrollArea.scrollHeight, behavior: 'smooth' });
+            return fullText;
+        }
+
+        async function sendMessage() {
+            const text = userInput.value.trim();
+            if (!text) return;
+
+            userInput.value = '';
+            userInput.style.height = 'auto';
+            appendMessage('user', text);
+
+            sendBtn.disabled = true;
+            const botDiv = appendMessage('bot', '');
+            const contentContainer = botDiv.querySelector('.content-container');
+            if (pendingModelLoad) {
+                contentContainer.innerHTML = `<p class="text-slate-500">Loading model ${escapeHtml(currentModel)}… first load may take a while.</p>`;
+                pendingModelLoad = false;
+            } else {
+                contentContainer.innerHTML = '<div class="flex gap-1.5 py-2"><div class="typing-dot"></div><div class="typing-dot"></div><div class="typing-dot"></div></div>';
+            }
+
+            let isStopped = false;
+            sendBtn.onclick = () => {
+                if (currentJob) {
+                    currentJob.cancel();
+                    isStopped = true;
+                    resetSendBtn();
+                }
+            };
+
+            try {
+                currentJob = client.submit("/predict", {
+                    message: text,
+                    history: chatHistory,
+                    max_tokens: parseInt(tokensSlider.value),
+                    temperature: parseFloat(tempSlider.value),
+                    top_p: parseFloat(toppSlider.value),
+                    top_k: parseInt(topkSlider.value),
+                    repetition_penalty: parseFloat(repSlider.value),
+                    presence_penalty: parseFloat(presSlider.value),
+                    model_id: currentModel,
+                });
+
+                let finalAnswer = "";
+                for await (const msg of currentJob) {
+                    if (isStopped) break;
+                    if (msg.type === "data" && msg.data) {
+                        finalAnswer = updateBotMessage(botDiv, msg.data[0]);
+                    } else if (msg.type === "status" && msg.stage === "complete") {
+                        break;
+                    } else if (msg.type === "status" && msg.stage === "error") {
+                        throw new Error(msg.message || "Generation failed");
+                    }
+                }
+
+                if (!isStopped && finalAnswer) {
+                    chatHistory.push([text, finalAnswer]);
+                }
+            } catch (err) {
+                console.error(err);
+                if (!isStopped) {
+                    contentContainer.innerHTML = '<p class="text-red-500">Error: please try again.</p>';
+                }
+            } finally {
+                resetSendBtn();
+                currentJob = null;
+            }
+        }
+
+        function resetSendBtn() {
+            sendBtn.disabled = false;
+            sendBtn.onclick = sendMessage;
+        }
+
+        window.clearHistory = function() {
+            chatHistory = [];
+            chatContainer.innerHTML = `
+                <div class="flex gap-3 items-start">
+                    <div class="bot-message message-bubble shadow-sm">
+                        <p class="text-slate-700 leading-relaxed text-[15px]">History cleared. How can I help you?</p>
+                    </div>
+                </div>
+            `;
+            toggleSettingsSidebar(false);
+        };
+
+        function toggleSettingsSidebar(open) {
+            isSettingsOpen = open;
+            settingsPanel.classList.toggle('translate-x-full', !open);
+            settingsPanel.classList.toggle('translate-x-0', open);
+        }
+
+        toggleSettings.onclick = (e) => { e.stopPropagation(); toggleSettingsSidebar(true); };
+        closeSettings.onclick = () => toggleSettingsSidebar(false);
+        document.addEventListener('click', (e) => {
+            if (isSettingsOpen && !settingsPanel.contains(e.target) && !toggleSettings.contains(e.target)) {
+                toggleSettingsSidebar(false);
+            }
+            if (!modelMenu.classList.contains('hidden') && !modelPicker.contains(e.target)) {
+                toggleModelMenu(false);
+            }
+        });
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') toggleModelMenu(false);
+        });
+
+        modelSelectBtn.onclick = (e) => { e.stopPropagation(); toggleModelMenu(); };
+
+        tempSlider.oninput = () => document.getElementById('temp-val').textContent = tempSlider.value;
+        tokensSlider.oninput = () => document.getElementById('tokens-val').textContent = tokensSlider.value;
+        toppSlider.oninput = () => document.getElementById('topp-val').textContent = parseFloat(toppSlider.value).toFixed(2).replace(/0$/, '');
+        topkSlider.oninput = () => document.getElementById('topk-val').textContent = topkSlider.value;
+        repSlider.oninput = () => document.getElementById('rep-val').textContent = parseFloat(repSlider.value).toFixed(2).replace(/0$/, '');
+        presSlider.oninput = () => document.getElementById('pres-val').textContent = parseFloat(presSlider.value).toFixed(1);
+
+        sendBtn.onclick = sendMessage;
+        userInput.onkeydown = (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        };
+        userInput.oninput = () => {
+            userInput.style.height = 'auto';
+            userInput.style.height = userInput.scrollHeight + 'px';
+        };
+    </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,11 @@
+gradio
+spaces
+torch
+beautifulsoup4
+huggingface_hub
+transformers==5.18.0
+einops
+triton
+fla-core
+accelerate
+https://github.com/mjun0812/flash-attention-prebuild-wheels/releases/download/v0.9.47/flash_attn-2.8.3+cu132torch2.13-cp312-cp312-linux_x86_64.whl