Upload 4 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+or-logo1.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,2342 @@
+# -*- coding: utf-8 -*-
+"""
+OpenResearcher DeepSearch Agent - Hugging Face Space
+Uses ZeroGPU for efficient inference with the Nemotron model
+Aligned with app_local.py frontend and logic
+"""
+import os
+import gradio as gr
+import httpx
+import json
+import json5
+import re
+import time
+import html
+import asyncio
+from datetime import datetime
+from typing import List, Dict, Any, Optional, Tuple, Generator
+import traceback
+import base64
+from transformers import AutoTokenizer
+
+
+# ============================================================
+# Configuration
+# ============================================================
+MODEL_NAME = os.getenv("MODEL_NAME", "OpenResearcher/Nemotron-3-Nano-30B-A3B")
+REMOTE_API_BASE = "https://scrappier-sallie-untarred.ngrok-free.dev/v1"
+SERPER_API_KEY = os.getenv("SERPER_API_KEY", "")
+MAX_NEW_TOKENS = int(os.getenv("MAX_NEW_TOKENS", "4096"))  # Safe limit for ZeroGPU
+
+# ============================================================
+# System Prompt & Tools
+# ============================================================
+DEVELOPER_CONTENT = """
+You are a helpful assistant and harmless assistant.
+
+You will be able to use a set of browsering tools to answer user queries.
+
+Tool for browsing.
+The `cursor` appears in brackets before each browsing display: `[{cursor}]`.
+Cite information from the tool using the following format:
+`【{cursor}†L{line_start}(-L{line_end})?】`, for example: `【6†L9-L11】` or `【8†L3】`.
+Do not quote more than 10 words directly from the tool output.
+sources=web
+""".strip()
+
+TOOL_CONTENT = """
+[
+  {
+    "type": "function",
+    "function": {
+      "name": "browser.search",
+      "description": "Searches for information related to a query and displays top N results. Returns a list of search results with titles, URLs, and summaries.",
+      "parameters": {
+        "type": "object",
+        "properties": {
+          "query": {
+            "type": "string",
+            "description": "The search query string"
+          },
+          "topn": {
+            "type": "integer",
+            "description": "Number of results to display",
+            "default": 10
+          }
+        },
+        "required": [
+          "query"
+        ]
+      }
+    }
+  },
+  {
+    "type": "function",
+    "function": {
+      "name": "browser.open",
+      "description": "Opens a link from the current page or a fully qualified URL. Can scroll to a specific location and display a specific number of lines. Valid link ids are displayed with the formatting: 【{id}†.*】.",
+      "parameters": {
+        "type": "object",
+        "properties": {
+          "id": {
+            "type": [
+              "integer",
+              "string"
+            ],
+            "description": "Link id from current page (integer) or fully qualified URL (string). Default is -1 (most recent page)",
+            "default": -1
+          },
+          "cursor": {
+            "type": "integer",
+            "description": "Page cursor to operate on. If not provided, the most recent page is implied",
+            "default": -1
+          },
+          "loc": {
+            "type": "integer",
+            "description": "Starting line number. If not provided, viewport will be positioned at the beginning or centered on relevant passage",
+            "default": -1
+          },
+          "num_lines": {
+            "type": "integer",
+            "description": "Number of lines to display",
+            "default": -1
+          },
+          "view_source": {
+            "type": "boolean",
+            "description": "Whether to view page source",
+            "default": false
+          },
+          "source": {
+            "type": "string",
+            "description": "The source identifier (e.g., 'web')"
+          }
+        },
+        "required": []
+      }
+    }
+  },
+  {
+    "type": "function",
+    "function": {
+      "name": "browser.find",
+      "description": "Finds exact matches of a pattern in the current page or a specified page by cursor.",
+      "parameters": {
+        "type": "object",
+        "properties": {
+          "pattern": {
+            "type": "string",
+            "description": "The exact text pattern to search for"
+          },
+          "cursor": {
+            "type": "integer",
+            "description": "Page cursor to search in. If not provided, searches in the current page",
+            "default": -1
+          }
+        },
+        "required": [
+          "pattern"
+        ]
+      }
+    }
+  }
+]
+""".strip()
+
+# ============================================================
+# Browser Tool Implementation
+# ============================================================
+class SimpleBrowser:
+    """Browser tool using Serper API."""
+
+    def __init__(self, serper_key: str):
+        self.serper_key = serper_key
+        self.pages: Dict[str, Dict] = {}
+        self.page_stack: List[str] = []
+        self.link_map: Dict[int, str] = {}
+
+    @property
+    def current_cursor(self) -> int:
+        return len(self.page_stack) - 1
+
+    def _format_line_numbers(self, text: str, offset: int = 0) -> str:
+        lines = text.split('\n')
+        return '\n'.join(f"L{i + offset}: {line}" for i, line in enumerate(lines))
+
+    def _clean_links(self, results: List[Dict], query: str) -> Tuple[str, Dict[int, str]]:
+        link_map = {}
+        lines = []
+
+        for i, r in enumerate(results):
+            title = html.escape(r.get('title', 'No Title'))
+            url = r.get('link', r.get('url', ''))
+            snippet = html.escape(r.get('snippet', r.get('summary', '')))
+
+            try:
+                domain = url.split('/')[2] if url else ''
+            except:
+                domain = ''
+
+            link_map[i] = url
+            link_text = f"【{i}†{title}†{domain}】" if domain else f"【{i}†{title}】"
+            lines.append(f"{link_text}")
+            lines.append(f"  {snippet}")
+            lines.append("")
+
+        return '\n'.join(lines), link_map
+
+    async def search(self, query: str, topn: int = 10) -> str:
+        url = "https://google.serper.dev/search"
+        headers = {'X-API-KEY': self.serper_key, 'Content-Type': 'application/json'}
+        payload = json.dumps({"q": query, "num": topn})
+
+        async with httpx.AsyncClient() as client:
+            try:
+                response = await client.post(url, headers=headers, data=payload, timeout=20.0)
+                if response.status_code != 200:
+                    return f"Error: Search failed with status {response.status_code}"
+
+                data = response.json()
+                results = data.get("organic", [])
+                if not results:
+                    return f"No results found for: '{query}'"
+
+                content, self.link_map = self._clean_links(results, query)
+                pseudo_url = f"web-search://q={query}&ts={int(time.time())}"
+                cursor = self.current_cursor + 1
+
+                page_data = {
+                    'url': pseudo_url,
+                    'title': f"Search Results: {query}",
+                    'text': content,
+                    'urls': {str(k): v for k, v in self.link_map.items()}
+                }
+                self.pages[pseudo_url] = page_data
+                self.page_stack.append(pseudo_url)
+
+                header = f"{page_data['title']} ({pseudo_url})\n**viewing lines [0 - {len(content.split(chr(10)))-1}]**\n\n"
+                body = self._format_line_numbers(content)
+
+                return f"[{cursor}] {header}{body}"
+
+            except Exception as e:
+                return f"Error during search: {str(e)}"
+
+    async def open(self, id: int | str = -1, cursor: int = -1, loc: int = -1, num_lines: int = -1, **kwargs) -> str:
+        target_url = None
+
+        if isinstance(id, str) and id.startswith("http"):
+            target_url = id
+        elif isinstance(id, int) and id >= 0:
+            target_url = self.link_map.get(id)
+            if not target_url:
+                return f"Error: Invalid link id '{id}'. Available: {list(self.link_map.keys())}"
+        elif cursor >= 0 and cursor < len(self.page_stack):
+            page_url = self.page_stack[cursor]
+            page = self.pages.get(page_url)
+            if page:
+                text = page['text']
+                lines = text.split('\n')
+                start = max(0, loc) if loc >= 0 else 0
+                end = min(len(lines), start + num_lines) if num_lines > 0 else len(lines)
+
+                header = f"{page['title']} ({page['url']})\n**viewing lines [{start} - {end-1}] of {len(lines)-1}**\n\n"
+                body = self._format_line_numbers('\n'.join(lines[start:end]), offset=start)
+                return f"[{cursor}] {header}{body}"
+        else:
+            return "Error: No valid target specified"
+
+        if not target_url:
+            return "Error: Could not determine target URL"
+
+        headers = {'X-API-KEY': self.serper_key, 'Content-Type': 'application/json'}
+        payload = json.dumps({"url": target_url})
+
+        async with httpx.AsyncClient() as client:
+            try:
+                response = await client.post("https://scrape.serper.dev/", headers=headers, data=payload, timeout=30.0)
+                if response.status_code != 200:
+                    return f"Error fetching URL: {response.status_code}"
+
+                data = response.json()
+                text = data.get("text", "")
+                title = data.get("metadata", {}).get("title", "") if isinstance(data.get("metadata"), dict) else ""
+
+                if not text:
+                    return f"No content found at URL"
+
+                lines = text.split('\n')
+                content = '\n'.join(lines)
+
+                max_lines = 150
+                if len(lines) > max_lines:
+                    content = '\n'.join(lines[:max_lines]) + "\n\n...(content truncated)..."
+
+                new_cursor = self.current_cursor + 1
+                page_data = {
+                    'url': target_url,
+                    'title': title or target_url,
+                    'text': content,
+                    'urls': {}
+                }
+                self.pages[target_url] = page_data
+                self.page_stack.append(target_url)
+
+                start = max(0, loc) if loc >= 0 else 0
+                display_lines = content.split('\n')
+                end = min(len(display_lines), start + num_lines) if num_lines > 0 else len(display_lines)
+
+                header = f"{title or target_url} ({target_url})\n**viewing lines [{start} - {end-1}] of {len(display_lines)-1}**\n\n"
+                body = self._format_line_numbers('\n'.join(display_lines[start:end]), offset=start)
+
+                return f"[{new_cursor}] {header}{body}"
+
+            except Exception as e:
+                return f"Error fetching URL: {str(e)}"
+
+    def find(self, pattern: str, cursor: int = -1) -> str:
+        if not self.page_stack:
+            return "Error: No page open"
+
+        page_url = self.page_stack[cursor] if cursor >= 0 and cursor < len(self.page_stack) else self.page_stack[-1]
+        page = self.pages.get(page_url)
+
+        if not page:
+            return "Error: Page not found"
+
+        text = page['text']
+        lines = text.split('\n')
+        matches = []
+
+        for i, line in enumerate(lines):
+            if str(pattern).lower() in line.lower():
+                start = max(0, i - 1)
+                end = min(len(lines), i + 3)
+                context = '\n'.join(f"L{j}: {lines[j]}" for j in range(start, end))
+                matches.append(f"# 【{len(matches)}†match at L{i}】\n{context}")
+                if len(matches) >= 10:
+                    break
+
+        if not matches:
+            return f"No matches found for: '{pattern}'"
+
+        result_url = f"{page_url}/find?pattern={pattern}"
+        new_cursor = self.current_cursor + 1
+        result_content = '\n\n'.join(matches)
+
+        page_data = {
+            'url': result_url,
+            'title': f"Find results for: '{pattern}'",
+            'text': result_content,
+            'urls': {}
+        }
+        self.pages[result_url] = page_data
+        self.page_stack.append(result_url)
+
+        header = f"Find results for text: `{pattern}` in `{page['title']}`\n\n"
+        return f"[{new_cursor}] {header}{result_content}"
+
+    def get_cursor_url(self, cursor: int) -> Optional[str]:
+        if cursor >= 0 and cursor < len(self.page_stack):
+            return self.page_stack[cursor]
+        return None
+
+
+# ============================================================
+# Tokenizer Loading
+# ============================================================
+tokenizer = None
+
+def load_tokenizer():
+    global tokenizer
+    if tokenizer is None:
+        print(f"Loading tokenizer: {MODEL_NAME}")
+        try:
+            tokenizer = AutoTokenizer.from_pretrained(
+                MODEL_NAME,
+                trust_remote_code=True
+            )
+            print("Tokenizer loaded successfully!")
+        except Exception as e:
+            print(f"Error loading tokenizer: {e}")
+            import traceback
+            traceback.print_exc()
+            raise
+    return tokenizer
+
+# ============================================================
+# Text Processing
+# ============================================================
+def extract_thinking(text: str) -> Tuple[Optional[str], str]:
+    reasoning_content = None
+    content = text
+
+    if '<think>' in content and '</think>' in content:
+        match = re.search(r'<think>(.*?)</think>', content, re.DOTALL)
+        if match:
+            reasoning_content = match.group(1).strip()
+            content = content.replace(match.group(0), "").strip()
+    elif '</think>' in content:
+        match = re.search(r'^(.*?)</think>', content, re.DOTALL)
+        if match:
+            reasoning_content = match.group(1).strip()
+            content = content.replace(match.group(0), "").strip()
+
+    return reasoning_content, content
+
+
+def parse_tool_call(text: str) -> Tuple[Optional[Dict], str]:
+    tool_call_text = None
+    content = text
+
+    if '<tool_call>' in content and '</tool_call>' in content:
+        match = re.search(r'<tool_call>(.*?)</tool_call>', content, re.DOTALL)
+        if match:
+            tool_call_text = match.group(1).strip()
+            content = content.replace(match.group(0), "").strip()
+    elif '</tool_call>' in content:
+        match = re.search(r'^(.*?)</tool_call>', content, re.DOTALL)
+        if match:
+            tool_call_text = match.group(1).strip()
+            content = content.replace(match.group(0), "").strip()
+
+    if tool_call_text:
+        try:
+            if "```json" in tool_call_text:
+                tool_call_text = tool_call_text.split("```json")[1].split("```")[0].strip()
+            elif "```" in tool_call_text:
+                tool_call_text = tool_call_text.split("```")[1].split("```")[0].strip()
+
+            parsed = json5.loads(tool_call_text)
+            return parsed, content
+        except:
+            pass
+
+        func_match = re.search(r'<function=([\w.]+)>', tool_call_text)
+        if func_match:
+            tool_name = func_match.group(1)
+            tool_args = {}
+            params = re.finditer(r'<parameter=([\w]+)>\s*(.*?)\s*</parameter>', tool_call_text, re.DOTALL)
+            for p in params:
+                param_name = p.group(1)
+                param_value = p.group(2).strip()
+                if param_value.startswith('"') and param_value.endswith('"'):
+                    param_value = param_value[1:-1]
+                try:
+                    if param_value.isdigit():
+                        param_value = int(param_value)
+                except:
+                    pass
+                tool_args[param_name] = param_value
+
+            return {"name": tool_name, "arguments": tool_args}, content
+
+    return None, content
+
+
+def is_final_answer(text: str) -> bool:
+    t = text.lower()
+    return (
+        ('<answer>' in t and '</answer>' in t) or
+        'final answer:' in t or
+        ('exact answer:' in t and 'confidence:' in t)
+    )
+
+# ============================================================
+# HTML Rendering Helpers (From app_local.py)
+# ============================================================
+def render_citations(text: str, browser: SimpleBrowser) -> str:
+    """Convert citation markers to clickable HTML links."""
+    def replace_citation(m):
+        cursor_str = m.group(1)
+        l1 = m.group(2)
+        l2 = m.group(3)
+
+        try:
+            cursor = int(cursor_str)
+            url = browser.get_cursor_url(cursor)
+            if url:
+                ref = f"L{l1}-L{l2}" if l2 else f"L{l1}"
+                # Return HTML link
+                escaped_url = html.escape(url)
+                return f'<a href="{escaped_url}" target="_blank" style="color:#10a37f;text-decoration:none;font-size:0.85em;">[{cursor_str}†{ref}]</a>'
+        except:
+            pass
+        return m.group(0)
+
+    result = re.sub(r'【(\d+)†L(\d+)(?:-L(\d+))?】', replace_citation, text)
+
+    # Convert basic markdown to HTML
+    result = re.sub(r'\*\*(.+?)\*\*', r'<strong>\1</strong>', result)
+    result = re.sub(r'\*(.+?)\*', r'<em>\1</em>', result)
+    result = re.sub(r'`(.+?)`', r'<code>\1</code>', result)
+    result = result.replace('\n\n', '</p><p>').replace('\n', '<br>')
+    if not result.startswith('<p>'):
+        result = f'<p>{result}</p>'
+
+    return result
+
+def render_thinking_streaming(text: str) -> str:
+    """Render thinking content in streaming mode (visible, with animation)."""
+    escaped = html.escape(text)
+    return f'<div class="thinking-streaming">{escaped}</div>'
+
+def render_thinking_collapsed(text: str) -> str:
+    """Render thinking content in collapsed mode after completion."""
+    escaped = html.escape(text)
+    preview = text[:100] + "..." if len(text) > 100 else text
+    preview_escaped = html.escape(preview)
+    return f'''<details class="thinking-collapsed">
+<summary>Thought process: "{preview_escaped}"</summary>
+<div class="thinking-content">{escaped}</div>
+</details>'''
+
+def render_tool_call(fn_name: str, args: dict, browser: SimpleBrowser = None) -> str:
+    """Render a tool call card with unified format and subtle distinction."""
+    border_colors = {
+        "browser.search": "#667eea",
+        "browser.open": "#4facfe", 
+        "browser.find": "#fa709a"
+    }
+    border_color = border_colors.get(fn_name, "#9ca3af")
+    
+    if fn_name == "browser.search":
+        query = str(args.get('query', ''))
+        return f'''<div class="tool-call-card" style="border-left: 3px solid {border_color};">
+<div class="tool-info">
+<div class="tool-name">Searching the web</div>
+<div class="tool-detail">Query: "{html.escape(query)}"</div>
+</div>
+</div>'''
+    elif fn_name == "browser.open":
+        link_id = args.get('id', '')
+        url_info = ""
+        if browser and isinstance(link_id, int) and link_id >= 0:
+            url = browser.link_map.get(link_id, "")
+            if url:
+                try:
+                    domain = url.split('/')[2]
+                    url_info = f" → {domain}"
+                except:
+                    url_info = ""
+        return f'''<div class="tool-call-card" style="border-left: 3px solid {border_color};">
+<div class="tool-info">
+<div class="tool-name">Opening page</div>
+<div class="tool-detail">Link #{link_id}{url_info}</div>
+</div>
+</div>'''
+    elif fn_name == "browser.find":
+        pattern = str(args.get('pattern', ''))
+        return f'''<div class="tool-call-card" style="border-left: 3px solid {border_color};">
+<div class="tool-info">
+<div class="tool-name">Finding in page</div>
+<div class="tool-detail">Pattern: "{html.escape(pattern)}"</div>
+</div>
+</div>'''
+    else:
+        return f'''<div class="tool-call-card" style="border-left: 3px solid {border_color};">
+<div class="tool-info">
+<div class="tool-name">{html.escape(str(fn_name))}</div>
+<div class="tool-detail">{html.escape(json.dumps(args))}</div>
+</div>
+</div>'''
+
+def render_tool_result(result: str, fn_name: str) -> str:
+    """Render tool result in an expanded card with direct HTML rendering."""
+    import uuid
+    tool_label = {
+        "browser.search": "🔍 Search Results",
+        "browser.open": "📄 Page Content",
+        "browser.find": "🔎 Find Results"
+    }.get(fn_name, "📋 Result")
+    
+    border_colors = {
+        "browser.search": "#667eea",
+        "browser.open": "#4facfe",
+        "browser.find": "#86efac"
+    }
+    border_color = border_colors.get(fn_name, "#9ca3af")
+    
+    # ===== SEARCH RESULTS =====
+    if fn_name == "browser.search" and "<html>" in result and "<ul>" in result:
+        ul_match = re.search(r'<ul>(.*?)</ul>', result, re.DOTALL)
+        if ul_match:
+            ul_content = ul_match.group(1)
+            items = re.findall(r"<li><a href='([^']+)'>([^<]+)</a>\s*([^<]*)</li>", ul_content)
+            
+            if items:
+                lines = result.split('\n')
+                search_title = ""
+                if lines and re.match(r'^\[\d+\]\s+Search Results:', lines[0]):
+                    match = re.match(r'^\[(\d+)\]\s+(.+?)\s+\(web-search://', lines[0])
+                    if match:
+                        ref_num, title = match.groups()
+                        title = re.sub(r'\s+\(web-search://.*$', '', lines[0])
+                        title = re.sub(r'^\[\d+\]\s+', '', title)
+                        search_title = f'''
+                        <div style="background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%); padding: 0.875rem 1rem; margin: -1.25rem -1.25rem 1rem -1.25rem; border-bottom: 1px solid #e0e7ff;">
+                            <div style="display: flex; align-items: center; gap: 0.5rem;">
+                                <span style="background: #667eea; color: white; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">【{ref_num}】</span>
+                                <span style="color: #1e40af; font-weight: 600; font-size: 0.95rem;">{html.escape(title)}</span>
+                            </div>
+                        </div>
+                        '''
+                
+                result_html = '<div style="display: flex; flex-direction: column; gap: 0.75rem;">'
+                for idx, (url, title, summary) in enumerate(items, 1):
+                    card_id = f"search-card-{uuid.uuid4().hex[:8]}"
+                    result_html += f'''
+                    <div class="search-result-card" style="background: white; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; transition: all 0.2s ease;">
+                        <div style="display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem;">
+                            <a href="{html.escape(url)}" target="_blank" 
+                               style="color: #667eea; font-weight: 600; font-size: 0.75rem; min-width: 30px; text-decoration: none;">【{idx}】</a>
+                            <a href="{html.escape(url)}" target="_blank" 
+                               style="color: #1f2937; font-weight: 600; font-size: 0.9rem; text-decoration: none; flex: 1;">
+                                {html.escape(title)}
+                            </a>
+                        </div>
+                        <div style="padding: 0 0.875rem 0.875rem 0.875rem; border-top: 1px solid #f3f4f6;">
+                            <div style="color: #6b7280; font-size: 0.85rem; line-height: 1.5; margin-top: 0.75rem;">
+                                {html.escape(summary)}
+                            </div>
+                            <div style="color: #9ca3af; font-size: 0.75rem; margin-top: 0.5rem; font-family: monospace; word-break: break-all;">
+                                {html.escape(url)}
+                            </div>
+                        </div>
+                    </div>
+                    '''
+                result_html += '</div>'
+                return f'''<div class="result-card-expanded" style="border-left: 3px solid {border_color};">
+<div class="result-header-expanded">{tool_label}</div>
+<div class="result-content-expanded" style="font-family: inherit;">{search_title}{result_html}</div>
+</div>'''
+    
+    # ===== BROWSER.OPEN and BROWSER.FIND =====
+    lines = result.split('\n')
+    title_html = ""
+    content_start_idx = 0
+    pattern_to_highlight = None
+    
+    if lines and re.match(r'^\[\d+\]\s+.+\s+\(.+\)$', lines[0]):
+        first_line = lines[0]
+        match = re.match(r'^\[(\d+)\]\s+(.+?)\s+\((.+)\)$', first_line)
+        if match:
+            ref_num, title, url = match.groups()
+            
+            if fn_name == "browser.find":
+                pattern_match = re.search(r'Find Results:\s*(.+)', title)
+                if pattern_match:
+                    pattern_to_highlight = pattern_match.group(1).strip()
+            
+            is_clickable = not url.startswith('web-search://')
+            
+            if is_clickable:
+                title_html = f'''
+                <div style="background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); padding: 0.875rem 1rem; margin: -1.25rem -1.25rem 1rem -1.25rem; border-bottom: 1px solid #e0e7ff;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span style="background: {border_color}; color: white; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">【{ref_num}】</span>
+                        <a href="{html.escape(url)}" target="_blank" 
+                           style="color: #1e40af; font-weight: 600; font-size: 0.95rem; text-decoration: none; flex: 1;">
+                            {html.escape(title)}
+                        </a>
+                    </div>
+                    <div style="color: #64748b; font-size: 0.75rem; margin-top: 0.25rem; font-family: monospace;">
+                        {html.escape(url)}
+                    </div>
+                </div>
+                '''
+            else:
+                title_html = f'''
+                <div style="background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%); padding: 0.875rem 1rem; margin: -1.25rem -1.25rem 1rem -1.25rem; border-bottom: 1px solid #e0e7ff;">
+                    <div style="display: flex; align-items: center; gap: 0.5rem;">
+                        <span style="background: {border_color}; color: white; padding: 0.125rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600;">【{ref_num}】</span>
+                        <span style="color: #1e40af; font-weight: 600; font-size: 0.95rem;">{html.escape(title)}</span>
+                    </div>
+                </div>
+                '''
+            
+            content_start_idx = 1
+            if content_start_idx < len(lines) and lines[content_start_idx].startswith('**viewing lines'):
+                content_start_idx += 1
+            if content_start_idx < len(lines) and lines[content_start_idx].strip() == '':
+                content_start_idx += 1
+    
+    cleaned_lines = []
+    for line in lines[content_start_idx:]:
+        cleaned_line = re.sub(r'^L\d+:\s*', '', line)
+        cleaned_lines.append(cleaned_line)
+    
+    cleaned_content = '\n'.join(cleaned_lines)
+    formatted_result = html.escape(cleaned_content)
+    
+    if pattern_to_highlight and fn_name == "browser.find":
+        escaped_pattern = re.escape(pattern_to_highlight)
+        def highlight_match(match):
+            return f'<mark style="background: #86efac; padding: 0.125rem 0.25rem; border-radius: 2px; font-weight: 600; color: #064e3b;">{match.group(0)}</mark>'
+        formatted_result = re.sub(
+            escaped_pattern,
+            highlight_match,
+            formatted_result,
+            flags=re.IGNORECASE
+        )
+    
+    def make_citation_clickable(match):
+        full_text = match.group(0)
+        parts_match = re.match(r'【(\d+)†([^†]+)†([^】]+)】', full_text)
+        if parts_match:
+            ref_num = parts_match.group(1)
+            title = parts_match.group(2)
+            domain = parts_match.group(3)
+            url = f"https://{domain}" if not domain.startswith('http') else domain
+            return f'<a href="{html.escape(url)}" target="_blank" style="background: #e0f7fa; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: #006064; font-weight: 500; text-decoration: none; display: inline-block;" title="{html.escape(title)}">【{ref_num}†{html.escape(domain)}】</a>'
+        else:
+            simple_match = re.match(r'【(\d+)†([^】]+)】', full_text)
+            if simple_match:
+                ref_num = simple_match.group(1)
+                text = simple_match.group(2)
+                return f'<span style="background: #e0f7fa; padding: 2px 6px; border-radius: 4px; font-size: 0.85em; color: #006064; font-weight: 500;">【{ref_num}†{html.escape(text)}】</span>'
+        return full_text
+    
+    formatted_result = re.sub(r'【\d+†[^】]+】', make_citation_clickable, formatted_result)
+    formatted_result = formatted_result.replace('\n\n', '</p><p style="margin: 0.75rem 0;">')
+    formatted_result = formatted_result.replace('\n', '<br>')
+    
+    if not formatted_result.startswith('<p'):
+        formatted_result = f'<p style="margin: 0.75rem 0;">{formatted_result}</p>'
+    
+    max_length = 5000
+    if len(result) > max_length:
+        formatted_result = formatted_result[:max_length] + '<br><br><em style="color: #9ca3af;">...(content truncated for display)...</em>'
+    
+    return f'''<div class="result-card-expanded" style="border-left: 3px solid {border_color};">
+<div class="result-header-expanded">{tool_label}</div>
+<div class="result-content-expanded" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; line-height: 1.7; color: #374151;">{title_html}{formatted_result}</div>
+</div>'''
+
+def render_round_badge(round_num: int, max_rounds: int) -> str:
+    return f'<div class="round-badge">Round {round_num}/{max_rounds}</div>'
+
+def render_answer(text: str, browser: SimpleBrowser) -> str:
+    rendered = render_citations(text, browser)
+    return f'<div class="answer-section">{rendered}</div>'
+
+def render_completion() -> str:
+    return '<div class="completion-msg">Research Complete</div>'
+
+def render_user_message(question: str) -> str:
+    escaped = html.escape(question)
+    return f'''<div class="user-message-bubble">
+<div class="user-message-content">{escaped}</div>
+</div>'''
+
+
+
+# ============================================================
+# Remote API Generation (via vLLM-compatible endpoint)
+# ============================================================
+
+def generate_response(prompt: str, max_new_tokens: int = MAX_NEW_TOKENS) -> str:
+    """Generate response using vLLM OpenAI-compatible API."""
+    # Use /completions endpoint for raw prompt
+    url = f"{REMOTE_API_BASE}/completions"
+    headers = {"Content-Type": "application/json"}
+    payload = {
+        "model": MODEL_NAME,
+        "prompt": prompt,
+        "max_tokens": max_new_tokens,
+        "temperature": 0.7,
+        "top_p": 0.9,
+        "stop": ["\n<tool_response>", "<tool_response>"],
+    }
+
+    response = httpx.post(url, json=payload, headers=headers, timeout=300.0)
+    if response.status_code != 200:
+        raise Exception(f"vLLM API error {response.status_code}: {response.text}")
+
+    data = response.json()
+    return data["choices"][0]["text"]
+
+
+# ============================================================
+# Streaming Agent Runner
+# ============================================================
+def run_agent_streaming(
+    question: str,
+    serper_key: str,
+    max_rounds: int
+) -> Generator[str, None, None]:
+    global tokenizer
+
+    if not question.strip():
+        yield "<p style='color: var(--body-text-color-subdued); text-align: center; padding: 2rem;'>Please enter a question to begin.</p>"
+        return
+
+    if not serper_key:
+        yield """<div class="error-message">
+            <p><strong>Serper API Key Required</strong></p>
+            <p>Please configure your Serper API Key in the left sidebar under <strong>Settings</strong>.</p>
+            <p>Don't have an API key? <a href="https://serper.dev/" target="_blank" style="color: #667eea; text-decoration: underline;">Get one here →</a></p>
+        </div>"""
+        return
+
+    # Load tokenizer for prompt formatting
+    try:
+        load_tokenizer()
+    except Exception as e:
+        yield f"<p style='color:#dc2626;'>Error loading tokenizer: {html.escape(str(e))}</p>"
+        return
+
+    browser = SimpleBrowser(serper_key)
+    tools = json.loads(TOOL_CONTENT)
+
+    system_prompt = DEVELOPER_CONTENT + f"\n\nToday's date: {datetime.now().strftime('%Y-%m-%d')}"
+    messages = [
+        {"role": "system", "content": system_prompt},
+        {"role": "user", "content": question}
+    ]
+
+    stop_strings = ["\n<tool_response>", "<tool_response>"]
+
+    html_parts = [render_user_message(question)]
+    yield ''.join(html_parts)
+
+    round_num = 0
+
+    try:
+        while round_num < max_rounds:
+            round_num += 1
+            html_parts.append(render_round_badge(round_num, max_rounds))
+            yield ''.join(html_parts)
+
+            prompt = tokenizer.apply_chat_template(
+                messages,
+                tools=tools,
+                tokenize=False,
+                add_generation_prompt=True
+            )
+
+            try:
+                print(f"\n{'='*60}")
+                print(f"Round {round_num}")
+                print(f"{'='*60}")
+
+                html_parts.append('<div class="thinking-streaming">Processing...</div>')
+                yield ''.join(html_parts)
+
+                # Call ZeroGPU function
+                generated = generate_response(prompt, max_new_tokens=MAX_NEW_TOKENS)
+                
+                # Remove placeholder
+                html_parts.pop()
+
+            except Exception as e:
+                html_parts.pop()  # Remove placeholder
+                html_parts.append(f"<p style='color:#dc2626;'>Generation Error: {html.escape(str(e))}</p>")
+                yield ''.join(html_parts)
+                return
+
+            for stop_str in stop_strings:
+                if stop_str in generated:
+                    generated = generated[:generated.find(stop_str)]
+
+            reasoning, content = extract_thinking(generated)
+            tool_call, clean_content = parse_tool_call(content)
+
+            if reasoning:
+                html_parts.append(render_thinking_collapsed(reasoning))
+                yield ''.join(html_parts)
+
+            if tool_call:
+                fn_name = tool_call.get("name", "unknown")
+                args = tool_call.get("arguments", {})
+                html_parts.append(render_tool_call(fn_name, args, browser))
+                yield ''.join(html_parts)
+
+            if clean_content.strip() and not tool_call:
+                rendered = render_citations(clean_content, browser)
+                html_parts.append(f'<div class="answer-section">{rendered}</div>')
+                yield ''.join(html_parts)
+
+            non_thinking = generated.split('</think>', 1)[1].strip() if '</think>' in generated else generated.strip()
+            messages.append({
+                "role": "assistant",
+                "content": non_thinking if tool_call is None else "",
+                "reasoning_content": reasoning,
+                "tool_calls": [{
+                    "id": str(round_num),
+                    "type": "function",
+                    "function": {
+                        "name": tool_call.get("name", ""),
+                        "arguments": tool_call.get("arguments", {})
+                    }
+                }] if tool_call else None
+            })
+
+            if tool_call:
+                fn_name = tool_call.get("name", "")
+                args = tool_call.get("arguments", {})
+
+                if fn_name.startswith("browser."):
+                    actual_fn = fn_name.split(".", 1)[1]
+                else:
+                    actual_fn = fn_name
+
+                result = ""
+                try:
+                    if actual_fn == "search":
+                        result = asyncio.run(browser.search(args.get("query", ""), args.get("topn", 10)))
+                    elif actual_fn == "open":
+                        result = asyncio.run(browser.open(**args))
+                    elif actual_fn == "find":
+                        result = browser.find(args.get("pattern", ""), args.get("cursor", -1))
+                    else:
+                        result = f"Unknown tool: {fn_name}"
+                except Exception as e:
+                    result = f"Tool error: {str(e)}\n{traceback.format_exc()}"
+
+                html_parts.append(render_tool_result(result, fn_name))
+                yield ''.join(html_parts)
+
+                messages.append({
+                    "role": "tool",
+                    "tool_call_id": str(round_num),
+                    "content": result
+                })
+                continue
+
+            if is_final_answer(generated):
+                html_parts.append(render_completion())
+                yield ''.join(html_parts)
+                break
+
+        if round_num >= max_rounds:
+            html_parts.append('<div class="completion-msg" style="background:#fef3c7;border-color:#f59e0b;color:#92400e;">Maximum rounds reached</div>')
+            yield ''.join(html_parts)
+
+    except Exception as e:
+        tb = traceback.format_exc()
+        html_parts.append(f'<div style="color:#dc2626;"><p>Error: {html.escape(str(e))}</p><pre>{html.escape(tb)}</pre></div>')
+        yield ''.join(html_parts)
+
+
+# ============================================================
+# Gradio Interface
+# ============================================================
+CAROUSEL_JS = r"""
+(function() {
+    let currentExample = 0;
+    const totalExamples = 3;
+    let carouselInitialized = false;
+    let layoutInitialized = false;
+
+    function updateCarousel() {
+        const items = document.querySelectorAll('.carousel-item');
+        const dots = document.querySelectorAll('.carousel-dot');
+
+        items.forEach((item, index) => {
+            if (index === currentExample) {
+                item.classList.add('active');
+            } else {
+                item.classList.remove('active');
+            }
+        });
+
+        dots.forEach((dot, index) => {
+            if (index === currentExample) {
+                dot.classList.add('active');
+            } else {
+                dot.classList.remove('active');
+            }
+        });
+    }
+
+    function setExample(text) {
+        const container = document.querySelector('#question-input');
+        if (container) {
+            const textbox = container.querySelector('textarea');
+            if (textbox) {
+                const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value').set;
+                nativeInputValueSetter.call(textbox, text);
+                textbox.dispatchEvent(new Event('input', { bubbles: true }));
+                textbox.focus();
+            }
+        }
+    }
+
+    function initCarousel() {
+        if (carouselInitialized) return;
+
+        const prevBtn = document.getElementById('prev-btn');
+        const nextBtn = document.getElementById('next-btn');
+        const items = document.querySelectorAll('.carousel-item');
+        const dots = document.querySelectorAll('.carousel-dot');
+
+        if (!prevBtn || !nextBtn || items.length === 0) return;
+
+        carouselInitialized = true;
+
+        prevBtn.onclick = function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            currentExample = (currentExample - 1 + totalExamples) % totalExamples;
+            updateCarousel();
+        };
+
+        nextBtn.onclick = function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+            currentExample = (currentExample + 1) % totalExamples;
+            updateCarousel();
+        };
+
+        dots.forEach((dot, index) => {
+            dot.onclick = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                currentExample = index;
+                updateCarousel();
+            };
+        });
+
+        items.forEach((item, index) => {
+            item.onclick = function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                const text = this.getAttribute('data-text');
+                if (text) {
+                    setExample(text);
+                }
+            };
+        });
+    }
+
+    function isAutoScrollEnabled() {
+        const checkbox = document.querySelector('#auto-scroll-checkbox input[type="checkbox"]');
+        return checkbox ? checkbox.checked : true;
+    }
+
+    function scrollToBottom() {
+        if (!isAutoScrollEnabled()) return;
+        const outputArea = document.querySelector('#output-area');
+        if (outputArea) {
+            // 直接滚动 #output-area
+            outputArea.scrollTop = outputArea.scrollHeight;
+        }
+    }
+
+    // 监听输出区域的内容变化，自动滚动
+    function setupAutoScroll() {
+        const outputArea = document.querySelector('#output-area');
+        if (outputArea) {
+            const observer = new MutationObserver(function() {
+                // 延迟滚动以确保 DOM 已更新
+                requestAnimationFrame(function() {
+                    setTimeout(scrollToBottom, 50);
+                });
+            });
+            observer.observe(outputArea, { childList: true, subtree: true, characterData: true });
+        }
+    }
+
+    function updateOutputVisibility() {
+        const outputArea = document.getElementById('output-area');
+        if (outputArea) {
+            const content = outputArea.innerHTML.trim();
+            // 检查是否有实际内容（不只是空的 div 或空白）
+            const hasContent = content !== '' && content !== '<div></div>' && !/^<div[^>]*>\s*<\/div>$/.test(content);
+            if (hasContent) {
+                outputArea.classList.remove('hidden-output');
+                outputArea.classList.add('has-content');
+                outputArea.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; height: 50vh !important; min-height: 250px !important; max-height: 50vh !important; overflow-y: scroll !important; padding: 1rem !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #fafafa !important;';
+            } else {
+                outputArea.classList.add('hidden-output');
+                outputArea.classList.remove('has-content');
+                outputArea.style.cssText = 'display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important;';
+            }
+        }
+    }
+
+    function initLayout() {
+        if (layoutInitialized) return;
+
+        const mainContent = document.getElementById('main-content');
+        const outputArea = document.getElementById('output-area');
+
+        if (!mainContent) return;
+
+        layoutInitialized = true;
+        mainContent.classList.add('initial-state');
+
+        // 初始化时立即隐藏空的输出区域 - 使用内联样式确保生效
+        if (outputArea) {
+            const content = outputArea.innerHTML.trim();
+            const hasContent = content !== '' && content !== '<div></div>' && !/^<div[^>]*>\s*<\/div>$/.test(content);
+            if (!hasContent) {
+                outputArea.style.cssText = 'display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; opacity: 0 !important;';
+                outputArea.classList.add('hidden-output');
+                outputArea.classList.remove('has-content');
+            }
+        }
+
+        // 设置自动滚动监听
+        setupAutoScroll();
+
+        const outputObserver = new MutationObserver(function() {
+            const content = outputArea ? outputArea.innerHTML.trim() : '';
+            const hasContent = content !== '' && content !== '<div></div>' && !/^<div[^>]*>\s*<\/div>$/.test(content);
+
+            if (hasContent) {
+                mainContent.classList.remove('initial-state');
+                outputArea.classList.remove('hidden-output');
+                outputArea.classList.add('has-content');
+                outputArea.style.cssText = 'display: block !important; visibility: visible !important; opacity: 1 !important; height: 50vh !important; min-height: 250px !important; max-height: 50vh !important; overflow-y: scroll !important; padding: 1rem !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; background: #fafafa !important;';
+                setTimeout(scrollToBottom, 100);
+            } else {
+                mainContent.classList.add('initial-state');
+                if (outputArea) {
+                    outputArea.classList.add('hidden-output');
+                    outputArea.classList.remove('has-content');
+                    outputArea.style.cssText = 'display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important;';
+                }
+            }
+        });
+
+        if (outputArea) {
+            outputObserver.observe(outputArea, { childList: true, subtree: true, characterData: true });
+        }
+
+        const questionInput = document.querySelector('#question-input textarea');
+        if (questionInput) {
+            questionInput.focus();
+        }
+    }
+
+    const observer = new MutationObserver(function(mutations, obs) {
+        initCarousel();
+        initLayout();
+        if (carouselInitialized && layoutInitialized) {
+            obs.disconnect();
+        }
+    });
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true
+    });
+
+    // 立即尝试隐藏输出区域（在 DOM 完全加载之前）
+    function hideOutputAreaEarly() {
+        const outputArea = document.getElementById('output-area');
+        if (outputArea) {
+            const content = outputArea.innerHTML.trim();
+            const hasContent = content !== '' && content !== '<div></div>' && !/^<div[^>]*>\s*<\/div>$/.test(content);
+            if (!hasContent) {
+                outputArea.style.cssText = 'display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; border: none !important; opacity: 0 !important;';
+                outputArea.classList.add('hidden-output');
+                outputArea.classList.remove('has-content');
+            }
+        }
+    }
+
+    // 多次尝试隐藏，确保在各种时机都能生效
+    hideOutputAreaEarly();
+    document.addEventListener('DOMContentLoaded', hideOutputAreaEarly);
+    setTimeout(hideOutputAreaEarly, 0);
+    setTimeout(hideOutputAreaEarly, 100);
+    setTimeout(hideOutputAreaEarly, 300);
+    setTimeout(hideOutputAreaEarly, 500);
+    setTimeout(function() { initCarousel(); initLayout(); }, 1000);
+    setTimeout(function() { initCarousel(); initLayout(); }, 2000);
+    
+    // 深色模式适配 - 动态更新 output-area 背景色（防闪烁优化版）
+    let lastUpdateTime = 0;
+    const UPDATE_THROTTLE = 50; // 最小更新间隔 50ms
+    
+    function updateOutputAreaDarkMode() {
+        const now = Date.now();
+        if (now - lastUpdateTime < UPDATE_THROTTLE) {
+            return; // 跳过过于频繁的更新
+        }
+        lastUpdateTime = now;
+        
+        const outputArea = document.getElementById('output-area');
+        if (!outputArea) return;
+        
+        // 检查是否是深色模式
+        const isDark = document.documentElement.classList.contains('dark') || 
+                      document.body.classList.contains('dark') ||
+                      window.matchMedia('(prefers-color-scheme: dark)').matches;
+        
+        if (isDark) {
+            // 深色模式：深色背景
+            outputArea.style.setProperty('background', '#111827', 'important');
+            outputArea.style.setProperty('border-color', '#374151', 'important');
+        } else {
+            // 浅色模式：浅色背景
+            outputArea.style.setProperty('background', '#fafafa', 'important');
+            outputArea.style.setProperty('border-color', '#e5e7eb', 'important');
+        }
+    }
+    
+    // 延迟初始化，避免页面加载时闪烁
+    setTimeout(function() {
+        updateOutputAreaDarkMode();
+        
+        // 监听深色模式变化
+        const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        darkModeMediaQuery.addEventListener('change', updateOutputAreaDarkMode);
+        
+        // 监听 DOM class 变化
+        const darkModeObserver = new MutationObserver(updateOutputAreaDarkMode);
+        darkModeObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+        darkModeObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+        
+        // 监听 output-area 的内容变化
+        const outputArea = document.getElementById('output-area');
+        if (outputArea) {
+            const outputContentObserver = new MutationObserver(function() {
+                // 内容变化时立即应用深色模式样式
+                requestAnimationFrame(updateOutputAreaDarkMode);
+            });
+            
+            outputContentObserver.observe(outputArea, {
+                childList: true,
+                subtree: true
+            });
+        }
+    }, 500); // 延迟 500ms 后再启动监听
+})();
+"""
+
+def create_interface():
+    # Get the directory where this script is located for static files
+    script_dir = os.path.dirname(os.path.abspath(__file__))
+
+    # Helper function to convert image to base64 for embedding in HTML
+    def image_to_base64(image_path):
+        """Convert image file to base64 string for HTML embedding."""
+        try:
+            with open(image_path, 'rb') as img_file:
+                img_data = img_file.read()
+                b64_string = base64.b64encode(img_data).decode('utf-8')
+                # Determine MIME type based on file extension
+                ext = image_path.lower().split('.')[-1]
+                mime_types = {
+                    'png': 'image/png',
+                    'jpg': 'image/jpeg',
+                    'jpeg': 'image/jpeg',
+                    'svg': 'image/svg+xml',
+                    'gif': 'image/gif'
+                }
+                mime_type = mime_types.get(ext, 'image/png')
+                return f"data:{mime_type};base64,{b64_string}"
+        except Exception as e:
+            print(f"Error loading image {image_path}: {e}")
+            return ""
+
+    # Inline CSS - all styles embedded directly
+    INLINE_CSS = """
+    /* Global Styles */
+    .gradio-container {
+        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+    }
+    
+    /* Thinking Styles */
+    .thinking-collapsed {
+        background: #f9fafb;
+        border: 1px solid #e5e7eb;
+        border-radius: 8px;
+        padding: 0.75rem;
+        margin: 0.5rem 0;
+    }
+    
+    .thinking-collapsed summary {
+        cursor: pointer;
+        font-weight: 500;
+        color: #6b7280;
+        font-size: 0.875rem;
+    }
+    
+    .thinking-collapsed summary:hover {
+        color: #374151;
+    }
+    
+    .thinking-content {
+        margin-top: 0.5rem;
+        color: #374151;
+        white-space: pre-wrap;
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+    }
+    
+    .thinking-streaming {
+        background: #f0f9ff;
+        border: 1px solid #bae6fd;
+        border-radius: 8px;
+        padding: 0.875rem;
+        margin: 0.5rem 0;
+        color: #0c4a6e;
+        white-space: pre-wrap;
+        font-family: 'SF Mono', Monaco, monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+    }
+    
+    /* Tool Call Card */
+    .tool-call-card {
+        background: #f9fafb;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 0.75rem 0;
+    }
+    
+    .tool-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    
+    .tool-name {
+        font-weight: 600;
+        color: #374151;
+        font-size: 0.875rem;
+    }
+    
+    .tool-detail {
+        color: #6b7280;
+        font-size: 0.8rem;
+    }
+    
+    /* Result Card */
+    .result-card-expanded {
+        background: white;
+        border-radius: 8px;
+        padding: 1.25rem;
+        margin: 1rem 0;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    
+    .result-header-expanded {
+        font-weight: 600;
+        color: #374151;
+        margin-bottom: 1.25rem;
+        padding-bottom: 0.5rem;
+        border-bottom: 1px solid #e5e7eb;
+        font-size: 1rem;
+    }
+    
+    .result-content-expanded {
+        color: #4b5563;
+        line-height: 1.6;
+    }
+    
+    .result-content-expanded p {
+        margin: 0.5rem 0;
+    }
+    
+    .result-content-expanded code {
+        background: #f3f4f6;
+        padding: 0.125rem 0.375rem;
+        border-radius: 3px;
+        font-family: monospace;
+        font-size: 0.875em;
+    }
+    
+    /* Search Result Card Hover */
+    .search-result-card {
+        transition: all 0.2s ease;
+    }
+    
+    .search-result-card:hover {
+        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
+        border-color: #667eea !important;
+    }
+    
+    /* Answer Section */
+    .answer-section {
+        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+        border-left: 4px solid #10a37f;
+        border-radius: 8px;
+        padding: 1.5rem;
+        margin: 1rem 0;
+    }
+    
+    .answer-section p {
+        color: #374151;
+        line-height: 1.7;
+        margin: 0.5rem 0;
+    }
+    
+    .answer-section strong {
+        color: #1e293b;
+        font-weight: 600;
+    }
+    
+    .answer-section a {
+        color: #10a37f;
+        text-decoration: none;
+        font-weight: 500;
+    }
+    
+    .answer-section a:hover {
+        text-decoration: underline;
+    }
+    
+    /* User Message Bubble - 淡蓝色背景，右对齐 */
+    .user-message-bubble {
+        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+        color: #0c4a6e;
+        border-radius: 1rem 1rem 0.25rem 1rem;
+        padding: 1rem 1.25rem;
+        margin: 1rem 0 1rem auto;
+        max-width: 80%;
+        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.2);
+        border: 1px solid #7dd3fc;
+        text-align: right;
+    }
+
+    .user-message-content {
+        line-height: 1.6;
+        font-size: 0.95rem;
+    }
+
+    /* Output area - 固定高度可滚动 */
+    /* 强��固定高度，内容在里面滚动 */
+    #output-area,
+    #output-area.output-box,
+    div#output-area {
+        height: 50vh !important;
+        min-height: 250px !important;
+        max-height: 50vh !important;
+        overflow-y: scroll !important;
+        overflow-x: hidden !important;
+        padding: 1rem !important;
+        border: 1px solid #e5e7eb !important;
+        border-radius: 8px !important;
+        background: #fafafa !important;
+        scroll-behavior: smooth;
+        flex-shrink: 0 !important;
+        flex-grow: 0 !important;
+    }
+
+    /* 内部所有元素不能撑破容器 */
+    #output-area * {
+        max-height: none !important;
+        overflow: visible !important;
+    }
+
+    #output-area > div {
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+        border: none !important;
+        background: transparent !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        box-shadow: none !important;
+    }
+
+    /* 初始状态和空内容时隐藏 output-area */
+    #output-area:empty,
+    #output-area.hidden-output,
+    #output-area:not(.has-content),
+    .hidden-output#output-area,
+    div.hidden-output#output-area,
+    #main-content #output-area.hidden-output,
+    #main-content .output-box.hidden-output {
+        display: none !important;
+        visibility: hidden !important;
+        height: 0 !important;
+        min-height: 0 !important;
+        max-height: 0 !important;
+        padding: 0 !important;
+        margin: 0 !important;
+        border: none !important;
+        opacity: 0 !important;
+        overflow: hidden !important;
+    }
+
+    /* 防止内部内容撑破容器 */
+    #output-area > * {
+        max-width: 100%;
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+    }
+
+    /* 主内容区域布局 - 限制整体高度 */
+    #main-content {
+        display: flex !important;
+        flex-direction: column !important;
+        height: auto !important;
+        max-height: none !important;
+        overflow: visible !important;
+    }
+
+    /* Gradio 包装容器限制 */
+    #main-content > div {
+        flex-shrink: 0;
+    }
+
+    #output-area::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    #output-area::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 4px;
+    }
+
+    #output-area::-webkit-scrollbar-thumb {
+        background: #c1c1c1;
+        border-radius: 4px;
+    }
+
+    #output-area::-webkit-scrollbar-thumb:hover {
+        background: #a1a1a1;
+    }
+
+    /* 自动滚动控制按钮样式 */
+    #auto-scroll-checkbox {
+        margin-top: 0.5rem;
+    }
+
+    #auto-scroll-checkbox label {
+        font-size: 0.85rem;
+        color: #4b5563;
+    }
+    
+    /* Completion Message */
+    .completion-msg {
+        text-align: center;
+        color: #10a37f;
+        font-weight: 600;
+        padding: 1rem;
+        margin: 1rem 0;
+        background: #f0fdf4;
+        border-radius: 8px;
+        border: 1px solid #86efac;
+    }
+    
+    /* Error Message */
+    .error-message {
+        background: #fee2e2;
+        border-left: 4px solid #dc2626;
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 1rem 0;
+        color: #991b1b;
+    }
+    
+    .error-message strong {
+        color: #7f1d1d;
+    }
+    
+    .error-message a {
+        color: #dc2626;
+        font-weight: 500;
+    }
+    
+    /* Round Badge - 淡蓝色背景 */
+    .round-badge {
+        display: inline-block;
+        background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
+        color: #0369a1;
+        padding: 0.25rem 0.75rem;
+        border-radius: 999px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        margin: 0.5rem 0;
+        box-shadow: 0 2px 4px rgba(14, 165, 233, 0.15);
+        border: 1px solid #7dd3fc;
+    }
+    
+    /* Settings Section */
+    .settings-header {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        margin-bottom: 0.875rem;
+    }
+
+    .settings-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #374151;
+    }
+
+    .settings-api-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 0.375rem;
+    }
+
+    .settings-label {
+        font-size: 0.8rem;
+        font-weight: 500;
+        color: #4b5563;
+    }
+
+    .settings-help-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        font-size: 0.7rem;
+        color: #667eea;
+        text-decoration: none;
+        transition: opacity 0.2s;
+    }
+
+    .settings-help-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        font-size: 0.6rem;
+        font-weight: bold;
+    }
+
+    /* Tools Section */
+    .tools-section {
+        margin-top: 1rem;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.5rem;
+    }
+
+    .tools-title {
+        grid-column: 1 / -1;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #374151;
+        margin-bottom: 0.25rem;
+        margin-top: 0.5rem;
+    }
+
+    /* Tool Item */
+    .tool-item {
+        background: #f9fafb;
+        padding: 0.75rem;
+        border-radius: 6px;
+        margin-bottom: 0;
+        border: 1px solid #e5e7eb;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .tool-item strong {
+        color: #374151;
+        font-size: 0.85rem;
+    }
+
+    .tool-item span {
+        color: #6b7280;
+        font-size: 0.8rem;
+    }
+
+    /* Examples Section */
+    .examples-section {
+        margin-top: -0.5rem;
+    }
+
+    .examples-title {
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: #374151;
+        margin-bottom: 0.5rem;
+    }
+    
+    /* Example Carousel */
+    .example-carousel {
+        background: white;
+        border-radius: 8px;
+        padding: 1rem;
+        border: 1px solid #e5e7eb;
+    }
+    
+    .carousel-container {
+        position: relative;
+        min-height: 60px;
+        margin-bottom: 0.75rem;
+    }
+    
+    .carousel-item {
+        display: none;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+    
+    .carousel-item.active {
+        display: block;
+        opacity: 1;
+    }
+    
+    .carousel-item-text {
+        background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
+        padding: 1rem;
+        border-radius: 6px;
+        color: #374151;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        border: 1px solid #e0e7ff;
+    }
+    
+    .carousel-controls {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+    }
+    
+    .carousel-btn {
+        cursor: pointer;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        background: #f3f4f6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.25rem;
+        color: #6b7280;
+        transition: all 0.2s ease;
+        user-select: none;
+    }
+    
+    .carousel-btn:hover {
+        background: #667eea;
+        color: white;
+    }
+    
+    .carousel-indicators {
+        display: flex;
+        gap: 0.5rem;
+    }
+    
+    .carousel-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #d1d5db;
+        cursor: pointer;
+        transition: all 0.2s ease;
+    }
+    
+    .carousel-dot.active {
+        background: #667eea;
+        width: 24px;
+        border-radius: 4px;
+    }
+    
+    /* Welcome Message */
+    .welcome-container {
+        text-align: center;
+        padding: 3rem 2rem;
+    }
+    
+    .welcome-title {
+        font-size: 2rem;
+        font-weight: 700;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 1rem;
+    }
+    
+    .welcome-subtitle {
+        color: #6b7280;
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+    }
+    
+    /* Footer */
+    .footer-container {
+        text-align: center;
+        padding: 1.5rem;
+        color: #9ca3af;
+        font-size: 0.875rem;
+        border-top: 1px solid #e5e7eb;
+        margin-top: 2rem;
+    }
+    
+    .footer-container a {
+        color: #667eea;
+        text-decoration: none;
+    }
+    
+    .footer-container a:hover {
+        text-decoration: underline;
+    }
+
+    /* Disclaimer */
+    .disclaimer {
+        text-align: center;
+        padding: 1rem;
+        color: #6b7280;
+        font-size: 0.875rem;
+        border-top: 1px solid #e5e7eb;
+        margin-top: 1rem;
+    }
+
+    /* ========== 深色模式适配 ========== */
+    @media (prefers-color-scheme: dark) {
+        /* Settings 区域 */
+        #settings-group {
+            background: #1f2937 !important;
+            border-color: #374151 !important;
+        }
+
+        .settings-title,
+        .tools-title,
+        .examples-title {
+            color: #e5e7eb !important;
+        }
+
+        .settings-label {
+            color: #9ca3af !important;
+        }
+
+        .settings-help-link {
+            color: #818cf8 !important;
+        }
+
+        /* Available Tools 区域 */
+        .tool-item {
+            background: #1f2937 !important;
+            border-color: #374151 !important;
+        }
+
+        .tool-item strong {
+            color: #e5e7eb !important;
+        }
+
+        .tool-item span {
+            color: #9ca3af !important;
+        }
+
+        /* Example Carousel 区域 */
+        .example-carousel {
+            background: #1f2937 !important;
+            border-color: #374151 !important;
+        }
+
+        .carousel-item-text {
+            background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+            border-color: #3b82f6 !important;
+            color: #e0f2fe !important;
+        }
+
+        .carousel-btn {
+            background: #374151 !important;
+            color: #9ca3af !important;
+        }
+
+        .carousel-btn:hover {
+            background: #667eea !important;
+            color: white !important;
+        }
+
+        .carousel-dot {
+            background: #4b5563 !important;
+        }
+
+        .carousel-dot.active {
+            background: #667eea !important;
+        }
+
+        /* Output area 深色模式 */
+        #output-area,
+        #output-area.output-box,
+        div#output-area {
+            background: #111827 !important;
+            border: 1px solid #374151 !important;
+        }
+
+        #output-area::-webkit-scrollbar-track {
+            background: #1f2937 !important;
+        }
+
+        #output-area::-webkit-scrollbar-thumb {
+            background: #4b5563 !important;
+        }
+
+        #output-area::-webkit-scrollbar-thumb:hover {
+            background: #6b7280 !important;
+        }
+
+        /* Tool call card 深色模式 */
+        .tool-call-card {
+            background: #1f2937 !important;
+        }
+
+        .tool-name {
+            color: #e5e7eb !important;
+        }
+
+        .tool-detail {
+            color: #9ca3af !important;
+        }
+
+        /* Result card 深色模式 */
+        .result-card-expanded {
+            background: #1f2937 !important;
+        }
+
+        .result-header-expanded {
+            color: #e5e7eb !important;
+            border-bottom-color: #374151 !important;
+        }
+
+        .result-content-expanded {
+            color: #d1d5db !important;
+        }
+
+        /* Thinking 深色模式 */
+        .thinking-collapsed {
+            background: #1f2937 !important;
+            border-color: #374151 !important;
+        }
+
+        .thinking-collapsed summary {
+            color: #9ca3af !important;
+        }
+
+        .thinking-content {
+            color: #d1d5db !important;
+        }
+
+        .thinking-streaming {
+            background: #0c4a6e !important;
+            border-color: #0369a1 !important;
+            color: #bae6fd !important;
+        }
+
+        /* Answer section 深色模式 */
+        .answer-section {
+            background: linear-gradient(135deg, #0c4a6e 0%, #164e63 100%) !important;
+        }
+
+        .answer-section p {
+            color: #e0f2fe !important;
+        }
+
+        .answer-section strong {
+            color: #f0f9ff !important;
+        }
+
+        /* 用户问题气泡深色模式 */
+        .user-message-bubble {
+            background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+            color: #e0f2fe !important;
+            border-color: #3b82f6 !important;
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
+        }
+
+        .user-message-content {
+            color: #e0f2fe !important;
+        }
+
+        /* Round Badge 深色模式 */
+        .round-badge {
+            background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+            color: #93c5fd !important;
+            border-color: #3b82f6 !important;
+            box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
+        }
+
+        /* 搜索结果卡片深色模式 */
+        .search-result-card {
+            background: #1f2937 !important;
+            border-color: #374151 !important;
+        }
+
+        .search-result-card:hover {
+            border-color: #667eea !important;
+        }
+
+        /* 工具结果标题区域深色模式 */
+        .result-card-expanded div[style*="background: linear-gradient"] {
+            background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+            border-color: #3b82f6 !important;
+        }
+
+        .result-card-expanded div[style*="background: linear-gradient"] span[style*="color: #1e40af"],
+        .result-card-expanded div[style*="background: linear-gradient"] a[style*="color: #1e40af"] {
+            color: #93c5fd !important;
+        }
+
+        .result-card-expanded div[style*="color: #64748b"] {
+            color: #9ca3af !important;
+        }
+
+        /* 完成消息深色模式 */
+        .completion-msg {
+            background: #064e3b !important;
+            border-color: #059669 !important;
+            color: #6ee7b7 !important;
+        }
+
+        /* 错误消息深色模式 */
+        .error-message {
+            background: #450a0a !important;
+            border-color: #b91c1c !important;
+            color: #fca5a5 !important;
+        }
+
+        /* 侧边栏标题深色模式 */
+        div[style*="font-weight: 600"][style*="color: #374151"] {
+            color: #e5e7eb !important;
+        }
+
+        /* Disclaimer 深色模式 */
+        .disclaimer {
+            color: #9ca3af !important;
+            border-color: #374151 !important;
+        }
+    }
+
+    /* Gradio 深色主题类名适配 */
+    .dark #settings-group,
+    .dark .tool-item,
+    .dark .example-carousel {
+        background: #1f2937 !important;
+        border-color: #374151 !important;
+    }
+
+    .dark .settings-title,
+    .dark .tools-title,
+    .dark .examples-title,
+    .dark .tool-item strong,
+    .dark .result-header-expanded,
+    .dark .tool-name {
+        color: #e5e7eb !important;
+    }
+
+    .dark .settings-label,
+    .dark .tool-item span,
+    .dark .tool-detail,
+    .dark .thinking-collapsed summary {
+        color: #9ca3af !important;
+    }
+
+    .dark .settings-help-link {
+        color: #818cf8 !important;
+    }
+
+    .dark .carousel-item-text {
+        background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+        border-color: #3b82f6 !important;
+        color: #e0f2fe !important;
+    }
+
+    .dark #output-area,
+    .dark #output-area.output-box,
+    .dark div#output-area {
+        background: #111827 !important;
+        border: 1px solid #374151 !important;
+    }
+
+    .dark .tool-call-card,
+    .dark .result-card-expanded,
+    .dark .thinking-collapsed {
+        background: #1f2937 !important;
+        border-color: #374151 !important;
+    }
+
+    .dark .result-content-expanded,
+    .dark .thinking-content {
+        color: #d1d5db !important;
+    }
+
+    .dark .answer-section {
+        background: linear-gradient(135deg, #0c4a6e 0%, #164e63 100%) !important;
+    }
+
+    .dark .answer-section p {
+        color: #e0f2fe !important;
+    }
+
+    .dark .search-result-card {
+        background: #1f2937 !important;
+        border-color: #374151 !important;
+    }
+
+    .dark .completion-msg {
+        background: #064e3b !important;
+        border-color: #059669 !important;
+        color: #6ee7b7 !important;
+    }
+
+    /* 用户问题气泡 Gradio dark 模式 */
+    .dark .user-message-bubble {
+        background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+        color: #e0f2fe !important;
+        border-color: #3b82f6 !important;
+        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
+    }
+
+    .dark .user-message-content {
+        color: #e0f2fe !important;
+    }
+
+    /* Round Badge Gradio dark 模式 */
+    .dark .round-badge {
+        background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+        color: #93c5fd !important;
+        border-color: #3b82f6 !important;
+        box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2) !important;
+    }
+
+    /* 工具结果标题 Gradio dark 模式 */
+    .dark .result-card-expanded div[style*="background: linear-gradient"] {
+        background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 100%) !important;
+        border-color: #3b82f6 !important;
+    }
+
+    /* Disclaimer Gradio dark 模式 */
+    .dark .disclaimer {
+        color: #9ca3af !important;
+        border-color: #374151 !important;
+    }
+    """
+    
+    with gr.Blocks(css=INLINE_CSS, theme=gr.themes.Soft(), js=CAROUSEL_JS) as demo:
+        # Header with logo and title images - convert to base64 for proper rendering
+        logo_path = os.path.join(os.path.dirname(script_dir), "assets", "imgs", "or-logo1.png")
+        title_path = os.path.join(os.path.dirname(script_dir), "assets", "imgs", "openresearcher-title.svg")
+
+        logo_base64 = image_to_base64(logo_path)
+        title_base64 = image_to_base64(title_path)
+
+        # Build header HTML with base64 images
+        header_html = f"""
+        <div style="
+            text-align: center;
+            padding: 0.5rem 2rem 0rem 2rem;
+            background: transparent;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: center;
+            gap: 1.5rem;
+        ">
+        """
+
+        if logo_base64:
+            header_html += f'<img src="{logo_base64}" alt="OpenResearcher Logo" style="height: 84px;">'
+        if title_base64:
+            header_html += f'<img src="{title_base64}" alt="OpenResearcher" style="height: 84px;">'
+
+        header_html += "</div>"
+
+        gr.HTML(header_html)
+
+        gr.HTML("""
+<div style="display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 0px; margin-bottom: 24px;">
+    <a href="https://huggingface.co/datasets/OpenResearcher/OpenResearcher-Dataset" target="_blank">
+        <img src="https://img.shields.io/badge/Dataset-FFB7B2?style=for-the-badge&logo=huggingface&logoColor=ffffff" alt="Dataset" style="height: 28px;">
+    </a>
+    <a href="https://huggingface.co/OpenResearcher/Nemotron-3-Nano-30B-A3B" target="_blank">
+        <img src="https://img.shields.io/badge/Model-FFD966?style=for-the-badge&logo=huggingface&logoColor=ffffff" alt="Model" style="height: 28px;">
+    </a>
+    <a href="https://boiled-honeycup-4c7.notion.site/OpenResearcher-A-Fully-Open-Pipeline-for-Long-Horizon-Deep-Research-Trajectory-Synthesis-2f7e290627b5800cb3a0cd7e8d6ec0ea?source=copy_link" target="_blank">
+        <img src="https://img.shields.io/badge/Blog-4285F4?style=for-the-badge&logo=google-chrome&logoColor=white" alt="Blog" style="height: 28px;">
+    </a>
+    <a href="https://wandb.ai/dongfu/nano-v3-sft-search" target="_blank">
+        <img src="https://img.shields.io/badge/WandB%20Logs-48B5A3?style=for-the-badge&logo=weightsandbiases&logoColor=white" alt="WandB Logs" style="height: 28px;">
+    </a>
+    <a href="https://huggingface.co/datasets/OpenResearcher/OpenResearcher-Eval-Logs/tree/main" target="_blank">
+        <img src="https://img.shields.io/badge/Eval%20Logs-755BB4?style=for-the-badge&logo=google-sheets&logoColor=white" alt="Eval Logs" style="height: 28px;">
+    </a>
+</div>
+""")
+
+        # Main layout: Left sidebar + Right content
+        with gr.Row():
+            # Left Sidebar (settings & tools)
+            with gr.Column(scale=1, min_width=280):
+                # API Settings in a unified box
+                with gr.Group(elem_id="settings-group"):
+                    gr.HTML('''
+                    <div class="settings-header">
+                        <span class="settings-title">⚙️ Settings</span>
+                    </div>
+                    <div class="settings-api-row">
+                        <span class="settings-label">Serper API Key</span>
+                        <a href="https://serper.dev/" target="_blank" class="settings-help-link" title="How to get Serper API Key">
+                            <span class="settings-help-icon">?</span>
+                            <span>How to get</span>
+                        </a>
+                    </div>
+                    ''')
+                    serper_input = gr.Textbox(
+                        label="",
+                        value=SERPER_API_KEY,
+                        type="password",
+                        placeholder="Enter your Serper API key...",
+                        show_label=False,
+                        elem_id="serper-api-input",
+                        container=False
+                    )
+                    max_rounds_input = gr.Slider(
+                        minimum=1,
+                        maximum=200,
+                        value=50,
+                        step=1,
+                        label="Max Rounds",
+                        elem_id="max-rounds-slider"
+                    )
+                    auto_scroll_checkbox = gr.Checkbox(
+                        label="Auto Scroll",
+                        value=True,
+                        elem_id="auto-scroll-checkbox",
+                        interactive=True
+                    )
+
+                # Tools info
+                gr.HTML("""
+                <div class="tools-section">
+                    <div class="tools-title">🛠️ Available Tools</div>
+                    <div class="tool-item"><strong>browser.search</strong> <span>Search the web</span></div>
+                    <div class="tool-item"><strong>browser.open</strong> <span>Open & read pages</span></div>
+                    <div class="tool-item"><strong>browser.find</strong> <span>Find text in page</span></div>
+                </div>
+                """)
+
+                # Example carousel with navigation
+                gr.HTML("""
+                <div class="examples-section">
+                    <div class="examples-title">💡 Try Examples</div>
+                    <div class="example-carousel" id="example-carousel">
+                        <div class="carousel-container">
+                            <div class="carousel-item active" data-index="0" data-text="Who won the Nobel Prize in Physics 2024?">
+                                <div class="carousel-item-text">🏆 Who won the Nobel Prize in Physics 2024?</div>
+                            </div>
+                            <div class="carousel-item" data-index="1" data-text="What are the latest breakthroughs in quantum computing in 2024?">
+                                <div class="carousel-item-text">🔬 What are the latest breakthroughs in quantum computing in 2024?</div>
+                            </div>
+                            <div class="carousel-item" data-index="2" data-text="What are the new features in Python 3.12?">
+                                <div class="carousel-item-text">🐍 What are the new features in Python 3.12?</div>
+                            </div>
+                        </div>
+                        <div class="carousel-controls">
+                            <div class="carousel-btn" id="prev-btn">‹</div>
+                            <div class="carousel-indicators">
+                                <div class="carousel-dot active" data-index="0"></div>
+                                <div class="carousel-dot" data-index="1"></div>
+                                <div class="carousel-dot" data-index="2"></div>
+                            </div>
+                            <div class="carousel-btn" id="next-btn">›</div>
+                        </div>
+                    </div>
+                </div>
+                """)
+
+            # Main content area (30-70)
+            with gr.Column(scale=3, elem_id="main-content"):
+                # Output area (on top, hidden initially)
+                output_area = gr.HTML(
+                    value="",
+                    elem_classes=["output-box"],
+                    elem_id="output-area",
+                    visible=True
+                )
+
+                # Welcome message (will be hidden after first search)
+                welcome_html = gr.HTML(
+                    value="""
+                    <div id="welcome-section" class="welcome-section">
+                        <h2>What Would You Like to Research?</h2>
+                        <p>I am OpenResearcher, a leading open-source Deep Research Agent, welcome to try!</p>
+                    </div>
+                    """,
+                    elem_id="welcome-container"
+                )
+
+                # Input area at bottom
+                question_input = gr.Textbox(
+                    label="",
+                    placeholder="Ask me anything and I'll handle the rest...",
+                    lines=2,
+                    show_label=False,
+                    elem_id="question-input",
+                    autofocus=True
+                )
+
+                with gr.Row(elem_id="button-row"):
+                    submit_btn = gr.Button(
+                        "🔍 Start DeepResearch",
+                        variant="primary",
+                        elem_classes=["primary-btn"],
+                        scale=3
+                    )
+                    stop_btn = gr.Button("⏹ Stop", variant="stop", scale=1)
+                    clear_btn = gr.Button("🗑 Clear", scale=1)
+
+        # Function to hide welcome and show output
+        def start_research(question, serper_key, max_rounds):
+            # Generator that first hides welcome, then streams results
+            # Also clears the input box for the next question
+            
+            # Initial yield to immediately clear welcome, show loading in output, and clear input
+            # IMPORTANT: Don't use empty string for output, or JS will hide the output area!
+            yield "", '<div style="text-align: center; padding: 2rem; color: #6b7280;">Delving into it...</div>', ""
+            
+            for result in run_agent_streaming(question, serper_key, max_rounds):
+                yield "", result, ""
+
+        # Event handlers
+        submit_event = submit_btn.click(
+            fn=start_research,
+            inputs=[question_input, serper_input, max_rounds_input],
+            outputs=[welcome_html, output_area, question_input],
+            show_progress="hidden"
+        )
+
+        question_input.submit(
+            fn=start_research,
+            inputs=[question_input, serper_input, max_rounds_input],
+            outputs=[welcome_html, output_area, question_input],
+            show_progress="hidden"
+        )
+
+        stop_btn.click(fn=None, inputs=None, outputs=None, cancels=[submit_event])
+        clear_btn.click(
+            fn=lambda: ("""
+                <div id="welcome-section" class="welcome-section">
+                    <h2>What would you like to research?</h2>
+                    <p>Ask any question and I'll search the web to find answers</p>
+                </div>
+                """, "", ""),
+            outputs=[welcome_html, output_area, question_input]
+        )
+
+        # Disclaimer
+        gr.HTML('''
+        <div class="disclaimer">
+            ⚠️ AI may generate incorrect information or citations. Please double-check important facts.
+        </div>
+        ''')
+
+    return demo
+
+if __name__ == "__main__":
+    print("="*60)
+    print("OpenResearcher DeepSearch Agent - ZeroGPU Space")
+    print("="*60)
+    demo = create_interface()
+    demo.queue().launch()

requirements.txt

@@ -0,0 +1,11 @@
+gradio>=4.0.0
+transformers<5.0.0
+torch>=2.0.0
+httpx
+spaces
+# OpenResearcher DeepSearch Agent - Hugging Face Space
+bitsandbytes
+sentencepiece
+protobuf
+json5
+accelerate