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()。