Upload 5 files

app.py

@@ -0,0 +1,261 @@
+#!/usr/bin/env python3
+"""
+Qwen3 Coder – FastAPI server (OpenAI-compatible /v1/chat/completions)
+
+Refaktorováno do čisté, přehledné struktury a sloučeno s konfigurací z config.py.
+- Konfigurace přes env s rozumnými defaulty (viz třída AppConfig)
+- Deterministické načítání modelu/tokenizeru s volitelným prewarm přes snapshot_download
+- Oddělené sekce: konfigurace, model, API schémata, routy
+"""
+
+from __future__ import annotations
+
+import os
+import time
+import logging
+from dataclasses import dataclass
+from typing import List, Optional, Dict, Any
+
+import torch
+from fastapi import FastAPI
+from fastapi.responses import FileResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from transformers import AutoTokenizer, AutoModelForCausalLM
+
+# =============================
+# Konfigurace
+# =============================
+
+@dataclass(frozen=True)
+class AppConfig:
+    """Aplikační konfigurace s env fallbacky.
+
+    Default hodnoty vycházejí z původního config.py:
+      - APP_NAME = "Qwen3 Coder"
+      - APP_LANG = "en"
+      - MODEL_ID = "Qwen/Qwen3-Coder-30B-A3B-Instruct"
+      - MODEL_ALIAS = "qwen3"
+      - PERSISTENT_DIR = "data"
+    Navíc:
+      - SNAPSHOT_DOWNLOAD ("1" / "0")
+      - PORT (výchozí 7860)
+    """
+
+    app_name: str
+    app_lang: str
+    model_id: str
+    model_alias: str
+    persistent_dir: str
+    snapshot_download: bool
+    port: int
+
+
+def _env(key: str, default: Optional[str] = None) -> str:
+    v = os.getenv(key)
+    return v if v is not None else (default or "")
+
+
+def make_config() -> AppConfig:
+    # Podpora obou názvů proměnných kvůli zpětné kompatibilitě: PERSISTENT_HOME i PERSISTENT_DIR
+    persistent_dir = (
+        os.getenv("PERSISTENT_HOME")
+        or os.getenv("PERSISTENT_DIR")
+        or "data"  # default z config.py
+    )
+
+    return AppConfig(
+        app_name=_env("APP_NAME", "Qwen3 Coder"),
+        app_lang=_env("APP_LANG", "en"),
+        model_id=_env("MODEL_ID", "Qwen/Qwen3-Coder-30B-A3B-Instruct"),
+        model_alias=_env("MODEL_ALIAS", "qwen3"),
+        persistent_dir=persistent_dir,
+        snapshot_download=_env("SNAPSHOT_DOWNLOAD", "0") == "1",
+        port=int(_env("PORT", "7860") or 7860),
+    )
+
+
+CONFIG: AppConfig = make_config()
+
+# Logování
+logging.basicConfig(level=logging.INFO, format="[%(levelname)s] %(message)s")
+LOGGER = logging.getLogger("qwen3-coder")
+
+# Absolutní cesty
+PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
+FRONTEND_DIR = os.path.join(PROJECT_DIR, "app")
+CACHE_DIR = os.path.abspath(CONFIG.persistent_dir)
+os.makedirs(CACHE_DIR, exist_ok=True)
+
+# =============================
+# Načtení modelu a tokenizeru
+# =============================
+
+DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+
+
+def maybe_snapshot_download(model_id: str, cache_dir: str, enabled: bool) -> None:
+    """Volitelně stáhne snapshot modelu do cache (prewarm)."""
+    if not enabled:
+        return
+    try:
+        from huggingface_hub import snapshot_download  # import on-demand
+
+        LOGGER.info("Prewarming model cache via snapshot_download …")
+        snapshot_download(repo_id=model_id, cache_dir=cache_dir, local_files_only=False)
+        LOGGER.info("Snapshot download completed")
+    except Exception as e:
+        LOGGER.warning("snapshot_download failed: %s", e)
+
+
+def load_models(model_id: str, cache_dir: str):
+    """Načte tokenizer a model. U 30B variant vyžaduje výkonné GPU; CPU je velmi pomalé."""
+    LOGGER.info("Loading tokenizer '%s' (cache: %s)", model_id, cache_dir)
+    tokenizer = AutoTokenizer.from_pretrained(
+        model_id,
+        cache_dir=cache_dir,
+        trust_remote_code=True,
+    )
+
+    LOGGER.info("Loading model '%s' on device=%s", model_id, DEVICE)
+    model = AutoModelForCausalLM.from_pretrained(
+        model_id,
+        cache_dir=cache_dir,
+        device_map="auto" if DEVICE == "cuda" else None,
+        torch_dtype=(torch.float16 if DEVICE == "cuda" else torch.float32),
+        trust_remote_code=True,
+    )
+    if DEVICE != "cuda":
+        model.to(DEVICE)
+    model.eval()
+
+    return tokenizer, model
+
+
+# Prewarm (volitelně)
+maybe_snapshot_download(CONFIG.model_id, CACHE_DIR, CONFIG.snapshot_download)
+
+# Načtení modelu/tokenizeru (synchronně při startu – zachováno jako původní chování)
+TOKENIZER, MODEL = load_models(CONFIG.model_id, CACHE_DIR)
+
+# =============================
+# API schémata (OpenAI-compatible)
+# =============================
+
+class Message(BaseModel):
+    role: str  # "system" | "user" | "assistant"
+    content: str
+
+
+class ChatCompletionsRequest(BaseModel):
+    model: Optional[str] = None
+    messages: List[Message]
+    temperature: Optional[float] = 0.2
+    top_p: Optional[float] = 0.95
+    max_tokens: Optional[int] = 1024
+    stream: Optional[bool] = False  # stream není implementován
+    stop: Optional[List[str]] = None
+
+
+# =============================
+# FastAPI aplikace a routy
+# =============================
+
+app = FastAPI(title=f"{CONFIG.app_name} ({CONFIG.model_alias})")
+
+# Statické soubory a frontend ve složce ./app
+if os.path.isdir(FRONTEND_DIR):
+    app.mount("/app", StaticFiles(directory=FRONTEND_DIR), name="app")
+
+
+@app.get("/", response_class=HTMLResponse)
+def serve_index():
+    """Vrátí app/index.html, pokud existuje; jinak zobrazí jednoduché info."""
+    index_path = os.path.join(FRONTEND_DIR, "index.html")
+    if os.path.exists(index_path):
+        return FileResponse(index_path)
+    return HTMLResponse(
+        """
+        <h1>Qwen3 Coder</h1>
+        <p>Vlož prosím frontend do složky <code>/app</code> (soubor <code>index.html</code>).</p>
+        """,
+        status_code=200,
+    )
+
+
+@app.get("/healthz")
+def healthz() -> Dict[str, Any]:
+    return {
+        "ok": True,
+        "app_name": CONFIG.app_name,
+        "lang": CONFIG.app_lang,
+        "model": CONFIG.model_id,
+        "alias": CONFIG.model_alias,
+        "device": DEVICE,
+        "cache_dir": CACHE_DIR,
+    }
+
+
+@app.get("/v1/models")
+def list_models():
+    return {"object": "list", "data": [{"id": CONFIG.model_id, "object": "model"}]}
+
+
+@app.post("/v1/chat/completions")
+def chat_completions(req: ChatCompletionsRequest):
+    """OpenAI-compatible Chat Completions (bez streamu)."""
+    # Převod zpráv na formát očekávaný chat šablonou
+    msgs = [{"role": m.role, "content": m.content} for m in req.messages]
+
+    input_ids = TOKENIZER.apply_chat_template(
+        msgs,
+        tokenize=True,
+        add_generation_prompt=True,
+        return_tensors="pt",
+    ).to(MODEL.device)
+
+    outputs = MODEL.generate(
+        input_ids=input_ids,
+        max_new_tokens=req.max_tokens or 1024,
+        do_sample=(req.temperature or 0) > 0,
+        temperature=req.temperature or 0.2,
+        top_p=req.top_p or 0.95,
+        pad_token_id=TOKENIZER.eos_token_id,
+        eos_token_id=TOKENIZER.eos_token_id,
+        use_cache=True,
+    )
+
+    # Nově vygenerovaná část za promptem
+    gen_ids = outputs[0][input_ids.shape[-1] :]
+    text = TOKENIZER.decode(gen_ids, skip_special_tokens=True).strip()
+
+    now = int(time.time())
+    usage = {
+        "prompt_tokens": int(input_ids.numel()),
+        "completion_tokens": int(gen_ids.numel()),
+        "total_tokens": int(input_ids.numel() + gen_ids.numel()),
+    }
+
+    return {
+        "id": f"chatcmpl-{now}",
+        "object": "chat.completion",
+        "created": now,
+        "model": req.model or CONFIG.model_id,
+        "choices": [
+            {
+                "index": 0,
+                "message": {"role": "assistant", "content": text},
+                "finish_reason": "stop",
+            }
+        ],
+        "usage": usage,
+    }
+
+
+# =============================
+# Lokální běh (HF Spaces spouští automaticky)
+# =============================
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run(app, host="0.0.0.0", port=CONFIG.port)

app/index.html

@@ -0,0 +1,151 @@
+<!doctype html>
+<html lang="en" class="h-full scroll-smooth">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>Minimal AI Chat — Tailwind</title>
+
+    <!-- Tailwind Play CDN (compatible with Tailwind v3/v4 classes) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+
+  <body class="min-h-dvh bg-neutral-50 text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100">
+    <!-- App Shell -->
+    <div class="grid grid-rows-[auto,1fr,auto] min-h-dvh">
+      <!-- Header -->
+      <header class="sticky top-0 z-40 backdrop-blur supports-[backdrop-filter]:bg-white/60 dark:supports-[backdrop-filter]:bg-neutral-900/60 bg-white/90 dark:bg-neutral-90/90 border-b border-neutral-200/70 dark:border-neutral-800/70">
+        <div class="mx-auto max-w-3xl px-4 sm:px-6 pt-safe">
+          <div class="flex items-center justify-between pb-3 gap-3">
+            <div class="flex items-center gap-3 min-w-0">
+              <div class="size-7 rounded-xl grid place-items-center bg-neutral-900 text-white dark:bg-white dark:text-neutral-900 shadow-soft">
+                <!-- Dot logo -->
+                <svg viewBox="0 0 24 24" class="size-4" fill="currentColor" aria-hidden="true"><circle cx="12" cy="12" r="7"/></svg>
+              </div>
+              <div class="truncate">
+                <h1 class="text-sm font-medium tracking-tight text-neutral-900 dark:text-neutral-100">Minimal AI Chat</h1>
+                <p class="text-xs text-neutral-500 dark:text-neutral-400 truncate">OriginUI‑inspired · Light / Dark</p>
+              </div>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <!-- New chat -->
+              <button id="newChatBtn" class="hidden sm:inline-flex items-center gap-2 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-3 py-2 text-xs font-medium shadow-soft hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="New chat">
+                <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+                New
+              </button>
+
+              <!-- Theme toggle -->
+              <button id="themeToggle" class="inline-flex items-center justify-center rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 size-9 shadow-soft hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="Toggle theme">
+                <svg id="iconSun" class="size-4 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
+                <svg id="iconMoon" class="size-4 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <!-- Messages -->
+      <main id="scrollArea" class="no-scrollbar overflow-y-auto">
+        <div class="mx-auto max-w-3xl w-full px-4 sm:px-6 py-4 sm:py-6 pb-40">
+          <!-- Tip / examples card -->
+          <section class="mb-4 sm:mb-6">
+            <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white/70 dark:bg-neutral-900/70 backdrop-blur p-4 sm:p-5 shadow-soft">
+              <div class="flex items-start gap-3">
+                <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 dark:bg-neutral-800">
+                  <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
+                </div>
+                <div class="text-sm leading-6 text-neutral-700 dark:text-neutral-300">
+                  <p class="font-medium text-neutral-900 dark:text-neutral-100">Try prompts</p>
+                  <ul class="mt-1 list-disc pl-5 space-y-1">
+                    <li>"Summarize this text in 3 bullet points."</li>
+                    <li>"Explain quantum tunneling like I'm 12."</li>
+                    <li>"Draft a polite email declining a meeting."</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <div id="messages" class="space-y-3 sm:space-y-4">
+            <!-- Assistant message (sample) -->
+            <article class="group">
+              <div class="flex items-start gap-3">
+                <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
+                  <!-- Bot icon -->
+                  <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
+                </div>
+                <div class="max-w-[80ch] w-full">
+                  <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
+                    <p class="text-sm leading-7">Hi! I’m your AI assistant. Ask me anything — your messages will appear here, and I’ll reply below. This UI is built with Tailwind and inspired by OriginUI’s clean, minimal aesthetic.</p>
+                  </div>
+                </div>
+              </div>
+            </article>
+
+            <!-- User message (sample) -->
+            <article class="group">
+              <div class="flex items-start gap-3 justify-end">
+                <div class="max-w-[80ch] w-full">
+                  <div class="rounded-2xl border border-neutral-200 bg-neutral-900 text-neutral-50 dark:bg-white dark:text-neutral-900 p-4 shadow-soft">
+                    <p class="text-sm leading-7">Give me a short productivity tip.</p>
+                  </div>
+                </div>
+              </div>
+            </article>
+
+            <!-- Assistant message (sample) -->
+            <article class="group">
+              <div class="flex items-start gap-3">
+                <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
+                  <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
+                </div>
+                <div class="max-w-[80ch] w-full">
+                  <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
+                    <ul class="text-sm leading-7 list-disc pl-5 space-y-1">
+                      <li>Time‑box tasks to 25 minutes.</li>
+                      <li>Mute non‑urgent notifications.</li>
+                      <li>Write the next step before you stop.</li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </main>
+
+      <!-- Composer -->
+      <footer class="fixed bottom-0 inset-x-0 z-40">
+        <div class="pointer-events-none bg-gradient-to-t from-white/95 to-white/0 dark:from-neutral-950/95 dark:to-neutral-950/0">
+          <div class="mx-auto max-w-3xl px-4 sm:px-6 pb-safe">
+            <form id="composer" class="pointer-events-auto" autocomplete="off">
+              <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 shadow-soft p-2 sm:p-2.5">
+                <div class="flex items-end gap-2">
+                  <button type="button" id="attachBtn" class="shrink-0 grid place-items-center size-9 rounded-xl border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="Attach">
+                    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21.44 11.05l-8.49 8.49a5 5 0 1 1-7.07-7.07l9.19-9.19a3.5 3.5 0 0 1 4.95 4.95l-9.19 9.19a2 2 0 1 1-2.83-2.83l8.49-8.49"/></svg>
+                  </button>
+
+                  <textarea id="input" rows="1" placeholder="Message…" class="flex-1 resize-none bg-transparent focus:outline-none placeholder:text-neutral-400 text-sm leading-6 max-h-40 p-2"></textarea>
+
+                  <div class="flex items-center gap-2">
+                    <button type="button" id="queueBtn" class="hidden sm:grid place-items-center size-9 rounded-xl border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition" aria-label="Add to queue">
+                      <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M3 12h12M3 18h6"/></svg>
+                    </button>
+
+                    <button type="submit" class="grid place-items-center size-9 rounded-xl bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-white dark:text-neutral-900 dark:hover:bg-neutral-200 transition" aria-label="Send">
+                      <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+            <p class="pointer-events-auto mt-2 text-[11px] text-neutral-500 dark:text-neutral-400 text-center">This is a static UI. Wire it to your API to make it talk.</p>
+          </div>
+        </div>
+      </footer>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>

app/script.js

@@ -0,0 +1,125 @@
+// ---- Theme: auto + toggle ----
+const root = document.documentElement;
+const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+const savedTheme = localStorage.getItem('theme');
+const isDark = () => root.classList.contains('dark');
+
+function applyTheme(theme) {
+  if (theme === 'dark' || (theme === 'auto' && prefersDark.matches)) {
+    root.classList.add('dark');
+  } else {
+    root.classList.remove('dark');
+  }
+  updateThemeIcon();
+}
+
+function updateThemeIcon () {
+  const sun = document.getElementById('iconSun');
+  const moon = document.getElementById('iconMoon');
+  if (isDark()) { moon.classList.add('hidden'); sun.classList.remove('hidden'); }
+  else { sun.classList.add('hidden'); moon.classList.remove('hidden'); }
+}
+
+applyTheme(savedTheme || 'auto');
+prefersDark.addEventListener('change', () => applyTheme(localStorage.getItem('theme') || 'auto'));
+document.getElementById('themeToggle').addEventListener('click', () => {
+  const next = isDark() ? 'light' : 'dark';
+  localStorage.setItem('theme', next);
+  applyTheme(next);
+});
+
+// ---- Composer logic (static demo) ----
+const form = document.getElementById('composer');
+const input = document.getElementById('input');
+const messages = document.getElementById('messages');
+const scrollArea = document.getElementById('scrollArea');
+
+function autoResizeTextarea(el) {
+  el.style.height = '0px';
+  const h = Math.min(el.scrollHeight, 320);
+  el.style.height = h + 'px';
+}
+input.addEventListener('input', () => autoResizeTextarea(input));
+autoResizeTextarea(input);
+
+function scrollToBottom() {
+  requestAnimationFrame(() => scrollArea.scrollTo({ top: scrollArea.scrollHeight, behavior: 'smooth' }));
+}
+
+function bubble({ role, html }) {
+  const wrapper = document.createElement('article');
+  wrapper.className = 'group';
+  if (role === 'user') {
+    wrapper.innerHTML = `
+      <div class="flex items-start gap-3 justify-end">
+        <div class="max-w-[80ch] w-full">
+          <div class="rounded-2xl border border-neutral-200 bg-neutral-900 text-neutral-50 dark:bg-white dark:text-neutral-900 p-4 shadow-soft">
+            <div class="text-sm leading-7">${html}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  } else {
+    wrapper.innerHTML = `
+      <div class="flex items-start gap-3">
+        <div class="shrink-0 size-7 rounded-lg grid place-items-center bg-neutral-100 text-neutral-600 dark:bg-neutral-800 dark:text-neutral-300">
+          <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="8" width="18" height="10" rx="2"/><path d="M8 8V6a4 4 0 1 1 8 0v2"/><circle cx="8" cy="13" r="1"/><circle cx="16" cy="13" r="1"/></svg>
+        </div>
+        <div class="max-w-[80ch] w-full">
+          <div class="rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 p-4 shadow-soft">
+            <div class="text-sm leading-7">${html}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  return wrapper;
+}
+
+function fakeAssistantResponse(prompt) {
+  // Very small, friendly canned reply to prove UI flow.
+  const ideas = [
+    'Noted! You can connect this UI to your backend by POSTing messages to your API and streaming token updates into the last assistant bubble.',
+    'Tip: Press Ctrl/Cmd + Enter to send quickly.',
+    'You can store theme preference in localStorage (already done here).',
+    'OriginUI vibes achieved with soft borders, neutral palette and subtle shadows.'
+  ];
+  const pick = ideas[Math.floor(Math.random() * ideas.length)];
+  return `You said: <em>${prompt.replace(/</g,'<')}</em><br/>${pick}`;
+}
+
+form.addEventListener('submit', (e) => {
+  e.preventDefault();
+  const text = input.value.trim();
+  if (!text) return;
+
+  messages.appendChild(bubble({ role: 'user', html: text.replace(/</g,'<') }));
+  input.value = '';
+  autoResizeTextarea(input);
+  scrollToBottom();
+
+  const typing = bubble({ role: 'assistant', html: '<span class=\'inline-flex items-center gap-2\'><span class=\'size-2 rounded-full bg-current animate-pulse\'></span><span class=\'text-neutral-500 dark:text-neutral-400\'>Thinking…</span></span>' });
+  messages.appendChild(typing);
+  scrollToBottom();
+
+  setTimeout(() => {
+    typing.remove();
+    messages.appendChild(bubble({ role: 'assistant', html: fakeAssistantResponse(text) }));
+    scrollToBottom();
+  }, 550);
+});
+
+// Keyboard shortcut: Cmd/Ctrl+Enter to send
+input.addEventListener('keydown', (e) => {
+  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+    form.requestSubmit();
+  }
+});
+
+// New chat clears messages (keeps tips)
+document.getElementById('newChatBtn')?.addEventListener('click', () => {
+  const items = [...messages.querySelectorAll('article')];
+  // Keep only the very first assistant tip block (index 0..2 are demo). Remove others.
+  items.slice(3).forEach(n => n.remove());
+  scrollArea.scrollTo({ top: 0, behavior: 'smooth' });
+});

app/styles.css

@@ -0,0 +1,8 @@
+/* Respect iOS notch / safe-area on mobile */
+.pb-safe { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
+.pt-safe { padding-top: max(0.75rem, env(safe-area-inset-top)); }
+/* Hide scrollbar on WebKit (messages list looks cleaner) */
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+/* Smooth textarea autoresize transitions */
+textarea { transition: height 120ms ease; }

requirements.txt

@@ -0,0 +1,8 @@
+fastapi==0.116.1
+uvicorn==0.35.0
+transformers>=4.55.3
+torch==2.4.0
+accelerate>=0.33.0
+einops
+safetensors
+# bitsandbytes>=0.43.1   # jen pokud chceš 4-bit kvantizaci