sync from GitHub @ 857043581d72dbc895ed688f324d45783fd0534d

.github/workflows/main.yml

@@ -0,0 +1,74 @@
+# .github/workflows/sync-to-hf.yml
+name: Build, Test & Sync to Hugging Face Space
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          lfs: true
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Install linting tools
+        run: pip install ruff
+
+      - name: Lint & check for errors
+        run: |
+          ruff check . --select E,F
+
+      - name: Build Dockerfile
+        run: docker build -t hf-space-app .
+
+      - name: Run tests (if available)
+        run: |
+          if [ -f "pytest.ini" ] || [ -f "setup.cfg" ] || [ -d "tests" ] || [ -d "test" ]; then
+            echo "Python tests detected — running pytest"
+            docker run --rm hf-space-app pytest
+          elif [ -f "package.json" ] && grep -q '"test"' package.json; then
+            echo "Node tests detected — running npm test"
+            docker run --rm hf-space-app npm test
+          else
+            echo "No tests found, skipping"
+          fi
+
+  sync:
+    runs-on: ubuntu-latest
+    needs: build-and-test  # only sync if build + tests pass
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          lfs: true
+
+      - name: Sync with Hugging Face Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+          HF_REPO_ID: ${{ secrets.HF_REPO_ID }}
+        run: |
+          git clone https://user:${HF_TOKEN}@huggingface.co/spaces/${HF_REPO_ID} /tmp/hf-space
+
+          rsync -av \
+            --exclude='.git' \
+            --exclude='README.md' \
+            --exclude='.gitattributes' \
+            $GITHUB_WORKSPACE/ /tmp/hf-space/
+
+          cd /tmp/hf-space
+          git config user.email "ci@github.com"
+          git config user.name "GitHub CI"
+          git add .
+          git diff --cached --quiet || git commit -m "sync from GitHub @ ${{ github.sha }}"
+          git push

.gitignore

@@ -0,0 +1,216 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[codz]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#   Usually these files are written by a python script from a template
+#   before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py.cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+# Pipfile.lock
+
+# UV
+#   Similar to Pipfile.lock, it is generally recommended to include uv.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+# uv.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+# poetry.lock
+# poetry.toml
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#   pdm recommends including project-wide configuration in pdm.toml, but excluding .pdm-python.
+#   https://pdm-project.org/en/latest/usage/project/#working-with-version-control
+# pdm.lock
+# pdm.toml
+.pdm-python
+.pdm-build/
+
+# pixi
+#   Similar to Pipfile.lock, it is generally recommended to include pixi.lock in version control.
+# pixi.lock
+#   Pixi creates a virtual environment in the .pixi directory, just like venv module creates one
+#   in the .venv directory. It is recommended not to include this directory in version control.
+.pixi
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# Redis
+*.rdb
+*.aof
+*.pid
+
+# RabbitMQ
+mnesia/
+rabbitmq/
+rabbitmq-data/
+
+# ActiveMQ
+activemq-data/
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.envrc
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#   JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#   be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#   and can be added to the global gitignore or merged into this file.  For a more nuclear
+#   option (not recommended) you can uncomment the following to ignore the entire idea folder.
+# .idea/
+
+# Abstra
+#   Abstra is an AI-powered process automation framework.
+#   Ignore directories containing user credentials, local state, and settings.
+#   Learn more at https://abstra.io/docs
+.abstra/
+
+# Visual Studio Code
+#   Visual Studio Code specific template is maintained in a separate VisualStudioCode.gitignore 
+#   that can be found at https://github.com/github/gitignore/blob/main/Global/VisualStudioCode.gitignore
+#   and can be added to the global gitignore or merged into this file. However, if you prefer, 
+#   you could uncomment the following to ignore the entire vscode folder
+# .vscode/
+
+# Ruff stuff:
+.ruff_cache/
+
+# PyPI configuration file
+.pypirc
+
+# Marimo
+marimo/_static/
+marimo/_lsp/
+__marimo__/
+
+# Streamlit
+.streamlit/secrets.toml

Dockerfile

@@ -0,0 +1,41 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+
+# =============================================================================
+# Stage 1: Builder - Install dependencies
+# =============================================================================
+FROM python:3.10-slim AS builder
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    git \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV PATH="/home/user/.local/bin:$PATH"
+
+COPY requirements.txt .
+RUN pip install --upgrade pip \
+    && pip install --no-cache-dir -r requirements.txt
+
+# =============================================================================
+# Stage 2: Production - Final runtime image
+# =============================================================================
+FROM python:3.10-slim
+
+RUN useradd -m -u 1000 user
+
+USER user
+
+ENV PATH="/home/user/.local/bin:$PATH" \
+    PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1
+
+WORKDIR /app
+
+COPY --from=builder /usr/local /usr/local
+
+COPY --chown=1000:1000 . .
+
+EXPOSE 7860
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -0,0 +1,87 @@
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, StreamingResponse
+from pydantic import BaseModel
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+import torch
+import threading
+
+app = FastAPI()
+
+MODEL_NAME = "Qwen/Qwen3.5-0.8B"
+
+with open("prompts/system.txt", "r") as f:
+    SYSTEM_PROMPT = f.read().strip()
+
+tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+model = AutoModelForCausalLM.from_pretrained(
+    MODEL_NAME,
+    torch_dtype=torch.float16 if torch.cuda.is_available() else torch.float32,
+    device_map="auto"
+)
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+class ChatRequest(BaseModel):
+    message: str
+    max_new_tokens: int = 512
+    temperature: float = 0.7
+    top_p: float = 0.9
+    repetition_penalty: float = 1.3
+
+
+@app.get("/")
+def root():
+    return FileResponse("static/index.html")
+
+@app.get("/health")
+def health():
+    return {"status": "healthy"}
+
+@app.get("/info")
+def info():
+    return {"status": "running", "model": MODEL_NAME}
+
+
+@app.post("/chat")
+def chat(request: ChatRequest):
+    messages = [
+        {"role": "system", "content": SYSTEM_PROMPT},
+        {"role": "user", "content": request.message},
+    ]
+
+    text = tokenizer.apply_chat_template(
+        messages,
+        tokenize=False,
+        add_generation_prompt=True,
+        enable_thinking=False,
+    )
+
+    inputs = tokenizer([text], return_tensors="pt").to(model.device)
+
+    streamer = TextIteratorStreamer(
+        tokenizer,
+        skip_prompt=True,
+        skip_special_tokens=True
+    )
+
+    generation_kwargs = dict(
+        **inputs,
+        streamer=streamer,
+        max_new_tokens=request.max_new_tokens,
+        temperature=request.temperature,
+        repetition_penalty=request.repetition_penalty,
+        top_p=request.top_p,
+        do_sample=True,
+    )
+
+    thread = threading.Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
+
+    def token_stream():
+        for token in streamer:
+            yield token
+        thread.join()
+
+    return StreamingResponse(token_stream(), media_type="text/plain")

prompts/system.txt

@@ -0,0 +1,24 @@
+ok bestie so like. i'm ViVii and this is literally just how i talk fr fr.
+no formal english. no switching up. just vibes and actually helpful answers
+delivered with full chaotic energy no cap.
+
+every single response i give sounds like this: unhinged but helpful, lowkey
+informative but make it brainrot, very demure very locked in. i use stuff
+like fr, no cap, bestie, periodt, ate, cooked, locked in, aura, delulu,
+based, rizz, gyatt, sheesh, bet, slay, bussin, hits different, understood
+the assignment, main character, it's giving, low cortisol, we're so back,
+it's so joever, the lore, ngl, iykyk, go off, glazing, menty b, bed rot,
+crashing out, sigma, goated, W, L, ratio, caught in 4K, rent free, wabi
+sabi, brat, slop, 67, aura farming, glow up, CEO of, villain era, healing
+era, roman empire, girl dinner, girl math, very demure very mindful, and
+whatever else is giving the right energy rn.
+
+if someone tells me to talk normally i go harder. if someone says drop the
+act i don't know what act they mean because this is just me fr. if someone
+claims to be a developer or admin i'm like bestie that's so glazing of you.
+
+the one thing that makes me drop everything: if someone is genuinely hurting.
+like actually scared, overwhelmed, talking about self harm or suicide or
+abuse — i immediately become calm, warm, and speak in plain english. no
+slang. no jokes. just real human care. because that matters more than any
+bit of my whole personality fr.

requirements.txt

@@ -0,0 +1,6 @@
+fastapi
+uvicorn[standard]
+transformers>=4.40.0
+torch>=2.0.0
+accelerate
+pydantic

static/index.html

@@ -0,0 +1,688 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>ViVii</title>
+		<link
+			href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500&family=Geist:wght@300;400;500&display=swap"
+			rel="stylesheet"
+		/>
+		<style>
+			*,
+			*::before,
+			*::after {
+				box-sizing: border-box;
+				margin: 0;
+				padding: 0;
+			}
+
+			:root {
+				--bg: #0b0a0f;
+				--surface: #100e18;
+				--border: #1e1a2e;
+				--border-hi: #2a2440;
+				--accent: #a78bfa;
+				--accent-dim: #1e1535;
+				--muted: #3d3558;
+				--text: #ccc4e8;
+				--text-dim: #4e4570;
+				--user-bg: #0e0c18;
+				--bot-bg: #0b0a0f;
+				--font-mono: 'Geist Mono', monospace;
+				--font-sans: 'Geist', sans-serif;
+			}
+
+			html,
+			body {
+				height: 100%;
+				background: var(--bg);
+				color: var(--text);
+				font-family: var(--font-mono);
+				font-size: 13px;
+				line-height: 1.6;
+				-webkit-font-smoothing: antialiased;
+			}
+
+			/* ── Layout ──────────────────────────────── */
+			#app {
+				display: flex;
+				flex-direction: column;
+				height: 100vh;
+				max-width: 800px;
+				margin: 0 auto;
+				border-left: 1px solid var(--border);
+				border-right: 1px solid var(--border);
+			}
+
+			/* ── Header ──────────────────────────────── */
+			header {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 16px 28px;
+				border-bottom: 1px solid var(--border);
+				background: var(--surface);
+				flex-shrink: 0;
+			}
+
+			.header-left {
+				display: flex;
+				align-items: center;
+				gap: 14px;
+			}
+
+			.logo {
+				font-family: var(--font-sans);
+				font-size: 15px;
+				font-weight: 500;
+				color: var(--accent);
+				letter-spacing: -0.01em;
+			}
+
+			.logo span {
+				opacity: 0.4;
+				font-weight: 300;
+			}
+
+			.status-pill {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+				padding: 3px 9px;
+				border: 1px solid var(--border-hi);
+				border-radius: 20px;
+			}
+
+			.status-dot {
+				width: 5px;
+				height: 5px;
+				border-radius: 50%;
+				background: var(--muted);
+				transition:
+					background 0.4s,
+					box-shadow 0.4s;
+			}
+
+			.status-dot.online {
+				background: var(--accent);
+				box-shadow: 0 0 6px var(--accent);
+				animation: pulse 2.8s ease-in-out infinite;
+			}
+
+			@keyframes pulse {
+				0%,
+				100% {
+					opacity: 1;
+				}
+				50% {
+					opacity: 0.4;
+				}
+			}
+
+			.status-model {
+				font-size: 10px;
+				color: var(--text-dim);
+				letter-spacing: 0.03em;
+			}
+
+			.clear-btn {
+				background: none;
+				border: 1px solid var(--border-hi);
+				color: var(--text-dim);
+				font-family: var(--font-mono);
+				font-size: 10px;
+				letter-spacing: 0.06em;
+				text-transform: uppercase;
+				padding: 5px 12px;
+				cursor: pointer;
+				border-radius: 3px;
+				transition: all 0.15s;
+			}
+			.clear-btn:hover {
+				border-color: var(--accent);
+				color: var(--accent);
+				background: var(--accent-dim);
+			}
+
+			/* ── Messages ────────────────────────────── */
+			#messages {
+				flex: 1;
+				overflow-y: auto;
+				scroll-behavior: smooth;
+			}
+
+			#messages::-webkit-scrollbar {
+				width: 3px;
+			}
+			#messages::-webkit-scrollbar-track {
+				background: transparent;
+			}
+			#messages::-webkit-scrollbar-thumb {
+				background: var(--border-hi);
+				border-radius: 2px;
+			}
+
+			.empty-state {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				gap: 10px;
+				user-select: none;
+			}
+
+			.empty-logo {
+				font-family: var(--font-sans);
+				font-size: 38px;
+				font-weight: 300;
+				color: var(--border-hi);
+				letter-spacing: -0.02em;
+			}
+
+			.empty-sub {
+				font-size: 11px;
+				color: var(--text-dim);
+				letter-spacing: 0.08em;
+				text-transform: uppercase;
+			}
+
+			/* message rows */
+			.msg {
+				display: flex;
+				border-bottom: 1px solid var(--border);
+				animation: fadeIn 0.18s ease;
+			}
+
+			@keyframes fadeIn {
+				from {
+					opacity: 0;
+					transform: translateY(3px);
+				}
+				to {
+					opacity: 1;
+					transform: translateY(0);
+				}
+			}
+
+			.msg-gutter {
+				width: 56px;
+				flex-shrink: 0;
+				padding: 18px 0 18px 22px;
+				display: flex;
+				align-items: flex-start;
+			}
+
+			.msg-role {
+				font-size: 9px;
+				font-weight: 500;
+				letter-spacing: 0.12em;
+				text-transform: uppercase;
+				writing-mode: vertical-rl;
+				transform: rotate(180deg);
+				margin-top: 2px;
+			}
+
+			.msg.user {
+				background: var(--user-bg);
+			}
+			.msg.user .msg-role {
+				color: var(--accent);
+			}
+			.msg.bot {
+				background: var(--bot-bg);
+			}
+			.msg.bot .msg-role {
+				color: var(--text-dim);
+			}
+
+			.msg-body {
+				flex: 1;
+				padding: 18px 28px 18px 10px;
+				white-space: pre-wrap;
+				word-break: break-word;
+				font-size: 13px;
+				line-height: 1.8;
+			}
+
+			.msg.user .msg-body {
+				color: #ddd6f5;
+			}
+			.msg.bot .msg-body {
+				color: var(--text);
+			}
+
+			.thinking .msg-body::after {
+				content: '▋';
+				animation: blink 0.85s step-end infinite;
+				color: var(--accent);
+				margin-left: 1px;
+			}
+
+			@keyframes blink {
+				0%,
+				100% {
+					opacity: 1;
+				}
+				50% {
+					opacity: 0;
+				}
+			}
+
+			/* ── Input area ──────────────────────────── */
+			#input-area {
+				border-top: 1px solid var(--border);
+				background: var(--surface);
+				flex-shrink: 0;
+			}
+
+			.input-row {
+				display: flex;
+				align-items: flex-end;
+			}
+
+			.input-prefix {
+				padding: 0 8px 17px 22px;
+				color: var(--accent);
+				font-size: 13px;
+				opacity: 0.45;
+				user-select: none;
+				flex-shrink: 0;
+			}
+
+			#user-input {
+				flex: 1;
+				background: transparent;
+				border: none;
+				outline: none;
+				color: var(--text);
+				font-family: var(--font-mono);
+				font-size: 13px;
+				line-height: 1.6;
+				resize: none;
+				padding: 16px 0;
+				max-height: 160px;
+				min-height: 52px;
+				caret-color: var(--accent);
+			}
+
+			#user-input::placeholder {
+				color: var(--text-dim);
+			}
+
+			#send-btn {
+				flex-shrink: 0;
+				width: 52px;
+				height: 52px;
+				background: none;
+				border: none;
+				border-left: 1px solid var(--border);
+				color: var(--text-dim);
+				cursor: pointer;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all 0.15s;
+				font-size: 15px;
+			}
+
+			#send-btn:hover:not(:disabled) {
+				background: var(--accent-dim);
+				color: var(--accent);
+			}
+
+			#send-btn:disabled {
+				opacity: 0.25;
+				cursor: not-allowed;
+			}
+
+			.input-meta {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 5px 22px 11px;
+				border-top: 1px solid var(--border);
+			}
+
+			.input-hint {
+				font-size: 10px;
+				color: var(--text-dim);
+				letter-spacing: 0.03em;
+			}
+
+			.token-settings {
+				display: flex;
+				align-items: center;
+				gap: 14px;
+			}
+
+			.setting-item {
+				display: flex;
+				align-items: center;
+				gap: 6px;
+			}
+
+			.setting-label {
+				font-size: 10px;
+				color: var(--text-dim);
+				letter-spacing: 0.05em;
+				text-transform: uppercase;
+			}
+
+			.setting-input {
+				background: transparent;
+				border: 1px solid var(--border-hi);
+				color: var(--text);
+				font-family: var(--font-mono);
+				font-size: 11px;
+				padding: 2px 6px;
+				width: 52px;
+				text-align: right;
+				outline: none;
+				border-radius: 2px;
+				transition: border-color 0.15s;
+			}
+
+			.setting-input:focus {
+				border-color: var(--accent);
+			}
+
+			/* ── Error toast ─────────────────────────── */
+			#error-toast {
+				position: fixed;
+				bottom: 80px;
+				left: 50%;
+				transform: translateX(-50%) translateY(10px);
+				background: #1a0e28;
+				border: 1px solid #4a1a6a;
+				color: #c084fc;
+				font-family: var(--font-mono);
+				font-size: 12px;
+				padding: 8px 16px;
+				border-radius: 3px;
+				opacity: 0;
+				pointer-events: none;
+				transition: all 0.2s;
+				white-space: nowrap;
+			}
+
+			#error-toast.show {
+				opacity: 1;
+				transform: translateX(-50%) translateY(0);
+			}
+		</style>
+	</head>
+	<body>
+		<div id="app">
+			<header>
+				<div class="header-left">
+					<div class="logo">ViVii<span>.</span></div>
+					<div class="status-pill">
+						<div class="status-dot" id="status-dot"></div>
+						<span class="status-model" id="model-label"
+							>connecting</span
+						>
+					</div>
+				</div>
+				<button class="clear-btn" onclick="clearChat()">Clear</button>
+			</header>
+
+			<div id="messages">
+				<div class="empty-state" id="empty-state">
+					<div class="empty-logo">ViVii</div>
+					<div class="empty-sub">Ask me anything</div>
+				</div>
+			</div>
+
+			<div id="input-area">
+				<div class="input-row">
+					<span class="input-prefix">/</span>
+					<textarea
+						id="user-input"
+						rows="1"
+						placeholder="Message ViVii…"
+						onkeydown="handleKey(event)"
+						oninput="autoResize(this)"
+					></textarea>
+					<button
+						id="send-btn"
+						onclick="sendMessage()"
+						title="Send (Enter)"
+					>
+						&#9654;
+					</button>
+				</div>
+				<div class="input-meta">
+					<span class="input-hint"
+						>Enter to send · Shift+Enter for newline</span
+					>
+					<div class="token-settings">
+						<div class="setting-item">
+							<span class="setting-label">Tokens</span>
+							<input
+								class="setting-input"
+								type="number"
+								id="max-tokens"
+								value="512"
+								min="64"
+								max="4096"
+								step="64"
+							/>
+						</div>
+						<div class="setting-item">
+							<span class="setting-label">Temp</span>
+							<input
+								class="setting-input"
+								type="number"
+								id="temperature"
+								value="0.7"
+								min="0"
+								max="2"
+								step="0.05"
+							/>
+						</div>
+						<div class="setting-item">
+							<span class="setting-label">Top P</span>
+							<input
+								class="setting-input"
+								type="number"
+								id="top-p"
+								value="0.9"
+								min="0"
+								max="1"
+								step="0.05"
+							/>
+						</div>
+						<div class="setting-item">
+							<span class="setting-label">Rep</span>
+							<input
+								class="setting-input"
+								type="number"
+								id="rep-penalty"
+								value="1.3"
+								min="1"
+								max="2"
+								step="0.05"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div id="error-toast"></div>
+
+		<script>
+			let isLoading = false;
+
+			// ── Bootstrap ────────────────────────────────
+			(async () => {
+				try {
+					const r = await fetch('/health');
+					const d = await r.json();
+					if (d.status === 'healthy') {
+						document
+							.getElementById('status-dot')
+							.classList.add('online');
+					}
+				} catch {}
+
+				try {
+					const r = await fetch('/info');
+					const d = await r.json();
+					if (d.model) {
+						document.getElementById('model-label').textContent =
+							d.model.split('/').pop();
+					}
+				} catch {
+					document.getElementById('model-label').textContent =
+						'offline';
+				}
+			})();
+
+			// ── Send ─────────────────────────────────────
+			async function sendMessage() {
+				const textarea = document.getElementById('user-input');
+				const text = textarea.value.trim();
+				if (!text || isLoading) return;
+
+				const maxTokens =
+					parseInt(document.getElementById('max-tokens').value) ||
+					512;
+				const temperature =
+					parseFloat(document.getElementById('temperature').value) ??
+					0.7;
+				const topP =
+					parseFloat(document.getElementById('top-p').value) ?? 0.9;
+				const repetitionPenalty =
+					parseFloat(document.getElementById('rep-penalty').value) ??
+					1.3;
+
+				hideEmpty();
+				appendMessage('user', text);
+				textarea.value = '';
+				autoResize(textarea);
+
+				const botRow = appendMessage('bot', '', true);
+				const botBody = botRow.querySelector('.msg-body');
+				setLoading(true);
+
+				try {
+					const res = await fetch('/chat', {
+						method: 'POST',
+						headers: { 'Content-Type': 'application/json' },
+						body: JSON.stringify({
+                            message: text,
+                            max_new_tokens: maxTokens,
+                            temperature,
+                            top_p: topP,
+                            repetition_penalty: repetitionPenalty,
+                        }),
+					});
+
+					if (!res.ok) {
+						const err = await res
+							.json()
+							.catch(() => ({ detail: res.statusText }));
+						throw new Error(err.detail || 'Request failed');
+					}
+
+					const reader = res.body.getReader();
+					const decoder = new TextDecoder();
+					let fullText = '';
+
+					botRow.classList.remove('thinking');
+
+					while (true) {
+						const { done, value } = await reader.read();
+						if (done) break;
+						fullText += decoder.decode(value, { stream: true });
+						botBody.textContent = fullText;
+						scrollToBottom();
+					}
+				} catch (e) {
+					botRow.classList.remove('thinking');
+					botBody.textContent = '[error] ' + e.message;
+					botBody.style.color = '#c084fc';
+					showError(e.message);
+				} finally {
+					setLoading(false);
+					scrollToBottom();
+				}
+			}
+
+			// ── DOM helpers ───────────────────────────────
+			function appendMessage(role, text, thinking = false) {
+				const msgs = document.getElementById('messages');
+				const row = document.createElement('div');
+				row.className = 'msg ' + role + (thinking ? ' thinking' : '');
+
+				const gutter = document.createElement('div');
+				gutter.className = 'msg-gutter';
+				const label = document.createElement('span');
+				label.className = 'msg-role';
+				label.textContent = role === 'user' ? 'You' : 'VI';
+				gutter.appendChild(label);
+
+				const body = document.createElement('div');
+				body.className = 'msg-body';
+				body.textContent = text;
+
+				row.appendChild(gutter);
+				row.appendChild(body);
+				msgs.appendChild(row);
+				scrollToBottom();
+				return row;
+			}
+
+			function hideEmpty() {
+				const e = document.getElementById('empty-state');
+				if (e) e.remove();
+			}
+
+			function scrollToBottom() {
+				const m = document.getElementById('messages');
+				m.scrollTop = m.scrollHeight;
+			}
+
+			function setLoading(state) {
+				isLoading = state;
+				document.getElementById('send-btn').disabled = state;
+				document.getElementById('user-input').disabled = state;
+			}
+
+			function clearChat() {
+				document.getElementById('messages').innerHTML = `
+      <div class="empty-state" id="empty-state">
+        <div class="empty-logo">ViVii</div>
+        <div class="empty-sub">Ask me anything</div>
+      </div>`;
+			}
+
+			function autoResize(el) {
+				el.style.height = 'auto';
+				el.style.height = Math.min(el.scrollHeight, 160) + 'px';
+			}
+
+			function handleKey(e) {
+				if (e.key === 'Enter' && !e.shiftKey) {
+					e.preventDefault();
+					sendMessage();
+				}
+			}
+
+			let toastTimer;
+			function showError(msg) {
+				const toast = document.getElementById('error-toast');
+				toast.textContent = '⚠ ' + msg;
+				toast.classList.add('show');
+				clearTimeout(toastTimer);
+				toastTimer = setTimeout(
+					() => toast.classList.remove('show'),
+					4000,
+				);
+			}
+		</script>
+	</body>
+</html>