Label Studio List 标签实战指南轻量列表展示、Ranker 排序标注与结果导出【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioList是 Label Studio 标签体系中用于展示同类型条目集合的对象标签典型场景包括搜索结果、文章列表等。它比把多个Text标签塞进View分组更轻量还能与Ranker标签组合实现拖拽排序、相关条目筛选或配合Style标签定制界面外观。读完本文你将掌握List的完整配置语法、任务数据结构要求、与Ranker/Bucket的协作模式、标注结果格式以及对应的前端源码实现细节。List 标签概述在 Label Studio 的标注配置Labeling Config中List标签用于展示一组同类型条目例如文章、搜索结果、候选答案等。任务数据中value参数指向的字段应是一个对象数组每个对象包含id、title、body、html字段。官方文档与源码注释对它的定位很明确见 List.jsx相比把多个Text标签分组List更加轻量适合一次性展示大量同构条目可以为列表附加分类标注如Choices等提供关于该列表的额外信息可与Ranker标签配合对列表条目进行排序或挑选相关条目条目可以通过Style标签中的.htx-ranker-item类进行样式定制。List标签在标签体系中属于对象Object类型通过Registry.addTag(list, ListModel, HtxList)注册并同时注册为对象类型Registry.addObjectType(ListModel)因而可以作为toName的目标被其他控制标签如Ranker、分类标签引用。参数详解List标签支持以下参数来源文档 参数表 与源码 List.jsx参数类型是否必填默认值说明namestring是—元素名称用于在标注结果中标识该列表同时被toName引用valuestring是—任务数据字段名其值应为 JSON 对象数组每个对象含id、title、body、html字段作为待展示/排序的条目titlestring否空字符串列表标题会渲染为列标题文本从源码模型定义看List的 MobX State Tree 模型中还有内部字段_value类型为 frozen 数组它是在初始化时通过updateValue动作从任务数据解析填充的title参数类型为types.optional(types.string, )即未提供时为空字符串。任务数据结构要求List标签的value指向的任务数据字段必须是对象数组每个条目建议包含以下字段字段类型说明idstring/number条目唯一标识渲染时会被强制转为字符串并作为拖拽与结果中的引用键titlestring条目标题渲染为条目的标题行bodystring条目正文文本htmlstring条目 HTML 内容渲染前会经过sanitizeHtml净化见 Item.tsx官方文档给出的第一个示例是纯文本风格的列表数据{ 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... } ] }第二个示例展示如何使用html字段嵌入富媒体内容{ items: [ { id: blog, title: Image 1, html: img srchttp://example.com/1.jpg }, { id: mdn, title: Image 2, html: img srchttp://example.com/2.jpg } ] }注意html字段渲染时会经过sanitizeHtml净化处理以降低 XSS 等安全风险id字段在解析时会被统一转为字符串见 List.jsx 的updateValue动作以保证后续以 id 为键进行匹配和排序时的一致性。纯展示模式基本用法示例当标注任务只需要展示列表而不需要标注者排序时可直接使用List标签。此时它内部以只读方式渲染一个看板board组件将所有条目平铺在标题为title参数的单列中View Style .htx-ranker-column { background: cornflowerblue; } .htx-ranker-item { background: lightgoldenrodyellow; } /Style List nameresults value$items titleSearch Results / /View上述示例同时演示了样式定制.htx-ranker-column控制列表列容器背景.htx-ranker-item控制每个条目的背景。配合上面的items任务数据界面上会呈现一个标题为 Search Results 的列表其中包含三个可折叠展示的条目标题 正文。从源码实现看List.jsxHtxList组件从item.dataSource获取数据包含items、columns、itemIds然后渲染Ranker inputData{data} readonly /。其中readonly为true表示纯展示、禁止拖拽同时如果该List已被某个Ranker标签关联item.ranker非空HtxList会直接返回null——交互渲染交给Ranker接管避免双重渲染。与 Ranker 标签配合拖拽排序与结果格式List与Ranker组合是最核心的用法。Ranker通过toName关联到List此时列表变为可交互标注者可以拖拽条目来调整顺序或在使用Bucket时将条目分入不同分组。View Style .htx-ranker-column { background: cornflowerblue; } .htx-ranker-item { background: lightgoldenrodyellow; } /Style List nameresults value$items titleSearch Results / Ranker namerank toNameresults / /View简单排序模式下标注结果是一个以Ranker的name为键、值为按新顺序排列的条目 id 数组的字典{ from_name: rank, to_name: results, type: ranker, value: { ranker: { rank: [mdn, wiki, blog] } } }也就是说标注者将 mdn 拖到第一位后导出的结果中rank数组即为[mdn, wiki, blog]。Ranker标签的参数如下见 Ranker.jsx参数类型默认值说明namestring—元素名称作为结果字典的键toNamestring—关联的List标签名称collapsiblebooleantrue条目是否可折叠展开排序与分组的交互逻辑位于 Ranker.tsx底层基于react-beautiful-dnd的DragDropContext/Draggable/Droppable实现拖动结束时handleDragEnd根据source与destination判断是同列内重排还是跨列移动更新itemIds状态并通过handleChange回调写入标注结果对应Ranker模型中的updateResult/createResult动作。排序结果会在每次拖拽后实时写入annotation.results。使用 Bucket 分组从列表中挑选相关条目当需要标注者从列表中挑选条目并归入不同类别而非整体排序时可在Ranker内嵌套Bucket子标签。每个Bucket对应一个目标列/分组View List nameresults value$items titleSearch Results / Ranker namerank toNameresults Bucket namebest titleBest results / Bucket nameads titlePaid results / /Ranker /ViewBucket标签参数见 Ranker.jsx参数类型默认值说明namestring—列名作为结果字典中的键titlestringnull列标题defaultbooleanfalse若为trueList中的条目默认全部放入该列否则条目默认停留在原列表不使用default参数时默认所有条目停留在原List列内部以_作为该列键只有被拖入Bucket的条目才会被导出结果按Bucket分组{ from_name: rank, to_name: results, type: ranker, value: { ranker: { best: [mdn], ads: [blog] } } }给某个Bucket设置defaulttrue后所有条目默认落入该列导出结果始终包含完整条目集合。从源码 Ranker.jsx 可以确认三种模式rank 模式无BucketdefaultBucket为Ranker自身name单一可排序列pick 模式有Bucket但无defaultdefaultBucket为undefined条目默认留在_原列表列未被分组的条目不会进入结果中的命名分组group 模式有defaulttrue的BucketdefaultBucket为对应Bucket的name条目默认全部分组导出。此外beforeSend动作会在提交时兜底创建结果若尚未产生任何结果则以空列结构 全量条目 id 填充默认落入defaultBucket或_列保证导出数据完整见 Ranker.jsx。注意源码注释提示未使用default参数时_原列表列属于内部值未来版本可能调整。样式定制List/Ranker的界面元素暴露了预定义 CSS 类可在Style标签中定制CSS 类作用元素源码位置.htx-ranker-column每个列表列含标题与条目容器Column.tsx.htx-ranker-item每个可拖拽条目卡片Item.tsx官方示例通过这两个类分别设置列背景色与条目背景色实现搜索结果风格的视觉区分。除颜色外也可以配合Style标签调整字号、内边距、边框等任意 CSS 属性。源码实现要点List标签的完整前端实现在 List.jsx关键设计如下数据解析updateValue(store)通过parseValue(self.value, store.task.dataObj)从任务数据中取出数组非数组直接忽略随后将每个条目 id 转为字符串存入_valueList.jsx。parseValue的定义见 data.js它负责解析形如$items的字段引用。数据源组装dataSource视图将_value映射为{ items, columns, itemIds }结构其中columns为[{ id: name, title }]itemIds将该列与全部条目 id 关联List.jsx供看板组件消费。渲染接管HtxList在存在关联Ranker时不渲染自身避免与交互式Ranker重复显示List.jsx。条目渲染Item组件负责渲染每个条目title显示为标题行html字段经sanitizeHtml净化后渲染条目支持折叠展开默认collapsible开启并携带data-ranker-id便于测试与样式定位Item.tsx。标签的 schema 定义含参数描述与元信息同时维护在 tags.json供配置校验与文档生成使用List、Ranker、Bucket三种标签均在其中登记。仓库内还提供了可直接加载运行的示例配置ranker/config.xml简单排序与 ranker_buckets/config.xmlBucket 分组可作为快速上手的参考模板。相关文件与进一步阅读官方标签文档List 标签、参数表前端实现List.jsx、Ranker.jsx看板与拖拽组件Ranker.tsx、Column.tsx、Item.tsx示例配置ranker/config.xml、ranker_buckets/config.xml单元测试Ranker.test.ts相关标签文档Ranker 标签、Style 标签、View 标签在实际项目中建议优先用ListRanker处理长列表排序/筛选类任务如搜索结果相关性标注、推荐候选排序用List纯展示配合分类标签完成列表级分类任务需要富媒体展示时使用html字段需要分组导出时使用Bucket与default参数组合并始终通过.htx-ranker-column/.htx-ranker-item类保持界面与业务视觉一致。【免费下载链接】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），仅供参考
Label Studio List 标签实战指南：轻量列表展示、Ranker 排序标注与结果导出
Label Studio List 标签实战指南轻量列表展示、Ranker 排序标注与结果导出【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studioList是 Label Studio 标签体系中用于展示同类型条目集合的对象标签典型场景包括搜索结果、文章列表等。它比把多个Text标签塞进View分组更轻量还能与Ranker标签组合实现拖拽排序、相关条目筛选或配合Style标签定制界面外观。读完本文你将掌握List的完整配置语法、任务数据结构要求、与Ranker/Bucket的协作模式、标注结果格式以及对应的前端源码实现细节。List 标签概述在 Label Studio 的标注配置Labeling Config中List标签用于展示一组同类型条目例如文章、搜索结果、候选答案等。任务数据中value参数指向的字段应是一个对象数组每个对象包含id、title、body、html字段。官方文档与源码注释对它的定位很明确见 List.jsx相比把多个Text标签分组List更加轻量适合一次性展示大量同构条目可以为列表附加分类标注如Choices等提供关于该列表的额外信息可与Ranker标签配合对列表条目进行排序或挑选相关条目条目可以通过Style标签中的.htx-ranker-item类进行样式定制。List标签在标签体系中属于对象Object类型通过Registry.addTag(list, ListModel, HtxList)注册并同时注册为对象类型Registry.addObjectType(ListModel)因而可以作为toName的目标被其他控制标签如Ranker、分类标签引用。参数详解List标签支持以下参数来源文档 参数表 与源码 List.jsx参数类型是否必填默认值说明namestring是—元素名称用于在标注结果中标识该列表同时被toName引用valuestring是—任务数据字段名其值应为 JSON 对象数组每个对象含id、title、body、html字段作为待展示/排序的条目titlestring否空字符串列表标题会渲染为列标题文本从源码模型定义看List的 MobX State Tree 模型中还有内部字段_value类型为 frozen 数组它是在初始化时通过updateValue动作从任务数据解析填充的title参数类型为types.optional(types.string, )即未提供时为空字符串。任务数据结构要求List标签的value指向的任务数据字段必须是对象数组每个条目建议包含以下字段字段类型说明idstring/number条目唯一标识渲染时会被强制转为字符串并作为拖拽与结果中的引用键titlestring条目标题渲染为条目的标题行bodystring条目正文文本htmlstring条目 HTML 内容渲染前会经过sanitizeHtml净化见 Item.tsx官方文档给出的第一个示例是纯文本风格的列表数据{ 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... } ] }第二个示例展示如何使用html字段嵌入富媒体内容{ items: [ { id: blog, title: Image 1, html: img srchttp://example.com/1.jpg }, { id: mdn, title: Image 2, html: img srchttp://example.com/2.jpg } ] }注意html字段渲染时会经过sanitizeHtml净化处理以降低 XSS 等安全风险id字段在解析时会被统一转为字符串见 List.jsx 的updateValue动作以保证后续以 id 为键进行匹配和排序时的一致性。纯展示模式基本用法示例当标注任务只需要展示列表而不需要标注者排序时可直接使用List标签。此时它内部以只读方式渲染一个看板board组件将所有条目平铺在标题为title参数的单列中View Style .htx-ranker-column { background: cornflowerblue; } .htx-ranker-item { background: lightgoldenrodyellow; } /Style List nameresults value$items titleSearch Results / /View上述示例同时演示了样式定制.htx-ranker-column控制列表列容器背景.htx-ranker-item控制每个条目的背景。配合上面的items任务数据界面上会呈现一个标题为 Search Results 的列表其中包含三个可折叠展示的条目标题 正文。从源码实现看List.jsxHtxList组件从item.dataSource获取数据包含items、columns、itemIds然后渲染Ranker inputData{data} readonly /。其中readonly为true表示纯展示、禁止拖拽同时如果该List已被某个Ranker标签关联item.ranker非空HtxList会直接返回null——交互渲染交给Ranker接管避免双重渲染。与 Ranker 标签配合拖拽排序与结果格式List与Ranker组合是最核心的用法。Ranker通过toName关联到List此时列表变为可交互标注者可以拖拽条目来调整顺序或在使用Bucket时将条目分入不同分组。View Style .htx-ranker-column { background: cornflowerblue; } .htx-ranker-item { background: lightgoldenrodyellow; } /Style List nameresults value$items titleSearch Results / Ranker namerank toNameresults / /View简单排序模式下标注结果是一个以Ranker的name为键、值为按新顺序排列的条目 id 数组的字典{ from_name: rank, to_name: results, type: ranker, value: { ranker: { rank: [mdn, wiki, blog] } } }也就是说标注者将 mdn 拖到第一位后导出的结果中rank数组即为[mdn, wiki, blog]。Ranker标签的参数如下见 Ranker.jsx参数类型默认值说明namestring—元素名称作为结果字典的键toNamestring—关联的List标签名称collapsiblebooleantrue条目是否可折叠展开排序与分组的交互逻辑位于 Ranker.tsx底层基于react-beautiful-dnd的DragDropContext/Draggable/Droppable实现拖动结束时handleDragEnd根据source与destination判断是同列内重排还是跨列移动更新itemIds状态并通过handleChange回调写入标注结果对应Ranker模型中的updateResult/createResult动作。排序结果会在每次拖拽后实时写入annotation.results。使用 Bucket 分组从列表中挑选相关条目当需要标注者从列表中挑选条目并归入不同类别而非整体排序时可在Ranker内嵌套Bucket子标签。每个Bucket对应一个目标列/分组View List nameresults value$items titleSearch Results / Ranker namerank toNameresults Bucket namebest titleBest results / Bucket nameads titlePaid results / /Ranker /ViewBucket标签参数见 Ranker.jsx参数类型默认值说明namestring—列名作为结果字典中的键titlestringnull列标题defaultbooleanfalse若为trueList中的条目默认全部放入该列否则条目默认停留在原列表不使用default参数时默认所有条目停留在原List列内部以_作为该列键只有被拖入Bucket的条目才会被导出结果按Bucket分组{ from_name: rank, to_name: results, type: ranker, value: { ranker: { best: [mdn], ads: [blog] } } }给某个Bucket设置defaulttrue后所有条目默认落入该列导出结果始终包含完整条目集合。从源码 Ranker.jsx 可以确认三种模式rank 模式无BucketdefaultBucket为Ranker自身name单一可排序列pick 模式有Bucket但无defaultdefaultBucket为undefined条目默认留在_原列表列未被分组的条目不会进入结果中的命名分组group 模式有defaulttrue的BucketdefaultBucket为对应Bucket的name条目默认全部分组导出。此外beforeSend动作会在提交时兜底创建结果若尚未产生任何结果则以空列结构 全量条目 id 填充默认落入defaultBucket或_列保证导出数据完整见 Ranker.jsx。注意源码注释提示未使用default参数时_原列表列属于内部值未来版本可能调整。样式定制List/Ranker的界面元素暴露了预定义 CSS 类可在Style标签中定制CSS 类作用元素源码位置.htx-ranker-column每个列表列含标题与条目容器Column.tsx.htx-ranker-item每个可拖拽条目卡片Item.tsx官方示例通过这两个类分别设置列背景色与条目背景色实现搜索结果风格的视觉区分。除颜色外也可以配合Style标签调整字号、内边距、边框等任意 CSS 属性。源码实现要点List标签的完整前端实现在 List.jsx关键设计如下数据解析updateValue(store)通过parseValue(self.value, store.task.dataObj)从任务数据中取出数组非数组直接忽略随后将每个条目 id 转为字符串存入_valueList.jsx。parseValue的定义见 data.js它负责解析形如$items的字段引用。数据源组装dataSource视图将_value映射为{ items, columns, itemIds }结构其中columns为[{ id: name, title }]itemIds将该列与全部条目 id 关联List.jsx供看板组件消费。渲染接管HtxList在存在关联Ranker时不渲染自身避免与交互式Ranker重复显示List.jsx。条目渲染Item组件负责渲染每个条目title显示为标题行html字段经sanitizeHtml净化后渲染条目支持折叠展开默认collapsible开启并携带data-ranker-id便于测试与样式定位Item.tsx。标签的 schema 定义含参数描述与元信息同时维护在 tags.json供配置校验与文档生成使用List、Ranker、Bucket三种标签均在其中登记。仓库内还提供了可直接加载运行的示例配置ranker/config.xml简单排序与 ranker_buckets/config.xmlBucket 分组可作为快速上手的参考模板。相关文件与进一步阅读官方标签文档List 标签、参数表前端实现List.jsx、Ranker.jsx看板与拖拽组件Ranker.tsx、Column.tsx、Item.tsx示例配置ranker/config.xml、ranker_buckets/config.xml单元测试Ranker.test.ts相关标签文档Ranker 标签、Style 标签、View 标签在实际项目中建议优先用ListRanker处理长列表排序/筛选类任务如搜索结果相关性标注、推荐候选排序用List纯展示配合分类标签完成列表级分类任务需要富媒体展示时使用html字段需要分组导出时使用Bucket与default参数组合并始终通过.htx-ranker-column/.htx-ranker-item类保持界面与业务视觉一致。【免费下载链接】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），仅供参考
