crowd-bounding-box
用于在图像上绘制矩形并为图像中每个矩形所包围的部分分配一个标签的小部件。
请参阅在 CodePen
以下是使用 <crowd-bounding-box>
元素的 Liquid 模板的示例。复制以下代码,并保存到具有 .html
扩展名的文件中。在任何浏览器中打开该文件,进行预览并与该模板进行交互。有关更多示例,请参阅该 GitHub 存储库
属性
此元素支持以下属性。
header
要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。
initial-value
JSON 对象的数组,其中每个对象在组件加载时都设置一个边界框。数组中的每个 JSON 对象包含以下属性。可以调整通过 initial-value
属性设置的边界框,并通过工作人员答案输出中的 initialValueModified
布尔值跟踪工作人员答案是否已调整。
-
height – 框的高度(以像素为单位)。
-
label – 作为标注任务的一部分分配给框的文本。此文本必须与在 <crowd-bounding-box> 元素的 labels 属性中定义的其中一个标签相匹配。
-
left – 框左上角与图像左侧的距离,以像素为单位。
-
top – 框左上角与图像顶部的距离,以像素为单位。
-
width – 框的宽度(以像素为单位)。
您可以使用 Liquid 模板语言从自定义模板中以前作业的清单文件中提取边界框初始值:
initial-value="[ {% for box in task.input.manifestLine.
label-attribute-name-from-prior-job
.annotations %} {% capture class_id %}{{ box.class_id }}{% endcapture %} {% assign label = task.input.manifestLine.label-attribute-name-from-prior-job
-metadata.class-map[class_id] %} { label: {{label | to_json}}, left: {{box.left}}, top: {{box.top}}, width: {{box.width}}, height: {{box.height}}, }, {% endfor %} ]"
labels
一个 JSON 格式的字符串数组,其中每个字符串都是一个标签,工作人员可以将其分配给图像中由矩形包围的部分。限制:10 个标签。
name
此小部件的名称。它用作小部件输入(以输出格式表示)的密钥。
src
在其上绘制边界框的图像的 URL。
元素层次结构
此元素具有以下父元素和子元素。
区域
此元素需要以下区域。
full-instructions
有关如何绘制边界框的一般说明。
short-instructions
在醒目位置显示的重要的任务特定说明。
输出
此元素支持以下输出。
boundingBoxes
JSON 对象的数组,其中每个对象指定已由工作人员创建的一个边界框。数组中的每个 JSON 对象包含以下属性。
-
height – 框的高度(以像素为单位)。
-
label – 作为标注任务的一部分分配给框的文本。此文本必须与在 <crowd-bounding-box> 元素的 labels 属性中定义的其中一个标签相匹配。
-
left – 框左上角与图像左侧的距离,以像素为单位。
-
top – 框左上角与图像顶部的距离,以像素为单位。
-
width – 框的宽度(以像素为单位)。
inputImageProperties
一个 JSON 对象,它指定正在由工作人员注释的图像的维度。此对象包含以下属性。
-
height – 图像的高度(以像素为单位)。
-
width – 图像的宽度(以像素为单位)。
例 :示例元素输出
以下是此元素的常见使用情况的输出示例。
单一标签、单一框/多个标签、单一框
[ { "annotatedResult": { "boundingBoxes": [ { "height": 401, "label": "Dog", "left": 243, "top": 117, "width": 187 } ], "inputImageProperties": { "height": 533, "width": 800 } } } ]
单一标签、多个框
[ { "annotatedResult": { "boundingBoxes": [ { "height": 401, "label": "Dog", "left": 243, "top": 117, "width": 187 }, { "height": 283, "label": "Dog", "left": 684, "top": 120, "width": 116 } ], "inputImageProperties": { "height": 533, "width": 800 } } } ]
多个标签、多个框
[ { "annotatedResult": { "boundingBoxes": [ { "height": 395, "label": "Dog", "left": 241, "top": 125, "width": 158 }, { "height": 298, "label": "Cat", "left": 699, "top": 116, "width": 101 } ], "inputImageProperties": { "height": 533, "width": 800 } } } ]
您可以有多个标签,但只有所使用的标签会显示在输出中。
另请参阅
有关更多信息,请参阅下列内容。