SageMaker 人群 HTML 元素

下面列出了一些 Crowd HTML Elements，它们能让构建自定义模板变得更容易，并为工作人员提供熟悉的 UI。Ground Truth、Augmented AI 和 Mechanical Turk 支持这些元素。

提醒工作人员注意当前情况的消息。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-alert> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

dismissible

一个布尔值开关，如果存在，允许工作人员关闭消息。

type

一个字符串，它指定要显示的消息的类型。可能的值为“info”（默认值）、“success”、“error”和“warning”。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

一个图标，悬浮在它要附加到的另一个元素的右上角。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-badge> 元素的模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

for

一个字符串，它指定徽章附加到的元素的 ID。

icon

一个字符串，它指定徽章中要显示的图标。该字符串必须是开源 iron-icons 集中的图标的名称（预加载）或者是指向自定义图标的 URL。

此属性覆盖 label 属性。

以下是可用于在 <crowd-badge> HTML 元素中添加 iron-icon 的语法的示例。请将 icon-name 替换为要从该图标集中使用的图标的名称。


<crowd-badge icon="icon-name" for="short-instructions"/>

label

要在徽章中显示的文本。建议使用三个或更少字符，因为文本太大将溢出徽章区域。可以通过设置 icon 属性显示图标而非文本。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

表示某项操作的样式按钮。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-button> 元素的模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

disabled

一个布尔值开关，如果存在，将按钮显示为已禁用并防止点击。

form-action

一个开关，如果设置为“submit”，则提交其父 crowd-form 元素；如果设置为“reset”，则重置其父 <crowd-form> 元素。

href

指向在线资源的 URL。如果您需要样式为按钮的链接，则使用此属性。

icon

一个字符串，它指定按钮的文本旁边要显示的图标。该字符串必须是开源 iron-icons 集中的图标的名称（预加载）。例如，要插入搜索 iron-icon，请使用以下命令：


<crowd-button>
    <iron-icon icon="search"/>
</crowd-button>

该图标定位在文本的左侧或右侧，具体由 icon-align 属性指定。

要使用自定义图标，请参阅 icon-url。

icon-align

图标相对于按钮文本的左或右位置。默认为“左侧”。

icon-url

指向图标的自定义图像的 URL。可以使用自定义图像取代由 icon 属性指定的标准图标。

正在加载

一个布尔值开关，如果存在，将按钮显示为正处于加载状态。此属性优先于 disabled 属性（如果这两个属性都存在）。

target

当您使用 href 属性让按钮充当指向特定 URL 的超链接时，target 属性可选指向链接的 URL 应加载的框架或窗口。

variant

按钮的一般样式。对于主要按钮使用“primary”，对于辅助按钮使用“normal”，对于第三级按钮使用“link”，或者使用“icon”只显示无文本的图标。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

用于在图像上绘制矩形并为图像中每个矩形所包围的部分分配一个标签的小部件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-bounding-box> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。有关更多示例，请参阅此GitHub 存储库。

Attributes

此元素支持以下属性。

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 %}
 ]"

name

此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

src

在其上绘制边界框的图像的 URL。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：full-instructions、short-instructions

区域

此元素需要以下区域。

full-instructions

有关如何绘制边界框的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

boundingBoxes

JSON 对象的数组，其中每个对象指定已由工作人员创建的一个边界框。数组中的每个 JSON 对象包含以下属性。

height – 框的高度（以像素为单位）。
label – 作为标注任务的一部分分配给框的文本。此文本必须与在 <crowd-bounding-box> 元素的 labels 属性中定义的其中一个标签相匹配。
left – 框左上角与图像左侧的距离，以像素为单位。
top – 框左上角与图像顶部的距离，以像素为单位。
width – 框的宽度（以像素为单位）。

输入 ImageProperties

一个 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
      }
    }
  }
]

您可以有多个标签，但只有所使用的标签会显示在输出中。

另请参阅

有关更多信息，请参阅下列内容。

一个框，其中包含用于显示消息的已提升外观。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是为使用 <crowd-card> 元素的情感分析任务设计的模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

heading

在框顶部显示的文本。

映像

指向要显示在框内的图像的 URL。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

可以选中或取消选中的一个 UI 组件，让用户可以从一组选项中选择多个选项。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-checkbox> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

checked

一个布尔值开关，如果存在，将复选框显示为选中状态。

以下是用于默认选中复选框的语法的示例。


  <crowd-checkbox name="checkedBox" value="checked" checked>This box is checked</crowd-checkbox>

disabled

一个布尔值开关，如果存在，将复选框显示为已禁用并防止选中复选框。

以下是用于禁用复选框的语法的示例。


  <crowd-checkbox name="disabledCheckBox" value="Disabled" disabled>Cannot be selected</crowd-checkbox>

name

一个字符串，用于标识工作人员提交的答案。此值将与 JSON 对象中指定答案的密钥匹配。

必需

一个布尔值开关，如果存在，要求工作人员提供输入。

以下是用于要求选中复选框的语法的示例。


  <crowd-checkbox name="work_verified" required>Instructions were clear</crowd-checkbox>

value

一个字符串，用作输出中复选框状态的名称。如果未指定，则默认为“on”。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

输出

提供 JSON 对象。name 字符串是对象名称，而 value 字符串是基于复选框状态的布尔值的属性名称；如果选中，则为 true，否则为 false。

例：示例元素输出

对于多个框使用相同的 name 值。


<!-- INPUT -->  
<div><crowd-checkbox name="image_attributes" value="blurry"> Blurry </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="dim"> Too Dim </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="exposed"> Too Bright </crowd-checkbox></div>


//Output with "blurry" and "dim" checked
[
  {
    "image_attributes": {
      "blurry": true,
      "dim": true,
      "exposed": false
    }
  }
]

请注意，所有三个颜色值都是单个对象的属性。

对于每个框使用不同的 name 值。


<!-- INPUT -->
<div><crowd-checkbox name="Stop" value="Red"> Red </crowd-checkbox></div>
<div><crowd-checkbox name="Slow" value="Yellow"> Yellow </crowd-checkbox></div>
<div><crowd-checkbox name="Go" value="Green"> Green </crowd-checkbox></div>


//Output with "Red" checked
[
  {
    "Go": {
      "Green": false
    },
    "Slow": {
      "Yellow": false
    },
    "Stop": {
      "Red": true
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

用于对非图像内容（如音频、视频或文本）进行分类的小部件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用此 crowd-classifier 构建的 HTML 工作人员任务模板的示例。此示例使用 Liquid 模板语言实现自动化：

在 categories 参数中标注类别
在 classification-target 参数中分类的对象。

复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

categories

一个 JSON 格式的字符串数组，其中每个字符串都是工作人员可以分配给文本的一个类别。您应包含“其他”作为类别，否则工作人员可能无法提供答案。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

name

此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：classification-target、full-instructions、short-instructions

区域

此元素支持以下区域。

classification-target

工作人员要分类的内容。这可以是纯文本或 HTML。如何使用 HTML 的示例包括但不限于嵌入视频或音频播放器、嵌入 PDF 或对两张或更多图像进行比较。

full-instructions

有关如何执行文本分类的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素的输出是一个对象，该对象使用指定的 name 值作为属性名称，并使用 categories 中的字符串作为属性值。

例：示例元素输出

下面是此元素中的输出示例。


[
  {
    "<name>": {
      "label": "<value>"
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

用于将各种形式的内容（例如音频、视频或文本）分为一个或多个类别的小部件。要分类的内容被称为对象。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用此元素构建的 HTML 工作人员任务模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

crowd-classifier-multi-select 元素支持以下属性。每个属性都接受一个或多个字符串值。

categories

必需。一个 JSON 格式的字符串数组，其中每个字符串都是工作人员可以分配给对象的一个类别。

header

必需。要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

name

必需。此小部件的名称。在表单输出中，名称用作小部件输入的键。

exclusion-category

可选。JSON 格式的字符串，格式如下："{ text: 'default-value' }"。此属性设置默认值，在任何标签均不适用于工作人员 UI 中显示的对象时，工作人员可以选择该默认值。

元素层次结构

此元素具有以下父元素和子元素：

父元素：crowd-form
子元素：classification-target、full-instructions、short-instructions

区域

此元素使用以下区域。

classification-target

工作人员要分类的内容。内容可以是纯文本，也可以是您在模板中使用 HTML 指定的对象。例如，您可以使用 HTML 元素来包含视频或音频播放器、嵌入 PDF 文件或包含两张或更多图像的比较。

full-instructions

有关如何对文本分类的一般说明。

short-instructions

特定于任务的重要说明。这些说明会突出显示。

输出

此元素的输出是一个对象，该对象使用指定的 name 值作为属性名称，并使用来自 categories 的字符串作为属性值。

例：示例元素输出

下面是此元素中的输出示例。


[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容：

用于标记较长文本中的单词、短语或字符串的小部件。工作人员选择一个标签，然后突出显示该标签适用的文本。

重要提示：这是自包含小部件

请勿将 <crowd-entity-annotation> 元素和 <crowd-form> 元素一起使用。它包含自己的表单提交逻辑和 Submit (提交) 按钮。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-entity-annotation> 元素的模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

initial-value

一个 JSON 格式的对象数组，每个对象定义一个在初始化时应用到文本的注释。对象包含一个 label 值（与 labels 属性中的值匹配）、一个整数 startOffset 值（用于所标记范围的起始 unicode 偏移）以及一个整数 endOffset 值（用于结束 unicode 偏移）。


[
  {
    label: 'person',
    startOffset: 0,
    endOffset: 16
  },
  ...
]

label（必需）：用于标识实体的名称。
fullDisplayName（可选）：用于任务小部件中的标签列表。如果未指定，则默认为标签值。
shortDisplayName（可选）：3 到 4 个字母的缩写，用于显示上述选定实体。如果未指定，则默认为标签值。

强烈建议使用 shortDisplayName。
根据选择所显示的值可能会重叠，在工作区中管理标记的实体时会造成困难。强烈建议为每个标签提供 3 到 4 个字符的 shortDisplayName，以防止重叠并确保工作区对于您的工作人员易于管理。


[
  {
    label: 'person',
    shortDisplayName: 'per', 
    fullDisplayName: 'person'
  }
]

name

在 DOM 中用作小部件的名称。它还用作标签属性名称，采用输入和输出清单的形式。

文本

要标注的文本。默认情况下，模板化系统转义引号和 HTML 字符串。如果您的代码已转义或者部分转义，请参阅变量筛选条件以了解控制转义的更多方法。

元素层次结构

此元素具有以下父元素和子元素。

子元素：full-instructions、short-instructions

区域

此元素支持以下区域。

full-instructions

有关如何使用小部件的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

实体

指定注释的开始、结束和标签的 JSON 对象。此对象包含以下属性。

label – 分配的标签。
startOffset – 所选文本的开始的 Unicode 偏移。
endOffset – 在选择之后第一个字符的 Unicode 偏移。

例：示例元素输出

下面是此元素中的输出示例。


{
  "myAnnotatedResult": {
    "entities": [
      {
        "endOffset": 54,
        "label": "person",
        "startOffset": 47
      },
      {
        "endOffset": 97,
        "label": "event",
        "startOffset": 93
      },
      {
        "endOffset": 219,
        "label": "date",
        "startOffset": 212
      },
      {
        "endOffset": 271,
        "label": "location",
        "startOffset": 260
      }
    ]
  }
}

另请参阅

有关更多信息，请参阅下列内容。

一个浮动按钮，图像位于其中心。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是为使用 <crowd-fab> 元素的图像分类设计的 Liquid 模板的示例。此模板用于 JavaScript 使工作人员能够报告工作器用户界面的问题。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

disabled

一个布尔值开关，如果存在，将浮动按钮显示为已禁用并防止点击。

icon

一个字符串，它指定要显示在按钮中心的图标。该字符串必须是开源 iron-icons 集中的图标的名称（预加载）或者是指向自定义图标的 URL。

以下是可用于在 <crowd-fab> HTML 元素中添加 iron-icon 的语法的示例。请将 icon-name 替换为要从该图标集中使用的图标的名称。


<crowd-fab "id="button1" icon="icon-name" title="Issue"/>

label

一个字符串，包含可以使用的单个字符，而不是图标。表情符号或多个字符可能会导致按钮改而显示省略号。

title

一个字符串，当鼠标悬停在按钮上时显示工具提示。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

所有自定义任务的表单包装程序。设置和实施重要的操作，以便正确地提交表单数据。

如果 <crowd-form> 元素内未包含类型为“submit”的 crowd-button，它将自动附加在 <crowd-form> 元素内。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-form> 元素的图像分类模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

元素层次结构

此元素具有以下父元素和子元素。

父元素：无
子元素：任何 UI 模板元素

元素事件

crowd-form 元素扩展标准 HTML form 元素并继承其事件，例如 onclick 和 onsubmit。

另请参阅

有关更多信息，请参阅下列内容。

图像位于其中心的按钮。当用户触摸该按钮时，会从按钮中心发出波纹效果。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是为使用 <crowd-icon-button> 元素的图像分类设计的 Liquid 模板的示例。此模板用于 JavaScript 使工作人员能够报告工作器用户界面的问题。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

disabled

一个布尔值开关，如果存在，将按钮显示为已禁用并防止点击。

icon

一个字符串，它指定要显示在按钮中心的图标。该字符串必须是开源 iron-icons 集中的图标的名称（预加载）或者是指向自定义图标的 URL。

以下是可用于在 <crowd-icon-button> HTML 元素中添加 iron-icon 的语法的示例。请将 icon-name 替换为要从该图标集中使用的图标的名称。


<crowd-icon-button id="button1" icon="icon-name" title="Issue"/>

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

用于对图像进行分类的小部件。使用以下支持的图像格式之一：APNG、BMP、GIF、ICO、JPEG、PNG、SVG。图像没有大小限制。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-image-classifier> 元素的图像分类模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素需要以下属性。

categories

一个 JSON 格式的字符串数组，其中每个字符串都是工作人员可以分配给图像的一个类别。您应包含“其他”作为一个类别，以便工作人员可以提供答案。您最多可指定 10 个类别。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

name

此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

叠加

要叠加在源图像上的信息。这用于界限框、语义分割和实例分割任务的验证工作流。

它是一个 JSON 对象，其中包含一个以 camelCase 中的任务类型名称为键的对象。该键的值是包含上一任务中的标签和其他必要信息的对象。

以下示例显示具有用于验证界限框任务的属性的 crowd-image-classifier 元素：


<crowd-image-classifier
    name="boundingBoxClassification"
    header="Rate the quality of the annotations based on the background section 
       in the instructions on the left hand side."
    src="https://i.imgur.com/CIPKVJo.jpg"
    categories="['good', 'bad', 'okay']"
    overlay='{
        "boundingBox": {
            labels: ["bird", "cat"], 
            value: [
                {
                  height: 284,
                  label: "bird",
                  left: 230,
                  top: 974,
                  width: 223
                },
                {
                  height: 69,
                  label: "bird",
                  left: 79,
                  top: 889,
                  width: 247
                }
            ]
        },
    }'
> ... </crowd-image-classifier>

语义分割验证任务将按照下面的方式使用 overlay 值：


<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify'
  overlay='{
    "semanticSegmentation": {
      "labels": ["Cat", "Dog", "Bird", "Cow"],
      "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#2acf59"
        }
      },
      "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

实例分割任务将按照下面的方式使用 overlay 值：


<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify instances of each category'
  overlay='{
    "instanceSegmentation": {
       "labels": ["Cat", "Dog", "Bird", "Cow"],
       "instances": [
        {
         "color": "#2ca02c",
         "label": "Cat"
        },
        {
         "color": "#1f77b4",
         "label": "Cat"
        },
        {
         "color": "#d62728",
         "label": "Dog"
        }
       ],
       "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

src

要分类的图像的 URL。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：full-instructions、short-instructions、工作人员评论

区域

此元素使用以下区域。

full-instructions

关于工作人员如何对映像进行分类的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

工作人员评论

当您需要工作人员解释他们做出选择的原因时，请在验证工作流中使用此选项。使用开头标签和结束标签之间的文本，为工作人员提供有关注释中应包含哪些信息的说明。

它使用以下属性：

header

用于留下评论的行动呼吁的短语。用作添加注释的模态窗口的标题文本。

可选。默认为“添加注释”。

link-text

此文本显示在小组件中的类别下方。单击时，它会打开一个模式窗口，工作人员可以在其中添加注释。

可选。默认为“添加注释”。

占位符

注释文本区域中的示例文本，当工作人员开始键入时被覆盖。如果工作人员将字段留空，则不会显示在输出中。

可选。默认值待留空。

输出

此元素的输出是一个字符串，用于指定在 <crowd-image-classifier> 元素的 categories 属性中定义的其中一个值。

例：示例元素输出

下面是此元素中的输出示例。


[
  {
    "<name>": {
      "label": "<value>"
      "workerComment": "Comment - if no comment is provided, this field will not be present"
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

一个小部件，用于将图像分类到一个或多个类别中。使用以下支持的图像格式之一：APNG、BMP、GIF、ICO、JPEG、PNG、SVG。图像没有大小限制。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用此 crowd 元素构建的 HTML 工作人员任务模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

crowd-image-classifier-multi-select 元素支持以下属性。每个属性都接受一个或多个字符串值。

categories

必需。一个 JSON 格式的字符串数组，其中每个字符串都是工作人员可以分配给图像的一个类别。工作人员必须至少选择一个类别，且可以选择所有类别。

header

必需。要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

name

必需。此小部件的名称。在表单输出中，名称用作小部件输入的键。

src

必需。要分类的图像的 URL。

exclusion-category

可选。JSON 格式的字符串，格式如下："{ text: 'default-value' }"。此属性设置默认值，在任何标签均不适用于工作人员 UI 中显示的图像时，工作人员可以选择该默认值。

元素层次结构

此元素具有以下父元素和子元素：

父元素：crowd-form
子元素：full-instructions、short-instructions、工作人员评论

区域

此元素使用以下区域。

full-instructions

关于工作人员如何对映像进行分类的一般说明。

short-instructions

特定于任务的重要说明。这些说明会突出显示。

输出

此元素的输出是一个字符串，指定在 <crowd-image-classifier-multi-select> 元素的 categories 属性中定义的一个或多个值。

例：示例元素输出

下面是此元素中的输出示例。


[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容：

接受输入数据的框。

不能自结束

与 HTML 标准中的 input 元素不同，此元素不能通过在右方括号之前放入斜杠（例如，<crowd-input ... />）自结束。它必须后跟一个 </crowd-input> 以结束此元素。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-input> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

allowed-pattern

一个正则表达式，与 auto-validate 属性结合使用以忽略工作人员键入时的非匹配字符。

auto-focus

如果此值设置为 true，则浏览器在加载后将焦点放在输入区域内。这样，工作人员就可以直接键入，而无需先将其选中。

auto-validate

一个布尔值开关，如果存在，将开启输入验证。可以通过 error-message 和 allowed-pattern 属性修改验证器的行为。

disabled

一个布尔值开关，如果存在，将输入区域显示为已禁用。

error-message

如果验证失败，显示在输入字段下方左侧的文本。

label

在文本字段内显示的字符串。

当工作人员开始在文本字段中键入或已设置 value 属性时，此文本会缩小并升至文本字段上方。

max-length

输入将接受的最大字符数。超出此限制的输入将被忽略。

min-length

字段中输入的最小长度

name

设置要用于 DOM 中的输入和表单输出的名称。

占位符

一个字符串值，用作占位符文本（直至工作人员开始将数据输到输入中时才显示），它不用作默认值。

必需

一个布尔值开关，如果存在，要求工作人员提供输入。

type

选取一个字符串以设置输入的 HTML5 input-type 行为。示例包括 file 和 date。

value

一个预设值，如果工作人员未提供输入，则成为默认值。预设值显示在文本字段中。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

输出

提供 name 字符串作为属性名称，并将在字段中输入的文本作为其值。

例：示例 JSON 输出

多个元素的值在相同的对象中输出，其 name 属性值作为其属性名称。无输入的元素不会显示在输出中。例如，我们使用三个输入：


<crowd-input name="tag1" label="Word/phrase 1"></crowd-input>
<crowd-input name="tag2" label="Word/phrase 2"></crowd-input>
<crowd-input name="tag3" label="Word/phrase 3"></crowd-input>

如果只有两个具有输入，输出为：


[
  {
    "tag1": "blue",
    "tag2": "red"
  }
]

这意味着，任何构建用于解析这些结果的代码都应该能够对答案中每个输入是否存在作出应对。

另请参阅

有关更多信息，请参阅下列内容。

用于标识一个图像中特定对象的各个实例并为每个标记的实例创建彩色叠加层的小部件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-instance-segmentation> 的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

使用类似于以下内容的模板，允许员工添加自己的类别（标签）。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-instance-segmentation
    id="annotator"
    name="myTexts"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Click Instructions to add new labels."
    labels="['placeholder']"
  >
    <short-instructions>
      <h3>Add a label to describe each type of object in this image.</h3>
      <h3>Cover each instance of each object with a segmentation mask.</h3>
      <br>
      <h3>
        Add new label
      </h3>
      <crowd-input name="_customLabel" id="customLabel"></crowd-input>
      <crowd-button id="addLabel">Add</crowd-button>
      
      <br><br><br>
      <h3>
      Manage labels
      </h3>
      <div id="labelsSection"></div>
    </short-instructions>
    
    <full-instructions>
      Describe your task in more detail here.
    </full-instructions>
  </crowd-instance-segmentation>
</crowd-form>

<script>
  document.addEventListener('all-crowd-elements-ready', function(event) {
    document.querySelector('crowd-instance-segmentation').labels = [];  
  });
  
  function populateLabelsSection() {
    labelsSection.innerHTML = '';
    annotator.labels.forEach(function(label) {
      const labelContainer = document.createElement('div');
      labelContainer.innerHTML = label + ' <a href="javascript:void(0)">(Delete)</a>';
      labelContainer.querySelector('a').onclick = function() {
        annotator.labels = annotator.labels.filter(function(l) {
          return l !== label;
        });
        populateLabelsSection();
      };
      labelsSection.appendChild(labelContainer);
    });
  }

  addLabel.onclick = function() {
    annotator.labels = annotator.labels.concat([customLabel.value]);
    customLabel.value = null;
    
    populateLabelsSection();
  };
</script>

Attributes

此元素支持以下属性。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

name

此小部件的名称。它用作标记数据（以输出格式表示）的键值。

src

要标记的图像的 URL。

initial-value

一个 JSON 对象，其中包含先前实例分割作业的颜色映射以及到该先前作业输出的覆盖图像的链接。当您希望工作人员验证先前标记作业的结果并在必要时进行调整时，请包括此内容。

属性将显示如下：


  initial-value="{
    "instances": [
      {
        "color": "#2ca02c",
        "label": "Cat"
      },
      {
        "color": "#1f77b4",
        "label": "Cat"
      },
      {
        "color": "#d62728",
        "label": "Dog"
      }
    ],
    "src": {{ "S3 file URL for image" | grant_read_access }}
  }"

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：full-instructions、short-instructions

区域

此元素支持以下区域。

full-instructions

有关如何执行图像分割的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

labeledImage

一个 JSON 对象，其中包含标签的 Base64 编码的 PNG。

instances

一个 JSON 数组，其中包含具有实例标签和颜色的对象。

color – labeledImage PNG 中标签的 RGB 颜色的十六进制值。
label – 赋予使用该颜色的叠加层的标签。此值可能重复，因为标签的不同实例都用其唯一颜色标识。

输入 ImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

height – 图像的高度（以像素为单位）。
width – 图像的宽度（以像素为单位）。

例：示例元素输出

下面是此元素中的输出示例。


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "instances": [
        {
          "color": "#1f77b4",
          "label": "<Label 1>": 
        },
        {
          "color": "#2ca02c",
          "label": "<Label 1>": 
        },
        {
          "color": "#ff7f0e",
          "label": "<Label 3>": 
        },
      ],
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

一个元素，该元素在工作人员单击链接或按钮时，在以下三个选项卡页上显示说明：Summary (摘要)、Detailed Instructions (详细说明) 和 Examples (示例)。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-instructions> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

link-text

要显示的用于打开说明的文本。默认值为 Click for instructions (单击以获取说明)。

link-type

一个字符串，它指定说明的触发器类型。可能的值为“link”（默认值）和“button”。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

区域

此元素支持以下区域。

detailed-instructions

提供任务特定说明的内容。此内容显示在“Detailed Instructions”(详细说明) 选项卡页面上。

negative-example

提供任务完成不足示例的内容。此内容显示在“Examples”(示例) 选项卡页面上。此元素内可能会提供多个示例。

positive-example

提供任务完成得当的示例的内容。此内容显示在“Examples”(示例) 选项卡页面上。

short-summary

对要完成的任务作总结的简短语句。此内容显示在“Summary”(摘要) 选项卡页面上。此元素内可能会提供多个示例。

另请参阅

有关更多信息，请参阅下列内容。

生成在图像上选择和注释关键点的工具。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-keypoint> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

initial-value

一个采用 JSON 格式的要点数组，这些要点在启动应用于映像。例如：


initial-value="[
  {
    'label': 'Left Eye',
    'x': 1022,
    'y': 429
  },
  {
    'label': 'Beak',
    'x': 941,
    'y': 403
  }
]

注意

请注意，此属性中使用的标签值必须在 labels 属性中具有匹配值，否则该点不会渲染。

name

一个字符串，用于标识工作人员提交的答案。此值将与 JSON 对象中指定答案的密钥匹配。

src

要注释的图像的源 URI。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：full-instructions、short-instructions

区域

此元素需要以下区域。

full-instructions

有关如何注释图像的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

输入 ImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

height – 图像的高度（以像素为单位）。
width – 图像的宽度（以像素为单位）。

keypoints

一个 JSON 对象数组，包含关键点的坐标和标签。每个对象包含以下属性。

label – 分配给关键点的标签。
x – 关键点在图像上的 X 坐标，以像素为单位。
y – 关键点在图像上的 Y 坐标，以像素为单位。

注意

X 和 Y 坐标以图像左上角的 0,0 为原点。

例：示例元素输出

下面是使用此元素的输出示例。


[
  {
    "crowdKeypoint": {
      "inputImageProperties": {
        "height": 1314,
        "width": 962
      },
      "keypoints": [
        {
          "label": "dog",
          "x": 155,
          "y": 275
        },
        {
          "label": "cat",
          "x": 341,
          "y": 447
        },
        {
          "label": "cat",
          "x": 491,
          "y": 513
        },
        {
          "label": "dog",
          "x": 714,
          "y": 578
        },
        {
          "label": "cat",
          "x": 712,
          "y": 763
        },
        {
          "label": "cat",
          "x": 397,
          "y": 814
        }
      ]
    }
  }
]

您可能有多个可用标签，但只有被使用的标签会显示在输出中。

另请参阅

有关更多信息，请参阅下列内容。

用于在图像上绘制线条的小部件。每条线都与一个标签相关联，输出数据将报告每条线的起点和终点。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-line> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。有关更多示例，请参阅此GitHub 存储库。

Attributes

此元素支持以下属性。

header

可选。要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

initial-value

可选。一个 JSON 对象数组，其中每个对象在组件加载时都设置一条直线。数组中的每个 JSON 对象包含以下属性：

label – 作为标注任务的一部分分配给直线的文本。此文本必须与在 <crowd-line> 元素的 labels 属性中定义的其中一个标签相匹配。
vertices – 相对于图像左上角的直线起点和终点的 x 和 y 像素坐标。


initial-value="{
    lines: [
    {
        label: 'sideline', // label of this line annotation
        vertices:[         // an array of vertices which decide the position of the line
        {
            x: 84,
            y: 110
        },
        {
            x: 60,
            y: 100
        }
        ]
    },
    {
        label: 'yardline',
        vertices:[       
        {
            x: 651,
            y: 498
        },
        {
            x: 862,
            y: 869
        }
        ]
    }
   ]
}"

通过 initial-value 属性可以调整直线设置。在工作人员答案输出中通过 initialValueModified 来跟踪工作人员答案是否已调整过。

label-colors

可选。字符串数组。每个字符串都是标签的十六进制代码。

name

必需。此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

src

必需。要在其上绘制直线的图像的 URL。

区域

此元素需要以下区域。

full-instructions

有关如何绘制直线的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：short-instructions、full-instructions

输出

输入 ImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

height – 图像的高度（以像素为单位）。
width – 图像的宽度（以像素为单位）。

lines

一个 JSON 数组，其中包含具有直线标签和顶点的对象。

label – 为直线指定的标签。
vertices – 相对于图像左上角的直线起点和终点的 x 和 y 像素坐标。

例：示例元素输出

下面是此元素中的输出示例。


{
    "crowdLine": { //This is the name you set for the crowd-line
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "lines": [
        {
          "label": "yardline",
          "vertices": [ 
            {
              "x": 58,
              "y": 295
            },
            {
              "x": 1342,
              "y": 398
            }
          ]
        },
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 472,
              "y": 910
            },
            {
              "x": 1480,
              "y": 600
            }
          ]
        }
      ]
    }
  }

另请参阅

有关更多信息，请参阅下列内容。

用于在图像上绘制多边形并将标签分配给每个多边形中包含的图像部分的小部件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-polygon> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

name

此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

src

要在其上绘制多边形的图像的 URL。

initial-value

JSON 对象的数组，其中每个对象在组件加载时都定义一个要绘制的多边形。数组中的每个 JSON 对象包含以下属性。

label – 作为标注任务的一部分分配给多边形的文本。此文本必须与在 <crowd-polygon> 元素的 labels 属性中定义的其中一个标签相匹配。
vertices – 一个 JSON 对象数组。每个对象都包含多边形中某个点的 x 和 y 坐标值。

initial-value 属性可能类似这样。


initial-value = 
  '[
     {
     "label": "dog",
     "vertices": 
       [
         {
            "x": 570,
            "y": 239
         },
        ... 
         {
            "x": 759,
            "y": 281
         }
       ]
     }
  ]'

由于此 JSON 数组将位于 HTML 元素中，所以必须用单引号或双引号括起来。上面的示例使用单引号在 JSON 本身中封装 JSON 和双引号。如果您必须在 JSON 中混合使用单引号和双引号，请将其替换为 HTML 实体代码（" 表示双引号，' 表示单引号）以安全转义它们。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：full-instructions、short-instructions

区域

以下区域是必需的。

full-instructions

有关如何绘制多边形的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

polygons

JSON 对象的数组，其中每个对象描述已由工作人员创建的一个多边形。数组中的每个 JSON 对象包含以下属性。

label – 作为标注任务的一部分分配给多边形的文本。
vertices – 一个 JSON 对象数组。每个对象都包含多边形中某个点的 x 和 y 坐标值。图像左上角的坐标为 0,0。

输入 ImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

height – 图像的高度（以像素为单位）。
width – 图像的宽度（以像素为单位）。

例：示例元素输出

以下是此元素的常见使用情况的输出示例。

单个标签，单个多边形


{
    "annotatedResult": 
    {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": 
      [
        {
          "label": "dog",
          "vertices": 
          [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        }
      ]
    }
  }
]

单个标签，多个多边形


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": [
        {
          "label": "dog",
          "vertices": [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        },
        {
          "label": "dog",
          "vertices": [
            {
              "x": 870,
              "y": 278
            },
            {
              "x": 908,
              "y": 446
            },
            {
              "x": 1009,
              "y": 602
            },
            {
              "x": 1116,
              "y": 519
            },
            {
              "x": 1174,
              "y": 498
            },
            {
              "x": 1227,
              "y": 479
            },
            {
              "x": 1179,
              "y": 405
            },
            {
              "x": 1179,
              "y": 337
            }
          ]
        }
      ]
    }
  }
]

多个标签，多个多边形


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": [
        {
          "label": "dog",
          "vertices": [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        },
        {
          "label": "cat",
          "vertices": [
            {
              "x": 870,
              "y": 278
            },
            {
              "x": 908,
              "y": 446
            },
            {
              "x": 1009,
              "y": 602
            },
            {
              "x": 1116,
              "y": 519
            },
            {
              "x": 1174,
              "y": 498
            },
            {
              "x": 1227,
              "y": 479
            },
            {
              "x": 1179,
              "y": 405
            },
            {
              "x": 1179,
              "y": 337
            }
          ]
        }
      ]
    }
  }
]

您可以有多个标签，但只有所使用的标签会显示在输出中。

另请参阅

有关更多信息，请参阅下列内容。

用于在图像上绘制折线或线条的小部件。每条折线都与一个标签关联，可以包括两个或多个顶点。折线可以与自身相交，其起点和终点可以放置在图像上的任意位置。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-polyline> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。有关更多示例，请参阅此GitHub 存储库。

Attributes

此元素支持以下属性。

header

可选。要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

initial-value

可选。一个 JSON 对象数组，其中每个对象在组件加载时都设置一条折线。数组中的每个 JSON 对象包含以下属性：

label – 作为标注任务的一部分分配给折线的文本。此文本必须与在 <crowd-polyline> 元素的 labels 属性中定义的其中一个标签相匹配。
vertices – 相对于图像左上角的折线顶点的 x 和 y 像素坐标。


 initial-value= "{
    polylines: [
    {
        label: 'sideline', // label of this line annotation
        vertices:[         // an array of vertices which decide the position of the line
        {
            x: 84,
            y: 110
        },
        {
            x: 60,
            y: 100
        }
        ]
    },
    {
        label: 'yardline',
        vertices:[       
        {
            x: 651,
            y: 498
        },
        {
            x: 862,
            y: 869
        },
        {
            x: 1000,
            y: 869
        }
        ]
    }
   ]
}"

通过 initial-value 属性可以调整折线设置。在工作人员答案输出中通过 initialValueModified 来跟踪工作人员答案是否已调整过。

label-colors

可选。字符串数组。每个字符串都是标签的十六进制代码。

name

必需。此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

src

必需。要在其上绘制折线的图像的 URL。

区域

此元素需要以下区域。

full-instructions

有关如何绘制折线的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：short-instructions、full-instructions

输出

输入 ImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

height – 图像的高度（以像素为单位）。
width – 图像的宽度（以像素为单位）。

polylines

一个 JSON 数组，其中包含具有折线标签和顶点的对象。

label – 为直线指定的标签。
vertices – 相对于图像左上角的折线顶点的 x 和 y 像素坐标。

例：示例元素输出

下面是此元素中的输出示例。


 {
    "crowdPolyline": { //This is the name you set for the crowd-polyline
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "polylines": [
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 651,
              "y": 498
            },
            {
              "x": 862,
              "y": 869
            },
            {
              "x": 1449,
              "y": 611
            }
          ]
        },
        {
          "label": "yardline",
          "vertices": [
            {
              "x": 1148,
              "y": 322
            },
            {
              "x": 1705,
              "y": 474
            },
            ,
            {
              "x": 1755,
              "y": 474
            }
          ]
        }
      ]
    }
  }

另请参阅

有关更多信息，请参阅下列内容。

可以选中或取消选中的按钮。当单选按钮位于单选按钮组内时，任何时候只能选中组内的一个单选按钮。下面的示例介绍了如何在 crowd-radio-group 元素内配置 crowd-radio-button 元素。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是可与 <crowd-radio-button> 元素一起使用的语法示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

前面的示例可以在此 GitHub 示例的自定义工作人员任务模板中看到：实体识别标签作业自定义模板。

Crowd HTML 元素单选按钮不支持 HTML 标记 required。要使用户必须选择单选按钮，请使用 <input type="radio"> 元素来创建单选按钮并添加 required 标记。属于同一组单选按钮的所有 <input> 元素的 name 属性必须相同。例如，以下模板要求用户在提交之前选择 animal-type 组中的单选按钮。

Attributes

此元素支持以下属性。

checked

一个布尔值开关，如果存在，将单选按钮显示为选中状态。

disabled

一个布尔值开关，如果存在，将按钮显示为已禁用并防止选中按钮。

name

一个字符串，用于标识工作人员提交的答案。此值将与 JSON 对象中指定答案的密钥匹配。

注意

如果您在 crowd-radio-group 元素之外使用按钮，但具有相同的 name 字符串和不同的 value 字符串，则输出中的 name 对象将对于每个 value 字符串包含一个布尔值。为确保一个组中只有一个按钮被选中，请将其作为 crowd-radio-group 元素的子元素并使用不同的名称值。

value

元素的布尔值的属性名称。如果未指定，它将“on”用作默认值，例如 { "<name>": { "<value>": <true or false> } }。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-radio-group
子元素：无

输出

输出具有以下模式的对象：{ "<name>": { "<value>": <true or false> } }。如果您在 crowd-radio-group 元素之外使用按钮，但具有相同的 name 字符串和不同的 value 字符串，则名称对象将对于每个 value 字符串包含一个布尔值。为确保按钮组中只有一个按钮处于选中状态，需要将其设置为 crowd-radio-group 元素的子元素并使用不同的名称值。

例此元素的示例输出


[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

一组单选按钮。只能选中组内的一个单选按钮。选择一个单选按钮将清除同一组内先前选择的任何单选按钮。有关使用 crowd-radio-group 元素的自定义 UI 模板的示例，请参阅此实体识别标记作业自定义模板。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是可与 <crowd-radio-group> 元素一起使用的语法示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素不支持任何特殊属性。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：crowd-radio-button

输出

输出表示其中 crowd-radio-button 元素的对象数组。

例元素输出示例


[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

一个用于分割图像和向每个图像分段分配标签的小部件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-semantic-segmentation> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

initial-value

一个 JSON 对象，其中包含先前语义分割作业的颜色映射以及到该先前作业输出的覆盖图像的链接。当您希望工作人员验证先前标记作业的结果并在必要时进行调整时，请包括此内容。

属性将显示如下：


  initial-value='{
    "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#1f77b4"
        }
      },
    "src": {{ "S3 file URL for image" | grant_read_access }}
  }'

将 Ground Truth 内置任务类型与注释合并（其中多个工作人员为单个图像加标签）结合使用时，标签映射包含在单个工作人员输出记录中，但总体结果在合并结果中显示为 internal-color-map。

您可以使用 Liquid 模板语言在自定义模板中将 internal-color-map 转换为 label-mappings：


initial-value="{
  'src' : '{{ task.input.manifestLine.label-attribute-name-from-prior-job| grant_read_access }}',
  'labelMappings': {
     {% for box in task.input.manifestLine.label-attribute-name-from-prior-job-metadata.internal-color-map %}
       {% if box[1]['class-name'] != 'BACKGROUND' %}
         {{ box[1]['class-name'] | to_json }}: {
           'color': {{ box[1]['hex-color'] | to_json }}
         },
       {% endif %} 
     {% endfor %}
   } 
}"

name

此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

src

要分割的图像的 URL。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：full-instructions、short-instructions

区域

此元素支持以下区域。

full-instructions

有关如何执行图像分割的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

labeledImage

一个 JSON 对象，其中包含标签的 Base64 编码的 PNG。

labelMappings

一个 JSON 对象，其中包含用分隔标签命名的对象。

color – labeledImage PNG 中标签的 RGB 颜色的十六进制值。

初始的 ValueModified

表示初始值是否已被修改的布尔值。仅当输出来自调整任务时，才会包含此内容。

输入 ImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

height – 图像的高度（以像素为单位）。
width – 图像的宽度（以像素为单位）。

例：示例元素输出

下面是此元素中的输出示例。


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "labelMappings": {
        "<Label 2>": {
          "color": "#ff7f0e"
        },
        "<label 3>": {
          "color": "#2ca02c"
        },
        "<label 1>": {
          "color": "#1f77b4"
        }
      },
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

一个带有滑动旋钮的栏，让工作人员可以通过移动旋钮从值范围中选择一个值。对于反映强度级别的设置（如音量、亮度或颜色饱和度），使用滑块是一个不错的选择。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-slider> 元素的调查模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

disabled

一个布尔值开关，如果存在，将滑块显示为已禁用。

editable

一个布尔值开关，如果存在，将显示一个向上/向下按钮，可以选择此按钮来选择值。

通过向上/向下按钮选择值是通过移动滑块上的旋钮来选择值的替代方法。滑块上的旋钮将与向上/向下按钮选择同步移动。

max

一个数值，它指定滑块上的最大值。

min

一个数值，它指定滑块上的最小值。

name

一个字符串，用于标识工作人员提交的答案。此值将与 JSON 对象中指定答案的密钥匹配。

一个布尔值开关，如果存在，将随旋钮移动而显示旋钮上方的当前值。

必需

一个布尔值开关，如果存在，要求工作人员提供输入。

secondary-progress

当与 crowd-slider-secondary-color CSS 属性一起使用时，进度条的颜色将随由 secondary-progress 表示的点相应改变。例如，如果用于表示流视频上的进度，value 将表示查看器位于视频时间线中的位置。secondary-progress 值将表示时间线上视频已缓冲到的点。

step

一个数值，它指定滑块上可选值之间的差值。

value

一个预设值，如果工作人员未提供输入，则成为默认值。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

样式看起来与具有以下信息的选项卡相似的组件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-tab> 元素的示例模板。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

header

显示在选项卡上的文本。通常是一些简短的描述性名称，表示选项卡下包含的信息。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-tabs
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

选项卡式信息的容器。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-tabs> 元素的示例模板。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素没有属性。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：crowd-tab

另请参阅

有关更多信息，请参阅下列内容。

用于文本输入的字段。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是一个 Liquid 模板的示例，该模板旨在转录使用 <crowd-text-area> 元素的音频剪辑。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

allowed-pattern

一个正则表达式，与 auto-validate 属性结合使用以忽略工作人员键入时的非匹配字符。

auto-focus

一个布尔值开关，如果存在，加载时将游标放在此元素中，以便用户可以立即开始键入，而不必先在元素内单击。

auto-validate

一个布尔值开关，如果存在，将开启输入验证。可以通过 error-message 和 allowed-pattern 属性修改验证器的行为。

char-counter

一个布尔值开关，如果存在，将一个小的文本字段放在元素的右下角，同时显示元素内的字符数。

disabled

一个布尔值开关，如果存在，将输入区域显示为已禁用。

error-message

如果验证失败，显示在输入字段下方左侧的文本。

label

在文本字段内显示的字符串。

当工作人员开始在文本字段中键入或已设置 value 属性时，此文本会缩小并升至文本字段上方。

max-length

一个整数，指定元素允许的最大字符数。键入或粘贴的超出最大值的字符将被忽略。

max-rows

一个整数，它指定允许在内的最大文本行数 crowd-text-area。正常情况下，元素将扩展以容纳新行。如果设置了此属性，则在行数超过此属性后，内容将向上滚出视图外，并出现一个滚动条控件。

name

一个字符串，用于表示输出中元素的数据。

占位符

以占位符文本形式呈现给用户的字符串。它在用户在输入区域中放入内容后消失。

rows

一个整数，指定文本行中元素的高度。

value

一个预设值，如果工作人员未提供输入，则成为默认值。预设值显示在文本字段中。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

输出

此元素将 name 作为属性名称输出，将元素的文本内容作为值输出。文本中的回车表示为 \n。

例此元素的示例输出


[
  {
    "textInput1": "This is the text; the text that\nmakes the crowd go wild."
  }
]

另请参阅

有关更多信息，请参阅下列内容。

显示屏上临时出现的小通知。只显示一个 crowd-toast。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下是使用 <crowd-toast> 元素的 Liquid 模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

duration

一个数字，它指定在屏幕上显示通知的持续时间（以毫秒为单位）。

文本

通知中要显示的文本。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

另请参阅

有关更多信息，请参阅下列内容。

充当打开/关闭开关的按钮，用于切换状态。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen。

以下示例说明了可用于使用 <crowd-toggle-button> HTML 元素的不同方法。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

Attributes

此元素支持以下属性。

checked

一个布尔值开关，如果存在，显示按钮切换到“ON”位置。

disabled

一个布尔值开关，如果存在，将按钮显示为已禁用并防止切换。

invalid

当处在关闭位置时，使用此属性的按钮将显示为警报颜色。标准为红色，但可以在 CSS 中进行更改。切换为打开后，此按钮将与处于打开位置的其他按钮显示为相同的颜色。

name

一个字符串，用于标识工作人员提交的答案。此值与 JSON 对象中指定答案的密钥匹配。

必需

一个布尔值开关，如果存在，要求工作人员提供输入。

value

输出中用作元素布尔状态的属性名称的值。如果未提供，则默认为“on”。

元素层次结构

此元素具有以下父元素和子元素。

父元素：crowd-form
子元素：无

输出

此元素输出 name 作为对象的名称，其中包含 value 作为属性名称，并将元素的状态作为属性的布尔值。如果未指定此元素的值，则属性名称默认为“on”。

例此元素的示例输出


[
  {
    "theToggler": {
      "on": true
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。

Javascript 在您的浏览器中被禁用或不可用。

要使用 Amazon Web Services 文档，必须启用 Javascript。请参阅浏览器的帮助页面以了解相关说明。

Crowd HTML 元素参考

Augmented AI Crowd HTML Elements

SageMaker 人群 HTML 元素

Attributes

dismissible

type

元素层次结构

另请参阅

Attributes

for

icon

label

元素层次结构

另请参阅

Attributes

disabled

form-action

href

icon

icon-align

icon-url

正在加载

target

variant

元素层次结构

另请参阅

Attributes

header

initial-value

标签

name

src

元素层次结构

区域

full-instructions

short-instructions

输出

boundingBoxes

输入 ImageProperties

例 ：示例元素输出

另请参阅

Attributes

heading

映像

元素层次结构

另请参阅

Attributes

checked

disabled

name

必需

value

元素层次结构

输出

例 ：示例元素输出

另请参阅

Attributes

categories

header

name

元素层次结构

区域

classification-target

full-instructions

short-instructions

输出

例 ：示例元素输出

另请参阅

Attributes

categories

header

name

exclusion-category

元素层次结构

区域

classification-target

full-instructions

short-instructions

输出

例 ：示例元素输出

另请参阅

重要提示：这是自包含小部件

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出