Label Studio Ranker 标签详解基于 List 的排序与分桶标注方案【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioRanker 是 Label Studio 中用于对List标签展示的列表项进行排序或挑选/分桶的交互式控制标签。本文将围绕 docs/source/tags/ranker.md 展开结合前端编辑器源码与单元测试讲解 Ranker 的两种核心用法纯排序、Bucket 分桶、默认桶行为、结果数据格式、样式定制以及底层实现原理帮助你在搜索相关性标注、检索结果排序、内容精选等场景中直接落地一套可运行的标注配置。Ranker 标签概述与参数Ranker是编辑器内注册的一个控制类标签在源码中通过Registry.addTag(ranker, RankerModel, HtxRanker)注册见 web/libs/editor/src/tags/control/Ranker.jsx。它的核心作用是让标注者从List标签展示的候选项中通过拖拽完成排序调整先后顺序或挑选归入不同的 Bucket 分组。ParamTypeDescriptionnamestring元素名称即结果中from_name的取值toNamestring需要连接的 List 标签名称该参数表与 docs/source/includes/tags/ranker.md 中一致。此外从源码的 MST 模型定义web/libs/editor/src/tags/control/Ranker.jsx还可以看到type: ranker固定类型标识结果输出中的type字段即来源于此toname指向一个List标签二者通过名称连接children限定为[bucket]即 Ranker 内部只允许嵌套Bucket子标签collapsible默认值为true允许折叠列。配合使用的 List 标签Ranker必须与List搭配使用。List标签用于展示一系列同构条目如文章、搜索结果等其value参数对应的任务数据应为包含id、title、body、html字段的对象数组List nameresults value$items titleSearch Results /{ items: [ { id: blog, title: 10 tips to write a better function, body: There is nothing worse than being left in the lurch when it comes to writing a function! }, { id: mdn, title: Arrow function expressions, body: An arrow function expression is a compact alternative to a traditional function }, { id: wiki, title: Arrow (computer science), body: In computer science, arrows or bolts are a type class... } ] }根据 web/libs/editor/src/tags/control/Ranker.jsx 中的listgetterRanker 会从annotation.names中按toname查找对应标签并校验其type list否则返回null此时界面不会渲染。用法一List Ranker 纯排序模式当Ranker内不嵌套任何 Bucket时即rankOnly模式!self.buckets.length见 web/libs/editor/src/tags/control/Ranker.jsxList会变为可交互的列表标注者可以上下拖拽条目来改变其先后顺序。示例标注配置可以用Style标签自定义布局外观Ranker 预留了两个预定义类名.htx-ranker-column用于列即分桶模式下的桶列纯排序模式下对应唯一列表列.htx-ranker-item用于列表条目View Style .htx-ranker-column { background: cornflowerblue; } .htx-ranker-item { background: lightgoldenrodyellow; } /Style List nameresults value$items titleSearch Results / Ranker namerank toNameresults / /View仓库自带示例 web/libs/editor/src/examples/ranker/config.xml 与该配置结构一致只是 List 命名为search。输入数据使用上文的三条目items数组作为任务数据即可。保存的结果格式排序完成后保存的结果是一个字典以 Ranker 标签的name作为唯一键值为按新顺序排列的列表项 id 数组。例如标注者把id: mdn的条目拖到最顶部、把id: blog拖到最底部输出为[ { value: { ranker: { rank: [ mdn, wiki, blog ] } }, id: PpwBv_NMxd, from_name: rank, to_name: results, type: ranker, origin: manual } ]仓库示例 web/libs/editor/src/examples/ranker/annotations/1.json 展示了同结构的真实标注输出其中value.ranker为按新顺序排列的 id 数组type为rankerfrom_name为rank。源码行为验证在纯排序模式下columnsgetter 返回单一列[{ id: self.name, title: self.list.title }]即列 id 等于 Ranker 的nameweb/libs/editor/src/tags/control/Ranker.jsx。单元测试 web/libs/editor/src/tags/control/tests/Ranker.test.ts 验证了此模式下rankOnly为true、defaultBucket等于 Ranker 自身的 name、columns 仅含一列若标注者从未做过任何操作beforeSend会在提交时自动把所有条目按原始顺序写入结果web/libs/editor/src/tags/control/Ranker.jsx保证每条任务都有完整的排序结果。用法二List Ranker Buckets 分桶模式当Ranker内嵌套一个或多个Bucket标签时界面会变成多列看板左侧通常是原始列表列右侧每个Bucket对应一列。标注者可以把条目拖入任意桶中实现“从候选项中挑选相关项并归组”。Bucket是 Ranker 的子标签其参数见 web/libs/editor/src/tags/control/Ranker.jsx 的 JSDoc 与 MST 模型ParamTypeDescriptionnamestring列名作为结果字典中的键titlestring列的标题defaultboolean默认false设为true后该桶成为默认桶示例标注配置View List nameresults value$items titleSearch Results / Ranker namerank toNameresults Bucket namebest titleBest results / Bucket nameads titlePaid results / /Ranker /View保存的结果格式分桶模式的结果是一个字典每个桶名Bucket 的name作为键值为该桶内条目 id 数组。例如把mdn归入best、blog归入ads[ { value: { ranker: { _: [ wiki ], best: [ mdn ], ads: [ blog ] } }, id: sjYK7Bcl7g, from_name: rank, to_name: results, type: ranker, origin: manual } ]注意其中的_键它保存未被拖入任何桶的条目。当未指定默认桶时原始列表列会以_为列 id 保留源码中ORIGINAL_ITEMS_KEY _见 web/libs/editor/src/tags/control/Ranker.jsx未归桶条目在导出时会归入该键。测试 web/libs/editor/src/tags/control/tests/Ranker.test.ts 明确验证了“未产生结果时所有条目都在_桶产生结果后未被分组的条目仍归入_桶”的行为。用法三默认桶 defaulttrue给某个Bucket加上defaulttrue可以改变未归桶条目的去向View List nameresults value$items titleSearch Results / Ranker namerank toNameresults Bucket namebest titleBest results defaulttrue / Bucket nameads titlePaid results / /Ranker /View这一设置会带来两个可见变化隐藏原始列表列界面不再显示“Search Results”这一未排序条目的列未归桶条目自动落入默认桶标注者没有手动处理的条目在提交时会被放入默认桶。对应的结果格式中不再出现_键未归桶条目直接存在默认桶名下。例如wiki未被处理结果如下[ { value: { ranker: { best: [ mdn, wiki ], ads: [ blog ] } }, id: 8QaNxe4hN3, from_name: rank, to_name: results, type: ranker, origin: manual } ]源码中的三种模式源码将 Ranker 的defaultBucketgetter 明确区分为三种运行模式web/libs/editor/src/tags/control/Ranker.jsxrank 模式排序没有 BucketdefaultBucket返回 Ranker 自身的namepick 模式挑选有 Bucket 但均非默认defaultBucket返回undefined此时保留_原始列表列group 模式分组存在defaulttrue的 BucketdefaultBucket返回该桶的name此时columns不再包含_列web/libs/editor/src/tags/control/Ranker.jsx。这三种模式在 web/libs/editor/src/tags/control/tests/Ranker.test.ts 中各有独立的describe测试块覆盖包括无结果时的初始数据分布、有结果时的数据分布、columns 构成以及defaultBucket的取值可直接作为理解行为边界的参考。交互与样式定制拖拽交互实现Ranker 的前端交互由 web/libs/editor/src/components/Ranker/Ranker.tsx 承载基于react-beautiful-dnd的DragDropContext实现同列内拖拽调整该列内条目的先后顺序对应纯排序模式的排序行为跨列拖拽把条目从一个桶移动到另一个桶对应分桶模式每次拖拽结束handleDragEnd都会通过handleChange回调把最新的itemIds形如{ 列名: [id, ...] }同步给 MST 层MST 层再调用updateResult/createResult写入标注结果web/libs/editor/src/tags/control/Ranker.jsxreadonly模式下拖拽能力会被禁用适合回放或审核场景。样式类名除了前文提到的.htx-ranker-column与.htx-ranker-item从List标签文档docs/source/tags/list.md可以看到.htx-ranker-item也可用于直接修饰 List 中的条目。列标题文案则通过每个Bucket的title参数控制。适合的应用场景与相关模板Ranker 适合需要人工对候选项进行相对排序或相关性筛选的标注任务例如搜索排序评测、检索结果相关性标注、内容精选与去重排序等。文档末尾还关联了两个可直接参考的模板生成式视觉排序模板生成式 LLM 排序RAG 检索反馈模板结合 web/libs/editor/src/examples/ranker_buckets/ 下的配置与标注示例可以快速搭建起“排序 分桶”的完整标注流程。导出时type: ranker的结果会以标准 Label Studio 标注格式from_name/to_name/value/origin保存便于后续接入 ML 流水线或作为偏好数据训练排序模型。【免费下载链接】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），仅供参考