Upload folder using huggingface_hub

README.md

@@ -1,13 +1,63 @@
 ---
-title: Sonicoder
-emoji: ⚡
+title: SoniCoder
+emoji: 🚀
 colorFrom: purple
-colorTo: yellow
+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
+## SoniCoder
+
+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,40 @@
+"""SoniCoder — entry point.
+
+Uses MiniCPM5-1B (text) or MiniCPM-V-4.6 (vision+text) for local inference.
+No external APIs required.
+Supports generating fullstack applications in any language.
+Can push generated projects to HuggingFace Hub.
+Web search via Google scraping (no API keys needed).
+Gradio app support for Python.
+Image understanding with MiniCPM-V-4.6.
+
+Project structure:
+    code/
+    ├── config/constants.py         App constants, model configs, system prompt
+    ├── model/loader.py             Dual model loading & switching
+    ├── model/inference.py          Streaming inference (text + VLM)
+    ├── execution/code_extractor.py Code extraction & language normalization
+    ├── execution/python_runner.py  Sandboxed Python execution
+    ├── execution/gradio_runner.py  Gradio app subprocess runner
+    ├── websearch/google_scraper.py Web search scraping (no API)
+    ├── huggingface/push.py         HuggingFace Hub push & ZIP packaging
+    ├── server/chat_helpers.py      Chat history & prompt building
+    └── server/routes.py            FastAPI / Gradio server routes
+"""
+
+from __future__ import annotations
+
+import logging
+
+from code.model.loader import start_background_load
+from code.server.routes import get_app
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Start loading default model in background
+start_background_load()
+
+# Launch the server
+application = get_app()
+application.launch(show_error=True)

code/__init__.py

@@ -0,0 +1 @@
+"""SoniCoder — modular package."""

code/config/__init__.py

@@ -0,0 +1 @@
+"""Configuration and constants."""

code/config/constants.py

@@ -0,0 +1,177 @@
+"""Application-wide constants, regex patterns, language options, and system prompt."""
+
+from __future__ import annotations
+
+import re
+
+# ─── App Identity ────────────────────────────────────────────────────────
+
+APP_TITLE = "SoniCoder"
+MODEL_URL = "https://huggingface.co/openbmb/MiniCPM5-1B"
+
+# ─── Model Configs ───────────────────────────────────────────────────────
+
+MODEL_CONFIGS = {
+    "minicpm5-1b": {
+        "id": "openbmb/MiniCPM5-1B",
+        "name": "MiniCPM5-1B",
+        "type": "text",
+        "description": "Text-only, fast code generation",
+        "auto_class": "AutoModelForCausalLM",
+        "tokenizer_class": "AutoTokenizer",
+        "size_gb": 2.17,
+    },
+    "minicpm-v-4.6": {
+        "id": "openbmb/MiniCPM-V-4.6",
+        "name": "MiniCPM-V-4.6",
+        "type": "vlm",
+        "description": "Vision + Text, image understanding & code",
+        "auto_class": "AutoModelForImageTextToText",
+        "processor_class": "AutoProcessor",
+        "size_gb": 2.8,
+    },
+}
+
+DEFAULT_MODEL_KEY = "minicpm5-1b"
+
+# Keep backward compat aliases
+MODEL_ID = MODEL_CONFIGS[DEFAULT_MODEL_KEY]["id"]
+
+# ─── Runtime Defaults ───────────────────────────────────────────────────
+
+DEFAULT_TEMPERATURE = 0.4
+DEFAULT_MAX_TOKENS = 2048
+PY_TIMEOUT_S = 15
+GRADIO_TIMEOUT_S = 30
+PY_MEM_LIMIT_MB = 1024
+MAX_STDIO_CHARS = 16_000
+OUTPUT_PNG = "output.png"
+
+# ─── Regex Patterns ─────────────────────────────────────────────────────
+
+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
+)
+
+# ─── Supported Languages & Frameworks ───────────────────────────────────
+
+LANGUAGE_OPTIONS: list[tuple[str, list[str]]] = [
+    ("Python", ["Gradio", "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: dict[str, list[str]] = {lang: frameworks for lang, frameworks in LANGUAGE_OPTIONS}
+
+# ─── System Prompt ───────────────────────────────────────────────────────
+
+SYSTEM_PROMPT = """You are a code generator. Output ONLY the code. No thinking, no explanation, no commentary.
+
+CRITICAL RULES:
+- Do NOT use <think> or <thinking> tags. Do NOT reason aloud. Just output code directly.
+- Do NOT write explanations before or after code. Just output the code.
+- If you must explain something, keep it to ONE short sentence.
+
+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
+5. For Gradio apps, use gradio library and create a complete working app with gr.Interface or gr.Blocks
+
+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.
+
+JAVASCRIPT / TYPESCRIPT PROJECTS:
+For React, Next.js, Vue.js, Express, NestJS, or any JS/TS framework:
+- ALWAYS use the @@FILE: multi-file format
+- Include a package.json with name, version, scripts, and dependencies
+- Include all source files (src/App.jsx, src/index.js, etc.)
+- For React+Vite: include vite.config.js and index.html
+- For Next.js: include next.config.js with output: 'standalone'
+- For Express: main entry is index.js with app.listen(7860)
+- Server ports MUST be 7860 and bind to 0.0.0.0
+- Do NOT include node_modules or lock files
+
+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.
+
+When generating Gradio apps, create a complete app.py with:
+- import gradio as gr
+- Define the interface using gr.Interface() or gr.Blocks()
+- Call iface.launch(server_name="0.0.0.0", server_port=7860) at the end
+- Include all necessary processing logic inline
+
+For Python, prefer standard library or common packages. Do not use network calls, subprocesses, shell commands, or long-running loops in demo code (except Gradio apps which are server-based).
+
+If web search results are provided in the context, use them to inform your code generation. Incorporate relevant information from the search results into the generated code.
+
+If the user provides an image, analyze it and generate code based on what you see in the image. For example: replicate a UI from a screenshot, generate code from a wireframe, or build an app described in a document.
+"""
+
+# ─── Example Prompts ────────────────────────────────────────────────────
+
+EXAMPLE_PROMPTS: list[tuple[str, str, str, str]] = [
+    (
+        "🎨 Gradio Image Filter",
+        "Create a Gradio app that lets users upload an image and apply filters like grayscale, blur, sepia, and edge detection using PIL. Show the original and filtered images side by side.",
+        "Python",
+        "Gradio",
+    ),
+    (
+        "🤖 Gradio Chat App",
+        "Build a Gradio chatbot app with gr.Blocks that has a chat interface, a text input, and a send button. Include a simple echo bot that repeats the user's message with a fun twist.",
+        "Python",
+        "Gradio",
+    ),
+    (
+        "🌐 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",
+    ),
+]

code/execution/__init__.py

@@ -0,0 +1 @@
+"""Code execution engines."""

code/execution/code_extractor.py

@@ -0,0 +1,137 @@
+"""Code extraction from model responses.
+
+Extracts fenced code blocks and multi-file @@FILE: blocks.
+Normalizes language names and detects Gradio code.
+"""
+
+from __future__ import annotations
+
+import html
+import re
+
+from code.config.constants import (
+    CODE_BLOCK_RE,
+    FILE_BLOCK_RE,
+    THINKING_BLOCK_RE,
+)
+
+
+def strip_thinking_blocks(text: str) -> str:
+    """Remove <think/> blocks from model output."""
+    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
+
+
+def is_gradio_code(code: str) -> bool:
+    """Detect if Python code is a Gradio app."""
+    return bool(
+        re.search(
+            r"import\s+gradio|from\s+gradio\s+import|gr\.\s*(Interface|Blocks|TabbedInterface|ChatInterface|App)",
+            code,
+        )
+    )
+
+
+# ─── Web Document / Iframe Builder ─────────────────────────────────────
+
+def _web_document(code: str, fence_lang: str | None) -> str:
+    """Wrap code in an HTML document if needed."""
+    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:
+    """Build a sandboxed iframe HTML string for web preview."""
+    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>'
+    )

code/execution/gradio_runner.py

@@ -0,0 +1,129 @@
+"""Gradio app runner — launches Gradio apps as subprocess servers.
+
+Manages the lifecycle of Gradio app processes: start, status check, and stop.
+"""
+
+from __future__ import annotations
+
+import logging
+import os
+import re
+import subprocess
+import sys
+import tempfile
+from pathlib import Path
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+# ─── Registry for running Gradio subprocesses ───────────────────────────
+
+_running_gradio_procs: dict[str, subprocess.Popen] = {}
+
+
+def run_gradio_app(code: str, port: int = 7861) -> dict[str, Any]:
+    """Launch a Gradio app as a subprocess and return its URL.
+
+    The Gradio app is run on the specified port. We modify the code
+    to ensure it launches on the correct port and is accessible.
+    """
+    # Kill any previously running Gradio app
+    _stop_all_procs()
+
+    # Patch the code: ensure launch uses correct server_name and server_port
+    patched_code = code
+
+    # Replace .launch() with correct params
+    patched_code = re.sub(
+        r"(\w+)\.launch\([^)]*\)",
+        f'\\1.launch(server_name="0.0.0.0", server_port={port}, share=False)',
+        patched_code,
+    )
+
+    # If no .launch() found, add one
+    if ".launch(" not in patched_code:
+        patched_code += (
+            f'\n\nif __name__ == "__main__":\n'
+            f'    iface.launch(server_name="0.0.0.0", server_port={port}, share=False)\n'
+        )
+
+    with tempfile.TemporaryDirectory(prefix="gradio_app_") as tmp:
+        app_path = Path(tmp) / "gradio_app.py"
+        app_path.write_text(patched_code, encoding="utf-8")
+
+        env = {
+            **os.environ,
+            "PYTHONUNBUFFERED": "1",
+            "GRADIO_SERVER_NAME": "0.0.0.0",
+            "GRADIO_SERVER_PORT": str(port),
+        }
+
+        try:
+            proc = subprocess.Popen(
+                [sys.executable, str(app_path)],
+                cwd=tmp,
+                env=env,
+                stdout=subprocess.PIPE,
+                stderr=subprocess.PIPE,
+                text=True,
+            )
+
+            proc_id = f"gradio_{port}"
+            _running_gradio_procs[proc_id] = proc
+
+            # Wait a bit for the server to start
+            import time as _time
+            _time.sleep(3)
+
+            # Check if process is still running
+            poll = proc.poll()
+            if poll is not None:
+                stdout = proc.stdout.read() if proc.stdout else ""
+                stderr = proc.stderr.read() if proc.stderr else ""
+                return {
+                    "success": False,
+                    "url": "",
+                    "message": f"Gradio app exited with code {poll}",
+                    "stdout": stdout[-2000:] if stdout else "",
+                    "stderr": stderr[-2000:] if stderr else "",
+                }
+
+            gradio_url = f"http://localhost:{port}"
+            return {
+                "success": True,
+                "url": gradio_url,
+                "message": f"Gradio app running at {gradio_url}",
+                "port": port,
+            }
+
+        except Exception as exc:
+            logger.exception("Failed to launch Gradio app")
+            return {
+                "success": False,
+                "url": "",
+                "message": f"Failed to launch: {exc}",
+            }
+
+
+def stop_gradio_app() -> dict[str, Any]:
+    """Stop any running Gradio app subprocess."""
+    stopped = _stop_all_procs()
+    return {"success": True, "message": f"Stopped {stopped} Gradio app(s)"}
+
+
+def _stop_all_procs() -> int:
+    """Stop all running Gradio processes. Returns count of stopped procs."""
+    stopped = 0
+    for pid, proc in list(_running_gradio_procs.items()):
+        try:
+            proc.terminate()
+            proc.wait(timeout=3)
+            stopped += 1
+        except Exception:
+            try:
+                proc.kill()
+                stopped += 1
+            except Exception:
+                pass
+    _running_gradio_procs.clear()
+    return stopped

code/execution/python_runner.py

@@ -0,0 +1,173 @@
+"""Sandboxed Python code execution.
+
+Runs user Python code in a subprocess with resource limits,
+captures stdout/stderr, and saves matplotlib figures.
+"""
+
+from __future__ import annotations
+
+import os
+import subprocess
+import sys
+import tempfile
+import textwrap
+from dataclasses import dataclass
+from pathlib import Path
+
+from code.config.constants import (
+    MAX_STDIO_CHARS,
+    OUTPUT_PNG,
+    PY_MEM_LIMIT_MB,
+    PY_TIMEOUT_S,
+)
+
+
+@dataclass
+class PythonExecutionResult:
+    """Result of a sandboxed Python execution."""
+    stdout: str
+    stderr: str
+    image_path: str | None
+    returncode: int | None
+    timed_out: bool = False
+
+
+def _apply_subprocess_limits() -> None:
+    """Set resource limits for the subprocess (Linux only)."""
+    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 the source code of the runner script that wraps user code."""
+    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:
+    """Truncate output to MAX_STDIO_CHARS with a note."""
+    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:
+    """Safely decode subprocess output from timeout exceptions."""
+    if value is None:
+        return ""
+    if isinstance(value, bytes):
+        return value.decode("utf-8", errors="replace")
+    return value
+
+
+def run_python(code: str) -> PythonExecutionResult:
+    """Execute Python code in a sandboxed subprocess.
+
+    Returns a PythonExecutionResult with stdout, stderr, image path, and status.
+    """
+    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,
+            )

code/huggingface/__init__.py

@@ -0,0 +1 @@
+"""HuggingFace Hub push."""

code/huggingface/dockerfile_gen.py

@@ -0,0 +1,626 @@
+"""Dockerfile and package.json generator for JS/TS frameworks.
+
+Auto-generates Dockerfile, package.json, and .dockerignore for
+React, Next.js, Vue.js, Express, NestJS, and plain Node.js projects
+so they can be pushed to HuggingFace Docker Spaces.
+"""
+
+from __future__ import annotations
+
+import re
+from typing import Any
+
+# ─── Framework Detection ────────────────────────────────────────────────
+
+# Keywords in code that identify a framework
+FRAMEWORK_SIGNALS: dict[str, list[str]] = {
+    "nextjs": [
+        "from 'next", 'from "next',
+        "next/link", "next/image", "next/router", "next/head",
+        "NextResponse", "NextRequest", "next/navigation",
+        "getServerSideProps", "getStaticProps",
+    ],
+    "react": [
+        "from 'react", 'from "react',
+        "react-dom", "ReactDOM", "useState", "useEffect",
+        "jsx", "tsx", "React.Component", "React.createElement",
+    ],
+    "vue": [
+        "from 'vue", 'from "vue',
+        "createApp", "Vue.createApp", "<template>",
+        "defineComponent", "ref(", "reactive(",
+    ],
+    "express": [
+        "require('express')", 'require("express")',
+        "from 'express", 'from "express',
+        "express()", "express.Router",
+    ],
+    "nestjs": [
+        "@Module", "@Controller", "@Get", "@Post", "@Put", "@Delete",
+        "from '@nestjs", 'from "@nestjs',
+        "NestFactory.create",
+    ],
+    "nodejs": [
+        "require('http')", "http.createServer",
+        "const http = require", "import http from",
+    ],
+}
+
+
+def detect_framework(files: dict[str, str]) -> str:
+    """Detect the JS/TS framework from project files.
+
+    Returns one of: 'nextjs', 'react', 'vue', 'express', 'nestjs', 'nodejs', 'static'
+    """
+    all_code = "\n".join(files.values())
+
+    # Check file names first (strong signal)
+    has_next_config = any(
+        f.startswith("next.config") for f in files
+    )
+    if has_next_config:
+        return "nextjs"
+
+    # Check package.json if present
+    for fname, content in files.items():
+        if fname == "package.json" or fname.endswith("/package.json"):
+            try:
+                import json
+                pkg = json.loads(content)
+                deps = {**pkg.get("dependencies", {}), **pkg.get("devDependencies", {})}
+                if "next" in deps:
+                    return "nextjs"
+                if "vue" in deps or "@vue/cli-service" in deps:
+                    return "vue"
+                if "@nestjs/core" in deps:
+                    return "nestjs"
+                if "express" in deps:
+                    return "express"
+                if "react" in deps or "react-dom" in deps:
+                    return "react"
+            except Exception:
+                pass
+
+    # Check code content for framework signals
+    for fw, signals in FRAMEWORK_SIGNALS.items():
+        for signal in signals:
+            if signal in all_code:
+                return fw
+
+    # Check file extensions
+    has_jsx_tsx = any(f.endswith((".jsx", ".tsx")) for f in files)
+    has_vue = any(f.endswith(".vue") for f in files)
+
+    if has_vue:
+        return "vue"
+    if has_jsx_tsx:
+        return "react"
+
+    return "static"
+
+
+def is_js_project(files: dict[str, str]) -> bool:
+    """Check if the project is a JavaScript/TypeScript project."""
+    js_extensions = {".js", ".jsx", ".ts", ".tsx", ".vue", ".mjs", ".cjs"}
+    has_package_json = any("package.json" in f for f in files)
+    has_js_files = any(
+        any(f.endswith(ext) for ext in js_extensions)
+        for f in files
+    )
+    return has_package_json or has_js_files
+
+
+# ─── Dockerfile Templates ───────────────────────────────────────────────
+
+def _dockerfile_nextjs() -> str:
+    """Dockerfile for Next.js projects."""
+    return """FROM node:20-slim AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+
+# Rebuild source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+CMD ["node", "server.js"]
+"""
+
+
+def _dockerfile_react() -> str:
+    """Dockerfile for React (Vite/CRA) projects — served with nginx."""
+    return """FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build /app/dist /usr/share/nginx/html 2>/dev/null || true
+RUN cat > /etc/nginx/conf.d/default.conf << 'EOF'
+server {
+    listen 7860;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+EOF
+EXPOSE 7860
+CMD ["nginx", "-g", "daemon off;"]
+"""
+
+
+def _dockerfile_vue() -> str:
+    """Dockerfile for Vue.js projects — served with nginx."""
+    return """FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+RUN cat > /etc/nginx/conf.d/default.conf << 'EOF'
+server {
+    listen 7860;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}
+EOF
+EXPOSE 7860
+CMD ["nginx", "-g", "daemon off;"]
+"""
+
+
+def _dockerfile_express() -> str:
+    """Dockerfile for Express/Node.js server projects."""
+    return """FROM node:20-slim
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN addgroup --system --gid 1001 appuser && adduser --system --uid 1001 appuser
+USER appuser
+EXPOSE 7860
+ENV PORT=7860
+ENV HOST=0.0.0.0
+CMD ["node", "index.js"]
+"""
+
+
+def _dockerfile_nestjs() -> str:
+    """Dockerfile for NestJS projects."""
+    return """FROM node:20-slim AS build
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\
+  elif [ -f package-lock.json ]; then npm ci; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \\
+  else npm i; \\
+  fi
+COPY . .
+RUN npm run build
+
+FROM node:20-slim
+WORKDIR /app
+COPY package.json package-lock.json* yarn.lock* pnpm-lock.yaml* ./
+RUN \\
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile --production; \\
+  elif [ -f package-lock.json ]; then npm ci --only=production; \\
+  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile --prod; \\
+  else npm i --only=production; \\
+  fi
+COPY --from=build /app/dist ./dist
+RUN addgroup --system --gid 1001 appuser && adduser --system --uid 1001 appuser
+USER appuser
+EXPOSE 7860
+ENV PORT=7860
+CMD ["node", "dist/main.js"]
+"""
+
+
+def generate_dockerfile(framework: str) -> str:
+    """Generate a Dockerfile for the given framework.
+
+    Args:
+        framework: One of 'nextjs', 'react', 'vue', 'express', 'nestjs', 'nodejs', 'static'
+
+    Returns:
+        Dockerfile content as string.
+    """
+    templates = {
+        "nextjs": _dockerfile_nextjs,
+        "react": _dockerfile_react,
+        "vue": _dockerfile_vue,
+        "express": _dockerfile_express,
+        "nestjs": _dockerfile_nestjs,
+        "nodejs": _dockerfile_express,  # Same as express for plain Node
+    }
+    gen = templates.get(framework)
+    if gen:
+        return gen()
+    # Fallback: generic node server
+    return _dockerfile_express()
+
+
+# ─── package.json Generator ─────────────────────────────────────────────
+
+def _scan_js_imports(code: str) -> set[str]:
+    """Scan JS/TS code for import/require statements and return package names."""
+    packages = set()
+
+    # ESM: import xxx from 'pkg' / import 'pkg'
+    for m in re.finditer(r"import\s+.*?\s+from\s+['\"](@?[\w-]+/[\w-]+|[\w-]+)", code):
+        packages.add(m.group(1))
+
+    # ESM: import 'pkg'
+    for m in re.finditer(r"import\s+['\"](@?[\w-]+/[\w-]+|[\w-]+)['\"]", code):
+        packages.add(m.group(1))
+
+    # CJS: require('pkg')
+    for m in re.finditer(r"require\s*\(\s*['\"](@?[\w-]+/[\w-]+|[\w-]+)['\"]\s*\)", code):
+        packages.add(m.group(1))
+
+    return packages
+
+
+# Known packages that should NOT go in dependencies (built-in or types)
+_SKIP_PACKAGES = {
+    "react", "react-dom", "next", "vue", "express",
+    "path", "fs", "http", "https", "url", "os", "crypto",
+    "stream", "util", "events", "buffer", "child_process",
+    "net", "tls", "zlib", "assert", "querystring",
+}
+
+# Framework-specific dependency sets
+_FRAMEWORK_DEPS: dict[str, dict[str, str]] = {
+    "nextjs": {
+        "next": "14.2.0",
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+    },
+    "react": {
+        "react": "^18.3.0",
+        "react-dom": "^18.3.0",
+        "react-scripts": "5.0.1",
+    },
+    "vue": {
+        "vue": "^3.4.0",
+    },
+    "express": {
+        "express": "^4.19.0",
+    },
+    "nestjs": {
+        "@nestjs/core": "^10.3.0",
+        "@nestjs/common": "^10.3.0",
+        "@nestjs/platform-express": "^10.3.0",
+        "reflect-metadata": "^0.2.0",
+        "rxjs": "^7.8.0",
+    },
+    "nodejs": {},
+}
+
+# Common package version mapping
+_PACKAGE_VERSIONS: dict[str, str] = {
+    "axios": "^1.6.0",
+    "lodash": "^4.17.21",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.0",
+    "mongoose": "^8.2.0",
+    "prisma": "^5.10.0",
+    "@prisma/client": "^5.10.0",
+    "zod": "^3.22.0",
+    "socket.io": "^4.7.0",
+    "multer": "^1.4.4",
+    "cookie-parser": "^1.4.6",
+    "express-session": "^1.18.0",
+    "jsonwebtoken": "^9.0.0",
+    "bcrypt": "^5.1.0",
+    "uuid": "^9.0.0",
+    "dayjs": "^1.11.10",
+    "chart.js": "^4.4.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.350.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "vite": "^5.1.0",
+    "typescript": "^5.3.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/node": "^20.11.0",
+    "tailwind-merge": "^2.2.0",
+    "clsx": "^2.1.0",
+    "class-variance-authority": "^0.7.0",
+    "@radix-ui/react-slot": "^1.0.2",
+    "next-themes": "^0.3.0",
+    "recharts": "^2.12.0",
+    "react-hook-form": "^7.50.0",
+    "@hookform/resolvers": "^3.3.0",
+    "zustand": "^4.5.0",
+    "jotai": "^2.6.0",
+    "tanstack": "^5.24.0",
+    "@tanstack/react-query": "^5.24.0",
+    "swr": "^2.2.0",
+    "nodemon": "^3.1.0",
+    "ts-node": "^10.9.0",
+    "ts-node-dev": "^2.0.0",
+}
+
+
+def generate_package_json(
+    framework: str,
+    project_name: str = "my-app",
+    extra_deps: set[str] | None = None,
+    existing_content: str | None = None,
+) -> str:
+    """Generate a package.json for the given framework.
+
+    If existing_content is provided, merges dependencies into it.
+    """
+    import json
+
+    # Start with existing or fresh
+    if existing_content:
+        try:
+            pkg = json.loads(existing_content)
+        except Exception:
+            pkg = {}
+    else:
+        pkg = {}
+
+    pkg.setdefault("name", project_name)
+    pkg.setdefault("version", "1.0.0")
+    pkg.setdefault("private", True)
+
+    deps = pkg.get("dependencies", {})
+    dev_deps = pkg.get("devDependencies", {})
+
+    # Add framework core deps
+    fw_deps = _FRAMEWORK_DEPS.get(framework, {})
+    for name, version in fw_deps.items():
+        deps[name] = version
+
+    # Add scanned extra deps
+    if extra_deps:
+        for dep in extra_deps:
+            if dep in _SKIP_PACKAGES:
+                continue
+            if dep in deps or dep in dev_deps:
+                continue
+            version = _PACKAGE_VERSIONS.get(dep, "^1.0.0")
+            # Dev deps
+            if dep.startswith("@types/") or dep in {"typescript", "nodemon", "ts-node", "ts-node-dev"}:
+                dev_deps[dep] = version
+            else:
+                deps[dep] = version
+
+    pkg["dependencies"] = deps
+    if dev_deps:
+        pkg["devDependencies"] = dev_deps
+
+    # Add scripts based on framework
+    scripts = pkg.get("scripts", {})
+    if framework == "nextjs":
+        scripts.setdefault("dev", "next dev")
+        scripts.setdefault("build", "next build")
+        scripts.setdefault("start", "next start -p 7860")
+    elif framework in ("react",):
+        scripts.setdefault("dev", "vite")
+        scripts.setdefault("build", "vite build")
+        scripts.setdefault("start", "vite preview --port 7860 --host 0.0.0.0")
+        # Ensure vite is in devDeps
+        if "vite" not in dev_deps and "vite" not in deps:
+            dev_deps["vite"] = "^5.1.0"
+        if "@vitejs/plugin-react" not in dev_deps:
+            dev_deps["@vitejs/plugin-react"] = "^4.2.0"
+    elif framework == "vue":
+        scripts.setdefault("dev", "vite")
+        scripts.setdefault("build", "vite build")
+        scripts.setdefault("start", "vite preview --port 7860 --host 0.0.0.0")
+        if "vite" not in dev_deps and "vite" not in deps:
+            dev_deps["vite"] = "^5.1.0"
+    elif framework in ("express", "nodejs"):
+        scripts.setdefault("dev", "node index.js")
+        scripts.setdefault("start", "node index.js")
+    elif framework == "nestjs":
+        scripts.setdefault("build", "nest build")
+        scripts.setdefault("start", "node dist/main.js")
+
+    pkg["scripts"] = scripts
+    pkg["dependencies"] = deps
+    if dev_deps:
+        pkg["devDependencies"] = dev_deps
+
+    return json.dumps(pkg, indent=2) + "\n"
+
+
+# ─── .dockerignore ──────────────────────────────────────────────────────
+
+DOCKERIGNORE = """node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.next
+.git
+.gitignore
+README.md
+.env
+.env.local
+.env.production
+.DS_Store
+"""
+
+
+# ─── Vite Config Generators ─────────────────────────────────────────────
+
+def generate_vite_config(framework: str) -> str | None:
+    """Generate a vite.config.js/ts if needed for React or Vue."""
+    if framework == "react":
+        return """import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 7860,
+  },
+})
+"""
+    if framework == "vue":
+        return """import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 7860,
+  },
+})
+"""
+    return None
+
+
+# ─── Next.js Config ────────────────────────────────────────────────────
+
+def generate_next_config() -> str:
+    """Generate next.config.js with standalone output for Docker."""
+    return """/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+}
+
+module.exports = nextConfig
+"""
+
+
+# ─── Public index.html for Vite ─────────────────────────────────────────
+
+def generate_index_html(title: str = "App") -> str:
+    """Generate a minimal index.html for Vite projects."""
+    return f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>{title}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>
+"""
+
+
+# ─── Full Project Scaffold ──────────────────────────────────────────────
+
+def scaffold_js_project(
+    files: dict[str, str],
+    framework: str,
+    project_name: str = "my-app",
+) -> dict[str, str]:
+    """Add Dockerfile, package.json, and config files to a JS project.
+
+    Takes existing generated files and returns an augmented dict with
+    Docker support files added.
+    """
+    augmented = dict(files)
+
+    # Detect imports from all JS/TS files
+    all_js_code = "\n".join(
+        content for fname, content in files.items()
+        if fname.endswith((".js", ".jsx", ".ts", ".tsx", ".vue", ".mjs"))
+    )
+    extra_deps = _scan_js_imports(all_js_code)
+
+    # Add Dockerfile
+    if "Dockerfile" not in augmented:
+        augmented["Dockerfile"] = generate_dockerfile(framework)
+
+    # Add .dockerignore
+    if ".dockerignore" not in augmented:
+        augmented[".dockerignore"] = DOCKERIGNORE
+
+    # Add or merge package.json
+    if "package.json" in augmented:
+        augmented["package.json"] = generate_package_json(
+            framework=framework,
+            project_name=project_name,
+            extra_deps=extra_deps,
+            existing_content=augmented["package.json"],
+        )
+    else:
+        augmented["package.json"] = generate_package_json(
+            framework=framework,
+            project_name=project_name,
+            extra_deps=extra_deps,
+        )
+
+    # Framework-specific config files
+    if framework == "nextjs" and "next.config.js" not in augmented and "next.config.mjs" not in augmented:
+        augmented["next.config.js"] = generate_next_config()
+
+    if framework in ("react", "vue"):
+        vite_cfg = generate_vite_config(framework)
+        if vite_cfg and "vite.config.js" not in augmented and "vite.config.ts" not in augmented:
+            augmented["vite.config.js"] = vite_cfg
+
+        # Add index.html entry point for Vite if not present
+        if "index.html" not in augmented:
+            augmented["index.html"] = generate_index_html(project_name)
+
+    return augmented

code/huggingface/push.py

@@ -0,0 +1,369 @@
+"""HuggingFace Hub push and project ZIP packaging.
+
+Creates ZIP archives from extracted project files and pushes
+projects to HuggingFace Spaces or model repos.
+"""
+
+from __future__ import annotations
+
+import logging
+import os
+import re
+import tempfile
+import zipfile
+from pathlib import Path
+from typing import Any
+
+from code.config.constants import MODEL_ID
+from code.huggingface.dockerfile_gen import (
+    detect_framework,
+    is_js_project,
+    scaffold_js_project,
+)
+
+logger = logging.getLogger(__name__)
+
+# ─── Import-to-Package Mapping ──────────────────────────────────────────
+
+IMPORT_TO_PACKAGE: dict[str, str] = {
+    "gradio": "gradio>=4.0.0",
+    "flask": "flask>=3.0.0",
+    "django": "django>=4.2.0",
+    "fastapi": "fastapi>=0.100.0",
+    "uvicorn": "uvicorn>=0.23.0",
+    "streamlit": "streamlit>=1.28.0",
+    "matplotlib": "matplotlib>=3.8.0",
+    "PIL": "Pillow>=10.0.0",
+    "Pillow": "Pillow>=10.0.0",
+    "numpy": "numpy>=1.24.0",
+    "pandas": "pandas>=2.0.0",
+    "scipy": "scipy>=1.11.0",
+    "sklearn": "scikit-learn>=1.3.0",
+    "scikit_learn": "scikit-learn>=1.3.0",
+    "torch": "torch>=2.1.0",
+    "tensorflow": "tensorflow>=2.14.0",
+    "transformers": "transformers>=4.35.0",
+    "requests": "requests>=2.31.0",
+    "beautifulsoup4": "beautifulsoup4>=4.12.0",
+    "bs4": "beautifulsoup4>=4.12.0",
+    "selenium": "selenium>=4.15.0",
+    "sqlalchemy": "sqlalchemy>=2.0.0",
+    "pydantic": "pydantic>=2.0.0",
+    "httpx": "httpx>=0.25.0",
+    "aiohttp": "aiohttp>=3.9.0",
+    "opencv": "opencv-python-headless>=4.8.0",
+    "cv2": "opencv-python-headless>=4.8.0",
+    "plotly": "plotly>=5.18.0",
+    "seaborn": "seaborn>=0.13.0",
+    "wordcloud": "wordcloud>=1.9.0",
+    "networkx": "networkx>=3.2.0",
+    "sympy": "sympy>=1.12",
+    "Pillow": "Pillow>=10.0.0",
+    "skimage": "scikit-image>=0.21.0",
+    "soundfile": "soundfile>=0.12.0",
+    "pydub": "pydub>=0.25.1",
+    "moviepy": "moviepy>=1.0.3",
+    "openpyxl": "openpyxl>=3.1.0",
+    "xlsxwriter": "xlsxwriter>=3.1.0",
+    "python-docx": "python-docx>=0.8.11",
+    "docx": "python-docx>=0.8.11",
+    "reportlab": "reportlab>=4.0.0",
+    "jinja2": "jinja2>=3.1.0",
+    "wtforms": "wtforms>=3.1.0",
+    "flask_sqlalchemy": "flask-sqlalchemy>=3.1.0",
+    "flask_login": "flask-login>=0.6.0",
+    "flask_wtf": "flask-wtf>=1.2.0",
+    "flask_cors": "flask-cors>=4.0.0",
+}
+
+
+def _scan_imports(code: str) -> list[str]:
+    """Scan Python code for import statements and return package names."""
+    packages = set()
+
+    # Match: import xxx
+    for m in re.finditer(r"^\s*import\s+([a-zA-Z_][\w.]*)", code, re.MULTILINE):
+        top_level = m.group(1).split(".")[0]
+        packages.add(top_level)
+
+    # Match: from xxx import ...
+    for m in re.finditer(r"^\s*from\s+([a-zA-Z_][\w.]*)", code, re.MULTILINE):
+        top_level = m.group(1).split(".")[0]
+        packages.add(top_level)
+
+    return sorted(packages)
+
+
+def generate_requirements(code: str) -> str:
+    """Generate requirements.txt content from code by scanning imports.
+
+    Returns a newline-separated string of pip package specs.
+    """
+    packages = _scan_imports(code)
+    reqs: list[str] = []
+
+    for pkg in packages:
+        if pkg in IMPORT_TO_PACKAGE:
+            req_spec = IMPORT_TO_PACKAGE[pkg]
+            if req_spec not in reqs:
+                reqs.append(req_spec)
+        # Skip stdlib modules (os, sys, json, re, math, etc.)
+
+    # Always include gradio for Gradio apps if not already
+    if "import gradio" in code or "from gradio" in code:
+        if "gradio" not in [r.split(">=")[0].split("[")[0] for r in reqs]:
+            reqs.insert(0, "gradio>=4.0.0")
+
+    return "\n".join(reqs) + "\n" if reqs else ""
+
+
+def _find_entry_point(files: dict[str, str]) -> str:
+    """Find the main entry point file for a project.
+
+    Looks for app.py, main.py, or any Python file with a launcher pattern.
+    """
+    # Priority order for Python entry points
+    candidates = ["app.py", "main.py", "index.py", "server.py", "run.py"]
+    for c in candidates:
+        if c in files:
+            return c
+
+    # Priority order for JS entry points
+    js_candidates = ["index.js", "server.js", "src/index.js", "src/main.jsx", "src/main.tsx"]
+    for c in js_candidates:
+        if c in files:
+            return c
+
+    # Look for any .py file with if __name__ == "__main__" or .launch()
+    for fname, content in files.items():
+        if fname.endswith(".py"):
+            if "__main__" in content or ".launch(" in content or "app.run(" in content:
+                return fname
+
+    # Fall back to first .py file
+    for fname in files:
+        if fname.endswith(".py"):
+            return fname
+
+    # Fall back to first file
+    return next(iter(files), "app.py")
+
+
+def _detect_sdk(files: dict[str, str], entry: str) -> str:
+    """Auto-detect the best Space SDK from the project files."""
+    all_code = "\n".join(files.values())
+
+    if "import streamlit" in all_code or "from streamlit" in all_code:
+        return "streamlit"
+    if "import gradio" in all_code or "from gradio" in all_code:
+        return "gradio"
+
+    # JS/TS projects → Docker
+    if is_js_project(files):
+        return "docker"
+
+    if any(f.endswith(".html") for f in files):
+        return "static"
+    if entry.endswith(".py"):
+        return "gradio"  # Default Python to Gradio SDK
+
+    return "static"
+
+
+def create_project_zip(files: dict[str, str], project_name: str) -> str:
+    """Create a ZIP file from extracted project files.
+
+    Returns the 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 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.
+
+    Creates the repo if it doesn't exist, writes all files,
+    and adds README.md, Dockerfile, package.json, and requirements.txt as needed.
+    """
+    try:
+        from huggingface_hub import HfApi, create_repo
+
+        api = HfApi(token=hf_token)
+
+        if "/" in repo_name:
+            namespace, name = repo_name.split("/", 1)
+        else:
+            user_info = api.whoami()
+            namespace = user_info["name"]
+            name = repo_name
+            repo_name = f"{namespace}/{name}"
+
+        # Find entry point and auto-detect SDK
+        entry_point = _find_entry_point(files)
+        detected_sdk = _detect_sdk(files, entry_point)
+
+        # Use detected SDK if user left it as "static" but project needs something else
+        if space_sdk == "static" and detected_sdk != "static":
+            space_sdk = detected_sdk
+
+        # For JS projects, scaffold Docker support files
+        if is_js_project(files) or space_sdk == "docker":
+            framework = detect_framework(files)
+            if framework == "static":
+                # Single HTML file or simple JS — keep as static
+                if any(f.endswith(".html") for f in files) and not is_js_project(files):
+                    space_sdk = "static"
+                else:
+                    framework = "nodejs"
+                    space_sdk = "docker"
+
+            if space_sdk == "docker":
+                files = scaffold_js_project(files, framework, project_name)
+
+        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)
+
+        with tempfile.TemporaryDirectory(prefix="hf_push_") as tmp_dir:
+            # Write all project files
+            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")
+
+            # Ensure the entry point is named app.py for HF Spaces (Python)
+            if entry_point != "app.py" and entry_point.endswith(".py") and is_space and space_sdk in ("gradio", "streamlit"):
+                src = os.path.join(tmp_dir, entry_point)
+                dst = os.path.join(tmp_dir, "app.py")
+                if os.path.exists(src) and not os.path.exists(dst):
+                    import shutil
+                    shutil.copy2(src, dst)
+
+            # Determine app_file for README
+            if space_sdk == "docker":
+                app_file = "Dockerfile"
+            elif space_sdk in ("gradio", "streamlit"):
+                app_file = "app.py"
+            elif space_sdk == "static":
+                if "index.html" in files:
+                    app_file = "index.html"
+                elif any(f.endswith(".html") for f in files):
+                    app_file = next(f for f in files if f.endswith(".html"))
+                else:
+                    app_file = entry_point
+            else:
+                app_file = entry_point
+
+            # Add README.md 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_file}
+pinned: false
+---
+
+# {name}
+
+Generated by SoniCoder using {MODEL_ID}.
+"""
+                Path(readme_path).write_text(readme_content, encoding="utf-8")
+            else:
+                # Update app_file in existing README to match entry point
+                existing = Path(readme_path).read_text(encoding="utf-8")
+                if "app_file:" in existing:
+                    existing = re.sub(
+                        r"app_file:\s*\S+", f"app_file: {app_file}", existing
+                    )
+                if "sdk:" in existing:
+                    existing = re.sub(
+                        r"sdk:\s*\S+", f"sdk: {space_sdk}", existing
+                    )
+                Path(readme_path).write_text(existing, encoding="utf-8")
+
+            # Add/merge requirements.txt for Python projects
+            req_path = os.path.join(tmp_dir, "requirements.txt")
+            has_python = any(f.endswith(".py") for f in files.keys())
+
+            if has_python and space_sdk != "docker":
+                # Scan all Python code for imports
+                all_py_code = "\n".join(
+                    content for fname, content in files.items()
+                    if fname.endswith(".py")
+                )
+                auto_reqs = generate_requirements(all_py_code)
+
+                if os.path.exists(req_path):
+                    # Merge with existing requirements.txt
+                    existing_reqs = Path(req_path).read_text(encoding="utf-8").strip()
+                    merged = set()
+                    for line in (existing_reqs + "\n" + auto_reqs).splitlines():
+                        line = line.strip()
+                        if line and not line.startswith("#"):
+                            merged.add(line)
+
+                    Path(req_path).write_text("\n".join(sorted(merged)) + "\n", encoding="utf-8")
+                elif auto_reqs:
+                    Path(req_path).write_text(auto_reqs, encoding="utf-8")
+                else:
+                    # Minimal requirements for Python Spaces
+                    Path(req_path).write_text("gradio>=4.0.0\n", 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)}",
+        }

code/model/__init__.py

@@ -0,0 +1 @@
+"""Model loading and inference."""

code/model/inference.py

@@ -0,0 +1,274 @@
+"""Model inference — streaming and synchronous generation.
+
+Supports two inference paths:
+- Text-only (MiniCPM5-1B): uses TextIteratorStreamer for real-time streaming
+- VLM (MiniCPM-V-4.6): uses processor.apply_chat_template() with image support
+"""
+
+from __future__ import annotations
+
+import logging
+import threading
+from collections.abc import Iterator
+from typing import Any
+
+from code.config.constants import DEFAULT_TEMPERATURE, DEFAULT_MAX_TOKENS, MODEL_CONFIGS
+from code.model.loader import (
+    get_model,
+    get_tokenizer_or_processor,
+    get_model_status,
+    is_model_loaded,
+    get_current_model_key,
+    get_current_model_type,
+)
+
+logger = logging.getLogger(__name__)
+
+
+def call_model(
+    messages: list[dict[str, Any]],
+    max_new_tokens: int = DEFAULT_MAX_TOKENS,
+    image_url: str | None = None,
+) -> Iterator[str]:
+    """Stream model text. Yields progressively longer strings (full text so far).
+
+    For VLM models, if image_url is provided, it's included in the last user message.
+    """
+    if not is_model_loaded():
+        status = get_model_status()
+        yield status["message"]
+        return
+
+    model_type = get_current_model_type()
+
+    if model_type == "vlm":
+        yield from _call_vlm_model(messages, max_new_tokens, image_url)
+    else:
+        yield from _call_text_model(messages, max_new_tokens)
+
+
+def _call_text_model(
+    messages: list[dict[str, Any]],
+    max_new_tokens: int,
+) -> Iterator[str]:
+    """Stream text from a text-only model using TextIteratorStreamer."""
+    model = get_model()
+    tokenizer = get_tokenizer_or_processor()
+
+    try:
+        from transformers import TextIteratorStreamer
+        import torch
+
+        # Build the prompt from messages
+        prompt_parts: list[str] = []
+        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 text model inference")
+        yield f"_Error during generation: {exc}_"
+
+
+def _call_vlm_model(
+    messages: list[dict[str, Any]],
+    max_new_tokens: int,
+    image_url: str | None = None,
+) -> Iterator[str]:
+    """Stream text from a VLM model with optional image input.
+
+    Uses processor.apply_chat_template() for proper image+text processing,
+    then generates with streaming via a thread.
+    """
+    model = get_model()
+    processor = get_tokenizer_or_processor()
+
+    try:
+        import torch
+
+        # Build VLM-style messages with image support
+        vlm_messages = _build_vlm_messages(messages, image_url)
+
+        # Apply chat template
+        try:
+            inputs = processor.apply_chat_template(
+                vlm_messages,
+                tokenize=True,
+                add_generation_prompt=True,
+                return_dict=True,
+                return_tensors="pt",
+                downsample_mode="16x",
+                max_slice_nums=9,
+            )
+        except TypeError:
+            # Fallback for older transformers without downsample_mode
+            inputs = processor.apply_chat_template(
+                vlm_messages,
+                tokenize=True,
+                add_generation_prompt=True,
+                return_dict=True,
+                return_tensors="pt",
+            )
+
+        if torch.cuda.is_available():
+            inputs = inputs.to("cuda")
+        else:
+            # Move to CPU explicitly
+            inputs = inputs.to("cpu")
+
+        # Generate with streaming
+        try:
+            from transformers import TextIteratorStreamer
+            streamer = TextIteratorStreamer(
+                processor.tokenizer if hasattr(processor, 'tokenizer') else processor,
+                skip_prompt=True,
+                skip_special_tokens=True,
+            )
+
+            gen_kwargs = {
+                **inputs,
+                "streamer": streamer,
+                "max_new_tokens": max_new_tokens,
+                "temperature": DEFAULT_TEMPERATURE,
+                "do_sample": True,
+                "top_p": 0.9,
+                "repetition_penalty": 1.1,
+            }
+            # Add downsample_mode if supported
+            try:
+                gen_kwargs["downsample_mode"] = "16x"
+            except Exception:
+                pass
+
+            # Ensure pad_token_id
+            if hasattr(processor, 'tokenizer') and hasattr(processor.tokenizer, 'eos_token_id'):
+                gen_kwargs["pad_token_id"] = processor.tokenizer.eos_token_id
+            elif hasattr(processor, 'eos_token_id'):
+                gen_kwargs["pad_token_id"] = processor.eos_token_id
+
+            thread = threading.Thread(target=model.generate, kwargs=gen_kwargs)
+            thread.start()
+
+            output = ""
+            for new_text in streamer:
+                output += new_text
+                yield output
+
+            thread.join()
+
+        except Exception as stream_err:
+            # Fallback: non-streaming generation
+            logger.warning("Streaming failed for VLM, falling back to sync: %s", stream_err)
+            gen_kwargs = {
+                **inputs,
+                "max_new_tokens": max_new_tokens,
+                "temperature": DEFAULT_TEMPERATURE,
+                "do_sample": True,
+                "top_p": 0.9,
+            }
+            try:
+                gen_kwargs["downsample_mode"] = "16x"
+            except Exception:
+                pass
+
+            generated_ids = model.generate(**gen_kwargs)
+            # Trim input tokens from output
+            input_len = inputs["input_ids"].shape[1] if hasattr(inputs, "shape") else len(inputs["input_ids"])
+            generated_ids_trimmed = [
+                out_ids[len(in_ids):]
+                for in_ids, out_ids in zip(inputs["input_ids"], generated_ids)
+            ]
+            tok = processor.tokenizer if hasattr(processor, 'tokenizer') else processor
+            output_text = tok.batch_decode(
+                generated_ids_trimmed, skip_special_tokens=True, clean_up_tokenization_spaces=False
+            )
+            yield output_text[0] if output_text else ""
+
+    except Exception as exc:
+        logger.exception("Error during VLM model inference")
+        yield f"_Error during generation: {exc}_"
+
+
+def _build_vlm_messages(
+    messages: list[dict[str, Any]],
+    image_url: str | None = None,
+) -> list[dict[str, Any]]:
+    """Build VLM-style messages with image content blocks.
+
+    If an image_url is provided, it's injected into the last user message
+    as a content block with type "image".
+    """
+    vlm_messages = []
+
+    for i, msg in enumerate(messages):
+        role = msg.get("role", "user")
+        content = msg.get("content", "")
+
+        if role == "system":
+            # System messages stay as-is for VLM
+            vlm_messages.append({"role": "system", "content": content})
+            continue
+
+        # For the last user message with an image, use structured content
+        is_last_user = (i == len(messages) - 1) and role == "user"
+
+        if is_last_user and image_url:
+            # Build content list with image + text
+            content_list = [{"type": "image", "url": image_url}]
+            if content.strip():
+                content_list.append({"type": "text", "text": content})
+            vlm_messages.append({"role": "user", "content": content_list})
+        else:
+            vlm_messages.append({"role": role, "content": content})
+
+    return vlm_messages
+
+
+def call_model_sync(
+    messages: list[dict[str, Any]],
+    max_new_tokens: int = DEFAULT_MAX_TOKENS,
+    image_url: str | None = None,
+) -> str:
+    """Non-streaming model call — returns complete response."""
+    result = ""
+    for chunk in call_model(messages, max_new_tokens, image_url):
+        result = chunk
+    return result

code/model/loader.py

@@ -0,0 +1,254 @@
+"""Model loading and status management.
+
+Supports two models:
+- MiniCPM5-1B (text-only, fast)
+- MiniCPM-V-4.6 (vision + text, image understanding)
+
+Only one model is loaded at a time to conserve memory.
+The model is loaded in a background thread on startup.
+"""
+
+from __future__ import annotations
+
+import gc
+import logging
+import threading
+from typing import Any
+
+from code.config.constants import DEFAULT_MODEL_KEY, MODEL_CONFIGS
+
+logger = logging.getLogger(__name__)
+
+# ─── Module-level state ─────────────────────────────────────────────────
+
+_current_model_key: str = DEFAULT_MODEL_KEY
+_model = None
+_tokenizer_or_processor = None
+_model_loaded = False
+_model_loading = False
+_load_error: str | None = None
+
+
+def _unload_model() -> None:
+    """Unload current model and free memory."""
+    global _model, _tokenizer_or_processor, _model_loaded
+
+    if _model is not None:
+        del _model
+        _model = None
+    if _tokenizer_or_processor is not None:
+        del _tokenizer_or_processor
+        _tokenizer_or_processor = None
+
+    _model_loaded = False
+    gc.collect()
+
+    try:
+        import torch
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+    except ImportError:
+        pass
+
+
+def load_model(model_key: str | None = None) -> None:
+    """Load a model by key. Unloads the previous model first."""
+    global _model, _tokenizer_or_processor, _model_loaded, _model_loading
+    global _load_error, _current_model_key
+
+    if model_key is None:
+        model_key = _current_model_key
+
+    if model_key not in MODEL_CONFIGS:
+        _load_error = f"Unknown model: {model_key}"
+        logger.error(_load_error)
+        return
+
+    # Skip if already loading or already loaded with same key
+    if _model_loading:
+        return
+    if _model_loaded and _current_model_key == model_key:
+        return
+
+    _model_loading = True
+    _load_error = None
+
+    # Unload previous model if switching
+    if _model_loaded and _current_model_key != model_key:
+        logger.info("Switching model from %s to %s", _current_model_key, model_key)
+        _unload_model()
+
+    _current_model_key = model_key
+    config = MODEL_CONFIGS[model_key]
+    model_id = config["id"]
+
+    try:
+        import torch
+
+        dtype = torch.float16 if torch.cuda.is_available() else torch.float32
+        device_map = "auto" if torch.cuda.is_available() else None
+
+        if config["type"] == "vlm":
+            _load_vlm_model(model_id, dtype, device_map)
+        else:
+            _load_text_model(model_id, dtype, device_map)
+
+        _model_loaded = True
+        logger.info("%s model loaded successfully.", config["name"])
+
+    except Exception as exc:
+        _load_error = str(exc)
+        logger.exception("Failed to load model %s: %s", model_id, exc)
+    finally:
+        _model_loading = False
+
+
+def _load_text_model(model_id: str, dtype, device_map) -> None:
+    """Load a text-only model (AutoModelForCausalLM + AutoTokenizer)."""
+    global _model, _tokenizer_or_processor
+
+    from transformers import AutoModelForCausalLM, AutoTokenizer
+
+    logger.info("Loading %s (text model)...", model_id)
+
+    _tokenizer_or_processor = 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()
+
+
+def _load_vlm_model(model_id: str, dtype, device_map) -> None:
+    """Load a vision-language model (AutoModelForImageTextToText + AutoProcessor)."""
+    global _model, _tokenizer_or_processor
+
+    try:
+        from transformers import AutoModelForImageTextToText, AutoProcessor
+    except ImportError:
+        # Fallback for older transformers
+        logger.warning("AutoModelForImageTextToText not found, trying AutoModel...")
+        from transformers import AutoModel as AutoModelForImageTextToText
+        from transformers import AutoProcessor
+
+    logger.info("Loading %s (VLM)...", model_id)
+
+    _tokenizer_or_processor = AutoProcessor.from_pretrained(
+        model_id,
+        trust_remote_code=True,
+    )
+    _model = AutoModelForImageTextToText.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()
+
+
+def start_background_load(model_key: str | None = None) -> threading.Thread:
+    """Start loading the model in a background daemon thread."""
+    thread = threading.Thread(target=load_model, args=(model_key,), daemon=True)
+    thread.start()
+    return thread
+
+
+def switch_model(model_key: str) -> dict[str, Any]:
+    """Switch to a different model. Returns status immediately, loads in background."""
+    global _current_model_key
+
+    if model_key not in MODEL_CONFIGS:
+        return {"success": False, "message": f"Unknown model: {model_key}"}
+
+    if _current_model_key == model_key and _model_loaded:
+        return {"success": True, "message": f"Already using {MODEL_CONFIGS[model_key]['name']}"}
+
+    _current_model_key = model_key
+    _model_loaded = False
+
+    # Start loading in background
+    start_background_load(model_key)
+
+    config = MODEL_CONFIGS[model_key]
+    return {
+        "success": True,
+        "message": f"Switching to {config['name']}...",
+        "model_key": model_key,
+        "model_name": config["name"],
+    }
+
+
+def get_model_status() -> dict[str, Any]:
+    """Return current model loading status."""
+    config = MODEL_CONFIGS.get(_current_model_key, {})
+    if _model_loaded:
+        return {
+            "status": "ready",
+            "message": f"{config.get('name', 'Model')} loaded and ready",
+            "model_key": _current_model_key,
+            "model_name": config.get("name", ""),
+            "model_type": config.get("type", "text"),
+        }
+    if _model_loading:
+        return {
+            "status": "loading",
+            "message": f"Loading {config.get('name', 'model')}... (this may take a few minutes)",
+            "model_key": _current_model_key,
+            "model_name": config.get("name", ""),
+            "model_type": config.get("type", "text"),
+        }
+    if _load_error:
+        return {
+            "status": "error",
+            "message": f"Model load error: {_load_error}",
+            "model_key": _current_model_key,
+            "model_name": config.get("name", ""),
+            "model_type": config.get("type", "text"),
+        }
+    return {
+        "status": "unknown",
+        "message": "Model not initialized",
+        "model_key": _current_model_key,
+        "model_name": config.get("name", ""),
+        "model_type": config.get("type", "text"),
+    }
+
+
+def get_model():
+    """Return the loaded model instance (or None)."""
+    return _model
+
+
+def get_tokenizer_or_processor():
+    """Return the loaded tokenizer or processor (or None)."""
+    return _tokenizer_or_processor
+
+
+def is_model_loaded() -> bool:
+    """Return True if the model has been loaded successfully."""
+    return _model_loaded
+
+
+def get_current_model_key() -> str:
+    """Return the key of the currently selected model."""
+    return _current_model_key
+
+
+def get_current_model_type() -> str:
+    """Return 'text' or 'vlm' for the current model."""
+    return MODEL_CONFIGS.get(_current_model_key, {}).get("type", "text")

code/server/__init__.py

@@ -0,0 +1 @@
+"""FastAPI / Gradio server routes."""

code/server/chat_helpers.py

@@ -0,0 +1,110 @@
+"""Chat helper functions — history conversion, prompt building, iteration context."""
+
+from __future__ import annotations
+
+from typing import Any
+
+from code.config.constants import SYSTEM_PROMPT
+from code.execution.code_extractor import strip_thinking_blocks
+
+
+def chat_history_to_messages(history: list[dict[str, str]]) -> list[dict[str, Any]]:
+    """Convert chat history list to messages format for the model.
+
+    Prepends the system prompt and strips thinking blocks from
+    assistant messages.
+    """
+    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:
+    """Truncate text to a character limit with a note."""
+    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:
+    """Build a context string from previous execution results.
+
+    This allows the model to reference prior code, stdout, and stderr
+    when the user asks to iterate or debug.
+    """
+    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,
+    search_context: str = "",
+) -> str:
+    """Build the full user prompt with language, framework, search, and iteration context."""
+    iter_ctx = iteration_context(execution_context)
+    context_block = f"\n\n{iter_ctx}" if iter_ctx else ""
+
+    search_block = ""
+    if search_context:
+        search_block = (
+            f"\n\n{search_context}\n\n"
+            "Use the above search results to inform your code generation if relevant."
+        )
+
+    framework_hint = f" using {target_framework}" if target_framework else ""
+
+    gradio_hint = ""
+    if target_framework == "Gradio":
+        gradio_hint = (
+            "\n\nIMPORTANT: This is a Gradio app. Create a complete Python script that:\n"
+            "- Imports gradio as gr\n"
+            "- Defines the UI using gr.Interface() or gr.Blocks()\n"
+            "- Includes all processing logic inline\n"
+            "- Calls .launch(server_name='0.0.0.0', server_port=7860) at the end\n"
+            "- Uses only standard library + gradio + common packages (PIL, matplotlib, numpy)\n"
+            "- Make the UI clean, modern, and functional"
+        )
+
+    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"{gradio_hint}"
+        f"{search_block}"
+        f"{context_block}\n\n"
+        f"User request:\n{prompt}"
+    )

code/server/routes.py

@@ -0,0 +1,553 @@
+"""FastAPI / Gradio Server routes.
+
+Defines all HTTP and API endpoints:
+- GET /            → serves the index.html frontend
+- GET /api/model-status → model loading status
+- GET /images/{f}  → serve generated plot images
+- GET /download/{f} → serve project ZIP downloads
+- API web_search   → Google search scraping
+- API chat         → streaming chat with code execution
+- API push_hf      → push to HuggingFace Hub
+- API switch_model → switch between loaded models
+- API upload_image → upload image for VLM inference
+"""
+
+from __future__ import annotations
+
+import base64
+import json
+import logging
+import os
+import tempfile
+from pathlib import Path
+from typing import Any
+
+from fastapi.responses import HTMLResponse, FileResponse
+from gradio import Server
+
+from code.config.constants import (
+    APP_TITLE,
+    DEFAULT_MODEL_KEY,
+    EXAMPLE_PROMPTS,
+    LANGUAGE_OPTIONS,
+    MODEL_CONFIGS,
+    MODEL_URL,
+    PY_TIMEOUT_S,
+)
+from code.execution.code_extractor import (
+    build_iframe,
+    extract_code,
+    extract_multi_file,
+    is_gradio_code,
+    normalize_language,
+    strip_thinking_blocks,
+)
+from code.execution.gradio_runner import run_gradio_app, stop_gradio_app
+from code.execution.python_runner import run_python
+from code.huggingface.push import create_project_zip, push_to_huggingface
+from code.model.loader import (
+    get_model_status,
+    is_model_loaded,
+    get_current_model_key,
+    get_current_model_type,
+    switch_model,
+)
+from code.model.inference import call_model
+from code.server.chat_helpers import chat_history_to_messages, targeted_prompt
+from code.websearch.google_scraper import web_search_google, format_search_results
+
+logger = logging.getLogger(__name__)
+
+# ─── Served Files Registry ──────────────────────────────────────────────
+
+_served_files: dict[str, str] = {}
+
+# ─── Uploaded Images Registry ───────────────────────────────────────────
+
+_uploaded_images: dict[str, str] = {}
+
+# ─── Server Instance ────────────────────────────────────────────────────
+
+app = Server()
+
+
+# ─── HTTP Routes ────────────────────────────────────────────────────────
+
+
+@app.get("/", response_class=HTMLResponse)
+async def homepage():
+    """Serve the index.html frontend with runtime config injected."""
+    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_CONFIGS[DEFAULT_MODEL_KEY]["id"],
+        "model_configs": {k: {"name": v["name"], "type": v["type"], "description": v["description"]} for k, v in MODEL_CONFIGS.items()},
+        "model_url": MODEL_URL,
+        "languages": LANGUAGE_OPTIONS,
+        "examples": [
+            {"label": label, "prompt": prompt, "language": lang, "framework": fw}
+            for label, prompt, lang, fw in EXAMPLE_PROMPTS
+        ],
+        "default_model": "minicpm5-1b",
+    })
+    content = content.replace("__RUNTIME_CONFIG__", config)
+    return content
+
+
+@app.get("/api/model-status")
+async def model_status_endpoint():
+    """Return the current model loading status."""
+    return get_model_status()
+
+
+@app.get("/images/{filename}")
+async def serve_image(filename: str):
+    """Serve a generated plot image by filename."""
+    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):
+    """Serve a project ZIP download by filename."""
+    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.get("/uploaded-images/{image_id}")
+async def serve_uploaded_image(image_id: str):
+    """Serve an uploaded image by its ID."""
+    path = _uploaded_images.get(image_id)
+    if path and os.path.exists(path):
+        return FileResponse(path, media_type="image/png")
+    return HTMLResponse("Not found", status_code=404)
+
+
+# ─── Gradio API Endpoints ──────────────────────────────────────────────
+
+
+@app.api(name="switch_model", concurrency_limit=1)
+def handle_switch_model(model_key: str) -> str:
+    """Switch to a different model."""
+    result = switch_model(model_key)
+    yield json.dumps(result)
+
+
+@app.api(name="upload_image", concurrency_limit=4)
+def handle_upload_image(image_data: str) -> str:
+    """Upload a base64-encoded image for VLM inference.
+
+    Returns an image ID that can be referenced in chat.
+    """
+    try:
+        if not image_data:
+            yield json.dumps({"success": False, "message": "No image data provided"})
+            return
+
+        # Handle data URI format: data:image/png;base64,...
+        if image_data.startswith("data:"):
+            # Extract the base64 part
+            parts = image_data.split(",", 1)
+            if len(parts) == 2:
+                image_data = parts[1]
+
+        # Decode base64
+        image_bytes = base64.b64decode(image_data)
+
+        # Save to temp file
+        img_dir = tempfile.mkdtemp(prefix="uploaded_img_")
+        image_id = f"img_{os.getpid()}_{int(os.urandom(4).hex(), 16)}"
+        img_path = os.path.join(img_dir, f"{image_id}.png")
+        Path(img_path).write_bytes(image_bytes)
+
+        # Register for serving
+        _uploaded_images[image_id] = img_path
+
+        # Create a URL for the image that the VLM can access
+        image_url = f"/uploaded-images/{image_id}"
+
+        # Also save as a file:// URL for local VLM access
+        file_url = f"file://{img_path}"
+
+        yield json.dumps({
+            "success": True,
+            "image_id": image_id,
+            "image_url": image_url,
+            "file_url": file_url,
+            "message": "Image uploaded successfully",
+        })
+
+    except Exception as exc:
+        logger.exception("Image upload failed")
+        yield json.dumps({
+            "success": False,
+            "message": f"Upload failed: {str(exc)}",
+        })
+
+
+@app.api(name="web_search", concurrency_limit=4)
+def handle_web_search(query: str) -> str:
+    """Search the web using Google scraping. No API key needed."""
+    query = (query or "").strip()
+    if not query:
+        yield json.dumps({"success": False, "results": [], "message": "Empty search query"})
+        return
+
+    try:
+        results = web_search_google(query, num_results=8)
+        formatted = format_search_results(results)
+
+        yield json.dumps({
+            "success": True,
+            "results": results,
+            "formatted": formatted,
+            "message": f"Found {len(results)} results",
+        })
+    except Exception as exc:
+        logger.exception("Web search failed")
+        yield json.dumps({
+            "success": False,
+            "results": [],
+            "message": f"Search failed: {str(exc)}",
+        })
+
+
+@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,
+    search_enabled: str = "false",
+    image_url: 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,
+    })
+
+    # Web search if enabled
+    search_context = ""
+    if search_enabled.lower() == "true":
+        yield json.dumps({
+            "type": "status",
+            "status_text": "Searching the web...",
+            "status_state": "working",
+            "history": history,
+            "execution": execution_context,
+        })
+        search_results = web_search_google(prompt, num_results=6)
+        if search_results:
+            search_context = format_search_results(search_results)
+            yield json.dumps({
+                "type": "search_results",
+                "status_text": f"Found {len(search_results)} results, generating code...",
+                "status_state": "working",
+                "history": history,
+                "execution": execution_context,
+                "search_results": search_results,
+            })
+
+    # Build messages for model
+    model_history = list(history[:-1])
+    model_history[-1] = {
+        "role": "user",
+        "content": targeted_prompt(
+            prompt, target_language, target_framework, execution_context, search_context
+        ),
+    }
+    messages = chat_history_to_messages(model_history)
+
+    # Determine image URL for VLM
+    vlm_image_url = image_url.strip() if image_url else None
+
+    final_response = ""
+    for partial in call_model(messages, image_url=vlm_image_url):
+        final_response = partial
+        # Strip thinking blocks so chat only shows clean output
+        clean_partial = strip_thinking_blocks(partial)
+        history[-1]["content"] = clean_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 (use cleaned version)
+    clean_response = strip_thinking_blocks(final_response)
+    code, fence_lang = extract_code(clean_response)
+    target = normalize_language(target_language, fence_lang)
+
+    # Also try multi-file extraction
+    multi_files = extract_multi_file(clean_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 code
+    stdout, stderr, image_path, status_text, status_state = "", "", None, "Preview ready", "success"
+    is_gradio = False
+    gradio_url = None
+
+    if target == "python" and code:
+        if is_gradio_code(code) or target_framework == "Gradio":
+            is_gradio = True
+            gradio_result = run_gradio_app(code)
+            if gradio_result["success"]:
+                gradio_url = gradio_result["url"]
+                status_text = f"Gradio app running at {gradio_url}"
+                status_state = "success"
+                stderr = f"Gradio app launched successfully at {gradio_url}"
+            else:
+                status_text = "Gradio launch failed"
+                status_state = "error"
+                stderr = gradio_result.get("stderr", gradio_result.get("message", "Launch failed"))
+        else:
+            result = run_python(code)
+            if result.timed_out:
+                stdout, stderr, image_path = result.stdout, result.stderr, result.image_path
+                status_text = f"Timed out after {PY_TIMEOUT_S}s"
+                status_state = "error"
+            elif result.returncode:
+                stdout, stderr, image_path = result.stdout, result.stderr, result.image_path
+                status_text = "Finished with errors"
+                status_state = "error"
+            else:
+                stdout, stderr, image_path = result.stdout, result.stderr, result.image_path
+                status_text = "Ran successfully"
+                status_state = "success"
+
+    # Register image for serving
+    image_url_out = None
+    if image_path:
+        filename = os.path.basename(image_path)
+        _served_files[f"img:{filename}"] = image_path
+        image_url_out = f"/images/{filename}"
+
+    # Register code for download
+    download_url = None
+    project_files = dict(multi_files) if multi_files else {}
+
+    # Rename main.py → app.py for Python/Gradio projects (HF Spaces expects app.py)
+    if project_files and "main.py" in project_files and "app.py" not in project_files:
+        if target == "python" or is_gradio:
+            project_files["app.py"] = project_files.pop("main.py")
+
+    # If project_files is empty but we have single code, add it
+    if not project_files and code:
+        if target == "python":
+            fname = "app.py" if (is_gradio or is_gradio_code(code)) else "main.py"
+        elif target in {"web", "html", "javascript"}:
+            fname = "index.html"
+        else:
+            fname = f"main.{fence_lang or 'txt'}"
+        project_files = {fname: code}
+
+    if project_files:
+        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_out,
+        "image_path": image_path,
+        "status": status_text,
+        "language": fence_lang or target,
+        "suggested_tab": "preview" if (image_path or is_web or is_gradio) else "console",
+        "download_url": download_url,
+        "project_files": project_files,
+        "is_web": is_web,
+        "web_code": web_code,
+        "is_gradio": is_gradio,
+        "gradio_url": gradio_url,
+    }
+
+    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 = "auto",
+    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 = dict(execution_context.get("project_files", {}) or {})
+        code = execution_context.get("code", "")
+
+        # If project_files is empty but we have code, build files from code
+        if not project_files and code:
+            lang = execution_context.get("language", "python")
+            is_gradio = execution_context.get("is_gradio", False)
+
+            # Map language to entry file — JS/TS single-files get wrapped for Docker
+            if lang in ("javascript", "js", "typescript", "ts"):
+                # For single-file JS/TS code that is HTML (vanilla), keep as index.html
+                if "<!doctype" in code.lower() or "<html" in code.lower():
+                    filename = "index.html"
+                else:
+                    filename = "index.js"
+            elif lang in ("html", "web"):
+                filename = "index.html"
+            else:
+                ext_map = {
+                    "python": "app.py", "py": "app.py",
+                }
+                filename = ext_map.get(lang, "app.py")
+
+            project_files = {filename: code}
+
+            # Auto-detect SDK for Gradio apps
+            if is_gradio or is_gradio_code(code):
+                space_sdk = "gradio"
+
+        # If still no files, try extracting from the raw response
+        if not project_files and code:
+            project_files = extract_multi_file(code)
+
+        if not project_files:
+            yield json.dumps({
+                "success": False,
+                "message": "No code to push. Generate some code first.",
+                "url": "",
+            })
+            return
+
+        # "auto" SDK means let push_to_huggingface decide
+        if space_sdk == "auto":
+            space_sdk = "static"  # push_to_huggingface will auto-detect from files
+
+        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": "",
+        })
+
+
+def get_app() -> Server:
+    """Return the configured Gradio Server app instance."""
+    return app

code/websearch/__init__.py

@@ -0,0 +1 @@
+"""Web search (Google scraping, no API)."""

code/websearch/google_scraper.py

@@ -0,0 +1,288 @@
+"""Web search via scraping — no API key needed.
+
+Strategy:
+1. Primary: DuckDuckGo HTML (more scraper-friendly, fewer captchas)
+2. Fallback: Google search with robust multi-selector parsing
+"""
+
+from __future__ import annotations
+
+import logging
+import re
+import urllib.parse
+
+logger = logging.getLogger(__name__)
+
+# Common browser-like headers to avoid bot detection
+_BROWSER_HEADERS = {
+    "User-Agent": (
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+        "AppleWebKit/537.36 (KHTML, like Gecko) "
+        "Chrome/125.0.0.0 Safari/537.36"
+    ),
+    "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+    "Accept-Language": "en-US,en;q=0.5",
+    "Accept-Encoding": "gzip, deflate",
+    "DNT": "1",
+    "Connection": "keep-alive",
+    "Upgrade-Insecure-Requests": "1",
+}
+
+
+def web_search_google(query: str, num_results: int = 8) -> list[dict[str, str]]:
+    """Search the web by scraping. No API key needed.
+
+    Tries DuckDuckGo first (more scraper-friendly),
+    then falls back to Google if DuckDuckGo returns nothing.
+
+    Returns a list of dicts with keys: title, url, snippet.
+    """
+    results = _search_duckduckgo(query, num_results)
+    if results:
+        return results
+
+    results = _search_google(query, num_results)
+    return results
+
+
+def _search_duckduckgo(query: str, num_results: int) -> list[dict[str, str]]:
+    """Search DuckDuckGo HTML version — very scraper-friendly."""
+    try:
+        import requests
+        from bs4 import BeautifulSoup
+
+        encoded_query = urllib.parse.quote_plus(query)
+        url = f"https://html.duckduckgo.com/html/?q={encoded_query}"
+
+        headers = {**_BROWSER_HEADERS, "Referer": "https://duckduckgo.com/"}
+
+        resp = requests.get(url, headers=headers, timeout=10, allow_redirects=True)
+        resp.raise_for_status()
+
+        soup = BeautifulSoup(resp.text, "html.parser")
+        results: list[dict[str, str]] = []
+
+        # DuckDuckGo HTML uses .result blocks
+        for result_div in soup.select(".result"):
+            title_el = result_div.select_one(".result__title a, .result__a")
+            snippet_el = result_div.select_one(".result__snippet")
+
+            if not title_el:
+                continue
+
+            title = title_el.get_text(strip=True)
+            # DDG uses redirect URLs like //duckduckgo.com/l/?uddg=...
+            href = title_el.get("href", "")
+
+            real_url = _extract_ddg_url(href)
+            if not real_url:
+                continue
+
+            # Skip internal URLs
+            if any(domain in real_url for domain in ["duckduckgo.com", "duck.co"]):
+                continue
+
+            snippet = snippet_el.get_text(strip=True) if snippet_el else ""
+
+            if title and real_url:
+                results.append({
+                    "title": title,
+                    "url": real_url,
+                    "snippet": snippet,
+                })
+
+            if len(results) >= num_results:
+                break
+
+        logger.info("DuckDuckGo search for '%s' returned %d results", query, len(results))
+        return results
+
+    except ImportError:
+        logger.warning("requests or beautifulsoup4 not installed for web search")
+        return []
+    except Exception as exc:
+        logger.warning("DuckDuckGo search failed: %s", exc)
+        return []
+
+
+def _extract_ddg_url(href: str) -> str | None:
+    """Extract the real URL from a DuckDuckGo redirect link."""
+    if not href:
+        return None
+
+    # Direct HTTP URL
+    if href.startswith("http"):
+        return href
+
+    # DDG redirect: //duckduckgo.com/l/?uddg=<encoded_url>&...
+    if "uddg=" in href:
+        parsed = urllib.parse.urlparse(href)
+        params = urllib.parse.parse_qs(parsed.query)
+        uddg = params.get("uddg", [])
+        if uddg:
+            return urllib.parse.unquote(uddg[0])
+
+    # Sometimes it's a relative redirect
+    if href.startswith("//"):
+        return "https:" + href
+
+    return None
+
+
+def _search_google(query: str, num_results: int) -> list[dict[str, str]]:
+    """Search Google by scraping the results page. Fallback method."""
+    try:
+        import requests
+        from bs4 import BeautifulSoup
+
+        encoded_query = urllib.parse.quote_plus(query)
+        url = f"https://www.google.com/search?q={encoded_query}&num={num_results + 2}&hl=en"
+
+        headers = {**_BROWSER_HEADERS, "Referer": "https://www.google.com/"}
+
+        session = requests.Session()
+        # First get a cookie from Google
+        session.get("https://www.google.com/", headers=headers, timeout=5)
+
+        resp = session.get(url, headers=headers, timeout=10, allow_redirects=True)
+        resp.raise_for_status()
+
+        soup = BeautifulSoup(resp.text, "html.parser")
+        results: list[dict[str, str]] = []
+
+        # Strategy 1: Modern Google layout — div.g > div.yuRUbf (title+link) + div.VwiC3b (snippet)
+        for g_div in soup.select("div.g"):
+            title_el = g_div.select_one("h3")
+            link_el = g_div.select_one("a[href]")
+            snippet_el = g_div.select_one("div.VwiC3b, span.aCOpRe, div[data-sncf]")
+
+            if not title_el or not link_el:
+                continue
+
+            href = link_el.get("href", "")
+            real_url = _extract_google_url(href)
+            if not real_url:
+                continue
+
+            title = title_el.get_text(strip=True)
+            snippet = snippet_el.get_text(strip=True) if snippet_el else ""
+
+            if title and real_url:
+                results.append({
+                    "title": title,
+                    "url": real_url,
+                    "snippet": snippet,
+                })
+
+            if len(results) >= num_results:
+                break
+
+        # Strategy 2: Fallback — look for any <a> containing an <h3>
+        if not results:
+            for a_tag in soup.find_all("a", href=True):
+                h3 = a_tag.find("h3")
+                if not h3:
+                    continue
+
+                href = a_tag.get("href", "")
+                real_url = _extract_google_url(href)
+                if not real_url:
+                    continue
+
+                title = h3.get_text(strip=True)
+                # Try to find a sibling or nearby snippet
+                snippet = ""
+                parent = a_tag.parent
+                if parent:
+                    for _ in range(3):
+                        parent = parent.parent if parent else None
+                    if parent:
+                        snippet_el = parent.select_one("div.VwiC3b, span.aCOpRe, span.st")
+                        if snippet_el:
+                            snippet = snippet_el.get_text(strip=True)
+
+                if title and real_url:
+                    results.append({
+                        "title": title,
+                        "url": real_url,
+                        "snippet": snippet,
+                    })
+
+                if len(results) >= num_results:
+                    break
+
+        # Strategy 3: Last resort — any <a data-ved> with external href
+        if not results:
+            for a_tag in soup.select("a[data-ved]"):
+                href = a_tag.get("href", "")
+                if not href.startswith("http"):
+                    continue
+                if "google.com" in href:
+                    continue
+
+                title_el = a_tag.select_one("h3, span")
+                title = title_el.get_text(strip=True) if title_el else a_tag.get_text(strip=True)[:100]
+
+                if title and href:
+                    results.append({
+                        "title": title,
+                        "url": href,
+                        "snippet": "",
+                    })
+
+                if len(results) >= num_results:
+                    break
+
+        logger.info("Google search for '%s' returned %d results", query, len(results))
+        return results
+
+    except ImportError:
+        logger.warning("requests or beautifulsoup4 not installed for web search")
+        return []
+    except Exception as exc:
+        logger.warning("Google search failed: %s", exc)
+        return []
+
+
+def _extract_google_url(href: str) -> str | None:
+    """Extract the real URL from a Google search result link."""
+    if not href:
+        return None
+
+    # Google redirect: /url?q=<real_url>&...
+    if href.startswith("/url?q="):
+        parsed = urllib.parse.urlparse(href)
+        params = urllib.parse.parse_qs(parsed.query)
+        q = params.get("q", [])
+        if q:
+            real_url = q[0]
+            if real_url.startswith("http"):
+                return real_url
+
+    # Direct HTTP URL
+    if href.startswith("http"):
+        # Skip Google-internal URLs
+        if any(domain in href for domain in [
+            "google.com", "googleusercontent.com",
+            "youtube.com", "gstatic.com",
+        ]):
+            return None
+        return href
+
+    return None
+
+
+def format_search_results(results: list[dict[str, str]]) -> str:
+    """Format search results into a text block for model context."""
+    if not results:
+        return "No search results found."
+
+    parts = ["Here are the web search results for reference:\n"]
+    for i, r in enumerate(results, 1):
+        parts.append(f"{i}. {r['title']}")
+        parts.append(f"   URL: {r['url']}")
+        if r["snippet"]:
+            parts.append(f"   {r['snippet']}")
+        parts.append("")
+
+    return "\n".join(parts)

index.html

@@ -0,0 +1,2525 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>SoniCoder</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);
+}
+
+.btn-thinking {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--purple);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 5px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 0.5px;
+}
+.btn-thinking:hover {
+  border-color: var(--purple);
+  background: rgba(168,85,247,0.08);
+  text-shadow: var(--glow-purple);
+}
+.btn-thinking.active {
+  border-color: var(--purple);
+  background: rgba(168,85,247,0.15);
+  color: var(--purple);
+  text-shadow: var(--glow-purple);
+}
+
+#model-select {
+  background: var(--bg-deep);
+  border: 1px solid var(--border);
+  color: var(--cyan);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 5px 8px;
+  border-radius: var(--radius);
+  outline: none;
+  cursor: pointer;
+  transition: border-color var(--transition);
+}
+#model-select:focus { border-color: var(--border-focus); }
+#model-select option { background: var(--bg-deep); color: var(--gray-light); }
+
+#btn-attach-image {
+  background: transparent; border: 1px solid var(--border); color: var(--amber);
+  font-family: var(--font-mono); font-size: 14px; padding: 3px 8px;
+  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
+}
+#btn-attach-image:hover {
+  border-color: var(--amber); background: rgba(255,179,0,0.1);
+}
+
+/* ═══════════════════════════════════════════════════════
+   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); float: left; }
+.msg-assistant .msg-body { overflow: hidden; }
+.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; }
+
+/* Hide thinking blocks entirely when toggle is off */
+body.hide-thinking .think-block { display: none; }
+
+/* ─── Search Source Badge (Grok-style) ────────────────────── */
+.search-source-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin: 4px 0 2px;
+  padding: 4px 10px;
+  border-radius: 20px;
+  background: rgba(168, 85, 247, 0.08);
+  border: 1px solid rgba(168, 85, 247, 0.2);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 11px;
+  color: var(--purple);
+  user-select: none;
+  white-space: nowrap;
+}
+.search-source-badge:hover {
+  background: rgba(168, 85, 247, 0.15);
+  border-color: rgba(168, 85, 247, 0.4);
+  box-shadow: 0 0 8px rgba(168, 85, 247, 0.15);
+}
+.search-source-badge .badge-icon {
+  font-size: 13px;
+  line-height: 1;
+}
+.search-source-badge .badge-count {
+  font-weight: 600;
+}
+.search-source-badge .badge-arrow {
+  font-size: 9px;
+  transition: transform 0.2s ease;
+  opacity: 0.6;
+}
+.search-source-badge.open .badge-arrow {
+  transform: rotate(180deg);
+}
+
+.search-source-panel {
+  margin: 0 0 6px;
+  border-radius: 8px;
+  border: 1px solid rgba(168, 85, 247, 0.15);
+  background: rgba(168, 85, 247, 0.03);
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
+  opacity: 0;
+}
+.search-source-panel.open {
+  max-height: 600px;
+  overflow-y: auto;
+  opacity: 1;
+  padding: 8px 10px;
+}
+.search-source-panel::-webkit-scrollbar { width: 4px; }
+.search-source-panel::-webkit-scrollbar-track { background: transparent; }
+.search-source-panel::-webkit-scrollbar-thumb { background: var(--gray-dim); border-radius: 2px; }
+
+.source-item {
+  display: flex;
+  gap: 8px;
+  padding: 6px 4px;
+  border-bottom: 1px solid rgba(168, 85, 247, 0.07);
+  align-items: flex-start;
+}
+.source-item:last-child { border-bottom: none; }
+.source-favicon {
+  width: 16px; height: 16px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  object-fit: contain;
+}
+.source-favicon-placeholder {
+  width: 16px; height: 16px;
+  border-radius: 3px;
+  flex-shrink: 0;
+  margin-top: 2px;
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 8px; color: var(--gray-dim);
+}
+.source-info { flex: 1; min-width: 0; }
+.source-title {
+  font-size: 11px; font-weight: 600; color: var(--cyan);
+  text-decoration: none; display: block;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.source-title:hover { text-decoration: underline; }
+.source-domain {
+  font-size: 9px; color: var(--green-dim);
+  display: block; margin-top: 1px;
+}
+.source-snippet {
+  font-size: 10px; color: var(--gray-mid);
+  line-height: 1.35;
+  margin-top: 2px;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+/* 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-web-search {
+  background: transparent; border: 1px solid var(--purple); color: var(--purple);
+  font-family: var(--font-mono); font-size: 11px; padding: 8px 10px;
+  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-web-search:hover {
+  background: var(--purple); color: white;
+  box-shadow: 0 0 12px rgba(168,85,247,0.3);
+  text-shadow: none;
+}
+
+#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;
+}
+
+/* ═══════════════════════════════════════════════════════
+   SEARCH TAB
+   ═══════════════════════════════════════════════════════ */
+#pane-search { padding: 12px 16px; gap: 12px; overflow-y: auto; }
+
+.search-bar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+#search-input {
+  flex: 1;
+  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);
+}
+#search-input:focus { border-color: var(--border-focus); }
+#search-input::placeholder { color: var(--gray-dim); }
+
+#btn-search-go {
+  background: transparent;
+  border: 1px solid var(--purple);
+  color: var(--purple);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: all var(--transition);
+  letter-spacing: 1px;
+}
+#btn-search-go:hover {
+  background: var(--purple);
+  color: white;
+  text-shadow: none;
+}
+
+.search-result-item {
+  padding: 8px 0;
+  border-bottom: 1px solid var(--border);
+}
+.search-result-item:last-child { border-bottom: none; }
+.search-result-title {
+  color: var(--cyan);
+  font-size: 12px;
+  font-weight: 600;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 2px;
+}
+.search-result-title:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
+.search-result-url {
+  color: var(--green-dim);
+  font-size: 10px;
+  display: block;
+  margin-bottom: 2px;
+  word-break: break-all;
+}
+.search-result-snippet {
+  color: var(--gray-mid);
+  font-size: 11px;
+  line-height: 1.4;
+}
+.search-results-empty {
+  color: var(--gray-dim);
+  font-size: 12px;
+  text-align: center;
+  padding: 40px 20px;
+}
+
+/* Gradio preview */
+.gradio-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  background: rgba(168,85,247,0.15);
+  border: 1px solid var(--purple);
+  border-radius: 10px;
+  font-size: 10px;
+  color: var(--purple);
+  letter-spacing: 0.5px;
+}
+
+#gradio-iframe {
+  display: none;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  border: none;
+}
+
+/* ═══════════════════════════════════════════════════════
+   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">&#9556;&#9552;&#9552;&#9552; FULLSTACK CODE BUILDER &#9552;&#9552;&#9552;&#9562;</div>
+      <div class="header-subtitle">Local AI App Generator | <span id="header-model-name">MiniCPM5-1B</span></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>
+      <select id="model-select" onchange="onModelChange()" title="Switch AI model">
+        <option value="minicpm5-1b">MiniCPM5-1B (text)</option>
+        <option value="minicpm-v-4.6">MiniCPM-V-4.6 (vision)</option>
+      </select>
+      <button id="btn-thinking" class="btn-thinking active" onclick="toggleThinking()" title="Show/hide thinking blocks">🧠 Think</button>
+      <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 &mdash; 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 class="selector-group" id="image-attach-group" style="display:none;">
+            <input type="file" id="image-upload" accept="image/*" style="display:none" onchange="onImageUpload(event)">
+            <button id="btn-attach-image" onclick="document.getElementById('image-upload').click()" title="Attach image (VLM only)">📷</button>
+            <span id="image-attach-name" style="font-size:10px;color:var(--gray-dim);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>
+            <button id="btn-remove-image" onclick="removeImage()" title="Remove image" style="display:none;font-size:10px;color:var(--red);background:none;border:none;cursor:pointer;">✕</button>
+          </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-web-search" onclick="searchAndGenerate()" title="Search web + Generate">&#128269;</button>
+          <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="search" onclick="switchTab('search')">Search</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">
+  &#9484;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9488;
+  &#9474;   &#9585;&#9473;&#9473;&#9473;&#9586;              &#9474;
+  &#9474;   &#9474; &#9654; &#9474;  OUTPUT      &#9474;
+  &#9474;   &#9589;&#9473;&#9473;&#9473;&#9588;              &#9474;
+  &#9492;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9496;</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>
+
+        <!-- Search Pane -->
+        <div class="tab-pane" id="pane-search">
+          <div class="search-bar">
+            <input type="text" id="search-input" placeholder="Search the web... (Google, no API needed)" spellcheck="false">
+            <button id="btn-search-go" onclick="doWebSearch()">&#128269; Search</button>
+          </div>
+          <div id="search-results">
+            <div class="search-results-empty">Search the web for documentation, examples, and references to use in your code.</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="auto">Auto-detect</option>
+                <option value="docker">Docker (React/Next/Vue/Express/Node)</option>
+                <option value="static">Static (HTML/CSS/JS)</option>
+                <option value="gradio">Gradio (Python)</option>
+                <option value="streamlit">Streamlit (Python)</option>
+              </select>
+              <div class="deploy-hint">JS frameworks auto-use Docker with Dockerfile build</div>
+            </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,
+  searchEnabled: false,
+  lastSearchResults: [],
+  currentSearchResults: [],
+  searchPanelExpanded: false,
+  showThinking: true,
+  currentModelKey: 'minicpm5-1b',
+  currentModelType: 'text',
+  uploadedImageFileUrl: '',
+  uploadedImageName: '',
+};
+
+// ═══════════════════════════════════════════════════════
+// INITIALIZATION
+// ═══════════════════════════════════════════════════════
+document.addEventListener('DOMContentLoaded', () => {
+  document.title = CONFIG.app_title || 'SoniCoder';
+
+  try {
+    if (CONFIG.model_url) {
+      document.getElementById('model-pill').href = CONFIG.model_url;
+      document.getElementById('banner-model-link').href = CONFIG.model_url;
+    }
+    const modelId = typeof CONFIG.model_id === 'string' ? CONFIG.model_id : (CONFIG.model_configs ? Object.values(CONFIG.model_configs)[0]?.name || 'AI Model' : 'AI Model');
+    document.getElementById('model-pill-text').textContent = modelId.split('/').pop();
+  } catch (e) { console.warn('Model pill setup error:', e); }
+
+  // Populate language/framework selects
+  populateLanguageSelects();
+
+  // Render examples
+  renderExamples();
+
+  // Welcome message
+  addSystemMessage('Welcome to SoniCoder. 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();
+    }
+  });
+
+  // Search input Enter key
+  document.getElementById('search-input')?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') { e.preventDefault(); doWebSearch(); }
+  });
+
+  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 model info from server response
+      if (data.model_key) state.currentModelKey = data.model_key;
+      if (data.model_type) state.currentModelType = data.model_type;
+      if (data.model_name) {
+        document.getElementById('model-pill-text').textContent = data.model_name;
+        document.getElementById('header-model-name').textContent = data.model_name;
+      }
+      // Show/hide image upload based on model type
+      const imageGroup = document.getElementById('image-attach-group');
+      if (state.currentModelType === 'vlm') {
+        imageGroup.style.display = 'flex';
+      } else {
+        imageGroup.style.display = 'none';
+      }
+      // Sync model selector
+      const modelSelect = document.getElementById('model-select');
+      if (modelSelect && data.model_key) modelSelect.value = data.model_key;
+      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';
+    }
+
+    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 (!langSelect || !fwSelect) return;
+
+  // Fallback languages if CONFIG not loaded
+  const languages = CONFIG.languages || [
+    ["Python", ["Gradio", "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"]],
+  ];
+
+  languages.forEach((entry) => {
+    const lang = Array.isArray(entry) ? entry[0] : entry;
+    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 languages = CONFIG.languages || [];
+  const entry = languages.find((e) => (Array.isArray(e) ? e[0] : e) === selectedLang);
+  if (entry && Array.isArray(entry) && entry[1]) {
+    entry[1].forEach((fw) => {
+      const opt = document.createElement('option');
+      opt.value = fw;
+      opt.textContent = fw;
+      fwSelect.appendChild(opt);
+    });
+    state.targetFramework = entry[1][0];
+  }
+
+  fwSelect.onchange = () => {
+    state.targetFramework = fwSelect.value;
+    autoSelectSDK(selectedLang, fwSelect.value);
+  };
+
+  // Auto-select SDK based on language/framework
+  autoSelectSDK(selectedLang, fwSelect.value);
+}
+
+function autoSelectSDK(lang, framework) {
+  const sdkSelect = document.getElementById('hf-space-sdk');
+  if (!sdkSelect) return;
+
+  const jsLangs = ['JavaScript', 'TypeScript'];
+  const jsFrameworks = ['React', 'Next.js', 'Vue.js', 'Express.js', 'Node.js', 'NestJS'];
+  const pythonFrameworks = ['Gradio', 'Streamlit', 'Flask', 'Django', 'FastAPI'];
+
+  if (jsLangs.includes(lang) || jsFrameworks.includes(framework)) {
+    // JS frameworks need Docker
+    if (jsFrameworks.includes(framework) || jsLangs.includes(lang)) {
+      sdkSelect.value = 'docker';
+    }
+  } else if (framework === 'Gradio') {
+    sdkSelect.value = 'gradio';
+  } else if (framework === 'Streamlit') {
+    sdkSelect.value = 'streamlit';
+  } else if (lang === 'Python' && pythonFrameworks.includes(framework)) {
+    sdkSelect.value = 'gradio';
+  } else if (lang === 'HTML/CSS/JS' || framework === 'Vanilla' || framework === 'Tailwind CSS' || framework === 'Bootstrap') {
+    sdkSelect.value = 'static';
+  } else {
+    sdkSelect.value = 'auto';
+  }
+}
+
+// ═══════════════════════════════════════════════════════
+// 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><div class="msg-body"><div class="search-source-container"></div><span class="msg-content streaming-cursor"></span></div>`;
+  container.appendChild(div);
+  state.reasoningExpanded = false;
+  state.currentSearchResults = [];
+  state.searchPanelExpanded = 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 !== 'search' && 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 !== 'search' && state.activeTab !== 'deploy') {
+      switchTab('preview', { forcePreviewReload: true });
+    } else {
+      iframe.srcdoc = '';
+    }
+  } else if (execution.is_gradio && execution.gradio_url) {
+    // Gradio app handling
+    placeholder.style.display = 'none';
+    img.style.display = 'none';
+    iframe.style.display = 'block';
+    fsBtn.style.display = 'block';
+    // Show Gradio badge
+    const badge = document.createElement('span');
+    badge.className = 'gradio-badge';
+    badge.innerHTML = '\u26a1 Gradio';
+    const codeTabHeader = document.querySelector('.code-tab-header');
+    if (codeTabHeader) codeTabHeader.prepend(badge);
+    state.pendingWebPreviewCode = `<html><body style="margin:0;display:flex;align-items:center;justify-content:center;height:100vh;font-family:monospace;background:#0d1117;color:#a855f7;"><div style="text-align:center"><h2>\u26a1 Gradio App Running</h2><p>App is running at: <a href="${execution.gradio_url}" target="_blank" style="color:#00d4ff">${execution.gradio_url}</a></p><p style="color:#8b949e;font-size:12px">Open in a new tab to interact with the Gradio interface</p></div></body></html>`;
+    state.loadedWebPreviewCode = '';
+    state.scheduledWebPreviewCode = '';
+    switchTab('preview', { forcePreviewReload: true });
+  } 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, state.searchEnabled ? 'true' : 'false', state.uploadedImageFileUrl || '']
+      })
+    });
+
+    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');
+
+  // Handle search results (show inline source badge)
+  if (payload.type === 'search_results' && payload.search_results) {
+    state.currentSearchResults = payload.search_results;
+    state.lastSearchResults = payload.search_results;
+    renderSearchSourceBadge(payload.search_results, false);
+    // Also render in the Search tab
+    renderSearchResults(payload.search_results);
+  }
+
+  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 || 'SoniCoder'}.`);
+}
+
+function toggleThinking() {
+  state.showThinking = !state.showThinking;
+  const btn = document.getElementById('btn-thinking');
+  if (state.showThinking) {
+    btn.classList.add('active');
+    document.body.classList.remove('hide-thinking');
+    btn.textContent = '🧠 Think';
+  } else {
+    btn.classList.remove('active');
+    document.body.classList.add('hide-thinking');
+    btn.textContent = '🧠 Think';
+  }
+}
+
+// ═══════════════════════════════════════════════════════
+// MODEL SWITCHING
+// ═══════════════════════════════════════════════════════
+async function onModelChange() {
+  const select = document.getElementById('model-select');
+  const modelKey = select.value;
+  if (modelKey === state.currentModelKey) return;
+
+  const isVLM = modelKey === 'minicpm-v-4.6';
+  const imageGroup = document.getElementById('image-attach-group');
+  if (isVLM) {
+    imageGroup.style.display = 'flex';
+  } else {
+    imageGroup.style.display = 'none';
+    removeImage();
+  }
+
+  addSystemMessage(`Switching model to ${select.options[select.selectedIndex].text}...`);
+  renderStatus('Switching model...', 'working');
+
+  try {
+    const resp = await fetch('/gradio_api/call/switch_model', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ data: [modelKey] })
+    });
+    const { event_id } = await resp.json();
+    const eventSource = new EventSource(`/gradio_api/call/switch_model/${event_id}`);
+
+    eventSource.addEventListener('complete', (e) => {
+      const dataArray = JSON.parse(e.data);
+      const result = JSON.parse(dataArray[0]);
+      if (result.success) {
+        state.currentModelKey = modelKey;
+        state.currentModelType = isVLM ? 'vlm' : 'text';
+        const name = isVLM ? 'MiniCPM-V-4.6' : 'MiniCPM5-1B';
+        document.getElementById('model-pill-text').textContent = name;
+        document.getElementById('header-model-name').textContent = name;
+        addSystemMessage(`Switched to ${name}. Model is loading in background...`);
+        // Poll for model ready
+        pollModelStatus();
+      } else {
+        addSystemMessage(`Failed to switch: ${result.message}`);
+        select.value = state.currentModelKey;
+      }
+      eventSource.close();
+    });
+    eventSource.addEventListener('error', () => {
+      addSystemMessage('Model switch failed');
+      select.value = state.currentModelKey;
+      eventSource.close();
+    });
+  } catch (err) {
+    addSystemMessage(`Switch error: ${err.message}`);
+    select.value = state.currentModelKey;
+  }
+}
+
+function pollModelStatus() {
+  const interval = setInterval(async () => {
+    try {
+      const resp = await fetch('/api/model-status');
+      const status = await resp.json();
+      if (status.status === 'ready') {
+        state.modelReady = true;
+        const dot = document.getElementById('model-dot');
+        dot.className = 'dot';
+        dot.style.background = 'var(--success)';
+        dot.style.boxShadow = '0 0 6px var(--success)';
+        renderStatus('Ready', 'success');
+        setTimeout(() => renderStatus('Idle', 'idle'), 2000);
+        clearInterval(interval);
+      } else if (status.status === 'error') {
+        state.modelReady = false;
+        renderStatus('Model error', 'error');
+        clearInterval(interval);
+      }
+    } catch { clearInterval(interval); }
+  }, 2000);
+}
+
+// ═══════════════════════════════════════════════════════
+// IMAGE UPLOAD (VLM)
+// ═══════════════════════════════════════════════════════
+async function onImageUpload(event) {
+  const file = event.target.files[0];
+  if (!file) return;
+
+  state.uploadedImageName = file.name;
+  document.getElementById('image-attach-name').textContent = file.name;
+  document.getElementById('btn-remove-image').style.display = 'inline';
+
+  // Convert to base64
+  const reader = new FileReader();
+  reader.onload = async function(e) {
+    const base64Data = e.target.result;
+
+    // Upload to server
+    try {
+      const resp = await fetch('/gradio_api/call/upload_image', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ data: [base64Data] })
+      });
+      const { event_id } = await resp.json();
+      const eventSource = new EventSource(`/gradio_api/call/upload_image/${event_id}`);
+
+      eventSource.addEventListener('complete', (ev) => {
+        const dataArray = JSON.parse(ev.data);
+        const result = JSON.parse(dataArray[0]);
+        if (result.success) {
+          state.uploadedImageFileUrl = result.file_url;
+          document.getElementById('image-attach-name').textContent = '✓ ' + file.name;
+        } else {
+          document.getElementById('image-attach-name').textContent = '✗ Upload failed';
+        }
+        eventSource.close();
+      });
+      eventSource.addEventListener('error', () => {
+        document.getElementById('image-attach-name').textContent = '✗ Upload error';
+        eventSource.close();
+      });
+    } catch (err) {
+      document.getElementById('image-attach-name').textContent = '✗ Error';
+    }
+  };
+  reader.readAsDataURL(file);
+}
+
+function removeImage() {
+  state.uploadedImageFileUrl = '';
+  state.uploadedImageName = '';
+  document.getElementById('image-upload').value = '';
+  document.getElementById('image-attach-name').textContent = '';
+  document.getElementById('btn-remove-image').style.display = 'none';
+}
+
+// ═══════════════════════════════════════════════════════
+// WEB SEARCH
+// ═══════════════════════════════════════════════════════
+async function doWebSearch() {
+  const query = document.getElementById('search-input').value.trim();
+  if (!query) return;
+
+  const resultsContainer = document.getElementById('search-results');
+  resultsContainer.innerHTML = '<div class="search-results-empty" style="color:var(--amber);">Searching...</div>';
+
+  try {
+    const resp = await fetch('/gradio_api/call/web_search', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ data: [query] })
+    });
+    const { event_id } = await resp.json();
+    const eventSource = new EventSource(`/gradio_api/call/web_search/${event_id}`);
+
+    eventSource.addEventListener('complete', (e) => {
+      const dataArray = JSON.parse(e.data);
+      const result = JSON.parse(dataArray[0]);
+      if (result.success) {
+        state.lastSearchResults = result.results;
+        renderSearchResults(result.results);
+      } else {
+        resultsContainer.innerHTML = `<div class="search-results-empty">${escapeHtml(result.message)}</div>`;
+      }
+      eventSource.close();
+    });
+    eventSource.addEventListener('error', (e) => {
+      resultsContainer.innerHTML = '<div class="search-results-empty">Search failed</div>';
+      eventSource.close();
+    });
+  } catch (err) {
+    resultsContainer.innerHTML = `<div class="search-results-empty">Error: ${err.message}</div>`;
+  }
+}
+
+function searchAndGenerate() {
+  const input = document.getElementById('chat-input');
+  const prompt = input.value.trim();
+  if (!prompt || state.isGenerating) return;
+  input.value = '';
+  autoResize();
+  state.searchEnabled = true;
+  sendMessage(prompt);
+  // Reset after sending
+  state.searchEnabled = false;
+}
+
+function renderSearchResults(results) {
+  const container = document.getElementById('search-results');
+  if (!results || results.length === 0) {
+    container.innerHTML = '<div class="search-results-empty">No results found.</div>';
+    return;
+  }
+  let html = '';
+  results.forEach((r) => {
+    html += `<div class="search-result-item">
+      <a class="search-result-title" href="${escapeHtml(r.url)}" target="_blank" rel="noopener">${escapeHtml(r.title)}</a>
+      <span class="search-result-url">${escapeHtml(r.url)}</span>
+      <div class="search-result-snippet">${escapeHtml(r.snippet)}</div>
+    </div>`;
+  });
+  container.innerHTML = html;
+}
+
+// ═══════════════════════════════════════════════════════
+// SEARCH SOURCE BADGE (Grok-style inline in chat)
+// ═══════════════════════════════════════════════════════
+function renderSearchSourceBadge(results, expanded) {
+  const div = document.getElementById('current-assistant-msg');
+  if (!div) return;
+  const container = div.querySelector('.search-source-container');
+  if (!container || !results || results.length === 0) return;
+
+  const count = results.length;
+  const openClass = expanded ? ' open' : '';
+
+  // Build source items HTML
+  let sourceItems = '';
+  results.forEach((r) => {
+    let domain = '';
+    try { domain = new URL(r.url).hostname.replace('www.', ''); } catch(e) { domain = r.host_name || r.url; }
+    const faviconUrl = r.favicon || `https://www.google.com/s2/favicons?domain=${domain}&sz=16`;
+    sourceItems += `<div class="source-item">
+      <img class="source-favicon" src="${escapeHtml(faviconUrl)}" alt="" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
+      <div class="source-favicon-placeholder" style="display:none;">${escapeHtml(domain.charAt(0).toUpperCase())}</div>
+      <div class="source-info">
+        <a class="source-title" href="${escapeHtml(r.url)}" target="_blank" rel="noopener" onclick="event.stopPropagation();">${escapeHtml(r.title)}</a>
+        <span class="source-domain">${escapeHtml(domain)}</span>
+        <div class="source-snippet">${escapeHtml(r.snippet)}</div>
+      </div>
+    </div>`;
+  });
+
+  container.innerHTML = `
+    <div class="search-source-badge${openClass}" onclick="toggleSearchPanel(this)">
+      <span class="badge-icon">&#128269;</span>
+      <span>Searched</span>
+      <span class="badge-count">${count} source${count !== 1 ? 's' : ''}</span>
+      <span class="badge-arrow">&#9660;</span>
+    </div>
+    <div class="search-source-panel${openClass}">
+      ${sourceItems}
+    </div>
+  `;
+
+  scrollToBottom();
+}
+
+function toggleSearchPanel(badge) {
+  const panel = badge.nextElementSibling;
+  const isOpen = badge.classList.contains('open');
+  badge.classList.toggle('open', !isOpen);
+  panel.classList.toggle('open', !isOpen);
+  state.searchPanelExpanded = !isOpen;
+  scrollToBottom();
+}
+
+// ═══════════════════════════════════════════════════════
+// 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,10 @@
+gradio==6.14.0
+transformers>=4.45.0
+torch>=2.1.0
+accelerate>=0.25.0
+huggingface_hub>=0.20.0
+matplotlib>=3.8
+requests>=2.31.0
+beautifulsoup4>=4.12.0
+Pillow>=10.0
+torchvision>=0.16.0