Add custom gradio.Server app with interactive reasoning UI

app.py

@@ -0,0 +1,355 @@
+import os
+import time
+import torch
+from fastapi.responses import HTMLResponse
+from gradio import Server
+
+# Initialize the Gradio Server (extends FastAPI)
+app = Server()
+
+# Define HTML path
+HTML_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+
+# Check if spaces library is available (for Hugging Face Spaces ZeroGPU)
+try:
+    import spaces
+    has_spaces = True
+    print("Hugging Face Spaces library loaded successfully.")
+except ImportError:
+    has_spaces = False
+    print("Hugging Face Spaces library not found. Running in standard environment.")
+
+# Set device
+device = "cuda" if torch.cuda.is_available() else "cpu"
+print(f"System detected device: {device}")
+
+# Determine if model should be loaded
+force_load = os.environ.get("FORCE_MODEL_LOAD", "false").lower() == "true"
+is_fallback = True
+model = None
+tokenizer = None
+
+MODEL_ID = "WeiboAI/VibeThinker-3B"
+
+if device == "cuda" or force_load:
+    try:
+        from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer, GenerationConfig
+        from threading import Thread
+        
+        print(f"Attempting to load model '{MODEL_ID}'...")
+        tokenizer = AutoTokenizer.from_pretrained(MODEL_ID, trust_remote_code=True)
+        
+        if torch.backends.mps.is_available() and force_load:
+            print("Loading model on MPS (Apple Silicon GPU) with float16...")
+            model = AutoModelForCausalLM.from_pretrained(
+                MODEL_ID,
+                torch_dtype=torch.float16,
+                low_cpu_mem_usage=True
+            ).to("mps")
+        else:
+            print("Loading model in bfloat16...")
+            model = AutoModelForCausalLM.from_pretrained(
+                MODEL_ID,
+                torch_dtype=torch.bfloat16,
+                device_map="auto",
+                low_cpu_mem_usage=True
+            )
+        
+        is_fallback = False
+        print("Model loaded successfully!")
+    except Exception as e:
+        print(f"Error loading model: {e}")
+        print("Falling back to simulation mode.")
+        is_fallback = True
+else:
+    print("No CUDA GPU detected and FORCE_MODEL_LOAD is false. Falling back to simulation mode.")
+    is_fallback = True
+
+
+def get_mock_response(message: str) -> tuple[str, str]:
+    """Generates detailed mock thinking and answers for local development testing."""
+    message_lower = message.lower()
+    
+    if "palindrom" in message_lower or "leetcode" in message_lower or "code" in message_lower or "python" in message_lower:
+        thought = (
+            "1. We need to solve the Longest Palindromic Substring problem.\n"
+            "2. Let's analyze the constraints and possible approaches.\n"
+            "   - Approach 1: Brute Force. Check all O(N^2) substrings. Checking takes O(N), total O(N^3). Too slow.\n"
+            "   - Approach 2: Dynamic Programming. Let DP[i][j] be true if substring s[i..j] is a palindrome.\n"
+            "     - DP[i][j] = (s[i] == s[j]) && (j - i < 3 || DP[i+1][j-1])\n"
+            "     - Time complexity: O(N^2), Space complexity: O(N^2).\n"
+            "   - Approach 3: Expand Around Center. For each index, expand outward for both odd and even length palindromes.\n"
+            "     - Time complexity: O(N^2), Space complexity: O(1). This is optimal in terms of space.\n"
+            "   - Approach 4: Manacher's Algorithm. Dynamic programming combined with centers expansion. O(N) time and space.\n"
+            "3. Let's implement the Expand Around Center approach as it is highly readable and O(1) space.\n"
+            "4. Verification: check boundary cases like single character, empty string, string with all identical characters, etc.\n"
+            "5. Formulate final response with explanation, code, and complexity analysis."
+        )
+        body = (
+            "Here is the optimal Python implementation of the **Longest Palindromic Substring** problem using the **Expand Around Center** approach (\\(O(N^2)\\) time, \\(O(1)\\) space).\n\n"
+            "### Expand Around Center (Python)\n\n"
+            "```python\n"
+            "class Solution:\n"
+            "    def longestPalindrome(self, s: str) -> str:\n"
+            "        if not s or len(s) < 1:\n"
+            "            return \"\"\n"
+            "        \n"
+            "        start, end = 0, 0\n"
+            "        \n"
+            "        def expand_around_center(left: int, right: int) -> int:\n"
+            "            while left >= 0 and right < len(s) and s[left] == s[right]:\n"
+            "                left -= 1\n"
+            "                right += 1\n"
+            "            # Return the length of the palindrome found\n"
+            "            return right - left - 1\n"
+            "        \n"
+            "        for i in range(len(s)):\n"
+            "            # Odd-length palindromes (single character center)\n"
+            "            len1 = expand_around_center(i, i)\n"
+            "            # Even-length palindromes (two character center)\n"
+            "            len2 = expand_around_center(i, i + 1)\n"
+            "            \n"
+            "            max_len = max(len1, len2)\n"
+            "            if max_len > end - start:\n"
+            "                # Adjust start and end indices based on current center\n"
+            "                start = i - (max_len - 1) // 2\n"
+            "                end = i + max_len // 2\n"
+            "                \n"
+            "        return s[start:end + 1]\n"
+            "```\n\n"
+            "### Complexity Analysis\n"
+            "- **Time Complexity:** \\(O(N^2)\\). We expand around \\(2N - 1\\) centers. For each center, expansion can take up to \\(O(N)\\) steps.\n"
+            "- **Space Complexity:** \\(O(1)\\). Only constant extra space is used."
+        )
+    elif "deck" in message_lower or "probab" in message_lower or "card" in message_lower or "math" in message_lower or "solve" in message_lower or "equation" in message_lower:
+        thought = (
+            "1. The user is asking a probability/math question: 'If a card is drawn from a standard deck, what is the probability that it is a spade or a face card?'\n"
+            "2. Let's define the sample space and events:\n"
+            "   - Total cards in a standard deck: N(S) = 52.\n"
+            "   - Event A: Drawing a spade. There are 13 spades in a deck. So N(A) = 13.\n"
+            "   - Event B: Drawing a face card (Jack, Queen, King). There are 3 face cards per suit, and 4 suits. So N(B) = 3 * 4 = 12.\n"
+            "   - We need to find the probability of Spade OR Face Card: P(A or B).\n"
+            "3. Let's recall the addition rule of probability:\n"
+            "   - P(A or B) = P(A) + P(B) - P(A and B)\n"
+            "4. What is Event (A and B)? It is drawing a card that is both a spade AND a face card.\n"
+            "   - These are the Jack of Spades, Queen of Spades, and King of Spades. N(A and B) = 3.\n"
+            "5. Let's plug the numbers in:\n"
+            "   - P(A) = 13/52\n"
+            "   - P(B) = 12/52\n"
+            "   - P(A and B) = 3/52\n"
+            "   - P(A or B) = 13/52 + 12/52 - 3/52 = (13 + 12 - 3)/52 = 22/52.\n"
+            "6. Simplify the fraction:\n"
+            "   - 22/52 = 11/26.\n"
+            "   - Decimal value: ~0.4231 (or 42.3%).\n"
+            "7. Structure the explanation clearly, showing the formulas, steps, and intermediate values using LaTeX mathematical notations."
+        )
+        body = (
+            "To find the probability that a randomly drawn card from a standard deck is either a **spade** or a **face card**, we can use the addition rule of probability.\n\n"
+            "### 1. Identify the Sample Spaces\n"
+            "- **Total cards in a deck:** \\(N(S) = 52\\)\n"
+            "- **Spades in a deck (Event \\(A\\)):** There are 13 spades. Hence, \\(N(A) = 13\\).\n"
+            "- **Face cards in a deck (Event \\(B\\)):** There are 3 face cards (Jack, Queen, King) per suit, across 4 suits. Hence, \\(N(B) = 3 \\times 4 = 12\\).\n\n"
+            "### 2. Find the Intersection (Spade Face Cards)\n"
+            "Some cards belong to both sets: Jack of Spades, Queen of Spades, and King of Spades. \n"
+            "Let this intersection be Event \\(A \\cap B\\):\n"
+            "\\[N(A \\cap B) = 3\\]\n\n"
+            "### 3. Apply the Addition Rule\n"
+            "The probability of the union of two events is given by:\n"
+            "\\[P(A \\cup B) = P(A) + P(B) - P(A \\cap B)\\]\n\n"
+            "Substitute the values:\n"
+            "\\[P(A \\cup B) = \\frac{13}{52} + \\frac{12}{52} - \\frac{3}{52}\\]\n"
+            "\\[P(A \\cup B) = \\frac{13 + 12 - 3}{52} = \\frac{22}{52}\\]\n\n"
+            "### 4. Simplify the Result\n"
+            "Reducing \\(\\frac{22}{52}\\) by dividing the numerator and denominator by 2:\n"
+            "\\[P(A \\cup B) = \\frac{11}{26} \\approx 0.4231 \\text{ (or } 42.31\\%\\text{)}\\]\n\n"
+            "**Conclusion:** The probability of drawing a spade or a face card is **\\(\\frac{11}{26}\\)**, which is approximately **42.3%**."
+        )
+    elif "box" in message_lower or "fruit" in message_lower or "label" in message_lower or "logic" in message_lower:
+        thought = (
+            "1. Three boxes: Box A (labeled Apples), Box B (labeled Oranges), Box C (labeled Mixed).\n"
+            "2. Fact: *Every single label is incorrect*.\n"
+            "   - Box labeled Apples has Oranges or Mixed.\n"
+            "   - Box labeled Oranges has Apples or Mixed.\n"
+            "   - Box labeled Mixed has Apples or Oranges.\n"
+            "3. Let's draw a fruit from the \"Mixed\" box. Why?\n"
+            "   - Since the label \"Mixed\" is wrong, it must contain either 100% Apples or 100% Oranges.\n"
+            "   - If we draw a fruit and it's an Apple, then the \"Mixed\" box is 100% Apples.\n"
+            "   - Now we have the remaining boxes labeled \"Apples\" and \"Oranges\".\n"
+            "   - The remaining contents are \"Oranges\" and \"Mixed\".\n"
+            "   - The box labeled \"Oranges\" cannot contain Oranges (as all labels are wrong). So it must contain \"Mixed\".\n"
+            "   - Consequently, the box labeled \"Apples\" must contain \"Oranges\".\n"
+            "4. What if we drew an Orange? By symmetry:\n"
+            "   - The \"Mixed\" box is 100% Oranges.\n"
+            "   - The box labeled \"Apples\" cannot contain Apples, so it must contain \"Mixed\".\n"
+            "   - The box labeled \"Oranges\" must contain \"Apples\".\n"
+            "5. The proof is sound and deterministic. Explain case by case with a markdown table."
+        )
+        body = (
+            "This is a classic logical puzzle. The key to solving it is to **draw a fruit from the box labeled \"Mixed\"**.\n\n"
+            "Here is the step-by-step reasoning:\n\n"
+            "### 1. Understand the Rules\n"
+            "- There are three boxes containing: **Apples**, **Oranges**, or **Mixed (both)**.\n"
+            "- **Crucial Fact:** *All* labels are currently incorrect. This means:\n"
+            "  - The box labeled **\"Apples\"** does *not* contain only apples (it contains either Oranges or Mixed).\n"
+            "  - The box labeled **\"Oranges\"** does *not* contain only oranges (it contains either Apples or Mixed).\n"
+            "  - The box labeled **\"Mixed\"** does *not* contain both (it contains either 100% Apples or 100% Oranges).\n\n"
+            "### 2. Choose the \"Mixed\" Box First\n"
+            "Since you know the box labeled \"Mixed\" is *definitely* not mixed, it must be either **100% Apples** or **100% Oranges**.\n\n"
+            "- Draw one fruit from the box labeled **\"Mixed\"**.\n\n"
+            "#### Case A: You draw an Apple\n"
+            "1. Since this box cannot be mixed, and it contains an apple, it **must contain only Apples**. (Label this box **Apples**).\n"
+            "2. You have two boxes left, labeled **\"Apples\"** and **\"Oranges\"**, and two contents left to assign: **Oranges** and **Mixed**.\n"
+            "3. Look at the box labeled **\"Oranges\"**. Because all labels are wrong, this box *cannot* contain Oranges. Therefore, it **must contain Mixed**.\n"
+            "4. This leaves the box labeled **\"Apples\"** to **contain only Oranges**.\n\n"
+            "#### Case B: You draw an Orange\n"
+            "1. Since this box cannot be mixed, and it contains an orange, it **must contain only Oranges**. (Label this box **Oranges**).\n"
+            "2. You have two boxes left, labeled **\"Apples\"** and **\"Oranges\"**, and two contents left to assign: **Apples** and **Mixed**.\n"
+            "3. Look at the box labeled **\"Apples\"**. Because all labels are wrong, this box *cannot* contain Apples. Therefore, it **must contain Mixed**.\n"
+            "4. This leaves the box labeled **\"Oranges\"** to **contain only Apples**.\n\n"
+            "### Summary Table\n\n"
+            "| Label on Box | Drawn Fruit | Actual Contents | Box 2 Actual | Box 3 Actual |\n"
+            "| :--- | :--- | :--- | :--- | :--- |\n"
+            "| **\"Mixed\"** | Apple 🍎 | **Apples** | **\"Oranges\"** label $\\rightarrow$ **Mixed** | **\"Apples\"** label $\\rightarrow$ **Oranges** |\n"
+            "| **\"Mixed\"** | Orange 🍊 | **Oranges** | **\"Apples\"** label $\\rightarrow$ **Mixed** | **\"Oranges\"** label $\\rightarrow$ **Apples** |\n\n"
+            "By drawing just **one fruit from the \"Mixed\" box**, you can confidently relabel all three boxes!"
+        )
+    else:
+        thought = (
+            "1. The user prompt is general: '" + message + "'.\n"
+            "2. Let's formulate a structured response that explains who I am and how I can help.\n"
+            "3. Demonstrate reasoning by showing my system stats, architecture (Qwen2.5-Coder backbone), and optimal use cases (coding, math, logic).\n"
+            "4. Conclude with a helpful, inviting sign-off."
+        )
+        body = (
+            "Hello! I am **VibeThinker-3B**, a small language model optimized for deep, verifiable reasoning in math, coding, and STEM.\n\n"
+            "To answer your request, here is a summary of how I operate:\n\n"
+            "### 1. Model Capabilities\n"
+            "- **Architecture:** Finetuned on top of Qwen2.5-Coder-3B using a curriculum-based SFT pipeline and Reinforcement Learning (MGPO).\n"
+            "- **Reasoning Process:** I generate intermediate thoughts inside `<think>...</think>` tags to verify my hypotheses and correct mistakes before showing the final result.\n\n"
+            "### 2. Suggested Prompts\n"
+            "- **Math:** Ask me complex algebra, probability, or number theory questions.\n"
+            "- **Coding:** Give me algorithmic coding challenges, code optimization tasks, or debugging requests.\n"
+            "- **Logic:** Present me with riddles, brain teasers, or rule-based scheduling problems.\n\n"
+            "Feel free to write a mathematical problem or code request to see me think through it step-by-step!"
+        )
+    return thought, body
+
+
+def simulate_inference(message: str):
+    """Simulates token-by-token streaming of the reasoning and body response."""
+    thought, body = get_mock_response(message)
+    full_text = f"<think>\n{thought}\n</think>\n{body}"
+    
+    accumulated = ""
+    words = []
+    current_word = ""
+    for char in full_text:
+        if char in (" ", "\n"):
+            if current_word:
+                words.append(current_word)
+                current_word = ""
+            words.append(char)
+        else:
+            current_word += char
+    if current_word:
+        words.append(current_word)
+        
+    for word in words:
+        accumulated += word
+        yield accumulated
+        # Simulating slightly slower output for thinking steps to make it feel deliberate
+        if "<think>" in accumulated and "</think>" not in accumulated:
+            time.sleep(0.012 if word not in ("\n", " ") else 0.004)
+        else:
+            time.sleep(0.006 if word not in ("\n", " ") else 0.002)
+
+
+def infer_real(message: str, system_prompt: str, temperature: float, top_p: float, max_tokens: int):
+    """Executes actual model generation using the transformers library."""
+    from transformers import TextIteratorStreamer, GenerationConfig
+    from threading import Thread
+    
+    messages = []
+    if system_prompt:
+        messages.append({"role": "system", "content": system_prompt})
+    messages.append({"role": "user", "content": message})
+    
+    text = tokenizer.apply_chat_template(
+        messages,
+        tokenize=False,
+        add_generation_prompt=True,
+    )
+    model_inputs = tokenizer([text], return_tensors="pt").to(model.device)
+    
+    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+    
+    # Configure generation
+    gen_kwargs = {
+        "max_new_tokens": max_tokens,
+        "do_sample": True if temperature > 0.0 else False,
+        "top_k": None,
+    }
+    if temperature > 0.0:
+        gen_kwargs["temperature"] = temperature
+        gen_kwargs["top_p"] = top_p
+        
+    generation_config = GenerationConfig(**gen_kwargs)
+    
+    generation_kwargs = dict(
+        **model_inputs,
+        streamer=streamer,
+        generation_config=generation_config
+    )
+    
+    thread = Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
+    
+    accumulated = ""
+    for new_text in streamer:
+        accumulated += new_text
+        yield accumulated
+
+
+# Define API Endpoint
+# Using the wrapper helper to handle spaces.GPU decorator safely
+if has_spaces:
+    @app.api()
+    @spaces.GPU
+    def predict(
+        message: str,
+        system_prompt: str = "You are VibeThinker, a helpful and harmless AI assistant specialized in reasoning.",
+        temperature: float = 1.0,
+        top_p: float = 0.95,
+        max_tokens: int = 4096
+    ):
+        if is_fallback:
+            yield from simulate_inference(message)
+        else:
+            yield from infer_real(message, system_prompt, temperature, top_p, max_tokens)
+else:
+    @app.api()
+    def predict(
+        message: str,
+        system_prompt: str = "You are VibeThinker, a helpful and harmless AI assistant specialized in reasoning.",
+        temperature: float = 1.0,
+        top_p: float = 0.95,
+        max_tokens: int = 4096
+    ):
+        if is_fallback:
+            yield from simulate_inference(message)
+        else:
+            yield from infer_real(message, system_prompt, temperature, top_p, max_tokens)
+
+
+# Standard FastAPI Route to serve the frontend html
+@app.get("/", response_class=HTMLResponse)
+def homepage():
+    try:
+        with open(HTML_PATH, "r", encoding="utf-8") as f:
+            return HTMLResponse(content=f.read())
+    except FileNotFoundError:
+        return HTMLResponse(content="<h1>index.html not found! Please create the frontend page.</h1>", status_code=404)
+
+
+if __name__ == "__main__":
+    app.launch(show_error=True)

index.html

@@ -0,0 +1,1443 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VibeThinker-3B - Verifiable Reasoning SLM</title>
+  
+  <!-- Fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  
+  <!-- FontAwesome Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+  
+  <!-- Prism.js Tomorrow Theme for Code Highlighting -->
+  <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
+  
+  <!-- MathJax Configuration for LaTeX Math -->
+  <script>
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true
+      },
+      options: {
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+      }
+    };
+  </script>
+  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+
+  <style>
+    /* Premium Modern CSS Style Guide */
+    :root {
+      --bg-dark: #070a13;
+      --bg-light-dark: #0f1524;
+      --primary: #8b5cf6;
+      --primary-hover: #7c3aed;
+      --primary-glow: rgba(139, 92, 246, 0.4);
+      --secondary: #6366f1;
+      --accent: #06b6d4;
+      --accent-glow: rgba(6, 182, 212, 0.3);
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --border-color: rgba(255, 255, 255, 0.08);
+      --card-bg: rgba(15, 21, 36, 0.7);
+      --sidebar-width: 320px;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: 'Outfit', sans-serif;
+      background-color: var(--bg-dark);
+      color: var(--text-main);
+      height: 100vh;
+      overflow: hidden;
+      display: flex;
+      position: relative;
+    }
+
+    /* Ambient background glowing blobs */
+    .glow-blob {
+      position: absolute;
+      width: 500px;
+      height: 500px;
+      border-radius: 50%;
+      background: radial-gradient(circle, var(--primary-glow) 0%, rgba(0,0,0,0) 70%);
+      top: -150px;
+      right: -150px;
+      z-index: 0;
+      pointer-events: none;
+      filter: blur(80px);
+    }
+    
+    .glow-blob-2 {
+      position: absolute;
+      width: 600px;
+      height: 600px;
+      border-radius: 50%;
+      background: radial-gradient(circle, var(--accent-glow) 0%, rgba(0,0,0,0) 70%);
+      bottom: -200px;
+      left: -200px;
+      z-index: 0;
+      pointer-events: none;
+      filter: blur(100px);
+    }
+
+    /* Layout Wrapper */
+    .app-container {
+      display: flex;
+      width: 100%;
+      height: 100vh;
+      z-index: 1;
+      position: relative;
+    }
+
+    /* Sidebar Styling */
+    .sidebar {
+      width: var(--sidebar-width);
+      background-color: rgba(15, 21, 36, 0.85);
+      border-right: 1px solid var(--border-color);
+      backdrop-filter: blur(20px);
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      overflow-y: auto;
+      transition: transform 0.3s ease;
+    }
+
+    .brand-section {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 32px;
+    }
+
+    .brand-logo {
+      font-size: 32px;
+      animation: float 3s ease-in-out infinite;
+    }
+
+    .brand-title {
+      font-weight: 700;
+      font-size: 22px;
+      background: linear-gradient(135deg, #fff 30%, var(--primary) 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      letter-spacing: -0.5px;
+    }
+
+    .brand-badge {
+      background: rgba(139, 92, 246, 0.2);
+      border: 1px solid var(--primary);
+      color: #c084fc;
+      font-size: 11px;
+      padding: 2px 8px;
+      border-radius: 12px;
+      font-weight: 600;
+    }
+
+    .sidebar-section {
+      margin-bottom: 24px;
+    }
+
+    .section-title {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--text-muted);
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    /* Config Sliders */
+    .parameter-group {
+      margin-bottom: 18px;
+    }
+
+    .parameter-label {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      color: var(--text-main);
+      margin-bottom: 6px;
+    }
+
+    .parameter-value {
+      font-weight: 600;
+      color: var(--accent);
+    }
+
+    input[type="range"] {
+      width: 100%;
+      height: 6px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 3px;
+      outline: none;
+      -webkit-appearance: none;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background: var(--accent);
+      cursor: pointer;
+      box-shadow: 0 0 10px var(--accent-glow);
+      transition: transform 0.1s ease;
+    }
+
+    input[type="range"]::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+    }
+
+    .textarea-config {
+      width: 100%;
+      background: rgba(0, 0, 0, 0.25);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      color: var(--text-main);
+      padding: 10px;
+      font-family: inherit;
+      font-size: 13px;
+      resize: vertical;
+      min-height: 80px;
+      outline: none;
+      transition: border-color 0.2s;
+    }
+
+    .textarea-config:focus {
+      border-color: var(--primary);
+    }
+
+    /* Example Presets */
+    .presets-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .preset-btn {
+      width: 100%;
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid var(--border-color);
+      color: var(--text-main);
+      padding: 10px 12px;
+      border-radius: 8px;
+      cursor: pointer;
+      text-align: left;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      transition: all 0.2s ease;
+    }
+
+    .preset-btn i {
+      color: var(--primary);
+      font-size: 14px;
+    }
+
+    .preset-btn:hover {
+      background: rgba(139, 92, 246, 0.1);
+      border-color: var(--primary);
+      transform: translateY(-1px);
+    }
+
+    .sidebar-footer {
+      border-top: 1px solid var(--border-color);
+      padding-top: 16px;
+      font-size: 12px;
+      color: var(--text-muted);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .sidebar-link {
+      color: var(--accent);
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color 0.2s;
+    }
+
+    .sidebar-link:hover {
+      color: #22d3ee;
+    }
+
+    /* Main Chat Panel */
+    .main-panel {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background: rgba(7, 10, 19, 0.3);
+      backdrop-filter: blur(10px);
+      position: relative;
+    }
+
+    .chat-header {
+      height: 70px;
+      border-bottom: 1px solid var(--border-color);
+      padding: 0 32px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: rgba(15, 21, 36, 0.4);
+    }
+
+    .header-info {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .header-title {
+      font-size: 18px;
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .status-container {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background-color: #22c55e;
+      box-shadow: 0 0 8px #22c55e;
+    }
+
+    .status-dot.busy {
+      background-color: #eab308;
+      box-shadow: 0 0 8px #eab308;
+      animation: pulse 1.5s infinite;
+    }
+
+    /* Chat Messages */
+    .chat-history {
+      flex: 1;
+      overflow-y: auto;
+      padding: 32px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      scroll-behavior: smooth;
+    }
+
+    .welcome-card {
+      max-width: 720px;
+      margin: 40px auto;
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 16px;
+      padding: 32px;
+      text-align: center;
+      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+    }
+
+    .welcome-icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+      display: inline-block;
+    }
+
+    .welcome-title {
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 12px;
+    }
+
+    .welcome-description {
+      color: var(--text-muted);
+      font-size: 15px;
+      line-height: 1.6;
+      margin-bottom: 24px;
+    }
+
+    .welcome-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      text-align: left;
+    }
+
+    .welcome-feature {
+      padding: 16px;
+      background: rgba(255, 255, 255, 0.02);
+      border: 1px solid var(--border-color);
+      border-radius: 12px;
+    }
+
+    .welcome-feature-title {
+      font-weight: 600;
+      font-size: 14px;
+      margin-bottom: 6px;
+      color: var(--accent);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .welcome-feature-desc {
+      font-size: 12px;
+      color: var(--text-muted);
+      line-height: 1.4;
+    }
+
+    /* Message Bubbles */
+    .message-row {
+      display: flex;
+      width: 100%;
+      margin-bottom: 8px;
+    }
+
+    .message-row.user {
+      justify-content: flex-end;
+    }
+
+    .message-row.assistant {
+      justify-content: flex-start;
+    }
+
+    .message-bubble {
+      max-width: 80%;
+      border-radius: 16px;
+      padding: 16px 20px;
+      position: relative;
+      box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+      line-height: 1.6;
+    }
+
+    .message-row.user .message-bubble {
+      background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+      color: #fff;
+      border-bottom-right-radius: 4px;
+    }
+
+    .message-row.assistant .message-bubble {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      color: var(--text-main);
+      border-top-left-radius: 4px;
+    }
+
+    .message-meta {
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 6px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    /* Collapsible Thought Box styling */
+    .thought-container {
+      margin-bottom: 14px;
+      border: 1px solid rgba(139, 92, 246, 0.2);
+      background: rgba(139, 92, 246, 0.03);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .thought-header {
+      padding: 8px 12px;
+      background: rgba(139, 92, 246, 0.08);
+      font-size: 12.5px;
+      font-weight: 600;
+      color: #c084fc;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      user-select: none;
+      transition: background 0.2s;
+    }
+
+    .thought-header:hover {
+      background: rgba(139, 92, 246, 0.12);
+    }
+
+    .thought-title-left {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .thought-timer {
+      font-size: 11px;
+      color: var(--text-muted);
+      font-weight: normal;
+    }
+
+    .thought-content {
+      padding: 12px;
+      font-size: 13px;
+      font-family: 'Fira Code', monospace;
+      color: #cbd5e1;
+      border-top: 1px solid rgba(139, 92, 246, 0.1);
+      white-space: pre-wrap;
+      max-height: 250px;
+      overflow-y: auto;
+      background: rgba(0, 0, 0, 0.15);
+      line-height: 1.5;
+    }
+
+    .thought-status-spinner {
+      font-size: 12px;
+      animation: spin 1s linear infinite;
+      color: var(--primary);
+    }
+
+    .thought-status-done {
+      color: #22c55e;
+    }
+
+    /* Code block inside chat message styling */
+    pre {
+      margin: 12px 0;
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--border-color);
+      position: relative;
+    }
+
+    code {
+      font-family: 'Fira Code', monospace;
+      font-size: 14px;
+    }
+
+    p code, li code {
+      background: rgba(255, 255, 255, 0.1);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 13.5px;
+    }
+
+    /* Markdown styling updates */
+    .message-body h1, .message-body h2, .message-body h3 {
+      margin-top: 16px;
+      margin-bottom: 8px;
+      font-weight: 600;
+      color: #fff;
+    }
+    .message-body h1 { font-size: 18px; border-bottom: 1px solid var(--border-color); padding-bottom: 4px; }
+    .message-body h2 { font-size: 16px; }
+    .message-body h3 { font-size: 14.5px; }
+
+    .message-body p {
+      margin-bottom: 10px;
+    }
+
+    .message-body ul, .message-body ol {
+      margin-left: 20px;
+      margin-bottom: 10px;
+    }
+
+    .message-body table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 14px 0;
+      font-size: 13px;
+    }
+
+    .message-body th, .message-body td {
+      border: 1px solid var(--border-color);
+      padding: 8px 12px;
+      text-align: left;
+    }
+
+    .message-body th {
+      background: rgba(255, 255, 255, 0.05);
+      font-weight: 600;
+    }
+
+    /* Copy Button overlay in Code Blocks */
+    .code-header {
+      background: rgba(0, 0, 0, 0.4);
+      padding: 6px 12px;
+      font-size: 11px;
+      color: var(--text-muted);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid var(--border-color);
+    }
+
+    .copy-btn {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      font-size: 12px;
+      transition: color 0.2s;
+    }
+
+    .copy-btn:hover {
+      color: #fff;
+    }
+
+    /* Input Panel */
+    .input-panel {
+      padding: 24px 32px 32px;
+      border-top: 1px solid var(--border-color);
+      background: rgba(15, 21, 36, 0.6);
+      backdrop-filter: blur(10px);
+    }
+
+    .input-wrapper {
+      max-width: 900px;
+      margin: 0 auto;
+      background: rgba(0, 0, 0, 0.3);
+      border: 1px solid var(--border-color);
+      border-radius: 14px;
+      padding: 8px 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      position: relative;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+
+    .input-wrapper:focus-within {
+      border-color: var(--primary);
+      box-shadow: 0 0 15px rgba(139, 92, 246, 0.25);
+    }
+
+    .chat-textarea {
+      width: 100%;
+      background: transparent;
+      border: none;
+      outline: none;
+      color: var(--text-main);
+      font-family: inherit;
+      font-size: 15px;
+      resize: none;
+      min-height: 48px;
+      max-height: 200px;
+      padding: 8px 4px;
+      line-height: 1.5;
+    }
+
+    .input-actions {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-top: 1px solid rgba(255, 255, 255, 0.04);
+      padding-top: 8px;
+    }
+
+    .input-left-buttons {
+      display: flex;
+      gap: 8px;
+    }
+
+    .action-icon-btn {
+      background: transparent;
+      border: none;
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      color: var(--text-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.2s, color 0.2s;
+    }
+
+    .action-icon-btn:hover {
+      background: rgba(255, 255, 255, 0.05);
+      color: var(--text-main);
+    }
+
+    .send-btn {
+      background: var(--primary);
+      border: none;
+      padding: 8px 16px;
+      border-radius: 8px;
+      color: #fff;
+      font-weight: 600;
+      font-size: 13px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: background 0.2s, transform 0.1s;
+    }
+
+    .send-btn:hover {
+      background: var(--primary-hover);
+    }
+
+    .send-btn:active {
+      transform: scale(0.97);
+    }
+
+    .send-btn.stop {
+      background: #ef4444;
+    }
+
+    .send-btn.stop:hover {
+      background: #dc2626;
+    }
+
+    .info-footer {
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-muted);
+      margin-top: 8px;
+    }
+
+    /* Loading placeholder */
+    .typing-indicator {
+      display: flex;
+      gap: 4px;
+      padding: 6px 12px;
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      background-color: var(--text-muted);
+      border-radius: 50%;
+      animation: bounce 1.4s infinite ease-in-out both;
+    }
+
+    .dot:nth-child(1) { animation-delay: -0.32s; }
+    .dot:nth-child(2) { animation-delay: -0.16s; }
+
+    /* Animations */
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-6px); }
+    }
+
+    @keyframes spin {
+      100% { transform: rotate(360deg); }
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(0.92); }
+    }
+
+    @keyframes bounce {
+      0%, 80%, 100% { transform: scale(0); }
+      40% { transform: scale(1.0); }
+    }
+
+    /* Mobile Responsive */
+    .sidebar-toggle {
+      display: none;
+      background: transparent;
+      border: none;
+      color: var(--text-main);
+      font-size: 20px;
+      cursor: pointer;
+    }
+
+    @media (max-width: 768px) {
+      .sidebar {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        z-index: 10;
+        transform: translateX(-100%);
+      }
+      .sidebar.open {
+        transform: translateX(0);
+      }
+      .sidebar-toggle {
+        display: block;
+      }
+      .welcome-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Background Ambience -->
+  <div class="glow-blob"></div>
+  <div class="glow-blob-2"></div>
+
+  <!-- App Wrapper -->
+  <div class="app-container">
+    
+    <!-- Sidebar Panel -->
+    <aside class="sidebar" id="sidebar">
+      <div>
+        <div class="brand-section">
+          <div class="brand-logo">😻</div>
+          <div>
+            <h1 class="brand-title">VibeThinker</h1>
+            <span class="brand-badge">3B Scale</span>
+          </div>
+        </div>
+
+        <!-- Configuration Settings -->
+        <div class="sidebar-section">
+          <h2 class="section-title"><i class="fa-solid fa-sliders"></i> Parameters</h2>
+          
+          <div class="parameter-group">
+            <div class="parameter-label">
+              <span>Temperature</span>
+              <span class="parameter-value" id="val-temp">1.0</span>
+            </div>
+            <input type="range" id="param-temp" min="0.0" max="1.5" step="0.05" value="1.0">
+          </div>
+
+          <div class="parameter-group">
+            <div class="parameter-label">
+              <span>Top-P</span>
+              <span class="parameter-value" id="val-topp">0.95</span>
+            </div>
+            <input type="range" id="param-topp" min="0.0" max="1.0" step="0.01" value="0.95">
+          </div>
+
+          <div class="parameter-group">
+            <div class="parameter-label">
+              <span>Max Tokens</span>
+              <span class="parameter-value" id="val-tokens">4096</span>
+            </div>
+            <input type="range" id="param-tokens" min="256" max="32768" step="256" value="4096">
+          </div>
+
+          <div class="parameter-group">
+            <div class="parameter-label">
+              <span>System Prompt</span>
+            </div>
+            <textarea class="textarea-config" id="param-system">You are VibeThinker, a helpful and harmless AI assistant specialized in reasoning. You solve complex problems step-by-step to verify correctness.</textarea>
+          </div>
+        </div>
+
+        <!-- Preset Prompts -->
+        <div class="sidebar-section">
+          <h2 class="section-title"><i class="fa-solid fa-lightbulb"></i> Presets</h2>
+          <div class="presets-container">
+            <button class="preset-btn" onclick="loadPreset('card')">
+              <i class="fa-solid fa-calculator"></i> Spade & Face Cards
+            </button>
+            <button class="preset-btn" onclick="loadPreset('palindrome')">
+              <i class="fa-solid fa-code"></i> Longest Palindrome
+            </button>
+            <button class="preset-btn" onclick="loadPreset('logic')">
+              <i class="fa-solid fa-puzzle-piece"></i> Labeled Fruit Boxes
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sidebar Footer -->
+      <div class="sidebar-footer">
+        <a href="https://huggingface.co/WeiboAI/VibeThinker-3B" target="_blank" class="sidebar-link">
+          <i class="fa-brands fa-hugging-face"></i> Model Card 🤗
+        </a>
+        <a href="https://arxiv.org/abs/2606.16140" target="_blank" class="sidebar-link">
+          <i class="fa-regular fa-file-pdf"></i> Research Paper
+        </a>
+        <div>MIT License • WeiboAI 2026</div>
+      </div>
+    </aside>
+
+    <!-- Main Panel -->
+    <main class="main-panel">
+      
+      <!-- Chat Header -->
+      <header class="chat-header">
+        <button class="sidebar-toggle" id="sidebar-toggle" onclick="toggleSidebar()">
+          <i class="fa-solid fa-bars"></i>
+        </button>
+        <div class="header-info">
+          <div class="header-title">VibeThinker-3B Reasoning Sandbox</div>
+          <div class="status-container">
+            <div class="status-dot" id="status-indicator"></div>
+            <span id="status-text">Server Ready</span>
+          </div>
+        </div>
+        <div>
+          <!-- Clean logo design linking HF -->
+          <a href="https://huggingface.co" target="_blank" style="color: inherit; text-decoration: none; font-size: 24px; filter: drop-shadow(0 0 8px rgba(255,255,255,0.15));">🤗</a>
+        </div>
+      </header>
+
+      <!-- Chat History -->
+      <section class="chat-history" id="chat-history">
+        
+        <!-- Welcome Card -->
+        <div class="welcome-card" id="welcome-card">
+          <span class="welcome-icon">🤗</span>
+          <h2 class="welcome-title">VibeThinker-3B Engine</h2>
+          <p class="welcome-description">
+            VibeThinker-3B is a 3-billion parameter Small Language Model (SLM) trained using curriculum post-training SFT and multi-domain Reinforcement Learning. It achieves near-frontier results on math, coding, and STEM by using a dedicated chain-of-thought strategy.
+          </p>
+          <div class="welcome-grid">
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-brain"></i> Chain-of-Thought</div>
+              <div class="welcome-feature-desc">Analyzes problems thoroughly inside <code>&lt;think&gt;</code> tags before giving the final answer.</div>
+            </div>
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-code"></i> Coding Logic</div>
+              <div class="welcome-feature-desc">Excellent at LeetCode, algorithms, complexity analysis, and programming constructs.</div>
+            </div>
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-calculator"></i> STEM Focus</div>
+              <div class="welcome-feature-desc">Verifiably correct solutions to mathematical and reasoning challenges.</div>
+            </div>
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-cloud"></i> Gradio Server</div>
+              <div class="welcome-feature-desc">Custom web front-end backed by Gradio's advanced queuing & ZeroGPU engine.</div>
+            </div>
+          </div>
+        </div>
+
+      </section>
+
+      <!-- Input Panel -->
+      <footer class="input-panel">
+        <div class="input-wrapper">
+          <textarea class="chat-textarea" id="chat-input" placeholder="Ask a math, logic, or programming question..." rows="1" oninput="autoResizeTextarea(this)"></textarea>
+          
+          <div class="input-actions">
+            <div class="input-left-buttons">
+              <button class="action-icon-btn" title="Clear Chat" onclick="clearChat()">
+                <i class="fa-regular fa-trash-can"></i>
+              </button>
+              <button class="action-icon-btn" title="Preset Library" onclick="toggleSidebar()">
+                <i class="fa-solid fa-sliders"></i>
+              </button>
+            </div>
+            
+            <button class="send-btn" id="submit-btn" onclick="handleSubmit()">
+              <i class="fa-solid fa-paper-plane" id="submit-icon"></i> <span id="submit-text">Send</span>
+            </button>
+          </div>
+        </div>
+        <div class="info-footer">
+          VibeThinker-3B can produce incorrect reasoning paths. Verify output before critical use.
+        </div>
+      </footer>
+
+    </main>
+
+  </div>
+
+  <!-- Gradio Client & Execution Logic -->
+  <script type="module">
+    import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+
+    let client = null;
+    let activeJob = null;
+    let isGenerating = false;
+    let currentMessageId = null;
+    let timerInterval = null;
+
+    // Connect to Gradio.Server backend
+    async function initClient() {
+      try {
+        updateStatus("connecting", "Initializing connection...");
+        client = await Client.connect(window.location.origin);
+        updateStatus("ready", "Server Ready");
+      } catch (err) {
+        console.error("Failed to connect to server:", err);
+        updateStatus("error", "Error Connecting to Server");
+      }
+    }
+
+    // Connect on load
+    window.addEventListener("DOMContentLoaded", () => {
+      initClient();
+      setupSliders();
+    });
+
+    // Setup configuration sliders value update
+    function setupSliders() {
+      const sliders = [
+        { id: "param-temp", valId: "val-temp" },
+        { id: "param-topp", valId: "val-topp" },
+        { id: "param-tokens", valId: "val-tokens" }
+      ];
+      
+      sliders.forEach(slider => {
+        const input = document.getElementById(slider.id);
+        const valueSpan = document.getElementById(slider.valId);
+        
+        input.addEventListener("input", () => {
+          valueSpan.textContent = input.value;
+        });
+      });
+    }
+
+    // Toggle sidebar on mobile
+    window.toggleSidebar = function() {
+      const sidebar = document.getElementById("sidebar");
+      sidebar.classList.toggle("open");
+    };
+
+    // Load example presets
+    window.loadPreset = function(type) {
+      const chatInput = document.getElementById("chat-input");
+      if (type === 'palindrome') {
+        chatInput.value = "Write a Python function to solve the Longest Palindromic Substring problem using dynamic programming, with full complexity analysis.";
+      } else if (type === 'card') {
+        chatInput.value = "If a card is drawn from a standard deck, what is the probability that it is a spade or a face card?";
+      } else if (type === 'logic') {
+        chatInput.value = "Three boxes are labeled 'Apples', 'Oranges', and 'Mixed'. All labels are incorrect. You can pick one fruit from one box. How can you label all boxes correctly?";
+      }
+      autoResizeTextarea(chatInput);
+      
+      // Close sidebar on mobile after choosing preset
+      if (window.innerWidth <= 768) {
+        document.getElementById("sidebar").classList.remove("open");
+      }
+      chatInput.focus();
+    };
+
+    // Auto-resize textarea as user types
+    window.autoResizeTextarea = function(element) {
+      element.style.height = "auto";
+      element.style.height = (element.scrollHeight) + "px";
+    };
+
+    // Update server status UI
+    function updateStatus(status, text) {
+      const indicator = document.getElementById("status-indicator");
+      const textSpan = document.getElementById("status-text");
+      
+      textSpan.textContent = text;
+      
+      indicator.className = "status-dot";
+      if (status === "connecting") {
+        indicator.classList.add("busy");
+      } else if (status === "generating") {
+        indicator.classList.add("busy");
+      } else if (status === "ready") {
+        // defaults to green
+      } else if (status === "error") {
+        indicator.style.backgroundColor = "#ef4444";
+        indicator.style.boxShadow = "0 0 8px #ef4444";
+      }
+    }
+
+    // Main Submit handling
+    window.handleSubmit = async function() {
+      if (isGenerating) {
+        // Stop action
+        if (activeJob) {
+          activeJob.cancel();
+          isGenerating = false;
+          updateStatus("ready", "Generation Stopped");
+          resetSubmitButton();
+        }
+        return;
+      }
+
+      const inputField = document.getElementById("chat-input");
+      const prompt = inputField.value.trim();
+      
+      if (!prompt) return;
+      if (!client) {
+        alert("Server connection is not established. Trying to reconnect...");
+        initClient();
+        return;
+      }
+
+      // Hide welcome card if visible
+      const welcomeCard = document.getElementById("welcome-card");
+      if (welcomeCard) welcomeCard.remove();
+
+      // Clear input and adjust size
+      inputField.value = "";
+      autoResizeTextarea(inputField);
+
+      // Append user bubble
+      appendMessage("user", prompt);
+
+      // Create empty assistant bubble for streaming
+      currentMessageId = appendMessage("assistant", "", true);
+
+      // Change button state to "Stop"
+      setSubmitButtonToStop();
+      isGenerating = true;
+      updateStatus("generating", "Thinking...");
+
+      // Fetch parameters
+      const temp = parseFloat(document.getElementById("param-temp").value);
+      const topp = parseFloat(document.getElementById("param-topp").value);
+      const tokens = parseInt(document.getElementById("param-tokens").value);
+      const system = document.getElementById("param-system").value;
+
+      // Start elapsed timer
+      let elapsedSeconds = 0;
+      const timerSpan = document.getElementById(`timer-${currentMessageId}`);
+      if (timerSpan) {
+        timerInterval = setInterval(() => {
+          elapsedSeconds += 0.1;
+          timerSpan.textContent = `Thinking for ${elapsedSeconds.toFixed(1)}s`;
+        }, 100);
+      }
+
+      try {
+        // Submit stream request using submit() instead of predict()
+        activeJob = client.submit("/predict", {
+          message: prompt,
+          system_prompt: system,
+          temperature: temp,
+          top_p: topp,
+          max_tokens: tokens
+        });
+
+        activeJob.on("data", (dataEvent) => {
+          const streamedText = dataEvent.data[0];
+          updateAssistantStream(currentMessageId, streamedText);
+        });
+
+        activeJob.on("status", (statusEvent) => {
+          // Can monitor queue status here if needed
+        });
+
+        activeJob.on("error", (err) => {
+          console.error("Job error:", err);
+          clearInterval(timerInterval);
+          updateMessageError(currentMessageId, "An error occurred during text generation.");
+          isGenerating = false;
+          resetSubmitButton();
+          updateStatus("ready", "Error");
+        });
+
+      } catch (err) {
+        console.error("Submission failed:", err);
+        clearInterval(timerInterval);
+        updateMessageError(currentMessageId, "Failed to submit request.");
+        isGenerating = false;
+        resetSubmitButton();
+        updateStatus("ready", "Failed");
+      }
+    };
+
+    function setSubmitButtonToStop() {
+      const btn = document.getElementById("submit-btn");
+      const icon = document.getElementById("submit-icon");
+      const text = document.getElementById("submit-text");
+      
+      btn.className = "send-btn stop";
+      icon.className = "fa-solid fa-circle-stop";
+      text.textContent = "Stop";
+    }
+
+    function resetSubmitButton() {
+      const btn = document.getElementById("submit-btn");
+      const icon = document.getElementById("submit-icon");
+      const text = document.getElementById("submit-text");
+      
+      btn.className = "send-btn";
+      icon.className = "fa-solid fa-paper-plane";
+      text.textContent = "Send";
+    }
+
+    // Helper to format/parse text stream for collapsible thoughts
+    function parseStreamedText(text) {
+      let thinkingText = "";
+      let responseText = "";
+      let isThinking = false;
+      let hasThoughtCompleted = false;
+      
+      if (text.includes("<think>")) {
+        const startIndex = text.indexOf("<think>") + 7;
+        if (text.includes("</think>")) {
+          const endIndex = text.indexOf("</think>");
+          thinkingText = text.substring(startIndex, endIndex).trim();
+          responseText = text.substring(endIndex + 8).trim();
+          hasThoughtCompleted = true;
+        } else {
+          thinkingText = text.substring(startIndex);
+          isThinking = true;
+        }
+      } else {
+        responseText = text;
+      }
+      
+      return {
+        thinkingText,
+        responseText,
+        isThinking,
+        hasThoughtCompleted
+      };
+    }
+
+    // Append a message bubble to the chat
+    function appendMessage(sender, text, isLoading = false) {
+      const chatHistory = document.getElementById("chat-history");
+      const messageId = "msg-" + Date.now();
+      
+      const row = document.createElement("div");
+      row.className = `message-row ${sender}`;
+      row.id = messageId;
+      
+      const bubble = document.createElement("div");
+      bubble.className = "message-bubble";
+      
+      if (sender === "user") {
+        const textNode = document.createElement("div");
+        textNode.textContent = text;
+        bubble.appendChild(textNode);
+      } else {
+        // Assistant template layout with collapsible thought block
+        bubble.innerHTML = `
+          <div class="thought-container" id="thought-box-${messageId}" style="display: none;">
+            <div class="thought-header" onclick="toggleThought('${messageId}')">
+              <div class="thought-title-left">
+                <i class="fa-solid fa-brain"></i>
+                <span id="thought-label-${messageId}">Thinking Process</span>
+                <span class="thought-timer" id="timer-${messageId}">Thinking...</span>
+              </div>
+              <div id="thought-status-${messageId}">
+                <i class="fa-solid fa-spinner thought-status-spinner"></i>
+              </div>
+            </div>
+            <div class="thought-content" id="thought-content-${messageId}"></div>
+          </div>
+          <div class="message-body" id="body-${messageId}">
+            ${isLoading ? '<div class="typing-indicator"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>' : ''}
+          </div>
+        `;
+      }
+      
+      // Meta timestamp
+      const meta = document.createElement("div");
+      meta.className = "message-meta";
+      const timeStr = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+      meta.innerHTML = `<i class="fa-regular fa-clock"></i> ${timeStr}`;
+      bubble.appendChild(meta);
+      
+      row.appendChild(bubble);
+      chatHistory.appendChild(row);
+      chatHistory.scrollTop = chatHistory.scrollHeight;
+      
+      return messageId;
+    }
+
+    // Toggle Collapsible thought accordion
+    window.toggleThought = function(messageId) {
+      const content = document.getElementById(`thought-content-${messageId}`);
+      if (content.style.display === "none") {
+        content.style.display = "block";
+      } else {
+        content.style.display = "none";
+      }
+    };
+
+    // Update assistant response bubble on stream
+    function updateAssistantStream(messageId, fullText) {
+      const parsed = parseStreamedText(fullText);
+      const thoughtBox = document.getElementById(`thought-box-${messageId}`);
+      const thoughtContent = document.getElementById(`thought-content-${messageId}`);
+      const thoughtLabel = document.getElementById(`thought-label-${messageId}`);
+      const thoughtStatus = document.getElementById(`thought-status-${messageId}`);
+      const bodyDiv = document.getElementById(`body-${messageId}`);
+      
+      // Update Thought process box
+      if (parsed.thinkingText) {
+        thoughtBox.style.display = "block";
+        thoughtContent.textContent = parsed.thinkingText;
+        
+        if (parsed.hasThoughtCompleted) {
+          // Stop timer and change spinner to check
+          clearInterval(timerInterval);
+          const timerSpan = document.getElementById(`timer-${messageId}`);
+          const durationStr = timerSpan.textContent.replace("Thinking for ", "");
+          timerSpan.textContent = `Thought for ${durationStr}`;
+          
+          thoughtLabel.textContent = "Reasoning Process Complete";
+          thoughtStatus.innerHTML = '<i class="fa-solid fa-circle-check thought-status-done"></i>';
+          
+          // Collapse thought content once reasoning finishes and final response starts
+          if (parsed.responseText && thoughtContent.style.display !== "none" && !thoughtContent.dataset.collapsedOnce) {
+            thoughtContent.style.display = "none";
+            thoughtContent.dataset.collapsedOnce = "true";
+          }
+        }
+      }
+      
+      // Update response body with parsed Markdown
+      if (parsed.responseText) {
+        bodyDiv.innerHTML = marked.parse(parsed.responseText);
+        
+        // Highlight code syntax
+        Prism.highlightAllUnder(bodyDiv);
+        
+        // Setup code block copy buttons
+        setupCodeBlockHeaders(bodyDiv);
+      } else if (parsed.hasThoughtCompleted && !parsed.responseText) {
+        bodyDiv.innerHTML = '<div class="typing-indicator"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>';
+      }
+      
+      // Typeset Math equations once completed
+      if (parsed.hasThoughtCompleted && (fullText.endsWith(".") || fullText.endsWith("```") || !isGenerating)) {
+        debouncedMathTypeset();
+      }
+      
+      const chatHistory = document.getElementById("chat-history");
+      chatHistory.scrollTop = chatHistory.scrollHeight;
+
+      // Handle stream completion check
+      if (parsed.hasThoughtCompleted && parsed.responseText && activeJob && activeJob.is_complete) {
+        finalizeGeneration(messageId);
+      }
+    }
+
+    // Debounce MathJax typeset to avoid layout thrashing during fast streams
+    let mathTimeout = null;
+    function debouncedMathTypeset() {
+      clearTimeout(mathTimeout);
+      mathTimeout = setTimeout(() => {
+        if (window.MathJax && window.MathJax.typesetPromise) {
+          window.MathJax.typesetPromise().catch((err) => console.log("MathJax typesetting error: ", err));
+        }
+      }, 500);
+    }
+
+    // Setup headers and copy buttons for code segments
+    function setupCodeBlockHeaders(container) {
+      const codeBlocks = container.querySelectorAll("pre");
+      codeBlocks.forEach((pre) => {
+        if (pre.querySelector(".code-header")) return; // Header already exists
+        
+        const code = pre.querySelector("code");
+        let lang = "code";
+        // Extract language class e.g., language-python
+        const classNames = code.className.split(" ");
+        classNames.forEach(cls => {
+          if (cls.startsWith("language-")) {
+            lang = cls.replace("language-", "");
+          }
+        });
+
+        const header = document.createElement("div");
+        header.className = "code-header";
+        header.innerHTML = `
+          <span>${lang.toUpperCase()}</span>
+          <button class="copy-btn" onclick="copyCode(this)"><i class="fa-regular fa-copy"></i> Copy</button>
+        `;
+        pre.insertBefore(header, code);
+      });
+    }
+
+    // Code copy implementation
+    window.copyCode = function(button) {
+      const pre = button.closest("pre");
+      const code = pre.querySelector("code").textContent;
+      navigator.clipboard.writeText(code).then(() => {
+        button.innerHTML = '<i class="fa-solid fa-check" style="color: #22c55e"></i> Copied!';
+        setTimeout(() => {
+          button.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
+        }, 2000);
+      });
+    };
+
+    function updateMessageError(messageId, text) {
+      const bodyDiv = document.getElementById(`body-${messageId}`);
+      if (bodyDiv) {
+        bodyDiv.innerHTML = `<span style="color: #ef4444; font-weight: 500;"><i class="fa-solid fa-triangle-exclamation"></i> ${text}</span>`;
+      }
+    }
+
+    // Finalize generation
+    function finalizeGeneration(messageId) {
+      clearInterval(timerInterval);
+      isGenerating = false;
+      resetSubmitButton();
+      updateStatus("ready", "Server Ready");
+      
+      // Final full typeset pass
+      if (window.MathJax && window.MathJax.typesetPromise) {
+        window.MathJax.typesetPromise();
+      }
+    }
+
+    // Override activeJob data completion hook
+    // Since activeJob event on completed is standard, we finalize when streaming finishes
+    document.getElementById("chat-input").addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    });
+
+    // Clear entire conversation
+    window.clearChat = function() {
+      if (isGenerating) {
+        if (activeJob) activeJob.cancel();
+        isGenerating = false;
+        resetSubmitButton();
+      }
+      
+      const chatHistory = document.getElementById("chat-history");
+      chatHistory.innerHTML = `
+        <div class="welcome-card" id="welcome-card">
+          <span class="welcome-icon">🤗</span>
+          <h2 class="welcome-title">VibeThinker-3B Engine</h2>
+          <p class="welcome-description">
+            VibeThinker-3B is a 3-billion parameter Small Language Model (SLM) trained using curriculum post-training SFT and multi-domain Reinforcement Learning. It achieves near-frontier results on math, coding, and STEM by using a dedicated chain-of-thought strategy.
+          </p>
+          <div class="welcome-grid">
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-brain"></i> Chain-of-Thought</div>
+              <div class="welcome-feature-desc">Analyzes problems thoroughly inside <code>&lt;think&gt;</code> tags before giving the final answer.</div>
+            </div>
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-code"></i> Coding Logic</div>
+              <div class="welcome-feature-desc">Excellent at LeetCode, algorithms, complexity analysis, and programming constructs.</div>
+            </div>
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-calculator"></i> STEM Focus</div>
+              <div class="welcome-feature-desc">Verifiably correct solutions to mathematical and reasoning challenges.</div>
+            </div>
+            <div class="welcome-feature">
+              <div class="welcome-feature-title"><i class="fa-solid fa-cloud"></i> Gradio Server</div>
+              <div class="welcome-feature-desc">Custom web front-end backed by Gradio's advanced queuing & ZeroGPU engine.</div>
+            </div>
+          </div>
+        </div>
+      `;
+      updateStatus("ready", "Server Ready");
+    };
+
+    // Hook finalize generation on custom check if necessary
+    // We add an interval hook to check if activeJob has finished and set isGenerating = false
+    setInterval(() => {
+      if (isGenerating && activeJob) {
+        // If the job is resolved or cancelled
+        if (activeJob.status === "complete" || activeJob.status === "error") {
+          finalizeGeneration(currentMessageId);
+        }
+      }
+    }, 1000);
+  </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,7 @@
+gradio>=6.19.0
+transformers>=4.54.0
+torch
+accelerate
+fastapi
+uvicorn
+huggingface_hub