SageMaker 人群 HTML 元素

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

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

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <div id="errorBox"></div>
   
  <crowd-keypoint
    src="{{ task.input.taskObject | grant_read_access }}"
    labels="['Item A', 'Item B', 'Item C']"        
    header="Please locate the centers of each item."
    name="annotatedResult">
    <short-instructions>
      Describe your task briefly here and give examples
    </short-instructions>
    <full-instructions>
      Give additional instructions and good/bad examples here
    </full-instructions>   
  </crowd-keypoint>
</crowd-form>

<script>
  var num_obj = 1;

  document.querySelector('crowd-form').onsubmit = function(e) {
    const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints;
    const labels = keypoints.map(function(p) {
      return p.label;
    });

    // 1. Make sure total number of keypoints is correct.
    var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels");

    original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\"");
    var goalNumKeypoints = num_obj*original_num_labels.length;
    if (keypoints.length != goalNumKeypoints) {
      e.preventDefault();
      errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>';
      errorBox.scrollIntoView();
      return;
    }

    // 2. Make sure all labels are unique.
    labelCounts = {};
    for (var i = 0; i < labels.length; i++) {
      if (!labelCounts[labels[i]]) {
        labelCounts[labels[i]] = 0;
      }
      labelCounts[labels[i]]++;
    }
    const goalNumSingleLabel = num_obj;

    const numLabels = Object.keys(labelCounts).length;

    Object.entries(labelCounts).forEach(entry => {
      if (entry[1] != goalNumSingleLabel) {
        e.preventDefault();
        errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>';
        errorBox.scrollIntoView();
      }
    })
  };
</script>

Attributes

此元素支持以下属性。

dismissible

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

type

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

元素层次结构

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

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

另请参阅

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

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

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

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



<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Choose the correct category for this image."
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
   
    <short-instructions id="short-instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-badge icon="star" for="short-instructions"/>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。



<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Please select the correct category for this image"
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-button>
        <iron-icon icon="question-answer"/>
      </crowd-button>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

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 存储库。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-bounding-box
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Draw bounding boxes around all the cats and dogs in this image"
    labels="['Cat', 'Dog']"
  >
    <full-instructions header="Bounding Box Instructions" >
      <p>Use the bounding box tool to draw boxes around the requested target of interest:</p>
      <ol>
        <li>Draw a rectangle using your mouse over each instance of the target.</li>
        <li>Make sure the box does not cut into the target, leave a 2 - 3 pixel margin</li>
        <li>
          When targets are overlapping, draw a box around each object,
          include all contiguous parts of the target in the box.
          Do not include parts that are completely overlapped by another object.
        </li>
        <li>
          Do not include parts of the target that cannot be seen,
          even though you think you can interpolate the whole shape of the target.
        </li>
        <li>Avoid shadows, they're not considered as a part of the target.</li>
        <li>If the target goes off the screen, label up to the edge of the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      Draw boxes around the requested target of interest.
    </short-instructions>
  </crowd-bounding-box>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<style>
  h3 {
    margin-top: 0;
  }
  
  crowd-card {
    width: 100%;
  }
  
  .card {
    margin: 10px;
  }
  
  .left {
    width: 70%;
    margin-right: 10px;
    display: inline-block;
    height: 200px;
  }
  
  .right {
    width: 20%;
    height: 200px;
    display: inline-block;
  }
</style>

<crowd-form>
  <short-instructions>
    Your short instructions here.
  </short-instructions>
  
  <full-instructions>
    Your full instructions here.
  </full-instructions>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Nothing is great.
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment1" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Everything is great!
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment2" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
</crowd-form>

Attributes

此元素支持以下属性。

heading

在框顶部显示的文本。

映像

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

元素层次结构

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

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

另请参阅

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

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

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-checkbox name="website-found">Website Found</crowd-checkbox>

</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
    <crowd-classifier
      name="category"
      categories="{{ task.input.labels | to_json | escape }}"
      header="What type of a document is this?"
    >
      <classification-target>
        <iframe style="width: 100%; height: 600px;" src="{{ task.input.taskObject  | grant_read_access }}" type="application/pdf"></iframe>
      </classification-target>
      
      <full-instructions header="Document Classification Instructions">
        <p>Read the task carefully and inspect the document.</p>
        <p>Choose the appropriate label that best suits the document.</p>
      </full-instructions>

      <short-instructions>
        Please choose the correct category for the document
      </short-instructions>
    </crowd-classifier>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
    <crowd-classifier-multi-select
      name="category"
      categories="['Positive', 'Negative', 'Neutral']"
      header="Select the relevant categories"
      exclusion-category="{ text: 'None of the above' }"
    >
      <classification-target>
        {{ task.input.taskObject }}
      </classification-target>
      
      <full-instructions header="Text Categorization Instructions">
        <p><strong>Positive</strong> sentiment include: joy, excitement, delight</p>
        <p><strong>Negative</strong> sentiment include: anger, sarcasm, anxiety</p>
        <p><strong>Neutral</strong>: neither positive or negative, such as stating a fact</p>
        <p><strong>N/A</strong>: when the text cannot be understood</p>
        <p>When the sentiment is mixed, such as both joy and sadness, choose both labels.</p>
      </full-instructions>

      <short-instructions>
       Choose all categories that are expressed by the text. 
      </short-instructions>
    </crowd-classifier-multi-select>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-entity-annotation
  name="crowd-entity-annotation"
  header="Highlight parts of the text below"
  labels="[{'label': 'person', 'shortDisplayName': 'per', 'fullDisplayName': 'Person'}, {'label': 'date', 'shortDisplayName': 'dat', 'fullDisplayName': 'Date'}, {'label': 'company', 'shortDisplayName': 'com', 'fullDisplayName': 'Company'}]"
  text="Amazon SageMaker Ground Truth helps you build highly accurate training datasets for machine learning quickly."
>
  <full-instructions header="Named entity recognition instructions">
    <ol>
      <li><strong>Read</strong> the text carefully.</li>
      <li><strong>Highlight</strong> words, phrases, or sections of the text.</li>
      <li><strong>Choose</strong> the label that best matches what you have highlighted.</li>
      <li>To <strong>change</strong> a label, choose highlighted text and select a new label.</li>
      <li>To <strong>remove</strong> a label from highlighted text, choose the X next to the abbreviated label name on the highlighted text.</li>
      <li>You can select all of a previously highlighted text, but not a portion of it.</li>
    </ol>
  </full-instructions>

  <short-instructions>
    Apply labels to words or phrases.
  </short-instructions>

    <div id="additionalQuestions" style="margin-top: 20px">
      <h3>
        What is the overall subject of this text?
      </h3>
      <crowd-radio-group>
        <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
        <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
      </crowd-radio-group>
    </div>
</crowd-entity-annotation>

<script>
  document.addEventListener('all-crowd-elements-ready', () => {
    document
      .querySelector('crowd-entity-annotation')
      .shadowRoot
      .querySelector('crowd-form')
      .form
      .appendChild(additionalQuestions);
  });
</script>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"></crowd-input>
            <crowd-fab id="button1" icon="report-problem" title="Issue"/>
        </short-instructions>
        
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

元素层次结构

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

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

元素事件

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

另请参阅

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

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

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"/></crowd-input>
            <crowd-icon-button id="button1" icon="report-problem" title="Issue"/>
        </short-instructions>
        
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-image-classifier-multi-select
    name="animals"
    categories="['Cat', 'Dog', 'Horse', 'Pig', 'Bird']"
    src="https://images.unsplash.com/photo-1509205477838-a534e43a849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1998&q=80"
    header="Please identify the animals in this image"
    exclusion-category="{ text: 'None of the above' }"
  >
    <full-instructions header="Classification Instructions">
      <p>If more than one label applies to the image, select multiple labels.</p>
      <p>If no labels apply, select <b>None of the above</b></p>
    </full-instructions>

    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label(s) that best suit the image.</p>
    </short-instructions>
  </crowd-image-classifier-multi-select>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <img style="max-width: 35vw; max-height: 50vh" src="{{ task.input.taskObject | grant_read_access }}">
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>

  <short-instructions>
    Your custom quick instructions and examples
  </short-instructions>

  <full-instructions>
    Your custom detailed instracutions and more examples
  </full-instructions>
</crowd-form>

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
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label all instances of the requested items in the image</p>
    </short-instructions>
  </crowd-instance-segmentation>
</crowd-form>

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


<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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  	<crowd-instructions link-text="View instructions" link-type="button">
		  <short-summary>
		    <p>Given an image, write three words or short phrases that summarize its contents.</p>
		  </short-summary>
		  <detailed-instructions>
		    <p>Imagine that you are describing an image to a friend or tagging it for a news website. Provide three specific words or short phrases that describe it.</p>
		  </detailed-instructions>
		  <positive-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	<ul>
		    		<li>Highway</li>
		    		<li>Cars</li>
		    		<li>Gas station</li>
		    	</ul>
		    </p>
		  </positive-example>
		  <negative-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	These are not specific enough:
		    	<ol>
		    		<li>Trees</li>
		    		<li>Outside</li>
		    		<li>Daytime</li>
		    	</ol>
		    </p>
		  </negative-example>
	</crowd-instructions>
    <p><strong>Instructions: </strong>Given an image, write three words or short phrases that summarize its contents.</p>
    <p>If someone were to see these three words or phrases, they should understand the subject and context of the image, as well as any important actions.</p>
	<p>View the instructions for detailed instructions and examples.</p>
	<p><img style="max-width: 100%; max-height: 100%" src="{{ task.input.taskObject | grant_read_access }}"></p>
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <div id="errorBox"></div>
   
  <crowd-keypoint
    src="{{ task.input.taskObject | grant_read_access }}"
    labels="['Item A', 'Item B', 'Item C']"        
    header="Please locate the centers of each item."
    name="annotatedResult">
    <short-instructions>
      Describe your task briefly here and give examples
    </short-instructions>
    <full-instructions>
      Give additional instructions and good/bad examples here
    </full-instructions>   
  </crowd-keypoint>
</crowd-form>

<script>
  var num_obj = 1;

  document.querySelector('crowd-form').onsubmit = function(e) {
    const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints;
    const labels = keypoints.map(function(p) {
      return p.label;
    });

    // 1. Make sure total number of keypoints is correct.
    var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels");

    original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\"");
    var goalNumKeypoints = num_obj*original_num_labels.length;
    if (keypoints.length != goalNumKeypoints) {
      e.preventDefault();
      errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>';
      errorBox.scrollIntoView();
      return;
    }

    // 2. Make sure all labels are unique.
    labelCounts = {};
    for (var i = 0; i < labels.length; i++) {
      if (!labelCounts[labels[i]]) {
        labelCounts[labels[i]] = 0;
      }
      labelCounts[labels[i]]++;
    }
    const goalNumSingleLabel = num_obj;

    const numLabels = Object.keys(labelCounts).length;

    Object.entries(labelCounts).forEach(entry => {
      if (entry[1] != goalNumSingleLabel) {
        e.preventDefault();
        errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>';
        errorBox.scrollIntoView();
      }
    })
  };
</script>

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 存储库。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-line
    name="crowdLine"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <short-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>Draw a line on each objects that the label applies to.</p>
    </short-instructions>

    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image. 
        <p>Draw a line along each object that the image applies to.
            Make sure that the line does not extend beyond the boundaries
            of the object.
        </p>
        <p>Each line is defined by a starting and ending point. Carefully
        place the starting and ending points on the boundaries of the object.</p>
    </full-instructions>
    
  </crowd-line>
</crowd-form>

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-modal
link-text = "See Examples"
link-type = "button">
Example Modal Text</crowd-modal>

此元素支持以下属性。

要显示的用于打开模态的文本。默认值为“Click to open modal”(单击以打开模态)。

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

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

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

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

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

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-polygon
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Draw a polygon around each of the requested target(s) of interest"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Polygon instructions">
      <ul>
        <li>Make the polygon tight around the object</li>
        <li>You need to select a label before starting a polygon</li>
        <li>You will need to select a label again after completing a polygon</li>
        <li>To select a polygon, you can click on its borders</li>
        <li>You can start drawing a polygon from inside another polygon</li>
        <li>You can undo and redo while you're drawing a polygon to go back and forth between points you've placed</li>
        <li>You are prevented from drawing lines that overlap other lines from the same polygon</li>
      </ul>
    </full-instructions>

    <short-instructions>
      <p>Draw a polygon around each of the requested target(s) of interest</p>
      <p>Make the polygon tight around the object</p>
    </short-instructions>
  </crowd-polygon>
</crowd-form>

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 存储库。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-polyline
    name="crowdPolyline"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>Draw a polyline around the boundaries of all objects
        that the label applies to.</p>
        <p>Use the <b>Enter</b> key to complete a polyline.</p>
        <p>Make sure that the polyline fits tightly around the boundary
        of the object.</p>
    </full-instructions>

    <short-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Review the tool guide to learn how to use the polyline tool.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>To draw a polyline, select a label that applies to an object of interest 
            and add a single point to the photo by clicking on that point. Continue to 
            draw the polyline around the object by adding additional points
            around the object boundary.</p>
        <p>After you place the final point on the polyline, press <b>Enter</b> on your
        keyboard to complete the polyline.</p>

    </short-instructions>
  </crowd-polyline>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
<crowd-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <p>Select an animal type:</p>
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1539&q=80" style="height: 500; width: 400;"/>
<br><br>
<div>
  <input type="radio" id="cat" name="animal-type" value="cat" required>
  <label for="cat">Cat</label>
</div>
<div>
  <input type="radio" id="dog" name="animal-type" value="dog">
  <label for="dog">Dog</label>
</div>
<div>
  <input type="radio" id="unknown" name="animal-type" value="unknown">
  <label for="unknown">Unknown</label>
</div>
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </short-instructions>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


  
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<style>
	body {
		padding-left: 20px;
		margin-bottom: 20px;
	}
	#outer-container {
	    display: flex;
	    justify-content: space-around;
	    max-width: 900px;
	    margin-left: 100px;
	}
	.left-container {
    	margin-right: auto;
    	padding-right: 50px;
	}
	.right-container {
    	margin-left: auto;
    	padding-left: 50px;
	}
	#vertical-separator {
	    border: solid 1px #d5dbdb;
	}
</style>

<crowd-form>
    <div>
        <h1>Instructions</h1>
	Lorem ipsum...
    </div>
    <div>
        <h2>Background</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="outer-container">
	<span class="left-container">
	    <h2>Option 1</h2>
	    <p>Nulla facilisi morbi tempus iaculis urna. Orci dapibus ultrices in iaculis nunc sed augue lacus.</p>
	</span>
	<span id="vertical-separator"></span>
	<span class="right-container">
	    <h2>Option 2</h2>
	    <p>Ultrices vitae auctor eu augue ut. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.</p>
	</span>
    </div>
    <div>
        <h2>Question</h2>
    	<p>Which do you agree with?</p>
	<crowd-radio-group>
	    <crowd-radio-button name="option1" value="Option 1">Option 1</crowd-radio-button>
	    <crowd-radio-button name="option2" value="Option 2">Option 2</crowd-radio-button>
	</crowd-radio-group>

    	<p>Why did you choose this answer?</p>
	<crowd-text-area name="explanation" placeholder="Explain how you reached your conclusion..."></crowd-text-area>
    </div>
</crowd-form>

Attributes

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

元素层次结构

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

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

输出

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

例元素输出示例


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

另请参阅

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

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

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-semantic-segmentation
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label the requested items in the image</p>
    </short-instructions>
  </crowd-semantic-segmentation>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。



<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
<crowd-instructions link-text="View instructions" link-type="button">
  <short-summary>
    <p>Provide a brief instruction here</p>
  </short-summary>

  <detailed-instructions>
    <h3>Provide more detailed instructions here</h3>
    <p>Include additional information</p>
  </detailed-instructions>

  <positive-example>
    <p>Provide an example of a good answer here</p>
    <p>Explain why it's a good answer</p>
  </positive-example>

  <negative-example>
    <p>Provide an example of a bad answer here</p>
    <p>Explain why it's a bad answer</p>
  </negative-example>
</crowd-instructions>

<div>
  <p>What is your favorite color for a bird?</p>
  <crowd-input name="favoriteColor" placeholder="example: pink" required></crowd-input>
</div>

<div>
  <p>Check this box if you like birds</p>
  <crowd-checkbox name="likeBirds" checked="true" required></crowd-checkbox>
</div>

<div>
  <p>On a scale of 1-10, how much do you like birds?</p>
  <crowd-slider name="howMuch" min="1" max="10" step="1" pin="true" required></crowd-slider>
</div>

<div>
  <p>Write a short essay describing your favorite bird</p>
  <crowd-text-area name="essay" rows="4" placeholder="Lorem ipsum..." required></crowd-text-area>
</div>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. 
        Pellentesque nulla ipsum ante quisque quam augue. 
        Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. 
        At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, 
        quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, 
        nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

Attributes

此元素支持以下属性。

header

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

元素层次结构

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

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

另请参阅

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

选项卡式信息的容器。

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. 
        Pellentesque nulla ipsum ante quisque quam augue. 
        Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. 
        At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, 
        quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, 
        nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

Attributes

此元素没有属性。

元素层次结构

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

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

另请参阅

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

用于文本输入的字段。

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <audio controls>
      <source src="{{ task.input.taskObject | grant_read_access }}" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  <h3>Instructions</h3>
  <p>Transcribe the audio</p>
  <p>Ignore "umms", "hmms", "uhs" and other non-textual phrases</p>
  <crowd-text-area name="transcription" rows="4"></crowd-text-area>
</crowd-form>

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 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。




<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-toast duration="10000" opened>
    This is a message that you want users to see when opening the template. This message will disappear in 10 seconds. 
   </crowd-toast>

</crowd-form>

Attributes

此元素支持以下属性。

duration

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

文本

通知中要显示的文本。

元素层次结构

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

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

另请参阅

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

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

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <!--Toggle button without value-->
  <crowd-toggle-button name="toggleButtonWithoutValue"></crowd-toggle-button>

  <!--Toggle button with value-->
  <crowd-toggle-button name="toggleButtonWithValue" value="someValue"></crowd-toggle-button>

  <!--Toggle button disabled-->
  <crowd-toggle-button name="toggleButtonDisabled" disabled></crowd-toggle-button>

  <!--Toggle button marked invalid-->
  <crowd-toggle-button name="toggleButtonInvalid" invalid></crowd-toggle-button>

  <!--Toggle button marked required-->
  <crowd-toggle-button name="toggleButtonRequired" required></crowd-toggle-button>
</crowd-form>

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

输出

例 ：示例元素输出

另请参阅

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

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出

例：示例元素输出