Upload 4 files

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+ENV DATA_DIR=/app/data
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt /app/requirements.txt
+RUN pip install --no-cache-dir -r /app/requirements.txt
+
+COPY main.py /app/main.py
+COPY templates /app/templates
+COPY data /app/data
+
+EXPOSE 7860
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,472 @@
+from __future__ import annotations
+
+import json
+import os
+import uuid
+from datetime import datetime, timezone
+from pathlib import Path
+from typing import Any, Optional
+
+import numpy as np
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+
+# Optional but recommended for similarity search.
+# If sentence-transformers is unavailable, the app still works with a fallback.
+try:
+    from sentence_transformers import SentenceTransformer
+except Exception:  # pragma: no cover
+    SentenceTransformer = None  # type: ignore
+
+try:
+    from sklearn.metrics.pairwise import cosine_similarity
+except Exception:  # pragma: no cover
+    cosine_similarity = None  # type: ignore
+
+
+APP_TITLE = "Human Intelligence"
+DATA_DIR = Path(os.environ.get("DATA_DIR", "/app/data"))
+THREADS_DIR = DATA_DIR / "threads"
+INDEX_FILE = DATA_DIR / "index.json"
+EMBED_FILE = DATA_DIR / "embeddings.json"
+TEMPLATES_DIR = Path("/app/templates")
+SIMILARITY_THRESHOLD = float(os.environ.get("SIMILARITY_THRESHOLD", "0.82"))
+
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+THREADS_DIR.mkdir(parents=True, exist_ok=True)
+TEMPLATES_DIR.mkdir(parents=True, exist_ok=True)
+
+app = FastAPI(title=APP_TITLE)
+templates = Jinja2Templates(directory=str(TEMPLATES_DIR))
+
+# Serve any public assets you may add later.
+app.mount("/data", StaticFiles(directory=str(DATA_DIR)), name="data")
+
+_embed_model = None
+
+
+# ---------------------------------------------------------------------
+# Utilities
+# ---------------------------------------------------------------------
+def now_iso() -> str:
+    return datetime.now(timezone.utc).isoformat()
+
+
+def read_json(path: Path, default: Any):
+    if not path.exists():
+        return default
+    try:
+        return json.loads(path.read_text(encoding="utf-8"))
+    except Exception:
+        return default
+
+
+def write_json(path: Path, data: Any) -> None:
+    tmp = path.with_suffix(path.suffix + ".tmp")
+    tmp.write_text(json.dumps(data, ensure_ascii=False, indent=2, default=str), encoding="utf-8")
+    tmp.replace(path)
+
+
+def get_username(request: Request, payload: dict | None = None) -> str:
+    """
+    Priority:
+      1) X-User header
+      2) JSON payload username
+      3) guest
+    This keeps the app simple and deployment-friendly.
+    """
+    header_name = request.headers.get("x-user", "").strip()
+    if header_name:
+        return header_name
+
+    if payload:
+        p_name = str(payload.get("username", "")).strip()
+        if p_name:
+            return p_name
+
+    return "Guest"
+
+
+# ---------------------------------------------------------------------
+# Embeddings / similarity
+# ---------------------------------------------------------------------
+def load_embed_model():
+    global _embed_model
+    if _embed_model is None:
+        if SentenceTransformer is None:
+            return None
+        _embed_model = SentenceTransformer("all-MiniLM-L6-v2")
+    return _embed_model
+
+
+def embed_text(text: str) -> list[float]:
+    model = load_embed_model()
+    if model is None:
+        return []
+
+    vec = model.encode(text, normalize_embeddings=True)
+    return vec.tolist()
+
+
+def load_embed_index() -> dict:
+    return read_json(EMBED_FILE, {})
+
+
+def save_embed_index(idx: dict) -> None:
+    write_json(EMBED_FILE, idx)
+
+
+def find_similar_thread(question: str) -> Optional[tuple[str, float]]:
+    idx = load_embed_index()
+    if not idx:
+        return None
+
+    if cosine_similarity is None:
+        return None
+
+    q_vec = embed_text(question)
+    if not q_vec:
+        return None
+
+    ids = list(idx.keys())
+    vecs = np.array([idx[tid]["vector"] for tid in ids], dtype=float)
+
+    if vecs.size == 0:
+        return None
+
+    sims = cosine_similarity(np.array(q_vec, dtype=float).reshape(1, -1), vecs)[0]
+    best_i = int(np.argmax(sims))
+    score = float(sims[best_i])
+
+    if score >= SIMILARITY_THRESHOLD:
+        return ids[best_i], score
+    return None
+
+
+# ---------------------------------------------------------------------
+# Storage
+# ---------------------------------------------------------------------
+def load_index() -> list[dict]:
+    return read_json(INDEX_FILE, [])
+
+
+def save_index(idx: list[dict]) -> None:
+    write_json(INDEX_FILE, idx)
+
+
+def thread_path(tid: str) -> Path:
+    return THREADS_DIR / f"{tid}.json"
+
+
+def load_thread(tid: str) -> Optional[dict]:
+    return read_json(thread_path(tid), None)
+
+
+def save_thread(thread: dict) -> None:
+    write_json(thread_path(thread["id"]), thread)
+
+
+def ensure_thread_schema(thread: dict) -> dict:
+    thread.setdefault("id", uuid.uuid4().hex)
+    thread.setdefault("question", "")
+    thread.setdefault("author", "Guest")
+    thread.setdefault("created_at", now_iso())
+    thread.setdefault("messages", [])
+    return thread
+
+
+# ---------------------------------------------------------------------
+# Content safety
+# ---------------------------------------------------------------------
+_toxic_pipe = None
+
+def load_safety_pipe():
+    global _toxic_pipe
+    if _toxic_pipe is None:
+        try:
+            from transformers import pipeline
+            _toxic_pipe = pipeline(
+                "text-classification",
+                model="unitary/toxic-bert",
+                device=-1,
+                top_k=None,
+            )
+        except Exception:
+            _toxic_pipe = False
+    return _toxic_pipe
+
+
+def is_safe(text: str) -> tuple[bool, str]:
+    if not text or not text.strip():
+        return False, "empty"
+
+    pipe = load_safety_pipe()
+    if pipe is False:
+        return True, "ok"
+
+    try:
+        results = pipe(text[:512])[0]
+        for r in results:
+            label = str(r.get("label", "")).lower()
+            score = float(r.get("score", 0.0))
+            if label != "non-toxic" and score > 0.70:
+                return False, label or "unsafe"
+        return True, "ok"
+    except Exception:
+        return True, "ok"
+
+
+# ---------------------------------------------------------------------
+# Core operations
+# ---------------------------------------------------------------------
+def create_thread(question: str, author: str) -> tuple[Optional[dict], str]:
+    ok, reason = is_safe(question)
+    if not ok:
+        return None, f"Blocked: content flagged as {reason}."
+
+    tid = uuid.uuid4().hex
+    thread = {
+        "id": tid,
+        "question": question,
+        "author": author,
+        "created_at": now_iso(),
+        "messages": [],
+    }
+    save_thread(thread)
+
+    idx = load_index()
+    idx.insert(
+        0,
+        {
+            "id": tid,
+            "title": question[:120],
+            "created_at": thread["created_at"],
+            "author": author,
+            "reply_count": 0,
+        },
+    )
+    save_index(idx)
+
+    emb_idx = load_embed_index()
+    vec = embed_text(question)
+    if vec:
+        emb_idx[tid] = {"question": question, "vector": vec}
+        save_embed_index(emb_idx)
+
+    return thread, "ok"
+
+
+def add_answer(tid: str, text: str, author: str) -> tuple[Optional[dict], str]:
+    ok, reason = is_safe(text)
+    if not ok:
+        return None, f"Blocked: content flagged as {reason}."
+
+    thread = load_thread(tid)
+    if thread is None:
+        return None, "Thread not found."
+
+    version = {
+        "id": uuid.uuid4().hex,
+        "text": text,
+        "author": author,
+        "created_at": now_iso(),
+        "votes": 0,
+        "voters": [],
+    }
+    message = {
+        "id": uuid.uuid4().hex,
+        "versions": [version],
+        "active_version": version["id"],
+        "created_at": version["created_at"],
+    }
+    thread["messages"].append(message)
+    save_thread(thread)
+
+    idx = load_index()
+    for entry in idx:
+        if entry["id"] == tid:
+            entry["reply_count"] = len(thread["messages"])
+            break
+    save_index(idx)
+
+    return thread, "ok"
+
+
+def propose_version(tid: str, msg_id: str, text: str, author: str) -> tuple[Optional[dict], str]:
+    ok, reason = is_safe(text)
+    if not ok:
+        return None, f"Blocked: content flagged as {reason}."
+
+    thread = load_thread(tid)
+    if thread is None:
+        return None, "Thread not found."
+
+    for msg in thread["messages"]:
+        if msg["id"] == msg_id:
+            version = {
+                "id": uuid.uuid4().hex,
+                "text": text,
+                "author": author,
+                "created_at": now_iso(),
+                "votes": 0,
+                "voters": [],
+            }
+            msg["versions"].append(version)
+            save_thread(thread)
+            return thread, "ok"
+
+    return None, "Message not found."
+
+
+def vote_version(tid: str, msg_id: str, version_id: str, username: str) -> tuple[Optional[dict], str]:
+    thread = load_thread(tid)
+    if thread is None:
+        return None, "Thread not found."
+
+    for msg in thread["messages"]:
+        if msg["id"] == msg_id:
+            for v in msg["versions"]:
+                if v["id"] == version_id:
+                    if username in v["voters"]:
+                        return thread, "already_voted"
+                    v["votes"] += 1
+                    v["voters"].append(username)
+                    break
+
+            msg["active_version"] = max(msg["versions"], key=lambda x: x["votes"])["id"]
+            save_thread(thread)
+            return thread, "ok"
+
+    return None, "Message not found."
+
+
+def get_active_version(msg: dict) -> dict:
+    vid = msg.get("active_version")
+    for v in msg.get("versions", []):
+        if v.get("id") == vid:
+            return v
+    return msg.get("versions", [{}])[0]
+
+
+# ---------------------------------------------------------------------
+# API
+# ---------------------------------------------------------------------
+@app.get("/", response_class=HTMLResponse)
+def home(request: Request):
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "app_title": APP_TITLE,
+            "init_json": json.dumps(
+                {
+                    "ok": True,
+                    "username": get_username(request),
+                    "threads": load_index(),
+                },
+                ensure_ascii=False,
+            ),
+        },
+    )
+
+
+@app.get("/api/init")
+def api_init(request: Request):
+    return JSONResponse(
+        {
+            "ok": True,
+            "username": get_username(request),
+            "threads": load_index(),
+        }
+    )
+
+
+@app.post("/api")
+async def api(request: Request):
+    try:
+        payload = await request.json()
+    except Exception:
+        return JSONResponse({"ok": False, "error": "bad payload"})
+
+    action = str(payload.get("action", ""))
+    username = get_username(request, payload)
+
+    if action == "init":
+        return JSONResponse({"ok": True, "username": username, "threads": load_index()})
+
+    if action == "list_threads":
+        return JSONResponse({"ok": True, "threads": load_index()})
+
+    if action == "get_thread":
+        tid = str(payload.get("thread_id", ""))
+        thread = load_thread(tid)
+        if thread is None:
+            return JSONResponse({"ok": False, "error": "not found"})
+        return JSONResponse({"ok": True, "thread": thread})
+
+    if action == "new_thread":
+        if not username or username == "Guest":
+            return JSONResponse({"ok": False, "error": "not signed in"})
+        question = str(payload.get("question", "")).strip()
+        if not question:
+            return JSONResponse({"ok": False, "error": "empty question"})
+        sim = find_similar_thread(question)
+        thread, msg = create_thread(question, username)
+        if thread is None:
+            return JSONResponse({"ok": False, "error": msg})
+        return JSONResponse({"ok": True, "thread": thread, "similar": sim is not None})
+
+    if action == "add_answer":
+        if not username or username == "Guest":
+            return JSONResponse({"ok": False, "error": "not signed in"})
+        tid = str(payload.get("thread_id", ""))
+        text = str(payload.get("text", "")).strip()
+        if not text:
+            return JSONResponse({"ok": False, "error": "empty answer"})
+        thread, msg = add_answer(tid, text, username)
+        if thread is None:
+            return JSONResponse({"ok": False, "error": msg})
+        return JSONResponse({"ok": True, "thread": thread})
+
+    if action == "propose":
+        if not username or username == "Guest":
+            return JSONResponse({"ok": False, "error": "not signed in"})
+        tid = str(payload.get("thread_id", ""))
+        msg_id = str(payload.get("msg_id", ""))
+        text = str(payload.get("text", "")).strip()
+        if not text:
+            return JSONResponse({"ok": False, "error": "empty proposal"})
+        thread, msg = propose_version(tid, msg_id, text, username)
+        if thread is None:
+            return JSONResponse({"ok": False, "error": msg})
+        return JSONResponse({"ok": True, "thread": thread})
+
+    if action == "vote":
+        if not username or username == "Guest":
+            return JSONResponse({"ok": False, "error": "not signed in"})
+        tid = str(payload.get("thread_id", ""))
+        msg_id = str(payload.get("msg_id", ""))
+        version_id = str(payload.get("version_id", ""))
+        thread, msg = vote_version(tid, msg_id, version_id, username)
+        if thread is None:
+            return JSONResponse({"ok": False, "error": msg})
+        if msg == "already_voted":
+            return JSONResponse({"ok": False, "error": "already voted"})
+        return JSONResponse({"ok": True, "thread": thread})
+
+    return JSONResponse({"ok": False, "error": f"unknown action: {action}"})
+
+
+# ---------------------------------------------------------------------
+# Optional healthcheck
+# ---------------------------------------------------------------------
+@app.get("/health")
+def health():
+    return {"ok": True}
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("main:app", host="0.0.0.0", port=7860, reload=False)

requirements.txt

@@ -0,0 +1,8 @@
+fastapi==0.115.6
+uvicorn[standard]==0.34.0
+jinja2==3.1.5
+numpy==2.2.1
+scikit-learn==1.6.0
+sentence-transformers==3.3.1
+transformers==4.48.0
+torch==2.5.1

templates/index.html

@@ -0,0 +1,1148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{{ app_title }}</title>
+  <style>
+    :root {
+      --bg: #0d0f14;
+      --surface: #13161e;
+      --surface2: #1a1e2a;
+      --border: rgba(255,255,255,0.07);
+      --border2: rgba(255,255,255,0.12);
+      --text: #e8eaf0;
+      --text-muted: #7a7f94;
+      --text-dim: #4a4f64;
+      --accent: #6d85ff;
+      --accent2: #a78bfa;
+      --accent-glow: rgba(109,133,255,0.18);
+      --human: #34d399;
+      --human-bg: rgba(52,211,153,0.08);
+      --danger: #f87171;
+      --radius: 14px;
+      --radius-sm: 8px;
+      --font: 'Sora', sans-serif;
+      --mono: 'DM Mono', monospace;
+      --shadow: 0 4px 24px rgba(0,0,0,0.4);
+      --transition: 200ms cubic-bezier(0.4,0,0.2,1);
+    }
+
+    @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Sora:wght@300;400;500;600;700&display=swap');
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
+    body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+
+    #app {
+      position: fixed;
+      inset: 0;
+      display: flex;
+      overflow: hidden;
+      background: var(--bg);
+    }
+
+    #sidebar {
+      width: 280px;
+      min-width: 240px;
+      background: var(--surface);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    #sidebar-header {
+      padding: 22px 20px 14px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+
+    #logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+
+    #logo .icon {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      border-radius: 9px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      flex-shrink: 0;
+      box-shadow: 0 0 18px var(--accent-glow);
+    }
+
+    #logo .text {
+      font-size: 15px;
+      font-weight: 600;
+      letter-spacing: -0.3px;
+    }
+
+    #logo .text span { color: var(--accent); }
+
+    #new-chat-btn {
+      width: 100%;
+      padding: 9px 14px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      border: none;
+      border-radius: var(--radius-sm);
+      color: #fff;
+      font-family: var(--font);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 7px;
+      box-shadow: 0 2px 12px var(--accent-glow);
+    }
+
+    #new-chat-btn:hover { opacity: 0.92; }
+
+    #thread-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 10px 8px;
+    }
+
+    .thread-item {
+      padding: 10px 12px;
+      border-radius: var(--radius-sm);
+      cursor: pointer;
+      border: 1px solid transparent;
+      margin-bottom: 2px;
+      transition: background var(--transition), border-color var(--transition);
+    }
+
+    .thread-item:hover { background: var(--surface2); }
+    .thread-item.active {
+      background: var(--accent-glow);
+      border-color: rgba(109,133,255,0.25);
+    }
+
+    .thread-title {
+      font-size: 13px;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 1.4;
+    }
+
+    .thread-meta {
+      font-size: 11px;
+      color: var(--text-dim);
+      margin-top: 3px;
+      font-family: var(--mono);
+    }
+
+    #user-bar {
+      padding: 14px 16px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-shrink: 0;
+    }
+
+    .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      color: #fff;
+      flex-shrink: 0;
+    }
+
+    .user-name {
+      font-size: 13px;
+      font-weight: 500;
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .user-status {
+      font-size: 11px;
+      color: var(--human);
+      font-family: var(--mono);
+    }
+
+    #main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--bg);
+      position: relative;
+    }
+
+    #main::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-image:
+        linear-gradient(rgba(109,133,255,0.03) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(109,133,255,0.03) 1px, transparent 1px);
+      background-size: 40px 40px;
+      pointer-events: none;
+    }
+
+    #toolbar {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+      backdrop-filter: blur(12px);
+      background: rgba(13,15,20,0.7);
+      position: relative;
+      z-index: 2;
+    }
+
+    #thread-title {
+      font-size: 14px;
+      font-weight: 600;
+      max-width: 60%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    #appearance-wrap {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .appearance-label {
+      font-size: 11px;
+      color: var(--text-dim);
+      font-family: var(--mono);
+      white-space: nowrap;
+    }
+
+    #appearance-select {
+      background: var(--surface2);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-sm);
+      color: var(--text);
+      font-family: var(--mono);
+      font-size: 11px;
+      padding: 4px 8px;
+      cursor: pointer;
+      outline: none;
+    }
+
+    #messages {
+      flex: 1;
+      overflow-y: auto;
+      padding: 28px 0;
+      position: relative;
+      z-index: 1;
+    }
+
+    .msg-row {
+      max-width: 760px;
+      margin: 0 auto 28px;
+      padding: 0 28px;
+    }
+
+    .msg-question { display: flex; justify-content: flex-end; }
+    .msg-question .bubble {
+      background: linear-gradient(135deg, #1e2480, #2a1b6e);
+      border: 1px solid rgba(109,133,255,0.3);
+      border-radius: 18px 18px 4px 18px;
+      padding: 14px 18px;
+      max-width: 72%;
+      font-size: 14px;
+      line-height: 1.6;
+      box-shadow: 0 2px 16px rgba(109,133,255,0.12);
+    }
+
+    .msg-question .meta {
+      text-align: right;
+      font-size: 11px;
+      color: var(--text-dim);
+      margin-top: 5px;
+      font-family: var(--mono);
+    }
+
+    .msg-answer {
+      display: flex;
+      gap: 12px;
+      align-items: flex-start;
+    }
+
+    .answer-avatar {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, #1e4d38, #16513a);
+      border: 1px solid rgba(52,211,153,0.3);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+
+    .answer-body { flex: 1; min-width: 0; }
+
+    .answer-bubble {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: 4px 18px 18px 18px;
+      padding: 14px 18px;
+      font-size: 14px;
+      line-height: 1.7;
+      position: relative;
+    }
+
+    .answer-meta {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-top: 8px;
+      font-size: 11px;
+      color: var(--text-dim);
+      font-family: var(--mono);
+      flex-wrap: wrap;
+    }
+
+    .vote-btn, .propose-btn, .versions-toggle, .propose-submit, .login-hf-btn {
+      background: none;
+      border: 1px solid var(--border2);
+      border-radius: 20px;
+      color: var(--text-muted);
+      font-size: 11px;
+      padding: 2px 9px;
+      cursor: pointer;
+      transition: all var(--transition);
+      font-family: var(--mono);
+    }
+
+    .vote-btn:hover, .propose-btn:hover, .versions-toggle:hover, .propose-submit:hover {
+      background: var(--human-bg);
+      border-color: var(--human);
+      color: var(--human);
+    }
+
+    .vote-btn.voted {
+      background: var(--human-bg);
+      border-color: var(--human);
+      color: var(--human);
+    }
+
+    .versions-toggle {
+      padding: 4px 0;
+      border: none;
+      margin-top: 6px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: var(--text-dim);
+    }
+
+    .versions-panel {
+      margin-top: 10px;
+      border-left: 2px solid var(--border2);
+      padding-left: 14px;
+      display: none;
+    }
+
+    .versions-panel.open { display: block; }
+
+    .version-card {
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      padding: 12px 14px;
+      margin-bottom: 8px;
+      font-size: 13px;
+      line-height: 1.65;
+    }
+
+    .version-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      font-size: 11px;
+      color: var(--text-dim);
+      font-family: var(--mono);
+      flex-wrap: wrap;
+    }
+
+    .propose-form { display: none; margin-top: 10px; }
+    .propose-form.open { display: block; }
+
+    .propose-textarea {
+      width: 100%;
+      background: var(--surface2);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-sm);
+      color: var(--text);
+      font-family: var(--font);
+      font-size: 13px;
+      line-height: 1.6;
+      padding: 10px 13px;
+      resize: vertical;
+      min-height: 80px;
+      outline: none;
+    }
+
+    .propose-textarea:focus { border-color: var(--accent); }
+
+    #welcome {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 18px;
+      text-align: center;
+      padding: 40px;
+      pointer-events: none;
+    }
+
+    #welcome.hidden { display: none; }
+
+    .welcome-glyph {
+      font-size: 48px;
+      filter: drop-shadow(0 0 24px var(--accent-glow));
+    }
+
+    .welcome-title {
+      font-size: 26px;
+      font-weight: 600;
+      letter-spacing: -0.5px;
+      background: linear-gradient(135deg, var(--text), var(--accent));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+    }
+
+    .welcome-sub {
+      font-size: 14px;
+      color: var(--text-muted);
+      max-width: 340px;
+      line-height: 1.65;
+    }
+
+    #composer-wrap {
+      padding: 16px 24px 20px;
+      border-top: 1px solid var(--border);
+      flex-shrink: 0;
+      backdrop-filter: blur(12px);
+      background: rgba(13,15,20,0.85);
+      position: relative;
+      z-index: 2;
+    }
+
+    #composer {
+      display: flex;
+      align-items: flex-end;
+      gap: 10px;
+      background: var(--surface);
+      border: 1px solid var(--border2);
+      border-radius: 16px;
+      padding: 12px 14px 10px;
+      transition: border-color var(--transition), box-shadow var(--transition);
+    }
+
+    #composer:focus-within {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px var(--accent-glow);
+    }
+
+    #input {
+      flex: 1;
+      background: none;
+      border: none;
+      outline: none;
+      color: var(--text);
+      font-family: var(--font);
+      font-size: 14px;
+      line-height: 1.6;
+      resize: none;
+      max-height: 200px;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border2) transparent;
+    }
+
+    #input::placeholder { color: var(--text-dim); }
+
+    #send {
+      width: 36px;
+      height: 36px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      box-shadow: 0 2px 10px var(--accent-glow);
+    }
+
+    #send:hover { opacity: 0.85; }
+    #send:disabled { opacity: 0.35; cursor: not-allowed; }
+    #send svg { width: 16px; height: 16px; fill: #fff; }
+
+    .hint {
+      text-align: center;
+      font-size: 11px;
+      color: var(--text-dim);
+      font-family: var(--mono);
+      margin-top: 8px;
+    }
+
+    #toast {
+      position: fixed;
+      bottom: 90px;
+      left: 50%;
+      transform: translateX(-50%) translateY(20px);
+      background: var(--surface2);
+      border: 1px solid var(--border2);
+      border-radius: 30px;
+      padding: 9px 20px;
+      font-size: 13px;
+      color: var(--text);
+      font-family: var(--mono);
+      opacity: 0;
+      transition: opacity 250ms, transform 250ms;
+      pointer-events: none;
+      z-index: 1000;
+      white-space: nowrap;
+    }
+
+    #toast.show {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    #toast.error { border-color: var(--danger); color: var(--danger); }
+    #toast.success { border-color: var(--human); color: var(--human); }
+
+    #login-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.7);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 500;
+      backdrop-filter: blur(6px);
+    }
+
+    #login-overlay.hidden { display: none; }
+
+    .login-card {
+      background: var(--surface);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius);
+      padding: 40px 48px;
+      text-align: center;
+      max-width: 380px;
+      width: 90%;
+      box-shadow: var(--shadow);
+    }
+
+    .login-card h2 {
+      font-size: 22px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      letter-spacing: -0.3px;
+    }
+
+    .login-card p {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-bottom: 22px;
+      line-height: 1.6;
+    }
+
+    .login-row {
+      display: flex;
+      gap: 10px;
+      flex-direction: column;
+    }
+
+    .login-input {
+      width: 100%;
+      background: var(--surface2);
+      border: 1px solid var(--border2);
+      border-radius: var(--radius-sm);
+      color: var(--text);
+      font-family: var(--font);
+      font-size: 14px;
+      padding: 11px 13px;
+      outline: none;
+    }
+
+    .login-input:focus { border-color: var(--accent); }
+
+    .login-hf-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      padding: 12px 24px;
+      background: #ff9d00;
+      border: none;
+      border-radius: var(--radius-sm);
+      color: #000;
+      font-size: 14px;
+      font-weight: 600;
+      text-decoration: none;
+    }
+
+    .spacer { height: 8px; }
+
+    @media (max-width: 680px) {
+      #sidebar { width: 60px; min-width: 60px; }
+      #sidebar-header .text, .thread-title, .thread-meta, #user-bar .user-name, #user-bar .user-status { display: none; }
+      #new-chat-btn span { display: none; }
+      .msg-row { padding: 0 12px; }
+    }
+  </style>
+</head>
+<body>
+  <div id="login-overlay">
+    <div class="login-card">
+      <div style="font-size:36px;margin-bottom:12px">🧠</div>
+      <h2>Human Intelligence</h2>
+      <p>Real people write answers. Versions are voted, and the best version is shown first.</p>
+      <div class="login-row">
+        <input id="username" class="login-input" placeholder="Your name" />
+        <button class="login-hf-btn" id="set-username-btn">Enter</button>
+      </div>
+      <div class="spacer"></div>
+      <p style="margin-bottom:12px;">This demo uses a local username. Replace it with your auth later.</p>
+    </div>
+  </div>
+
+  <div id="app">
+    <div id="sidebar">
+      <div id="sidebar-header">
+        <div id="logo">
+          <div class="icon">🧠</div>
+          <div class="text">Human <span>Intelligence</span></div>
+        </div>
+        <button id="new-chat-btn">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          <span>New question</span>
+        </button>
+      </div>
+
+      <div id="thread-list"></div>
+
+      <div id="user-bar">
+        <div class="avatar" id="avatar">?</div>
+        <div>
+          <div class="user-name" id="user-name">Guest</div>
+          <div class="user-status" id="user-status">not signed in</div>
+        </div>
+      </div>
+    </div>
+
+    <div id="main">
+      <div id="toolbar">
+        <div id="thread-title">Human Intelligence</div>
+        <div id="appearance-wrap">
+          <span class="appearance-label">appearance</span>
+          <select id="appearance-select">
+            <option value="none">None</option>
+            <option value="ai">AI typing</option>
+            <option value="human">Human typing</option>
+            <option value="diffusion">Diffusion</option>
+          </select>
+        </div>
+      </div>
+
+      <div id="messages"></div>
+
+      <div id="welcome">
+        <div class="welcome-glyph">🧠</div>
+        <div class="welcome-title">Ask a human anything</div>
+        <div class="welcome-sub">
+          Start a new question or pick a conversation from the left.
+          Real people answer — voted, versioned, and honest.
+        </div>
+      </div>
+
+      <div id="composer-wrap">
+        <div id="composer">
+          <textarea id="input" rows="1" placeholder="Ask a question…"></textarea>
+          <button id="send">
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M22 2L11 13M22 2L15 22 11 13 2 9l20-7z"></path>
+            </svg>
+          </button>
+        </div>
+        <div class="hint">A human expert will answer · Press Enter to send · Shift+Enter for newline</div>
+      </div>
+    </div>
+  </div>
+
+  <div id="toast"></div>
+
+  <script>
+    window.__HI_INIT__ = {{ init_json | safe }};
+  </script>
+
+  <script>
+  (() => {
+    const S = {
+      activeThread: null,
+      appearance: 'none',
+      username: null,
+    };
+
+    const el = (id) => document.getElementById(id);
+
+    function toast(msg, type='') {
+      const t = el('toast');
+      if (!t) return;
+      t.textContent = msg;
+      t.className = 'show ' + type;
+      clearTimeout(t._t);
+      t._t = setTimeout(() => { t.className = ''; }, 2600);
+    }
+
+    function escHtml(s) {
+      return String(s)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/\\n/g, '<br>');
+    }
+
+    function fmtDate(iso) {
+      try {
+        return new Date(iso).toLocaleString([], {
+          month: 'short',
+          day: 'numeric',
+          hour: '2-digit',
+          minute: '2-digit',
+        });
+      } catch {
+        return '';
+      }
+    }
+
+    function autoGrow(node) {
+      node.style.height = 'auto';
+      node.style.height = Math.min(node.scrollHeight, 200) + 'px';
+    }
+
+    function scrollToBottom() {
+      const m = el('messages');
+      if (m) m.scrollTop = m.scrollHeight;
+    }
+
+    function setIdentity(name) {
+      const username = (name || '').trim();
+      if (!username) return;
+
+      S.username = username;
+      localStorage.setItem('hi_username', username);
+
+      el('user-name').textContent = username;
+      el('user-status').textContent = 'signed in';
+      el('avatar').textContent = username[0].toUpperCase();
+
+      const overlay = el('login-overlay');
+      if (overlay) overlay.classList.add('hidden');
+
+      fetchInit();
+    }
+
+    function applyAppearance(node) {
+      if (!node) return;
+      const mode = S.appearance;
+      node.classList.remove('typing-cursor', 'diffuse-reveal');
+
+      if (mode === 'diffusion') {
+        node.classList.add('diffuse-reveal');
+        return;
+      }
+
+      if (mode === 'ai' || mode === 'human') {
+        const source = node.innerHTML;
+        node.innerHTML = '';
+        node.classList.add('typing-cursor');
+
+        const chunks = mode === 'ai'
+          ? [...source]
+          : source.split(/(\\s+|<br>)/);
+
+        let i = 0;
+        const tick = () => {
+          if (i < chunks.length) {
+            node.innerHTML += chunks[i++];
+            setTimeout(tick, mode === 'ai' ? 18 + Math.random() * 10 : 60 + Math.random() * 90);
+          } else {
+            node.classList.remove('typing-cursor');
+          }
+        };
+        tick();
+      }
+    }
+
+    function renderThreadList(threads) {
+      const list = el('thread-list');
+      if (!list) return;
+
+      list.innerHTML = '';
+      if (!threads || !threads.length) {
+        list.innerHTML = '<div style="padding:16px 12px;font-size:12px;color:var(--text-dim);font-family:var(--mono);">No conversations yet</div>';
+        return;
+      }
+
+      threads.forEach(t => {
+        const div = document.createElement('div');
+        div.className = 'thread-item' + (S.activeThread && S.activeThread.id === t.id ? ' active' : '');
+        div.dataset.id = t.id;
+        div.innerHTML = `
+          <div class="thread-title">${escHtml(t.title)}</div>
+          <div class="thread-meta">${t.reply_count} answers · ${fmtDate(t.created_at)}</div>
+        `;
+        div.addEventListener('click', () => loadThread(t.id));
+        list.appendChild(div);
+      });
+    }
+
+    function buildAnswerRow(msg) {
+      const av = msg.versions.find(v => v.id === msg.active_version) || msg.versions[0];
+      if (!av) return '';
+
+      const hasOthers = msg.versions.length > 1;
+      const othersHTML = hasOthers
+        ? msg.versions
+            .filter(v => v.id !== av.id)
+            .map(v => `
+              <div class="version-card">
+                <div class="version-header">
+                  <span>${escHtml(v.author)}</span>
+                  <span>${fmtDate(v.created_at)}</span>
+                  <span>▲ ${v.votes}</span>
+                  <button class="vote-btn${v.voters && v.voters.includes(S.username) ? ' voted' : ''}"
+                          onclick="voteVersion('${msg.id}', '${v.id}', this)">▲ Upvote</button>
+                </div>
+                <div>${escHtml(v.text)}</div>
+              </div>
+            `).join('')
+        : '';
+
+      const versionsSection = hasOthers
+        ? `
+          <button class="versions-toggle" onclick="toggleVersions(this)">
+            <span class="arrow">▶</span> ${msg.versions.length - 1} other version${msg.versions.length > 2 ? 's' : ''}
+          </button>
+          <div class="versions-panel">${othersHTML}</div>
+        `
+        : '';
+
+      return `
+        <div class="msg-row" data-msg-id="${msg.id}">
+          <div class="msg-answer">
+            <div class="answer-avatar">🧑</div>
+            <div class="answer-body">
+              <div class="answer-bubble" id="bubble-${msg.id}">
+                <div class="answer-text" id="atext-${msg.id}">${escHtml(av.text)}</div>
+              </div>
+              <div class="answer-meta">
+                <span>${escHtml(av.author)}</span>
+                <span>${fmtDate(av.created_at)}</span>
+                <button class="vote-btn${av.voters && av.voters.includes(S.username) ? ' voted' : ''}"
+                        onclick="voteVersion('${msg.id}', '${av.id}', this)">▲ ${av.votes}</button>
+                <button class="propose-btn" onclick="togglePropose('${msg.id}', this)">✏ Propose edit</button>
+              </div>
+              ${versionsSection}
+              <div class="propose-form" id="propose-${msg.id}">
+                <textarea class="propose-textarea" placeholder="Propose an improved answer…"></textarea>
+                <button class="propose-submit" onclick="submitPropose('${msg.id}', this)">Submit version</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+    }
+
+    function renderThread(thread) {
+      S.activeThread = thread;
+      el('welcome').classList.add('hidden');
+      el('thread-title').textContent = thread.question;
+
+      const area = el('messages');
+      area.innerHTML = '';
+
+      const qRow = document.createElement('div');
+      qRow.className = 'msg-row';
+      qRow.innerHTML = `
+        <div class="msg-question">
+          <div>
+            <div class="bubble">${escHtml(thread.question)}</div>
+            <div class="meta">${escHtml(thread.author)} · ${fmtDate(thread.created_at)}</div>
+          </div>
+        </div>
+      `;
+      area.appendChild(qRow);
+
+      (thread.messages || []).forEach(msg => {
+        const wrap = document.createElement('div');
+        wrap.innerHTML = buildAnswerRow(msg);
+        area.appendChild(wrap.firstElementChild);
+      });
+
+      document.querySelectorAll('.thread-item').forEach(node => {
+        node.classList.toggle('active', node.dataset.id === thread.id);
+      });
+
+      scrollToBottom();
+    }
+
+    async function callBackend(action, payload={}) {
+      const username = S.username || localStorage.getItem('hi_username') || '';
+      const body = { action, username, ...payload };
+
+      const resp = await fetch('/api', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-User': username,
+        },
+        body: JSON.stringify(body),
+      });
+
+      return await resp.json();
+    }
+
+    async function fetchInit() {
+      const res = await callBackend('init', {});
+      if (res.ok) {
+        S.username = res.username || S.username || localStorage.getItem('hi_username') || null;
+        renderThreadList(res.threads || []);
+
+        if (S.username && S.username !== 'Guest') {
+          el('user-name').textContent = S.username;
+          el('user-status').textContent = 'signed in';
+          el('avatar').textContent = S.username[0].toUpperCase();
+          el('login-overlay').classList.add('hidden');
+        }
+      }
+    }
+
+    async function loadThread(tid) {
+      const res = await callBackend('get_thread', { thread_id: tid });
+      if (res.ok && res.thread) {
+        renderThread(res.thread);
+      } else {
+        toast('Could not load thread', 'error');
+      }
+    }
+
+    async function startNewChat() {
+      S.activeThread = null;
+      document.querySelectorAll('.thread-item').forEach(elm => elm.classList.remove('active'));
+      el('thread-title').textContent = 'New conversation';
+      el('messages').innerHTML = '';
+      el('welcome').classList.remove('hidden');
+      el('input').placeholder = 'Ask a question…';
+      el('input').focus();
+    }
+
+    window.toggleVersions = function(btn) {
+      const panel = btn.nextElementSibling;
+      btn.classList.toggle('open');
+      if (panel) panel.classList.toggle('open');
+    };
+
+    window.togglePropose = function(msgId, btn) {
+      const form = document.getElementById('propose-' + msgId);
+      if (form) form.classList.toggle('open');
+    };
+
+    window.voteVersion = async function(msgId, versionId, btn) {
+      if (!S.username) { toast('Sign in to vote', 'error'); return; }
+      if (!S.activeThread) return;
+      if (btn.classList.contains('voted')) { toast('Already voted'); return; }
+
+      const res = await callBackend('vote', {
+        thread_id: S.activeThread.id,
+        msg_id: msgId,
+        version_id: versionId,
+      });
+
+      if (res.ok) {
+        S.activeThread = res.thread;
+        renderThread(res.thread);
+        toast('Voted!', 'success');
+      } else {
+        toast(res.error || 'Error', 'error');
+      }
+    };
+
+    window.submitPropose = async function(msgId, btn) {
+      if (!S.username) { toast('Sign in first', 'error'); return; }
+      if (!S.activeThread) return;
+
+      const form = document.getElementById('propose-' + msgId);
+      const ta = form ? form.querySelector('textarea') : null;
+      const text = ta ? ta.value.trim() : '';
+      if (!text) { toast('Empty proposal', 'error'); return; }
+
+      btn.disabled = true;
+      btn.textContent = 'Submitting…';
+
+      const res = await callBackend('propose', {
+        thread_id: S.activeThread.id,
+        msg_id: msgId,
+        text,
+      });
+
+      btn.disabled = false;
+      btn.textContent = 'Submit version';
+
+      if (res.ok) {
+        S.activeThread = res.thread;
+        renderThread(res.thread);
+        if (form) form.classList.remove('open');
+        if (ta) ta.value = '';
+        toast('Version proposed!', 'success');
+      } else {
+        toast(res.error || 'Error', 'error');
+      }
+    };
+
+    async function sendMessage() {
+      if (!S.username) { toast('Enter a username first', 'error'); return; }
+
+      const input = el('input');
+      const text = input.value.trim();
+      if (!text) return;
+
+      input.value = '';
+      autoGrow(input);
+
+      const sendBtn = el('send');
+      sendBtn.disabled = true;
+
+      if (!S.activeThread) {
+        const res = await callBackend('new_thread', { question: text });
+        sendBtn.disabled = false;
+        if (res.ok) {
+          S.activeThread = res.thread;
+          const listRes = await callBackend('list_threads', {});
+          if (listRes.ok) renderThreadList(listRes.threads);
+          renderThread(res.thread);
+          if (res.similar) toast('Similar thread exists', '');
+        } else {
+          toast(res.error || 'Error', 'error');
+        }
+      } else {
+        const res = await callBackend('add_answer', {
+          thread_id: S.activeThread.id,
+          text,
+        });
+        sendBtn.disabled = false;
+        if (res.ok) {
+          S.activeThread = res.thread;
+          const msgs = res.thread.messages;
+          const lastMsg = msgs[msgs.length - 1];
+          const area = el('messages');
+          const wrap = document.createElement('div');
+          wrap.innerHTML = buildAnswerRow(lastMsg);
+          const row = wrap.firstElementChild;
+          area.appendChild(row);
+
+          const textEl = row.querySelector('.answer-text');
+          applyAppearance(textEl);
+
+          const listRes = await callBackend('list_threads', {});
+          if (listRes.ok) renderThreadList(listRes.threads);
+
+          scrollToBottom();
+          toast('Answer posted!', 'success');
+        } else {
+          toast(res.error || 'Error', 'error');
+        }
+      }
+    }
+
+    function initEvents() {
+      el('set-username-btn').addEventListener('click', () => {
+        setIdentity(el('username').value);
+      });
+
+      el('username').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') setIdentity(e.target.value);
+      });
+
+      el('new-chat-btn').addEventListener('click', startNewChat);
+
+      el('appearance-select').addEventListener('change', (e) => {
+        S.appearance = e.target.value;
+      });
+
+      const input = el('input');
+      input.addEventListener('input', () => autoGrow(input));
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          sendMessage();
+        }
+      });
+
+      el('send').addEventListener('click', sendMessage);
+
+      const stored = localStorage.getItem('hi_username');
+      if (stored && stored.trim()) {
+        setIdentity(stored);
+      } else {
+        el('username').focus();
+      }
+    }
+
+    function boot() {
+      const init = window.__HI_INIT__ || {};
+      if (init.username && init.username !== 'Guest') {
+        S.username = init.username;
+        localStorage.setItem('hi_username', init.username);
+        el('user-name').textContent = init.username;
+        el('user-status').textContent = 'signed in';
+        el('avatar').textContent = init.username[0].toUpperCase();
+        el('login-overlay').classList.add('hidden');
+      }
+      renderThreadList(init.threads || []);
+      initEvents();
+    }
+
+    boot();
+  })();
+  </script>
+</body>
+</html>