Upload folder using huggingface_hub

app.py

@@ -1,20 +1,22 @@
 """Fullstack Code Builder — entry point.
 
-Uses MiniCPM5-1B for local inference (no external APIs).
+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, language options, system prompt
-    ├── model/loader.py             Model loading & status
-    ├── model/inference.py          Streaming model inference
+    ├── 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 Google search scraping (no API)
+    ├── 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
@@ -30,7 +32,7 @@ from code.server.routes import get_app
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
-# Start loading model in background
+# Start loading default model in background
 start_background_load()
 
 # Launch the server

code/config/constants.py

@@ -7,9 +7,36 @@ import re
 # ─── App Identity ────────────────────────────────────────────────────────
 
 APP_TITLE = "Fullstack Code Builder"
-MODEL_ID = "openbmb/MiniCPM5-1B"
 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
@@ -93,6 +120,8 @@ When generating Gradio apps, create a complete app.py with:
 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 ────────────────────────────────────────────────────

code/model/inference.py

@@ -1,6 +1,8 @@
 """Model inference — streaming and synchronous generation.
 
-Uses TextIteratorStreamer for real-time token streaming.
+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
@@ -10,8 +12,15 @@ import threading
 from collections.abc import Iterator
 from typing import Any
 
-from code.config.constants import DEFAULT_TEMPERATURE, DEFAULT_MAX_TOKENS
-from code.model.loader import get_model, get_tokenizer, get_model_status, is_model_loaded
+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__)
 
@@ -19,19 +28,32 @@ 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 using local MiniCPM5-1B.
+    """Stream model text. Yields progressively longer strings (full text so far).
 
-    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()
+    tokenizer = get_tokenizer_or_processor()
 
     try:
         from transformers import TextIteratorStreamer
@@ -82,16 +104,171 @@ def call_model(
         thread.join()
 
     except Exception as exc:
-        logger.exception("Error during model inference")
+        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):
+    for chunk in call_model(messages, max_new_tokens, image_url):
         result = chunk
     return result

code/model/loader.py

@@ -1,89 +1,232 @@
 """Model loading and status management.
 
-Handles loading MiniCPM5-1B locally using transformers.
+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 MODEL_ID
+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 = None
+_tokenizer_or_processor = None
 _model_loaded = False
 _model_loading = False
 _load_error: str | None = None
 
 
-def load_model() -> None:
-    """Load MiniCPM5-1B model and tokenizer locally."""
-    global _model, _tokenizer, _model_loaded, _model_loading, _load_error
+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_loaded or _model_loading:
+    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:
-        from transformers import AutoModelForCausalLM, AutoTokenizer
         import torch
 
-        logger.info("Loading MiniCPM5-1B model...")
-
         dtype = torch.float16 if torch.cuda.is_available() else torch.float32
         device_map = "auto" if torch.cuda.is_available() else None
 
-        _tokenizer = AutoTokenizer.from_pretrained(
-            MODEL_ID,
-            trust_remote_code=True,
-        )
-        _model = AutoModelForCausalLM.from_pretrained(
-            MODEL_ID,
-            torch_dtype=dtype,
-            device_map=device_map,
-            trust_remote_code=True,
-            low_cpu_mem_usage=True,
-        )
-
-        if device_map is None:
-            _model = _model.to("cpu")
-
-        _model.eval()
+        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("MiniCPM5-1B model loaded successfully.")
+        logger.info("%s model loaded successfully.", config["name"])
 
     except Exception as exc:
         _load_error = str(exc)
-        logger.exception("Failed to load model: %s", exc)
+        logger.exception("Failed to load model %s: %s", model_id, exc)
     finally:
         _model_loading = False
 
 
-def start_background_load() -> threading.Thread:
+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, daemon=True)
+    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": "Model loaded and ready"}
+        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": "Model is loading... (this may take a few minutes on first run)"}
+        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}"}
-    return {"status": "unknown", "message": "Model not initialized"}
+        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():
@@ -91,11 +234,21 @@ def get_model():
     return _model
 
 
-def get_tokenizer():
-    """Return the loaded tokenizer instance (or None)."""
-    return _tokenizer
+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/routes.py

@@ -8,10 +8,13 @@ Defines all HTTP and API endpoints:
 - 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
@@ -26,7 +29,7 @@ from code.config.constants import (
     APP_TITLE,
     EXAMPLE_PROMPTS,
     LANGUAGE_OPTIONS,
-    MODEL_ID,
+    MODEL_CONFIGS,
     MODEL_URL,
     PY_TIMEOUT_S,
 )
@@ -41,7 +44,13 @@ from code.execution.code_extractor import (
 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
+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
@@ -52,6 +61,10 @@ logger = logging.getLogger(__name__)
 
 _served_files: dict[str, str] = {}
 
+# ─── Uploaded Images Registry ───────────────────────────────────────────
+
+_uploaded_images: dict[str, str] = {}
+
 # ─── Server Instance ────────────────────────────────────────────────────
 
 app = Server()
@@ -69,13 +82,14 @@ async def homepage():
 
     config = json.dumps({
         "app_title": APP_TITLE,
-        "model_id": MODEL_ID,
+        "model_id": MODEL_CONFIGS,
         "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
@@ -105,9 +119,77 @@ async def serve_download(filename: str):
     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."""
@@ -143,6 +225,7 @@ def handle_chat(
     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 []
@@ -225,8 +308,11 @@ def handle_chat(
     }
     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):
+    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)
@@ -250,8 +336,7 @@ def handle_chat(
         })
         return
 
-    # Extract code from response (use original with thinking for extraction,
-    # but chat history already has clean version)
+    # 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)
@@ -311,11 +396,11 @@ def handle_chat(
                 status_state = "success"
 
     # Register image for serving
-    image_url = None
+    image_url_out = None
     if image_path:
         filename = os.path.basename(image_path)
         _served_files[f"img:{filename}"] = image_path
-        image_url = f"/images/{filename}"
+        image_url_out = f"/images/{filename}"
 
     # Register code for download
     download_url = None
@@ -346,7 +431,7 @@ def handle_chat(
         "fence_lang": fence_lang or target,
         "stdout": stdout,
         "stderr": stderr,
-        "image_url": image_url,
+        "image_url": image_url_out,
         "image_path": image_path,
         "status": status_text,
         "language": fence_lang or target,

index.html

@@ -212,6 +212,30 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   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
    ═══════════════════════════════════════════════════════ */
@@ -937,13 +961,17 @@ body.hide-thinking .think-block { display: none; }
   <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 | MiniCPM5-1B</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>
@@ -969,6 +997,12 @@ body.hide-thinking .think-block { display: none; }
             <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>
@@ -1123,6 +1157,10 @@ const state = {
   searchEnabled: false,
   lastSearchResults: [],
   showThinking: true,
+  currentModelKey: 'minicpm5-1b',
+  currentModelType: 'text',
+  uploadedImageFileUrl: '',
+  uploadedImageName: '',
 };
 
 // ═══════════════════════════════════════════════════════
@@ -1197,6 +1235,23 @@ async function pollModelStatus() {
       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';
@@ -1793,7 +1848,7 @@ async function sendMessage(prompt) {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        data: [prompt, state.targetLanguage, framework, historyJSON, execContextJSON, state.searchEnabled ? 'true' : 'false']
+        data: [prompt, state.targetLanguage, framework, historyJSON, execContextJSON, state.searchEnabled ? 'true' : 'false', state.uploadedImageFileUrl || '']
       })
     });
 
@@ -1951,6 +2006,143 @@ function toggleThinking() {
   }
 }
 
+// ═══════════════════════════════════════════════════════
+// 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
 // ═══════════════════════════════════════════════════════

requirements.txt

@@ -7,3 +7,4 @@ matplotlib>=3.8
 requests>=2.31.0
 beautifulsoup4>=4.12.0
 Pillow>=10.0
+torchvision>=0.16.0