create-interface-skill

创建标注界面

创建 HumanSignal 界面：一个 JSX 源文件（Screen.jsx），其最后一个表达式是带括号的对象字面量，其中包含一个 default React 组件，以及 getResults、parseResults、paramsSchema、outputSchema 和 hotkeys 等可选导出。

这是基于 JSX 的 Interfaces 运行时。除非用户明确要求使用 ReactCode，否则不要使用旧版 <ReactCode> XML 标签格式。

真相来源

references/ 下的文件由应用内「Create with Agent」助手发送给模型的同一组模块渲染而成。这些文件具有权威性。请严格遵循其中的模块约定、Schema 规则、提交前检查清单、区域约定，以及样式与无障碍要求。

必须遵循的阅读顺序

1. 从头到尾阅读 references/core-contract.md。这是所有界面的基础约定，其中包含提交前检查清单。
2. 阅读 references/schemas.md 和 references/styling-a11y.md。每个界面都必须包含 Schema，并通过设计系统令牌支持浅色和深色模式。
3. 阅读与请求匹配的领域模块，以及对应的完整示例并据此调整：

参考资料	涵盖内容
references/core-contract.md	响应/输出格式、防御式编码、提交前检查清单、编辑工具、动态屏幕模块、参数、无障碍基础知识和任务数据访问。
references/text-spans.md	基于绝对偏移量的文本高亮、NER/实体片段和选择偏移量辅助工具。
references/spatial-bounding.md	空间区域持久化、ShellRegion 结构、可见性/锁定状态、AnnotationResult 结构、图像导航与选择工具（选择、平移、缩放、适应窗口/100%），以及排序/排序方式（仅在 Interface Components 关闭时使用旧版 DIY）。
references/video-frames.md	用于时间轴导航的安全定位 HTML5 视频 FPS 探测和稳定帧计数器（FIT-2803）。
references/schemas.md	inputSchema、outputSchema 语法、必需输出字段、dependsOn 和 parseResults。
references/schemas-spatial.md	多选图像 URL、空间关键点 Schema，以及 PDF OCR/边界框 Schema。
references/example-classification.md	一份完整的情感分析/文本分类屏幕模块示例。
references/example-ner.md	一份完整的命名实体识别（NER）屏幕模块示例。
references/example-audio.md	带 Shell 关系锚点和正确序列化的音频/波形时间跨度区域（FIT-2247）。
references/example-spatial.md	一份完整的图像边界框/空间屏幕模块示例。
references/video-timeline.md	加载时通过 EditorDeps.video 探测实际 FPS，保持帧计数单调递增，且绝不将标注帧裁剪到 24fps 备用值（FIT-2804）。
references/styling-a11y.md	主题适配令牌、字体排印、间距、组件、布局及交互/无障碍规则。

4. 只阅读 references/reference.md 中所需的部分（当 UI 读取 task.data 时，先阅读 Schemas & sample data）。只有在 reference.md 指引时才打开 references/examples.md。

本地创作的运行时注意事项

• 注入的全局对象。 除了 core-contract 中列出的 React / hooks / getField 全局对象外，沙箱还会注入 EditorUI（@humansignal/ui 命名空间）和 EditorDeps（例如 EditorDeps.audioDecoder.WasmStreamingDecoder、EditorDeps.video.probeFrameRate）。
• 不要引用 window.InterfaceComponents（AudioCanvas、useComponentHotkeys）——它们受 fflag_interfaces_components 控制，而该标志处于关闭状态。请按照 core-contract 和 example-audio 中的示例，使用 EditorDeps.audioDecoder.WasmStreamingDecoder 构建音频界面，并忽略 reference.md 中任何关于 InterfaceComponents 的做法。
• EditorUI 的双路径陷阱。 EditorUI 仅在运行时 iframe 内注入，不会在提取 paramsSchema 的管理端求值过程中注入。顶层引用 EditorUI 会触发 EditorUI is not defined，并导致标注设置中的 paramsSchema 静默失效。仅在渲染时引用它，或者省略它并使用带设计令牌的内联样式。
• 由外壳负责的行为。 标注外壳负责提交/更新、撤销/重做/重置、Regions/Info/Relations 面板、区域可见性和评论。通过 core-contract 和 spatial-bounding 中的属性和回调驱动这些功能（addRegion、updateRegion、deleteRegion、selectRegion、selectedRegionIds、隐藏/锁定状态）。不要在屏幕中重新实现这些功能：自定义删除按钮、仅保存在本地的区域状态，或忽略隐藏状态，都会导致外壳的面板和历史记录失效。
• 编译器提取。 编译器会将最后一个带括号的对象字面量转换为模块导出。如果文件末尾不是裸露的 ({ default: ... })，编辑器会报错："Module missing 'default' function export."
• 不支持持久化存储。 localStorage / sessionStorage 是内存模拟对象，每次 iframe 重新挂载都会重置；只能通过变更回调和标注结果持久化。
• 示例数据。 保持 task.json 简洁，并对 paramsSchema / inputSchema 中的每个 dataField 使用完全一致的 default 任务数据路径。
• 保存到 Label Studio。 只能使用 label-studio-sdk interface sync <dir> --title "<Title>" --publish（新建界面；需要时添加 --workspace <id>），或 label-studio-sdk interface sync <dir> --message "<change>"（已有界面，由旁车文件跟踪）创建或更新界面。后一种方式会创建未发布的草稿；如果新项目需要使用该界面，请添加 --publish。sync 会从模块中提取 inputSchema / outputSchema / paramsSchema，并将其与代码一并存储。切勿自行向 /api/interfaces/ 发送 POST / PATCH 请求：服务器无法从代码中读取架构，因此手动构造的请求会在不报错的情况下保存空的 output_schema / input_schema，并导致从该界面创建的项目丢失 Data Manager 标注筛选器。同步后，请确认 GET /api/interfaces/<id>/ 返回非空的 output_schema。