Sync ling-space changes (filtered) from commit 127300e

.gitignore

@@ -0,0 +1,122 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+pip-wheel-metadata/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyderworkspace
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# Personal
+.secrets
+secrets.cfg

AGENTS.md

@@ -0,0 +1,23 @@
+# 项目章程: ling-space
+
+## 1. 项目概述
+
+- **目标**: 作为 Ling 系列模型的综合展示空间，集成文本生成、图像生成等多模态能力。
+- **HF Space 链接**: (部署后填写)
+
+## 2. 技术选型
+
+- **SDK**: Gradio
+- **核心模型**: Ling 系列模型 (TBD)
+- **核心 Python 库**: gradio, transformers, torch
+
+## 3. 数据源
+
+- **输入数据**: 用户输入的文本、图像等。
+- **输出数据**: 模型生成的文本、图像等。
+
+## 4. 开发规范
+
+- **代码风格**: Black
+- **测试框架**: Pytest
+- **Git 工作流**: 遵循 `project_management_for_hf_spaces` skill 中定义的分支与部署流程。

README.md

@@ -0,0 +1,44 @@
+---
+title: Ling Space
+emoji: 🤖
+colorFrom: blue
+colorTo: green
+sdk: gradio
+sdk_version: 5.49.1
+python_version: 3.13.7
+app_file: app.py
+pinned: false
+secrets:
+- OPENAI_API_KEY
+- LING_API_TOKEN
+---
+
+# Ling Space
+
+这是一个用于与 Ling 系列模型进行交互的 Gradio 应用。
+
+## 功能
+
+- **文本聊天**: 与 Ling 模型进行对话。
+- **模型选择**: 在多个可用模型之间切换。
+- **可配置性**: 通过配置文件轻松添加和管理模型。
+
+## 密钥管理 (Secrets Management)
+
+### 本地开发 (Local Development)
+
+1.  **创建密钥文件**: 在 `ling-space` 目录下，创建一个名为 `.secrets` 的文件。
+2.  **添加密钥**: 在 `.secrets` 文件中，以 `KEY="VALUE"` 的格式添加你的 API 密钥。例如：
+    ```
+    OPENAI_API_KEY="your_openai_api_key_here"
+    LING_API_TOKEN="your_ling_api_token_here"
+    ```
+3.  **代码加载**: `model_handler.py` 使用 `python-dotenv` 库自动从 `.secrets` 文件加载这些环境变量。你可以在代码中通过 `os.environ.get("YOUR_KEY_NAME")` 来访问它们。
+
+**注意**: `.secrets` 文件已被 `.gitignore` 忽略，确保你的密钥不会被意外提交。
+
+### 生产环境 (Hugging Face Spaces)
+
+1.  **设置 Secret**: 在你的 Hugging Face Space 的 "Settings" -> "Secrets and variables" 页面，添加你的 API 密钥作为 "Secret"。
+2.  **声明 Secret**: 本 `README.md` 文件顶部的 `secrets` 字段已经声明了应用需要哪些密钥。Hugging Face 会在运行时将这些 Secrets 作为环境变量注入。
+3.  **代码访问**: 你的代码无需修改，它会像在本地一样通过 `os.environ.get("YOUR_KEY_NAME")` 自动访问这些密钥。

app.py

@@ -0,0 +1,108 @@
+import gradio as gr
+import uuid
+from datetime import datetime
+import pandas as pd
+from model_handler import ModelHandler
+from tab_chat import create_chat_tab
+from tab_code import create_code_tab
+from tab_smart_writer import create_smart_writer_tab
+from tab_test import run_model_handler_test, run_clear_chat_test
+
+def get_history_df(history):
+    if not history:
+        return pd.DataFrame({'ID': [], 'Conversation': []})
+    df = pd.DataFrame(history)
+    return df[['id', 'title']].rename(columns={'id': 'ID', 'title': 'Conversation'})
+
+def on_app_load(history, conv_id):
+    """
+    Handles the application's initial state on load.
+    - If no history exists, creates a new conversation.
+    - If the last conversation ID is invalid, loads the most recent one.
+    - Otherwise, loads the last active conversation.
+    """
+    if not history:
+        # First time ever loading, create a new chat
+        conv_id = str(uuid.uuid4())
+        new_convo = { "id": conv_id, "title": "New Conversation", "messages": [], "timestamp": datetime.now().isoformat() }
+        history = [new_convo]
+        return conv_id, history, gr.update(value=get_history_df(history)), []
+
+    # Check if the last used conv_id is valid
+    if conv_id and any(c["id"] == conv_id for c in history):
+        # It's valid, load it
+        for convo in history:
+            if convo["id"] == conv_id:
+                return conv_id, history, gr.update(value=get_history_df(history)), convo["messages"]
+    
+    # Last used conv_id is invalid or doesn't exist, load the most recent conversation
+    most_recent_convo = history[0] # Assumes history is sorted by timestamp desc
+    conv_id = most_recent_convo["id"]
+    return conv_id, history, gr.update(value=get_history_df(history)), most_recent_convo["messages"]
+
+    
+CSS = """
+
+#chatbot {
+  height: calc(100vh - 21px - 16px);
+  max-height: 1500px;
+}
+
+footer { 
+    display: none !important; 
+}
+"""
+
+if __name__ == "__main__":
+    # Instantiate the model handler with the configuration
+    model_handler = ModelHandler()
+
+    with gr.Blocks(theme=gr.themes.Soft(),
+                   css=CSS,
+                   head="",
+                   head_paths=['./static/toastify.html', './static/app.html'],
+                   fill_height=True,
+                   fill_width=True) as demo:
+        with gr.Tabs(elem_id='indicator-space-app') as tabs:
+
+            with gr.TabItem("文本聊天") as chat_tab:
+                conversation_store, current_conversation_id, history_df, chatbot = create_chat_tab()
+
+            chat_tab.select(
+                fn=None,
+                js="() => {window.dispatchEvent(new CustomEvent('tabSelect.chat')); console.log('this'); return null;}",
+            )
+
+            with gr.TabItem("代码生成") as code_tab:
+                create_code_tab()
+
+            code_tab.select(
+                fn=None,
+                js="() => {window.dispatchEvent(new CustomEvent('tabSelect.code')); return null;}",
+            )
+
+            with gr.TabItem("写作助手") as writer_tab:
+                create_smart_writer_tab()
+
+            writer_tab.select(
+                fn=None,
+                js="() => {window.dispatchEvent(new CustomEvent('tabSelect.writing')); return null;}",
+            )
+
+            with gr.TabItem("测试"):
+                gr.Markdown("# 功能测试")
+                with gr.Column():
+                    test_log_output = gr.Textbox(label="测试日志", interactive=False, lines=10)
+                    gr.Button("运行 ModelHandler 测试").click(run_model_handler_test, outputs=test_log_output)
+                    gr.Button("运行 清除聊天 测试").click(run_clear_chat_test, outputs=test_log_output)
+
+        # Bind on_app_load to demo.load
+        demo.load(
+            on_app_load,
+            inputs=[conversation_store, current_conversation_id],
+            outputs=[current_conversation_id, conversation_store, history_df, chatbot],
+            js="() => {window.dispatchEvent(new CustomEvent('appStart')); console.log('appStart'); return {};}"
+        )
+
+    # Launch the Gradio application
+    demo.launch()

config.py

@@ -0,0 +1,125 @@
+"""
+Configuration file for the Ling Spaces application.
+
+This file centralizes all the configuration variables, such as API endpoints,
+API keys, and system prompts for different functionalities.
+"""
+
+import os
+from dotenv import load_dotenv
+
+# Load environment variables from .secrets file
+load_dotenv(dotenv_path='.secrets')
+
+# --- API Configuration ---
+# API endpoint for OpenAI compatible services
+OPEN_AI_ENTRYPOINT = os.getenv("OPEN_AI_ENTRYPOINT") or "https://api.openai.com/v1"
+# API key for OpenAI compatible services
+OPEN_AI_KEY = os.getenv("OPEN_AI_KEY")
+# Brand name of the OpenAI compatible provider
+OPEN_AI_PROVIDER = os.getenv("OPEN_AI_PROVIDER") or "OpenAI Compatible API"
+
+# Fallback/warning for API keys
+if not OPEN_AI_KEY:
+    print("⚠️ Warning: OPEN_AI_KEY is not set. Remote models may not function correctly.")
+if not OPEN_AI_ENTRYPOINT:
+    print("⚠️ Warning: OPEN_AI_ENTRYPOINT is not set. Using default: https://api.openai.com/v1")
+
+
+# --- Model Specifications ---
+
+# Constants for easy referencing of models
+LING_MINI_2_0 = "ling-mini-2.0"
+LING_1T = "ling-1t"
+LING_FLASH_2_0 = "ling-flash-2.0"
+RING_1T = "ring-1t"
+RING_FLASH_2_0 = "ring-flash-2.0"
+RING_MINI_2_0 = "ring-mini-2.0"
+
+
+CHAT_MODEL_SPECS = {
+    LING_MINI_2_0: {
+        "provider": "openai_compatible",
+        "model_id": "inclusionai/ling-mini-2.0",
+        "display_name": "🦉 Ling-mini-2.0",
+        "description": "A lightweight conversational model optimized for efficient operation on consumer-grade hardware, ideal for mobile or localized deployment scenarios.",
+        "url": "https://huggingface.co/inclusionai"
+    },
+    LING_1T: {
+        "provider": "openai_compatible",
+        "model_id": "inclusionai/ling-1t",
+        "display_name": "🦉 Ling-1T",
+        "description": "A trillion-parameter large language model designed for complex natural language understanding and generation tasks that require extreme performance and high fluency.",
+        "url": "https://huggingface.co/inclusionai"
+    },
+    LING_FLASH_2_0: {
+        "provider": "openai_compatible",
+        "model_id": "inclusionai/ling-flash-2.0",
+        "display_name": "🦉 Ling-flash-2.0",
+        "description": "A high-performance billion-parameter model optimized for scenarios requiring high-speed response and complex instruction following.",
+        "url": "https://huggingface.co/inclusionai"
+    },
+    RING_1T: {
+        "provider": "openai_compatible",
+        "model_id": "inclusionai/ring-1t",
+        "display_name": "💍️ Ring-1T",
+        "description": "A brand-new trillion-parameter reasoning model with powerful code generation and tool use capabilities.",
+        "url": "https://huggingface.co/inclusionai"
+    },
+    RING_FLASH_2_0: {
+        "provider": "openai_compatible",
+        "model_id": "inclusionai/ring-flash-2.0",
+        "display_name": "💍️ Ring-flash-2.0",
+        "description": "A billion-parameter reasoning model that strikes a good balance between performance and cost, suitable for general-purpose tasks that require step-by-step thinking or code generation.",
+        "url": "https://huggingface.co/inclusionai"
+    },
+    RING_MINI_2_0: {
+        "provider": "openai_compatible",
+        "model_id": "inclusionai/ring-mini-2.0",
+        "display_name": "💍️ Ring-mini-2.0",
+        "description": "A quantized and extremely efficient reasoning model designed for resource-constrained environments with strict speed and efficiency requirements (such as edge computing).",
+        "url": "https://huggingface.co/inclusionai"
+    }
+}
+
+# --- Code Framework Specifications ---
+
+# Constants for easy referencing of code frameworks
+STATIC_PAGE = "static_page"
+GRADIO_APP = "gradio_app"
+
+CODE_FRAMEWORK_SPECS = {
+    STATIC_PAGE: {
+        "display_name": "静态页面",
+        "description": "生成一个独立的、响应式的 HTML 文件，包含所有必要的 CSS 和 JavaScript。适合快速原型和简单的网页展示。"
+    }
+}
+
+
+# --- Utility Functions ---
+
+_current_provider_name = OPEN_AI_PROVIDER
+
+def set_current_provider(provider_name: str):
+    """Sets the current API provider name."""
+    global _current_provider_name
+    _current_provider_name = provider_name
+
+def get_current_provider_name() -> str:
+    """Returns the current API provider name."""
+    return _current_provider_name
+
+def get_model_id(model_constant: str) -> str:
+    """
+    Retrieves the internal model ID for a given model constant.
+    This is typically what's passed to the underlying API.
+    """
+    return CHAT_MODEL_SPECS.get(model_constant, {}).get("model_id", model_constant)
+
+def get_model_display_name(model_constant: str) -> str:
+    """
+    Retrieves the display name for a given model constant.
+    This is what's shown in the UI.
+    """
+    return CHAT_MODEL_SPECS.get(model_constant, {}).get("display_name", model_constant)
+

ling-space.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="jdk" jdkName="Python 3.13 virtualenv at ~/workspace/ling-series-hf-spaces/ling-space/.venv" jdkType="Python SDK" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

model_handler.py

@@ -0,0 +1,210 @@
+from abc import ABC, abstractmethod
+import httpx
+import json
+from config import CHAT_MODEL_SPECS, OPEN_AI_KEY, OPEN_AI_ENTRYPOINT, OPEN_AI_PROVIDER, get_model_id
+
+class ModelProvider(ABC):
+    """
+    Abstract base class for a model provider. This allows for different
+    backends (e.g., local, OpenAI API) to be used interchangeably.
+    """
+    def __init__(self, provider_name):
+        self.provider_name = provider_name
+
+    @abstractmethod
+    def get_response(self, model_id, message, chat_history):
+        """
+        Generates a response from a model.
+
+        :param model_id: The internal model ID to use.
+        :param message: The user's message.
+        :param chat_history: The current chat history.
+        :return: A generator that yields the response.
+        """
+        pass
+
+class OpenAICompatibleProvider(ModelProvider):
+    """
+    A model provider for any OpenAI compatible API.
+    """
+    def __init__(self, provider_name="openai_compatible"):
+        super().__init__(provider_name)
+        self.api_key = OPEN_AI_KEY
+        self.api_base = OPEN_AI_ENTRYPOINT
+        
+        if not self.api_key or not self.api_base:
+            print("Warning: OPEN_AI_KEY or OPEN_AI_ENTRYPOINT not found in environment.")
+
+    def get_response(self, model_id, message, chat_history, system_prompt, temperature=0.7):
+        """
+        Makes a real API call to an OpenAI compatible API and streams the response.
+        """
+        print(f"DEBUG: Received system_prompt: {system_prompt}, temperature: {temperature}") # Debug print
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json",
+        }
+        
+        # Build message history for API call
+        messages_for_api = []
+        if system_prompt: # 如果有系统提示词，添加到最前面
+            messages_for_api.append({"role": "system", "content": system_prompt})
+        
+        if chat_history:
+            for item in chat_history:
+                if isinstance(item, dict) and "role" in item and "content" in item:
+                    messages_for_api.append(item)
+        messages_for_api.append({"role": "user", "content": message})
+
+        json_data = {
+            "model": model_id,
+            "messages": messages_for_api, # Use the new list
+            "stream": True,
+            "temperature": temperature,
+        }
+
+        # Append user's message to chat_history for UI display
+        chat_history.append({"role": "user", "content": message})
+        # Initialize assistant's response in chat_history
+        chat_history.append({"role": "assistant", "content": ""}) # Placeholder for assistant's streaming response
+
+        try:
+            with httpx.stream(
+                "POST",
+                f"{self.api_base}/chat/completions",
+                headers=headers,
+                json=json_data,
+                timeout=120,
+            ) as response:
+                response.raise_for_status()
+                for chunk in response.iter_lines():
+                    if chunk.startswith("data:"):
+                        chunk = chunk[5:].strip()
+                        if chunk == "[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:
+                                    chat_history[-1]["content"] += content_chunk
+                                    yield chat_history
+                        except json.JSONDecodeError:
+                            print(f"Error decoding JSON chunk: {chunk}")
+        except Exception as e:
+            print(f"Error during API call: {e}")
+            # Ensure the last message (assistant's placeholder) is updated with the error
+            if chat_history and chat_history[-1]["role"] == "assistant":
+                chat_history[-1]["content"] = f"An error occurred: {e}"
+            else:
+                chat_history.append({"role": "assistant", "content": f"An error occurred: {e}"})
+            yield chat_history
+
+
+    def get_code_response(self, model_id, system_prompt, user_prompt, temperature=0.7):
+        """
+        Makes a real API call for code generation and streams the response.
+        """
+        headers = {
+            "Authorization": f"Bearer {self.api_key}",
+            "Content-Type": "application/json",
+        }
+        
+        messages_for_api = [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_prompt}
+        ]
+
+        json_data = {
+            "model": model_id,
+            "messages": messages_for_api,
+            "stream": True,
+            "temperature": temperature,
+        }
+
+        try:
+            with httpx.stream("POST", f"{self.api_base}/chat/completions", headers=headers, json=json_data, timeout=120) as response:
+                response.raise_for_status()
+                for chunk in response.iter_lines():
+                    if chunk.startswith("data:"):
+                        chunk = chunk[5:].strip()
+                        if chunk == "[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 content_chunk
+                        except json.JSONDecodeError:
+                            print(f"Error decoding JSON chunk: {chunk}")
+        except Exception as e:
+            print(f"Error during API call: {e}")
+            yield f"An error occurred: {e}"
+
+class ModelHandler:
+    """
+    Manages different models and providers, acting as a facade for the UI.
+    """
+    def __init__(self):
+        """
+        Initializes the ModelHandler with the global CHAT_MODEL_SPECS.
+        """
+        self.config = CHAT_MODEL_SPECS
+        self.providers = {
+            "openai_compatible": OpenAICompatibleProvider()
+        }
+        
+        self.api_provider_brand = OPEN_AI_PROVIDER
+
+    def get_response(self, model_constant, message, chat_history, system_prompt, temperature=0.7):
+        """
+        Gets a response from the appropriate model and provider.
+        
+        :param model_constant: The constant name of the model (e.g., LING_MODEL_A).
+        :param message: The user's message.
+        :param chat_history: The current chat history.
+        :param system_prompt: The system prompt to guide the model's behavior.
+        :param temperature: The temperature for the model.
+        :return: A generator that yields the response.
+        """
+        model_spec = self.config.get(model_constant, {})
+        provider_name = model_spec.get("provider")
+        model_id = model_spec.get("model_id")
+        
+        # Handle the case where chat_history might be None
+        if chat_history is None:
+            chat_history = []
+            
+        if not provider_name or provider_name not in self.providers:
+            full_response = f"Error: Model '{model_constant}' or its provider '{provider_name}' not configured."
+            chat_history.append([message, full_response])
+            yield chat_history
+            return
+
+        provider = self.providers[provider_name]
+        
+        yield from provider.get_response(model_id, message, chat_history, system_prompt, temperature)
+
+    def generate_code(self, system_prompt, user_prompt, code_type, model_choice):
+        """
+        Generates code using the specified model.
+        """
+        model_constant = next((k for k, v in CHAT_MODEL_SPECS.items() if v["display_name"] == model_choice), None)
+        if not model_constant:
+             # Fallback if display name not found, maybe model_choice is the constant itself
+             model_constant = model_choice if model_choice in CHAT_MODEL_SPECS else "LING_1T"
+
+
+        model_spec = self.config.get(model_constant, {})
+        provider_name = model_spec.get("provider")
+        model_id = model_spec.get("model_id")
+
+        if not provider_name or provider_name not in self.providers:
+            yield f"Error: Model '{model_constant}' or its provider '{provider_name}' not configured."
+            return
+
+        provider = self.providers[provider_name]
+        yield from provider.get_code_response(model_id, system_prompt, user_prompt)

recommand_config.py

@@ -0,0 +1,53 @@
+# -*- coding: utf-8 -*-
+
+from config import LING_1T, LING_FLASH_2_0, RING_1T, RING_FLASH_2_0, LING_MINI_2_0, RING_MINI_2_0, get_model_display_name
+
+"""
+This file contains the recommended initial inputs for the chat tab.
+Each item in the `RECOMMENDED_INPUTS` list is a dictionary that represents a preset scenario.
+"""
+
+RECOMMENDED_INPUTS = [
+    {
+        "task": "创意写作",
+        "model": get_model_display_name(LING_1T),
+        "system_prompt": "你是一位才华横溢的作家，擅长创作富有想象力的故事。",
+        "user_message": "写一个关于一只会说话的猫和它的机器人朋友的短篇故事。",
+        "temperature": 0.8,
+    },
+    {
+        "task": "代码生成",
+        "model": get_model_display_name(RING_1T),
+        "system_prompt": "你是一个精通多种编程语言的 AI 编程助手。",
+        "user_message": "用 Python 写一个函数，计算一个列表中的斐波那契数列。",
+        "temperature": 0.2,
+    },
+    {
+        "task": "邮件撰写",
+        "model": get_model_display_name(LING_FLASH_2_0),
+        "system_prompt": "你是一位专业的商务助理，擅长撰写清晰、简洁的商务邮件。",
+        "user_message": "帮我写一封邮件，向我的团队成员宣布我们下周五下午将举行一个项目启动会议。",
+        "temperature": 0.7,
+    },
+    {
+        "task": "学习计划",
+        "model": get_model_display_name(LING_MINI_2_0),
+        "system_prompt": "你是一位经验丰富的学习导师，能够为用户量身定制学习计划。",
+        "user_message": "我想学习弹吉他，请为我制定一个为期一个月的初学者入门计划。",
+        "temperature": 0.6,
+    },
+    {
+        "task": "角色扮演",
+        "model": get_model_display_name(RING_FLASH_2_0),
+        "system_prompt": "你现在是莎士比亚，请用他的风格和语言来回答问题。",
+        "user_message": "生存还是毁灭，这是一个值得考虑的问题。",
+        "temperature": 0.9,
+    },
+    {
+        "task": "技术问答",
+        "model": get_model_display_name(RING_MINI_2_0),
+        "system_prompt": "你是一位资深的软件工程师，精通各种技术栈。",
+        "user_message": "请解释一下什么是“容器化”，以及它与“虚拟化”有什么区别？",
+        "temperature": 0.4,
+    }
+]

requirements.txt

@@ -0,0 +1,5 @@
+gradio==5.49.1
+python-dotenv
+httpx
+# transformers
+# torch

static/app.html

@@ -0,0 +1,276 @@
+<script>
+(function () {
+
+    console.info("Space App JS executing...");
+
+    // --- Logger utility (structured, levelled, timestamped) ---
+    const SpaceApp = {
+
+        hasBooted: false,
+        fnUnloadLastTab: null,
+
+        toastInfo: function(...args) {
+            // use toastify
+            window.Toastify({
+                text: args.join(' '),
+                duration: 3000,
+                gravity: "top",
+                position: "right",
+                backgroundColor: "green",
+            }).showToast();
+            console.info("TOAST_INFO", ...args);
+        },
+
+        toastError: function(...args) {
+            window.Toastify({
+                text: args.join(' '),
+                duration: 5000,
+                gravity: "top",
+                position: "right",
+                backgroundColor: "red",
+            }).showToast();
+            console.error("TOAST_ERROR", ...args);
+        },
+
+        unloadLastTab: function() {
+            if (this.fnUnloadLastTab) {
+                this.fnUnloadLastTab();
+                this.fnUnloadLastTab = null;
+            }
+        },
+
+        TextGeneratorTab: (function () {
+            return {
+                init: function () {
+                    console.info("TextGeneratorTab initialized.");
+                },
+                toggle: function () {
+                    // Placeholder for future functionality
+                    SpaceApp.toastInfo("TextGeneratorTab toggled.");
+                    SpaceApp.unloadLastTab();
+                }
+            };
+        })(),
+
+        WebGeneratorTab: (function () {
+            return {
+                init: function () {
+                    console.info("WebGeneratorTab initialized.");
+                },
+                toggle: function () {
+                    // Placeholder for future functionality
+                    SpaceApp.toastInfo("WebGeneratorTab toggled.");
+                    SpaceApp.unloadLastTab();
+                }
+            };
+        })(),
+
+        WritingAssistantTab: (function () {
+            return {
+                init: function () {
+                    console.info("WritingAssistantTab initialized.");
+                },
+                toggle: function () {
+                    // Placeholder for future functionality
+                    SpaceApp.toastInfo("WritingAssistantTab toggled.");
+                    SpaceApp.unloadLastTab();
+
+                    // 找到 id = 'writing-editor' 的元素，设置操作快捷键。
+                    // Tab              - 'btn-action-accept-flow' 按钮点击
+                    // Shift + Tab      - 'btn-action-change-flow' 按钮点击
+                    // Cmd/Ctrl + Enter - 'btn-action-create-paragraph' 按钮点击
+                    // Shift + Enter    - 'btn-action-change-paragraph' 按钮点击
+                    const editor = document.getElementById('writing-editor');
+                    if (editor) {
+                        // 如果已经设置过监听器，就不重复设置
+                        if (editor.getAttribute('data-listener-set') === 'true') {
+                            console.info("Writing Assistant Editor already has listeners set.");
+                            return;
+                        }
+
+                        const idToEventFilterList = [
+                            ['btn-action-change-flow', (e) => e.shiftKey && e.key === 'Tab'],
+                            ['btn-action-accept-flow', (e) => !e.shiftKey && e.key === 'Tab'],
+                            ['btn-action-change-paragraph', (e) => e.shiftKey && e.key === 'Enter'],
+                            ['btn-action-create-paragraph', (e) => (e.metaKey || e.ctrlKey) && e.key === 'Enter'],
+                        ]
+                        editor.addEventListener('keydown', (e) => {
+                            for (const [buttonId, filterFn] of idToEventFilterList) {
+                                if (filterFn(e)) {
+                                    e.preventDefault();
+                                    const button = document.getElementById(buttonId);
+                                    if (button) {
+                                        SpaceApp.toastInfo(`Writing Assistant: Triggered action for ${buttonId}`);
+                                        button.click();
+                                    } else {
+                                        SpaceApp.toastError(`Writing Assistant: Button with id ${buttonId} not found.`);
+                                    }
+                                    break;  // Only trigger one action per keydown
+                                }
+                            }
+                        });
+
+                        // 对已经设置过监听器的 editor，不要重复设置
+                        editor.setAttribute('data-listener-set', 'true');
+                    }
+                }
+            };
+        })(),
+
+        registerEventListeners: function() {
+            const listeners = {
+                'tabSelect.chat': () => SpaceApp.TextGeneratorTab.toggle(),
+                'tabSelect.code': () => SpaceApp.WebGeneratorTab.toggle(),
+                'tabSelect.writing': () => SpaceApp.WritingAssistantTab.toggle(),
+            };
+            for (const [event, handler] of Object.entries(listeners)) {
+                window.addEventListener(event, handler);
+                console.info(`Registered event listener for ${event}`);
+            }
+
+            // type_filter, handler
+            // Listen for messages {type: string, payload: object}
+            const messages = {
+                'iframeError': (data) => {
+                    // 1. Show visual toast
+                    SpaceApp.toastError("Iframe Error Detected:", JSON.stringify(data));
+                    
+                    // 2. Propagate to Backend via Gradio
+                    const jsErrorChannel = document.querySelector('.js_error_channel textarea');
+                    if (jsErrorChannel) {
+                        // Format as string for backend
+                        const errorMessage = data.message || JSON.stringify(data);
+                        const timestamp = new Date().toLocaleTimeString();
+                        jsErrorChannel.value = `[${timestamp}] ${errorMessage}\nStack: ${data.stack || 'N/A'}`;
+                        jsErrorChannel.dispatchEvent(new Event('input', { bubbles: true }));
+                    } else {
+                        console.warn("Gradio channel '.js_error_channel' not found. Backend logging skipped.");
+                    }
+                },
+            }
+            window.addEventListener('message', (event) => {
+                const {type, payload} = event.data || {};
+                if (type && messages[type]) {
+                    messages[type](payload);
+                }
+            });
+
+        },
+
+    };
+
+    // Expose bootstrap globally so external scripts can call it after page load
+    window.bootApp = function () {
+        if (SpaceApp.hasBooted) {
+            console.warn("Space App has already booted. Ignoring duplicate boot call.");
+            return;
+        }
+        SpaceApp.hasBooted = true;
+        SpaceApp.toastInfo("Booting Space App...");
+        SpaceApp.registerEventListeners();
+        SpaceApp.TextGeneratorTab.init();
+        SpaceApp.WebGeneratorTab.init();
+        SpaceApp.WritingAssistantTab.init();
+        SpaceApp.toastInfo("Space App booted successfully.");
+    };
+
+    window.SpaceApp = SpaceApp;
+
+    console.info("Space App JS execution completed.");
+
+})();
+</script>
+<script>
+    // 注册一个 appStart 事件监听器，在 Gradio app 启动时调用 bootApp
+    window.addEventListener('appStart', function () {
+        console.info("Gradio appStart event detected. Booting Space App...");
+        if (typeof window.bootApp === "function") {
+            window.bootApp();
+        } else {
+            console.error("bootApp function is not defined.");
+        }
+    });
+</script>
+<script>
+    (function() {
+
+        const ErrorPoller = {
+            lastErrorMessage: '',
+            startPolling: () => {
+
+            },
+            stopPolling: () => {
+
+            }
+        }
+
+        console.info('Iframe Error Poller Initialized');
+        let lastErrorMessage = '';
+
+        // Function to start polling for errors in the iframe
+        function startPolling() {
+
+            console.info('Starting to poll iframe for errors...');
+
+            setInterval(() => {
+                // Re-select the iframe on every interval tick because Gradio replaces it.
+                const previewIframe = document.querySelector('iframe[srcdoc]');
+                if (!previewIframe) return;
+
+                try {
+                    const iframeDoc = previewIframe.contentWindow.document;
+                    const errorContainer = iframeDoc.querySelector('#global-error');
+
+                    const jsErrorChannel = document.querySelector('.js_error_channel textarea');
+                    if (!jsErrorChannel) {
+                        console.error("Gradio channel '.js_error_channel' not found.");
+                        return;
+                    }
+
+                    if (errorContainer && errorContainer.style.display !== 'none') {
+                        const currentErrorMessage = errorContainer.innerText;
+
+                        // If the error message is new, send it to the backend
+                        if (currentErrorMessage && currentErrorMessage !== lastErrorMessage) {
+                            lastErrorMessage = currentErrorMessage;
+
+                            // Set the value on the hidden Gradio textbox
+                            jsErrorChannel.value = currentErrorMessage;
+
+                            // Dispatch an 'input' event to notify Gradio of the change
+                            jsErrorChannel.dispatchEvent(new Event('input', { bubbles: true }));
+                        }
+                    } else {
+                        // If the error container is not visible or doesn't exist, and there was a previous error, clear it.
+                        if (lastErrorMessage) {
+                            lastErrorMessage = '';
+                            jsErrorChannel.value = '';
+                            jsErrorChannel.dispatchEvent(new Event('input', { bubbles: true }));
+                        }
+                    }
+                } catch (e) {
+                    // This can happen due to cross-origin restrictions if the iframe src changes.
+                    // We can ignore it for srcdoc iframes.
+                }
+            }, 1000);
+
+        }
+
+        // 在页面加载之后设置
+        document.addEventListener('readystatechange', (event) => {
+            if (document.readyState === 'complete') {
+                setTimeout(startPolling, 500);
+            }
+        });
+
+        console.info('Iframe Error Poller Script Loaded');
+    })();
+</script>
+<script>
+// 我们当前存活在一个 iframe 里面。观察 document, window, window.parent。
+
+console.log('document is', document);
+console.log('window is ', window);
+console.log('window parent is ', window.parent);
+
+</script>

static/catch-error.js

@@ -0,0 +1,157 @@
+(function() {
+
+    // Console 日志
+    console.info('全局异常捕获脚本已加载，开始监听错误...');
+
+    // 1. 初始化错误显示容器 (保留原有的 Visual Toast 功能)
+    const errorContainer = document.createElement('div');
+    errorContainer.id = 'global-error';
+    // 设置样式：全屏、黑色背景、红色文字、置顶
+    errorContainer.style.cssText = `
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.9);
+        color: #ff5555;
+        z-index: 999999;
+        overflow-y: auto;
+        padding: 20px;
+        font-family: 'Consolas', 'Monaco', monospace;
+        font-size: 14px;
+        white-space: pre-wrap;
+        display: none; /* 默认隐藏，有错误时显示 */
+        box-sizing: border-box;
+    `;
+    
+    // 添加标题和关闭提示
+    const header = document.createElement('div');
+    header.style.borderBottom = '1px solid #555';
+    header.style.paddingBottom = '10px';
+    header.style.marginBottom = '10px';
+    header.innerHTML = '<h2 style="margin:0; color:#fff;">🚨 全局异常捕获监控</h2><small style="color:#aaa">点击页面任意处可临时关闭蒙层</small>';
+    errorContainer.appendChild(header);
+    
+    // 点击关闭功能
+    errorContainer.addEventListener('click', () => {
+        errorContainer.style.display = 'none';
+    });
+
+    // 确保 DOM 加载后插入 body，或者如果 body 存在直接插入
+    if (document.body) {
+        document.body.appendChild(errorContainer);
+    } else {
+        window.addEventListener('DOMContentLoaded', () => document.body.appendChild(errorContainer));
+    }
+
+    // 2. 核心处理函数：既显示在屏幕上，也发送给父窗口
+    function handleError(type, details) {
+        // A. 显示在屏幕上 (Visual Toast)
+        logErrorToScreen(type, details);
+
+        // B. 发送给父窗口 (iframe 通信)
+        postErrorToParent(type, details);
+    }
+
+    // 显示在屏幕上的具体实现
+    function logErrorToScreen(type, details) {
+        // 显示蒙层
+        errorContainer.style.display = 'block';
+
+        const reportItem = document.createElement('div');
+        reportItem.style.marginBottom = '20px';
+        reportItem.style.borderBottom = '1px dashed #444';
+        reportItem.style.paddingBottom = '10px';
+
+        // 格式化时间
+        const time = new Date().toLocaleTimeString();
+        
+        // 构建 HTML 内容
+        reportItem.innerHTML = `
+            <div style="color: #fff; font-weight: bold;">[${time}] <span style="background:#b00; padding:2px 5px; border-radius:3px;">${type}</span></div>
+            <div style="margin-top:5px; color: #ffaaaa;">${details.message || '无错误信息'}</div>
+            ${details.filename ? `<div style="color: #888;">Location: ${details.filename}:${details.lineno}:${details.colno}</div>` : ''}
+            ${details.stack ? `<pre style="color: #aaa; background: #111; padding: 10px; overflow-x: auto; margin-top:5px;">${details.stack}</pre>` : ''}
+            ${details.selector ? `<div style="color: #888;">Element: &lt;${details.selector}&gt; (src: ${details.src})</div>` : ''}
+        `;
+        
+        // 插入到标题之后，内容的顶部
+        header.after(reportItem);
+    }
+
+    // 发送给父窗口的具体实现
+    function postErrorToParent(type, details) {
+        if (window.parent && window.parent !== window) {
+            const msg = {
+                type: 'iframeError',
+                payload: {
+                    errorType: type,
+                    message: details.message || 'Unknown Error',
+                    stack: details.stack || '',
+                    filename: details.filename || '',
+                    lineno: details.lineno || 0,
+                    colno: details.colno || 0,
+                    selector: details.selector || '',
+                    src: details.src || '',
+                    href: window.location.href,
+                    timestamp: new Date().toISOString()
+                }
+            };
+            
+            // 使用 '*' 允许跨域传递，或者根据需要指定特定 origin
+            window.parent.postMessage(msg, '*');
+            console.info('[CatchError] Posted error to parent:', payload);
+        }
+    }
+
+    // 3. 监听器 A: 捕获 JS 运行时错误 + 资源加载错误 (img/script)
+    // 注意：第三个参数 true (useCapture) 是捕获资源错误的关键
+    window.addEventListener('error', (event) => {
+        // 情况 1: 资源加载错误 (img, script, link)
+        // 资源错误没有冒泡，但在捕获阶段可以拦截，且 target 是 DOM 元素
+        if (event.target && (event.target instanceof HTMLElement)) {
+            const target = event.target;
+            handleError('Resource Error', {
+                message: `资源加载失败 (${target.tagName})`,
+                selector: target.tagName.toLowerCase(),
+                src: target.src || target.href || 'unknown source',
+                stack: 'N/A (Network Error)'
+            });
+        } 
+        // 情况 2: 普通 JS 运行时错误
+        else {
+            handleError('Runtime Error', {
+                message: event.message,
+                filename: event.filename,
+                lineno: event.lineno,
+                colno: event.colno,
+                stack: event.error ? event.error.stack : '无堆栈信息'
+            });
+        }
+    }, true); // useCapture = true
+
+    // 4. 监听器 B: 捕获未处理的 Promise Rejection
+    window.addEventListener('unhandledrejection', (event) => {
+        // 提取错误原因
+        let reason = event.reason;
+        let stack = '无堆栈信息';
+        let message = '';
+
+        if (reason instanceof Error) {
+            message = reason.message;
+            stack = reason.stack;
+        } else {
+            // 如果 reject 的不是 Error 对象（例如 reject("foo")）
+            message = typeof reason === 'object' ? JSON.stringify(reason) : String(reason);
+        }
+
+        handleError('Unhandled Promise', {
+            message: `Promise 被 Reject 且未被 Catch: ${message}`,
+            stack: stack
+        });
+    });
+
+    console.info('全局异常捕获脚本已初始化完成 (Visual + PostMessage)。');
+
+})();

static/toastify.html

@@ -0,0 +1,535 @@
+<style>
+    /*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */
+
+    .toastify {
+        padding: 12px 20px;
+        color: #ffffff;
+        display: inline-block;
+        box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3);
+        background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5);
+        background: linear-gradient(135deg, #73a5ff, #5477f5);
+        position: fixed;
+        opacity: 0;
+        transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+        border-radius: 2px;
+        cursor: pointer;
+        text-decoration: none;
+        max-width: calc(50% - 20px);
+        z-index: 2147483647;
+    }
+
+    .toastify.on {
+        opacity: 1;
+    }
+
+    .toast-close {
+        background: transparent;
+        border: 0;
+        color: white;
+        cursor: pointer;
+        font-family: inherit;
+        font-size: 1em;
+        opacity: 0.4;
+        padding: 0 5px;
+    }
+
+    .toastify-right {
+        right: 15px;
+    }
+
+    .toastify-left {
+        left: 15px;
+    }
+
+    .toastify-top {
+        top: -150px;
+    }
+
+    .toastify-bottom {
+        bottom: -150px;
+    }
+
+    .toastify-rounded {
+        border-radius: 25px;
+    }
+
+    .toastify-avatar {
+        width: 1.5em;
+        height: 1.5em;
+        margin: -7px 5px;
+        border-radius: 2px;
+    }
+
+    .toastify-center {
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
+        max-width: fit-content;
+        max-width: -moz-fit-content;
+    }
+
+    @media only screen and (max-width: 360px) {
+        .toastify-right, .toastify-left {
+            margin-left: auto;
+            margin-right: auto;
+            left: 0;
+            right: 0;
+            max-width: fit-content;
+        }
+    }
+</style>
+
+<script>
+    /*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */
+    (function(root, factory) {
+        if (typeof module === "object" && module.exports) {
+            module.exports = factory();
+        } else {
+            root.Toastify = factory();
+        }
+    })(this, function(global) {
+        // Object initialization
+        var Toastify = function(options) {
+                // Returning a new init object
+                return new Toastify.lib.init(options);
+            },
+            // Library version
+            version = "1.12.0";
+
+        // Set the default global options
+        Toastify.defaults = {
+            oldestFirst: true,
+            text: "Toastify is awesome!",
+            node: undefined,
+            duration: 3000,
+            selector: undefined,
+            callback: function () {
+            },
+            destination: undefined,
+            newWindow: false,
+            close: false,
+            gravity: "toastify-top",
+            positionLeft: false,
+            position: '',
+            backgroundColor: '',
+            avatar: "",
+            className: "",
+            stopOnFocus: true,
+            onClick: function () {
+            },
+            offset: {x: 0, y: 0},
+            escapeMarkup: true,
+            ariaLive: 'polite',
+            style: {background: ''}
+        };
+
+        // Defining the prototype of the object
+        Toastify.lib = Toastify.prototype = {
+            toastify: version,
+
+            constructor: Toastify,
+
+            // Initializing the object with required parameters
+            init: function(options) {
+                // Verifying and validating the input object
+                if (!options) {
+                    options = {};
+                }
+
+                // Creating the options object
+                this.options = {};
+
+                this.toastElement = null;
+
+                // Validating the options
+                this.options.text = options.text || Toastify.defaults.text; // Display message
+                this.options.node = options.node || Toastify.defaults.node;  // Display content as node
+                this.options.duration = options.duration === 0 ? 0 : options.duration || Toastify.defaults.duration; // Display duration
+                this.options.selector = options.selector || Toastify.defaults.selector; // Parent selector
+                this.options.callback = options.callback || Toastify.defaults.callback; // Callback after display
+                this.options.destination = options.destination || Toastify.defaults.destination; // On-click destination
+                this.options.newWindow = options.newWindow || Toastify.defaults.newWindow; // Open destination in new window
+                this.options.close = options.close || Toastify.defaults.close; // Show toast close icon
+                this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : Toastify.defaults.gravity; // toast position - top or bottom
+                this.options.positionLeft = options.positionLeft || Toastify.defaults.positionLeft; // toast position - left or right
+                this.options.position = options.position || Toastify.defaults.position; // toast position - left or right
+                this.options.backgroundColor = options.backgroundColor || Toastify.defaults.backgroundColor; // toast background color
+                this.options.avatar = options.avatar || Toastify.defaults.avatar; // img element src - url or a path
+                this.options.className = options.className || Toastify.defaults.className; // additional class names for the toast
+                this.options.stopOnFocus = options.stopOnFocus === undefined ? Toastify.defaults.stopOnFocus : options.stopOnFocus; // stop timeout on focus
+                this.options.onClick = options.onClick || Toastify.defaults.onClick; // Callback after click
+                this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
+                this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
+                this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
+                this.options.style = options.style || Toastify.defaults.style;
+                if(options.backgroundColor) {
+                    this.options.style.background = options.backgroundColor;
+                }
+
+                // Returning the current object for chaining functions
+                return this;
+            },
+
+            // Building the DOM element
+            buildToast: function() {
+                // Validating if the options are defined
+                if (!this.options) {
+                    throw "Toastify is not initialized";
+                }
+
+                // Creating the DOM object
+                var divElement = document.createElement("div");
+                divElement.className = "toastify on " + this.options.className;
+
+                // Positioning toast to left or right or center
+                if (!!this.options.position) {
+                    divElement.className += " toastify-" + this.options.position;
+                } else {
+                    // To be depreciated in further versions
+                    if (this.options.positionLeft === true) {
+                        divElement.className += " toastify-left";
+                        console.warn('Property `positionLeft` will be depreciated in further versions. Please use `position` instead.')
+                    } else {
+                        // Default position
+                        divElement.className += " toastify-right";
+                    }
+                }
+
+                // Assigning gravity of element
+                divElement.className += " " + this.options.gravity;
+
+                if (this.options.backgroundColor) {
+                    // This is being deprecated in favor of using the style HTML DOM property
+                    console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
+                }
+
+                // Loop through our style object and apply styles to divElement
+                for (var property in this.options.style) {
+                    divElement.style[property] = this.options.style[property];
+                }
+
+                // Announce the toast to screen readers
+                if (this.options.ariaLive) {
+                    divElement.setAttribute('aria-live', this.options.ariaLive)
+                }
+
+                // Adding the toast message/node
+                if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
+                    // If we have a valid node, we insert it
+                    divElement.appendChild(this.options.node)
+                } else {
+                    if (this.options.escapeMarkup) {
+                        divElement.innerText = this.options.text;
+                    } else {
+                        divElement.innerHTML = this.options.text;
+                    }
+
+                    if (this.options.avatar !== "") {
+                        var avatarElement = document.createElement("img");
+                        avatarElement.src = this.options.avatar;
+
+                        avatarElement.className = "toastify-avatar";
+
+                        if (this.options.position == "left" || this.options.positionLeft === true) {
+                            // Adding close icon on the left of content
+                            divElement.appendChild(avatarElement);
+                        } else {
+                            // Adding close icon on the right of content
+                            divElement.insertAdjacentElement("afterbegin", avatarElement);
+                        }
+                    }
+                }
+
+                // Adding a close icon to the toast
+                if (this.options.close === true) {
+                    // Create a span for close element
+                    var closeElement = document.createElement("button");
+                    closeElement.type = "button";
+                    closeElement.setAttribute("aria-label", "Close");
+                    closeElement.className = "toast-close";
+                    closeElement.innerHTML = "&#10006;";
+
+                    // Triggering the removal of toast from DOM on close click
+                    closeElement.addEventListener(
+                        "click",
+                        function(event) {
+                            event.stopPropagation();
+                            this.removeElement(this.toastElement);
+                            window.clearTimeout(this.toastElement.timeOutValue);
+                        }.bind(this)
+                    );
+
+                    //Calculating screen width
+                    var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+
+                    // Adding the close icon to the toast element
+                    // Display on the right if screen width is less than or equal to 360px
+                    if ((this.options.position == "left" || this.options.positionLeft === true) && width > 360) {
+                        // Adding close icon on the left of content
+                        divElement.insertAdjacentElement("afterbegin", closeElement);
+                    } else {
+                        // Adding close icon on the right of content
+                        divElement.appendChild(closeElement);
+                    }
+                }
+
+                // Clear timeout while toast is focused
+                if (this.options.stopOnFocus && this.options.duration > 0) {
+                    var self = this;
+                    // stop countdown
+                    divElement.addEventListener(
+                        "mouseover",
+                        function(event) {
+                            window.clearTimeout(divElement.timeOutValue);
+                        }
+                    )
+                    // add back the timeout
+                    divElement.addEventListener(
+                        "mouseleave",
+                        function() {
+                            divElement.timeOutValue = window.setTimeout(
+                                function() {
+                                    // Remove the toast from DOM
+                                    self.removeElement(divElement);
+                                },
+                                self.options.duration
+                            )
+                        }
+                    )
+                }
+
+                // Adding an on-click destination path
+                if (typeof this.options.destination !== "undefined") {
+                    divElement.addEventListener(
+                        "click",
+                        function(event) {
+                            event.stopPropagation();
+                            if (this.options.newWindow === true) {
+                                window.open(this.options.destination, "_blank");
+                            } else {
+                                window.location = this.options.destination;
+                            }
+                        }.bind(this)
+                    );
+                }
+
+                if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
+                    divElement.addEventListener(
+                        "click",
+                        function(event) {
+                            event.stopPropagation();
+                            this.options.onClick();
+                        }.bind(this)
+                    );
+                }
+
+                // Adding offset
+                if(typeof this.options.offset === "object") {
+
+                    var x = getAxisOffsetAValue("x", this.options);
+                    var y = getAxisOffsetAValue("y", this.options);
+
+                    var xOffset = this.options.position == "left" ? x : "-" + x;
+                    var yOffset = this.options.gravity == "toastify-top" ? y : "-" + y;
+
+                    divElement.style.transform = "translate(" + xOffset + "," + yOffset + ")";
+
+                }
+
+                // Returning the generated element
+                return divElement;
+            },
+
+            // Displaying the toast
+            showToast: function() {
+                // Creating the DOM object for the toast
+                this.toastElement = this.buildToast();
+
+                // Getting the root element to with the toast needs to be added
+                var rootElement;
+                if (typeof this.options.selector === "string") {
+                    rootElement = document.getElementById(this.options.selector);
+                } else if (this.options.selector instanceof HTMLElement || (typeof ShadowRoot !== 'undefined' && this.options.selector instanceof ShadowRoot)) {
+                    rootElement = this.options.selector;
+                } else {
+                    rootElement = document.body;
+                }
+
+                // Validating if root element is present in DOM
+                if (!rootElement) {
+                    throw "Root element is not defined";
+                }
+
+                // Adding the DOM element
+                var elementToInsert = Toastify.defaults.oldestFirst ? rootElement.firstChild : rootElement.lastChild;
+                rootElement.insertBefore(this.toastElement, elementToInsert);
+
+                // Repositioning the toasts in case multiple toasts are present
+                Toastify.reposition();
+
+                if (this.options.duration > 0) {
+                    this.toastElement.timeOutValue = window.setTimeout(
+                        function() {
+                            // Remove the toast from DOM
+                            this.removeElement(this.toastElement);
+                        }.bind(this),
+                        this.options.duration
+                    ); // Binding `this` for function invocation
+                }
+
+                // Supporting function chaining
+                return this;
+            },
+
+            hideToast: function() {
+                if (this.toastElement.timeOutValue) {
+                    clearTimeout(this.toastElement.timeOutValue);
+                }
+                this.removeElement(this.toastElement);
+            },
+
+            // Removing the element from the DOM
+            removeElement: function(toastElement) {
+                // Hiding the element
+                // toastElement.classList.remove("on");
+                toastElement.className = toastElement.className.replace(" on", "");
+
+                // Removing the element from DOM after transition end
+                window.setTimeout(
+                    function() {
+                        // remove options node if any
+                        if (this.options.node && this.options.node.parentNode) {
+                            this.options.node.parentNode.removeChild(this.options.node);
+                        }
+
+                        // Remove the element from the DOM, only when the parent node was not removed before.
+                        if (toastElement.parentNode) {
+                            toastElement.parentNode.removeChild(toastElement);
+                        }
+
+                        // Calling the callback function
+                        this.options.callback.call(toastElement);
+
+                        // Repositioning the toasts again
+                        Toastify.reposition();
+                    }.bind(this),
+                    400
+                ); // Binding `this` for function invocation
+            },
+        };
+
+        // Positioning the toasts on the DOM
+        Toastify.reposition = function() {
+
+            // Top margins with gravity
+            var topLeftOffsetSize = {
+                top: 15,
+                bottom: 15,
+            };
+            var topRightOffsetSize = {
+                top: 15,
+                bottom: 15,
+            };
+            var offsetSize = {
+                top: 15,
+                bottom: 15,
+            };
+
+            // Get all toast messages on the DOM
+            var allToasts = document.getElementsByClassName("toastify");
+
+            var classUsed;
+
+            // Modifying the position of each toast element
+            for (var i = 0; i < allToasts.length; i++) {
+                // Getting the applied gravity
+                if (containsClass(allToasts[i], "toastify-top") === true) {
+                    classUsed = "toastify-top";
+                } else {
+                    classUsed = "toastify-bottom";
+                }
+
+                var height = allToasts[i].offsetHeight;
+                classUsed = classUsed.substr(9, classUsed.length-1)
+                // Spacing between toasts
+                var offset = 15;
+
+                var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+
+                // Show toast in center if screen with less than or equal to 360px
+                if (width <= 360) {
+                    // Setting the position
+                    allToasts[i].style[classUsed] = offsetSize[classUsed] + "px";
+
+                    offsetSize[classUsed] += height + offset;
+                } else {
+                    if (containsClass(allToasts[i], "toastify-left") === true) {
+                        // Setting the position
+                        allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + "px";
+
+                        topLeftOffsetSize[classUsed] += height + offset;
+                    } else {
+                        // Setting the position
+                        allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + "px";
+
+                        topRightOffsetSize[classUsed] += height + offset;
+                    }
+                }
+            }
+
+            // Supporting function chaining
+            return this;
+        };
+
+        // Helper function to get offset.
+        function getAxisOffsetAValue(axis, options) {
+
+            if(options.offset[axis]) {
+                if(isNaN(options.offset[axis])) {
+                    return options.offset[axis];
+                }
+                else {
+                    return options.offset[axis] + 'px';
+                }
+            }
+
+            return '0px';
+
+        }
+
+        function containsClass(elem, yourClass) {
+            if (!elem || typeof yourClass !== "string") {
+                return false;
+            } else if (
+                elem.className &&
+                elem.className
+                    .trim()
+                    .split(/\s+/gi)
+                    .indexOf(yourClass) > -1
+            ) {
+                return true;
+            } else {
+                return false;
+            }
+        }
+
+        // Setting up the prototype for the init object
+        Toastify.lib.init.prototype = Toastify.lib;
+
+        // Returning the Toastify function to be assigned to the window object/module
+        return Toastify;
+    });
+</script>

tab_chat.py

@@ -0,0 +1,147 @@
+import gradio as gr
+import uuid
+from datetime import datetime
+import pandas as pd
+from model_handler import ModelHandler
+from config import CHAT_MODEL_SPECS, LING_1T
+from recommand_config import RECOMMENDED_INPUTS
+from ui_components.model_selector import create_model_selector
+
+def create_chat_tab():
+    model_handler = ModelHandler()
+
+    conversation_store = gr.BrowserState(default_value=[], storage_key="ling_conversation_history")
+    current_conversation_id = gr.BrowserState(default_value=None, storage_key="ling_current_conversation_id")
+
+    def get_history_df(history):
+        if not history:
+            return pd.DataFrame({'ID': [], 'Conversation': []})
+        df = pd.DataFrame(history)
+        return df[['id', 'title']].rename(columns={'id': 'ID', 'title': 'Conversation'})
+
+    def handle_new_chat(history):
+        conv_id = str(uuid.uuid4())
+        new_convo = {
+            "id": conv_id, "title": "New Conversation",
+            "messages": [], "timestamp": datetime.now().isoformat()
+        }
+        updated_history = [new_convo] + (history or [])
+        return (
+            conv_id,
+            updated_history,
+            [],
+            gr.update(value=get_history_df(updated_history))
+        )
+
+    def load_conversation_from_df(df: pd.DataFrame, evt: gr.SelectData, history):
+        if evt.index is None:
+            return None, []
+        selected_id = df.iloc[evt.index[0]]['ID']
+        for convo in history:
+            if convo["id"] == selected_id:
+                return selected_id, convo["messages"]
+        # Fallback to new chat if something goes wrong
+        return handle_new_chat(history)[0], handle_new_chat(history)[2]
+
+    with gr.Row(equal_height=False, elem_id="indicator-chat-tab"):
+        with gr.Column(scale=1):
+            new_chat_btn = gr.Button("➕ 新对话")
+            history_df = gr.DataFrame(
+                value=get_history_df(conversation_store.value),
+                headers=["ID", "对话记录"],
+                datatype=["str", "str"],
+                interactive=False,
+                visible=True,
+                column_widths=["0%", "99%"]
+            )
+
+        with gr.Column(scale=4):
+            chatbot = gr.Chatbot(height=500, type='messages')
+            with gr.Row():
+                textbox = gr.Textbox(placeholder="输入消息...", container=False, scale=7)
+                submit_btn = gr.Button("发送", scale=1)
+            
+            gr.Markdown("### 推荐对话")
+            recommended_dataset = gr.Dataset(
+                components=[gr.Textbox(visible=False)],
+                samples=[[item["task"]] for item in RECOMMENDED_INPUTS],
+                label="推荐场景", headers=["选择一个场景试试"],
+            )
+
+        with gr.Column(scale=1):
+            model_dropdown, model_description_markdown = create_model_selector(
+                model_specs=CHAT_MODEL_SPECS,
+                default_model_constant=LING_1T
+            )
+
+            system_prompt_textbox = gr.Textbox(label="系统提示词", lines=5, placeholder="输入系统提示词...")
+            temperature_slider = gr.Slider(minimum=0, maximum=1.0, value=0.7, step=0.1, label="温度参数")
+
+        # --- Event Handlers --- #
+        # The change handler is now encapsulated within create_model_selector
+        def on_select_recommendation(evt: gr.SelectData, history):
+            selected_task = evt.value[0]
+            item = next((i for i in RECOMMENDED_INPUTS if i["task"] == selected_task), None)
+            if not item: return gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()
+
+            new_id, new_history, new_messages, history_df_update = handle_new_chat(history)
+
+            return (
+                new_id, new_history,
+                gr.update(value=item["model"]),
+                gr.update(value=item["system_prompt"]),
+                gr.update(value=item["temperature"]),
+                gr.update(value=item["user_message"]),
+                history_df_update,
+                new_messages
+            )
+
+        recommended_dataset.select(on_select_recommendation, inputs=[conversation_store], outputs=[current_conversation_id, conversation_store, model_dropdown, system_prompt_textbox, temperature_slider, textbox, history_df, chatbot], show_progress="none")
+
+        def chat_stream(conv_id, history, model_display_name, message, chat_history, system_prompt, temperature):
+            if not message:
+                yield chat_history
+                return
+            model_constant = next((k for k, v in CHAT_MODEL_SPECS.items() if v["display_name"] == model_display_name), LING_1T)
+            response_generator = model_handler.get_response(model_constant, message, chat_history, system_prompt, temperature)
+            for history_update in response_generator:
+                yield history_update
+
+        def on_chat_stream_complete(conv_id, history, final_chat_history):
+            current_convo = next((c for c in history if c["id"] == conv_id), None)
+            if not current_convo:
+                return history, gr.update()
+
+            if len(final_chat_history) > len(current_convo["messages"]) and current_convo["title"] == "New Conversation":
+                user_message = final_chat_history[-2]["content"] if len(final_chat_history) > 1 else final_chat_history[0]["content"]
+                current_convo["title"] = user_message[:50]
+
+            current_convo["messages"] = final_chat_history
+            current_convo["timestamp"] = datetime.now().isoformat()
+
+            history = sorted([c for c in history if c["id"] != conv_id] + [current_convo], key=lambda x: x["timestamp"], reverse=True)
+            return history, gr.update(value=get_history_df(history))
+
+        submit_btn.click(
+            chat_stream,
+            [current_conversation_id, conversation_store, model_dropdown, textbox, chatbot, system_prompt_textbox, temperature_slider],
+            [chatbot]
+        ).then(
+            on_chat_stream_complete,
+            [current_conversation_id, conversation_store, chatbot],
+            [conversation_store, history_df]
+        )
+        textbox.submit(
+            chat_stream,
+            [current_conversation_id, conversation_store, model_dropdown, textbox, chatbot, system_prompt_textbox, temperature_slider],
+            [chatbot]
+        ).then(
+            on_chat_stream_complete,
+            [current_conversation_id, conversation_store, chatbot],
+            [conversation_store, history_df]
+        )
+
+        new_chat_btn.click(handle_new_chat, inputs=[conversation_store], outputs=[current_conversation_id, conversation_store, chatbot, history_df])
+        history_df.select(load_conversation_from_df, inputs=[history_df, conversation_store], outputs=[current_conversation_id, chatbot])
+
+    return conversation_store, current_conversation_id, history_df, chatbot

tab_code.py

@@ -0,0 +1,241 @@
+import gradio as gr
+import time
+import logging
+from model_handler import ModelHandler
+from config import CHAT_MODEL_SPECS, LING_1T, CODE_FRAMEWORK_SPECS, STATIC_PAGE
+from ui_components.model_selector import create_model_selector
+from ui_components.code_framework_selector import create_code_framework_selector
+from tab_code_prompts.html_system_prompt import get_html_system_prompt
+
+# Configure logging
+logger = logging.getLogger(__name__)
+
+# Read the content of the JavaScript file for error catching
+try:
+    with open("static/catch-error.js", "r", encoding="utf-8") as f:
+        CATCH_ERROR_JS_SCRIPT = f.read()
+except FileNotFoundError:
+    logger.error("Error: static/catch-error.js not found. The error catching overlay will not work.")
+    CATCH_ERROR_JS_SCRIPT = ""
+
+
+def get_spinner_html():
+    """Return HTML with a CSS spinner animation"""
+    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, chatbot_history):
+    """Generate code and provide a preview, updating a log stream chatbot."""
+    logger.info(f"--- [Code Generation] Start ---")
+    logger.info(f"Code Type: {code_type}, Model: {model_choice}, Prompt: '{user_prompt}'")
+
+    if not user_prompt:
+        chatbot_history.append({"role": "assistant", "content": "🚨 **错误**: 请输入提示词。"})
+        yield "", gr.update(value="<p>预览将在此处显示。</p>"), chatbot_history, gr.update()
+        return
+
+    chatbot_history.append({"role": "assistant", "content": "⏳ 开始生成代码..."})
+    yield "", gr.HTML(get_spinner_html()), chatbot_history, gr.update()
+
+    if user_prompt == "create an error":
+        error_code = f"""<h1>This will create an error</h1><script>{CATCH_ERROR_JS_SCRIPT}</script><script>nonExistentFunction();</script>""";
+        escaped_code = error_code.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>
+        """
+        chatbot_history.append({"role": "assistant", "content": "✅ **成功**: 已生成一个用于测试的错误页面。"})
+        yield error_code, gr.update(value=final_preview_html), chatbot_history, gr.Tabs(selected=0)
+        return
+
+    start_time = time.time()
+    model_handler = ModelHandler()
+
+    if code_type == "静态页面":
+        system_prompt = get_html_system_prompt()
+        full_code_with_think = ""
+        full_code_for_preview = ""
+        buffer = ""
+        is_thinking = False
+
+        for code_chunk in model_handler.generate_code(system_prompt, user_prompt, code_type, model_choice):
+            full_code_with_think += code_chunk
+            buffer += code_chunk
+            
+            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
+            
+            elapsed_time = time.time() - start_time
+            generated_length = len(full_code_with_think)
+            speed = generated_length / elapsed_time if elapsed_time > 0 else 0
+            
+            log_message = f"""
+            **⏳ 正在生成中...**
+            - **时间:** {elapsed_time:.2f}s
+            - **长度:** {generated_length} chars
+            - **速度:** {speed:.2f} char/s
+            """
+            
+            if len(chatbot_history) > 0 and "正在生成中" in chatbot_history[-1]["content"]:
+                chatbot_history[-1] = {"role": "assistant", "content": log_message}
+            else:
+                chatbot_history.append({"role": "assistant", "content": log_message})
+
+            yield full_code_with_think, gr.update(), chatbot_history, gr.update()
+        
+        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>
+        """
+        chatbot_history.append({"role": "assistant", "content": "✅ **成功**: 代码生成完成！"})
+        yield full_code_with_think, gr.HTML(final_preview_html), chatbot_history, gr.Tabs(selected=0)
+        logger.info("Static page streaming finished.")
+
+def refresh_preview(code_type, current_code, chatbot_history):
+    """Refresh the preview and add a log entry."""
+    logger.info(f"--- [Manual Refresh] Start ---")
+    logger.info(f"Code Type: {code_type}")
+
+    if code_type == "静态页面":
+        escaped_code = current_code.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>
+        """
+        chatbot_history.append({"role": "assistant", "content": "🔄 **状态**: 预览已手动刷新。"})
+        logger.info("Refreshed static page preview.")
+        return gr.HTML(final_preview_html), chatbot_history
+
+    chatbot_history.append({"role": "assistant", "content": "⚠️ **警告**: 未知的代码类型，无法刷新。"})
+    return gr.update(), chatbot_history
+
+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 log_js_error(error_text, chatbot_history):
+    """Appends a JavaScript error received from the frontend to the log chatbot."""
+    if not error_text:
+        return chatbot_history
+        
+    formatted_error = f"🚨 **在预览中发现运行时异常!**\n```\n{error_text}\n```"
+    
+    # Check if the last message is the same error to prevent flooding
+    if chatbot_history and chatbot_history[-1]["content"] == formatted_error:
+        return chatbot_history
+
+    chatbot_history.append({"role": "assistant", "content": formatted_error})
+    return chatbot_history
+
+def create_code_tab():
+    fullscreen_state = gr.State(False)
+
+    html_examples = [
+        "Write a hello world alert",
+        "Create a Canvas animation of continuous colorful fireworks blooming on a black background.",
+        "Generate a Canvas special effect with iridescent light streams.",
+        "create an error"
+    ]
+    
+    with gr.Row(elem_id="indicator-code-tab"):
+        with gr.Column(scale=1) as left_panel:
+            with gr.Column(scale=1): # Settings Panel
+                code_framework_dropdown = create_code_framework_selector(
+                    framework_specs=CODE_FRAMEWORK_SPECS,
+                    default_framework_constant=STATIC_PAGE
+                )
+                model_choice_dropdown, model_description_markdown = create_model_selector(
+                    model_specs=CHAT_MODEL_SPECS,
+                    default_model_constant=LING_1T
+                )
+                prompt_input = gr.Textbox(lines=5, placeholder="例如：创建一个带标题和按钮的简单页面", label="提示词")
+                with gr.Column():
+                    gr.Examples(examples=html_examples, inputs=prompt_input, label="✨ 试试这些酷炫的例子吧")
+                generate_button = gr.Button("生成代码", variant="primary")
+
+        with gr.Column(scale=4):
+            with gr.Tabs(elem_id="result_tabs") as result_tabs:
+                with gr.TabItem("实时预览", id=0):
+                    with gr.Row():
+                        gr.Markdown("### 实时预览")
+                        fullscreen_button = gr.Button("全屏预览", scale=0)
+                    preview_output = gr.HTML(value="<p>预览将在此处显示。</p>")
+                with gr.TabItem("生成的源代码", id=1):
+                    gr.Markdown("### 生成的源代码")
+                    code_output = gr.Code(language="html", label="生成的代码", interactive=True)
+                    refresh_button = gr.Button("刷新预览")
+
+        with gr.Column(scale=1):
+            log_chatbot = gr.Chatbot(label="生成日志", height=300, type="messages")
+
+            js_error_channel = gr.Textbox(visible=True, elem_classes=["js_error_channel"], label="Debug Error Channel", interactive=False)
+
+    refresh_button.click(
+        fn=refresh_preview,
+        inputs=[code_framework_dropdown, code_output, log_chatbot],
+        outputs=[preview_output, log_chatbot]
+    )
+
+    generate_button.click(
+        fn=generate_code,
+        inputs=[code_framework_dropdown, model_choice_dropdown, prompt_input, log_chatbot],
+        outputs=[code_output, preview_output, log_chatbot, result_tabs]
+    )
+    
+    fullscreen_button.click(
+        fn=toggle_fullscreen,
+        inputs=[fullscreen_state],
+        outputs=[fullscreen_state, fullscreen_button, left_panel]
+    )
+
+    js_error_channel.change(
+        fn=log_js_error,
+        inputs=[js_error_channel, log_chatbot],
+        outputs=log_chatbot
+    )

tab_code_prompts/gradio_system_prompt.py

@@ -0,0 +1,9 @@
+def get_gradio_system_prompt():
+    """Returns the system prompt for generating Gradio applications."""
+    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.
+IMPORTANT: The main Gradio app instance MUST be assigned to a variable named `demo`.
+The script must end with the app launch command: `demo.launch()`.
+Do not include any explanations, just the raw Python code inside a ```python block.
+"""

tab_code_prompts/html_system_prompt.py

@@ -0,0 +1,7 @@
+def get_html_system_prompt():
+    """Returns the system prompt for generating static HTML pages."""
+    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.
+"""

tab_smart_writer.py

@@ -0,0 +1,262 @@
+import gradio as gr
+import time
+import random
+
+# --- Mock Data ---
+
+MOCK_STYLE = """风格：赛博朋克 / 黑色电影
+视角：第三人称限制视角（主角：凯）
+基调：阴郁、压抑、霓虹闪烁的高科技低生活
+核心规则：
+1. 强调感官描写，特别是光影和声音。
+2. 避免过多的心理独白，通过行动展现心理。
+"""
+
+MOCK_KNOWLEDGE_BASE = [
+    ["凯 (Kai)", "主角，前黑客，现在是义体医生。左臂是老式的军用义体。"],
+    ["夜之城 (Night City)", "故事发生的舞台，一座永夜的巨型都市，被企业掌控。"],
+    ["荒坂塔 (Arasaka Tower)", "市中心的最高建筑，象征着绝对的权力。"],
+    ["赛博精神病 (Cyberpsychosis)", "过度改装义体导致的解离性精神障碍。"],
+    ["网络监察 (NetWatch)", "负责维护网络安全的组织，被黑客们视为走狗。"]
+]
+
+MOCK_SHORT_TERM_OUTLINE = [
+    [True, "凯接到一个神秘电话，对方声称知道他失踪妹妹的下落。"],
+    [False, "凯前往'来生'酒吧与接头人见面。"],
+    [False, "在酒吧遇到旧识，引发一场关于过去的争执。"],
+    [False, "接头人出现，但似乎被跟踪了。"]
+]
+
+MOCK_LONG_TERM_OUTLINE = [
+    [False, "揭露夜之城背后的惊天阴谋。"],
+    [False, "凯找回妹妹，或者接受她已经改变的事实。"],
+    [False, "与荒坂公司的最终决战。"]
+]
+
+MOCK_INSPIRATIONS = [
+    "霓虹灯光在雨后的路面上破碎成无数光斑，凯拉紧了风衣的领口，义体手臂在寒风中隐隐作痛。来生酒吧的招牌在雾气中若隐若现，像是一只在黑暗中窥视的电子眼。",
+    "\"你来晚了。\"接头人的声音经过变声器处理，听起来像是指甲划过玻璃。他坐在阴影里，只有指尖的一点红光在闪烁——那是他正在抽的廉价合成烟。",
+    "突如其来的爆炸声震碎了酒吧的玻璃，人群尖叫着四散奔逃。凯本能地拔出了腰间的动能手枪，他的视觉系统瞬间切换到了战斗模式，周围的一切都变成了数据流。"
+]
+
+MOCK_FLOW_SUGGESTIONS = [
+    "他感觉到了...",
+    "空气中弥漫着...",
+    "那是他从未见过的...",
+    "就在这一瞬间..."
+]
+
+# --- Logic Functions ---
+
+def get_stats(text):
+    """Mock word count and read time."""
+    if not text:
+        return "0 Words | 0 mins"
+    words = len(text)
+    read_time = max(1, words // 500)
+    return f"{words} Words | ~{read_time} mins"
+
+def fetch_inspiration(prompt):
+    """Simulate fetching inspiration options based on user prompt."""
+    time.sleep(1)
+    
+    # Simple Mock Logic based on prompt keywords
+    if prompt and "打斗" in prompt:
+        opts = [
+            "凯侧身闪过那一记重拳，义体关节发出尖锐的摩擦声。他顺势抓住对方的手腕，电流顺着接触点瞬间爆发。",
+            "激光刃切开空气，留下一道灼热的残影。凯没有退缩，他的视觉系统已经计算出了对方唯一的破绽。",
+            "周围的空气仿佛凝固了，只剩下心跳声和能量枪充能的嗡嗡声。谁先动，谁就会死。"
+        ]
+    elif prompt and "风景" in prompt:
+        opts = [
+            "酸雨冲刷着生锈的金属外墙，流下一道道黑色的泪痕。远处的全息广告牌在雨雾中显得格外刺眼。",
+            "清晨的阳光穿透厚重的雾霾，无力地洒在贫民窟的屋顶上。这里没有希望，只有生存。",
+            "夜之城的地下就像是一个巨大的迷宫，管道交错，蒸汽弥漫，老鼠和瘾君子在阴影中通过眼神交流。"
+        ]
+    else:
+        opts = MOCK_INSPIRATIONS
+        
+    return gr.update(visible=True), opts[0], opts[1], opts[2]
+
+def apply_inspiration(current_text, inspiration_text):
+    """Append selected inspiration to the editor."""
+    if not current_text:
+        new_text = inspiration_text
+    else:
+        new_text = current_text + "\n\n" + inspiration_text
+    return new_text, gr.update(visible=False), "" # Clear prompt
+
+def dismiss_inspiration():
+    return gr.update(visible=False)
+
+def fetch_flow_suggestion(current_text):
+    """Simulate fetching a short continuation."""
+    # If text ends with newline, maybe don't suggest? Or suggest new paragraph start.
+    time.sleep(0.5)
+    return random.choice(MOCK_FLOW_SUGGESTIONS)
+
+def accept_flow_suggestion(current_text, suggestion):
+    if not suggestion or "等待输入" in suggestion:
+        return current_text
+    return current_text + suggestion
+
+def refresh_context(current_outline):
+    """Mock refreshing the outline context (auto-complete task or add new one)."""
+    new_outline = [row[:] for row in current_outline] 
+    
+    # Try to complete the first pending task
+    task_completed = False
+    for row in new_outline:
+        if not row[0]:
+            row[0] = True 
+            task_completed = True
+            break
+            
+    # If all done, or randomly, add a new event
+    if not task_completed or random.random() > 0.7:
+         new_outline.append([False, f"新的动态事件: 突发情况 #{random.randint(100, 999)}"])
+
+    return new_outline
+
+# --- UI Construction ---
+
+def create_smart_writer_tab():
+    # Hidden Buttons for JS triggers
+    btn_accept_flow_trigger = gr.Button(visible=False, elem_id="btn_accept_flow_trigger")
+    btn_refresh_context_trigger = gr.Button(visible=False, elem_id="btn_refresh_context_trigger")
+
+    with gr.Row(equal_height=False, elem_id="indicator-writing-tab"):
+        # --- Left Column: Entity Console ---
+        with gr.Column(scale=0, min_width=384) as left_panel:
+            gr.Markdown("### 🧠 核心实体控制台")
+            
+            with gr.Accordion("整体章程 (Style)", open=True):
+                style_input = gr.Textbox(
+                    label="整体章程", 
+                    lines=8, 
+                    value=MOCK_STYLE,
+                    interactive=True
+                )
+            
+            with gr.Accordion("知识库 (Knowledge Base)", open=True):
+                kb_input = gr.Dataframe(
+                    headers=["Term", "Description"],
+                    datatype=["str", "str"],
+                    value=MOCK_KNOWLEDGE_BASE,
+                    interactive=True,
+                    label="知识库",
+                    wrap=True
+                )
+                
+            with gr.Accordion("当前章节大纲 (Short-Term)", open=True):
+                short_outline_input = gr.Dataframe(
+                    headers=["Done", "Task"],
+                    datatype=["bool", "str"],
+                    value=MOCK_SHORT_TERM_OUTLINE,
+                    interactive=True,
+                    label="当前章节大纲",
+                    col_count=(2, "fixed"),
+                )
+
+            with gr.Accordion("故事总纲 (Long-Term)", open=False):
+                long_outline_input = gr.Dataframe(
+                    headers=["Done", "Task"],
+                    datatype=["bool", "str"],
+                    value=MOCK_LONG_TERM_OUTLINE,
+                    interactive=True,
+                    label="故事总纲",
+                    col_count=(2, "fixed"),
+                )
+
+        # --- Right Column: Writing Canvas ---
+        with gr.Column(scale=1) as right_panel:
+            # Toolbar
+            with gr.Row(elem_classes=["toolbar"]):
+                stats_display = gr.Markdown("0 Words | 0 mins")
+                inspiration_btn = gr.Button("✨ 灵感扩写 (Cmd+Enter)", size="sm", variant="primary")
+            
+            # 主要编辑器区域
+            editor = gr.Textbox(
+                label="沉浸写作画布", 
+                placeholder="开始你的创作...", 
+                lines=30, 
+                elem_classes=["writing-editor"],
+                elem_id="writing-editor",
+                show_label=False,
+            )
+
+            # Flow Suggestion
+            with gr.Row(variant="panel"):
+                flow_suggestion_display = gr.Textbox(
+                    label="AI 实时续写建议 (按 Tab 采纳)", 
+                    value="（等待输入...）", 
+                    interactive=False,
+                    scale=4,
+                    elem_classes=["flow-suggestion-box"]
+                )
+                accept_flow_btn = gr.Button("采纳", scale=1, elem_id='btn-action-accept-flow')
+                refresh_flow_btn = gr.Button("换一个", scale=1)
+
+            # Inspiration Modal
+            with gr.Group(visible=False) as inspiration_modal:
+                gr.Markdown("### 💡 灵感选项 (由 Ling 模型生成)")
+                
+                inspiration_prompt_input = gr.Textbox(
+                    label="设定脉络 (可选)",
+                    placeholder="例如：写一段激烈的打斗 / 描写赛博朋克夜景...",
+                    lines=1
+                )
+                refresh_inspiration_btn = gr.Button("生成选项")
+
+                with gr.Row():
+                    opt1_btn = gr.Button(MOCK_INSPIRATIONS[0], elem_classes=["inspiration-card"])
+                    opt2_btn = gr.Button(MOCK_INSPIRATIONS[1], elem_classes=["inspiration-card"])
+                    opt3_btn = gr.Button(MOCK_INSPIRATIONS[2], elem_classes=["inspiration-card"])
+                cancel_insp_btn = gr.Button("取消")
+
+    # --- Interactions ---
+
+    # 1. Stats
+    editor.change(fn=get_stats, inputs=editor, outputs=stats_display)
+
+    # 2. Inspiration Workflow
+    # Open Modal (reset prompt)
+    inspiration_btn.click(
+        fn=lambda: (gr.update(visible=True), ""),
+        outputs=[inspiration_modal, inspiration_prompt_input]
+    )
+    
+    # Generate Options based on Prompt
+    refresh_inspiration_btn.click(
+        fn=fetch_inspiration,
+        inputs=[inspiration_prompt_input],
+        outputs=[inspiration_modal, opt1_btn, opt2_btn, opt3_btn]
+    )
+
+    # Apply Option
+    for btn in [opt1_btn, opt2_btn, opt3_btn]:
+        btn.click(
+            fn=apply_inspiration,
+            inputs=[editor, btn],
+            outputs=[editor, inspiration_modal, inspiration_prompt_input]
+        )
+    
+    cancel_insp_btn.click(fn=dismiss_inspiration, outputs=inspiration_modal)
+
+    # 3. Flow Suggestion
+    editor.change(fn=fetch_flow_suggestion, inputs=editor, outputs=flow_suggestion_display)
+    refresh_flow_btn.click(fn=fetch_flow_suggestion, inputs=editor, outputs=flow_suggestion_display)
+    
+    # Accept Flow (Triggered by Button or Tab Key via JS)
+    accept_flow_fn_inputs = [editor, flow_suggestion_display]
+    accept_flow_fn_outputs = [editor]
+    
+    accept_flow_btn.click(fn=accept_flow_suggestion, inputs=accept_flow_fn_inputs, outputs=accept_flow_fn_outputs)
+    btn_accept_flow_trigger.click(fn=accept_flow_suggestion, inputs=accept_flow_fn_inputs, outputs=accept_flow_fn_outputs)
+
+    # 4. Context Refresh (Triggered by Enter Key via JS)
+    btn_refresh_context_trigger.click(
+        fn=refresh_context,
+        inputs=[short_outline_input],
+        outputs=[short_outline_input]
+    )

tab_test.py

@@ -0,0 +1,27 @@
+import time
+
+def run_model_handler_test():
+    """
+    Simulates a test for the ModelHandler's get_response method.
+    """
+    log = []
+    log.append("Running ModelHandler test...")
+    # Simulate some test logic
+    time.sleep(1)
+    log.append("ModelHandler test passed: Placeholder response received.")
+    print("\n".join(log)) # Also print to stdio
+    return "\n".join(log)
+
+def run_clear_chat_test():
+    """
+    Simulates a test for the clear_chat functionality.
+    """
+    log = []
+    log.append("Running clear_chat test...")
+    # Simulate some test logic
+    time.sleep(1)
+    log.append("clear_chat test passed: Chatbot and textbox cleared.")
+    print("\n".join(log)) # Also print to stdio
+    return "\n".join(log)
+
+# You can add more test functions here

ui_components/code_framework_selector.py

@@ -0,0 +1,24 @@
+import gradio as gr
+
+def create_code_framework_selector(framework_specs, default_framework_constant):
+    """
+    Creates a reusable Gradio code framework selector component.
+
+    Args:
+        framework_specs (dict): A dictionary containing the specifications for each framework.
+        default_framework_constant (str): The key for the default framework in the framework_specs dictionary.
+
+    Returns:
+        tuple: A tuple containing the framework dropdown and the framework description markdown components.
+    """
+    display_names = [d["display_name"] for d in framework_specs.values()]
+    default_display_name = framework_specs[default_framework_constant]["display_name"]
+
+    framework_dropdown = gr.Dropdown(
+        choices=display_names,
+        label="代码类型",
+        value=default_display_name,
+        interactive=True
+    )
+
+    return framework_dropdown

ui_components/model_selector.py

@@ -0,0 +1,40 @@
+import gradio as gr
+
+def create_model_selector(model_specs, default_model_constant):
+    """
+    Creates a reusable Gradio model selector component.
+
+    Args:
+        model_specs (dict): A dictionary containing the specifications for each model.
+        default_model_constant (str): The key for the default model in the model_specs dictionary.
+
+    Returns:
+        tuple: A tuple containing the model dropdown and the model description markdown components.
+    """
+    display_names = [d["display_name"] for d in model_specs.values()]
+    default_display_name = model_specs[default_model_constant]["display_name"]
+
+
+    model_dropdown = gr.Dropdown(
+        choices=display_names,
+        label="模型选择",
+        value=default_display_name,
+        interactive=True
+    )
+
+    def get_model_description(model_display_name):
+        for model_spec in model_specs.values():
+            if model_spec["display_name"] == model_display_name:
+                return model_spec["description"]
+        return ""
+
+    model_description_markdown = gr.Markdown(get_model_description(default_display_name),
+                                             container=True)
+
+    model_dropdown.change(
+        fn=get_model_description,
+        inputs=[model_dropdown],
+        outputs=[model_description_markdown]
+    )
+
+    return model_dropdown, model_description_markdown

utils.py

@@ -0,0 +1,9 @@
+import socket
+
+def find_free_port():
+    """
+    Finds a free port on the local machine.
+    """
+    with socket.socket(socket.AF_INET, socket.SOCK_STREAM) as s:
+        s.bind(("", 0))
+        return s.getsockname()[1]