Label Studio Interfaces 全指南用 React 构建自定义标注界面的架构、开发流程与安全模型【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioInterfaces 是 Label Studio 中最强大的 UI 构建能力它以自然语言描述为输入通过产品内 Agent 或本地编码 Agent 生成单个文件、完全交互式的 React 标注界面替代传统 XML 标签配置。本文以 interfaces.md 为核心骨架结合仓库中 SDK 校验逻辑projects/api.py、ReactCode iframe 存储代理react_code_proxy.py、自定义界面导出data_export/models.py等源码实现系统讲解 Interfaces 的适用场景、两种构建路径、作用域与权限模型、沙箱运行契约、版本管理与项目集成帮助你从零上手并安全落地。什么是 InterfacesInterfaces 构建器允许你构建高度自定义的标注 UI并在多个 Label Studio 项目之间复用。与选择模板并微调开箱即用的 XML 标签 不同使用 Interfaces 时你只需描述想要的体验Label Studio 便会构建一个完全交互式的、基于 React 的标注 UI——你可以预览、打磨、保存并在项目之间共享。从仓库的工程实现看Interfaces 并非独立于标注体系之外的另一套机制而是与经典标注流程深度打通的后端通过 SDK 的LabelInterface对界面配置做解析与校验projects/api.py、projects/serializers.py而标注结果仍然以标准 Label Studio results 结构存储因此评审工作流与导出能力可继续复用。何时使用 InterfacesInterfaces 是 Label Studio 功能最强的 UI 构建器在以下场景优先考虑XML 标签无法覆盖你的数据类型例如 3D 文件、GEOTiff、DICOM 等没有对应对象标签object tag的数据类型。希望通过 vibe code 方式构建标注 UI既可以在 Label Studio 内部进行也可以使用你自己的工具和 Agent 在外部完成。要与 Claude Code、Codex、Cursor 等编码 Agent 配合可安装create-interface-skill或查看完整的 Agent 技能总览。需要对标注 UI 做版本管理。需要更多自定义逻辑条件渲染、自定义校验、按任务变化的 UI 等。完整的对比见下文 Interfaces 与经典 XML 标签对比。版本与可用性Interfaces 在 Label Studio Enterprise含自托管/on-prem 部署与 Starter Cloud 中可用。构建方式有两条路径Create with Agent产品内构建器仅 Label Studio Cloud 可用。Develop Locally本地开发用自己的编码 Agent 在本地构建并同步回 Label Studio任何部署形态都可用。在自托管或 on-prem包括 air-gapped 离线环境部署上Develop Locally 是构建 Interfaces 的唯一方式因为 Create with Agent 是 Cloud 专属功能。除构建路径外Interfaces 的版本管理、项目关联、导出等能力在两条路径下完全一致。若你在自托管/on-prem 部署上未看到 Interfaces请联系客户经理为组织启用。项目与功能集成界面保存后即可用该 Interface 创建新项目受工作区作用域约束见 Interface 作用域项目使用该 Interface 渲染标注 UI。由于标注仍以标准 Label Studio results 存储标准的评审工作流与导出功能可以继续使用。各功能集成情况如下功能说明PromptsInterface 的输出 schemaoutputSchema指导 Prompts 如何将 LLM 的结构化响应转换为 Label Studio 标注从而实现预标注后人工评审。Agreements与其他任务一样可以查看和探索一致性agreement但不能自定义单个 control tag 级别的一致性指标。Analytics可以像任何其他 Label Studio 项目一样使用仪表盘可视化标注与评审工作。项目设置配置挂载了 Interface 的项目时项目设置没有任何变更或限制。PluginsInterfaces 不支持插件。取而代之的是可以直接在 Interface 代码中内嵌实现插件类型的功能。XML 标签Interfaces 不包含经典 XML 标签也不能与经典 XML 标注界面组合使用。从源码可以佐证结果格式仍是标准结构这一点在 ImportPredictionsExample.jsx 中前端对自定义 Interface 项目会拉取input_schema/output_schema并把 schema 字段string/enum/integer/boolean/array映射回标准 result 类型choices、textarea、number、labels来构造预测导入示例——这说明 Interface 的 schema 描述最终仍以标准 result 形态落地。而 data_export/models.py 中当项目使用自定义界面use_custom_interface时get_export_formats会额外启用DOCLANG导出格式测试见 test_models.py其余格式则按经典配置的转换器支持范围正常提供。Interfaces 与经典 XML 标签对比特性经典 XML 标签Interfaces格式XML 标签库React / Agent 生成代码构建方式配置 XML 或选择模板通过 Label Studio Agent 或带 skills.md 的编码 Agent 进行自然语言提示迭代速度中等极快提示 → 打磨 → 发布多模态支持支持但受限完全灵活支持传统 XML 标签不支持的数据3D 数据、geotiff 等业务逻辑通过插件以独立代码形式挂接到配置直接写在 Interface 组件中AI 自动化通过 ML backend 连接模型ML backend、原生模型集成并在 Prompts 中支持 LLM-as-a-judge 预标注或评估跨项目复用配置是项目级的复用意味着复制与漂移Interface 是一等对象——无需复制即可移植到任何项目版本管理有限内置版本历史支持一键回滚访问控制项目级Interface 本身支持工作区级或项目级访问后端集成支持支持Agent 兼容性不支持支持Label Studio Agent 或自选 Agent护栏标签库强制兼容性Agent 在独立于生产环境的沙箱中运行Interface 作用域Interface 分为模板Template、共享Shared和限定工作区Workspace三种作用域。模板 Interface 是最快的上手方式共享与工作区作用域让团队可以标准化一套共享的标注体验。作用域谁能看到谁能编辑模板Templates组织内所有人没有人——由 HumanSignal 维护、只读。但你可以复制duplicate系统界面并编辑副本。共享Shared组织内所有人拥有相应权限的任何人工作区Workspace所选工作区的成员Owner 与 Admin或该工作区成员的 Manager注意事项模板 Interface 是只读的。不能修改或删除 HumanSignal 提供的模板——请先复制再编辑副本。作用域变更具有结构性影响。在 shared 与 workspace 作用域之间移动 Interface可能改变谁能用它创建新项目。安全模型用户访问角色访问权限Owner 与 Admin可以创建和编辑共享 Interface并可为任何工作区创建/编辑Manager可以创建和编辑共享 Interface并可为其所属的任何工作区创建/编辑Annotator 与 Reviewer无法访问 Interfaces 功能管理员控制组织管理员可以启用或禁用创建与编辑 Interface 的能力详见 Interfaces 设置。该设置位于Organization Settings Interfaces对所有 Interface 统一生效包括内嵌 iframe、主标注画布、产品内预览以及 Develop Locally playground。沙箱机制Interfaces 以沙箱化模块形式运行在 Label Studio 编辑器外壳editor shell内部。为保证安全、可移植和便于升级运行时强制执行一个窄契约仅 React 源码默认封闭。代码可使用React与标准 hooksuseState、useRef、useEffect、useCallback、useMemo外加一个小的getField辅助函数。源码中不能importnpm 包。要使用第三方库可以将它打包进 Interface或从你允许列表中的主机加载见 使用外部库与服务。纯 JavaScript 加 JSX。不支持 TypeScript、类型注解、import/export语句。模块在运行时被编译并求值必须暴露一个默认组件外加可选辅助函数getResults、parseResults、outputSchema、inputSchema、paramsSchema、GridCell。默认无网络访问。默认情况下 Interface 只能访问你的 Label Studio 服务器。若要调用外部服务例如 ML backend需要 Owner/Admin 在Organization Settings Interfaces → API origins中为该源origin设置允许列表见 使用外部库与服务。有限持久化。状态仅存在于一次标注会话期间。任何需要保留的数据都必须通过标注结果annotation results带回。仓库中与沙箱 iframe直接相关的实现是 react_code_proxy.py它为 ReactCode iframe 提供了基于 JWT 的存储 URL 解析代理——ReactCodeTokenView为已认证用户和特定项目签发短期默认 3600 秒、区间 60–86400 秒HS256 JWTREACT_CODE_TOKEN_AUDIENCE react-code-resolveiframe 用该 token 替代会话 Cookie 调用ReactCodeResolveView解析存储 URI并配合_add_cors_headers的 CORS 头GET/OPTIONS、Range 支持实现跨 iframe 的数据读取。对应测试见 test_react_code_proxy.py。这套受控 token 显式放行的机制正是沙箱默认无网络、仅能访问 LS 服务器这一安全姿态在后端的具体落地。外部网络访问的三条路径当 Interface 需要外部 API 或第三方库时按需精确开启以下三种能力之一具体配置与规则详见 使用外部库与服务需求示例在哪里开启调用外部 HTTP 服务fetch()你的 ML backend、地理编码服务、内部微服务、瓦片服务器Organization Settings Interfaces → API origins运行时从 CDN 加载第三方包通过script标签从cdn.jsdelivr.net拉取three.js或d3Organization Settings Interfaces → Advanced: external scripts使用不依赖外部网络的第三方包将three.js打包进 Interface 并发布无需配置代码自包含要点提醒调用外部 API与使用外部包的配置位置不同。API origins只管辖数据请求CSPconnect-src格式须为带 scheme 的完整源、不支持通配符、空列表即无出站网络外部脚本则须为https://源且显式打开开关——放错区域会静默无效。对安全要求高的场景air-gapped、严格安全优先选择本地打包Path 3把库打成 IIFE/global 构建如esbuild --bundle --formatiife --global-nameMyLib后包含进单个源文件无需任何放行配置Canvas 与 WebGL 在沙箱内可用因此three.js这类库可以正常渲染点云等数据。构建路径一使用 Label Studio Agent 创建Create with Agent在Interfaces主菜单中选择Create Interface Create with Agent即可开始。若想基于已有界面而不是从空白开始可在任一 Interface 的溢出菜单中选Duplicate复制后编辑。构建器包含以下标签页标签页说明Chat向 Label Studio Agent 提供指令构建自定义界面。Code查看并手动更新构建会话中生成的 React 组件。版本导航器通过聊天迭代界面时可在预览的各个版本间切换。Preview界面的交互式预览。Input/Output自定义预览中要看到的输入数据并查看你与预览交互时的输出结果。Config界面基础版本构建完成后可用此标签页修改界面而无需通过聊天迭代。Grid Cell若在设置中启用了Build custom grid view此标签页会列出每个网格单元格。ChatChat标签页是你与 Agent 协作构建 Interface 的地方。在底部消息框中描述你想要的标注 UI描述要具体包含标注员应该看到什么文本、图像、对话、并排文档等。要求他们做什么选标签、高亮 span、填表单、排序选项。领域约束标签名称、必填字段、规则。Plan mode在 Plan mode 中Agent 会呈现Question cards问题卡片——Agent 用来收窄设计的单选题点击适用的选项并提交。Plan summary card方案摘要卡片——建议的设计方案。你可以Approve批准、Approve with edits先修改方案文本再批准、或Revise发送反馈让 Agent 重新提出方案。方案批准后Agent 切换到代码生成阶段。设置Settings你可以选择是否为 Interface 构建自定义网格视图grid view。网格视图允许你在 Data Manager 以 Grid View 查看任务时添加自定义摘要该摘要可在从项目设置修改 Interface 时编辑。CodeCode标签页可查看并手动更新构建会话中生成的 React 组件。版本导航器随着更新 Interface预览会同步刷新。你可以使用聊天面板上方的控件在 Interface 的版本之间移动用途包括逐步回看 Agent 产生的每个快照与你的每次手动编辑。如果后续改动破坏了某些功能可将预览回滚到更早的版本。选择任一早期快照作为下一条提示的基础。提示你导航到的版本保持可编辑——可以从历史中的任意节点继续打磨。Preview每次 Agent 编写或修改代码右侧的Preview都会使用当前示例任务数据重新渲染。像标注员一样在预览中操作——如果哪里不对在聊天中描述问题Agent 会修补代码。若代码存在语法或运行时错误预览窗格中会显示错误信息以便定位。提示与预览交互时可打开Input/Output标签页查看 JSON 格式的标注输出预览确认其符合预期。Input/Output区块说明InputInterface 读取的输入数据。可编辑示例输入观察 Interface 对真实数据的表现。OutputInterface 产生的输出数据。在Preview标签页下与界面交互时此区块自动更新以 JSON 格式显示输出。ConfigConfig标签页用于调整 Interface 的标注控件例如增删选项、修改标签颜色、调整标签显示文本等改动会同步反映在预览与代码中。这些值也可以通过Chat面板描述修改需求来更新后续还可以从项目设置中修改。Grid CellGrid Cell标签页仅在启用Build custom grid view设置后出现列出 Interface 中的每个网格单元格。构建路径二本地开发Develop Locally在自托管/on-prem含 air-gapped部署上这是构建 Interfaces 的方式很多团队在 Cloud 上也首选它。你可以在磁盘上编写 JSX针对你的 Label Studio 实例做实时预览并在准备好发布时把结果同步回去。本地开发适合以下场景使用你已有的编码 Agent 或 IDE。离线基于 Interface 的检出副本工作再把改动推回去。把现有 React 原型带入 Label Studio。在发布前对 Interface 运行自动化校验和 Playwright 场景。1. 安装 label-studio-sdk 并检查环境开始前确保具备label-studio-sdkPython 包如已安装请确保版本为 2.0.22 或更高。pip install --upgrade label-studio-sdk # 或 poetry add label-studio-sdkNode.js 与 npm 在PATH中。你的 Label Studio Enterprise URL 与一个 API token。若需要 Agent 协助安装一个编码 AgentClaude、Codex 或 Cursor。在Interfaces主菜单中选择Create Interface Develop Locally开始。若要对已存在的 Interface 迭代打开其详情页并点击顶部栏的Develop Locally弹窗会遵循版本导航器当前选中的版本。2. 安装 create-interface skill为本地编码 Agent 安装create-interface-skill。该技能包含本地开发 Interfaces 所需的命令与约定让 Agent 能编写出符合规范的 Interface 模块。在Develop Locally弹窗中选择你的 Agent 并复制安装命令Agent安装命令Claudenpx skills add humansignal/create-interface-skill --skill create-interface-skill -g -a claude-codeCodexnpx skills add humansignal/create-interface-skill --skill create-interface-skill -g -a codexCursornpx skills add humansignal/create-interface-skill --skill create-interface-skill -g -a cursor在终端运行命令后重启 Agent 以加载新技能每个 Agent 只需安装一次。技能是可选的——如果愿意手写 Interface 可以跳过它只是给 Agent 提供上下文。3. 初始化 Interface使用 SDK 提供的命令在本地目录中初始化 Interfaceexport LABEL_STUDIO_URLhttps://your-instance.humansignal.com export LABEL_STUDIO_API_KEYyour token label-studio-sdk interface init ./my-interface cd ./my-interface label-studio-sdk interface preview .interface init会搭建一个起始Screen.jsx、task.json和scenarios.js作为可继续开发的工作基线。提示也可以对单个命令传--lse-url和--token参数代替环境变量这在需要对接多个 Label Studio 实例时很有用。从已有 Interface 开始如需迭代 Label Studio 中已存在的 Interface打开详情页点击顶部栏Develop Locally弹窗会遵循版本导航器当前选中的版本。也可以使用命令label-studio-sdk interface pull --id interface-id --version version-id ./my-interface弹窗会预填--id与--version。不带--version时pull拉取 Interface 的最新版本含未发布的本地草稿。4. 检查本地环境运行以下命令检查本地环境label-studio-sdk interface doctor首次运行校验或 doctor 时会把 Node 校验依赖安装到用户缓存目录。5. 启动实时预览进入 Interface 目录并运行预览命令cd ./my-interface label-studio-sdk interface preview .这会在 Label Studio 中打开一个与本地环境实时连通的playground位于interfaces/playgroundURL。playground 监视你的源文件——每次保存都会实时反映到预览中。例如实例位于https://your-instance.humansignal.com则 playground 位于https://your-instance.humansignal.com/interfaces/playground。6. 在本地环境开发playground 运行后你可以在熟悉的本机工具IDE、终端或本机编码 Agent中工作而不是在产品内编辑。像其他项目一样保存改动playground 会基于当前示例任务数据重新渲染。7. 校验 Interface同步改动前先校验尽早发现问题label-studio-sdk interface validate .静态校验检查 JSX 编译、最终模块形态、schema 导出并对getResults与parseResults运行冒烟测试。若要运行scenarios.js中定义的浏览器驱动 Playwright 场景加--scenariolabel-studio-sdk interface validate . --scenario scenarios.js校验也会作为sync的一部分自动运行若想在同步时才发现问题可跳过本步也可在sync上使用--no-validate完全跳过检查。8. 将改动同步回 Label Studio本地代码就绪后运行 sync 命令把本地目录与 Label Studio 实例同步模式同步命令新 Interfacelabel-studio-sdk interface sync . --title My Interface --workspace id --publish已有 Interfacelabel-studio-sdk interface sync . --message Describe the change注意默认情况下sync创建未发布的本地草稿供你在 Label Studio 中先审阅版本再发布。加--publish立即发布版本并让新项目可用。Develop Locally弹窗在从零开始新建 Interface 时自动包含--publish在迭代已有 Interface 时省略它。对新 Interface--workspace为可选。若不指定工作区Interface 将创建在Shared作用域任何工作区的项目都可用。sync的常用标志标志说明--publish立即发布版本而不是保留为草稿。--message ...为同步的版本存储一条历史消息。--dry-run打印计划的操作而不写入服务器。--workspace id/--workspace-title ...将新创建的 Interface 放入指定工作区。--force即使本地源哈希未变化也强制上传。--no-validate跳过校验门槛编译仍然必需。同步成功后CLI 会在源码旁写入一个 sidecar 文件Screen.jsx.ls-interface.json。该 sidecar 以 Label Studio base URL 为键记住 Interface ID、工作区、源版本与上次推送的源哈希因此后续sync、start、open命令无需再传--id。提示同步后在Develop Locally弹窗中点击Refresh Versions可在 Interface 详情页看到新的草稿或已发布版本。常用 CLI 命令本地开发中最常用的命令如下完整命令参考见 label-studio-sdk 仓库的 Interface CLI Guide命令说明interface init dir搭建起始 InterfaceScreen.jsx、task.json、scenarios.js。interface pull --id id dir将已有 Interface 下载到本地目录。未设--version时默认取最新版本含草稿。interface preview dir打开实时 playground 并监视源文件变化。interface validate dir运行静态校验及可选Playwright 场景。interface sync dir将本地改动推回 Label Studio。默认创建草稿加--publish发布。interface start dir同步 Interface、创建使用它的项目并打开项目的数据标签页。interface open dir使用本地 sidecar 在 Label Studio 中打开已保存的 Interface。interface doctor检查 Node.js、npm、API token 与连通性。本地开发排错错误处理方式node is required for interface validation安装 Node.js 并确保node在PATH中。npm is required to install validator dependencies安装 npm 并重新运行interface doctor。source did not compile修复 JSX 语法错误。Interface 文件按自包含 JSX 片段编译不支持import/require及打包器专属语法。要使用第三方库请预打包进单个源文件或从允许列表中的主机加载见使用外部库与服务。Module did not return an object让文件中的最终表达式成为带括号包裹的对象字面量例如({ default: Screen })。Missing getResults或Missing parseResults静态校验时为警告但场景校验必需。需要可靠的保存/加载行为时请补齐这两个函数。no sidecar entry对目标 Label Studio URL 运行interface sync或向支持--id的命令传--id。multiple workspaces titled ...用数字工作区 ID 传--workspace而不是--workspace-title。Interface 运行时契约每个 Interface 是一个.jsx源文件其最后一个表达式是带括号的对象字面量。最小骨架如下完整规则由create-interface-skill的references/runtime-contract.md提供const MyInterface (props) { const { task, regions, params, addRegion, updateRegion, deleteRegion, readOnly } props; const text getField(task.data, params?.textField ?? text) ?? ; return ( div style{{ padding: 24 }} pre style{{ whiteSpace: pre-wrap }}{String(text)}/pre /div ); }; const paramsSchema { type: object, properties: { textField: { type: string, title: Text field, default: text, }, }, }; const outputSchema { type: object, properties: {}, }; function getResults(regions, relations) { return []; } function parseResults(results) { return { regions: [], relations: [] }; } ({ default: MyInterface, specVersion: 1, paramsSchema, outputSchema, getResults, parseResults, })运行时强制执行的几条规则无模块语法。源码按函数体求值而非 ES 模块无import、require、export无 TypeScript 语法。画布中没有主 Submit/Update 按钮。提交由 Interfaces 外壳shell负责。若需要额外底部栏操作使用BottomBarExtra插槽。渲染期间不要生成新的 region ID。复用props.regions中的已有 ID仅在事件处理器或parseResults中创建新 ID。无持久localStorage/sessionStorage。沙箱可能在 iframe 重新挂载时重置它们。仅在组件渲染函数内引用EditorUI。管理端 schema 提取阶段可能不会注入它。查看 Interface 详情与版本管理Interface 详情页是已保存 Interface 的大本营可检查、编辑、管理版本并从中创建项目。打开方式主菜单选择Interfaces再选择要查看的 Interface。操作顶部栏提供以下操作按钮说明Iterate with Agent打开带 Agent 的界面编辑器新标签页。Develop Locally安装create-interface-skill并用本地编码 Agent 开发。右上角溢出菜单操作说明Edit编辑 Interface 名称与描述。Create Project启动一个固定到版本导航器当前所选版本的新项目见 在项目中使用 Interface。Duplicate创建 Interface 的新副本。Delete删除 Interface。若该 Interface 正被任何项目使用此操作不可用。提示模板 Interface 只能通过先复制再编辑来使用和修改。预览Preview区块基于当前示例任务数据渲染 Interface与标注员看到的完全一致。点击控件确认行为符合预期。预览始终反映版本导航器当前选中的版本——切换版本可对比 Interface 在历史不同节点的表现。版本Versions版本列表位于Preview区块右侧。选择版本可将Preview、Data I/O与Code区块更新为该版本的源码。也可以从该版本旁的溢出菜单管理版本操作说明Add Description为版本添加描述。Unpublish从 Interface 创建项目后项目经理可以在项目上下文中切换 Interface 版本。取消发布某个版本会将其从Project Settings Labeling Interface的版本列表中隐藏。Data I/OData I/O区块提供 Interface 所需输入与预期输出的信息。用它确认 Interface 读取你计划导入的任务字段并产生下游工作流导出、分析、Prompts期望的标注形状。你可以编辑示例任务数据观察 Interface 对真实数据的表现。项目ProjectsProjects区块列出所有正在使用该 Interface 的项目以及每个项目固定的版本、创建日期与任务数。你可以点击项目直接打开或点击Create Project从 Interface 新建项目固定到版本导航器当前所选版本。提示编辑 Interface 不会追溯更新已有项目。每个项目都按固定的版本运行直到你从项目的标注设置中升级版本见 在项目中使用 Interface。代码CodeCode区块显示所选版本的只读 JSX 源码用于审计 Interface 实际行为、复制片段分享或粘贴到副本中、确认 Interface 暴露了你期望的可选辅助函数如paramsSchema、outputSchema或GridCell。在项目中使用 Interface创建 Interface 后即可据此创建项目。注意每个项目只能使用一个 Interface但可以在项目设置中自定义 Interface 并切换版本。创建项目从 Interfaces 列表点击溢出菜单选择Create Project。从 Interface 详情页选择Projects标签页并点击Create Project。字段说明Workspace项目创建所在的工作区。只能为共享 Interface选择工作区。Project Title项目名称。Description项目描述。项目继承了什么项目拥有自己的一份 Interface 代码副本固定在你选择的版本上之后对 Interface 的编辑不会追溯更改已有项目。项目会一直运行其固定的版本直到有人显式切换版本——可在Project Settings Labeling Interface的版本选择器中操作。配置随项目走。Interface 暴露的可配置项标签名、颜色、显示文本、哪个任务数据字段承载主要内容等按项目存储。编辑一个项目的配置不会影响其他项目即使它们共享同一个 Interface 与版本。配置项目的 Interface对于由 Interface 创建的项目可以在Settings Labeling Interface中调整 UI。在项目上下文中的调整只影响该项目的 Interface不会迭代 Interface 版本。若想迭代 Interface 版本可到 Interface 详情页点击Open Interface。Source Interface在此查看 Interface 的名称、创建日期以及项目当前使用的版本可用下拉框切换版本。Interface configuration在此配置标签名、颜色、显示文本等标注元素。后端数据支撑同样到位项目模型通过use_custom_interface/source_interface_id等字段区分自定义界面项目前端在 ImportPredictionsExample.jsx 中据此调用/api/interfaces/{id}/拉取 schema而 DraftGuard.jsx 也针对自定义界面项目做了草稿守卫适配保证保存/恢复行为与经典项目一致。总结如何选择与落地回到开篇的问题——什么时候该用 Interfaces当 XML 标签无法覆盖你的数据类型3D、GEOTiff、DICOM、当你希望以描述 → 预览 → 打磨 → 发布的方式极速迭代、当你需要版本化与跨项目复用标注 UI、或需要内嵌复杂业务逻辑时Interfaces 是最佳选择而经典 XML 标签在标准标注场景下仍然更轻量、更受标签库护栏约束。构建路径上Cloud 环境两条路径任选自托管/on-prem含 air-gapped走 Develop Locally安全侧遵循默认封闭、按需放行的原则——外部 API 走API origins、CDN 脚本走Advanced: external scripts、离线场景优先本地打包Path 3并把 iframe 能力camera、microphone 等保持在最小集合。版本管理上Interface 详情页的版本导航器与项目内的版本选择器让你随时回滚、对比与升级且已有项目不会因 Interface 的后续编辑而被追溯破坏——这一整套设计让 Interfaces 成为 Label Studio 中兼具灵活性与可控性的标注 UI 构建体系。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/12 0:05:07 · 阅读 1.2k Label Studio Interfaces 全指南：用 React 构建自定义标注界面的架构、开发流程与安全模型
Label Studio Interfaces 全指南用 React 构建自定义标注界面的架构、开发流程与安全模型【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioInterfaces 是 Label Studio 中最强大的 UI 构建能力它以自然语言描述为输入通过产品内 Agent 或本地编码 Agent 生成单个文件、完全交互式的 React 标注界面替代传统 XML 标签配置。本文以 interfaces.md 为核心骨架结合仓库中 SDK 校验逻辑projects/api.py、ReactCode iframe 存储代理react_code_proxy.py、自定义界面导出data_export/models.py等源码实现系统讲解 Interfaces 的适用场景、两种构建路径、作用域与权限模型、沙箱运行契约、版本管理与项目集成帮助你从零上手并安全落地。什么是 InterfacesInterfaces 构建器允许你构建高度自定义的标注 UI并在多个 Label Studio 项目之间复用。与选择模板并微调开箱即用的 XML 标签 不同使用 Interfaces 时你只需描述想要的体验Label Studio 便会构建一个完全交互式的、基于 React 的标注 UI——你可以预览、打磨、保存并在项目之间共享。从仓库的工程实现看Interfaces 并非独立于标注体系之外的另一套机制而是与经典标注流程深度打通的后端通过 SDK 的LabelInterface对界面配置做解析与校验projects/api.py、projects/serializers.py而标注结果仍然以标准 Label Studio results 结构存储因此评审工作流与导出能力可继续复用。何时使用 InterfacesInterfaces 是 Label Studio 功能最强的 UI 构建器在以下场景优先考虑XML 标签无法覆盖你的数据类型例如 3D 文件、GEOTiff、DICOM 等没有对应对象标签object tag的数据类型。希望通过 vibe code 方式构建标注 UI既可以在 Label Studio 内部进行也可以使用你自己的工具和 Agent 在外部完成。要与 Claude Code、Codex、Cursor 等编码 Agent 配合可安装create-interface-skill或查看完整的 Agent 技能总览。需要对标注 UI 做版本管理。需要更多自定义逻辑条件渲染、自定义校验、按任务变化的 UI 等。完整的对比见下文 Interfaces 与经典 XML 标签对比。版本与可用性Interfaces 在 Label Studio Enterprise含自托管/on-prem 部署与 Starter Cloud 中可用。构建方式有两条路径Create with Agent产品内构建器仅 Label Studio Cloud 可用。Develop Locally本地开发用自己的编码 Agent 在本地构建并同步回 Label Studio任何部署形态都可用。在自托管或 on-prem包括 air-gapped 离线环境部署上Develop Locally 是构建 Interfaces 的唯一方式因为 Create with Agent 是 Cloud 专属功能。除构建路径外Interfaces 的版本管理、项目关联、导出等能力在两条路径下完全一致。若你在自托管/on-prem 部署上未看到 Interfaces请联系客户经理为组织启用。项目与功能集成界面保存后即可用该 Interface 创建新项目受工作区作用域约束见 Interface 作用域项目使用该 Interface 渲染标注 UI。由于标注仍以标准 Label Studio results 存储标准的评审工作流与导出功能可以继续使用。各功能集成情况如下功能说明PromptsInterface 的输出 schemaoutputSchema指导 Prompts 如何将 LLM 的结构化响应转换为 Label Studio 标注从而实现预标注后人工评审。Agreements与其他任务一样可以查看和探索一致性agreement但不能自定义单个 control tag 级别的一致性指标。Analytics可以像任何其他 Label Studio 项目一样使用仪表盘可视化标注与评审工作。项目设置配置挂载了 Interface 的项目时项目设置没有任何变更或限制。PluginsInterfaces 不支持插件。取而代之的是可以直接在 Interface 代码中内嵌实现插件类型的功能。XML 标签Interfaces 不包含经典 XML 标签也不能与经典 XML 标注界面组合使用。从源码可以佐证结果格式仍是标准结构这一点在 ImportPredictionsExample.jsx 中前端对自定义 Interface 项目会拉取input_schema/output_schema并把 schema 字段string/enum/integer/boolean/array映射回标准 result 类型choices、textarea、number、labels来构造预测导入示例——这说明 Interface 的 schema 描述最终仍以标准 result 形态落地。而 data_export/models.py 中当项目使用自定义界面use_custom_interface时get_export_formats会额外启用DOCLANG导出格式测试见 test_models.py其余格式则按经典配置的转换器支持范围正常提供。Interfaces 与经典 XML 标签对比特性经典 XML 标签Interfaces格式XML 标签库React / Agent 生成代码构建方式配置 XML 或选择模板通过 Label Studio Agent 或带 skills.md 的编码 Agent 进行自然语言提示迭代速度中等极快提示 → 打磨 → 发布多模态支持支持但受限完全灵活支持传统 XML 标签不支持的数据3D 数据、geotiff 等业务逻辑通过插件以独立代码形式挂接到配置直接写在 Interface 组件中AI 自动化通过 ML backend 连接模型ML backend、原生模型集成并在 Prompts 中支持 LLM-as-a-judge 预标注或评估跨项目复用配置是项目级的复用意味着复制与漂移Interface 是一等对象——无需复制即可移植到任何项目版本管理有限内置版本历史支持一键回滚访问控制项目级Interface 本身支持工作区级或项目级访问后端集成支持支持Agent 兼容性不支持支持Label Studio Agent 或自选 Agent护栏标签库强制兼容性Agent 在独立于生产环境的沙箱中运行Interface 作用域Interface 分为模板Template、共享Shared和限定工作区Workspace三种作用域。模板 Interface 是最快的上手方式共享与工作区作用域让团队可以标准化一套共享的标注体验。作用域谁能看到谁能编辑模板Templates组织内所有人没有人——由 HumanSignal 维护、只读。但你可以复制duplicate系统界面并编辑副本。共享Shared组织内所有人拥有相应权限的任何人工作区Workspace所选工作区的成员Owner 与 Admin或该工作区成员的 Manager注意事项模板 Interface 是只读的。不能修改或删除 HumanSignal 提供的模板——请先复制再编辑副本。作用域变更具有结构性影响。在 shared 与 workspace 作用域之间移动 Interface可能改变谁能用它创建新项目。安全模型用户访问角色访问权限Owner 与 Admin可以创建和编辑共享 Interface并可为任何工作区创建/编辑Manager可以创建和编辑共享 Interface并可为其所属的任何工作区创建/编辑Annotator 与 Reviewer无法访问 Interfaces 功能管理员控制组织管理员可以启用或禁用创建与编辑 Interface 的能力详见 Interfaces 设置。该设置位于Organization Settings Interfaces对所有 Interface 统一生效包括内嵌 iframe、主标注画布、产品内预览以及 Develop Locally playground。沙箱机制Interfaces 以沙箱化模块形式运行在 Label Studio 编辑器外壳editor shell内部。为保证安全、可移植和便于升级运行时强制执行一个窄契约仅 React 源码默认封闭。代码可使用React与标准 hooksuseState、useRef、useEffect、useCallback、useMemo外加一个小的getField辅助函数。源码中不能importnpm 包。要使用第三方库可以将它打包进 Interface或从你允许列表中的主机加载见 使用外部库与服务。纯 JavaScript 加 JSX。不支持 TypeScript、类型注解、import/export语句。模块在运行时被编译并求值必须暴露一个默认组件外加可选辅助函数getResults、parseResults、outputSchema、inputSchema、paramsSchema、GridCell。默认无网络访问。默认情况下 Interface 只能访问你的 Label Studio 服务器。若要调用外部服务例如 ML backend需要 Owner/Admin 在Organization Settings Interfaces → API origins中为该源origin设置允许列表见 使用外部库与服务。有限持久化。状态仅存在于一次标注会话期间。任何需要保留的数据都必须通过标注结果annotation results带回。仓库中与沙箱 iframe直接相关的实现是 react_code_proxy.py它为 ReactCode iframe 提供了基于 JWT 的存储 URL 解析代理——ReactCodeTokenView为已认证用户和特定项目签发短期默认 3600 秒、区间 60–86400 秒HS256 JWTREACT_CODE_TOKEN_AUDIENCE react-code-resolveiframe 用该 token 替代会话 Cookie 调用ReactCodeResolveView解析存储 URI并配合_add_cors_headers的 CORS 头GET/OPTIONS、Range 支持实现跨 iframe 的数据读取。对应测试见 test_react_code_proxy.py。这套受控 token 显式放行的机制正是沙箱默认无网络、仅能访问 LS 服务器这一安全姿态在后端的具体落地。外部网络访问的三条路径当 Interface 需要外部 API 或第三方库时按需精确开启以下三种能力之一具体配置与规则详见 使用外部库与服务需求示例在哪里开启调用外部 HTTP 服务fetch()你的 ML backend、地理编码服务、内部微服务、瓦片服务器Organization Settings Interfaces → API origins运行时从 CDN 加载第三方包通过script标签从cdn.jsdelivr.net拉取three.js或d3Organization Settings Interfaces → Advanced: external scripts使用不依赖外部网络的第三方包将three.js打包进 Interface 并发布无需配置代码自包含要点提醒调用外部 API与使用外部包的配置位置不同。API origins只管辖数据请求CSPconnect-src格式须为带 scheme 的完整源、不支持通配符、空列表即无出站网络外部脚本则须为https://源且显式打开开关——放错区域会静默无效。对安全要求高的场景air-gapped、严格安全优先选择本地打包Path 3把库打成 IIFE/global 构建如esbuild --bundle --formatiife --global-nameMyLib后包含进单个源文件无需任何放行配置Canvas 与 WebGL 在沙箱内可用因此three.js这类库可以正常渲染点云等数据。构建路径一使用 Label Studio Agent 创建Create with Agent在Interfaces主菜单中选择Create Interface Create with Agent即可开始。若想基于已有界面而不是从空白开始可在任一 Interface 的溢出菜单中选Duplicate复制后编辑。构建器包含以下标签页标签页说明Chat向 Label Studio Agent 提供指令构建自定义界面。Code查看并手动更新构建会话中生成的 React 组件。版本导航器通过聊天迭代界面时可在预览的各个版本间切换。Preview界面的交互式预览。Input/Output自定义预览中要看到的输入数据并查看你与预览交互时的输出结果。Config界面基础版本构建完成后可用此标签页修改界面而无需通过聊天迭代。Grid Cell若在设置中启用了Build custom grid view此标签页会列出每个网格单元格。ChatChat标签页是你与 Agent 协作构建 Interface 的地方。在底部消息框中描述你想要的标注 UI描述要具体包含标注员应该看到什么文本、图像、对话、并排文档等。要求他们做什么选标签、高亮 span、填表单、排序选项。领域约束标签名称、必填字段、规则。Plan mode在 Plan mode 中Agent 会呈现Question cards问题卡片——Agent 用来收窄设计的单选题点击适用的选项并提交。Plan summary card方案摘要卡片——建议的设计方案。你可以Approve批准、Approve with edits先修改方案文本再批准、或Revise发送反馈让 Agent 重新提出方案。方案批准后Agent 切换到代码生成阶段。设置Settings你可以选择是否为 Interface 构建自定义网格视图grid view。网格视图允许你在 Data Manager 以 Grid View 查看任务时添加自定义摘要该摘要可在从项目设置修改 Interface 时编辑。CodeCode标签页可查看并手动更新构建会话中生成的 React 组件。版本导航器随着更新 Interface预览会同步刷新。你可以使用聊天面板上方的控件在 Interface 的版本之间移动用途包括逐步回看 Agent 产生的每个快照与你的每次手动编辑。如果后续改动破坏了某些功能可将预览回滚到更早的版本。选择任一早期快照作为下一条提示的基础。提示你导航到的版本保持可编辑——可以从历史中的任意节点继续打磨。Preview每次 Agent 编写或修改代码右侧的Preview都会使用当前示例任务数据重新渲染。像标注员一样在预览中操作——如果哪里不对在聊天中描述问题Agent 会修补代码。若代码存在语法或运行时错误预览窗格中会显示错误信息以便定位。提示与预览交互时可打开Input/Output标签页查看 JSON 格式的标注输出预览确认其符合预期。Input/Output区块说明InputInterface 读取的输入数据。可编辑示例输入观察 Interface 对真实数据的表现。OutputInterface 产生的输出数据。在Preview标签页下与界面交互时此区块自动更新以 JSON 格式显示输出。ConfigConfig标签页用于调整 Interface 的标注控件例如增删选项、修改标签颜色、调整标签显示文本等改动会同步反映在预览与代码中。这些值也可以通过Chat面板描述修改需求来更新后续还可以从项目设置中修改。Grid CellGrid Cell标签页仅在启用Build custom grid view设置后出现列出 Interface 中的每个网格单元格。构建路径二本地开发Develop Locally在自托管/on-prem含 air-gapped部署上这是构建 Interfaces 的方式很多团队在 Cloud 上也首选它。你可以在磁盘上编写 JSX针对你的 Label Studio 实例做实时预览并在准备好发布时把结果同步回去。本地开发适合以下场景使用你已有的编码 Agent 或 IDE。离线基于 Interface 的检出副本工作再把改动推回去。把现有 React 原型带入 Label Studio。在发布前对 Interface 运行自动化校验和 Playwright 场景。1. 安装 label-studio-sdk 并检查环境开始前确保具备label-studio-sdkPython 包如已安装请确保版本为 2.0.22 或更高。pip install --upgrade label-studio-sdk # 或 poetry add label-studio-sdkNode.js 与 npm 在PATH中。你的 Label Studio Enterprise URL 与一个 API token。若需要 Agent 协助安装一个编码 AgentClaude、Codex 或 Cursor。在Interfaces主菜单中选择Create Interface Develop Locally开始。若要对已存在的 Interface 迭代打开其详情页并点击顶部栏的Develop Locally弹窗会遵循版本导航器当前选中的版本。2. 安装 create-interface skill为本地编码 Agent 安装create-interface-skill。该技能包含本地开发 Interfaces 所需的命令与约定让 Agent 能编写出符合规范的 Interface 模块。在Develop Locally弹窗中选择你的 Agent 并复制安装命令Agent安装命令Claudenpx skills add humansignal/create-interface-skill --skill create-interface-skill -g -a claude-codeCodexnpx skills add humansignal/create-interface-skill --skill create-interface-skill -g -a codexCursornpx skills add humansignal/create-interface-skill --skill create-interface-skill -g -a cursor在终端运行命令后重启 Agent 以加载新技能每个 Agent 只需安装一次。技能是可选的——如果愿意手写 Interface 可以跳过它只是给 Agent 提供上下文。3. 初始化 Interface使用 SDK 提供的命令在本地目录中初始化 Interfaceexport LABEL_STUDIO_URLhttps://your-instance.humansignal.com export LABEL_STUDIO_API_KEYyour token label-studio-sdk interface init ./my-interface cd ./my-interface label-studio-sdk interface preview .interface init会搭建一个起始Screen.jsx、task.json和scenarios.js作为可继续开发的工作基线。提示也可以对单个命令传--lse-url和--token参数代替环境变量这在需要对接多个 Label Studio 实例时很有用。从已有 Interface 开始如需迭代 Label Studio 中已存在的 Interface打开详情页点击顶部栏Develop Locally弹窗会遵循版本导航器当前选中的版本。也可以使用命令label-studio-sdk interface pull --id interface-id --version version-id ./my-interface弹窗会预填--id与--version。不带--version时pull拉取 Interface 的最新版本含未发布的本地草稿。4. 检查本地环境运行以下命令检查本地环境label-studio-sdk interface doctor首次运行校验或 doctor 时会把 Node 校验依赖安装到用户缓存目录。5. 启动实时预览进入 Interface 目录并运行预览命令cd ./my-interface label-studio-sdk interface preview .这会在 Label Studio 中打开一个与本地环境实时连通的playground位于interfaces/playgroundURL。playground 监视你的源文件——每次保存都会实时反映到预览中。例如实例位于https://your-instance.humansignal.com则 playground 位于https://your-instance.humansignal.com/interfaces/playground。6. 在本地环境开发playground 运行后你可以在熟悉的本机工具IDE、终端或本机编码 Agent中工作而不是在产品内编辑。像其他项目一样保存改动playground 会基于当前示例任务数据重新渲染。7. 校验 Interface同步改动前先校验尽早发现问题label-studio-sdk interface validate .静态校验检查 JSX 编译、最终模块形态、schema 导出并对getResults与parseResults运行冒烟测试。若要运行scenarios.js中定义的浏览器驱动 Playwright 场景加--scenariolabel-studio-sdk interface validate . --scenario scenarios.js校验也会作为sync的一部分自动运行若想在同步时才发现问题可跳过本步也可在sync上使用--no-validate完全跳过检查。8. 将改动同步回 Label Studio本地代码就绪后运行 sync 命令把本地目录与 Label Studio 实例同步模式同步命令新 Interfacelabel-studio-sdk interface sync . --title My Interface --workspace id --publish已有 Interfacelabel-studio-sdk interface sync . --message Describe the change注意默认情况下sync创建未发布的本地草稿供你在 Label Studio 中先审阅版本再发布。加--publish立即发布版本并让新项目可用。Develop Locally弹窗在从零开始新建 Interface 时自动包含--publish在迭代已有 Interface 时省略它。对新 Interface--workspace为可选。若不指定工作区Interface 将创建在Shared作用域任何工作区的项目都可用。sync的常用标志标志说明--publish立即发布版本而不是保留为草稿。--message ...为同步的版本存储一条历史消息。--dry-run打印计划的操作而不写入服务器。--workspace id/--workspace-title ...将新创建的 Interface 放入指定工作区。--force即使本地源哈希未变化也强制上传。--no-validate跳过校验门槛编译仍然必需。同步成功后CLI 会在源码旁写入一个 sidecar 文件Screen.jsx.ls-interface.json。该 sidecar 以 Label Studio base URL 为键记住 Interface ID、工作区、源版本与上次推送的源哈希因此后续sync、start、open命令无需再传--id。提示同步后在Develop Locally弹窗中点击Refresh Versions可在 Interface 详情页看到新的草稿或已发布版本。常用 CLI 命令本地开发中最常用的命令如下完整命令参考见 label-studio-sdk 仓库的 Interface CLI Guide命令说明interface init dir搭建起始 InterfaceScreen.jsx、task.json、scenarios.js。interface pull --id id dir将已有 Interface 下载到本地目录。未设--version时默认取最新版本含草稿。interface preview dir打开实时 playground 并监视源文件变化。interface validate dir运行静态校验及可选Playwright 场景。interface sync dir将本地改动推回 Label Studio。默认创建草稿加--publish发布。interface start dir同步 Interface、创建使用它的项目并打开项目的数据标签页。interface open dir使用本地 sidecar 在 Label Studio 中打开已保存的 Interface。interface doctor检查 Node.js、npm、API token 与连通性。本地开发排错错误处理方式node is required for interface validation安装 Node.js 并确保node在PATH中。npm is required to install validator dependencies安装 npm 并重新运行interface doctor。source did not compile修复 JSX 语法错误。Interface 文件按自包含 JSX 片段编译不支持import/require及打包器专属语法。要使用第三方库请预打包进单个源文件或从允许列表中的主机加载见使用外部库与服务。Module did not return an object让文件中的最终表达式成为带括号包裹的对象字面量例如({ default: Screen })。Missing getResults或Missing parseResults静态校验时为警告但场景校验必需。需要可靠的保存/加载行为时请补齐这两个函数。no sidecar entry对目标 Label Studio URL 运行interface sync或向支持--id的命令传--id。multiple workspaces titled ...用数字工作区 ID 传--workspace而不是--workspace-title。Interface 运行时契约每个 Interface 是一个.jsx源文件其最后一个表达式是带括号的对象字面量。最小骨架如下完整规则由create-interface-skill的references/runtime-contract.md提供const MyInterface (props) { const { task, regions, params, addRegion, updateRegion, deleteRegion, readOnly } props; const text getField(task.data, params?.textField ?? text) ?? ; return ( div style{{ padding: 24 }} pre style{{ whiteSpace: pre-wrap }}{String(text)}/pre /div ); }; const paramsSchema { type: object, properties: { textField: { type: string, title: Text field, default: text, }, }, }; const outputSchema { type: object, properties: {}, }; function getResults(regions, relations) { return []; } function parseResults(results) { return { regions: [], relations: [] }; } ({ default: MyInterface, specVersion: 1, paramsSchema, outputSchema, getResults, parseResults, })运行时强制执行的几条规则无模块语法。源码按函数体求值而非 ES 模块无import、require、export无 TypeScript 语法。画布中没有主 Submit/Update 按钮。提交由 Interfaces 外壳shell负责。若需要额外底部栏操作使用BottomBarExtra插槽。渲染期间不要生成新的 region ID。复用props.regions中的已有 ID仅在事件处理器或parseResults中创建新 ID。无持久localStorage/sessionStorage。沙箱可能在 iframe 重新挂载时重置它们。仅在组件渲染函数内引用EditorUI。管理端 schema 提取阶段可能不会注入它。查看 Interface 详情与版本管理Interface 详情页是已保存 Interface 的大本营可检查、编辑、管理版本并从中创建项目。打开方式主菜单选择Interfaces再选择要查看的 Interface。操作顶部栏提供以下操作按钮说明Iterate with Agent打开带 Agent 的界面编辑器新标签页。Develop Locally安装create-interface-skill并用本地编码 Agent 开发。右上角溢出菜单操作说明Edit编辑 Interface 名称与描述。Create Project启动一个固定到版本导航器当前所选版本的新项目见 在项目中使用 Interface。Duplicate创建 Interface 的新副本。Delete删除 Interface。若该 Interface 正被任何项目使用此操作不可用。提示模板 Interface 只能通过先复制再编辑来使用和修改。预览Preview区块基于当前示例任务数据渲染 Interface与标注员看到的完全一致。点击控件确认行为符合预期。预览始终反映版本导航器当前选中的版本——切换版本可对比 Interface 在历史不同节点的表现。版本Versions版本列表位于Preview区块右侧。选择版本可将Preview、Data I/O与Code区块更新为该版本的源码。也可以从该版本旁的溢出菜单管理版本操作说明Add Description为版本添加描述。Unpublish从 Interface 创建项目后项目经理可以在项目上下文中切换 Interface 版本。取消发布某个版本会将其从Project Settings Labeling Interface的版本列表中隐藏。Data I/OData I/O区块提供 Interface 所需输入与预期输出的信息。用它确认 Interface 读取你计划导入的任务字段并产生下游工作流导出、分析、Prompts期望的标注形状。你可以编辑示例任务数据观察 Interface 对真实数据的表现。项目ProjectsProjects区块列出所有正在使用该 Interface 的项目以及每个项目固定的版本、创建日期与任务数。你可以点击项目直接打开或点击Create Project从 Interface 新建项目固定到版本导航器当前所选版本。提示编辑 Interface 不会追溯更新已有项目。每个项目都按固定的版本运行直到你从项目的标注设置中升级版本见 在项目中使用 Interface。代码CodeCode区块显示所选版本的只读 JSX 源码用于审计 Interface 实际行为、复制片段分享或粘贴到副本中、确认 Interface 暴露了你期望的可选辅助函数如paramsSchema、outputSchema或GridCell。在项目中使用 Interface创建 Interface 后即可据此创建项目。注意每个项目只能使用一个 Interface但可以在项目设置中自定义 Interface 并切换版本。创建项目从 Interfaces 列表点击溢出菜单选择Create Project。从 Interface 详情页选择Projects标签页并点击Create Project。字段说明Workspace项目创建所在的工作区。只能为共享 Interface选择工作区。Project Title项目名称。Description项目描述。项目继承了什么项目拥有自己的一份 Interface 代码副本固定在你选择的版本上之后对 Interface 的编辑不会追溯更改已有项目。项目会一直运行其固定的版本直到有人显式切换版本——可在Project Settings Labeling Interface的版本选择器中操作。配置随项目走。Interface 暴露的可配置项标签名、颜色、显示文本、哪个任务数据字段承载主要内容等按项目存储。编辑一个项目的配置不会影响其他项目即使它们共享同一个 Interface 与版本。配置项目的 Interface对于由 Interface 创建的项目可以在Settings Labeling Interface中调整 UI。在项目上下文中的调整只影响该项目的 Interface不会迭代 Interface 版本。若想迭代 Interface 版本可到 Interface 详情页点击Open Interface。Source Interface在此查看 Interface 的名称、创建日期以及项目当前使用的版本可用下拉框切换版本。Interface configuration在此配置标签名、颜色、显示文本等标注元素。后端数据支撑同样到位项目模型通过use_custom_interface/source_interface_id等字段区分自定义界面项目前端在 ImportPredictionsExample.jsx 中据此调用/api/interfaces/{id}/拉取 schema而 DraftGuard.jsx 也针对自定义界面项目做了草稿守卫适配保证保存/恢复行为与经典项目一致。总结如何选择与落地回到开篇的问题——什么时候该用 Interfaces当 XML 标签无法覆盖你的数据类型3D、GEOTiff、DICOM、当你希望以描述 → 预览 → 打磨 → 发布的方式极速迭代、当你需要版本化与跨项目复用标注 UI、或需要内嵌复杂业务逻辑时Interfaces 是最佳选择而经典 XML 标签在标准标注场景下仍然更轻量、更受标签库护栏约束。构建路径上Cloud 环境两条路径任选自托管/on-prem含 air-gapped走 Develop Locally安全侧遵循默认封闭、按需放行的原则——外部 API 走API origins、CDN 脚本走Advanced: external scripts、离线场景优先本地打包Path 3并把 iframe 能力camera、microphone 等保持在最小集合。版本管理上Interface 详情页的版本导航器与项目内的版本选择器让你随时回滚、对比与升级且已有项目不会因 Interface 的后续编辑而被追溯破坏——这一整套设计让 Interfaces 成为 Label Studio 中兼具灵活性与可控性的标注 UI 构建体系。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考