Upload folder using huggingface_hub

README.md

@@ -1,13 +1,63 @@
 ---
 title: Fullstack Code Builder
-emoji: 😻
-colorFrom: indigo
-colorTo: purple
+emoji: 🚀
+colorFrom: purple
+colorTo: green
 sdk: gradio
-sdk_version: 6.18.0
-python_version: '3.13'
+sdk_version: 6.14.0
+python_version: '3.11'
 app_file: app.py
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Fullstack Code Builder
+
+An AI-powered fullstack application generator running **entirely locally** with no external API dependencies. Powered by [MiniCPM5-1B](https://huggingface.co/openbmb/MiniCPM5-1B) (2.17 GB).
+
+### Features
+
+- **Local Inference**: Uses MiniCPM5-1B running locally via `transformers` — no API keys needed
+- **Multi-Language Support**: Generate apps in Python, JavaScript, TypeScript, Java, Go, Rust, PHP, Ruby, C#, Swift, Kotlin, and more
+- **Framework Support**: Choose from popular frameworks like React, Vue, Flask, Django, Express, Spring Boot, and others
+- **Live Preview**: See generated web apps in a sandboxed iframe preview
+- **Code Execution**: Run generated Python code and see output
+- **Project Download**: Download generated projects as ZIP files
+- **HuggingFace Deploy**: Push generated projects directly to HuggingFace Spaces
+
+### Supported Languages & Frameworks
+
+| Language | Frameworks |
+|----------|-----------|
+| Python | Flask, Django, FastAPI, Streamlit, Plain Python |
+| JavaScript | React, Vue.js, Next.js, Express.js, Node.js, Vanilla JS |
+| TypeScript | React, Next.js, Express.js, NestJS |
+| HTML/CSS/JS | Tailwind CSS, Bootstrap, Vanilla |
+| Java | Spring Boot, Maven, Gradle |
+| Go | Gin, Fiber, Echo, Plain Go |
+| Rust | Actix, Axum, Rocket |
+| PHP | Laravel, Symfony, Plain PHP |
+| Ruby | Rails, Sinatra |
+| C# | ASP.NET, Blazor |
+| Swift | Vapor, SwiftUI |
+| Kotlin | Ktor, Spring Boot |
+
+### Local Run
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+The model (MiniCPM5-1B, ~2.17 GB) will be automatically downloaded on first run.
+
+### HuggingFace Deploy
+
+1. Generate your application
+2. Go to the "Deploy" tab in the output panel
+3. Enter your HuggingFace repository name and token
+4. Select the Space SDK (Static, Gradio, Streamlit, or Docker)
+5. Click "Push to HuggingFace"
+
+### No External APIs
+
+This application does not use any external API calls. All model inference runs locally using the `transformers` library with MiniCPM5-1B.

app.py

@@ -0,0 +1,1044 @@
+"""Fullstack Code Builder - Local AI-powered fullstack app generator.
+
+Uses MiniCPM5-1B for local inference (no external APIs).
+Supports generating fullstack applications in any language.
+Can push generated projects to HuggingFace Hub.
+"""
+
+from __future__ import annotations
+
+import html
+import json
+import logging
+import os
+import re
+import shutil
+import subprocess
+import sys
+import tempfile
+import textwrap
+import threading
+import time
+import zipfile
+from collections.abc import Iterator
+from dataclasses import dataclass, field
+from pathlib import Path
+from typing import Any
+
+from gradio import Server
+from fastapi.responses import HTMLResponse, FileResponse
+
+APP_TITLE = "Fullstack Code Builder"
+MODEL_ID = "openbmb/MiniCPM5-1B"
+MODEL_URL = "https://huggingface.co/openbmb/MiniCPM5-1B"
+
+DEFAULT_TEMPERATURE = 0.6
+DEFAULT_MAX_TOKENS = 4096
+PY_TIMEOUT_S = 15
+PY_MEM_LIMIT_MB = 1024
+MAX_STDIO_CHARS = 16_000
+OUTPUT_PNG = "output.png"
+
+THINKING_BLOCK_RE = re.compile(r"<\s*think\s*>.*?<\s*/\s*think\s*>", re.IGNORECASE | re.DOTALL)
+CODE_BLOCK_RE = re.compile(r"```([a-zA-Z0-9_+.#-]*)\s*\n(.*?)```", re.DOTALL)
+FILE_BLOCK_RE = re.compile(r"@@FILE:\s*(.+?)@@\s*\n(.*?)(?=@@FILE:|@@END@@)", re.DOTALL)
+
+logger = logging.getLogger(__name__)
+logging.basicConfig(level=logging.INFO)
+
+# ─── Supported Languages & Frameworks ───────────────────────────────────
+
+LANGUAGE_OPTIONS = [
+    ("Python", ["Flask", "Django", "FastAPI", "Streamlit", "Plain Python"]),
+    ("JavaScript", ["React", "Vue.js", "Next.js", "Express.js", "Node.js", "Vanilla JS"]),
+    ("TypeScript", ["React", "Next.js", "Express.js", "NestJS"]),
+    ("HTML/CSS/JS", ["Tailwind CSS", "Bootstrap", "Vanilla"]),
+    ("Java", ["Spring Boot", "Maven", "Gradle"]),
+    ("Go", ["Gin", "Fiber", "Echo", "Plain Go"]),
+    ("Rust", ["Actix", "Axum", "Rocket"]),
+    ("PHP", ["Laravel", "Symfony", "Plain PHP"]),
+    ("Ruby", ["Rails", "Sinatra"]),
+    ("C#", ["ASP.NET", "Blazor"]),
+    ("Swift", ["Vapor", "SwiftUI"]),
+    ("Kotlin", ["Ktor", "Spring Boot"]),
+]
+
+LANGUAGE_MAP = {lang: frameworks for lang, frameworks in LANGUAGE_OPTIONS}
+
+SYSTEM_PROMPT = """You are a fullstack application code generator running locally. You help users build complete, runnable applications in any programming language and framework.
+
+When the user asks you to build an application:
+1. Generate complete, working code - not snippets or pseudocode
+2. Include all necessary files for the project to run
+3. Add proper error handling and comments
+4. For web apps, make the UI responsive and modern
+
+FILE OUTPUT FORMAT - IMPORTANT:
+When generating multi-file projects, wrap each file in this format:
+@@FILE: path/to/file.ext@@
+(file content here)
+@@FILE: path/to/another/file.ext@@
+(another file content here)
+@@END@@
+
+For single-file code, use standard markdown fenced blocks:
+```python for Python
+```html for HTML/CSS/JS
+```javascript for JavaScript
+```typescript for TypeScript
+etc.
+
+When generating web apps with HTML/CSS/JS, return a single self-contained HTML document with all CSS and JavaScript inline. Make the page fully responsive: html/body at margin:0 and 100% width/height, use flexbox/grid layouts, and size any canvas to its container.
+
+For Python, prefer standard library or common packages. Do not use network calls, subprocesses, shell commands, or long-running loops in demo code.
+"""
+
+# Curated starter prompts
+EXAMPLE_PROMPTS: list[tuple[str, str, str, str]] = [
+    (
+        "🌐 React Todo App",
+        "Build a React todo application with add, delete, mark complete, and filter functionality. Use modern hooks and a clean responsive UI.",
+        "JavaScript",
+        "React",
+    ),
+    (
+        "🐍 Flask API",
+        "Create a Flask REST API for a book library with CRUD operations, in-memory storage, and proper error handling.",
+        "Python",
+        "Flask",
+    ),
+    (
+        "🎨 Landing Page",
+        "Build a modern landing page for a SaaS product with a hero section, features grid, pricing cards, and a footer. Use Tailwind-style CSS.",
+        "HTML/CSS/JS",
+        "Vanilla",
+    ),
+    (
+        "📊 Dashboard",
+        "Create an interactive data dashboard with charts (bar, line, pie), a sidebar navigation, and summary cards. All in a single HTML file.",
+        "HTML/CSS/JS",
+        "Vanilla",
+    ),
+    (
+        "🚀 Express API",
+        "Build an Express.js REST API with user authentication endpoints (register, login, profile), JWT token handling, and input validation.",
+        "JavaScript",
+        "Express.js",
+    ),
+    (
+        "✅ Todo App",
+        "Create a self-contained HTML/CSS/JavaScript todo app: add tasks, mark them complete, delete them, filter by all/active/completed, and show a live count of remaining tasks, with a clean, modern, responsive UI.",
+        "HTML/CSS/JS",
+        "Vanilla",
+    ),
+]
+
+
+# ─── Model Loading ────────��─────────────────────────────────────────────
+
+_model = None
+_tokenizer = None
+_model_loaded = False
+_model_loading = False
+_load_error: str | None = None
+
+
+def load_model() -> None:
+    """Load MiniCPM5-1B model and tokenizer locally."""
+    global _model, _tokenizer, _model_loaded, _model_loading, _load_error
+
+    if _model_loaded or _model_loading:
+        return
+
+    _model_loading = True
+    _load_error = None
+
+    try:
+        from transformers import AutoModelForCausalLM, AutoTokenizer
+        import torch
+
+        logger.info("Loading MiniCPM5-1B model...")
+
+        dtype = torch.float16 if torch.cuda.is_available() else torch.float32
+        device_map = "auto" if torch.cuda.is_available() else None
+
+        _tokenizer = AutoTokenizer.from_pretrained(
+            MODEL_ID,
+            trust_remote_code=True,
+        )
+        _model = AutoModelForCausalLM.from_pretrained(
+            MODEL_ID,
+            torch_dtype=dtype,
+            device_map=device_map,
+            trust_remote_code=True,
+            low_cpu_mem_usage=True,
+        )
+
+        if device_map is None:
+            _model = _model.to("cpu")
+
+        _model.eval()
+        _model_loaded = True
+        logger.info("MiniCPM5-1B model loaded successfully.")
+
+    except Exception as exc:
+        _load_error = str(exc)
+        logger.exception("Failed to load model: %s", exc)
+    finally:
+        _model_loading = False
+
+
+# Start loading model in background thread
+_load_thread = threading.Thread(target=load_model, daemon=True)
+_load_thread.start()
+
+
+def get_model_status() -> dict[str, Any]:
+    """Return current model loading status."""
+    if _model_loaded:
+        return {"status": "ready", "message": "Model loaded and ready"}
+    if _model_loading:
+        return {"status": "loading", "message": "Model is loading... (this may take a few minutes on first run)"}
+    if _load_error:
+        return {"status": "error", "message": f"Model load error: {_load_error}"}
+    return {"status": "unknown", "message": "Model not initialized"}
+
+
+# ─── Model Inference ────────────────────────────────────────────────────
+
+def call_model(messages: list[dict[str, Any]], max_new_tokens: int = DEFAULT_MAX_TOKENS) -> Iterator[str]:
+    """Stream model text using local MiniCPM5-1B."""
+
+    if not _model_loaded:
+        status = get_model_status()
+        yield status["message"]
+        return
+
+    try:
+        from transformers import TextIteratorStreamer
+        import torch
+
+        # Build the prompt from messages
+        prompt_parts = []
+        for msg in messages:
+            role = msg.get("role", "user")
+            content = msg.get("content", "")
+            if role == "system":
+                prompt_parts.append(f"System: {content}")
+            elif role == "user":
+                prompt_parts.append(f"User: {content}")
+            elif role == "assistant":
+                prompt_parts.append(f"Assistant: {content}")
+        prompt_parts.append("Assistant:")
+        full_prompt = "\n\n".join(prompt_parts)
+
+        # Tokenize
+        inputs = _tokenizer(full_prompt, return_tensors="pt", truncation=True, max_length=4096)
+        if torch.cuda.is_available():
+            inputs = {k: v.to("cuda") for k, v in inputs.items()}
+
+        # Stream generation
+        streamer = TextIteratorStreamer(_tokenizer, skip_prompt=True, skip_special_tokens=True)
+
+        generation_kwargs = {
+            **inputs,
+            "streamer": streamer,
+            "max_new_tokens": max_new_tokens,
+            "temperature": DEFAULT_TEMPERATURE,
+            "do_sample": True,
+            "top_p": 0.9,
+            "repetition_penalty": 1.1,
+            "pad_token_id": _tokenizer.eos_token_id,
+        }
+
+        # Run generation in a separate thread
+        thread = threading.Thread(target=_model.generate, kwargs=generation_kwargs)
+        thread.start()
+
+        output = ""
+        for new_text in streamer:
+            output += new_text
+            yield output
+
+        thread.join()
+
+    except Exception as exc:
+        logger.exception("Error during model inference")
+        yield f"_Error during generation: {exc}_"
+
+
+def call_model_sync(messages: list[dict[str, Any]], max_new_tokens: int = DEFAULT_MAX_TOKENS) -> str:
+    """Non-streaming model call - returns complete response."""
+    result = ""
+    for chunk in call_model(messages, max_new_tokens):
+        result = chunk
+    return result
+
+
+# ─── Code Extraction ────────────────────────────────────────────────────
+
+def _strip_thinking_blocks(text: str) -> str:
+    return THINKING_BLOCK_RE.sub("", text).strip()
+
+
+def extract_code(response: str) -> tuple[str, str | None]:
+    """Return the first fenced code block and its language tag."""
+    visible_response = _strip_thinking_blocks(response)
+    match = CODE_BLOCK_RE.search(visible_response)
+    if not match:
+        return "", None
+    return match.group(2).strip(), (match.group(1).strip().lower() or None)
+
+
+def extract_multi_file(response: str) -> dict[str, str]:
+    """Extract multi-file project from @@FILE: format.
+
+    Returns dict of {filepath: content}.
+    """
+    files: dict[str, str] = {}
+    visible = _strip_thinking_blocks(response)
+
+    for match in FILE_BLOCK_RE.finditer(visible):
+        filepath = match.group(1).strip()
+        content = match.group(2).strip()
+        files[filepath] = content
+
+    # Fallback: if no @@FILE: blocks found, extract single code block
+    if not files:
+        code, lang = extract_code(response)
+        if code:
+            ext_map = {
+                "python": "main.py", "py": "main.py",
+                "javascript": "index.js", "js": "index.js",
+                "typescript": "index.ts", "ts": "index.ts",
+                "html": "index.html",
+                "css": "styles.css",
+                "java": "Main.java",
+                "go": "main.go",
+                "rust": "main.rs",
+                "php": "index.php",
+                "ruby": "main.rb",
+                "csharp": "Program.cs",
+                "swift": "main.swift",
+                "kotlin": "Main.kt",
+            }
+            filename = ext_map.get(lang or "", "code.txt")
+            files[filename] = code
+
+    return files
+
+
+def _normalize_language(target_language: str | None, fence_lang: str | None) -> str:
+    """Normalize language name to a canonical form."""
+    lang = (fence_lang or target_language or "python").lower()
+    if lang in {"python", "py"}:
+        return "python"
+    if lang in {"html", "web", "css"}:
+        return "web"
+    if lang in {"javascript", "js"}:
+        return "javascript"
+    if lang in {"typescript", "ts"}:
+        return "typescript"
+    if lang == "java":
+        return "java"
+    if lang == "go":
+        return "go"
+    if lang == "rust":
+        return "rust"
+    if lang == "php":
+        return "php"
+    if lang == "ruby":
+        return "ruby"
+    if lang in {"csharp", "c#"}:
+        return "csharp"
+    if lang == "swift":
+        return "swift"
+    if lang == "kotlin":
+        return "kotlin"
+    return lang
+
+
+# ─── Python Execution ───────────────────────────────────────────────────
+
+@dataclass
+class PythonExecutionResult:
+    stdout: str
+    stderr: str
+    image_path: str | None
+    returncode: int | None
+    timed_out: bool = False
+
+
+def _apply_subprocess_limits() -> None:
+    import resource
+    mem_bytes = PY_MEM_LIMIT_MB * 1024 * 1024
+    resource.setrlimit(resource.RLIMIT_AS, (mem_bytes, mem_bytes))
+    resource.setrlimit(resource.RLIMIT_CPU, (PY_TIMEOUT_S, PY_TIMEOUT_S))
+
+
+def _python_runner_source() -> str:
+    return textwrap.dedent(
+        f"""
+        import os
+        import runpy
+        import sys
+        import traceback
+
+        os.environ.setdefault("MPLBACKEND", "Agg")
+        exit_code = 0
+        try:
+            runpy.run_path(os.path.join(os.getcwd(), "user_code.py"), run_name="__main__")
+        except SystemExit as exc:
+            code = exc.code
+            exit_code = code if isinstance(code, int) else 1
+        except Exception:
+            traceback.print_exc()
+            exit_code = 1
+        finally:
+            try:
+                import matplotlib
+                matplotlib.use("Agg", force=True)
+                import matplotlib.pyplot as plt
+                if plt.get_fignums():
+                    plt.savefig(os.environ["OUTPUT_PNG"], bbox_inches="tight")
+            except ModuleNotFoundError as exc:
+                if exc.name != "matplotlib":
+                    traceback.print_exc()
+            except Exception:
+                traceback.print_exc()
+
+        raise SystemExit(exit_code)
+        """
+    ).strip()
+
+
+def _truncate_output(text: str) -> str:
+    if len(text) <= MAX_STDIO_CHARS:
+        return text
+    remaining = len(text) - MAX_STDIO_CHARS
+    return text[:MAX_STDIO_CHARS] + f"\n\n... truncated {remaining} characters ..."
+
+
+def _decode_timeout_output(value: str | bytes | None) -> str:
+    if value is None:
+        return ""
+    if isinstance(value, bytes):
+        return value.decode("utf-8", errors="replace")
+    return value
+
+
+def run_python(code: str) -> PythonExecutionResult:
+    with tempfile.TemporaryDirectory(prefix="fullstack_run_") as tmp:
+        workdir = Path(tmp)
+        runner_path = workdir / "runner.py"
+        user_path = workdir / "user_code.py"
+        image_path = workdir / OUTPUT_PNG
+
+        runner_path.write_text(_python_runner_source(), encoding="utf-8")
+        user_path.write_text(code, encoding="utf-8")
+
+        env = {
+            "PATH": "/usr/bin:/bin",
+            "HOME": str(workdir),
+            "TMPDIR": str(workdir),
+            "MPLBACKEND": "Agg",
+            "MPLCONFIGDIR": str(workdir / ".matplotlib"),
+            "OUTPUT_PNG": str(image_path),
+            "PYTHONIOENCODING": "utf-8",
+            "PYTHONNOUSERSITE": "1",
+            "PYTHONUNBUFFERED": "1",
+            "LANG": "C.UTF-8",
+            "OPENBLAS_NUM_THREADS": "1",
+            "OMP_NUM_THREADS": "1",
+            "MKL_NUM_THREADS": "1",
+            "NUMEXPR_NUM_THREADS": "1",
+        }
+
+        try:
+            completed = subprocess.run(
+                [sys.executable, "-I", str(runner_path)],
+                cwd=workdir,
+                env=env,
+                capture_output=True,
+                text=True,
+                encoding="utf-8",
+                errors="replace",
+                timeout=PY_TIMEOUT_S,
+                preexec_fn=_apply_subprocess_limits if sys.platform == "linux" else None,
+                check=False,
+            )
+            stdout = _truncate_output(completed.stdout)
+            stderr = _truncate_output(completed.stderr)
+
+            if completed.returncode and not stderr:
+                stderr = f"Process exited with status {completed.returncode}."
+
+            saved_image: str | None = None
+            if image_path.exists() and image_path.stat().st_size > 0:
+                saved = tempfile.NamedTemporaryFile(
+                    prefix="fullstack_plot_", suffix=".png", delete=False
+                )
+                saved.close()
+                Path(saved.name).write_bytes(image_path.read_bytes())
+                saved_image = saved.name
+
+            return PythonExecutionResult(
+                stdout=stdout,
+                stderr=stderr,
+                image_path=saved_image,
+                returncode=completed.returncode,
+            )
+        except subprocess.TimeoutExpired as exc:
+            stdout = _truncate_output(_decode_timeout_output(exc.stdout))
+            stderr = _truncate_output(_decode_timeout_output(exc.stderr))
+            timeout_note = f"Timed out after {PY_TIMEOUT_S} seconds; the process was killed."
+            stderr = f"{stderr}\n{timeout_note}".strip()
+            return PythonExecutionResult(
+                stdout=stdout,
+                stderr=stderr,
+                image_path=None,
+                returncode=None,
+                timed_out=True,
+            )
+
+
+# ─── Web Document ───────────────────────────────────────────────────────
+
+def _web_document(code: str, fence_lang: str | None) -> str:
+    lang = (fence_lang or "").lower()
+    if lang in {"javascript", "js"}:
+        return f"<!doctype html><html><body><script>\n{code}\n</script></body></html>"
+    if lang == "css":
+        return f"<!doctype html><html><head><style>\n{code}\n</style></head><body></body></html>"
+    if re.search(r"<!doctype|<html[\s>]", code, flags=re.IGNORECASE):
+        return code
+    return f"<!doctype html><html><head><meta charset='utf-8'></head><body>\n{code}\n</body></html>"
+
+
+def build_iframe(code: str, fence_lang: str | None = None) -> str:
+    document = _web_document(code, fence_lang)
+    srcdoc = html.escape(document, quote=True)
+    return (
+        '<iframe class="web-frame" '
+        'sandbox="allow-scripts" '
+        'allow="fullscreen" '
+        "allowfullscreen "
+        f'srcdoc="{srcdoc}" '
+        'style="width:100%; min-height:680px; border:0; border-radius:14px; '
+        'background:white;"></iframe>'
+    )
+
+
+# ─── Project Packaging ──────────────────────────────────────────────────
+
+def create_project_zip(files: dict[str, str], project_name: str) -> str:
+    """Create a ZIP file from extracted project files.
+
+    Returns path to the created ZIP file.
+    """
+    zip_dir = tempfile.mkdtemp(prefix="fullstack_project_")
+    zip_path = os.path.join(zip_dir, f"{project_name}.zip")
+
+    with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
+        for filepath, content in files.items():
+            zf.writestr(f"{project_name}/{filepath}", content)
+
+    return zip_path
+
+
+def create_project_directory(files: dict[str, str], project_name: str) -> str:
+    """Create a directory with project files for HuggingFace push.
+
+    Returns path to the created project directory.
+    """
+    proj_dir = tempfile.mkdtemp(prefix="fullstack_deploy_")
+    target_dir = os.path.join(proj_dir, project_name)
+    os.makedirs(target_dir, exist_ok=True)
+
+    for filepath, content in files.items():
+        full_path = os.path.join(target_dir, filepath)
+        os.makedirs(os.path.dirname(full_path), exist_ok=True)
+        Path(full_path).write_text(content, encoding="utf-8")
+
+    return target_dir
+
+
+# ─── HuggingFace Hub Push ────────────────────────────��──────────────────
+
+def push_to_huggingface(
+    files: dict[str, str],
+    project_name: str,
+    repo_name: str,
+    hf_token: str,
+    space_sdk: str = "static",
+    is_space: bool = True,
+) -> dict[str, Any]:
+    """Push generated project to HuggingFace Hub.
+
+    Args:
+        files: Dict of {filepath: content}
+        project_name: Name of the project
+        repo_name: HuggingFace repo name (e.g., "username/my-app")
+        hf_token: HuggingFace API token
+        space_sdk: SDK for Space ("gradio", "streamlit", "static", "docker")
+        is_space: Whether to create a Space (True) or Model repo (False)
+
+    Returns:
+        Dict with status and URL info
+    """
+    try:
+        from huggingface_hub import HfApi, create_repo
+
+        api = HfApi(token=hf_token)
+
+        # Parse username/repo
+        if "/" in repo_name:
+            namespace, name = repo_name.split("/", 1)
+        else:
+            # Use the authenticated user's namespace
+            user_info = api.whoami()
+            namespace = user_info["name"]
+            name = repo_name
+            repo_name = f"{namespace}/{name}"
+
+        # Create repo
+        try:
+            if is_space:
+                create_repo(
+                    repo_id=repo_name,
+                    repo_type="space",
+                    space_sdk=space_sdk,
+                    token=hf_token,
+                    exist_ok=True,
+                )
+            else:
+                create_repo(
+                    repo_id=repo_name,
+                    repo_type="model",
+                    token=hf_token,
+                    exist_ok=True,
+                )
+        except Exception as e:
+            logger.warning("Repo creation warning: %s", e)
+
+        # Upload files
+        with tempfile.TemporaryDirectory(prefix="hf_push_") as tmp_dir:
+            for filepath, content in files.items():
+                full_path = os.path.join(tmp_dir, filepath)
+                os.makedirs(os.path.dirname(full_path), exist_ok=True)
+                Path(full_path).write_text(content, encoding="utf-8")
+
+            # Add README if not present
+            readme_path = os.path.join(tmp_dir, "README.md")
+            if not os.path.exists(readme_path):
+                readme_content = f"""---
+title: {name}
+emoji: 🚀
+colorFrom: blue
+colorTo: purple
+sdk: {space_sdk}
+app_file: app.py
+---
+
+# {name}
+
+Generated by Fullstack Code Builder using {MODEL_ID}.
+"""
+                Path(readme_path).write_text(readme_content, encoding="utf-8")
+
+            api.upload_folder(
+                folder_path=tmp_dir,
+                repo_id=repo_name,
+                repo_type="space" if is_space else "model",
+                token=hf_token,
+            )
+
+        repo_url = f"https://huggingface.co/{repo_name}"
+        if is_space:
+            repo_url = f"https://huggingface.co/spaces/{repo_name}"
+
+        return {
+            "success": True,
+            "url": repo_url,
+            "repo_name": repo_name,
+            "message": f"Successfully pushed to {repo_url}",
+        }
+
+    except Exception as exc:
+        logger.exception("Failed to push to HuggingFace")
+        return {
+            "success": False,
+            "url": "",
+            "repo_name": repo_name,
+            "message": f"Failed to push: {str(exc)}",
+        }
+
+
+# ─── Chat Helpers ───────────────────────────────────────────────────────
+
+def _chat_history_to_messages(history: list[dict[str, str]]) -> list[dict[str, Any]]:
+    messages: list[dict[str, Any]] = [{"role": "system", "content": SYSTEM_PROMPT}]
+    for item in history:
+        role = item.get("role")
+        content = str(item.get("content") or "").strip()
+        if role not in {"user", "assistant"} or not content:
+            continue
+        if role == "assistant":
+            content = _strip_thinking_blocks(content)
+        messages.append({"role": role, "content": content})
+    return messages
+
+
+def _clip_context(text: str, limit: int = 4_000) -> str:
+    if len(text) <= limit:
+        return text
+    return text[:limit] + f"\n... truncated {len(text) - limit} characters ..."
+
+
+def _iteration_context(execution_context: dict[str, Any] | None) -> str:
+    if not execution_context or not execution_context.get("code"):
+        return ""
+
+    code = _clip_context(str(execution_context.get("code") or ""), 6_000)
+    target = str(execution_context.get("target") or "code")
+    fence_lang = str(execution_context.get("fence_lang") or target)
+    status = str(execution_context.get("status") or "")
+    stdout = _clip_context(str(execution_context.get("stdout") or ""), 2_000)
+    stderr = _clip_context(str(execution_context.get("stderr") or ""), 2_000)
+
+    parts = [
+        "Previous generated code and run result are available for iteration.",
+        f"Previous target: {target}",
+        f"Previous status: {status}",
+        f"Previous code:\n```{fence_lang}\n{code}\n```",
+    ]
+    if stdout:
+        parts.append(f"Previous stdout:\n{stdout}")
+    if stderr:
+        parts.append(f"Previous stderr / traceback:\n{stderr}")
+    parts.append("If the user asks to revise, debug, extend, or explain the prior code, use this context.")
+    return "\n\n".join(parts)
+
+
+def _targeted_prompt(
+    prompt: str,
+    target_language: str,
+    target_framework: str = "",
+    execution_context: dict[str, Any] | None = None,
+) -> str:
+    iteration_context = _iteration_context(execution_context)
+    context_block = f"\n\n{iteration_context}" if iteration_context else ""
+
+    framework_hint = f" using {target_framework}" if target_framework else ""
+
+    return (
+        f"Target: {target_language}{framework_hint}. Generate a complete, runnable application. "
+        "If the user asks for a web app, include all HTML/CSS/JS. "
+        "If they ask for a backend, include the server code and any API definitions. "
+        "For single-file apps, use a single code block. For multi-file projects, use the @@FILE: format. "
+        "Make the code complete, working, and well-structured."
+        f"{context_block}\n\n"
+        f"User request:\n{prompt}"
+    )
+
+
+# ─── Run Extracted Code ────────────────────────────────────────────────
+
+def _run_extracted_code(
+    code: str,
+    target: str,
+) -> tuple[str, str, str | None, str, str]:
+    if target == "python":
+        result = run_python(code)
+        if result.timed_out:
+            return result.stdout, result.stderr, result.image_path, f"Timed out after {PY_TIMEOUT_S}s", "error"
+        if result.returncode:
+            return result.stdout, result.stderr, result.image_path, "Finished with errors", "error"
+        return result.stdout, result.stderr, result.image_path, "Ran successfully", "success"
+
+    return "", "", None, "Preview ready", "success"
+
+
+# ─── Served Files Registry ──────────────────────────────────────────────
+
+_served_files: dict[str, str] = {}
+
+# ─── FastAPI / Gradio Application ───────────────────────────────────────
+
+app = Server()
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), "index.html")
+    with open(html_path, "r", encoding="utf-8") as f:
+        content = f.read()
+
+    config = json.dumps({
+        "app_title": APP_TITLE,
+        "model_id": MODEL_ID,
+        "model_url": MODEL_URL,
+        "languages": LANGUAGE_OPTIONS,
+        "examples": [
+            {"label": label, "prompt": prompt, "language": lang, "framework": fw}
+            for label, prompt, lang, fw in EXAMPLE_PROMPTS
+        ],
+    })
+    content = content.replace("__RUNTIME_CONFIG__", config)
+    return content
+
+
+@app.get("/api/model-status")
+async def model_status_endpoint():
+    return get_model_status()
+
+
+@app.get("/images/{filename}")
+async def serve_image(filename: str):
+    path = _served_files.get(f"img:{filename}")
+    if path and os.path.exists(path):
+        return FileResponse(path, media_type="image/png")
+    return HTMLResponse("Not found", status_code=404)
+
+
+@app.get("/download/{filename}")
+async def serve_download(filename: str):
+    path = _served_files.get(f"dl:{filename}")
+    if path and os.path.exists(path):
+        return FileResponse(path, filename=filename, media_type="application/octet-stream")
+    return HTMLResponse("Not found", status_code=404)
+
+
+@app.api(name="chat", concurrency_limit=2)
+def handle_chat(
+    prompt: str,
+    target_language: str,
+    target_framework: str,
+    history_json: str,
+    exec_context_json: str,
+) -> str:
+    """Stream chat responses with code execution. Yields JSON strings."""
+    history = json.loads(history_json) if history_json else []
+    execution_context = json.loads(exec_context_json) if exec_context_json else {}
+
+    prompt = (prompt or "").strip()
+    if not prompt:
+        yield json.dumps({
+            "type": "error",
+            "status_text": "Enter a prompt to get started.",
+            "status_state": "info",
+            "history": history,
+            "execution": execution_context,
+        })
+        return
+
+    # Check model status
+    model_status = get_model_status()
+    if model_status["status"] == "loading":
+        yield json.dumps({
+            "type": "error",
+            "status_text": model_status["message"],
+            "status_state": "working",
+            "history": history,
+            "execution": execution_context,
+        })
+        return
+    if model_status["status"] != "ready":
+        yield json.dumps({
+            "type": "error",
+            "status_text": model_status["message"],
+            "status_state": "error",
+            "history": history,
+            "execution": execution_context,
+        })
+        return
+
+    # Add user message and placeholder assistant message
+    history = list(history) + [
+        {"role": "user", "content": prompt},
+        {"role": "assistant", "content": ""},
+    ]
+    yield json.dumps({
+        "type": "status",
+        "status_text": "Thinking...",
+        "status_state": "working",
+        "history": history,
+        "execution": execution_context,
+    })
+
+    # Build messages for model
+    model_history = list(history[:-1])
+    model_history[-1] = {
+        "role": "user",
+        "content": _targeted_prompt(prompt, target_language, target_framework, execution_context),
+    }
+    messages = _chat_history_to_messages(model_history)
+
+    final_response = ""
+    for partial in call_model(messages):
+        final_response = partial
+        history[-1]["content"] = partial
+        yield json.dumps({
+            "type": "streaming",
+            "status_text": "Generating...",
+            "status_state": "working",
+            "history": history,
+            "execution": execution_context,
+        })
+
+    if not final_response:
+        history[-1]["content"] = "The model did not return a response."
+        yield json.dumps({
+            "type": "error",
+            "status_text": "No model response.",
+            "status_state": "error",
+            "history": history,
+            "execution": execution_context,
+        })
+        return
+
+    # Extract code from response
+    code, fence_lang = extract_code(final_response)
+    target = _normalize_language(target_language, fence_lang)
+
+    # Also try multi-file extraction
+    multi_files = extract_multi_file(final_response)
+
+    if not code and not multi_files:
+        yield json.dumps({
+            "type": "complete",
+            "status_text": "Answered without running code.",
+            "status_state": "info",
+            "history": history,
+            "execution": execution_context,
+        })
+        return
+
+    yield json.dumps({
+        "type": "status",
+        "status_text": "Running...",
+        "status_state": "working",
+        "history": history,
+        "execution": execution_context,
+    })
+
+    # Execute if Python
+    stdout, stderr, image_path, status_text, status_state = "", "", None, "Preview ready", "success"
+    if target == "python" and code:
+        stdout, stderr, image_path, status_text, status_state = _run_extracted_code(code, target)
+
+    # Register image for serving
+    image_url = None
+    if image_path:
+        filename = os.path.basename(image_path)
+        _served_files[f"img:{filename}"] = image_path
+        image_url = f"/images/{filename}"
+
+    # Register code for download
+    download_url = None
+    project_files = multi_files if multi_files else {}
+
+    if project_files:
+        # Multi-file project: create ZIP
+        project_name = "generated-project"
+        zip_path = create_project_zip(project_files, project_name)
+        zip_filename = f"{project_name}.zip"
+        _served_files[f"dl:{zip_filename}"] = zip_path
+        download_url = f"/download/{zip_filename}"
+    elif code:
+        ext = "py" if target == "python" else "html"
+        dl_filename = f"generated.{ext}"
+        dl_dir = tempfile.mkdtemp(prefix="fullstack_dl_")
+        dl_path = os.path.join(dl_dir, dl_filename)
+        Path(dl_path).write_text(code, encoding="utf-8")
+        _served_files[f"dl:{dl_filename}"] = dl_path
+        download_url = f"/download/{dl_filename}"
+
+    # Determine if this is web previewable
+    is_web = target in {"web", "javascript", "typescript", "html"} or (fence_lang or "") in {"html", "web"}
+    web_code = code if is_web else None
+
+    execution_context = {
+        "code": code,
+        "target": target,
+        "fence_lang": fence_lang or target,
+        "stdout": stdout,
+        "stderr": stderr,
+        "image_url": image_url,
+        "image_path": image_path,
+        "status": status_text,
+        "language": fence_lang or target,
+        "suggested_tab": "preview" if (image_path or is_web) else "console",
+        "download_url": download_url,
+        "project_files": project_files,
+        "is_web": is_web,
+        "web_code": web_code,
+    }
+
+    yield json.dumps({
+        "type": "complete",
+        "status_text": status_text,
+        "status_state": status_state,
+        "history": history,
+        "execution": execution_context,
+    })
+
+
+@app.api(name="push_hf", concurrency_limit=1)
+def handle_push_hf(
+    exec_context_json: str,
+    repo_name: str,
+    hf_token: str,
+    space_sdk: str = "static",
+    is_space: str = "true",
+) -> str:
+    """Push generated project to HuggingFace Hub."""
+    try:
+        execution_context = json.loads(exec_context_json) if exec_context_json else {}
+        project_files = execution_context.get("project_files", {})
+
+        if not project_files:
+            # If no multi-file, try single code
+            code = execution_context.get("code", "")
+            if not code:
+                yield json.dumps({
+                    "success": False,
+                    "message": "No code to push. Generate some code first.",
+                    "url": "",
+                })
+                return
+
+            lang = execution_context.get("language", "python")
+            ext_map = {
+                "python": "app.py", "py": "app.py",
+                "javascript": "index.js", "js": "index.js",
+                "html": "index.html", "web": "index.html",
+                "typescript": "index.ts", "ts": "index.ts",
+            }
+            filename = ext_map.get(lang, "app.py")
+            project_files = {filename: code}
+
+        # Extract project name from repo_name
+        project_name = repo_name.split("/")[-1] if "/" in repo_name else repo_name
+
+        result = push_to_huggingface(
+            files=project_files,
+            project_name=project_name,
+            repo_name=repo_name,
+            hf_token=hf_token,
+            space_sdk=space_sdk,
+            is_space=is_space.lower() == "true",
+        )
+
+        yield json.dumps(result)
+
+    except Exception as exc:
+        logger.exception("Push to HuggingFace failed")
+        yield json.dumps({
+            "success": False,
+            "message": f"Push failed: {str(exc)}",
+            "url": "",
+        })
+
+
+app.launch(show_error=True)

index.html

@@ -0,0 +1,1852 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Fullstack Code Builder</title>
+<meta name="description" content="AI-powered fullstack app generator with local model inference">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<style>
+/* ═══════════════════════════════════════════════════════
+   RESET & BASE
+   ═══════════════════════════════════════════════════════ */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg-deep: #0a0e14;
+  --bg-panel: #0d1117;
+  --bg-code: #161b22;
+  --border: #1e2a3a;
+  --border-focus: #2d4a6a;
+  --green: #39ff14;
+  --green-dim: #1a7a0a;
+  --cyan: #00d4ff;
+  --amber: #ffb300;
+  --purple: #a855f7;
+  --gray-light: #e0e0e0;
+  --gray-mid: #8b949e;
+  --gray-dim: #484f58;
+  --red: #ff5555;
+  --success: #50fa7b;
+  --code-text: #f8f8f2;
+  --glow-green: 0 0 8px rgba(57,255,20,0.3);
+  --glow-cyan: 0 0 8px rgba(0,212,255,0.3);
+  --glow-amber: 0 0 8px rgba(255,179,0,0.2);
+  --glow-purple: 0 0 8px rgba(168,85,247,0.3);
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --radius: 4px;
+  --transition: 0.2s ease;
+}
+
+html, body {
+  height: 100%;
+  background: var(--bg-deep);
+  color: var(--gray-light);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow: hidden;
+}
+
+body::after {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg,
+    transparent,
+    transparent 2px,
+    rgba(0, 0, 0, 0.03) 2px,
+    rgba(0, 0, 0, 0.03) 4px
+  );
+}
+
+::selection {
+  background: rgba(57, 255, 20, 0.25);
+  color: #fff;
+}
+
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: var(--gray-dim); }
+
+a { color: var(--cyan); text-decoration: none; }
+a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
+
+/* ═══════════════════════════════════════════════════════
+   APP SHELL
+   ═══════════════════════════════════════════════════════ */
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  max-height: 100vh;
+}
+
+/* ═══════════════════════════════════════════════════════
+   HEADER
+   ═══════════════════════════════════════════════════════ */
+#header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px;
+  background: var(--bg-panel);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+.header-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.header-ascii {
+  color: var(--green);
+  font-size: 11px;
+  line-height: 1.3;
+  text-shadow: var(--glow-green);
+  white-space: pre;
+  letter-spacing: 0.5px;
+}
+
+.header-subtitle {
+  color: var(--gray-mid);
+  font-size: 11px;
+  padding-left: 3px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  font-size: 11px;
+  color: var(--gray-mid);
+  text-decoration: none;
+  transition: all var(--transition);
+}
+.pill:hover {
+  border-color: var(--cyan);
+  color: var(--cyan);
+  text-decoration: none;
+  text-shadow: var(--glow-cyan);
+}
+.pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--success);
+  box-shadow: 0 0 6px var(--success);
+}
+.pill .dot.loading {
+  background: var(--amber);
+  box-shadow: 0 0 6px var(--amber);
+  animation: pulse 1.5s ease infinite;
+}
+.pill .dot.error {
+  background: var(--red);
+  box-shadow: 0 0 6px var(--red);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+#btn-new-chat {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--amber);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 5px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 1px;
+}
+#btn-new-chat:hover {
+  border-color: var(--amber);
+  background: rgba(255,179,0,0.08);
+  text-shadow: var(--glow-amber);
+}
+
+/* ═══════════════════════════════════════════════════════
+   BANNER
+   ═══════════════════════════════════════════════════════ */
+#playground-banner {
+  background: linear-gradient(90deg, rgba(168,85,247,0.08), rgba(57,255,20,0.05));
+  border-bottom: 1px solid var(--border);
+  color: var(--gray-mid);
+  font-size: 12px;
+  padding: 7px 18px;
+  text-align: center;
+  flex-shrink: 0;
+}
+#playground-banner strong { color: var(--gray-light); font-weight: 600; }
+#playground-banner a { color: var(--purple); font-weight: 600; }
+
+/* ═══════════════════════════════════════════════════════
+   MAIN LAYOUT
+   ═══════════════════════════════════════════════════════ */
+#main {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* ═══════════════════════════════════════════════════════
+   TERMINAL (LEFT PANEL)
+   ═══════════════════════════════════════════════════════ */
+#terminal-panel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  border-right: 1px solid var(--border);
+}
+
+.panel-label {
+  padding: 6px 16px;
+  font-size: 10px;
+  letter-spacing: 2px;
+  color: var(--gray-dim);
+  border-bottom: 1px solid var(--border);
+  background: rgba(13,17,23,0.6);
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+#chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  scroll-behavior: smooth;
+}
+
+/* Message styles */
+.msg {
+  margin-bottom: 14px;
+  line-height: 1.65;
+  animation: msgFadeIn 0.25s ease;
+}
+
+@keyframes msgFadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.msg-prefix { font-weight: 600; margin-right: 4px; }
+.msg-user .msg-prefix { color: var(--green); text-shadow: var(--glow-green); }
+.msg-user .msg-content { color: var(--green); text-shadow: var(--glow-green); }
+.msg-assistant .msg-prefix { color: var(--cyan); text-shadow: var(--glow-cyan); }
+.msg-assistant .msg-content { color: var(--gray-light); }
+.msg-system .msg-prefix { color: var(--amber); text-shadow: var(--glow-amber); }
+.msg-system .msg-content { color: var(--amber); opacity: 0.85; }
+
+/* Markdown elements */
+.msg-content strong { color: #fff; font-weight: 600; }
+.msg-content em { font-style: italic; color: var(--gray-mid); }
+.msg-content code:not(pre code) {
+  background: var(--bg-code);
+  color: var(--code-text);
+  padding: 1px 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  border: 1px solid var(--border);
+}
+.msg-content a { color: var(--cyan); }
+.msg-content ul, .msg-content ol { margin: 6px 0 6px 20px; }
+.msg-content li { margin-bottom: 3px; }
+.msg-content h1, .msg-content h2, .msg-content h3 {
+  color: var(--cyan); margin: 10px 0 6px; font-size: 14px; text-shadow: var(--glow-cyan);
+}
+.msg-content h1 { font-size: 16px; }
+.msg-content h2 { font-size: 15px; }
+.msg-content p { margin: 4px 0; }
+
+/* Code blocks */
+.code-block-wrap {
+  margin: 8px 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: var(--bg-code);
+}
+.code-block-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 4px 10px; background: rgba(30,42,58,0.5);
+  border-bottom: 1px solid var(--border); font-size: 11px;
+}
+.code-lang { color: var(--amber); text-transform: uppercase; letter-spacing: 1px; }
+.btn-copy {
+  background: transparent; border: 1px solid var(--border); color: var(--gray-mid);
+  font-family: var(--font-mono); font-size: 10px; padding: 2px 8px;
+  border-radius: 3px; cursor: pointer; transition: all var(--transition);
+}
+.btn-copy:hover { border-color: var(--green); color: var(--green); }
+.btn-copy.copied { border-color: var(--success); color: var(--success); }
+.code-block-wrap pre {
+  margin: 0; padding: 10px 12px; overflow-x: auto;
+  font-size: 12px; line-height: 1.5; color: var(--code-text);
+}
+.code-block-wrap pre code { font-family: var(--font-mono); background: none; border: none; padding: 0; }
+
+/* Thinking blocks */
+.think-block {
+  margin: 8px 0; border: 1px solid rgba(255,179,0,0.15);
+  border-radius: var(--radius); background: rgba(255,179,0,0.03);
+}
+.think-summary {
+  display: block; width: 100%; background: transparent; border: none;
+  padding: 6px 10px; cursor: pointer; font-size: 12px;
+  font-family: var(--font-mono); text-align: left; color: var(--gray-dim);
+  user-select: none; transition: color var(--transition);
+}
+.think-summary:hover { color: var(--amber); }
+.think-block .think-content {
+  padding: 6px 12px 10px; font-size: 12px; color: var(--gray-dim);
+  line-height: 1.55; border-top: 1px solid rgba(255,179,0,0.1);
+}
+.think-block:not(.open) .think-content { display: none; }
+
+/* Streaming cursor */
+.streaming-cursor::after {
+  content: '\u2588'; animation: blink 0.8s step-end infinite;
+  color: var(--green); margin-left: 2px;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+/* ═══════════════════════════════════════════════════════
+   INPUT AREA
+   ═══════════════════════════════════════════════════════ */
+#input-area {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border);
+  background: var(--bg-panel);
+  padding: 10px 16px 8px;
+}
+
+/* Target selectors */
+#target-selector {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 6px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.selector-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.selector-label {
+  font-size: 10px;
+  color: var(--gray-dim);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+#lang-select, #framework-select {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 3px 8px;
+  border-radius: var(--radius);
+  outline: none;
+  cursor: pointer;
+  transition: border-color var(--transition);
+}
+#lang-select:focus, #framework-select:focus {
+  border-color: var(--border-focus);
+}
+#lang-select option, #framework-select option {
+  background: var(--bg-deep);
+  color: var(--gray-light);
+}
+
+#input-row {
+  display: flex;
+  gap: 8px;
+  align-items: flex-end;
+}
+
+.input-prompt-symbol {
+  color: var(--green);
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 36px;
+  text-shadow: var(--glow-green);
+  flex-shrink: 0;
+}
+
+#chat-input {
+  flex: 1;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  padding: 8px 12px;
+  resize: none;
+  outline: none;
+  min-height: 36px;
+  max-height: 120px;
+  line-height: 1.5;
+  transition: border-color var(--transition);
+  caret-color: var(--green);
+  text-shadow: var(--glow-green);
+}
+#chat-input::placeholder { color: var(--gray-dim); text-shadow: none; }
+#chat-input:focus { border-color: var(--border-focus); }
+
+#btn-send, #btn-stop {
+  font-family: var(--font-mono); font-size: 12px; padding: 8px 14px;
+  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
+  letter-spacing: 1px; flex-shrink: 0; height: 36px;
+  display: flex; align-items: center; gap: 4px;
+}
+
+#btn-send {
+  background: transparent; border: 1px solid var(--green); color: var(--green);
+}
+#btn-send:hover:not(:disabled) {
+  background: var(--green); color: var(--bg-deep);
+  box-shadow: 0 0 12px rgba(57,255,20,0.3);
+}
+#btn-send:disabled { opacity: 0.3; cursor: not-allowed; }
+
+#btn-stop {
+  background: transparent; border: 1px solid var(--red); color: var(--red); display: none;
+}
+#btn-stop:hover {
+  background: var(--red); color: var(--bg-deep);
+  box-shadow: 0 0 12px rgba(255,85,85,0.3);
+}
+
+/* Examples */
+#examples-row {
+  display: flex; align-items: center; gap: 8px;
+  margin-top: 8px; flex-wrap: wrap;
+}
+.examples-label {
+  font-size: 10px; color: var(--gray-dim); letter-spacing: 1px;
+  text-transform: uppercase; flex-shrink: 0;
+}
+.example-chip {
+  background: rgba(30,42,58,0.4); border: 1px solid var(--border);
+  border-radius: 12px; padding: 3px 10px; font-family: var(--font-mono);
+  font-size: 11px; color: var(--gray-mid); cursor: pointer;
+  transition: all var(--transition); white-space: nowrap;
+}
+.example-chip:hover {
+  border-color: var(--purple); color: var(--purple);
+  background: rgba(168,85,247,0.05); text-shadow: var(--glow-purple);
+}
+
+/* ═══════════════════════════════════════════════════════
+   OUTPUT PANEL (RIGHT)
+   ═══════════════════════════════════════════════════════ */
+#output-panel {
+  display: flex; flex-direction: column; width: 45%; min-width: 340px;
+  max-width: 55%; min-height: 0; background: var(--bg-panel);
+}
+
+#output-tabs {
+  display: flex; border-bottom: 1px solid var(--border);
+  background: rgba(13,17,23,0.6); flex-shrink: 0;
+}
+
+.output-tab {
+  flex: 1; background: transparent; border: none;
+  border-bottom: 2px solid transparent; color: var(--gray-dim);
+  font-family: var(--font-mono); font-size: 11px; padding: 8px 12px;
+  cursor: pointer; transition: all var(--transition);
+  letter-spacing: 1px; text-transform: uppercase;
+}
+.output-tab:hover { color: var(--gray-mid); }
+.output-tab.active {
+  color: var(--cyan); border-bottom-color: var(--cyan);
+  text-shadow: var(--glow-cyan);
+}
+
+#output-content {
+  flex: 1; min-height: 0; overflow: hidden; position: relative;
+}
+
+/* Tab panes */
+.tab-pane { display: none; height: 100%; min-height: 0; }
+.tab-pane.active { display: flex; flex-direction: column; }
+
+/* Preview tab */
+#pane-preview {
+  align-items: stretch; justify-content: stretch;
+  position: relative; min-height: 0; overflow: hidden;
+}
+
+.preview-placeholder {
+  align-self: center; margin: auto; text-align: center;
+  color: var(--gray-dim); padding: 40px 20px;
+}
+.preview-placeholder .ascii-art {
+  font-size: 11px; line-height: 1.3; margin-bottom: 16px; color: var(--border-focus);
+}
+.preview-placeholder .placeholder-text { font-size: 12px; letter-spacing: 0.5px; }
+
+#preview-image {
+  display: none; max-width: 100%; max-height: 100%;
+  object-fit: contain; padding: 12px;
+}
+
+#preview-iframe {
+  display: none; position: absolute; inset: 0; width: 100%; height: 100%;
+  min-height: 0; border: none; background: #fff;
+}
+
+#btn-fullscreen {
+  display: none; position: absolute; top: 8px; right: 8px;
+  background: rgba(13,17,23,0.8); border: 1px solid var(--border);
+  color: var(--gray-mid); font-family: var(--font-mono); font-size: 11px;
+  padding: 4px 10px; border-radius: var(--radius); cursor: pointer;
+  z-index: 5; transition: all var(--transition);
+}
+#btn-fullscreen:hover { border-color: var(--cyan); color: var(--cyan); }
+
+/* Console tab */
+#pane-console { padding: 12px 16px; gap: 12px; overflow-y: auto; }
+
+.console-section { margin-bottom: 8px; }
+.console-label {
+  font-size: 10px; letter-spacing: 2px; color: var(--gray-dim);
+  margin-bottom: 4px; text-transform: uppercase;
+}
+.console-output {
+  background: var(--bg-deep); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 10px 12px; font-size: 12px;
+  line-height: 1.5; white-space: pre-wrap; word-break: break-word;
+  min-height: 40px; max-height: 280px; overflow-y: auto;
+}
+#console-stdout { color: var(--success); }
+#console-stderr { color: var(--red); }
+
+/* Code tab */
+#pane-code { padding: 0; }
+
+.code-tab-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 12px; border-bottom: 1px solid var(--border);
+  background: rgba(30,42,58,0.3); flex-shrink: 0;
+}
+.code-tab-lang {
+  font-size: 11px; color: var(--amber); letter-spacing: 1px; text-transform: uppercase;
+}
+.code-tab-actions { display: flex; gap: 8px; }
+.code-tab-btn {
+  background: transparent; border: 1px solid var(--border); color: var(--gray-mid);
+  font-family: var(--font-mono); font-size: 10px; padding: 3px 8px;
+  border-radius: 3px; cursor: pointer; text-decoration: none;
+  transition: all var(--transition); display: inline-flex;
+  align-items: center; gap: 4px;
+}
+.code-tab-btn:hover { border-color: var(--cyan); color: var(--cyan); text-decoration: none; }
+
+#code-display {
+  flex: 1; overflow: auto; padding: 12px; background: var(--bg-code);
+}
+#code-display pre { margin: 0; font-size: 12px; line-height: 1.5; color: var(--code-text); }
+
+.code-placeholder {
+  display: flex; align-items: center; justify-content: center;
+  height: 100%; color: var(--gray-dim); font-size: 12px;
+}
+
+/* ═══════════════════════════════════════════════════════
+   DEPLOY TAB
+   ═══════════════════════════════════════════════════════ */
+#pane-deploy { padding: 16px; gap: 14px; overflow-y: auto; }
+
+.deploy-section {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px;
+  background: var(--bg-code);
+}
+
+.deploy-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--purple);
+  text-shadow: var(--glow-purple);
+  margin-bottom: 10px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+
+.deploy-field {
+  margin-bottom: 10px;
+}
+
+.deploy-field label {
+  display: block;
+  font-size: 10px;
+  color: var(--gray-dim);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+
+.deploy-field input, .deploy-field select {
+  width: 100%;
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  color: var(--green);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: var(--radius);
+  outline: none;
+  transition: border-color var(--transition);
+}
+.deploy-field input:focus, .deploy-field select:focus {
+  border-color: var(--border-focus);
+}
+.deploy-field input::placeholder {
+  color: var(--gray-dim);
+}
+.deploy-field select option {
+  background: var(--bg-deep);
+  color: var(--gray-light);
+}
+
+.deploy-hint {
+  font-size: 10px;
+  color: var(--gray-dim);
+  margin-top: 3px;
+}
+
+#btn-push-hf {
+  width: 100%;
+  background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(57,255,20,0.1));
+  border: 1px solid var(--purple);
+  color: var(--purple);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  padding: 8px 14px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 1px;
+  margin-top: 6px;
+}
+#btn-push-hf:hover:not(:disabled) {
+  background: var(--purple);
+  color: white;
+  box-shadow: 0 0 12px rgba(168,85,247,0.4);
+  text-shadow: none;
+}
+#btn-push-hf:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.deploy-status {
+  margin-top: 10px;
+  padding: 8px 12px;
+  border-radius: var(--radius);
+  font-size: 11px;
+  display: none;
+}
+.deploy-status.success {
+  display: block;
+  background: rgba(80,250,123,0.1);
+  border: 1px solid var(--success);
+  color: var(--success);
+}
+.deploy-status.error {
+  display: block;
+  background: rgba(255,85,85,0.1);
+  border: 1px solid var(--red);
+  color: var(--red);
+}
+.deploy-status.working {
+  display: block;
+  background: rgba(255,179,0,0.1);
+  border: 1px solid var(--amber);
+  color: var(--amber);
+}
+
+.deploy-status a {
+  color: var(--cyan);
+  font-weight: 600;
+}
+
+/* Project files list */
+.project-files {
+  margin-top: 10px;
+}
+
+.file-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 0;
+  font-size: 11px;
+  color: var(--gray-mid);
+  border-bottom: 1px solid rgba(30,42,58,0.5);
+}
+.file-item:last-child { border-bottom: none; }
+.file-icon { color: var(--amber); }
+.file-name { color: var(--cyan); }
+
+/* ═══════════════════════════════════════════════════════
+   STATUS BAR
+   ═══════════════════════════════════════════════════════ */
+#status-bar {
+  display: flex; align-items: center; gap: 8px; padding: 5px 16px;
+  border-top: 1px solid var(--border); background: var(--bg-panel);
+  font-size: 11px; flex-shrink: 0;
+}
+
+.status-indicator {
+  display: inline-flex; align-items: center; gap: 6px;
+}
+.status-dot { font-size: 10px; line-height: 1; }
+#status-text { letter-spacing: 1px; text-transform: uppercase; }
+
+.status-idle { color: var(--gray-dim); }
+.status-working { color: var(--amber); text-shadow: var(--glow-amber); }
+.status-success { color: var(--success); text-shadow: 0 0 8px rgba(80,250,123,0.3); }
+.status-error { color: var(--red); text-shadow: 0 0 8px rgba(255,85,85,0.3); }
+.status-info { color: var(--cyan); text-shadow: var(--glow-cyan); }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+.status-working .status-dot { display: inline-block; animation: spin 1s linear infinite; }
+
+/* ═══════════════════════════════════════════════════════
+   FULLSCREEN OVERLAY
+   ═══════════════════════════════════════════════════════ */
+#fullscreen-overlay {
+  display: none; position: fixed; inset: 0; z-index: 1000;
+  background: var(--bg-deep); flex-direction: column;
+}
+#fullscreen-overlay.active { display: flex; }
+
+#fullscreen-bar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg-panel);
+}
+#fullscreen-bar span { color: var(--cyan); font-size: 12px; letter-spacing: 1px; }
+#btn-exit-fullscreen {
+  background: transparent; border: 1px solid var(--border); color: var(--gray-mid);
+  font-family: var(--font-mono); font-size: 11px; padding: 4px 12px;
+  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
+}
+#btn-exit-fullscreen:hover { border-color: var(--red); color: var(--red); }
+#fullscreen-iframe { flex: 1; border: none; background: #fff; }
+
+/* ═══════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════ */
+@media (max-width: 900px) {
+  #main { flex-direction: column; }
+  #terminal-panel { border-right: none; border-bottom: 1px solid var(--border); max-height: 55vh; }
+  #output-panel { width: 100%; max-width: 100%; min-width: 0; flex: 1; }
+  .header-ascii { font-size: 10px; }
+  #chat-input { font-size: 12px; }
+  #preview-iframe { min-height: 400px; }
+}
+
+@media (max-width: 600px) {
+  #header { padding: 8px 12px; gap: 8px; }
+  .header-ascii { display: none; }
+  .header-subtitle { display: none; }
+  .pill { font-size: 10px; padding: 3px 8px; }
+  #chat-messages { padding: 10px; }
+  #input-area { padding: 8px 10px 6px; }
+  #examples-row { display: none; }
+  #target-selector { gap: 6px; }
+}
+</style>
+</head>
+<body>
+<div id="app">
+  <!-- Header -->
+  <header id="header">
+    <div class="header-title">
+      <div class="header-ascii">╔═══ FULLSTACK CODE BUILDER ═══╗</div>
+      <div class="header-subtitle">Local AI App Generator | MiniCPM5-1B</div>
+    </div>
+    <div class="header-actions">
+      <a class="pill" id="model-pill" href="#" target="_blank" rel="noopener">
+        <span class="dot loading" id="model-dot"></span>
+        <span id="model-pill-text">MiniCPM5-1B</span>
+      </a>
+      <button id="btn-new-chat" onclick="newChat()" title="Start a new chat session">[NEW]</button>
+    </div>
+  </header>
+
+  <div id="playground-banner">
+    Powered by <a id="banner-model-link" href="https://huggingface.co/openbmb/MiniCPM5-1B" target="_blank" rel="noopener"><strong>MiniCPM5-1B</strong></a> running locally — no external APIs. Generate fullstack apps in any language and deploy to HuggingFace.
+  </div>
+
+  <!-- Main Layout -->
+  <div id="main">
+    <!-- Terminal Panel -->
+    <div id="terminal-panel">
+      <div class="panel-label">Terminal</div>
+      <div id="chat-messages"></div>
+      <div id="input-area">
+        <div id="target-selector">
+          <div class="selector-group">
+            <span class="selector-label">Lang:</span>
+            <select id="lang-select" onchange="onLanguageChange()"></select>
+          </div>
+          <div class="selector-group">
+            <span class="selector-label">Framework:</span>
+            <select id="framework-select"></select>
+          </div>
+        </div>
+        <div id="input-row">
+          <span class="input-prompt-symbol">&#10095;</span>
+          <textarea id="chat-input" rows="1" placeholder="Describe the app you want to build..." spellcheck="false"></textarea>
+          <button id="btn-send" onclick="handleSend()" title="Send message (Shift+Enter)">&#10148;</button>
+          <button id="btn-stop" onclick="stopGeneration()" title="Stop generation">&#9632; STOP</button>
+        </div>
+        <div id="examples-row"></div>
+      </div>
+    </div>
+
+    <!-- Output Panel -->
+    <div id="output-panel">
+      <div id="output-tabs">
+        <button class="output-tab active" data-tab="preview" onclick="switchTab('preview')">Preview</button>
+        <button class="output-tab" data-tab="console" onclick="switchTab('console')">Console</button>
+        <button class="output-tab" data-tab="code" onclick="switchTab('code')">Code</button>
+        <button class="output-tab" data-tab="deploy" onclick="switchTab('deploy')">Deploy</button>
+      </div>
+      <div id="output-content">
+        <!-- Preview Pane -->
+        <div class="tab-pane active" id="pane-preview">
+          <div class="preview-placeholder" id="preview-placeholder">
+            <div class="ascii-art">
+  ┌──────────────────────┐
+  │   ╭━━━╮              │
+  │   ┃ ▶ ┃  OUTPUT      │
+  │   ╰━━━╯              │
+  └──────────────────────┘</div>
+            <div class="placeholder-text">Generate code to see output here</div>
+          </div>
+          <img id="preview-image" alt="Generated output">
+          <iframe id="preview-iframe" sandbox="allow-scripts"></iframe>
+          <button id="btn-fullscreen" onclick="openFullscreen()">&#10570; FULLSCREEN</button>
+        </div>
+
+        <!-- Console Pane -->
+        <div class="tab-pane" id="pane-console">
+          <div class="console-section">
+            <div class="console-label">stdout:</div>
+            <div class="console-output" id="console-stdout">No output yet.</div>
+          </div>
+          <div class="console-section">
+            <div class="console-label">stderr:</div>
+            <div class="console-output" id="console-stderr">No errors.</div>
+          </div>
+        </div>
+
+        <!-- Code Pane -->
+        <div class="tab-pane" id="pane-code">
+          <div class="code-tab-header">
+            <span class="code-tab-lang" id="code-tab-lang">&mdash;</span>
+            <div class="code-tab-actions">
+              <button class="code-tab-btn" id="btn-copy-code" onclick="copyCode()">&#128203; Copy</button>
+              <a class="code-tab-btn" id="btn-download" href="#" style="display:none;">&#11015; Download</a>
+            </div>
+          </div>
+          <div id="code-display">
+            <div class="code-placeholder">No code generated yet.</div>
+          </div>
+        </div>
+
+        <!-- Deploy Pane -->
+        <div class="tab-pane" id="pane-deploy">
+          <div class="deploy-section">
+            <div class="deploy-title">&#128640; Deploy to HuggingFace</div>
+            <div class="deploy-field">
+              <label for="hf-repo-name">Repository Name</label>
+              <input type="text" id="hf-repo-name" placeholder="username/my-app" autocomplete="off">
+              <div class="deploy-hint">Format: username/repo-name or just repo-name</div>
+            </div>
+            <div class="deploy-field">
+              <label for="hf-token">HuggingFace Token</label>
+              <input type="password" id="hf-token" placeholder="hf_xxxxxxxxxxxxxxxxxxxxx" autocomplete="off">
+              <div class="deploy-hint">Get your token at <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a></div>
+            </div>
+            <div class="deploy-field">
+              <label for="hf-space-sdk">Space SDK</label>
+              <select id="hf-space-sdk">
+                <option value="static">Static (HTML/CSS/JS)</option>
+                <option value="gradio">Gradio</option>
+                <option value="streamlit">Streamlit</option>
+                <option value="docker">Docker</option>
+              </select>
+            </div>
+            <button id="btn-push-hf" onclick="pushToHuggingFace()" disabled>&#128640; Push to HuggingFace</button>
+            <div class="deploy-status" id="deploy-status"></div>
+            <div class="project-files" id="project-files"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Status Bar -->
+  <div id="status-bar">
+    <div class="status-indicator status-idle" id="status-indicator">
+      <span class="status-dot">&#9679;</span>
+      <span id="status-text">LOADING MODEL...</span>
+    </div>
+  </div>
+</div>
+
+<!-- Fullscreen Overlay -->
+<div id="fullscreen-overlay">
+  <div id="fullscreen-bar">
+    <span>WEB PREVIEW</span>
+    <button id="btn-exit-fullscreen" onclick="closeFullscreen()">[&#10005; CLOSE]</button>
+  </div>
+  <iframe id="fullscreen-iframe" sandbox="allow-scripts"></iframe>
+</div>
+
+<script>
+// ═══════════════════════════════════════════════════════
+// CONFIG
+// ═══════════════════════════════════════════════════════
+const CONFIG = __RUNTIME_CONFIG__;
+
+// ═══════════════════════════════════════════════════════
+// STATE
+// ═══════════════════════════════════════════════════════
+const state = {
+  history: [],
+  executionContext: {},
+  targetLanguage: 'Python',
+  targetFramework: 'Flask',
+  isGenerating: false,
+  currentEventSource: null,
+  activeTab: 'preview',
+  lastExecution: null,
+  lastCode: '',
+  lastCodeLang: '',
+  pendingWebPreviewCode: '',
+  loadedWebPreviewCode: '',
+  scheduledWebPreviewCode: '',
+  reasoningExpanded: false,
+  lastReasoningPressAt: 0,
+  modelReady: false,
+};
+
+// ═══════════════════════════════════════════════════════
+// INITIALIZATION
+// ═══════════════════════════════════════════════════════
+document.addEventListener('DOMContentLoaded', () => {
+  document.title = CONFIG.app_title || 'Fullstack Code Builder';
+
+  if (CONFIG.model_url) {
+    document.getElementById('model-pill').href = CONFIG.model_url;
+    document.getElementById('banner-model-link').href = CONFIG.model_url;
+  }
+  if (CONFIG.model_id) {
+    document.getElementById('model-pill-text').textContent = CONFIG.model_id.split('/').pop();
+  }
+
+  // Populate language/framework selects
+  populateLanguageSelects();
+
+  // Render examples
+  renderExamples();
+
+  // Welcome message
+  addSystemMessage('Welcome to Fullstack Code Builder. The model is loading locally (no API keys needed). Select a language and framework, then describe the app you want to build.');
+
+  // Input auto-resize & keybinding
+  const input = document.getElementById('chat-input');
+  input.addEventListener('input', autoResize);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  });
+
+  document.addEventListener('pointerdown', handleReasoningPress, true);
+  document.addEventListener('mousedown', handleReasoningPress, true);
+  document.addEventListener('keydown', handleReasoningKeydown, true);
+  document.addEventListener('keydown', handleFullscreenKeydown);
+  observePreviewSize();
+
+  // Poll model status
+  pollModelStatus();
+});
+
+function autoResize() {
+  const el = document.getElementById('chat-input');
+  el.style.height = 'auto';
+  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
+}
+
+// ══════════════════════════════���════════════════════════
+// MODEL STATUS POLLING
+// ═══════════════════════════════════════════════════════
+async function pollModelStatus() {
+  try {
+    const resp = await fetch('/api/model-status');
+    const data = await resp.json();
+
+    const dot = document.getElementById('model-dot');
+    const statusText = document.getElementById('status-text');
+    const indicator = document.getElementById('status-indicator');
+
+    if (data.status === 'ready') {
+      state.modelReady = true;
+      dot.className = 'dot';
+      statusText.textContent = 'MODEL READY';
+      indicator.className = 'status-indicator status-success';
+      document.getElementById('btn-push-hf').disabled = false;
+      // Update after 3 seconds to idle
+      setTimeout(() => {
+        if (!state.isGenerating) {
+          indicator.className = 'status-indicator status-idle';
+          statusText.textContent = 'IDLE';
+        }
+      }, 3000);
+      return;
+    } else if (data.status === 'loading') {
+      dot.className = 'dot loading';
+      statusText.textContent = 'LOADING MODEL...';
+      indicator.className = 'status-indicator status-working';
+    } else {
+      dot.className = 'dot error';
+      statusText.textContent = 'MODEL ERROR';
+      indicator.className = 'status-indicator status-error';
+    }
+
+    // Poll again in 3 seconds
+    setTimeout(pollModelStatus, 3000);
+  } catch (err) {
+    console.error('Model status poll error:', err);
+    setTimeout(pollModelStatus, 5000);
+  }
+}
+
+// ═══════════════════════════════════════════════════════
+// LANGUAGE / FRAMEWORK SELECTS
+// ═══════════════════════════════════════════════════════
+function populateLanguageSelects() {
+  const langSelect = document.getElementById('lang-select');
+  const fwSelect = document.getElementById('framework-select');
+
+  if (CONFIG.languages) {
+    CONFIG.languages.forEach(([lang, frameworks]) => {
+      const opt = document.createElement('option');
+      opt.value = lang;
+      opt.textContent = lang;
+      if (lang === 'Python') opt.selected = true;
+      langSelect.appendChild(opt);
+    });
+  }
+
+  onLanguageChange();
+}
+
+function onLanguageChange() {
+  const langSelect = document.getElementById('lang-select');
+  const fwSelect = document.getElementById('framework-select');
+  const selectedLang = langSelect.value;
+
+  state.targetLanguage = selectedLang;
+
+  // Update frameworks
+  fwSelect.innerHTML = '';
+  const frameworks = (CONFIG.languages || []).find(([l]) => l === selectedLang);
+  if (frameworks && frameworks[1]) {
+    frameworks[1].forEach((fw) => {
+      const opt = document.createElement('option');
+      opt.value = fw;
+      opt.textContent = fw;
+      fwSelect.appendChild(opt);
+    });
+    state.targetFramework = frameworks[1][0];
+  }
+
+  fwSelect.onchange = () => {
+    state.targetFramework = fwSelect.value;
+  };
+}
+
+// ═══════════════════════════════════════════════════════
+// EXAMPLES
+// ═══════════════════════════════════════════════════════
+function renderExamples() {
+  const row = document.getElementById('examples-row');
+  if (!CONFIG.examples || CONFIG.examples.length === 0) {
+    row.style.display = 'none';
+    return;
+  }
+  row.innerHTML = '<span class="examples-label">Try:</span>';
+  CONFIG.examples.forEach((ex) => {
+    const chip = document.createElement('button');
+    chip.className = 'example-chip';
+    chip.textContent = ex.label;
+    chip.title = ex.prompt;
+    chip.addEventListener('click', () => {
+      if (state.isGenerating) return;
+      resetConversation();
+      if (ex.language) {
+        document.getElementById('lang-select').value = ex.language;
+        onLanguageChange();
+      }
+      if (ex.framework) {
+        document.getElementById('framework-select').value = ex.framework;
+        state.targetFramework = ex.framework;
+      }
+      sendMessage(ex.prompt);
+    });
+    row.appendChild(chip);
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// CHAT MESSAGES
+// ═══════════════════════════════════════════════════════
+function addSystemMessage(text) {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'msg msg-system';
+  div.innerHTML = `<span class="msg-prefix">system&gt;</span><span class="msg-content">${escapeHtml(text)}</span>`;
+  container.appendChild(div);
+  scrollToBottom();
+}
+
+function addUserMessage(text) {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'msg msg-user';
+  div.innerHTML = `<span class="msg-prefix">user&gt;</span><span class="msg-content">${escapeHtml(text)}</span>`;
+  container.appendChild(div);
+  scrollToBottom();
+}
+
+function addAssistantMessage() {
+  const container = document.getElementById('chat-messages');
+  const div = document.createElement('div');
+  div.className = 'msg msg-assistant';
+  div.id = 'current-assistant-msg';
+  div.innerHTML = `<span class="msg-prefix">ai&gt;</span><span class="msg-content streaming-cursor"></span>`;
+  container.appendChild(div);
+  state.reasoningExpanded = false;
+  scrollToBottom();
+  return div;
+}
+
+function updateAssistantMessage(content, isStreaming) {
+  const div = document.getElementById('current-assistant-msg');
+  if (!div) return;
+  const contentEl = div.querySelector('.msg-content');
+  const keepReasoningExpanded = state.reasoningExpanded || Boolean(contentEl.querySelector('.think-block.open'));
+  state.reasoningExpanded = keepReasoningExpanded;
+  contentEl.innerHTML = parseMarkdown(content);
+  contentEl.querySelectorAll('.think-block').forEach((block) => {
+    setReasoningBlockOpen(block, keepReasoningExpanded);
+  });
+  if (isStreaming) {
+    contentEl.classList.add('streaming-cursor');
+  } else {
+    contentEl.classList.remove('streaming-cursor');
+  }
+  scrollToBottom();
+}
+
+function finalizeAssistantMessage() {
+  const div = document.getElementById('current-assistant-msg');
+  if (div) {
+    div.id = '';
+    const contentEl = div.querySelector('.msg-content');
+    if (contentEl) contentEl.classList.remove('streaming-cursor');
+  }
+}
+
+function scrollToBottom() {
+  const container = document.getElementById('chat-messages');
+  requestAnimationFrame(() => { container.scrollTop = container.scrollHeight; });
+}
+
+// ═══════════════════════════════════════════════════════
+// MARKDOWN PARSER
+// ═══════════════════════════════════════════════════════
+function parseMarkdown(text) {
+  if (!text) return '';
+
+  const thinkBlocks = [];
+  text = text.replace(/<think>([\s\S]*?)<\/think>/g, (_, content) => {
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(renderThinkBlock(content, '\ud83d\udcad Reasoning (click to expand)'));
+    return `@@THINKBLOCK_${idx}@@`;
+  });
+  text = text.replace(/<think>([\s\S]*)$/g, (_, content) => {
+    const idx = thinkBlocks.length;
+    thinkBlocks.push(renderThinkBlock(content, '\ud83d\udcad Reasoning (thinking...)'));
+    return `@@THINKBLOCK_${idx}@@`;
+  });
+
+  const codeBlocks = [];
+  text = text.replace(/```(\w*)\n([\s\S]*?)```/g, (_, lang, code) => {
+    const idx = codeBlocks.length;
+    codeBlocks.push({ lang: lang || 'text', code: code.trimEnd() });
+    return `@@CODEBLOCK_${idx}@@`;
+  });
+
+  text = escapeHtml(text);
+
+  text = text.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  text = text.replace(/(?<!\*)\*([^*]+?)\*(?!\*)/g, '<em>$1</em>');
+  text = text.replace(/`([^`]+?)`/g, '<code>$1</code>');
+  text = text.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+  text = text.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+  text = text.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+  text = text.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+
+  text = text.replace(/^(?:[-*]) (.+)$/gm, '<li>$1</li>');
+  text = text.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+  text = text.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+  text = text.replace(/(<li>(?:(?!<\/?[uo]l>).)*<\/li>(?:\s*<li>(?:(?!<\/?[uo]l>).)*<\/li>)*)/g, (match) => {
+    if (!match.includes('<ul>') && !match.includes('</ul>')) return '<ol>' + match + '</ol>';
+    return match;
+  });
+
+  text = text.replace(/@@CODEBLOCK_(\d+)@@/g, (_, idx) => {
+    const block = codeBlocks[parseInt(idx)];
+    const escapedCode = escapeHtml(block.code);
+    const id = `code-${Date.now()}-${idx}`;
+    return `<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">${escapeHtml(block.lang)}</span><button class="btn-copy" onclick="copyBlock(this, '${id}')">&#128203; Copy</button></div><pre><code id="${id}">${escapedCode}</code></pre></div>`;
+  });
+  text = text.replace(/@@THINKBLOCK_(\d+)@@/g, (_, idx) => thinkBlocks[parseInt(idx)]);
+
+  text = text.replace(/\n\n/g, '</p><p>');
+  text = text.replace(/\n/g, '<br>');
+  text = '<p>' + text + '</p>';
+  text = text.replace(/<p>\s*<\/p>/g, '');
+  text = text.replace(/<p>(<(?:div|ul|ol|h[1-3]))/g, '$1');
+  text = text.replace(/(<\/(?:div|ul|ol|h[1-3])>)<\/p>/g, '$1');
+
+  return text;
+}
+
+function renderThinkBlock(content, summary) {
+  const escapedContent = escapeHtml(content.trim()).replace(/\n/g, '<br>');
+  const openClass = state.reasoningExpanded ? ' open' : '';
+  const expanded = state.reasoningExpanded ? 'true' : 'false';
+  return `<div class="think-block${openClass}"><button type="button" class="think-summary" aria-expanded="${expanded}">${summary}</button><div class="think-content">${escapedContent}</div></div>`;
+}
+
+function handleReasoningPress(event) { updateReasoningFromEvent(event); }
+function handleReasoningKeydown(event) {
+  if (event.key !== 'Enter' && event.key !== ' ') return;
+  updateReasoningFromEvent(event);
+}
+
+function updateReasoningFromEvent(event) {
+  if (event.type === 'mousedown' && Date.now() - state.lastReasoningPressAt < 500) return;
+  const target = event.target;
+  if (!target || !target.closest) return;
+  const button = target.closest('.think-summary');
+  if (!button) return;
+  const block = button.closest('.think-block');
+  if (!block) return;
+  event.preventDefault();
+  event.stopPropagation();
+  if (event.stopImmediatePropagation) event.stopImmediatePropagation();
+  state.lastReasoningPressAt = Date.now();
+  const nextOpen = !block.classList.contains('open');
+  state.reasoningExpanded = nextOpen;
+  const scope = block.closest('.msg-content') || document;
+  scope.querySelectorAll('.think-block').forEach((trace) => {
+    setReasoningBlockOpen(trace, nextOpen);
+  });
+}
+
+function setReasoningBlockOpen(block, open) {
+  block.classList.toggle('open', open);
+  const button = block.querySelector('.think-summary');
+  if (button) button.setAttribute('aria-expanded', open ? 'true' : 'false');
+}
+
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+// ═══════════════════════════════════════════════════════
+// COPY FUNCTIONS
+// ═══════════════════════════════════════════════════════
+function copyBlock(button, codeId) {
+  const codeEl = document.getElementById(codeId);
+  if (!codeEl) return;
+  navigator.clipboard.writeText(codeEl.textContent).then(() => {
+    button.textContent = '\u2713 Copied!';
+    button.classList.add('copied');
+    setTimeout(() => { button.textContent = '\ud83d\udccb Copy'; button.classList.remove('copied'); }, 2000);
+  });
+}
+
+function copyCode() {
+  if (!state.lastCode) return;
+  const btn = document.getElementById('btn-copy-code');
+  navigator.clipboard.writeText(state.lastCode).then(() => {
+    btn.textContent = '\u2713 Copied!';
+    setTimeout(() => { btn.textContent = '\ud83d\udccb Copy'; }, 2000);
+  });
+}
+
+// ═══════════════════════════════════════════════════════
+// STATUS BAR
+// ═══════════════════════════════════════════════════════
+function renderStatus(text, statusState) {
+  const indicator = document.getElementById('status-indicator');
+  const textEl = document.getElementById('status-text');
+  const dotEl = indicator.querySelector('.status-dot');
+
+  indicator.className = 'status-indicator';
+  switch (statusState) {
+    case 'working': indicator.classList.add('status-working'); dotEl.textContent = '\u25d0'; break;
+    case 'success': indicator.classList.add('status-success'); dotEl.textContent = '\u2713'; break;
+    case 'error': indicator.classList.add('status-error'); dotEl.textContent = '\u2717'; break;
+    case 'info': indicator.classList.add('status-info'); dotEl.textContent = '\u2139'; break;
+    default: indicator.classList.add('status-idle'); dotEl.textContent = '\u25cf';
+  }
+  textEl.textContent = text || 'IDLE';
+}
+
+// ═══════════════════════════════════════════════════════
+// OUTPUT PANEL
+// ═══════════════════════════════════════════════════════
+function switchTab(tab, { forcePreviewReload = false } = {}) {
+  const wasPreview = state.activeTab === 'preview';
+  state.activeTab = tab;
+  document.querySelectorAll('.output-tab').forEach((btn) => {
+    btn.classList.toggle('active', btn.dataset.tab === tab);
+  });
+  document.querySelectorAll('.tab-pane').forEach((pane) => {
+    pane.classList.toggle('active', pane.id === `pane-${tab}`);
+  });
+  if (tab === 'preview') {
+    ensureWebPreviewLoaded({ forceReload: forcePreviewReload || !wasPreview });
+  }
+}
+
+function renderExecution(execution) {
+  if (!execution) return;
+  state.lastExecution = execution;
+
+  // Console
+  document.getElementById('console-stdout').textContent = execution.stdout || 'No output.';
+  document.getElementById('console-stderr').textContent = execution.stderr || 'No errors.';
+
+  // Code
+  if (execution.code) {
+    state.lastCode = execution.code;
+    state.lastCodeLang = execution.language || 'code';
+    document.getElementById('code-tab-lang').textContent = state.lastCodeLang;
+    document.getElementById('code-display').innerHTML = `<pre>${escapeHtml(execution.code)}</pre>`;
+  }
+
+  // Download
+  const dlBtn = document.getElementById('btn-download');
+  if (execution.download_url) {
+    dlBtn.href = execution.download_url;
+    dlBtn.style.display = 'inline-flex';
+    dlBtn.setAttribute('download', '');
+  } else {
+    dlBtn.style.display = 'none';
+  }
+
+  // Preview
+  const placeholder = document.getElementById('preview-placeholder');
+  const img = document.getElementById('preview-image');
+  const iframe = getPreviewIframe();
+  const fsBtn = document.getElementById('btn-fullscreen');
+
+  if (execution.image_url) {
+    placeholder.style.display = 'none';
+    iframe.style.display = 'none';
+    fsBtn.style.display = 'none';
+    img.src = execution.image_url;
+    img.style.display = 'block';
+    if (state.activeTab !== 'console' && state.activeTab !== 'code' && state.activeTab !== 'deploy') {
+      switchTab('preview');
+    }
+  } else if (execution.is_web && execution.code) {
+    placeholder.style.display = 'none';
+    img.style.display = 'none';
+    iframe.style.display = 'block';
+    fsBtn.style.display = 'block';
+    state.pendingWebPreviewCode = execution.code;
+    state.loadedWebPreviewCode = '';
+    state.scheduledWebPreviewCode = '';
+    if (state.activeTab !== 'console' && state.activeTab !== 'code' && state.activeTab !== 'deploy') {
+      switchTab('preview', { forcePreviewReload: true });
+    } else {
+      iframe.srcdoc = '';
+    }
+  } else {
+    if (execution.stdout || execution.stderr) {
+      const suggested = execution.suggested_tab || 'console';
+      if (state.activeTab !== 'deploy') switchTab(suggested);
+    }
+  }
+
+  // Deploy tab - project files
+  renderProjectFiles(execution.project_files || {});
+
+  // Enable deploy button
+  document.getElementById('btn-push-hf').disabled = !execution.code;
+}
+
+function renderProjectFiles(files) {
+  const container = document.getElementById('project-files');
+  if (!files || Object.keys(files).length === 0) {
+    container.innerHTML = '';
+    return;
+  }
+
+  let html = '<div style="margin-top: 12px; font-size: 10px; color: var(--gray-dim); letter-spacing: 1px; text-transform: uppercase;">Project Files:</div>';
+  for (const [filepath, content] of Object.entries(files)) {
+    const ext = filepath.split('.').pop();
+    const icon = getFileIcon(ext);
+    html += `<div class="file-item"><span class="file-icon">${icon}</span><span class="file-name">${escapeHtml(filepath)}</span><span style="color:var(--gray-dim);font-size:10px;">(${content.length} chars)</span></div>`;
+  }
+  container.innerHTML = html;
+}
+
+function getFileIcon(ext) {
+  const icons = {
+    'py': '\ud83d\udc0d', 'js': '\u26a1', 'ts': '\ud83d\udde1\ufe0f', 'html': '\ud83c\udf10',
+    'css': '\ud83c\udfa8', 'json': '\ud83d\udcc4', 'md': '\ud83d\udcd3', 'yml': '\u2699\ufe0f',
+    'yaml': '\u2699\ufe0f', 'java': '\u2615', 'go': '\ud83e\udd85', 'rs': '\ud83e\udd80',
+    'php': '\ud83d\udc18', 'rb': '\ud83d\udc8e', 'swift': '\ud83e\udd85', 'kt': '\ud83c\udf0a',
+  };
+  return icons[ext] || '\ud83d\udcc1';
+}
+
+function resetOutput() {
+  const iframe = getPreviewIframe();
+  document.getElementById('preview-placeholder').style.display = '';
+  document.getElementById('preview-image').style.display = 'none';
+  iframe.style.display = 'none';
+  iframe.srcdoc = '';
+  document.getElementById('btn-fullscreen').style.display = 'none';
+  document.getElementById('console-stdout').textContent = 'No output.';
+  document.getElementById('console-stderr').textContent = 'No errors.';
+  document.getElementById('code-display').innerHTML = '<div class="code-placeholder">No code generated yet.</div>';
+  document.getElementById('code-tab-lang').textContent = '\u2014';
+  document.getElementById('btn-download').style.display = 'none';
+  document.getElementById('project-files').innerHTML = '';
+  document.getElementById('deploy-status').className = 'deploy-status';
+  document.getElementById('deploy-status').style.display = 'none';
+  state.lastExecution = null;
+  state.lastCode = '';
+  state.lastCodeLang = '';
+  state.pendingWebPreviewCode = '';
+  state.loadedWebPreviewCode = '';
+  state.scheduledWebPreviewCode = '';
+}
+
+// ═══════════════════════════════════════════════════════
+// FULLSCREEN
+// ═══════════════════════════════════════════════════════
+function getPreviewIframe() { return document.getElementById('preview-iframe'); }
+
+function recreatePreviewIframe() {
+  const oldFrame = getPreviewIframe();
+  const freshFrame = document.createElement('iframe');
+  freshFrame.id = 'preview-iframe';
+  freshFrame.setAttribute('sandbox', 'allow-scripts');
+  freshFrame.style.display = oldFrame.style.display || 'block';
+  oldFrame.replaceWith(freshFrame);
+  return freshFrame;
+}
+
+function ensureWebPreviewLoaded({ forceReload = false } = {}) {
+  const iframe = getPreviewIframe();
+  if (!state.pendingWebPreviewCode || state.activeTab !== 'preview' || iframe.style.display === 'none') return;
+  if (!forceReload && state.loadedWebPreviewCode === state.pendingWebPreviewCode) {
+    schedulePreviewResize(iframe);
+    return;
+  }
+  if (!forceReload && state.scheduledWebPreviewCode === state.pendingWebPreviewCode) return;
+
+  state.scheduledWebPreviewCode = state.pendingWebPreviewCode;
+  iframe.srcdoc = '';
+  const loadWhenLaidOut = () => {
+    if (state.activeTab !== 'preview' || !state.pendingWebPreviewCode) {
+      state.scheduledWebPreviewCode = '';
+      return;
+    }
+    if (!forceReload && state.loadedWebPreviewCode === state.pendingWebPreviewCode) return;
+    const visibleFrame = getPreviewIframe();
+    const rect = visibleFrame.getBoundingClientRect();
+    if (rect.width < 10 || rect.height < 10) {
+      state.scheduledWebPreviewCode = '';
+      setTimeout(() => ensureWebPreviewLoaded({ forceReload }), 50);
+      return;
+    }
+    const freshFrame = recreatePreviewIframe();
+    freshFrame.srcdoc = state.pendingWebPreviewCode;
+    state.loadedWebPreviewCode = state.pendingWebPreviewCode;
+    state.scheduledWebPreviewCode = '';
+    schedulePreviewResize(freshFrame);
+  };
+  requestAnimationFrame(() => requestAnimationFrame(loadWhenLaidOut));
+  setTimeout(loadWhenLaidOut, 75);
+}
+
+function schedulePreviewResize(iframe) {
+  const dispatchResize = () => {
+    try { iframe.contentWindow?.dispatchEvent(new Event('resize')); } catch (_err) {}
+  };
+  requestAnimationFrame(() => requestAnimationFrame(dispatchResize));
+  setTimeout(dispatchResize, 100);
+  setTimeout(dispatchResize, 350);
+}
+
+function observePreviewSize() {
+  const previewPane = document.getElementById('pane-preview');
+  if (!previewPane) return;
+  window.addEventListener('resize', () => {
+    if (state.activeTab === 'preview' && state.loadedWebPreviewCode) {
+      schedulePreviewResize(getPreviewIframe());
+    }
+  });
+  if (typeof ResizeObserver === 'undefined') return;
+  const observer = new ResizeObserver(() => {
+    if (state.activeTab === 'preview' && state.loadedWebPreviewCode) {
+      schedulePreviewResize(getPreviewIframe());
+    }
+  });
+  observer.observe(previewPane);
+}
+
+function openFullscreen() {
+  const overlay = document.getElementById('fullscreen-overlay');
+  const iframe = document.getElementById('fullscreen-iframe');
+  if (state.lastExecution && state.lastExecution.is_web && state.lastExecution.code) {
+    iframe.srcdoc = state.lastExecution.code;
+  }
+  overlay.classList.add('active');
+}
+
+function closeFullscreen() {
+  document.getElementById('fullscreen-overlay').classList.remove('active');
+  document.getElementById('fullscreen-iframe').srcdoc = '';
+}
+
+function handleFullscreenKeydown(event) {
+  if (event.key !== 'Escape') return;
+  const overlay = document.getElementById('fullscreen-overlay');
+  if (!overlay.classList.contains('active')) return;
+  event.preventDefault();
+  closeFullscreen();
+}
+
+// ═══════════════════════════════════════════════════════
+// SEND / RECEIVE
+// ═══════════════════════════════════════════════════════
+function handleSend() {
+  const input = document.getElementById('chat-input');
+  const prompt = input.value.trim();
+  if (!prompt || state.isGenerating) return;
+  input.value = '';
+  autoResize();
+  sendMessage(prompt);
+}
+
+async function sendMessage(prompt) {
+  if (state.isGenerating) return;
+
+  if (!state.modelReady) {
+    addSystemMessage('The model is still loading. Please wait...');
+    return;
+  }
+
+  state.isGenerating = true;
+  toggleInputState(true);
+  addUserMessage(prompt);
+  addAssistantMessage();
+  renderStatus('Thinking...', 'working');
+
+  const historyJSON = JSON.stringify(state.history);
+  const execContextJSON = JSON.stringify(state.executionContext);
+  const framework = document.getElementById('framework-select')?.value || state.targetFramework;
+
+  try {
+    const resp = await fetch('/gradio_api/call/chat', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        data: [prompt, state.targetLanguage, framework, historyJSON, execContextJSON]
+      })
+    });
+
+    if (!resp.ok) throw new Error(`API error: ${resp.status} ${resp.statusText}`);
+
+    const { event_id } = await resp.json();
+    const eventSource = new EventSource(`/gradio_api/call/chat/${event_id}`);
+    state.currentEventSource = eventSource;
+
+    eventSource.addEventListener('generating', (e) => {
+      try {
+        const dataArray = JSON.parse(e.data);
+        const payload = JSON.parse(dataArray[0]);
+        handlePayload(payload, true);
+      } catch (err) { console.error('Parse error (generating):', err); }
+    });
+
+    eventSource.addEventListener('complete', (e) => {
+      try {
+        const dataArray = JSON.parse(e.data);
+        const payload = JSON.parse(dataArray[0]);
+        handlePayload(payload, false);
+      } catch (err) { console.error('Parse error (complete):', err); }
+      eventSource.close();
+      onGenerationEnd();
+    });
+
+    eventSource.addEventListener('error', (e) => {
+      let errorMsg = 'An error occurred during generation.';
+      if (e.data) errorMsg = e.data;
+      console.error('SSE error:', errorMsg);
+      finalizeAssistantMessage();
+      addSystemMessage(`Error: ${errorMsg}`);
+      renderStatus('Error', 'error');
+      eventSource.close();
+      onGenerationEnd();
+    });
+
+  } catch (err) {
+    console.error('Send error:', err);
+    finalizeAssistantMessage();
+    addSystemMessage(`Error: ${err.message}`);
+    renderStatus('Error', 'error');
+    onGenerationEnd();
+  }
+}
+
+function handlePayload(payload, isStreaming) {
+  if (payload.status_text) renderStatus(payload.status_text, payload.status_state || 'working');
+
+  if (payload.history) {
+    state.history = payload.history;
+    const lastMsg = payload.history[payload.history.length - 1];
+    if (lastMsg && lastMsg.role === 'assistant') {
+      updateAssistantMessage(lastMsg.content, isStreaming);
+    }
+  }
+
+  if (payload.execution) {
+    renderExecution(payload.execution);
+    if (payload.execution) state.executionContext = payload.execution;
+  }
+
+  if (payload.type === 'complete') {
+    finalizeAssistantMessage();
+    renderStatus('Done', 'success');
+    setTimeout(() => { if (!state.isGenerating) renderStatus('Idle', 'idle'); }, 3000);
+  }
+
+  if (payload.type === 'error') {
+    finalizeAssistantMessage();
+    addSystemMessage(`Error: ${payload.status_text || 'Unknown error'}`);
+    renderStatus('Error', 'error');
+  }
+
+  if (payload.execution && payload.execution.suggested_tab) {
+    switchTab(payload.execution.suggested_tab);
+  }
+}
+
+function onGenerationEnd() {
+  state.isGenerating = false;
+  state.currentEventSource = null;
+  toggleInputState(false);
+}
+
+function toggleInputState(generating) {
+  const sendBtn = document.getElementById('btn-send');
+  const stopBtn = document.getElementById('btn-stop');
+  const input = document.getElementById('chat-input');
+
+  if (generating) {
+    sendBtn.style.display = 'none';
+    stopBtn.style.display = 'flex';
+    input.disabled = true;
+    input.placeholder = 'Generating...';
+  } else {
+    sendBtn.style.display = 'flex';
+    stopBtn.style.display = 'none';
+    sendBtn.disabled = false;
+    input.disabled = false;
+    input.placeholder = 'Describe the app you want to build...';
+    input.focus();
+  }
+}
+
+function stopGeneration() {
+  if (state.currentEventSource) {
+    state.currentEventSource.close();
+    state.currentEventSource = null;
+  }
+  finalizeAssistantMessage();
+  addSystemMessage('Generation stopped by user.');
+  renderStatus('Stopped', 'info');
+  onGenerationEnd();
+}
+
+function resetConversation(announcement) {
+  state.history = [];
+  state.executionContext = {};
+  state.lastExecution = null;
+  state.lastCode = '';
+  state.lastCodeLang = '';
+  state.reasoningExpanded = false;
+
+  if (state.currentEventSource) {
+    state.currentEventSource.close();
+    state.currentEventSource = null;
+  }
+  state.isGenerating = false;
+  toggleInputState(false);
+
+  document.getElementById('chat-messages').innerHTML = '';
+  resetOutput();
+  switchTab('preview');
+  renderStatus('Idle', 'idle');
+  if (announcement) addSystemMessage(announcement);
+}
+
+function newChat() {
+  resetConversation(`Session reset. Welcome back to ${CONFIG.app_title || 'Fullstack Code Builder'}.`);
+}
+
+// ═══════════════════════════════════════════════════════
+// HUGGINGFACE PUSH
+// ═══════════════════════════════════════════════════════
+async function pushToHuggingFace() {
+  const repoName = document.getElementById('hf-repo-name').value.trim();
+  const hfToken = document.getElementById('hf-token').value.trim();
+  const spaceSdk = document.getElementById('hf-space-sdk').value;
+  const statusEl = document.getElementById('deploy-status');
+
+  if (!repoName) {
+    statusEl.className = 'deploy-status error';
+    statusEl.textContent = 'Please enter a repository name.';
+    statusEl.style.display = 'block';
+    return;
+  }
+  if (!hfToken) {
+    statusEl.className = 'deploy-status error';
+    statusEl.textContent = 'Please enter your HuggingFace token.';
+    statusEl.style.display = 'block';
+    return;
+  }
+
+  if (!state.executionContext || !state.executionContext.code) {
+    statusEl.className = 'deploy-status error';
+    statusEl.textContent = 'No code to push. Generate some code first.';
+    statusEl.style.display = 'block';
+    return;
+  }
+
+  statusEl.className = 'deploy-status working';
+  statusEl.textContent = 'Pushing to HuggingFace...';
+  statusEl.style.display = 'block';
+
+  const btn = document.getElementById('btn-push-hf');
+  btn.disabled = true;
+
+  try {
+    const execContextJSON = JSON.stringify(state.executionContext);
+
+    const resp = await fetch('/gradio_api/call/push_hf', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        data: [execContextJSON, repoName, hfToken, spaceSdk, 'true']
+      })
+    });
+
+    if (!resp.ok) throw new Error(`API error: ${resp.status}`);
+
+    const { event_id } = await resp.json();
+
+    const eventSource = new EventSource(`/gradio_api/call/push_hf/${event_id}`);
+
+    eventSource.addEventListener('complete', (e) => {
+      try {
+        const dataArray = JSON.parse(e.data);
+        const result = JSON.parse(dataArray[0]);
+
+        if (result.success) {
+          statusEl.className = 'deploy-status success';
+          statusEl.innerHTML = `\u2713 ${result.message}<br><a href="${result.url}" target="_blank" rel="noopener">${result.url} \u2197</a>`;
+        } else {
+          statusEl.className = 'deploy-status error';
+          statusEl.textContent = `\u2717 ${result.message}`;
+        }
+      } catch (err) {
+        statusEl.className = 'deploy-status error';
+        statusEl.textContent = `Parse error: ${err.message}`;
+      }
+      eventSource.close();
+      btn.disabled = false;
+    });
+
+    eventSource.addEventListener('error', (e) => {
+      statusEl.className = 'deploy-status error';
+      statusEl.textContent = `Push failed: ${e.data || 'Unknown error'}`;
+      eventSource.close();
+      btn.disabled = false;
+    });
+
+  } catch (err) {
+    statusEl.className = 'deploy-status error';
+    statusEl.textContent = `Push failed: ${err.message}`;
+    btn.disabled = false;
+  }
+}
+</script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,6 @@
+gradio==6.14.0
+transformers>=4.45.0
+torch>=2.1.0
+accelerate>=0.25.0
+huggingface_hub>=0.20.0
+matplotlib>=3.8