Skip to content

Gradio UI 原理说明

前端定位

当前系统采用 Gradio Blocks，而不是 Vue。核心目标是让 Python 服务、数据处理、可视化和页面回调在同一进程内交付，降低本地部署复杂度。

页面组织

  • 主入口采用可折叠的左侧二级导航，右侧复用持久工作台内容区；九个独立 Gradio 模块按需构建、切换，外层不另开页面。
  • 顶部 Tab 只承担当前模块内仍需分级的工作流；兼容单体入口保留原有 Tab 结构。
  • 表格和图表优先直接展示结果，减少解释性装饰。
  • 帮助页采用分类导航和详情视图，覆盖适用说明、系统原理、流程、排障和风险边界，不做营销式落地页。

AI 悬浮窗

AI 悬浮窗是跨页面工具，而不是某个模块的子页面。它需要支持模型问答、知识问答和 CLI 助手三类任务，并保持可关闭、可拖动、不会长期遮挡主内容。

当前模型 API 问答与 CLI 入口的能力不同：Codex 使用只读 JSONL 事件流，Trae/WorkBuddy 未配置真实命令时明确未接入；策略构建页旧产物模拟器仍是独立兼容能力。工作台支持 Enter、Shift+Enter、附件和状态；悬浮助手支持 Enter 和实际事件更新，不能据此推断拥有主工作台的全部附件及持久会话能力。控件存在、事件已绑定，都需要浏览器实际操作验证。

智能洞察按子页进入、账户切换及手动刷新加载，摘要与明细有独立回调和缓存；强制刷新可能重复读取行情。优化需同时考虑首次加载、远端请求与重排，不能只用热缓存或配置接口响应时间代表页面可用时间。

视觉检查原则

中英标签由共用字典与egs/config/ui/ui_translations.yaml维护，在浏览器翻译已渲染文案。文本缓存同时保存原文和已显示译文；组件生成新文字时重新识别来源，避免“全屏”切换后仍显示旧按钮。输入框只翻译占位/辅助属性；下拉框的非编辑显示可翻译，聚焦前恢复组件原文，提交仍使用Gradio状态中的标识。自由输入和原始模型/资料正文不作为英文界面实录中的翻译结果。

  • 页面打开后不应出现大面积空白。
  • 表格高度要足够，避免重要数据被折叠到不可见区域。
  • 图表标题、坐标轴和 hover 信息要能解释当前数据。
  • 按钮、输入框和输出区要靠近对应工作流。
  • 桌面视口下不能出现明显遮挡、重叠、按钮文字溢出。