Bubbles
  • 简体中文

      • @bubblesjs/vue-annotation

      一个用于 NLP 任务的 Vue 3 文本标注组件，支持实体标注和关系标注，提供直观的可视化界面。

      特性

      • 🏷️ 实体标注：使用可自定义的实体类型标记文本片段
      • 🔗 关系标注：创建实体之间的关系
      • 🌍 RTL 支持：支持从右到左的文本方向
      • 🎨 可定制标签：定义你自己的实体和关系标签类型
      • 📱 触摸支持：同时支持桌面和移动设备
      • 🌙 暗色模式：内置暗色主题支持

      安装

      pnpm
      npm
      yarn
      pnpm add @bubblesjs/vue-annotation

      快速开始

      基础用法

      <template>
  <Annotator
    :text="text"
    :entities="entities"
    :entity-labels="entityLabels"
    @add-entity="handleAddEntity"
    @click-entity="handleClickEntity"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Annotator } from '@bubblesjs/vue-annotation'
import type { Entity, Label } from '@bubblesjs/vue-annotation'
import '@bubblesjs/vue-annotation/style.css'

const text = ref('苹果公司是一家总部位于美国加利福尼亚州库比蒂诺的跨国科技公司。')

const entityLabels = ref<Label[]>([
  { id: 1, text: '组织', color: '#4CAF50' },
  { id: 2, text: '地点', color: '#2196F3' }
])

const entities = ref<Entity[]>([
  { id: 1, startOffset: 0, endOffset: 4, label: 1 },   // 苹果公司
  { id: 2, startOffset: 14, endOffset: 19, label: 2 }, // 加利福尼亚州
  { id: 3, startOffset: 19, endOffset: 23, label: 2 }  // 库比蒂诺
])

const handleAddEntity = (event, startOffset, endOffset) => {
  console.log('选中文本:', text.value.slice(startOffset, endOffset))
  // 在这里添加你的实体创建逻辑
}

const handleClickEntity = (event, entityId) => {
  console.log('点击实体:', entityId)
}
</script>

      带关系标注

      <template>
  <Annotator
    :text="text"
    :entities="entities"
    :entity-labels="entityLabels"
    :relations="relations"
    :relation-labels="relationLabels"
    @click-relation="handleClickRelation"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Annotator } from '@bubblesjs/vue-annotation'
import type { Entity, Label, Relation } from '@bubblesjs/vue-annotation'

const text = ref('张三在谷歌公司工作，位于山景城。')

const entityLabels = ref<Label[]>([
  { id: 1, text: '人物', color: '#E91E63' },
  { id: 2, text: '组织', color: '#4CAF50' },
  { id: 3, text: '地点', color: '#2196F3' }
])

const entities = ref<Entity[]>([
  { id: 1, startOffset: 0, endOffset: 2, label: 1 },   // 张三
  { id: 2, startOffset: 3, endOffset: 7, label: 2 },  // 谷歌公司
  { id: 3, startOffset: 13, endOffset: 16, label: 3 } // 山景城
])

const relationLabels = ref<Label[]>([
  { id: 1, text: '工作于', color: '#FF9800' },
  { id: 2, text: '位于', color: '#9C27B0' }
])

const relations = ref<Relation[]>([
  { id: 1, fromId: 1, toId: 2, type: 1 }, // 张三 工作于 谷歌公司
  { id: 2, fromId: 2, toId: 3, type: 2 }  // 谷歌公司 位于 山景城
])

const handleClickRelation = (event, relation) => {
  console.log('点击关系:', relation)
}
</script>

      Props

      属性类型默认值说明
      textstring必填要标注的文本内容
      entitiesEntity[][]实体标注列表
      entityLabelsLabel[][]可用的实体标签类型
      relationsRelation[][]关系标注列表
      relationLabelsLabel[][]可用的关系标签类型
      maxLabelLengthnumber12显示的最大标签文本长度
      allowOverlappingbooleanfalse允许重叠的实体标注
      rtlbooleanfalse从右到左的文本方向
      graphemeModebooleantrue正确处理 Unicode 字素
      darkbooleanfalse启用暗色模式
      selectedEntitiesEntity[][]当前选中的实体

      事件

      事件参数说明
      add-entity(event, startOffset, endOffset)用户选择文本创建实体时触发
      click-entity(event, entityId)用户点击实体时触发
      click-relation(event, relation)用户点击关系时触发
      contextmenu-entity(entity)实体右键点击时触发
      contextmenu-relation(relation)关系右键点击时触发

      类型定义

      // 实体标注
interface Entity {
  id: number
  startOffset: number
  endOffset: number
  label: number // 引用 Label.id
}

// 标签定义
interface Label {
  id: number
  text: string
  color?: string
}

// 关系标注
interface Relation {
  id: number
  fromId: number // 引用 Entity.id
  toId: number   // 引用 Entity.id
  type: number   // 引用 Label.id
}

      高级用法

      暗色模式

      <template>
  <div :class="{ 'dark-theme': isDark }">
    <Annotator
      :text="text"
      :entities="entities"
      :entity-labels="entityLabels"
      :dark="isDark"
    />
  </div>
</template>

      RTL 支持（阿拉伯语、希伯来语等）

      <template>
  <Annotator
    :text="arabicText"
    :entities="entities"
    :entity-labels="entityLabels"
    :rtl="true"
  />
</template>

      正确处理 Unicode

      graphemeMode 属性确保正确处理复杂的 Unicode 字符，如 emoji：

      <template>
  <Annotator
    :text="'你好 👨‍👩‍👧‍👦 世界'"
    :entities="entities"
    :entity-labels="entityLabels"
    :grapheme-mode="true"
  />
</template>

      使用场景

      • 命名实体识别（NER）标注
      • 文本分类标注
      • 关系抽取标注
      • 情感分析标注
      • 机器学习文档标注