docs/uncategorized/development_todo.md

# Ling & Ring Playground - Development TODO

## 任务: 实现代码生成 Tab (`tab_code.py`)

### 1. UI 构建
- [ ] 在 `tab_code.py` 中创建 `create_code_tab` 函数。
- [ ] 添加 `gr.Radio` 组件，提供 "静态页面" 和 "Gradio 应用" 选项。
- [ ] 添加 `gr.Textbox` 作为用户 Prompt 输入框。
- [ ] 添加 `gr.Button` 用于触发生成。
- [ ] 添加 `gr.Code` 组件用于显示生成的源代码。
- [ ] 添加 `gr.HTML` 组件用于实时预览。

### 2. 后端逻辑
- [ ] 为 "静态页面" 编写 System Prompt。
- [ ] 为 "Gradio 应用" 编写 System Prompt。
- [ ] 实现按钮点击事件的处理函数。
- [ ] **静态页面逻辑**:
    - [ ] 调用 Ring 模型生成 HTML。
    - [ ] 将返回的 HTML 字符串直接更新到 `gr.HTML` 组件。
- [ ] **Gradio 应用逻辑**:
    - [ ] 调用 Ring 模型生成 Python 代码。
    - [ ] 将代码保存到临时文件。
    - [ ] 使用 `subprocess` 在后台启动独立的 Gradio 应用。
    - [ ] 捕获子进程输出，解析出本地 URL。
    - [ ] 将 URL 加载到 `gr.HTML` 的 `<iframe>` 中。
    - [ ] 实现子进程管理（启动/终止）。

### 3. 应用整合
- [ ] 在 `app.py` 中导入 `create_code_tab`。
- [ ] 在 `gr.Blocks` 中添加一个新的 `gr.Tab("代码生成")`。
- [ ] 在新 Tab 中调用 `create_code_tab()`。