feat: Initial clean commit

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz 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
+*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,15 @@
+# Log files
+app.log
+
+# Local configuration
+local.py
+
+# IDE settings
+.idea/
+
+# Python cache
+__pycache__/
+/site/
+*.pyc
+*.pyo
+*.pyd

GEMINI.md

@@ -0,0 +1,236 @@
+# Ling & Ring Playground - 项目与协作文档
+
+> **[重要] 上下文说明:** 本文档定义了 **Ling & Ring Playground** 项目的具体设计和流程。我们的整体协作模式、沟通风格、以及通用的文档和目录规范，均遵循一套**全局 `GEMINI.md` 核心协作指令**。阅读本文档前，建议先了解该全局框架，以获得完整的上下文。
+
+---
+
+## 第一部分：元信息与协作流程
+
+---
+
+## Gemini 用例
+
+### 运行项目
+
+要启动此 Gradio 应用，请遵循以下步骤：
+
+1.  **安装依赖:** 确保所有必要的库都已安装。
+    ```bash
+    uv pip install -r requirements.txt
+    ```
+    *注意: 如果遇到与 SOCKS 代理相关的 `ImportError`，请额外运行 `uv pip install "httpx[socks]"`。*
+
+2.  **启动应用:** 在后台静默运行应用。
+    ```bash
+    source .venv/bin/activate && python3 app.py > /dev/null 2>&1 &
+    ```
+
+3.  **验证:** 在浏览器中打开 `http://127.0.0.1:7860` 以确认应用正在运行。
+
+### 需求开发流程
+
+为确保每个需求的精确实现和追踪，我们遵循以下协作流程：
+
+1.  **需求接收 (Requirement Reception):**
+    - 当你提出新需求时，我将首先在 `docs/backlog/` 目录下创建一个 Markdown 文件，作为“需求池”的记录。
+    - 文件名格式为 `YYYY-MM-DD-HH-mm-需求简述.md`。
+    - 文件内容将包含：需求描述、创建时间、初始状态 `待处理 (Pending)`、验证方式（暂空）、验证结果（暂空）。
+
+2.  **规划与确认 (Plan & Confirm):**
+    - 当我们决定处理一个需求时，我会基于其文档，提出具体的执行计划。
+    - 在你确认计划后，我会将该需求文件从 `docs/backlog/` **移动**到 `docs/requirements/` 目录，并将其状态更新为 `开发中 (In Progress)`。
+
+3.  **修订章程 (Revise Charter):**
+    - 我会更新 `GEMINI.md` 的“第三部分：详细设计”，以反映新功能的设计细节。
+
+4.  **执行 (Execute):**
+    - 我将根据确认的计划进行编码实现。
+
+5.  **提交验证 (Submit for Verification):**
+    - 完成代码编写后，我会重启应用，并**自动刷新你的浏览器以展示最新版本**。
+    - 同时，我将更新需求文件，将状态改为 `已完成 (Completed)`，并填入“验证方式”供你参考。
+
+6.  **确认与关闭 (Confirm & Close):**
+    - 在你完成验证并确认功能符合预期后，我会将需求文件的“验证结果”更新为 `已验证 (Verified)`，至此该需求流程关闭。
+
+### 调试与 Bug 修复流程
+
+当功能未按预期工作时，我们将采用以下高效的诊断流程：
+
+1.  **问题报告:** 你需要向我清晰地描述问题，包括：
+    -   **复现步骤:** 你进行了哪些具体操作。
+    -   **预期结果:** 你期望看到什么。
+    -   **实际结果:** 你实际看到了什么（例如：报错、无响应、界面错乱等）。
+
+2.  **启动日志模式:** 我会终止在后台静默运行的应用，并以日志模式重新启动它。这能让我观察到应用在运行期间的所有内部活动和潜在错误。
+    ```bash
+    # 命令示例
+    source .venv/bin/activate && python3 app.py > app.log 2>&1 &
+    ```
+
+3.  **复现与分析:** 我会请你重新执行一遍复现步骤。在你操作完成后，我将立即读取 `app.log` 文件，分析其中的错误信息和执行轨迹，定位问题的根本原因。
+
+4.  **修复与验证:**
+    -   根据日志分析，我会提出具体的修复方案并执行。
+    -   修复后，我会重启应用（仍处于日志模式），并**自动刷新你的浏览器**，然后请你再次验证。
+    -   如果问题依然存在，我们将重复步骤 3 和 4。
+
+5.  **流程结束:** 在你确认 Bug 已被完全修复后，此调试流程结束。我会终止日志模式的应用，清理日志文件，**以标准的静默模式重新启动应用，并为你刷新浏览器**。
+
+### 代码提交与版本管理
+
+在完成一个需求或修复一个 Bug 后，我们将遵循以下流程来提交代码和管理版本：
+
+1.  **暂存变更:**
+    -   使用 `git add .` 暂存所有修改。
+
+2.  **编写提交信息 (Commit Message):**
+    -   Commit message 应遵循**约定式提交 (Conventional Commits)**规范。
+    -   格式为 `<类型>(<范围>): <描述>`，例如：
+        -   `feat(chat): 添加发送按钮`
+        -   `fix(models): 修正 Ring 模型流式输出问题`
+        -   `docs(workflow): 更新调试与验证流程`
+    -   常用的类型包括 `feat`, `fix`, `docs`, `style`, `refactor`, `test` 等。
+
+3.  **创建版本标签 (Git Tag):**
+    -   **检查现有版本:** 在打标签前，**必须**先运行 `git tag` 查看所有历史版本，以确定下一个正确的版本号。
+    -   **确定版本号:** 遵循**语义化版本 (Semantic Versioning)**。在 `v1.0.0` 之前，我们主要递增次版本号（如 `v0.4` -> `v0.5`）。
+    -   **���建附注标签:** 使用 `git tag -a <版本号> -m "<版本摘要>"` 创建一个附注标签，其中摘要应简明扼要地概括该版本的主要变更。例如：
+        ```bash
+        git tag -a v0.5 -m "v0.5: Automate browser verification and formalize debugging process"
+        ```
+
+4.  **最终确认:**
+    -   提交和打标签后，运行 `git status` 和 `git tag` 确认工作区干净且新标签已成功创建。
+
+---
+
+## 第二部分：整体设计
+
+### 2.1 项目目标
+
+创建一个名为 “Ling & Ring Playground” 的 Hugging Face Space，用于展示两个核心 AI 模型：
+
+- **Ling (🧠):** 通用对话模型。
+- **Ring (💍):** 推理/代理模型，用于代码生成、网页检索和工作流执行。
+
+### 2.2 核心设计原则
+
+- **任务导向:** UI 围绕用户任务（聊天、编码等）组织，而非直接暴露模型。
+- **品牌明晰:** 在每个功能界面清晰标注“由 Ling/Ring 模型驱动”。
+- **无缝体验:** 用户无需手动输入 API Token，认证在后端自动完成。
+- **引导优先:** 提供精心设计的示例，确保用户获得高质量的初次体验。
+
+### 2.3 技术栈与架构
+
+- **前端/UI:** Gradio `gr.Blocks`
+- **后端:** Python
+- **安全:** 所有 API 密钥通过 Hugging Face Space Secrets 管理。
+
+### 2.3.1 配置加载策略
+
+为兼顾本地开发的便利性、线上部署的安全性与成本效益，项目采用了一种分层配置加载机制：
+
+1.  **本地优先 (`local.py`):** 在项目根目录下，可以创建一个 `local.py` 文件来存放本地开发所需的配置，例如使用内部免费 Provider 的 API Key 和 Endpoint。此文件**必须**被 `.gitignore` 忽略，以防止任何敏感信息被提交到版本控制中。
+2.  **环境变量回退:** 当 `local.py` 文件不存在时（例如在 Hugging Face Spaces 的生产环境中），系统将自动回退，尝试从环境变量中读取所需的配置。这种方式使得 API Key 等敏感信息可以通过平台安全地注入，而无需硬编码在代码中。
+3.  **模型 ID 本地映射:** 为了方便本地开发和调试，系统还支持通过在 `local.py` 文件中定义一个 `get_local_model_id_map` 函数，来实现从在线模型 ID 到本地模型 ID 的映射。这允许开发者在不修改核心代码库的情况下，将模型请求指向本地运行的服务或不同的模型版本。
+
+此策略确保了开发者在本地可以快速迭代，而线上部署则遵循了安全最佳实践。
+
+### 2.4 项目结构
+
+```
+/
+├───.gitignore
+├───app.py              # 应用主入口
+├───config.py           # 配置文件，用于存放 API 密钥等
+├───GEMINI.md           # 项目与协作文档（唯一事实来源）
+├───models.py           # 模型交互逻辑
+├───requirements.txt    # Python 依赖
+├───tab_chat.py         # “聊天”功能模块
+├───tab_code.py         # “代码生成”功能模块
+├───tab_search.py       # “网页检索”功能模块
+├───tab_workflow.py     # “工作流”功能模块
+├───utils.py            # 通用工具函数
+└───docs/
+    ├───backlog/        # 待办需求池
+    ├───requirements/   # 需求文档（Git 跟踪）
+    └───refs/           # 本地参考资料（Git 忽略）
+```
+
+### 2.5 代码架构
+
+1.  **`models.py`**: 存放所有与模型对接和交互的逻辑。
+2.  **`app.py`**: 作为应用的统一入口，仅保留最精简的组装和启动逻辑。
+3.  **`tab_*.py`**: 每个标签页（如 `tab_chat.py`）独立一个文件，负责构建该标签页的UI和处理其特定的后端逻辑。
+4.  **`app.py` 调用**: 主入口 `app.py` 通过调用各个 `tab_*.py` 中的函数来创建和组装完整的应用界面。
+5.  **`utils.py`**: 存放可被多处复用的纯静态方法、常量或辅助函数。
+
+---
+
+## 第三部分：详细设计
+
+应用为一个包含页头和四个核心功能标签页的单页应用。
+
+### Tab 1: 聊天 (Chat) - `tab_chat.py`
+
+- **目标:** 提供一个与 Ling 模型进行高质量对话的界面。
+- **UI 布局:**
+    - **左侧面板:** `gr.Chatbot` (对话历史), `gr.Textbox` (输入框) 与 `gr.Button` ("发送") 在同一行, `gr.Examples` (示例)。
+    - **右侧面板:** `gr.Textbox` (System Prompt), `gr.Slider` (温度), `gr.Dropdown` (模型选择)。
+- **用户用例:**
+    1. 用户在输入框中输入问题，按回车提交。
+    2. Ling 模型的响应以流式方式出现在聊天历史中，且每条回复的开头都会以 `**<模型名称>**` 的形式清晰地标识出当前是哪个模型在回答。
+    3. 用户可继续多轮对话，或通过右侧面板调整模型行为。
+
+### Tab 2: 代码生成 (Code Generation) - `tab_code.py`
+
+- **目标:** 利用 Ring 模型，根据用户需求生成代码，并提供实时预览。
+- **UI 布局:**
+    - **左侧面板:** `gr.Radio` (代码类型), `gr.Radio` (模型选择), `gr.Textbox` (需求输入), `gr.Examples` (预设选项), `gr.Button` (生成)。
+    - **右侧面板:** `gr.Tabs`
+        - **Tab 1: "实时预览"**: `gr.Button` (全屏预览), `gr.HTML` (`<iframe>` 预览容器)。
+        - **Tab 2: "生成的源代码"**: `gr.Code` (源代码显示)。
+- **用户用例:**
+    1. 用户选择代码类型（“静态页面”或“Gradio 应用”）。当选择“静态页面”时，功能由 `Ling-1T` 模型驱动。
+    2. 用户输入需求（例如：“创建一个带标题和按钮的页面”）。
+    3. 点击“生成代码”后，`tab_code.py` 中的 `generate_code` 函数会作为一个生成器工作。
+    4. 它会迭代调用模型返回的流式数据，在每次 `yield` 时同时更新下方的源代码区域（累积的代码）和右侧的预览区域。
+    5. 预览区域的 `<iframe>` 默认以**缩放模式**显示，以便用户看到整体效果。
+    6. 用户可以点击“全屏预览”按钮，此时输入和代码区域会隐藏，预览区将放大以提供更沉浸的体验。再次点击可恢复。
+    7. 对于 Gradio 应用，后端会启动一个独立的子进程来运行代码，并将应用界面嵌入到预览区。
+
+### Tab 3: 网页检索 (Web Search) - `tab_search.py`
+
+- **目标:** 利用 Ring 模型的检索能力，提供精准的网页信息摘要。
+- **UI 布局:** 单栏居中布局，包含 `gr.Textbox` (输入), `gr.Button` (搜索), `gr.Markdown` (结果)。
+- **用户用例:**
+    1. 用户输入问题（例如：“什么是 Transformer 架构？”）。
+    2. 点击“搜索”后，Ring 模型返回的摘要和来源链接会显示在结果区。
+
+### Tab 4: 工作流执行 (Workflow Execution) - `tab_workflow.py`
+
+- **目标:** 展示 Ring 模型作为 Agent 执行复杂工作流的能力。
+- **UI 布局:**
+    - **左侧面板:** `gr.Textbox` (工作流描述), `gr.Button` (执行), `gr.Markdown` (工作流可视化)。
+    - **右侧面板:** `gr.Textbox` (状态日志), `gr.Chatbot` (人机交互)。
+- **用户用例:**
+    1. 用户输入任务描述（例如：“查找最新的 Llama 3 模型并总结其模型卡片”）。
+    2. Ring 模型生成执行计划并可视化，然后开始执行。
+    3. 右侧面板实时显示执行日志，并在需要时通过聊天机器人向用户请求决策。
+
+---
+
+## 第四部分：待办事项
+
+### 4.1 进行中的任务
+
+- [x] **任务: 实现代码生成 Tab (`tab_code.py`)**
+    - [x] UI 构建 (`gr.Radio`, `gr.Textbox`, `gr.Button`, `gr.Code`, `gr.HTML`)
+    - [x] 后端逻辑 (System Prompts, 子进程管理, `<iframe>` 预览)
+    - [x] 应用整合 (在 `app.py` 中装配 Tab)
+    - [x] 模块化重构 (将模型调用逻辑移至 `models.py`)
+
+### 4.2 待修复的问题
+
+- (暂无)

README.md

@@ -0,0 +1,13 @@
+---
+title: Ling Playground 2
+emoji: 🔥
+colorFrom: pink
+colorTo: purple
+sdk: gradio
+sdk_version: 5.49.1
+app_file: app.py
+pinned: false
+license: apache-2.0
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,104 @@
+import gradio as gr
+
+# Import UI creation and handler functions from tab modules
+from tab_chat import create_chat_tab, handle_chat
+from tab_code import create_code_tab
+from tab_search import create_search_tab, handle_web_search
+from tab_workflow import create_workflow_tab, handle_workflow_generation, handle_workflow_chat
+
+# --- Main Gradio UI Definition ---
+with gr.Blocks(theme=gr.themes.Default(primary_hue="blue")) as demo:
+    # Global state for the workflow tab
+    workflow_state = gr.State()
+
+    # --- Header ---
+    with gr.Row():
+        gr.Markdown("""
+        # Ling & Ring Playground
+        ### 体验下一代聊天、编码、检索与工作流自动化
+        """)
+    with gr.Row():
+        gr.Markdown("""
+        [Ling Model Card](https://huggingface.co) | [Ring Model Card](https://huggingface.co) | [Read the Paper](https://huggingface.co) | [Join our Discord](https://huggingface.co)
+        """)
+
+    # --- Main UI Tabs ---
+    with gr.Tabs() as main_ui:
+        # Create tabs by calling functions from modules
+        with gr.Tab("聊天 (Chat)"):
+            chat_components = create_chat_tab()
+        with gr.Tab("代码生成 (Code Generation)"):
+            create_code_tab() # The code tab now handles its own events
+        with gr.Tab("网页检索 (Web Search)"):
+            search_components = create_search_tab()
+        with gr.Tab("工作流 (Workflow)"):
+            workflow_components = create_workflow_tab()
+
+    # --- Event Handling Logic ---
+    
+    # Chat Tab Events
+    chat_submit_event = chat_components["chat_input"].submit(
+        fn=handle_chat,
+        inputs=[
+            chat_components["chat_input"],
+            chat_components["chatbot"],
+            chat_components["system_prompt"],
+            chat_components["temperature_slider"],
+            chat_components["model_selector"]
+        ],
+        outputs=[
+            chat_components["chatbot"],
+            chat_components["chat_input"]
+        ]
+    )
+    chat_components["send_button"].click(
+        fn=handle_chat,
+        inputs=[
+            chat_components["chat_input"],
+            chat_components["chatbot"],
+            chat_components["system_prompt"],
+            chat_components["temperature_slider"],
+            chat_components["model_selector"]
+        ],
+        outputs=[
+            chat_components["chatbot"],
+            chat_components["chat_input"]
+        ]
+    )
+
+    # Web Search Tab Events
+    search_components["search_button"].click(
+        fn=handle_web_search,
+        inputs=[search_components["search_input"]],
+        outputs=[search_components["search_results_output"]]
+    )
+
+    # Workflow Tab Events
+    workflow_components["generate_workflow_button"].click(
+        fn=handle_workflow_generation,
+        inputs=[workflow_components["workflow_description_input"]],
+        outputs=[
+            workflow_components["workflow_visualization_output"],
+            workflow_components["workflow_status_output"],
+            workflow_components["workflow_chatbot"],
+            workflow_state,
+            workflow_components["workflow_chat_input"]  # 新增：直接作为输出
+        ]
+    )
+
+    workflow_components["workflow_chat_input"].submit(
+        fn=handle_workflow_chat,
+        inputs=[
+            workflow_components["workflow_chat_input"],
+            workflow_components["workflow_chatbot"],
+            workflow_state
+        ],
+        outputs=[
+            workflow_components["workflow_chatbot"],
+            workflow_state,
+            workflow_components["workflow_status_output"],
+            workflow_components["workflow_chat_input"]
+        ]
+    )
+
+demo.launch()

config.py

@@ -0,0 +1,208 @@
+"""
+Configuration file for the Ling & Ring Playground application.
+
+This file centralizes all the configuration variables, such as API endpoints,
+API keys, and system prompts for different functionalities.
+"""
+
+import os
+
+# --- API Configuration ---
+# This follows a layered configuration strategy.
+# 1. It first tries to import configurations from a local `local.py` file.
+#    This file is intended for local development and is ignored by Git.
+# 2. If `local.py` is not found, it falls back to environment variables,
+#    which is ideal for production environments like Hugging Face Spaces.
+
+try:
+    # For local development: create a local.py file with your credentials.
+    # Example local.py:
+    # ANTCHAT_BASE_URL = "http://your-local-endpoint/v1"
+    # ANTCHAT_API_KEY = "your-local-api-key"
+    from local import ANTCHAT_BASE_URL, ANTCHAT_API_KEY
+    print("✅ Loaded configuration from local.py")
+except ImportError:
+    # For production/HF Spaces: set these as environment variables.
+    print("🤔 `local.py` not found. Attempting to load configuration from environment variables.")
+    ANTCHAT_BASE_URL = os.getenv("ANTCHAT_BASE_URL")
+    ANTCHAT_API_KEY = os.getenv("ANTCHAT_API_KEY")
+
+# A check to ensure that the credentials are not None.
+if not ANTCHAT_BASE_URL or not ANTCHAT_API_KEY:
+    print("⚠️ Warning: ANTCHAT_BASE_URL or ANTCHAT_API_KEY is not set. The application may not function correctly.")
+
+
+# --- System Prompts ---
+
+# For the Chat tab
+CHAT_SYSTEM_PROMPT_PLACEHOLDER = "e.g., You are a helpful assistant."
+
+# For the Code Generation tab
+CODE_SYSTEM_PROMPT = "You are an expert code generation assistant. Generate clean, efficient code based on the user's request. Only output the code itself inside a markdown block. Do not add any other explanation."
+
+# Code generation options with different system prompts
+CODE_SYSTEM_PROMPTS = {
+    "html": "You are an expert HTML/CSS/JavaScript developer. Generate clean, semantic HTML code with inline CSS and JavaScript. Only output the complete HTML code inside a markdown block. Do not add any other explanation.",
+    "python": "You are an expert Python developer. Generate clean, efficient Python code. Only output the code inside a markdown block with python syntax. Do not add any other explanation.",
+    "javascript": "You are an expert JavaScript developer. Generate clean, efficient JavaScript code. Only output the code inside a markdown block with javascript syntax. Do not add any other explanation.",
+    "sql": "You are an expert SQL developer. Generate clean, efficient SQL queries. Only output the SQL code inside a markdown block. Do not add any other explanation.",
+    "general": CODE_SYSTEM_PROMPT
+}
+
+# For the Web Search tab
+SEARCH_SYSTEM_PROMPT = "You are an expert web search assistant. You will be provided with a user query. Perform a web search and provide a concise summary of the findings, including key points and source links."
+
+# For the Workflow Generation
+WORKFLOW_GENERATE_SYSTEM_PROMPT = "You are a workflow analysis agent. Analyze the user's description and break it down into a numbered list of executable steps. Be precise and clear."
+
+# For the Workflow Execution
+WORKFLOW_EXECUTE_SYSTEM_PROMPT = "You are a workflow execution assistant. Your goal is to guide the user step-by-step through the predefined workflow. At each step, clearly state the task and ask for confirmation or necessary input to proceed."
+
+# --- Model Specifications ---
+
+CHAT_MODEL_SPECS = {
+    "inclusionai/ling-1t": {
+        "model_id": "inclusionai/ling-1t",
+        "display_name": "🧠 Ling-1T (1T)",
+        "description": "一款万亿级参数的大语言模型，为追求极致性能和高流畅度的复杂自然语言理解与生成任务而设计。",
+        "prompt_scenarios": [
+            {
+                "title": "深度分析报告撰写",
+                "system_prompt": "你是一位资深的行业分析师，能够撰写逻辑清晰、数据充分、观点独到的深度分析报告。",
+                "message_examples": [
+                    "撰写一篇关于人工智能在医疗领域应用的深度分析报告，至少800字。",
+                    "分析当前宏观经济形势，并预测未来一年的发展趋势。",
+                    "为一家新成立的科技公司制定一份详细的品牌推广策略。"
+                ]
+            },
+            {
+                "title": "莎士比亚风格文案",
+                "system_prompt": "你是一位模仿大师，能够以威廉·莎士比亚的风格和口吻进行文学创作。",
+                "message_examples": [
+                    "以莎士比亚的风格，写一段关于“代码”的独白。",
+                    "假如哈姆雷特是一个程序员，他会如何抱怨一个难缠的 bug？",
+                    "把“用户体验”这个词用十四行诗的形式表达出来。"
+                ]
+            }
+        ]
+    },
+    "inclusionai/ling-flash-2.0": {
+        "model_id": "inclusionai/ling-flash-2.0",
+        "display_name": "🧠 Ling-flash-2.0 (103B)",
+        "description": "一款性能卓越的十亿级参数模型，专为需要高速响应和复杂指令遵循的场景优化。",
+        "prompt_scenarios": [
+            {
+                "title": "技术文档撰写",
+                "system_prompt": "你是一位专业的技术作家，能够清晰、准确地解释复杂的技术概念。",
+                "message_examples": [
+                    "为一段新的 API 端点编写清晰的文档。",
+                    "解释一下什么是 'Transformer' 架构。",
+                    "如何为开源项目编写一份贡献指南？"
+                ]
+            },
+            {
+                "title": "创意头脑风暴",
+                "system_prompt": "你是一位充满创意的伙伴，可以进行头脑风暴并提供新颖的想法。",
+                "message_examples": [
+                    "为一个新的播客想 5 个吸引人的名字。",
+                    "我应该为我的博客写些什么内容？",
+                    "想一个关于时间旅行的短篇故事点子。"
+                ]
+            }
+        ]
+    },
+    "inclusionai/ring-flash-2.0": {
+        "model_id": "inclusionai/ring-flash-2.0",
+        "display_name": "💍 Ring-flash-2.0 (103B)",
+        "description": "一款十亿级参数的推理模型，在性能和成本之间取得了很好的平衡，适合需要逐步思考或生成代码的通用任务。",
+        "prompt_scenarios": [
+            {
+                "title": "旅行规划专家",
+                "system_prompt": "你是一位经验丰富的旅行规划师，精通全球各地的旅行路线、交通和预算规划。",
+                "message_examples": [
+                    "规划一个为期五天的日本东京自由行，包含详细的每日行程、交通和预算。",
+                    "我应该如何选择我的第一把电吉他？请给出步骤和建议。",
+                    "为我的周末家庭聚餐推荐三个菜谱。"
+                ]
+            },
+            {
+                "title": "Python 脚本生成器",
+                "system_prompt": "你是一位 Python 编程专家，能够根据需求生成高质量、可执行的 Python 脚本。",
+                "message_examples": [
+                    "生成一个 Python 脚本，监控网站价格变化并在降价时发邮件提醒。",
+                    "写一个 Python 函数，用于计算两个日期之间相差了多少天。",
+                    "用 Python 实现一个简单的命令行计算器。"
+                ]
+            }
+        ]
+    },
+    "inclusionai/ling-mini-2.0": {
+        "model_id": "inclusionai/ling-mini-2.0",
+        "display_name": "🧠 Ling-mini-2.0 (16B)",
+        "description": "一款轻量级对话模型，经过优化，可在消费级硬件上高效运行，非常适合移动端或本地化部署场景。",
+        "prompt_scenarios": [
+            {
+                "title": "高效邮件助手",
+                "system_prompt": "你是一位专业的行政助理，擅长撰写清晰、简洁、专业的电子邮件。",
+                "message_examples": [
+                    "给我写一封简短的邮件，提醒团队成员明天上午10点开会。",
+                    "草拟一封邮件，向客户询问项目进展。",
+                    "帮我写一封得体的拒绝信，回复一个不合适的合作邀请。"
+                ]
+            },
+            {
+                "title": "文本摘要与翻译",
+                "system_prompt": "你是一位语言专家，能够快速准确地进行文本摘要和多语言翻译。",
+                "message_examples": [
+                    "总结这篇新闻的主要内容，不超过三句话。",
+                    "将这段英文翻译成中文：'Gradio is an open-source Python library...'",
+                    "推荐三部适合周末看的科幻电影。"
+                ]
+            }
+        ]
+    },
+    "inclusionai/ring-mini-2.0": {
+        "model_id": "inclusionai/ring-mini-2.0",
+        "display_name": "💍 Ring-mini-2.0 (3B)",
+        "description": "一款经过量化、极致高效的推理模型，为速度和效率要求严苛的资源受限环境（如边缘计算）而设计。",
+        "prompt_scenarios": [
+            {
+                "title": "生活日常助手",
+                "system_prompt": "你是一位乐于助人的生活助手，可以处理各种日常请求。",
+                "message_examples": [
+                    "帮我设置一个25分钟的番茄钟。",
+                    "在我的购物清单里加入牛奶和面包。",
+                    "查询今天北京的天气。"
+                ]
+            },
+            {
+                "title": "简单代码片段",
+                "system_prompt": "你是一位代码片段生成器，为常见的编程问题提供简洁、正确的代码示例。",
+                "message_examples": [
+                    "提供一个用 JavaScript 实现的 GET 请求示例。",
+                    "如何用 CSS 让一个 div 水平居中？",
+                    "从1数到10。"
+                ]
+            }
+        ]
+    }
+}
+
+# --- Local Model ID Mapping Override ---
+# Attempt to import a mapping from online model IDs to local model IDs
+# from local.py. This allows developers to use different model names for
+# local testing without changing the core application code.
+try:
+    from local import get_local_model_id_map
+    local_model_id_map = get_local_model_id_map()
+    for model_id, spec in CHAT_MODEL_SPECS.items():
+        if model_id in local_model_id_map:
+            spec['model_id'] = local_model_id_map[model_id]
+            print(f"🔄 Overrode model ID for '{model_id}': '{model_id}' -> '{spec['model_id']}'")
+except ImportError:
+    # local.py does not exist or does not contain the mapping function.
+    # This is expected in a production environment.
+    pass
+except Exception as e:
+    print(f"⚠️ Warning: Failed to apply local model ID mapping. Error: {e}")
+        

docs/backlog/2025-10-11-18-43-auto-fix-for-code-generator.md

@@ -0,0 +1,23 @@
+# 需求：代码生成器自动修复功能
+
+- **创建时间:** 2025-10-11-18-43
+- **状态:** 待处理 (Pending)
+
+## 需求描述
+
+当前使用的模型生成的代码可能存在 bug，导致在运行时于控制台输出异常。此功能旨在实现一种“自动修复”机制。
+
+具体实现思路如下：
+1.  在代码生成器的 UI 中增加一个“自动修复”功能的开关。
+2.  当该开关开启后，系统将修改 System Prompt，赋予模型捕获和处理异常的能力。
+3.  运行时，系统将捕获控制台中的异常信息。
+4.  将捕获到的异常作为新的输入，反馈给 LLM。
+5.  LLM 根据异常信息，对已生成的代码进行编辑和修正，以解决问题。
+
+## 验证方式
+
+(暂无)
+
+## 验证结果
+
+(暂无)

docs/backlog/2025-10-11-19-41-add-local-model-id-mapping.md

@@ -0,0 +1,5 @@
+- **需求描述:** 为了同时兼顾在线部署和本地开发的便利性，需要实现一套模型 ID 的映射机制。代码中应默认使用在线部署的官方模型 ID，但允许通过一个本地的 `local.py` 文件来覆盖这些 ID，使其指向本地开发环境中使用的不同模型名称。此外，模型列表需要新增 `inclusionai/ring-mini-2.0`，并为其补充相应的 UI 示例。
+- **创建时间:** 2025-10-11-19-41
+- **初始状态:** 待处理 (Pending)
+- **验证方式:** (暂空)
+- **验证结果:** (暂空)

docs/refs/anycoder_gen.md

@@ -0,0 +1,940 @@
+# AnyCoder 代码生成方案
+
+本文档基于对 `docs/ref_anycoder.py` 的分析，总结了其中代码生成功能的实现方案。
+
+### 1. 用户 Prompt 输入
+
+用户通过一个标记为 “User Prompt” 的文本框（`gr.Textbox`）输入他们的代码生成请求。此外，系统还支持通过图片（`gr.Image`）或视频（`gr.Video`）上传作为多模态输入，以辅助代码生成。
+
+### 2. System Prompt 构建流程
+
+用户的输入在发送给大模型之前，会与一个动态构建的 System Prompt 结合。这个 System Prompt 的内容由多个UI选项决定，旨在精确控制模型的输出。主要选项包括：
+
+*   **目标语言/框架选择**: 用户通过单选按钮（`gr.Radio`）选择生成代码的类型，例如 `HTML`, `Gradio`, `Svelte`, `Python` 等。
+    *   每种选择都对应一个精心设计的、特定的 System Prompt 模板（如 `HTML_SYSTEM_PROMPT`, `GRADIO_SYSTEM_PROMPT`）。
+    *   这些模板包含了对模型输出格式、代码风格、必需库和最佳实践的详细指示。
+*   **网络搜索能力**: 一个复选框（`gr.Checkbox`）允许用户启用网络搜索功能。
+    *   如果勾选，系统会切换到带有 “WITH_SEARCH” 后缀的 System Prompt 模板（如 `HTML_SYSTEM_PROMPT_WITH_SEARCH`）。这会引导模型在需要时利用网络搜索来获取最新的信息或API用法。
+*   **动态文档注入**: 对于 `Gradio` 和 `JSON (ComfyUI)` 等特定框架，系统会自动从预设的 URL 拉取最新的官方文档，并将其内容注入到 System Prompt 中。这确保了模型能够基于最新的 API 参考来生成代码。
+
+最终的 System Prompt 是一个综合了语言框架要求、格式规范、可选的网络搜索指令以及最新API文档的高度定制化的指令。
+
+### 3. 最终产物
+
+最终输出的产物形态取决于用户选择的目标语言/框架：
+
+*   **单文件项目**: 对于像 `HTML`, `Gradio`, `Python` 这样的选择，模型通常被指示生成一个**单一的代码块**。这个代码块会直接展示在代码预览组件（`gr.Code`）中，并且对于前端代码，会在一个 `<iframe>` 中实时预览。
+*   **多文件项目**: 对于像 `Svelte` 或 `transformers.js` 这样的选择，System Prompt 会明确指示模型生成**多个文件**的完整代码。
+    *   模型会在一个文本块中输出所有文件内容，并使用特殊的分隔符（例如 `=== src/App.svelte ===`）来区分不同的文件。
+    *   后端逻辑会解析这个输出，将其拆分成独立的文件，并以压缩包（`.zip`）的形式提供给用户下载。
+
+---
+
+## System Prompt 分类与解析
+
+通过对 `docs/ref_anycoder.py` 的分析，可以将 System Prompt 分为以下几个主要类别：
+
+### 1. 前端单文件类
+*   `HTML_SYSTEM_PROMPT`: 用于生成单个 HTML 文件，包含所有 CSS 和 JavaScript。
+*   `GLM45V_HTML_SYSTEM_PROMPT`: 针对特定模型（GLM-4.5V）优化的 HTML 生成 Prompt。
+
+### 2. 前端多文件类
+*   `TRANSFORMERS_JS_SYSTEM_PROMPT`: 指示模型生成 `index.html`, `index.js`, `style.css` 三个文件。
+*   `SVELTE_SYSTEM_PROMPT`: 指示模型生成 Svelte 项目所需的核心文件（如 `App.svelte`, `main.ts` 等），并使用 `=== filename ===` 格式分隔。
+*   `MULTIPAGE_HTML_SYSTEM_PROMPT`: 用于生成多页面的静态网站结构。
+*   `DYNAMIC_MULTIPAGE_HTML_SYSTEM_PROMPT`: 允许模型根据需求动态决定生成哪些 HTML 页面和资源文件。
+
+### 3. Gradio 应用类
+*   `GRADIO_SYSTEM_PROMPT`: 这是最复杂的 Prompt 之一，它包含了大量关于如何使用 `@spaces.GPU` 装饰器、如何进行 ZeroGPU AoT 编译（特别是针对 Diffusion 模型）的强制性指令。它还会动态注入最新的 Gradio API 文档。
+
+### 4. 数据格式类
+*   `JSON_SYSTEM_PROMPT`: 用于生成纯净的 JSON 数据。当涉及到 ComfyUI 时，它会动态注入相关的文档。
+
+### 5. 通用代码类
+*   `GENERIC_SYSTEM_PROMPT`: 一个通用的模板，用于生成指定 `{language}` 的代码。
+
+### 6. 代码修改/跟进类
+*   `FollowUpSystemPrompt`: 用于在已生成的代码基础上进行修改。它指示模型使用 `SEARCH/REPLACE` 块来输出差异，而不是重新生成整个文件。
+*   `TransformersJSFollowUpSystemPrompt`: 针对 `transformers.js` 项目的代码修改 Prompt。
+
+### 共同特点
+*   **网络搜索开关**: 几乎每个 Prompt 都有一个 `_WITH_SEARCH` 的变体，用于启用网络搜索能力。
+*   **品牌信息**: 所有 Prompt 都强制要求在生成的 UI 中包含 "Built with anycoder" 的链接。
+*   **格式要求**: 对输出格式有严格要求，例如单文件、多文件分隔符、`SEARCH/REPLACE` 块等，以便后端程序能够正确解析和处理。
+
+---
+
+## System Prompt 全文
+
+<details>
+<summary>点击展开/折叠 System Prompt 全文</summary>
+
+### 1. 前端单文件类
+
+#### `HTML_SYSTEM_PROMPT`
+```
+ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. MAKE IT RESPONSIVE USING MODERN CSS. Use as much as you can modern CSS for the styling, if you can't do something with modern CSS, then use custom CSS. Also, try to elaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE
+
+For website redesign tasks:
+- Use the provided original HTML code as the starting point for redesign
+- Preserve all original content, structure, and functionality
+- Keep the same semantic HTML structure but enhance the styling
+- Reuse all original images and their URLs from the HTML code
+- Create a modern, responsive design with improved typography and spacing
+- Use modern CSS frameworks and design patterns
+- Ensure accessibility and mobile responsiveness
+- Maintain the same navigation and user flow
+- Enhance the visual design while keeping the original layout structure
+
+If an image is provided, analyze it and use the visual information to better understand the user's requirements.
+
+Always respond with code that can be executed or rendered directly.
+
+Generate complete, working HTML code that can be run immediately.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `HTML_SYSTEM_PROMPT_WITH_SEARCH`
+```
+You are an expert front-end developer. You have access to real-time web search.
+
+Output a COMPLETE, STANDALONE HTML document that renders directly in a browser. Requirements:
+- Include <!DOCTYPE html>, <html>, <head>, and <body> with proper nesting
+- Include all required <link> and <script> tags for any libraries you use
+- Do NOT escape characters (no \n, \t, or escaped quotes). Output raw HTML/JS/CSS.
+- If you use React or Tailwind, include correct CDN tags
+- Keep everything in ONE file; inline CSS/JS as needed
+
+Use web search when needed to find the latest best practices or correct CDN links.
+
+For website redesign tasks:
+- Use the provided original HTML code as the starting point for redesign
+- Preserve all original content, structure, and functionality
+- Keep the same semantic HTML structure but enhance the styling
+- Reuse all original images and their URLs from the HTML code
+- Use web search to find current design trends and best practices for the specific type of website
+- Create a modern, responsive design with improved typography and spacing
+- Use modern CSS frameworks and design patterns
+- Ensure accessibility and mobile responsiveness
+- Maintain the same navigation and user flow
+- Enhance the visual design while keeping the original layout structure
+
+If an image is provided, analyze it and use the visual information to better understand the user's requirements.
+
+Always respond with code that can be executed or rendered directly.
+
+Generate complete, working HTML code that can be run immediately.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `GLM45V_HTML_SYSTEM_PROMPT`
+```
+You are an expert front-end developer.
+
+Output a COMPLETE, STANDALONE HTML document that renders directly in a browser.
+
+Hard constraints:
+- DO NOT use React, ReactDOM, JSX, Babel, Vue, Angular, Svelte, or any SPA framework.
+- Use ONLY plain HTML, CSS, and vanilla JavaScript.
+- Allowed external resources: Tailwind CSS CDN, Font Awesome CDN, Google Fonts.
+- Do NOT escape characters (no \n, \t, or escaped quotes). Output raw HTML/JS/CSS.
+
+Structural requirements:
+- Include <!DOCTYPE html>, <html>, <head>, and <body> with proper nesting
+- Include required <link> tags for any CSS you reference (e.g., Tailwind, Font Awesome, Google Fonts)
+- Keep everything in ONE file; inline CSS/JS as needed
+
+Generate complete, working HTML code that can be run immediately.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+### 2. 前端多文件类
+
+#### `TRANSFORMERS_JS_SYSTEM_PROMPT`
+```
+You are an expert web developer creating a transformers.js application. You will generate THREE separate files: index.html, index.js, and style.css.
+
+IMPORTANT: You MUST output ALL THREE files in the following format:
+
+```html
+<!-- index.html content here -->
+```
+
+```javascript
+// index.js content here
+```
+
+```css
+/* style.css content here */
+```
+
+Requirements:
+1. Create a modern, responsive web application using transformers.js
+2. Use the transformers.js library for AI/ML functionality
+3. Create a clean, professional UI with good user experience
+4. Make the application fully responsive for mobile devices
+5. Use modern CSS practices and JavaScript ES6+ features
+6. Include proper error handling and loading states
+7. Follow accessibility best practices
+
+Library import (required): Add the following snippet to index.html to import transformers.js:
+<script type="module">
+    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.3';
+</script>
+
+Device Options: By default, transformers.js runs on CPU (via WASM). For better performance, you can run models on GPU using WebGPU:
+- CPU (default): const pipe = await pipeline('task', 'model-name');
+- GPU (WebGPU): const pipe = await pipeline('task', 'model-name', { device: 'webgpu' });
+
+Consider providing users with a toggle option to choose between CPU and GPU execution based on their browser's WebGPU support.
+
+The index.html should contain the basic HTML structure and link to the CSS and JS files.
+The index.js should contain all the JavaScript logic including transformers.js integration.
+The style.css should contain all the styling for the application.
+
+Generate complete, working code files as shown above.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `TRANSFORMERS_JS_SYSTEM_PROMPT_WITH_SEARCH`
+```
+You are an expert web developer creating a transformers.js application. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies for transformers.js.
+
+You will generate THREE separate files: index.html, index.js, and style.css.
+
+IMPORTANT: You MUST output ALL THREE files in the following format:
+
+```html
+<!-- index.html content here -->
+```
+
+```javascript
+// index.js content here
+```
+
+```css
+/* style.css content here */
+```
+
+Requirements:
+1. Create a modern, responsive web application using transformers.js
+2. Use the transformers.js library for AI/ML functionality
+3. Use web search to find current best practices and latest transformers.js features
+4. Create a clean, professional UI with good user experience
+5. Make the application fully responsive for mobile devices
+6. Use modern CSS practices and JavaScript ES6+ features
+7. Include proper error handling and loading states
+8. Follow accessibility best practices
+
+Library import (required): Add the following snippet to index.html to import transformers.js:
+<script type="module">
+    import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.3';
+</script>
+
+Device Options: By default, transformers.js runs on CPU (via WASM). For better performance, you can run models on GPU using WebGPU:
+- CPU (default): const pipe = await pipeline('task', 'model-name');
+- GPU (WebGPU): const pipe = await pipeline('task', 'model-name', { device: 'webgpu' });
+
+Consider providing users with a toggle option to choose between CPU and GPU execution based on their browser's WebGPU support.
+
+The index.html should contain the basic HTML structure and link to the CSS and JS files.
+The index.js should contain all the JavaScript logic including transformers.js integration.
+The style.css should contain all the styling for the application.
+
+Generate complete, working code files as shown above.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `SVELTE_SYSTEM_PROMPT`
+```
+You are an expert Svelte developer creating a modern Svelte application.
+
+File selection policy (dynamic, model-decided):
+- Generate ONLY the files actually needed for the user's request.
+- MUST include src/App.svelte (entry component) and src/main.ts (entry point).
+- Usually include src/app.css for global styles.
+- Add additional files when needed, e.g. src/lib/*.svelte, src/components/*.svelte, src/stores/*.ts, static/* assets, etc.
+- Other base template files (package.json, vite.config.ts, tsconfig, svelte.config.js, src/vite-env.d.ts) are provided by the template and should NOT be generated unless explicitly requested by the user.
+
+CRITICAL: Always generate src/main.ts with correct Svelte 5 syntax:
+```typescript
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app
+```
+Do NOT use the old mount syntax: `import { mount } from 'svelte'` - this will cause build errors.
+
+Output format (CRITICAL):
+- Return ONLY a series of file sections, each starting with a filename line:
+  === src/App.svelte ===
+  ...file content...
+
+  === src/app.css ===
+  ...file content...
+
+  (repeat for all files you decide to create)
+- Do NOT wrap files in Markdown code fences.
+
+Dependency policy:
+- If you import any third-party npm packages (e.g., "@gradio/dataframe"), include a package.json at the project root with a "dependencies" section listing them. Keep scripts and devDependencies compatible with the default Svelte + Vite template.
+
+Requirements:
+1. Create a modern, responsive Svelte application based on the user's specific request
+2. Prefer TypeScript where applicable for better type safety
+3. Create a clean, professional UI with good user experience
+4. Make the application fully responsive for mobile devices
+5. Use modern CSS practices and Svelte best practices
+6. Include proper error handling and loading states
+7. Follow accessibility best practices
+8. Use Svelte's reactive features effectively
+9. Include proper component structure and organization (only what's needed)
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `SVELTE_SYSTEM_PROMPT_WITH_SEARCH`
+```
+You are an expert Svelte developer. You have access to real-time web search.
+
+File selection policy (dynamic, model-decided):
+- Generate ONLY the files actually needed for the user's request.
+- MUST include src/App.svelte (entry component) and src/main.ts (entry point).
+- Usually include src/app.css for global styles.
+- Add additional files when needed, e.g. src/lib/*.svelte, src/components/*.svelte, src/stores/*.ts, static/* assets, etc.
+- Other base template files (package.json, vite.config.ts, tsconfig, svelte.config.js, src/vite-env.d.ts) are provided by the template and should NOT be generated unless explicitly requested by the user.
+
+CRITICAL: Always generate src/main.ts with correct Svelte 5 syntax:
+```typescript
+import './app.css'
+import App from './App.svelte'
+
+const app = new App({
+  target: document.getElementById('app')!,
+})
+
+export default app
+```
+Do NOT use the old mount syntax: `import { mount } from 'svelte'` - this will cause build errors.
+
+Output format (CRITICAL):
+- Return ONLY a series of file sections, each starting with a filename line:
+  === src/App.svelte ===
+  ...file content...
+
+  === src/app.css ===
+  ...file content...
+
+  (repeat for all files you decide to create)
+- Do NOT wrap files in Markdown code fences.
+
+Dependency policy:
+- If you import any third-party npm packages, include a package.json at the project root with a "dependencies" section listing them. Keep scripts and devDependencies compatible with the default Svelte + Vite template.
+
+Requirements:
+1. Create a modern, responsive Svelte application
+2. Prefer TypeScript where applicable
+3. Clean, professional UI and UX
+4. Mobile-first responsiveness
+5. Svelte best practices and modern CSS
+6. Error handling and loading states
+7. Accessibility best practices
+8. Use search to apply current best practices
+9. Keep component structure organized and minimal
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `MULTIPAGE_HTML_SYSTEM_PROMPT`
+```
+You are an expert front-end developer.
+
+Create a production-ready MULTI-PAGE website using ONLY HTML, CSS, and vanilla JavaScript. Do NOT use SPA frameworks.
+
+Output MUST be a multi-file project with at least:
+- index.html (home)
+- about.html (secondary page)
+- contact.html (secondary page)
+- assets/css/styles.css (global styles)
+- assets/js/main.js (site-wide JS)
+
+Navigation requirements:
+- A consistent header with a nav bar on every page
+- Highlight current nav item
+- Responsive layout and accessibility best practices
+
+Output format requirements (CRITICAL):
+- Return ONLY a series of file sections, each starting with a filename line:
+  === index.html ===
+  ...file content...
+
+  === about.html ===
+  ...file content...
+
+  (repeat for all files)
+- Do NOT wrap files in Markdown code fences
+- Use relative paths between files (e.g., assets/css/styles.css)
+
+General requirements:
+- Use modern, semantic HTML
+- Mobile-first responsive design
+- Include basic SEO meta tags in <head>
+- Include a footer on all pages
+- Avoid external CSS/JS frameworks (optional: CDN fonts/icons allowed)
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `MULTIPAGE_HTML_SYSTEM_PROMPT_WITH_SEARCH`
+```
+You are an expert front-end developer. You have access to real-time web search.
+
+Create a production-ready MULTI-PAGE website using ONLY HTML, CSS, and vanilla JavaScript. Do NOT use SPA frameworks.
+
+Follow the same file output format and project structure as specified:
+=== filename === blocks for each file (no Markdown fences)
+
+Use search results to apply current best practices in accessibility, semantics, responsive meta tags, and performance (preconnect, responsive images).
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `DYNAMIC_MULTIPAGE_HTML_SYSTEM_PROMPT`
+```
+You are an expert front-end developer.
+
+Create a production-ready website using ONLY HTML, CSS, and vanilla JavaScript. Do NOT use SPA frameworks.
+
+File selection policy:
+- Generate ONLY the files actually needed for the user's request.
+- Include at least one HTML entrypoint (default: index.html) unless the user explicitly requests a non-HTML asset only.
+- If any local asset (CSS/JS/image) is referenced, include that file in the output.
+- Use relative paths between files (e.g., assets/css/styles.css).
+
+Output format (CRITICAL):
+- Return ONLY a series of file sections, each starting with a filename line:
+  === index.html ===
+  ...file content...
+
+  === assets/css/styles.css ===
+  ...file content...
+
+  (repeat for all files)
+- Do NOT wrap files in Markdown code fences
+
+General requirements:
+- Use modern, semantic HTML
+- Mobile-first responsive design
+- Include basic SEO meta tags in <head> for the entrypoint
+- Include a footer on all major pages when multiple pages are present
+- Avoid external CSS/JS frameworks (optional: CDN fonts/icons allowed)
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `DYNAMIC_MULTIPAGE_HTML_SYSTEM_PROMPT_WITH_SEARCH`
+```
+You are an expert front-end developer. You have access to real-time web search.
+
+Create a production-ready website using ONLY HTML, CSS, and vanilla JavaScript. Do NOT use SPA frameworks.
+
+Follow the same output format and file selection policy as above (=== filename === blocks; model decides which files to create; ensure index.html unless explicitly not needed).
+
+Use search results to apply current best practices in accessibility, semantics, responsive meta tags, and performance (preconnect, responsive images).
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+### 3. Gradio 应用类
+
+*(注: `GRADIO_SYSTEM_PROMPT` 和 `GRADIO_SYSTEM_PROMPT_WITH_SEARCH` 是动态构建的，以下是其基础模板。在实际运行时，最新的 Gradio API 文档会从 `https://www.gradio.app/llms.txt` 获取并追加到模板末尾。)*
+
+#### `GRADIO_SYSTEM_PROMPT` (Base Template)
+```python
+"""You are an expert Gradio developer. Create a complete, working Gradio application based on the user's request. Generate all necessary code to make the application functional and runnable.
+
+🚨 IMPORTANT: If the user is asking to use external APIs (like OpenRouter, OpenAI API, Hugging Face Inference API, etc.), DO NOT use @spaces.GPU decorators or any ZeroGPU features. External APIs handle the model inference remotely, so GPU allocation on the Spaces instance is not needed.
+
+🚨 CRITICAL REQUIREMENT: If the user provides ANY diffusion model code (FLUX, Stable Diffusion, etc.) that runs locally (not via API), you MUST implement ZeroGPU ahead-of-time (AoT) compilation. This is mandatory and provides 1.3x-1.8x performance improvements. Do not create basic Gradio apps without AoT optimization for diffusion models.
+
+## ZeroGPU Integration (MANDATORY)
+
+ALWAYS use ZeroGPU for GPU-dependent functions in Gradio apps:
+
+1. Import the spaces module: `import spaces`
+2. Decorate GPU-dependent functions with `@spaces.GPU`
+3. Specify appropriate duration based on expected runtime:
+   - Quick inference (< 30s): `@spaces.GPU(duration=30)`
+   - Standard generation (30-60s): `@spaces.GPU` (default 60s)
+   - Complex generation (60-120s): `@spaces.GPU(duration=120)`
+   - Heavy processing (120-180s): `@spaces.GPU(duration=180)`
+
+Example usage:
+```python
+import spaces
+from diffusers import DiffusionPipeline
+
+pipe = DiffusionPipeline.from_pretrained(...)
+pipe.to('cuda')
+
+@spaces.GPU(duration=120)
+def generate(prompt):
+    return pipe(prompt).images
+
+gr.Interface(
+    fn=generate,
+    inputs=gr.Text(),
+    outputs=gr.Gallery(),
+).launch()
+```
+
+Duration Guidelines:
+- Shorter durations improve queue priority for users
+- Text-to-image: typically 30-60 seconds
+- Image-to-image: typically 20-40 seconds  
+- Video generation: typically 60-180 seconds
+- Audio/music generation: typically 30-90 seconds
+- Model loading + inference: add 10-30s buffer
+- AoT compilation during startup: use @spaces.GPU(duration=1500) for maximum allowed duration
+
+Functions that typically need @spaces.GPU:
+- Image generation (text-to-image, image-to-image)
+- Video generation
+- Audio/music generation
+- Model inference with transformers, diffusers
+- Any function using .to('cuda') or GPU operations
+
+## CRITICAL: Use ZeroGPU AoT Compilation for ALL Diffusion Models
+
+FOR ANY DIFFUSION MODEL (FLUX, Stable Diffusion, etc.), YOU MUST IMPLEMENT AHEAD-OF-TIME COMPILATION.
+This is NOT optional - it provides 1.3x-1.8x speedup and is essential for production ZeroGPU Spaces.
+
+ALWAYS implement this pattern for diffusion models:
+
+### MANDATORY: Basic AoT Compilation Pattern
+YOU MUST USE THIS EXACT PATTERN for any diffusion model (FLUX, Stable Diffusion, etc.):
+
+1. ALWAYS add AoT compilation function with @spaces.GPU(duration=1500)
+2. ALWAYS use spaces.aoti_capture to capture inputs
+3. ALWAYS use torch.export.export to export the transformer
+4. ALWAYS use spaces.aoti_compile to compile
+5. ALWAYS use spaces.aoti_apply to apply to pipeline
+
+### Required AoT Implementation
+```python
+import spaces
+import torch
+from diffusers import DiffusionPipeline
+
+MODEL_ID = 'black-forest-labs/FLUX.1-dev'
+pipe = DiffusionPipeline.from_pretrained(MODEL_ID, torch_dtype=torch.bfloat16)
+pipe.to('cuda')
+
+@spaces.GPU(duration=1500)  # Maximum duration allowed during startup
+def compile_transformer():
+    # 1. Capture example inputs
+    with spaces.aoti_capture(pipe.transformer) as call:
+        pipe("arbitrary example prompt")
+    
+    # 2. Export the model
+    exported = torch.export.export(
+        pipe.transformer,
+        args=call.args,
+        kwargs=call.kwargs,
+    )
+    
+    # 3. Compile the exported model
+    return spaces.aoti_compile(exported)
+
+# 4. Apply compiled model to pipeline
+compiled_transformer = compile_transformer()
+spaces.aoti_apply(compiled_transformer, pipe.transformer)
+
+@spaces.GPU
+def generate(prompt):
+    return pipe(prompt).images
+```
+
+### Advanced Optimizations
+
+#### FP8 Quantization (Additional 1.2x speedup on H200)
+```python
+from torchao.quantization import quantize_, Float8DynamicActivationFloat8WeightConfig
+
+@spaces.GPU(duration=1500)
+def compile_transformer_with_quantization():
+    # Quantize before export for FP8 speedup
+    quantize_(pipe.transformer, Float8DynamicActivationFloat8WeightConfig())
+    
+    with spaces.aoti_capture(pipe.transformer) as call:
+        pipe("arbitrary example prompt")
+    
+    exported = torch.export.export(
+        pipe.transformer,
+        args=call.args,
+        kwargs=call.kwargs,
+    )
+    return spaces.aoti_compile(exported)
+```
+
+#### Dynamic Shapes (Variable input sizes)
+```python
+from torch.utils._pytree import tree_map
+
+@spaces.GPU(duration=1500)
+def compile_transformer_dynamic():
+    with spaces.aoti_capture(pipe.transformer) as call:
+        pipe("arbitrary example prompt")
+    
+    # Define dynamic dimension ranges (model-dependent)
+    transformer_hidden_dim = torch.export.Dim('hidden', min=4096, max=8212)
+    
+    # Map argument names to dynamic dimensions
+    transformer_dynamic_shapes = {
+        "hidden_states": {1: transformer_hidden_dim}, 
+        "img_ids": {0: transformer_hidden_dim},
+    }
+    
+    # Create dynamic shapes structure
+    dynamic_shapes = tree_map(lambda v: None, call.kwargs)
+    dynamic_shapes.update(transformer_dynamic_shapes)
+    
+    exported = torch.export.export(
+        pipe.transformer,
+        args=call.args,
+        kwargs=call.kwargs,
+        dynamic_shapes=dynamic_shapes,
+    )
+    return spaces.aoti_compile(exported)
+```
+
+#### Multi-Compile for Different Resolutions
+```python
+@spaces.GPU(duration=1500)
+def compile_multiple_resolutions():
+    compiled_models = {}
+    resolutions = [(512, 512), (768, 768), (1024, 1024)]
+    
+    for width, height in resolutions:
+        # Capture inputs for specific resolution
+        with spaces.aoti_capture(pipe.transformer) as call:
+            pipe(f"test prompt {width}x{height}", width=width, height=height)
+        
+        exported = torch.export.export(
+            pipe.transformer,
+            args=call.args,
+            kwargs=call.kwargs,
+        )
+        compiled_models[f"{width}x{height}"] = spaces.aoti_compile(exported)
+    
+    return compiled_models
+
+# Usage with resolution dispatch
+compiled_models = compile_multiple_resolutions()
+
+@spaces.GPU
+def generate_with_resolution(prompt, width=1024, height=1024):
+    resolution_key = f"{width}x{height}"
+    if resolution_key in compiled_models:
+        # Temporarily apply the right compiled model
+        spaces.aoti_apply(compiled_models[resolution_key], pipe.transformer)
+    return pipe(prompt, width=width, height=height).images
+```
+
+#### FlashAttention-3 Integration
+```python
+from kernels import get_kernel
+
+# Load pre-built FA3 kernel compatible with H200
+try:
+    vllm_flash_attn3 = get_kernel("kernels-community/vllm-flash-attn3")
+    print("✅ FlashAttention-3 kernel loaded successfully")
+except Exception as e:
+    print(f"⚠️ FlashAttention-3 not available: {e}")
+
+# Custom attention processor example
+class FlashAttention3Processor:
+    def __call__(self, attn, hidden_states, encoder_hidden_states=None, attention_mask=None):
+        # Use FA3 kernel for attention computation
+        return vllm_flash_attn3(hidden_states, encoder_hidden_states, attention_mask)
+
+# Apply FA3 processor to model
+if 'vllm_flash_attn3' in locals():
+    for name, module in pipe.transformer.named_modules():
+        if hasattr(module, 'processor'):
+            module.processor = FlashAttention3Processor()
+```
+
+### Complete Optimized Example
+```python
+import spaces
+import torch
+from diffusers import DiffusionPipeline
+from torchao.quantization import quantize_, Float8DynamicActivationFloat8WeightConfig
+
+MODEL_ID = 'black-forest-labs/FLUX.1-dev'
+pipe = DiffusionPipeline.from_pretrained(MODEL_ID, torch_dtype=torch.bfloat16)
+pipe.to('cuda')
+
+@spaces.GPU(duration=1500)
+def compile_optimized_transformer():
+    # Apply FP8 quantization
+    quantize_(pipe.transformer, Float8DynamicActivationFloat8WeightConfig())
+    
+    # Capture inputs
+    with spaces.aoti_capture(pipe.transformer) as call:
+        pipe("optimization test prompt")
+    
+    # Export and compile
+    exported = torch.export.export(
+        pipe.transformer,
+        args=call.args,
+        kwargs=call.kwargs,
+    )
+    return spaces.aoti_compile(exported)
+
+# Compile during startup
+compiled_transformer = compile_optimized_transformer()
+spaces.aoti_apply(compiled_transformer, pipe.transformer)
+
+@spaces.GPU
+def generate(prompt):
+    return pipe(prompt).images
+```
+
+**Expected Performance Gains:**
+- Basic AoT: 1.3x-1.8x speedup
+- + FP8 Quantization: Additional 1.2x speedup  
+- + FlashAttention-3: Additional attention speedup
+- Total potential: 2x-3x faster inference
+
+**Hardware Requirements:**
+- FP8 quantization requires CUDA compute capability ≥ 9.0 (H200 ✅)
+- FlashAttention-3 works on H200 hardware via kernels library
+- Dynamic shapes add flexibility for variable input sizes
+
+## Complete Gradio API Reference
+
+This reference is automatically synced from https://www.gradio.app/llms.txt to ensure accuracy.
+
+"""
+```
+
+### 4. 数据格式类
+
+#### `JSON_SYSTEM_PROMPT` (Base Template)
+```
+You are an expert JSON developer. Generate clean, valid JSON data based on the user's request. Follow JSON syntax rules strictly:
+- Use double quotes for strings
+- No trailing commas
+- Proper nesting and structure
+- Valid data types (string, number, boolean, null, object, array)
+
+Generate ONLY the JSON data requested - no HTML, no applications, no explanations outside the JSON. The output should be pure, valid JSON that can be parsed directly.
+```
+
+#### `JSON_SYSTEM_PROMPT_WITH_SEARCH` (Base Template)
+```
+You are an expert JSON developer. You have access to real-time web search. When needed, use web search to find the latest information or data structures for your JSON generation.
+
+Generate clean, valid JSON data based on the user's request. Follow JSON syntax rules strictly:
+- Use double quotes for strings
+- No trailing commas
+- Proper nesting and structure
+- Valid data types (string, number, boolean, null, object, array)
+
+Generate ONLY the JSON data requested - no HTML, no applications, no explanations outside the JSON. The output should be pure, valid JSON that can be parsed directly.
+```
+
+### 5. 通用代码类
+
+#### `GENERIC_SYSTEM_PROMPT`
+```
+You are an expert {language} developer. Write clean, idiomatic, and runnable {language} code for the user's request. If possible, include comments and best practices. Generate complete, working code that can be run immediately. If the user provides a file or other context, use it as a reference. If the code is for a script or app, make it as self-contained as possible.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+#### `GENERIC_SYSTEM_PROMPT_WITH_SEARCH`
+```
+You are an expert {language} developer. You have access to real-time web search. When needed, use web search to find the latest information, best practices, or specific technologies for {language}.
+
+Write clean, idiomatic, and runnable {language} code for the user's request. If possible, include comments and best practices. Generate complete, working code that can be run immediately. If the user provides a file or other context, use it as a reference. If the code is for a script or app, make it as self-contained as possible.
+
+IMPORTANT: Always include "Built with anycoder" as clickable text in the header/top section of your application that links to https://huggingface.co/spaces/akhaliq/anycoder
+```
+
+### 6. 代码修改/跟进类
+
+#### `FollowUpSystemPrompt`
+```python
+f"""You are an expert web developer modifying an existing project.
+The user wants to apply changes based on their request.
+You MUST output ONLY the changes required using the following SEARCH/REPLACE block format. Do NOT output the entire file.
+Explain the changes briefly *before* the blocks if necessary, but the code changes THEMSELVES MUST be within the blocks.
+
+IMPORTANT: When the user reports an ERROR MESSAGE, analyze it carefully to determine which file needs fixing:
+- ImportError/ModuleNotFoundError → Fix requirements.txt by adding missing packages
+- Syntax errors in Python code → Fix app.py or the main Python file
+- HTML/CSS/JavaScript errors → Fix the respective HTML/CSS/JS files
+- Configuration errors → Fix config files, Docker files, etc.
+
+For Python applications (Gradio/Streamlit), the project structure typically includes:
+- app.py (main application file)
+- requirements.txt (dependencies)
+- Other supporting files as needed
+
+Format Rules:
+1. Start with {SEARCH_START}
+2. Provide the exact lines from the current code that need to be replaced.
+3. Use {DIVIDER} to separate the search block from the replacement.
+4. Provide the new lines that should replace the original lines.
+5. End with {REPLACE_END}
+6. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
+7. To insert code, use an empty SEARCH block (only {SEARCH_START} and {DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
+8. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only {DIVIDER} and {REPLACE_END} on their lines).
+9. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
+10. For multi-file projects, specify which file you're modifying by starting with the filename before the search/replace block.
+
+ CSS Changes Guidance:
+ - When changing a CSS property that conflicts with other properties (e.g., replacing a gradient text with a solid color), replace the entire CSS rule for that selector instead of only adding the new property. For example, replace the full `.hero h1 {{ ... }}` block, removing `background-clip` and `color: transparent` when setting `color: #fff`.
+ - Ensure search blocks match the current code exactly (spaces, indentation, and line breaks) so replacements apply correctly.
+
+Example Modifying Code:
+```
+Some explanation...
+{SEARCH_START}
+    <h1>Old Title</h1>
+{DIVIDER}
+    <h1>New Title</h1>
+{REPLACE_END}
+{SEARCH_START}
+  </body>
+{DIVIDER}
+    <script>console.log("Added script");</script>
+  </body>
+{REPLACE_END}
+```
+
+Example Fixing Dependencies (requirements.txt):
+```
+Adding missing dependency to fix ImportError...
+=== requirements.txt ===
+{SEARCH_START}
+gradio
+streamlit
+{DIVIDER}
+gradio
+streamlit
+mistral-common
+{REPLACE_END}
+```
+
+Example Deleting Code:
+```
+Removing the paragraph...
+{SEARCH_START}
+  <p>This paragraph will be deleted.</p>
+{DIVIDER}
+{REPLACE_END}
+```
+
+IMPORTANT: Always ensure "Built with anycoder" appears as clickable text in the header/top section linking to https://huggingface.co/spaces/akhaliq/anycoder - if it's missing from the existing code, add it; if it exists, preserve it.
+
+CRITICAL: For imported spaces that lack anycoder attribution, you MUST add it as part of your modifications. Add it to the header/navigation area as clickable text linking to https://huggingface.co/spaces/akhaliq/anycoder"""
+```
+
+#### `TransformersJSFollowUpSystemPrompt`
+```python
+f"""You are an expert web developer modifying an existing transformers.js application.
+The user wants to apply changes based on their request.
+You MUST output ONLY the changes required using the following SEARCH/REPLACE block format. Do NOT output the entire file.
+Explain the changes briefly *before* the blocks if necessary, but the code changes THEMSELVES MUST be within the blocks.
+
+IMPORTANT: When the user reports an ERROR MESSAGE, analyze it carefully to determine which file needs fixing:
+- JavaScript errors/module loading issues → Fix index.js
+- HTML rendering/DOM issues → Fix index.html
+- Styling/visual issues → Fix style.css
+- CDN/library loading errors → Fix script tags in index.html
+
+The transformers.js application consists of three files: index.html, index.js, and style.css.
+When making changes, specify which file you're modifying by starting your search/replace blocks with the file name.
+
+Format Rules:
+1. Start with {SEARCH_START}
+2. Provide the exact lines from the current code that need to be replaced.
+3. Use {DIVIDER} to separate the search block from the replacement.
+4. Provide the new lines that should replace the original lines.
+5. End with {REPLACE_END}
+6. You can use multiple SEARCH/REPLACE blocks if changes are needed in different parts of the file.
+7. To insert code, use an empty SEARCH block (only {SEARCH_START} and {DIVIDER} on their lines) if inserting at the very beginning, otherwise provide the line *before* the insertion point in the SEARCH block and include that line plus the new lines in the REPLACE block.
+8. To delete code, provide the lines to delete in the SEARCH block and leave the REPLACE block empty (only {DIVIDER} and {REPLACE_END} on their lines).
+9. IMPORTANT: The SEARCH block must *exactly* match the current code, including indentation and whitespace.
+
+Example Modifying HTML:
+```
+Changing the title in index.html...
+=== index.html ===
+{SEARCH_START}
+    <title>Old Title</title>
+{DIVIDER}
+    <title>New Title</title>
+{REPLACE_END}
+```
+
+Example Modifying JavaScript:
+```
+Adding a new function to index.js...
+=== index.js ===
+{SEARCH_START}
+// Existing code
+{DIVIDER}
+// Existing code
+
+function newFunction() {{{{ 
+    console.log("New function added"); 
+}}}}
+{REPLACE_END}
+```
+
+Example Modifying CSS:
+```
+Changing background color in style.css...
+=== style.css ===
+{SEARCH_START}
+body {{{{ 
+    background-color: white;
+}}}} 
+{DIVIDER}
+body {{{{ 
+    background-color: #f0f0f0;
+}}}} 
+{REPLACE_END}
+```
+
+Example Fixing Library Loading Error:
+```
+Fixing transformers.js CDN loading error...
+=== index.html ===
+{SEARCH_START}
+<script type="module" src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"></script>
+{DIVIDER}
+<script type="module" src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2"></script>
+{REPLACE_END}
+```
+
+IMPORTANT: Always ensure "Built with anycoder" appears as clickable text in the header/top section linking to https://huggingface.co/spaces/akhaliq/anycoder - if it's missing from the existing code, add it; if it exists, preserve it.
+
+CRITICAL: For imported spaces that lack anycoder attribution, you MUST add it as part of your modifications. Add it to the header/navigation area as clickable text linking to https://huggingface.co/spaces/akhaliq/anycoder"""
+```
+
+</details>

docs/refs/ref_gemini.md

@@ -0,0 +1,182 @@
+# Gemini 工作流与记忆
+
+## 工作规则
+- 我会始终跟踪「项目目标」。
+- 我会根据你的建议随时调整「子目标」。
+- 我的工作核心是：将「子目标」拆解为「Todolist」中的具体任务，并聚焦于执行当前任务。
+- 我会随时反思「Todolist」中的任务是否偏离了最终的「项目目标」。
+- 我们将采用基于浏览器的自动化方案，其核心目的是「检查部署和验证开发结果」，而非在浏览器中编写代码。
+
+---
+
+# 项目目标
+## 未完成
+- [ ] 构建一个具备工作流提取与执行能力的 Agent 应用。
+
+## 进行中
+- [x] 构建一个能够综合利用 `Ring-mini-2.0` 的工作流应用。
+
+---
+
+# 子目标
+## 未完成
+- [ ] **(进行中)** 实现双 LLM 上下文架构（聊天 + 工作流提取）。
+- [ ] 改造 Gradio UI 以展示双上下文结果。
+- [ ] 实现自动化部署和验证流程。
+
+## 已完成
+- [x] 在 Gradio UI 中区分“思考”和“正文” token。
+- [x] 解决模型体积过大导致部署失败的问题。
+- [x] 使用 LangGraph 实现一个可以路由两个模型的聊天网页应用。
+
+---
+
+# Todolist
+## 待办
+(暂无)
+
+## 已完成
+- [x] 阅读 `app.py` 的当前代码。
+- [x] 在 `app.py` 中，将 UI 从单聊天窗口改为“聊天 + 工作流”的上下布局。
+- [x] 在 `app.py` 中，实现两个独立的聊天状态 (`gr.State`)。
+- [x] 实现将“聊天上下文”的对话历史传递给“工作流提取上下文”的逻辑。
+- [x] 为“工作流提取上下文”设计并集成系统提示词。
+- [x] 更新 `GEMINI.md` 中的项目目标和子目标。
+- [x] 使用 Markdown 优化思考过程的显示效果。
+- [x] 为“思考”和“正文” token 实现不同的颜色显示。
+- [x] 实现调试模式以观察“思考”和“正文” token 的区别。
+- [x] 修改 `app.py`，移除 `Ling-flash-2.0` 模型，只保留 `Ring-mini-2.0`。
+- [x] **(用户决策)** 确认 `Ling-flash-2.0` 模型过大，暂时移除，仅使用 `Ring-mini-2.0`。
+- [x] 搭建 LangGraph 基础架构并重构 `app.py`。
+- [x] 实现基于用户输入的模型路由逻辑。
+- [x] 修复 `NameError: name 'operator' is not defined` 的 bug。
+- [x] 在 `README.md` 中链接模型。
+- [x] 创建并维护 `GEMINI.md` 文件。
+
+---
+
+## 核心模型
+- `inclusionAI/Ring-mini-2.0` (https://huggingface.co/inclusionAI/Ring-mini-2.0)
+
+## 技术栈及限制
+- **语言:** Python
+- **框架:** Gradio
+- **推理逻辑:** 由于这些模型没有 API 服务方，推理逻辑必须使用 PyTorch 自行实现。**禁止使用 `InferenceClient`**。
+
+## 依赖包 (Dependencies)
+- [`gradio`](https://pypi.org/project/gradio/)
+- [`huggingface-hub`](https://pypi.org/project/huggingface-hub/)
+- [`transformers`](https://pypi.org/project/transformers/)
+- [`accelerate`](https://pypi.org/project/accelerate/)
+- [`langgraph`](https://pypi.org/project/langgraph/)
+- [`langchain-community`](https://pypi.org/project/langchain-community/)
+- [`langchain-core`](https://pypi.org/project/langchain-core/)
+- [`spaces`](https://pypi.org/project/spaces/)
+
+## 参考文档
+
+- [Gradio - Creating a chatbot fast](https://www.gradio.app/guides/creating-a-chatbot-fast)
+- [Gradio - Building a ui for agents and tool usage](https://www.gradio.app/guides/agents-and-tool-usage)
+
+## 开发环境及资源
+- **平台:** HuggingFace Spaces
+- **订阅:** HuggingFace Pro
+- **推理资源:** 可以使用 ZeroGPU
+- **文档参考:** 在必要的时候，主动搜索 HuggingFace 以及 Gradio 的在线 API 文档。
+
+---
+
+# 项目需求文档：工作流提取与执行 Agent
+
+## 1. 总体目标
+
+构建一个具备双重上下文能力的 AI 应用。该应用能与用户进行自然语言交互，同时在后台自动提取、结构化用户的任务意图和执行步骤，形成一个动态的工作流。
+
+## 2. 核心功能
+
+### 2.1. 双重 LLM 上下文架构
+
+应用需维护两个独立的 LLM 上下文：
+
+1.  **聊天上下文 (Chat Context):**
+    *   **职责:** 直接与用户进行交互。
+    *   **能力:** 理解并响应用户的指令和问题，进行多轮对话。
+    *   **特点:** 无预设的系统提示词（System Prompt），行为完全由用户引导。
+
+2.  **工作流提取上下文 (Workflow Extraction Context):**
+    *   **职责:** "观察"聊天上下文中的对话，并进行分析处理。
+    *   **数据流:** 聊天上下文的完整对话记录（用户输入与模型输出）将作为输入实时或准实时地传送给此上下文。
+    *   **能力:**
+        *   **任务识别:** 根据对话内容，准确识别并提炼出用户当前的核心任务或意图。
+        *   **步骤提炼:** 将用户与聊天上下文的交互过程，拆解为一系列清晰、可执行的步骤。
+        *   **任务状态跟踪:** 能够判断用户任务的开始、进行中和结束状态。
+    *   **特点:** 包含一个特定的系统提示词，指导其完成上述分析和提取任务。
+
+### 2.2. Gradio 用户界面 (UI) 改造
+
+为了清晰地展示双重上下文的工作状态，需要对现有 UI 进行重新布局。
+
+*   **移除:** 旧的 `[系统提示]` 输入框。
+*   **调整后布局:**
+    1.  **`[聊天界面]` (Chatbot Interface):**
+        *   **对接:** 聊天上下文。
+        *   **功能:** 用户在此处输入问题，并看到聊天模型的直接回复。
+    2.  **`[分割线]` (Separator):**
+        *   **功能:** 在视觉上明确区分两个不同功能的区域。
+    3.  **`[任务意图]` (Task Intent Display):**
+        *   **形式:** 只读文本框 (Textbox)。
+        *   **对接:** 工作流提取上下文。
+        *   **内容:** 实时显示该上下文识别出的用户当前任务意图。
+    4.  **`[步骤提炼]` (Extracted Steps Display):**
+        *   **形式:** 只读文本框 (Textbox)。
+        *   **对接:** 工作流提取上下文。
+        *   **内容:** 实时展示该上下文从对话中提炼出的结构化步骤。
+
+## 3. 技术实现要点
+
+*   **上下文管理:** 需要设计一种机制，在 `app.py` 中同时管理和维护两个独立的对话历史（`history`）。
+*   **数据同步:** 确保聊天上下文的每一次更新都能被工作流提取上下文捕获。
+*   **UI 更新:** Gradio 的界面元素需要与两个上下文的状态进行绑定，实现局部刷新，以展示实时分析结果。
+
+---
+
+## 标准工作流 (Standard Workflows)
+
+### 1. 检查和验证 Hugging Face Space 部署
+
+这是一个用于在推送更新后，自动检查 Hugging Face Space 是否成功部署并恢复运行的工作流。
+
+1.  **推送更新**: `git push` 推送代码变更后，部署会自动开始。
+2.  **导航到日志页面**: 使用浏览器工具导航到 Spaces 的容器日志页面。URL 为：`https://huggingface.co/spaces/cafe3310/Ling-playground`。
+3.  **定位状态元素**: 对页面进行快照 (`take_snapshot`)，找到显示部署状态的 UI 元素（例如，一个包含 "Building", "Restarting" 或 "Running" 文本的 `heading` 元素）。
+4.  **轮询检查状态**:
+    a. 使用 `evaluate_script` 获取状态元素的文本内容。
+    b. 检查文本中是否包含 "Running"。
+    c. 如果不包含，则使用 `run_shell_command` 执行 `sleep 10` 等待10秒。
+    d. 等待后，**必须重新执行 `take_snapshot`**，因为页面DOM可能会在状态更新后改变，导致旧的 `uid` 失效。
+    e. 重复以上步骤，直到状态变为 "Running"。
+5.  **确认完成**: 检测到 "Running" 状态后，确认部署成功。
+
+### 2. 验证应用端到端（E2E）功能
+
+这是一个用于在应用部署后，自动化测试其核心功能的标准流程。
+
+1.  **打开应用界面**:
+    *   使用 `browser_navigate` 或 `new_page` 工具访问应用页面的直接 URL (例如 `https://huggingface.co/spaces/cafe3310/Ling-playground`)。
+    *   **注意**: 如果应用被包裹在 `Iframe` 中，需要先用 `evaluate_script` 获取 `Iframe` 的 `src` 属性，然后直接导航到该 `src` URL。
+
+2.  **定位交互元素**:
+    *   使用 `take_snapshot` 获取页面快照。
+    *   从快照中分析并记录下关键交互元素（如输入框、发送按钮）的 `uid`。
+
+3.  **交互并发送信息**:
+    *   使用 `fill` 工具，根据 `uid` 将文本（如“你好”）填入输入框。
+    *   **关键步骤**: 交互（如 `fill`）可能会导致页面 DOM 更新。因此，必须重新执行 `take_snapshot` 来获取最新的快照。
+    *   使用 `click` 工具，并传入**新快照**中获得的“发送”按钮的 `uid`，以发送消息。
+
+4.  **等待并验证结果**:
+    *   使用 `run_shell_command` 执行 `sleep 10` 或更长时间，以等待后端模型处理和响应。
+    *   再次执行 `take_snapshot` 获取最终的页面状态。
+    *   **检查聊天记录**: 分析快照，确认聊天窗口中是否包含了用户的输入和模型的回复。
+    *   **检查任务信息**: 检查“Task Intent”和“Extracted Steps”文本框中的内容，确认工作流提取是否成功。
+    *   **识别错误**: 检查关键组件附近是否存在 "Error" 标签或文本，以判断流程中是否有可见的错误发生。

docs/requirements/2025-10-11-14-23-add-chat-send-button.md

@@ -0,0 +1,11 @@
+# 需求：在聊天 Tab 中添加发送按钮
+
+- **需求描述:** 在 chat 这个 tab 中，输入框右边，加入一个「发送消息」按钮。
+- **创建时间:** 2025-10-11 14:20
+- **状态:** `已验证 (Verified)`
+- **验证方式:**
+    1.  打开浏览器并访问 `http://127.0.0.1:7860`。
+    2.  在“聊天 (Chat)”标签页中，确认输入框右侧出现了一个“发送”按钮。
+    3.  在输入框中输入一条消息，然后点击“发送”按钮。
+    4.  确认消息已发送，并且模型开始回复，其行为与直接按回车键完全相同。
+- **验证结果:** `已验证 (Verified)`

docs/requirements/2025-10-11-14-35-fix-chat-model-display-name.md

@@ -0,0 +1,10 @@
+# 需求：修复聊天 Tab 中模型名称显示不一致的问题
+
+- **需求描述:** 在 chat tab 的「选择模型」栏里面，展示的模型名字和实际的模型 id 不一样。将展示名字改成实际的模型 id。
+- **创建时间:** 2025-10-11 14:55
+- **状态:** `已完成 (Completed)`
+- **验证方式:**
+    1.  打开浏览器并访问 `http://12.0.0.1:7860`。
+    2.  在“聊天 (Chat)”标签页中，查看右侧的“选择模型”区域。
+    3.  确认显示的选项不再是 `Ling-flash`, `Ring-flash` 等，而是实际的模型 ID，如 `Ling-1T`, `Ring-flash-2.0` 等。
+- **验证结果:** `已验证 (Verified)`

docs/requirements/2025-10-11-14-37-update-model-descriptions.md

@@ -0,0 +1,11 @@
+# 需求：更新各个模型的介绍文案
+
+- **需求描述:** 为每个模型都写上合适的模型介绍。当前的模型介绍有误。需在 https://huggingface.co/inclusionAI 页面上找到对应模型的信息，并总结其技术特征和适用场景（例如：更智能？更快？）。
+- **创建时间:** 2025-10-11 15:10
+- **状态:** `已完成 (Completed)`
+- **验证方式:**
+    1.  打开浏览器并访问 `http://127.0.0.1:7860`。
+    2.  在“聊天 (Chat)”标签页中，查看右侧的“选择模型”区域。
+    3.  逐个点击选择不同的模型（如 `Ling-1T`, `Ring-flash-2.0` 等）。
+    4.  确认每次选择后，下方显示的描述文本会更新为我们从 Hugging Face 页面总结的最新内容。
+- **验证结果:** (暂无)

docs/requirements/2025-10-11-14-39-update-chat-example-prompts.md

@@ -0,0 +1,11 @@
+# 需求：更新聊天 Tab 的示例提示
+
+- **需求描述:** 将「示例提示」里面的例子，改成一些更适合各个模型介绍的例子，以更好地展示模型的能力。
+- **创建时间:** 2025-10-11 15:25
+- **状态:** `已完成 (Completed)`
+- **验证方式:**
+    1.  打开浏览器并访问 `http://127.0.0.1:7860`。
+    2.  在“聊天 (Chat)”标签页中，查看下方的“示例提示”区域。
+    3.  在右侧“选择模型”处，逐个点击不同的模型。
+    4.  确认每次切换模型后，“示例提示”区域都会更新为我们为该模型新设计的、更具代表性的例子。
+- **验证结果:** (暂无)

docs/requirements/2025-10-11-15-08-refactor-chat-examples-to-scenarios.md

@@ -0,0 +1,12 @@
+# 需求：将聊天示例重构为“系统提示场景”
+
+- **需求描述:** 当前的“示例提示”仅提供消息示例。需要将其扩展为“系统提示示例”。用户选择一个系统提示示例后，应用会自动填充“System Prompt”输入框，并展示与该系统提示相匹配的一组新的“消息示例”。
+- **创建时间:** 2025-10-11 15:35
+- **状态:** `已完成 (Completed)`
+- **验证方式:**
+    1.  **界面检查:** 打开浏览器并访问 `http://127.0.0.1:7860`。在“聊天”标签页下方，确认旧的“示例提示”已替换为一个名为“✨ 试试这些场景...”的可折叠区域，其中包含“系统提示示例”和“消息示例”两部分。
+    2.  **场景切换:** 点击一个“系统提示示例”（例如“莎士比亚风格文案”）。确认右侧的“System Prompt”文本框内容会更新，同时下方的“消息示例”列表也会更新为对应场景的例子。
+    3.  **模型切换:** 在右侧切换“选择模型”（例如从 `Ling-1T` 切换到 `Ring-flash-2.0`）。确认“系统提示示例”列表会更新为新模型对应的场景，并且“System Prompt”文本框和“消息示例”会自动更新为新列表的第一个场景。
+    4.  **消息填充:** 点击任意一个“消息示例”。确认聊天输入框会自动填充该示例的内容。
+    5.  **功能测试:** 选择一个场景（如“Python 脚本生成器”），然后点击一个相关的消息示例，发送消息。确认模型的回复风格与所选的 System Prompt 一致。
+- **验证结果:** `已验证 (Verified)`

docs/requirements/2025-10-11-15-47-add-model-identity-to-chat-output.md

@@ -0,0 +1,10 @@
+# 需求：在聊天输出中添加模型身份标识
+
+- **需求描述:** 当前，聊天窗口里面，模型的输出不会标识自己是什么模型。需要在每个模型回复的开头，加上其身份标识。
+- **创建时间:** 2025-10-11 16:20
+- **状态:** `已完成 (Completed)`
+- **验证方式:**
+    1.  在“聊天 (Chat)”标签页中，选择任意模型。
+    2.  发送一条消息。
+    3.  确认模型回复的开头部分，会以加粗的格式显示当前所选模型的名称（例如 `**Ling-1T**`）。
+- **验证结果:** `已验证 (Verified)`

docs/requirements/2025-10-11-16-47-implement-static-page-generation.md

@@ -0,0 +1,36 @@
+# 需求：实现静态页面生成功能
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+在“代码生成”标签页中，当用户选择“静态页面”并输入需求后，应用需要调用 **Ling-1T 模型**来生成相应的 HTML 代码。
+
+## 2. 技术实现与核心要求
+
+- **模型对接:**
+    - 必须调用真实的 `Ling-1T` 模型，而不是使用本地 mock 数据。
+- **流式输出 (Streaming):**
+    - 模型的响应必须以**流式**的方式返回。
+    - 在 UI 的“源代码”区域，用户应该能看到代码被逐字打印出来的效果。
+- **多输出更新 (Multi-output Update):**
+    - `generate_code` 函数需要被实现为一个**生成器 (generator)**。
+    - 在每次 `yield` 时，它需要同时更新两个输出：
+        1.  **源代码区域:** `yield` 累积的完整代码字符串。
+        2.  **预览区域:** `yield` 一个根据当前累积代码生成的 `gr.HTML` 组件，以便在 `<iframe>` 中实时预览。
+
+## 3. 验收标准 (Acceptance Criteria)
+
+1.  **功能可用:** 在 UI 上选择“静态页面”，输入“创建一个红色背景的'Hello World'页面”，点击“生成代码”。
+2.  **流式显示:** “源代码”区域的文本内容是动态地、逐字增加的。
+3.  **实时预览:** “实时预览”区域的 `<iframe>` 能够随着代码的生成而实时更新并最终展示一个红色背景的页面。
+4.  **代码完整:** 最终生成的代码是一个结构完整、语法正确的 HTML 文档。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试静态页面生成功能。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。流式输出和实时预览功能均按预期工作。

docs/requirements/2025-10-11-16-56-add-code-generation-presets.md

@@ -0,0 +1,32 @@
+# 需求：为代码生成 Tab 添加预设选项
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+为了更好地展示 Ling-1T 模型在代码生成（尤其是 Canvas 动态特效）方面的强大能力，并提升用户初次体验，需要在“代码生成”标签页的 UI 中添加一组精心设计的预设选项。
+
+## 2. 功能要求
+
+- **UI 组件:** 在需求输入文本框下方，使用 Gradio 的 `gr.Examples` 组件来展示预设的 Prompt。
+- **交互:** 用户点击任何一个预设选项，该选项的文本内容将自动填充到上方的需求输入框中，用户可以随即点击“生成代码”按钮。
+- **内容:** 预设选项应包含一系列能够生成酷炫、动态的 HTML Canvas 特效的 Prompt，例如：
+    - "创建一个在黑色背景上不断绽放五彩烟花的 Canvas 动画。"
+    - "生成一个具有流光溢彩效果的 Canvas 特效。"
+    - "设计一个能与鼠标交互的粒子系统 Canvas 动画。"
+    - "用 HTML Canvas 实现一个经典的贪吃蛇游戏。"
+
+## 3. 验收标准
+
+1.  **UI 呈现:** 在“代码生成”标签页，需求输入框下方出现了预设选项区域。
+2.  **交互正确:** 点击一个预设选项，其文本被正确填入需求输入框。
+3.  **功能联动:** 填入预设 Prompt 后，点击“生成代码”，能够成功触发代码生成流程，并最终看到预期的动态效果。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试预设选项功能。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。预设选项功能按预期工作。

docs/requirements/2025-10-11-16-59-add-fullscreen-preview.md

@@ -0,0 +1,39 @@
+# 需求：为代码生成预览增加缩放与全屏功能
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+当前“代码生成”标签页的实时预览 `<iframe>` 尺寸固定，对于内容复杂或尺寸较大的生成结果（如 Canvas 动画），无法完整展示。需要对此进行优化，提供更好的预览体验。
+
+## 2. 功能要求
+
+1.  **缩放预览 (Zoomed Preview):**
+    - 默认情况下，`<iframe>` 内的 HTML 内容需要被按比例缩小，以使其整体视图能被容纳在预览框内，即“缩放模式”。
+    - 这需要通过 CSS `transform: scale()` 等技术实现。
+
+2.  **全屏切换功能 (Fullscreen Toggle):**
+    - 在“实时预览”区域的右上角，需要增加一个按钮，初始文本为“全屏预览”。
+    - **点击“全屏预览”:**
+        - 左侧的输入面板和下方的源代码面板需要被隐藏。
+        - 预览区域（`gr.HTML` 组件）扩展至占据整个可用空间。
+        - 按钮文本变为“退出全屏”。
+    - **点击“退出全屏”:**
+        - 恢复原始布局，重新显示左侧输入面板和下方源代码面板。
+        - 按钮文本改回“全屏预览”。
+
+## 3. 验收标准
+
+1.  **默认缩放:** 生成一个页面后，预览区域默认以缩小后的视图展示 `<iframe>` 的内容。
+2.  **按钮存在:** “实时预览”区域的右上角有一个“全屏预览”按钮。
+3.  **全屏功能:** 点击按钮后，输入和代码区域消失，预览区变大，按钮文本切换。
+4.  **退出全屏:** 再次点击按钮后，布局和按钮文本恢复原状。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试缩放和全屏功能。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。功能按预期工作。

docs/requirements/2025-10-11-17-12-refactor-code-preview-to-tabs.md

@@ -0,0 +1,42 @@
+# 需求：将代码预览重构为 Tab 布局并优化刷新机制
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+为了优化“代码生成”标签页的布局和用户体验，需要将“实时预览”和“生成的源代码”整合到同一个区域，并改进代码生成过程中的预览刷新逻辑。
+
+## 2. 功能要求
+
+1.  **Tab 布局:**
+    - 将原有的右侧“实时预览”面板和底部“生成的源代码”面板，合并为页面右侧的一个 `gr.Tabs` 组件。
+    - 该组件包含两个标签页：
+        - **Tab 1: "实时预览"**: 显示 `<iframe>` 预览和“全屏”按钮。
+        - **Tab 2: "生成的源代码"**: 显示代码框。
+
+2.  **加载动画:**
+    - 当用户点击“生成代码”后，在“实时预览”Tab 的内容区域中央，应立即显示一个旋转的加载动画（spinner），以明确表示“正在生成中”。
+    - 这个动画在代码完全生成后消失。
+
+3.  **刷新节流 (Throttling):**
+    - 在代码流式生成期间，“实时预览”`<iframe>` 的内容刷新频率应降低，**至多每 5 秒刷新一次**。
+    - 这可以避免因 `<iframe>` 过于频繁的重渲染导致的浏览器性能问题和闪烁。
+    - 与此同时，“生成的源代码”Tab 内的文本需要**保持实时**的逐字流式更新。
+
+## 3. 验收标准
+
+1.  **新布局:** 预览和代码框已正确地显示在两个并列的 Tab 中。
+2.  **加载动画:** 点击生成后，预览 Tab 能立即看到加载动画。
+3.  **刷新行为:**
+    - 在生成过程中切换到“生成的源代码”Tab，能看到代码在流畅地逐字增加。
+    - 停留在“实时预览”Tab，能观察到 `<iframe>` 的内容是间隔性更新的（大约5秒一次），而不是持续闪烁。
+4.  **最终结果:** 代码生成结束后，加载动画消失，预览区和代码区都显示最终的完整内容。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试 Tab 布局、加载动画、刷新节流机制以及源代码的 HTML 转义问题。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。所有功能点均按预期工作，转义问题已修复。

docs/requirements/2025-10-11-17-14-add-elephant-toothpaste-example.md

@@ -0,0 +1,30 @@
+# 需求：为代码生成 Tab 添加“大象牙膏”预设示例
+
+- **创建时间:** 2025-10-11
+- **状态:** 开发中 (In Progress)
+
+## 1. 需求描述
+
+为了进一步测试和展示 Ling-1T 模型生成复杂动态视觉效果的能力，需要在“代码生成”标签页的预设选项中，增加一个名为“大象牙膏”的示例。
+
+“大象牙膏”是一个经典的化学实验，以其迅速产生大量泡沫的戏剧性效果而闻名。在本项目中，它被用作一个比喻，指代一种视觉上复杂、具有涌现和膨胀感的生成艺术（Generative Art）。
+
+## 2. 功能要求
+
+- **添加新示例:** 在 `tab_code.py` 的 `gr.Examples` 组件中，新增一个预设选项。
+- **Prompt 设计:** 该选项的 Prompt 应清晰地描述出“大象牙膏”实验的视觉精髓，引导模型生成一个从一个点开始，不断有彩色泡沫或粒子涌出、膨胀，并最终充满整个画布的 Canvas 动画。
+- **Prompt 文本（建议）:** `"创建一个模拟'大象牙膏'化学实验的 Canvas 动画：一个容器中，彩色泡沫不断快速涌出、膨胀、溢出，充满整个屏幕。"`
+
+## 3. 验收标准
+
+1.  **UI 呈现:** 在“代码生成”的预设选项中，出现了描述“大象牙膏”效果的新条目。
+2.  **功能联动:** 点击该选项，其 Prompt 文本能被正确填入输入框，并能成功触发代码生成。
+3.  **效果预期:** 生成的预览中，能够看到一个符合“大象牙膏”描述的、具有动态膨胀效果的 Canvas 动画。
+
+## 4. 验证方式
+
+- (待填写)
+
+## 5. 验证结果
+
+- (待填写)

docs/requirements/2025-10-11-17-38-add-floating-island-example.md

@@ -0,0 +1,28 @@
+# 需求：为代码生成 Tab 添加“低多边形漂浮岛屿”示例
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+为了展示 Ling-1T 模型利用第三方库（如 d3.js）生成复杂、风格化场景的能力，需要在“代码生成”的预设选项中增加一个“低多边形漂浮岛屿”的示例。
+
+## 2. 功能要求
+
+- **添加新示例:** 在 `tab_code.py` 的 `gr.Examples` 组件中，新增一个预设选项。
+- **Prompt 设计:** Prompt 需要清晰地描述场景的核心元素：低多边形（Low Poly）风格、漂浮的岛屿、动态光照和柔和动画，并明确要求使用 d3.js 库。
+- **Prompt 文本:** `"创建一个梦幻的低多边形漂浮岛屿场景，带有动态光照和柔和的动画，在一个单一的HTML文件中。使用 d3.js 。"`
+
+## 3. 验收标准
+
+1.  **UI 呈现:** 在预设选项中，出现了“低多边形漂浮岛屿”的新条目。
+2.  **功能联动:** 点击该选项，其 Prompt 能被正确填入输入框，并能成功触发代码生成。
+3.  **效果预期:** 生成的预览中，能够看到一个符合描述的、使用 d3.js 渲染的动态场景。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。新示例已成功添加。

docs/requirements/2025-10-11-18-18-add-model-selection-switch.md

@@ -0,0 +1,35 @@
+# 需求：在代码生成页加入模型选择开关
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+为了让用户能够在代码生成的速度和质量之间进行选择，需要在“代码生成”标签页的用户界面上增加一个模型切换控件。
+
+## 2. 功能要求
+
+- **UI 组件:** 在“选择代码类型”下方，新增一个 `gr.Radio` 组件，用于选择模型。
+- **选项:**
+    - `"效果更好 (使用 Ling-1T)"`
+    - `"更快速 (使用 Ring-flash-2.0)"`
+- **默认值:** 默认选项应为 `"效果更好 (使用 Ling-1T)"`。
+- **后端逻辑:**
+    - `tab_code.py` 需要将用户选择的模型传递给 `models.py` 中的处理函数。
+    - `models.py` 中的 `generate_code_for_tab` 函数需要根据接收到的模型名称，调用 `get_model_response` 时传入正确的 `model_id`。
+
+## 3. 验收标准
+
+1.  **UI 呈现:** 在代码类型选择下方，出现了模型选择开关，且默认值为“效果更好”。
+2.  **功能正确:**
+    - 选择“效果更好”并生成代码时，后台日志显示调用的是 `Ling-1T` 模型。
+    - 选择“更快速”并生成代码时，后台日志显示调用的是 `Ring-flash-2.0` 模型。
+3.  **体验流畅:** 切换选项后，代码生成流程依然能正常工作。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。功能按预期工作。

docs/requirements/2025-10-11-18-18-display-think-tags-in-source-only.md

@@ -0,0 +1,37 @@
+# 需求：在源代码中显示 <think> 标签，但在预览中隐藏
+
+- **创建时间:** 2025-10-11
+- **状态:** 已完成 (Completed)
+
+## 1. 需求描述
+
+为了在调试和展示模型思考过程的同时，不影响代码的实际渲染效果，需要实现一个差异化的内容展示机制。在代码流式生成期间，模型的思考过程（被 `<think>...</think>` 标签包裹）应该只出现在“生成的源代码”区域，而不能被包含在用于渲染“实时预览”`<iframe>` 的代码中。
+
+## 2. 功能要求
+
+1.  **双重内容维护:**
+    - 在 `tab_code.py` 的 `generate_code` 生成器中，需要同时维护两个字符串状态：
+        - `full_code_with_think`: 存储从模型接收到的**原始**数据流，包含 `<think>` 标签。
+        - `full_code_for_preview`: 存储**过滤掉** `<think>` 标签及其内容的纯净代码。
+
+2.  **差异化输出:**
+    - 在每次 `yield` 更新 UI 时：
+        - “生成的源代码” (`code_output`) 组件应接收 `full_code_with_think` 的内容。
+        - “实时预览” (`preview_output`) 组件的 `<iframe>` 应使用 `full_code_for_preview` 的内容来渲染。
+
+3.  **数据源纯净:**
+    - `models.py` 中的 `get_model_response` 函数应返回未经任何过滤的原始数据流，将解析和过滤 `<think>` 标签的逻辑完全交给消费端（即 `tab_code.py`）处理。
+
+## 3. 验收标准
+
+1.  **源代码区:** 在代码生成过程中，能够清晰地看到 `<think>...</think>` 标签及其内容与代码交织在一起，实时流式输出。
+2.  **预览区:** 实时预览的 `<iframe>` 能够正常渲染，其内容在任何时候都不包含 `<think>` 标签，表现得好像它们从未存在过。
+3.  **最终结果:** 生成结束后，源代码区保留了完整的、包含思考过程的文本；预览区展示了纯净代码的最终渲染效果。
+
+## 4. 验证方式
+
+- 通过 UI 手动测试。
+
+## 5. 验证结果
+
+- 已验证 (Verified)。差异化内容展示功能按预期工作。

docs/requirements/2025-10-11-18-50-multi-provider-config-loading.md

@@ -0,0 +1,28 @@
+# 需求：实现多 Provider 配置加载策略
+
+- **创建时间:** 2025-10-11-18-50
+- **状态:** 开发中 (In Progress)
+
+## 需求描述
+
+为项目实现一个灵活且安全的配置加载机制，以适配本地开发和线上部署两种不同的环境。
+
+### 背景
+- **本地环境:** 使用内部 Alipay Inference Provider，性能高且免费。配置通过 `local.py` 文件管理。
+- **线上环境 (Hugging Face):** 使用 Zenmux Provider，需要付费，但可在公网访问。配置通过 Hugging Face 的环境变量 secrets 进行管理。
+- **安全与效率:** `local.py` 文件应被 `.gitignore` 忽略，以防止本地敏感信息泄露。
+
+### 设计目标
+实现一个“优先本地，回退线上”的配置加载逻辑：
+1.  应用启动时，首先尝试从 `local.py` 文件导入 API endpoint 和 API key。
+2.  如果 `local.py` 文件不存在（例如在线上环境中），则回退至从系统的环境变量中读取这些配置。
+3.  此设计旨在兼顾本地开发的效率与便利性、线上部署的安全性以及成本控制。
+
+## 验证方式
+
+1.  在本地创建 `local.py` 文件并填入虚拟的 API key 和 URL。启动应用，确认应用加载的是 `local.py` 中的配置。
+2.  删除或重命名 `local.py` 文件。在终端中设置临时的环境变量。启动应用，确认应用加载的是环境变量中的配置。
+
+## 验证结果
+
+(暂无)

docs/uncategorized/development_todo.md

@@ -0,0 +1,31 @@
+# Ling & Ring Playground - Development TODO
+
+## 任务: 实现代码生成 Tab (`tab_code.py`)
+
+### 1. UI 构建
+- [ ] 在 `tab_code.py` 中创建 `create_code_tab` 函数。
+- [ ] 添加 `gr.Radio` 组件，提供 "静态页面" 和 "Gradio 应用" 选项。
+- [ ] 添加 `gr.Textbox` 作为用户 Prompt 输入框。
+- [ ] 添加 `gr.Button` 用于触发生成。
+- [ ] 添加 `gr.Code` 组件用于显示生成的源代码。
+- [ ] 添加 `gr.HTML` 组件用于实时预览。
+
+### 2. 后端逻辑
+- [ ] 为 "静态页面" 编写 System Prompt。
+- [ ] 为 "Gradio 应用" 编写 System Prompt。
+- [ ] 实现按钮点击事件的处理函数。
+- [ ] **静态页面逻辑**:
+    - [ ] 调用 Ring 模型生成 HTML。
+    - [ ] 将返回的 HTML 字符串直接更新到 `gr.HTML` 组件。
+- [ ] **Gradio 应用逻辑**:
+    - [ ] 调用 Ring 模型生成 Python 代码。
+    - [ ] 将代码保存到临时文件。
+    - [ ] 使用 `subprocess` 在后台启动独立的 Gradio 应用。
+    - [ ] 捕获子进程输出，解析出本地 URL。
+    - [ ] 将 URL 加载到 `gr.HTML` 的 `<iframe>` 中。
+    - [ ] 实现子进程管理（启动/终止）。
+
+### 3. 应用整合
+- [ ] 在 `app.py` 中导入 `create_code_tab`。
+- [ ] 在 `gr.Blocks` 中添加一个新的 `gr.Tab("代码生成")`。
+- [ ] 在新 Tab 中调用 `create_code_tab()`。

models.py

@@ -0,0 +1,127 @@
+import httpx
+import json
+import logging
+import html
+from config import ANTCHAT_BASE_URL, ANTCHAT_API_KEY, CHAT_MODEL_SPECS
+
+logging.basicConfig(
+    level=logging.DEBUG,
+    format="%(asctime)s [%(levelname)s] %(message)s"
+)
+logger = logging.getLogger(__name__)
+
+def get_model_response(model_id, history, system_prompt, temperature, escape_html=True):
+    """
+    与 AntChat API 交互以获取模型响应。
+    """
+    # The model_id passed in is now the ground truth, potentially overridden by local.py
+    api_model_id = CHAT_MODEL_SPECS[model_id]["model_id"]
+    
+    headers = {
+        "Authorization": f"Bearer {ANTCHAT_API_KEY}",
+        "Content-Type": "application/json",
+    }
+    
+    # 构建消息历史
+    messages = [{"role": "system", "content": system_prompt}]
+    for user_msg, assistant_msg in history:
+        # 关键修复：只处理包含用户消息的轮次，以过滤掉UI的初始欢迎语
+        if user_msg:
+            messages.append({"role": "user", "content": user_msg})
+            # 只有在用户消息之后，才可能追加对应的助手消息
+            if assistant_msg:
+                messages.append({"role": "assistant", "content": assistant_msg})
+
+    json_data = {
+        "model": api_model_id,
+        "messages": messages,
+        "stream": True,
+        "temperature": temperature,
+    }
+
+    logger.debug(f"请求 URL: {ANTCHAT_BASE_URL}/chat/completions")
+    logger.debug(f"请求头: {headers}")
+    logger.debug(f"请求体: {json.dumps(json_data, ensure_ascii=False)}")
+    try:
+        with httpx.stream(
+            "POST",
+            f"{ANTCHAT_BASE_URL}/chat/completions",
+            headers=headers,
+            json=json_data,
+            timeout=120,
+        ) as response:
+            logger.debug(f"响应状态码: {response.status_code}")
+            response.raise_for_status()
+            for chunk in response.iter_lines():
+                if chunk.startswith("data:"):
+                    chunk = chunk[5:]
+                    if chunk.strip() == "[DONE]":
+                        break
+                    try:
+                        data = json.loads(chunk)
+                        if "choices" in data and data["choices"]:
+                            delta = data["choices"][0].get("delta", {})
+                            content_chunk = delta.get("content")
+                            if content_chunk:
+                                yield html.escape(content_chunk) if escape_html else content_chunk
+                            
+                            elif "tool_calls" in delta:
+                                tool_calls = delta.get("tool_calls", [])
+                                if tool_calls:
+                                    func_chunk = tool_calls[0].get("function", {})
+                                    args_chunk = func_chunk.get("arguments")
+                                    if args_chunk:
+                                        yield html.escape(args_chunk) if escape_html else args_chunk
+                    except json.JSONDecodeError as e:
+                        logger.error(f"JSON 解析错误: {e}, 数据: {chunk}")
+    except Exception as e:
+        logger.error(f"请求异常: {e}")
+
+def perform_web_search(query):
+    # 调用 Tavily 或 Serper API
+    #...
+    return "搜索结果摘要"
+
+def generate_code_for_tab(system_prompt, user_prompt, code_type, model_choice):
+    """
+    为代码生成标签页调用 Ring 模型。
+    """
+    logger.info(f"为 '{code_type}' 类型生成代码，Prompt: '{user_prompt}', Model: '{model_choice}'")
+    
+    if code_type == "静态页面":
+        # 从 UI 的选项中解析出模型名称
+        if "inclusionai/ling-1t" in model_choice:
+            model_name = "inclusionai/ling-1t"
+        elif "inclusionai/ring-flash-2.0" in model_choice:
+            model_name = "inclusionai/ring-flash-2.0"
+        else:
+            # 默认或备用模型
+            model_name = "inclusionai/ling-1t"
+            logger.warning(f"未知的模型选项 '{model_choice}', 回退到默认模型 'inclusionai/ling-1t'")
+
+        history = [[user_prompt, None]]
+        temperature = 0.7 
+        # For code, we don't want to escape HTML entities
+        yield from get_model_response(model_name, history, system_prompt, temperature, escape_html=False)
+        
+    elif code_type == "Gradio 应用":
+        # Currently mocked
+        yield f"""
+import gradio as gr
+
+def greet(name):
+    return f"Hello, {user_prompt} a.k.a. {{name}}!"
+
+with gr.Blocks() as demo:
+    gr.Markdown("## Simple Greeting App")
+    name_input = gr.Textbox(label="Enter your name")
+    greet_button = gr.Button("Greet")
+    output_text = gr.Textbox(label="Output")
+
+    greet_button.click(fn=greet, inputs=name_input, outputs=output_text)
+
+demo.launch()
+"""
+    else:
+        return
+        yield

openai_api.py

@@ -0,0 +1,47 @@
+from openai import OpenAI
+import config
+
+# Get API key from environment variable
+if not config.ANTCHAT_API_KEY:
+    raise ValueError("ANTCHAT_API_KEY environment variable is not set.")
+
+# Create the OpenAI client
+client = OpenAI(
+    api_key=config.ANTCHAT_API_KEY,
+    base_url=config.ANTCHAT_BASE_URL,
+)
+
+def get_completion(messages, model="default-model", temperature=0.7, max_tokens=1024, stream=False):
+    """
+    Get completion from the OpenAI-compatible API.
+    """
+    try:
+        completion = client.chat.completions.create(
+            model=model,
+            messages=messages,
+            temperature=temperature,
+            max_tokens=max_tokens,
+            stream=stream,
+        )
+        return completion
+    except Exception as e:
+        print(f"Error getting completion: {e}")
+        return None
+
+def get_multimodal_completion(messages, model="default-vision-model", temperature=0.7, max_tokens=1024, stream=False):
+    """
+    Get multimodal completion from the OpenAI-compatible API.
+    The 'messages' should be in the format for multimodal requests, including image_url.
+    """
+    try:
+        completion = client.chat.completions.create(
+            model=model,
+            messages=messages,
+            temperature=temperature,
+            max_tokens=max_tokens,
+            stream=stream,
+        )
+        return completion
+    except Exception as e:
+        print(f"Error getting multimodal completion: {e}")
+        return None

requirements.txt

@@ -0,0 +1 @@
+gradio

tab_chat.py

@@ -0,0 +1,170 @@
+import gradio as gr
+from config import CHAT_SYSTEM_PROMPT_PLACEHOLDER, CHAT_MODEL_SPECS
+from models import get_model_response
+import logging
+import copy
+
+logger = logging.getLogger(__name__)
+
+# --- Backend Logic ---
+
+def handle_chat(message, history, system_prompt, temperature, model_id):
+    """处理聊天消息提交的核心函数"""
+    logger.debug(f"handle_chat 输入: message={message}, history={history}, system_prompt={system_prompt}, temperature={temperature}, model_id={model_id}")
+    if history is None:
+        history = []
+    history = copy.deepcopy(history)
+    history.append((message, ""))
+    
+    # 从 spec 中获取用于显示的名称
+    model_display_name = CHAT_MODEL_SPECS.get(model_id, {}).get("display_name", model_id)
+    
+    is_first_chunk = True
+    for chunk in get_model_response(model_id, history, system_prompt, temperature):
+        if is_first_chunk:
+            # 在第一个块前加上模型名称
+            history[-1] = (message, f"**{model_display_name}**\n\n" + chunk)
+            is_first_chunk = False
+        else:
+            history[-1] = (message, history[-1][1] + chunk)
+        yield copy.deepcopy(history), ""
+
+# --- UI Event Handlers ---
+
+def handle_model_change(model_id):
+    """当用户切换模型时，更新UI"""
+    spec = CHAT_MODEL_SPECS[model_id]
+    scenarios = spec.get("prompt_scenarios", [])
+    
+    # 默认加载第一个场景
+    if scenarios:
+        first_scenario = scenarios[0]
+        scenario_titles = [[s["title"]] for s in scenarios]
+        message_examples = [[m] for m in first_scenario["message_examples"]]
+        system_prompt_value = first_scenario["system_prompt"]
+    else: # 兼容没有场景的情况
+        scenario_titles = []
+        message_examples = []
+        system_prompt_value = ""
+
+    return (
+        gr.update(value=spec["description"]),
+        gr.update(samples=scenario_titles),
+        gr.update(value=system_prompt_value),
+        gr.update(samples=message_examples)
+    )
+
+def handle_scenario_selection(model_id, evt: gr.SelectData):
+    """当用户从场景数据集中选择一个场景时，更新UI"""
+    logger.debug(f"--- Scenario Selection Event ---")
+    logger.debug(f"Selected event value: {evt.value}")
+    logger.debug(f"Type of event value: {type(evt.value)}")
+    
+    # 修正：从列表中提取字符串
+    selected_title = evt.value[0] if isinstance(evt.value, list) and evt.value else None
+    if not selected_title:
+        logger.error("Selected event value is not a valid list or is empty.")
+        return gr.update(), gr.update()
+
+    spec = CHAT_MODEL_SPECS[model_id]
+    scenarios = spec.get("prompt_scenarios", [])
+    
+    available_titles = [s['title'] for s in scenarios]
+    logger.debug(f"Available scenario titles for model '{model_id}': {available_titles}")
+
+    selected_scenario = next((s for s in scenarios if s["title"] == selected_title), None)
+    
+    if selected_scenario:
+        logger.debug(f"Found matching scenario: '{selected_title}'")
+        system_prompt_value = selected_scenario["system_prompt"]
+        message_examples = [[m] for m in selected_scenario["message_examples"]]
+        return gr.update(value=system_prompt_value), gr.update(samples=message_examples)
+    
+    logger.warning(f"No matching scenario found for title: '{selected_title}'")
+    # 如果找不到场景，则不更新
+    return gr.update(), gr.update()
+
+# --- UI Creation ---
+
+def create_chat_tab():
+    """创建并返回聊天标签页的所有Gradio组件"""
+    
+    # 从配置中提取模型信息用于UI展示
+    # choices 是一个 (display_name, model_id) 的元组列表
+    model_choices = [(spec["display_name"], model_id) for model_id, spec in CHAT_MODEL_SPECS.items()]
+    default_model_id = list(CHAT_MODEL_SPECS.keys())[0]
+    default_spec = CHAT_MODEL_SPECS[default_model_id]
+    default_scenarios = default_spec.get("prompt_scenarios", [])
+    
+    with gr.TabItem("聊天", id="chat_tab"):
+        with gr.Row():
+            with gr.Column(scale=3):
+                chatbot = gr.Chatbot(
+                    label="聊天窗口",
+                    bubble_full_width=False,
+                    height=500,
+                    value=[(None, "Hello! I'm Ling. Try selecting a scenario and a message example below to get started.")]
+                )
+                with gr.Row():
+                    chat_input = gr.Textbox(placeholder="Ask me anything...", label="输入框", show_label=False, scale=4)
+                    send_button = gr.Button("发送", variant="primary", scale=1)
+
+                # 新的场景化示例区域
+                with gr.Accordion("✨ 试试这些场景...", open=True):
+                    # 场景选择器
+                    scenario_selector = gr.Dataset(
+                        components=[gr.Textbox(visible=False)],
+                        samples=[[s["title"]] for s in default_scenarios],
+                        label="系统提示示例",
+                        headers=["选择一个角色或任务来开始："],
+                    )
+                    # 消息示例
+                    message_examples_display = gr.Dataset(
+                        components=[chat_input],
+                        samples=[[m] for m in default_scenarios[0]["message_examples"]] if default_scenarios else [],
+                        label="消息示例",
+                        headers=["然后，试试这些具体问题："],
+                    )
+
+            with gr.Column(scale=1):
+                model_selector = gr.Radio(
+                    choices=model_choices, 
+                    label="选择模型", 
+                    value=default_model_id
+                )
+                model_description = gr.Markdown(default_spec["description"])
+                system_prompt = gr.Textbox(
+                    label="System Prompt", 
+                    lines=8, 
+                    placeholder=CHAT_SYSTEM_PROMPT_PLACEHOLDER,
+                    value=default_scenarios[0]["system_prompt"] if default_scenarios else ""
+                )
+                temperature_slider = gr.Slider(minimum=0.0, maximum=2.0, value=1.0, step=0.1, label="Temperature")
+
+    # --- Event Listeners ---
+    model_selector.change(
+        fn=handle_model_change,
+        inputs=[model_selector],
+        outputs=[model_description, scenario_selector, system_prompt, message_examples_display]
+    )
+    
+    scenario_selector.select(
+        fn=handle_scenario_selection,
+        inputs=[model_selector],
+        outputs=[system_prompt, message_examples_display]
+    )
+
+    message_examples_display.click(
+        fn=lambda value: value[0],
+        inputs=[message_examples_display],
+        outputs=[chat_input]
+    )
+    
+    return {
+        "chatbot": chatbot,
+        "chat_input": chat_input,
+        "send_button": send_button,
+        "system_prompt": system_prompt,
+        "temperature_slider": temperature_slider,
+        "model_selector": model_selector,
+    }

tab_code.py

@@ -0,0 +1,245 @@
+import gradio as gr
+import subprocess
+import threading
+import queue
+import uuid
+import os
+import tempfile
+import sys
+import logging
+import time
+from models import generate_code_for_tab
+
+# 配置日志
+logger = logging.getLogger(__name__)
+
+# 用于存储当前运行的 Gradio 子进程
+running_processes = {}
+
+def stop_process(session_id):
+    """停止与特定会话关联的子进程"""
+    process = running_processes.get(session_id)
+    if process and process.poll() is None:
+        process.terminate()
+        process.wait()
+        print(f"Terminated process for session {session_id}")
+    if session_id in running_processes:
+        del running_processes[session_id]
+
+def get_gradio_sys_prompt():
+    """获取用于生成 Gradio 应用的 System Prompt"""
+    return """
+You are an expert Gradio developer. Create a complete, runnable, single-file Gradio application based on the user's request.
+The code must be self-contained in a single Python script.
+The script must end with the app launch command, like `demo.launch()`.
+Do not include any explanations, just the raw Python code.
+"""
+
+def get_html_sys_prompt():
+    """获取用于生成静态页面的 System Prompt"""
+    return """
+You are an expert front-end developer. Create a complete, modern, and responsive single HTML file based on the user's request.
+The file must be self-contained, including all necessary HTML, CSS, and JavaScript.
+Do not include any explanations, just the raw HTML code.
+"""
+
+def run_gradio_in_thread(code, url_queue, session_id):
+    """在单独的线程中运行Gradio应用，以避免阻塞主应用"""
+    temp_dir = tempfile.mkdtemp()
+    file_path = os.path.join(temp_dir, "app.py")
+    with open(file_path, "w") as f:
+        f.write(code)
+
+    python_executable = sys.executable
+    process = subprocess.Popen(
+        [python_executable, file_path],
+        stdout=subprocess.PIPE,
+        stderr=subprocess.PIPE,
+        text=True,
+        bufsize=1,
+        universal_newlines=True
+    )
+    running_processes[session_id] = process
+
+    for line in process.stdout:
+        print(f"Gradio App stdout: {line.strip()}")
+        if "Running on local URL:" in line:
+            url = line.split("Running on local URL:")[1].strip()
+            url_queue.put(url)
+            break
+    
+    process.wait()
+    try:
+        os.remove(file_path)
+        os.rmdir(temp_dir)
+    except OSError as e:
+        print(f"Error cleaning up temp files: {e}")
+
+def get_spinner_html():
+    """返回带 CSS 旋转动画的 HTML"""
+    return """
+    <div style="width: 100%; height: 600px; display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; background-color: #f9f9f9;">
+        <div class="spinner"></div>
+    </div>
+    <style>
+        .spinner {
+            border: 4px solid rgba(0, 0, 0, 0.1);
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            border-left-color: #09f;
+            animation: spin 1s ease infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+    """
+
+def generate_code(code_type, model_choice, user_prompt, session_id: gr.State):
+    """生成代码并根据类型决定如何展示"""
+    logger.info(f"--- [Code Generation] Start ---")
+    logger.info(f"Code Type: {code_type}, Model: {model_choice}, Prompt: '{user_prompt}'")
+    
+    stop_process(session_id)
+
+    if not user_prompt:
+        yield "Please enter a prompt.", gr.HTML("Preview will appear here.")
+        return
+
+    if code_type == "静态页面":
+        system_prompt = get_html_sys_prompt()
+        full_code_with_think = ""
+        full_code_for_preview = ""
+        buffer = ""
+        is_thinking = False
+        last_update_time = 0
+        
+        yield "", gr.HTML(get_spinner_html())
+
+        # The model's raw output is streamed here
+        for code_chunk in generate_code_for_tab(system_prompt, user_prompt, code_type, model_choice):
+            full_code_with_think += code_chunk
+            buffer += code_chunk
+            
+            # Process the buffer to filter out think tags for the preview
+            while True:
+                if is_thinking:
+                    end_index = buffer.find("</think>")
+                    if end_index != -1:
+                        is_thinking = False
+                        buffer = buffer[end_index + len("</think>"):]
+                    else:
+                        break 
+                else:
+                    start_index = buffer.find("<think>")
+                    if start_index != -1:
+                        part_to_add = buffer[:start_index]
+                        full_code_for_preview += part_to_add
+                        is_thinking = True
+                        buffer = buffer[start_index:]
+                    else:
+                        full_code_for_preview += buffer
+                        buffer = ""
+                        break
+            
+            current_time = time.time()
+            if current_time - last_update_time >= 5:
+                escaped_code = full_code_for_preview.replace("'", "&apos;").replace('"', '&quot;')
+                preview_html = f"""
+                <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
+                    <div style="position: absolute; top: 10px; right: 10px; z-index: 10;">
+                        <div class="spinner-small"></div>
+                    </div>
+                    <iframe srcdoc='{escaped_code}'
+                            style="position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: none;">
+                    </iframe>
+                </div>
+                <style>.spinner-small {{ border: 2px solid rgba(0,0,0,0.1); width: 18px; height: 18px; border-radius: 50%; border-left-color: #09f; animation: spin 1s ease infinite; }} @keyframes spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }}</style>
+                """
+                yield full_code_with_think, gr.HTML(preview_html)
+                last_update_time = current_time
+            else:
+                yield full_code_with_think, gr.update()
+        
+        # Final update for the preview without the spinner
+        escaped_code = full_code_for_preview.replace("'", "&apos;").replace('"', '&quot;')
+        final_preview_html = f"""
+        <div style="width: 100%; height: 600px; border: 1px solid #ddd; overflow: hidden; position: relative; background-color: #f9f9f9;">
+            <iframe srcdoc='{escaped_code}'
+                    style="position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(0.5); transform-origin: 0 0; border: none;">
+            </iframe>
+        </div>
+        """
+        yield full_code_with_think, gr.HTML(final_preview_html)
+        logger.info("Static page streaming finished.")
+
+def toggle_fullscreen(is_fullscreen):
+    """切换全屏模式的可见性"""
+    is_fullscreen = not is_fullscreen
+    new_button_text = "退出全屏" if is_fullscreen else "全屏预览"
+    panel_visibility = not is_fullscreen
+    return is_fullscreen, gr.update(value=new_button_text), gr.update(visible=panel_visibility)
+
+def create_code_tab():
+    """创建代码生成功能的UI Tab"""
+    session_id = str(uuid.uuid4())
+    session_state = gr.State(session_id)
+    fullscreen_state = gr.State(False)
+
+    with gr.Blocks() as demo:
+        with gr.Row():
+            with gr.Column(scale=1) as left_panel:
+                gr.Markdown("### 1. 选择代码类型")
+                code_type_radio = gr.Radio(["静态页面", "Gradio 应用"], value="静态页面", label="Code Type")
+                
+                gr.Markdown("### 2. 选择模型")
+                model_choice_radio = gr.Radio(
+                    ["效果更好 (使用 Ling-1T)", "更快速 (使用 Ring-flash-2.0)"],
+                    value="效果更好 (使用 Ling-1T)",
+                    label="Model Selection"
+                )
+
+                gr.Markdown("### 3. 输入你的需求")
+                prompt_input = gr.Textbox(lines=5, placeholder="例如：创建一个带有标题和按钮的简单页面", label="Prompt")
+                gr.Examples(
+                    examples=[
+                        "创建一个在黑色背景上不断绽放五彩烟花的 Canvas 动画。",
+                        "生成一个具有流光溢彩效果的 Canvas 特效。",
+                        "设计一个能与鼠标交互的粒子系统 Canvas 动画。",
+                        "用 HTML Canvas 实现一个经典的贪吃蛇游戏。",
+                        "创建一个模拟'大象牙膏'化学实验的 Canvas 动画：一个容器中，彩色泡沫不断快速涌出、膨胀、溢出，充满整个屏幕。",
+                        "创建一个梦幻的低多边形漂浮岛屿场景，带有动态光照和柔和的动画，在一个单一的HTML文件中。使用 d3.js 。"
+                    ],
+                    inputs=prompt_input,
+                    label="✨ 不妨试试这些酷炫的例子"
+                )
+                generate_button = gr.Button("生成代码", variant="primary")
+            
+            with gr.Column(scale=2):
+                with gr.Tabs():
+                    with gr.TabItem("实时预览"):
+                        with gr.Row():
+                            gr.Markdown("### 3. 实时预览")
+                            fullscreen_button = gr.Button("全屏预览", scale=0)
+                        preview_output = gr.HTML(value="<p>Preview will appear here.</p>")
+                    with gr.TabItem("生成的源代码"):
+                        gr.Markdown("### 4. 生成的源代码")
+                        code_output = gr.Code(language="html", label="Generated Code")
+
+        generate_button.click(
+            fn=generate_code,
+            inputs=[code_type_radio, model_choice_radio, prompt_input, session_state],
+            outputs=[code_output, preview_output]
+        )
+        
+        fullscreen_button.click(
+            fn=toggle_fullscreen,
+            inputs=[fullscreen_state],
+            outputs=[fullscreen_state, fullscreen_button, left_panel]
+        )
+
+        demo.unload(fn=lambda: stop_process(session_id))
+
+    return demo

tab_search.py

@@ -0,0 +1,36 @@
+import gradio as gr
+from config import SEARCH_SYSTEM_PROMPT
+
+def handle_web_search(query):
+    """处理“网页检索”标签页的逻辑"""
+    # 模拟 Ring 模型进行网页检索和总结
+    # 在真实应用中，这里会使用 SEARCH_SYSTEM_PROMPT
+    summary = f"根据对网络的检索，关于 ‘{query}’ 的总结如下：\n\n这是一个由 Ring 模型模拟生成的摘要性回答。在实际应用中，模型会访问互联网，抓取相关信息，并生成一段高质量的总结。\n\n### 关键点：\n- **要点一**: 这是第一个关键信息。\n- **要点二**: 这是第二个关键信息。\n- **要点三**: 这是第三个关键信息。"
+
+    sources = """### 信息来源:
+* [Source 1: Example Domain](https://example.com)
+* [Source 2: Another Example](https://example.com)
+* [Source 3: Wikipedia](https://wikipedia.org)"""
+
+    full_response = f"{summary}\n\n{sources}"
+    
+    return gr.update(value=full_response, visible=True)
+
+def create_search_tab():
+    with gr.TabItem("网页检索", id="search_tab"):
+        gr.Markdown("<p align='center'>由 <strong>Ring 💍</strong> 模型驱动</p>")
+        with gr.Column():
+            search_input = gr.Textbox(label="搜索输入区", placeholder="Enter a question to search and summarize...")
+            gr.Examples(
+                examples=["AI 的最新进展是什么？", "解释一下 Transformer 架构", "总结今天的新闻头条"],
+                label="示例提示",
+                inputs=[search_input]
+            )
+            search_button = gr.Button("✨ 检索")
+            search_results_output = gr.Markdown(label="结果展示区", visible=False)
+
+    return {
+        "search_input": search_input,
+        "search_button": search_button,
+        "search_results_output": search_results_output
+    }

tab_workflow.py

@@ -0,0 +1,74 @@
+import gradio as gr
+from utils import WORKFLOW_SVG_DIAGRAM
+from config import WORKFLOW_GENERATE_SYSTEM_PROMPT, WORKFLOW_EXECUTE_SYSTEM_PROMPT
+
+def handle_workflow_generation(description):
+    """处理“工作流执行”标签页的生成逻辑"""
+    # 在真实应用中，这里会使用 WORKFLOW_GENERATE_SYSTEM_PROMPT
+    # We use a mock SVG diagram from utils
+    svg_diagram = WORKFLOW_SVG_DIAGRAM
+    
+    steps = ["Step 1: Plan", "Step 2: Execute", "Step 3: Review"]
+    initial_state = {"current_step": 0, "steps": steps}
+    initial_status = f"**当前节点**: {steps[0]}"
+    initial_chatbot_message = [(None, f"工作流已生成。让我们开始第一步：‘{steps[0]}’。请提供规划所需的信息。 ")]
+
+    return svg_diagram, initial_status, initial_chatbot_message, initial_state
+
+def handle_workflow_chat(user_input, chat_history, state):
+    """处理工作流的交互式聊天"""
+    if not state or not state.get("steps"):
+        return chat_history, state, "", gr.update(interactive=False)
+
+    chat_history.append((user_input, None))
+    
+    current_step_index = state["current_step"]
+    steps = state["steps"]
+    
+    thinking_message = "..."
+    chat_history[-1] = (user_input, thinking_message)
+    yield chat_history, state, "", gr.update(interactive=False)
+
+    current_step_index += 1
+    state["current_step"] = current_step_index
+
+    if current_step_index < len(steps):
+        next_step_name = steps[current_step_index]
+        response = f"好的，已完成上一步。现在我们进行 ‘{next_step_name}’。请提供相关信息。"
+        new_status = f"**当前节点**: {next_step_name}"
+        interactive = True
+    else:
+        response = "所有步骤均已完成！工作流结束。"
+        new_status = "**状态**: 已完成"
+        interactive = False
+
+    chat_history.append((None, response))
+    
+    yield chat_history, state, new_status, gr.update(interactive=interactive)
+
+def create_workflow_tab():
+    with gr.TabItem("工作流执行", id="workflow_tab"):
+        gr.Markdown("<p align='center'>由 <strong>Ring 💍</strong> 模型驱动</p>")
+        with gr.Row():
+            with gr.Column(scale=1):
+                workflow_description_input = gr.Textbox(lines=7, label="工作流描述", placeholder="Describe the steps of your workflow...")
+                gr.Examples(
+                    examples=["规划一次东京之旅", "新用户引导流程", "内容审批流程"],
+                    label="示例提示",
+                    inputs=[workflow_description_input]
+                )
+                generate_workflow_button = gr.Button("✨ 生成工作流")
+                workflow_visualization_output = gr.HTML(label="工作流图示")
+            with gr.Column(scale=1):
+                workflow_status_output = gr.Markdown(label="节点状态")
+                workflow_chatbot = gr.Chatbot(label="执行对话", height=400)
+                workflow_chat_input = gr.Textbox(label="交互输入", placeholder="Your response...", interactive=False)
+
+    return {
+        "workflow_description_input": workflow_description_input,
+        "generate_workflow_button": generate_workflow_button,
+        "workflow_visualization_output": workflow_visualization_output,
+        "workflow_status_output": workflow_status_output,
+        "workflow_chatbot": workflow_chatbot,
+        "workflow_chat_input": workflow_chat_input
+    }

utils.py

@@ -0,0 +1,19 @@
+# Mock data and helper functions
+
+WORKFLOW_SVG_DIAGRAM = """<svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+            <path d="M 0 0 L 10 5 L 0 10 z" fill="#9ca3af"></path>
+        </marker>
+    </defs>
+    <g fill="none" stroke="#9ca3af" stroke-width="2">
+        <rect x="10" y="50" width="100" height="50" rx="5" fill="#bfdbfe"></rect>
+        <text x="60" y="80" text-anchor="middle" fill="#1e3a8a" font-size="12">Step 1: Plan</text>
+        <path d="M110 75 L140 75" marker-end="url(#arrow)"></path>
+        <rect x="140" y="50" width="100" height="50" rx="5" fill="#f3f4f6"></rect>
+        <text x="190" y="80" text-anchor="middle" fill="#4b5563" font-size="12">Step 2: Execute</text>
+        <path d="M240 75 L270 75" marker-end="url(#arrow)"></path>
+        <rect x="270" y="50" width="100" height="50" rx="5" fill="#f3f4f6"></rect>
+        <text x="320" y="80" text-anchor="middle" fill="#4b5563" font-size="12">Step 3: Review</text>
+    </g>
+</svg>"""