前端参考文档

Label Studio前端(LSF)包含多种用户界面选项和回调函数，您可以在使用自定义标注后端实现前端时，或定制Label Studio界面时使用。

LabelStud 1.0.0版本更新内容

如果您使用自定义后端的LSF，必须按以下方式修改所使用的API回调：

如果您依赖Label Studio已完成任务的特定格式，Label Studio的标注格式也已更新。

实现Label Studio前端界面

var labelStudio = new LabelStudio("editor", options);

初始化Label Studio实例版本1.0.0时，识别以下选项。

选项

配置

默认值: null

数据类型: string

基于XML的标注界面配置。此配置依赖于任务的data字段。 更多信息请参阅Customizable Tags。

接口

默认值: null

数据类型: array

要显示的UI元素集合。可用界面：

• panel - 为当前任务启用导航面板，包含以下按钮：撤销、重做和重置。
• update - 提交后显示更新当前任务的按钮。
• submit - 显示一个按钮用于提交或更新当前标注。
• skip - 显示一个按钮以跳过当前任务。
• controls - 启用控制面板（包含submit、update、skip按钮）。
• infobar - 信息显示按钮。
• topbar - 一个标注界面，列出Label Studio用户界面中的顶层项目。
• instruction - 一个用于instructions的按钮。
• side-column - 在Label Studio用户界面的左侧或右侧显示一个侧边栏。
• annotations:history - 显示标注历史记录的按钮。
• annotations:tabs - 显示标注标签页的按钮。
• annotations:menu - 显示标注菜单的按钮。
• annotations:current - 当前标注的显示按钮。
• annotations:add-new - 显示添加新标注的按钮。
• annotations:delete - 显示删除当前标注的按钮。
• annotations:view-all - 显示查看所有标注的按钮。
• predictions:tabs - 显示预测标签页。
• predictions:menu - 显示预测菜单。
• auto-annotation - 显示自动标注。
• edit-history - 显示编辑历史。

消息

默认值: null

数据类型: object

消息传递用于不同的操作

{
  DONE: "Done!",
  NO_COMP_LEFT: "No more annotations",
  NO_NEXT_TASK: "No more data available for labeling",
  NO_ACCESS: "You don't have access to this task"
}

• DONE - 任务提交到服务器后显示
• NO_COMP_LEFT - 如果没有更多标注时显示
• NO_NEXT_TASK - 没有下一个任务可加载
• NO_ACCESS - 无法访问提供的任务

描述

默认值: No description

数据类型: string

当前任务的描述。

任务

任务数据

默认值: null

数据类型: object

{
  id: 1,
  load: false
  },
  data: {
    text: "Labeling text..."
  },
  annotations: [],
  predictions: [],
}

id

数据类型: integer

默认值: null

数据

标注

数据类型: array

标注数组。更多信息请参阅标注文档。

预测结果

数据类型: array

预测结果数组。结构与标注结果或注释类似。更多信息请参阅标注文档和预测标签导入指南。

用户

用户数据

数据类型: object

{
  "pk": 1,
  "firstName": "Stanley",
  "lastName": "Kubrick"
}

pk

数据类型: number

firstName

数据类型: string

lastName

数据类型: string

事件系统

LSF内置了一个事件系统，允许您监听事件并触发自定义操作。在Label Studio实例初始化后，您可以随时订阅或取消订阅事件。

使用事件

订阅事件

const callback = () => {
  console.log("Event triggered");
};
labelStudio.on("event", callback);

取消订阅事件

const callback = () => {
  console.log("Event triggered");
};
labelStudio.off("event", callback);

可用事件

顶层事件

此事件组包含顶级事件。这些事件与LSF的任何内部实体无关。

labelStudioLoad

Label Studio 实例已加载。

事件处理程序参数

storageInitialized

内部存储已初始化。

事件处理程序参数

任务事件

此事件组包含与任务相关的事件。

skipTask

用户点击了“跳过”按钮。

事件处理程序参数

unskipTask

用户点击了“取消跳过”按钮。

nextTask

用户点击了“下一步”（右箭头）按钮。

prevTask

用户点击了“上一页”（左箭头）按钮。

submitDraft

草稿已发送至服务器。

标注事件

该事件组包含与标注相关的事件。

beforeSaveAnnotation

标注内容将通过submit或update操作保存为结果。 如果该事件返回false，将阻止保存标注。

submitAnnotation

标注已提交。

updateAnnotation

标注已更新。

selectAnnotation

已选择标注。

deleteAnnotation

标注已被删除。

groundTruth

标注被设为基准真值（已点击星形按钮）。

selectHistory

已选择标注历史中的步骤。

区域事件

该事件组包含与区域相关的事件。区域是在分割任务（如图像分割、音频分割等）中使用的特殊实体。

entityCreate

区域已创建。

entityDelete

区域已删除。

onSubmitAnnotation: function(ls, annotation) {
  console.log(annotation)
}

onUpdateAnnotation: function(ls, annotation) {
  console.log(result)
}

onDeleteAnnotation: function(ls, annotation) {
  console.log(result)
}

onEntityCreate: function(region) {
  console.log(region)
}

onEntityDelete: function(region) {
  console.log(region)
}

onSkipTask: function(ls) {
  console.log(result)
}

onLabelStudioLoad: function(ls) {
  console.log(result)
}