Upload folder using huggingface_hub

app.py

@@ -3,6 +3,8 @@
 Uses MiniCPM5-1B for local inference (no external APIs).
 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.
 """
 
 from __future__ import annotations
@@ -19,6 +21,7 @@ import tempfile
 import textwrap
 import threading
 import time
+import urllib.parse
 import zipfile
 from collections.abc import Iterator
 from dataclasses import dataclass, field
@@ -35,6 +38,7 @@ MODEL_URL = "https://huggingface.co/openbmb/MiniCPM5-1B"
 DEFAULT_TEMPERATURE = 0.6
 DEFAULT_MAX_TOKENS = 4096
 PY_TIMEOUT_S = 15
+GRADIO_TIMEOUT_S = 30
 PY_MEM_LIMIT_MB = 1024
 MAX_STDIO_CHARS = 16_000
 OUTPUT_PNG = "output.png"
@@ -49,7 +53,7 @@ logging.basicConfig(level=logging.INFO)
 # ─── Supported Languages & Frameworks ───────────────────────────────────
 
 LANGUAGE_OPTIONS = [
-    ("Python", ["Flask", "Django", "FastAPI", "Streamlit", "Plain Python"]),
+    ("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"]),
@@ -72,6 +76,7 @@ When the user asks you to build an application:
 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:
@@ -90,11 +95,31 @@ etc.
 
 When generating web apps with HTML/CSS/JS, return a single self-contained HTML document with all CSS and JavaScript inline. Make the page fully responsive: html/body at margin:0 and 100% width/height, use flexbox/grid layouts, and size any canvas to its container.
 
-For Python, prefer standard library or common packages. Do not use network calls, subprocesses, shell commands, or long-running loops in demo code.
+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.
 """
 
 # Curated starter 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.",
@@ -119,21 +144,130 @@ EXAMPLE_PROMPTS: list[tuple[str, str, str, str]] = [
         "HTML/CSS/JS",
         "Vanilla",
     ),
-    (
-        "🚀 Express API",
-        "Build an Express.js REST API with user authentication endpoints (register, login, profile), JWT token handling, and input validation.",
-        "JavaScript",
-        "Express.js",
-    ),
-    (
-        "✅ Todo App",
-        "Create a self-contained HTML/CSS/JavaScript todo app: add tasks, mark them complete, delete them, filter by all/active/completed, and show a live count of remaining tasks, with a clean, modern, responsive UI.",
-        "HTML/CSS/JS",
-        "Vanilla",
-    ),
 ]
 
 
+# ─── Web Search (Google Scraping — No API) ──────────────────────────────
+
+def web_search_google(query: str, num_results: int = 8) -> list[dict[str, str]]:
+    """Search Google by scraping the results page. No API key needed.
+
+    Returns a list of dicts with keys: title, url, snippet.
+    Uses requests with a browser-like User-Agent to avoid captchas.
+    """
+    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 = {
+            "User-Agent": (
+                "Mozilla/5.0 (Windows NT 10.0; Win64; x64) "
+                "AppleWebKit/537.36 (KHTML, like Gecko) "
+                "Chrome/120.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",
+        }
+
+        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]] = []
+
+        # Parse Google search results
+        # Google uses various class names; we try multiple selectors
+        for g_div in soup.select("div.g, div[data-sokoban-container], div.yuRUbf"):
+            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", "")
+            # Google sometimes prefixes URLs; extract the real URL
+            if href.startswith("/url?q="):
+                real_url = urllib.parse.parse_qs(urllib.parse.urlparse(href).query).get("q", [href])[0]
+            elif href.startswith("http"):
+                real_url = href
+            else:
+                continue
+
+            # Skip Google-internal URLs
+            if "google.com" in real_url or "googleusercontent.com" in 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
+
+        # Fallback: try parsing from <a> tags with data-ved attribute
+        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]
+                snippet = ""
+
+                if title and href:
+                    results.append({
+                        "title": title,
+                        "url": href,
+                        "snippet": snippet,
+                    })
+
+                if len(results) >= num_results:
+                    break
+
+        logger.info("Web 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.exception("Web search failed: %s", exc)
+        return []
+
+
+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)
+
+
 # ─── Model Loading ──────────────────────────────────────────────────────
 
 _model = None
@@ -358,6 +492,11 @@ def _normalize_language(target_language: str | None, fence_lang: str | None) ->
     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))
+
+
 # ─── Python Execution ───────────────────────────────────────────────────
 
 @dataclass
@@ -502,6 +641,122 @@ def run_python(code: str) -> PythonExecutionResult:
             )
 
 
+# ─── Gradio App Runner ─────────────────────────────────────────────────
+
+# 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
+    for pid, proc in list(_running_gradio_procs.items()):
+        try:
+            proc.terminate()
+            proc.wait(timeout=3)
+        except Exception:
+            try:
+                proc.kill()
+            except Exception:
+                pass
+    _running_gradio_procs.clear()
+
+    # 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:
+        # Add launch at the end if missing
+        patched_code += f'\n\nif __name__ == "__main__":\n    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 = 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 {"success": True, "message": f"Stopped {stopped} Gradio app(s)"}
+
+
 # ─── Web Document ───────────────────────────────────────────────────────
 
 def _web_document(code: str, fence_lang: str | None) -> str:
@@ -532,10 +787,7 @@ def build_iframe(code: str, fence_lang: str | None = None) -> str:
 # ─── Project Packaging ──────────────────────────────────────────────────
 
 def create_project_zip(files: dict[str, str], project_name: str) -> str:
-    """Create a ZIP file from extracted project files.
-
-    Returns path to the created ZIP file.
-    """
+    """Create a ZIP file from extracted project files."""
     zip_dir = tempfile.mkdtemp(prefix="fullstack_project_")
     zip_path = os.path.join(zip_dir, f"{project_name}.zip")
 
@@ -546,23 +798,6 @@ def create_project_zip(files: dict[str, str], project_name: str) -> str:
     return zip_path
 
 
-def create_project_directory(files: dict[str, str], project_name: str) -> str:
-    """Create a directory with project files for HuggingFace push.
-
-    Returns path to the created project directory.
-    """
-    proj_dir = tempfile.mkdtemp(prefix="fullstack_deploy_")
-    target_dir = os.path.join(proj_dir, project_name)
-    os.makedirs(target_dir, exist_ok=True)
-
-    for filepath, content in files.items():
-        full_path = os.path.join(target_dir, filepath)
-        os.makedirs(os.path.dirname(full_path), exist_ok=True)
-        Path(full_path).write_text(content, encoding="utf-8")
-
-    return target_dir
-
-
 # ─── HuggingFace Hub Push ───────────────────────────────────────────────
 
 def push_to_huggingface(
@@ -573,35 +808,20 @@ def push_to_huggingface(
     space_sdk: str = "static",
     is_space: bool = True,
 ) -> dict[str, Any]:
-    """Push generated project to HuggingFace Hub.
-
-    Args:
-        files: Dict of {filepath: content}
-        project_name: Name of the project
-        repo_name: HuggingFace repo name (e.g., "username/my-app")
-        hf_token: HuggingFace API token
-        space_sdk: SDK for Space ("gradio", "streamlit", "static", "docker")
-        is_space: Whether to create a Space (True) or Model repo (False)
-
-    Returns:
-        Dict with status and URL info
-    """
+    """Push generated project to HuggingFace Hub."""
     try:
         from huggingface_hub import HfApi, create_repo
 
         api = HfApi(token=hf_token)
 
-        # Parse username/repo
         if "/" in repo_name:
             namespace, name = repo_name.split("/", 1)
         else:
-            # Use the authenticated user's namespace
             user_info = api.whoami()
             namespace = user_info["name"]
             name = repo_name
             repo_name = f"{namespace}/{name}"
 
-        # Create repo
         try:
             if is_space:
                 create_repo(
@@ -621,7 +841,6 @@ def push_to_huggingface(
         except Exception as e:
             logger.warning("Repo creation warning: %s", e)
 
-        # Upload files
         with tempfile.TemporaryDirectory(prefix="hf_push_") as tmp_dir:
             for filepath, content in files.items():
                 full_path = os.path.join(tmp_dir, filepath)
@@ -646,6 +865,26 @@ Generated by Fullstack Code Builder using {MODEL_ID}.
 """
                 Path(readme_path).write_text(readme_content, encoding="utf-8")
 
+            # Add requirements.txt for Python/Gradio projects
+            req_path = os.path.join(tmp_dir, "requirements.txt")
+            if not os.path.exists(req_path):
+                has_python = any(
+                    f.endswith(".py") for f in files.keys()
+                )
+                if has_python:
+                    reqs = ["gradio>=4.0.0"]
+                    # Detect common dependencies
+                    all_code = "\n".join(files.values())
+                    if "matplotlib" in all_code:
+                        reqs.append("matplotlib>=3.8")
+                    if "PIL" in all_code or "Pillow" in all_code:
+                        reqs.append("Pillow>=10.0")
+                    if "numpy" in all_code:
+                        reqs.append("numpy>=1.24")
+                    if "pandas" in all_code:
+                        reqs.append("pandas>=2.0")
+                    Path(req_path).write_text("\n".join(reqs) + "\n", encoding="utf-8")
+
             api.upload_folder(
                 folder_path=tmp_dir,
                 repo_id=repo_name,
@@ -725,18 +964,37 @@ def _targeted_prompt(
     target_language: str,
     target_framework: str = "",
     execution_context: dict[str, Any] | None = None,
+    search_context: str = "",
 ) -> str:
     iteration_context = _iteration_context(execution_context)
     context_block = f"\n\n{iteration_context}" if iteration_context else ""
 
+    search_block = ""
+    if search_context:
+        search_block = f"\n\n{search_context}\n\nUse 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}"
     )
@@ -747,7 +1005,28 @@ def _targeted_prompt(
 def _run_extracted_code(
     code: str,
     target: str,
+    framework: str = "",
 ) -> tuple[str, str, str | None, str, str]:
+    """Run extracted code. For Gradio apps, launch as a subprocess server."""
+    if target == "python" and _is_gradio_code(code):
+        result = run_gradio_app(code)
+        if result["success"]:
+            return (
+                result.get("stdout", ""),
+                f"Gradio app running at {result['url']}",
+                None,
+                f"Gradio running at {result['url']}",
+                "success",
+            )
+        else:
+            return (
+                result.get("stdout", ""),
+                result.get("stderr", result.get("message", "Gradio launch failed")),
+                None,
+                "Gradio launch failed",
+                "error",
+            )
+
     if target == "python":
         result = run_python(code)
         if result.timed_out:
@@ -809,6 +1088,33 @@ async def serve_download(filename: str):
     return HTMLResponse("Not found", status_code=404)
 
 
+@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,
@@ -816,6 +1122,7 @@ def handle_chat(
     target_framework: str,
     history_json: str,
     exec_context_json: str,
+    search_enabled: str = "false",
 ) -> str:
     """Stream chat responses with code execution. Yields JSON strings."""
     history = json.loads(history_json) if history_json else []
@@ -866,11 +1173,33 @@ def handle_chat(
         "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),
+        "content": _targeted_prompt(prompt, target_language, target_framework, execution_context, search_context),
     }
     messages = _chat_history_to_messages(model_history)
 
@@ -922,10 +1251,26 @@ def handle_chat(
         "execution": execution_context,
     })
 
-    # Execute if Python
+    # 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:
-        stdout, stderr, image_path, status_text, status_state = _run_extracted_code(code, target)
+        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:
+            stdout, stderr, image_path, status_text, status_state = _run_extracted_code(code, target, target_framework)
 
     # Register image for serving
     image_url = None
@@ -939,7 +1284,6 @@ def handle_chat(
     project_files = multi_files if multi_files else {}
 
     if project_files:
-        # Multi-file project: create ZIP
         project_name = "generated-project"
         zip_path = create_project_zip(project_files, project_name)
         zip_filename = f"{project_name}.zip"
@@ -968,11 +1312,13 @@ def handle_chat(
         "image_path": image_path,
         "status": status_text,
         "language": fence_lang or target,
-        "suggested_tab": "preview" if (image_path or is_web) else "console",
+        "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({
@@ -998,7 +1344,6 @@ def handle_push_hf(
         project_files = execution_context.get("project_files", {})
 
         if not project_files:
-            # If no multi-file, try single code
             code = execution_context.get("code", "")
             if not code:
                 yield json.dumps({
@@ -1009,6 +1354,7 @@ def handle_push_hf(
                 return
 
             lang = execution_context.get("language", "python")
+            is_gradio = execution_context.get("is_gradio", False)
             ext_map = {
                 "python": "app.py", "py": "app.py",
                 "javascript": "index.js", "js": "index.js",
@@ -1018,7 +1364,10 @@ def handle_push_hf(
             filename = ext_map.get(lang, "app.py")
             project_files = {filename: code}
 
-        # Extract project name from repo_name
+            # Auto-detect SDK for Gradio apps
+            if is_gradio or _is_gradio_code(code):
+                space_sdk = "gradio"
+
         project_name = repo_name.split("/")[-1] if "/" in repo_name else repo_name
 
         result = push_to_huggingface(

index.html

@@ -423,6 +423,19 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
 #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);
@@ -583,6 +596,106 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   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
    ═══════════════════════════════════════════════════════ */
@@ -796,7 +909,7 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   <!-- Header -->
   <header id="header">
     <div class="header-title">
-      <div class="header-ascii">╔═══ FULLSTACK CODE BUILDER ═══╗</div>
+      <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>
     <div class="header-actions">
@@ -809,7 +922,7 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
   </header>
 
   <div id="playground-banner">
-    Powered by <a id="banner-model-link" href="https://huggingface.co/openbmb/MiniCPM5-1B" target="_blank" rel="noopener"><strong>MiniCPM5-1B</strong></a> running locally — no external APIs. Generate fullstack apps in any language and deploy to HuggingFace.
+    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 -->
@@ -832,6 +945,7 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
         <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>
@@ -845,6 +959,7 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
         <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">
@@ -852,11 +967,11 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
         <div class="tab-pane active" id="pane-preview">
           <div class="preview-placeholder" id="preview-placeholder">
             <div class="ascii-art">
-  ┌──────────────────────┐
-  │   ╭━━━╮              │
-  │   ┃ ▶ ┃  OUTPUT      │
-  │   ╰━━━╯              │
-  └──────────────────────┘</div>
+  &#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">
@@ -890,6 +1005,17 @@ a:hover { text-decoration: underline; text-shadow: var(--glow-cyan); }
           </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">
@@ -966,6 +1092,8 @@ const state = {
   reasoningExpanded: false,
   lastReasoningPressAt: 0,
   modelReady: false,
+  searchEnabled: false,
+  lastSearchResults: [],
 };
 
 // ═══════════════════════════════════════════════════════
@@ -1001,6 +1129,11 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   });
 
+  // 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);
@@ -1035,7 +1168,6 @@ async function pollModelStatus() {
       statusText.textContent = 'MODEL READY';
       indicator.className = 'status-indicator status-success';
       document.getElementById('btn-push-hf').disabled = false;
-      // Update after 3 seconds to idle
       setTimeout(() => {
         if (!state.isGenerating) {
           indicator.className = 'status-indicator status-idle';
@@ -1053,7 +1185,6 @@ async function pollModelStatus() {
       indicator.className = 'status-indicator status-error';
     }
 
-    // Poll again in 3 seconds
     setTimeout(pollModelStatus, 3000);
   } catch (err) {
     console.error('Model status poll error:', err);
@@ -1406,7 +1537,7 @@ function renderExecution(execution) {
     fsBtn.style.display = 'none';
     img.src = execution.image_url;
     img.style.display = 'block';
-    if (state.activeTab !== 'console' && state.activeTab !== 'code' && state.activeTab !== 'deploy') {
+    if (state.activeTab !== 'console' && state.activeTab !== 'code' && state.activeTab !== 'search' && state.activeTab !== 'deploy') {
       switchTab('preview');
     }
   } else if (execution.is_web && execution.code) {
@@ -1417,11 +1548,27 @@ function renderExecution(execution) {
     state.pendingWebPreviewCode = execution.code;
     state.loadedWebPreviewCode = '';
     state.scheduledWebPreviewCode = '';
-    if (state.activeTab !== 'console' && state.activeTab !== 'code' && state.activeTab !== 'deploy') {
+    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';
@@ -1617,7 +1764,7 @@ async function sendMessage(prompt) {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        data: [prompt, state.targetLanguage, framework, historyJSON, execContextJSON]
+        data: [prompt, state.targetLanguage, framework, historyJSON, execContextJSON, state.searchEnabled ? 'true' : 'false']
       })
     });
 
@@ -1761,6 +1908,74 @@ function newChat() {
   resetConversation(`Session reset. Welcome back to ${CONFIG.app_title || 'Fullstack Code Builder'}.`);
 }
 
+// ═══════════════════════════════════════════════════════
+// 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;
+}
+
 // ═══════════════════════════════════════════════════════
 // HUGGINGFACE PUSH
 // ═══════════════════════════════════════════════════════

requirements.txt

@@ -4,3 +4,6 @@ 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