如何在Label Studio中自定义Visual & Experience Tags并查找标签实现目录

一、找到标签实现的核心目录 #

Label Studio的前端组件（包含三类标签）都在仓库的label-studio-frontend子目录中，其中Visual & Experience Tags的源码位于：
label-studio-frontend/src/components/tags/visual/
这里存放了所有视觉/体验类内置标签（如<Filter>、<Style>），可直接参考这些内置标签的实现逻辑。

二、创建自定义复选框过滤标签的步骤 #

1. 新建组件文件 #

在label-studio-frontend/src/components/tags/visual/目录下，新建Vue组件文件，比如命名为CustomFilterCheckbox.vue。

2. 编写组件逻辑 #

参考内置<Filter>标签的代码结构，实现复选框选择后过滤标签的功能，核心要点包括：

• 接收标注配置传入的参数（如可选过滤选项）
• 与Label Studio全局状态（store）交互，获取当前标注的标签列表
• 实现复选框选择事件，触发过滤逻辑更新标注界面

示例核心代码片段（Vue语法）：

<template>
  <div class="custom-filter-checkbox">
    <label v-for="choice in choices" :key="choice">
      <input
        type="checkbox"
        :value="choice"
        :checked="selected.includes(choice)"
        @change="handleChange"
      />
      {{ choice }}
    </label>
  </div>
</template>

<script>
export default {
  props: {
    choices: { type: Array, required: true },
    value: { type: Array, default: () => [] }
  },
  data() {
    return {
      selected: [...this.value]
    };
  },
  methods: {
    handleChange(event) {
      const value = event.target.value;
      this.selected = event.target.checked 
        ? [...this.selected, value] 
        : this.selected.filter(item => item !== value);
      this.$emit('input', this.selected);
      // 触发标签过滤逻辑，调用store方法更新可见标签
      this.$store.dispatch('annotations/filterLabels', this.selected);
    }
  }
};
</script>

3. 注册自定义标签 #

在label-studio-frontend/src/components/tags/index.js文件中，导入新组件并添加到导出列表：

import CustomFilterCheckbox from './visual/CustomFilterCheckbox';

export default {
  // ...其他已有的标签
  CustomFilterCheckbox
};

4. 构建前端代码 #

回到Label Studio主仓库根目录，执行构建命令打包前端代码：

npm run build

若处于开发调试阶段，可启动热重载服务：

npm run start

5. 在标注配置中使用自定义标签 #

在标注XML配置里直接调用新创建的标签：

<View>
  <CustomFilterCheckbox name="label-filter" choices="['Category A', 'Category B', 'Category C']" />
  <!-- 其他标注标签 -->
  <Labels name="labels" toName="image">
    <Label value="Category A" />
    <Label value="Category B" />
    <Label value="Category C" />
  </Labels>
  <Image name="image" value="$image" />
</View>

三、注意事项 #

• 必须遵循Label Studio的状态管理规范，参考内置标签实现，避免兼容性问题
• 复杂过滤逻辑可直接调用Label Studio内置的store方法或事件总线，与标注核心模块交互

内容的提问来源于stack exchange，提问作者Es Raa