SageMaker 人群的 HTML 元素

以下是 Crowd HTML 元素清單，可讓您更輕鬆地建置自訂範本，並為工作者提供熟悉的使用者介面。Ground Truth、增強版 AI 和 Mechanical Turk 中支援這些元素。

提醒工作者目前情況的訊息。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-alert> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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
子元素：無

另請參閲

如需更多資訊，請參閱下列內容。

浮動在另一個已連接元素右上角的圖示。

請參閱在中使用此人群 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。

此屬性會覆寫標籤屬性。

以下是可供您用來將 iron-icon 新增至 <crowd-badge> HTML 元素的語法範例。請將 icon-name 更換為您要從此圖示集中使用的圖示名稱。


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

label

在徽章上顯示的文字。建議三個字元或更少，因為字數太多會超出徽章區域。您可以設定圖示屬性來顯示圖示，而非文字。

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

代表某些動作的樣式按鈕。

請參閱在中使用此人群 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

此開關會提交其父 crowd-form 元素 (如果設為 "submit") 或重設其父 <crowd-form> 元素 (如果設為 "reset")。

href

線上資源的 URL。如果您需要按鈕樣式的連結，請使用此屬性。

icon

指定要在按鈕文字旁顯示之圖示的字串。字串必須是來自開放原始碼 iron-icons 集之圖示的名稱 (已預先載入)。例如，若要插入 search iron-icon，請使用下列內容：


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

圖示會定位在文字的左側或右側，依照 icon-align 屬性所指定。

若要使用自訂圖示，請參閱 icon-url。

icon-align

相對於按鈕文字之圖示的左側或右側位置。預設為 "left"。

icon-url

圖示自訂影像的 URL。您可以使用自訂影像來取代由 icon 屬性指定的標準圖示。

正在載入

將按鈕顯示為處於載入狀態的布林值開關 (如有)。此屬性的優先權高於 disabled 屬性 (如果兩個屬性都存在)。

目標

當您使用 href 屬性將按鈕做為特定 URL 的超連結時，target 屬性會選擇性以已連結 URL 應載入的框架或視窗為目標。

variant

按鈕的一般樣式。為主要按鈕使用 "primary"，為次要按鈕使用 "normal"，為第三按鈕使用 "link"，或使用 "icon" 僅顯示圖示，不含文字。

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

用於在影像上繪製矩形，並為每個矩形中影像部分指定標籤的 widget。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-bounding-box> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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 布林值追蹤。

高度 – 方塊的高度 (以像素為單位)。
標籤 – 做為標籤任務的一部分，指派給方塊的文字。此文字必須與 <crowd-bounding-box> 元素之 labels 屬性中定義的其中一個標籤相符。
左側 – 方塊左上角跟影像左側之間的距離 (以像素為單位)。
上方 – 方塊左上角跟影像上方之間的距離 (以像素為單位)。

寬度 – 方塊的寬度 (以像素為單位)。

您可以使用 Liquid 範本語言，從自訂範本中先前任務的資訊清單檔案擷取邊界框初始值：


initial-value="[
  {% for box in task.input.manifestLine.label-attribute-name-from-prior-job.annotations %}
    {% capture class_id %}{{ box.class_id }}{% endcapture %}
    {% assign label = task.input.manifestLine.label-attribute-name-from-prior-job-metadata.class-map[class_id] %}
    {
      label: {{label | to_json}},
      left: {{box.left}},
      top: {{box.top}},
      width: {{box.width}},
      height: {{box.height}},
    },
  {% endfor %}
 ]"

labels

JSON 格式的字串陣列，每個字串都是可讓工作者指派給矩形中影像部分的標籤。限制：10 個標籤。

name

此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

src

要繪製邊界框之影像的 URL。

元素階層

此元素具有下列父元素及子元素。

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

區域

此元素需要下列區域。

full-instructions

如何繪製邊界框的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

輸出

此元素支援下列輸出。

boundingBoxes

JSON 物件的陣列，每個陣列指定由工作者建立的邊界框。陣列中的每個 JSON 物件都包含下列屬性。

高度 – 方塊的高度 (以像素為單位)。
標籤 – 做為標籤任務的一部分，指派給方塊的文字。此文字必須與 <crowd-bounding-box> 元素之 labels 屬性中定義的其中一個標籤相符。
左側 – 方塊左上角跟影像左側之間的距離 (以像素為單位)。
上方 – 方塊左上角跟影像上方之間的距離 (以像素為單位)。
寬度 – 方塊的寬度 (以像素為單位)。

輸入 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
      }
    }
  }
]

您可以擁有許多可用的標籤，但僅已使用的標籤會顯示在輸出中。

另請參閲

如需更多資訊，請參閱下列內容。

具有升階外觀的方塊，用於顯示資訊。

請參閱在中使用此人群 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

方塊頂端顯示的文字。

image

在方塊內顯示之圖像的 URL。

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

可以選取或取消選取的使用者介面元件，可讓使用者從集合中選取多個選項。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-checkbox> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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
    }
  }
]

另請參閲

如需更多資訊，請參閱下列內容。

用於分類非影像內容的 widget，例如音訊、影片或文字。

請參閱在中使用此人群 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

此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

元素階層

此元素具有下列父元素及子元素。

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

區域

此元素支援下列區域。

classification-target

由工作者分類的內容。可以是純文字或 HTML。可以如何使用 HTML 的範例包括但不限於嵌入影片或音訊播放器、嵌入 PDF 或比較兩個或更多影像。

full-instructions

如何進行文字分類的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

輸出

此元素的輸出是使用指定 name 值做為屬性名稱的物件，並使用 categories 中的字串做為屬性值。

範例：範例元素輸出

下列是此元素輸出的範例。


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

另請參閲

如需更多資訊，請參閱下列內容。

用於將各種形式的內容 (例如音訊、視訊或文字) 分類為一或多個類別的 Widget。要分類的內容稱為物件。

請參閱在中使用此人群 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

必要。此 widget 的名稱。在表單輸出中，該名稱被用作 Widget 的輸入金鑰。

exclusion-category

選用。具有以下格式的 JSON 格式字串："{ text: 'default-value' }"。此屬性會設定預設值，如果沒有任何標籤適用於工作者使用者介面中顯示的物件時，則工作者可以選擇此值。

元素階層

此元素具有下列父元素及子元素：

父元素：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 (提交) 按鈕。

請參閱在中使用此人群 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 格式的物件陣列，其中每個陣列都會定義在初始化時套用到文字的註釋。物件包含與 labels 屬性中的一個值相符的 label 值，標籤跨度起始 unicode 位移的整數 startOffset 值，以及結束 unicode 位移的整數 endOffset 值。


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

labels

JSON 格式的物件陣列，其中每個陣列都包含：

label (必要)：識別實體所用的名稱。
fullDisplayName (選用)：用於任務小工具中的標籤清單。如果未指定，則預設為標籤值。
shortDisplayName (選用)：要在所選實體上方顯示的 3-4 個字母的縮寫。如果未指定，則預設為標籤值。

強烈建議使用 shortDisplayName
選取項目上方顯示的值可能會重疊，並導致使用者難以在工作空間中管理已標籤的實體。強烈建議為每個標籤提供 3-4 個字元的 shortDisplayName 以避免重疊，並讓工作空間可供工作者進行管理。


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

name

做為 DOM 中的小工具名稱。它也在表單輸出和輸出資訊清單中用做為標籤屬性名稱。

text

要加入註釋的文字。範本系統預設會逸出引號和 HTML 字串。如果已為您的程式碼進行逸出或部分逸出，請參閱變數篩選條件以了解更多控制逸出的方法。

元素階層

此元素具有下列父元素及子元素。

子元素：full-instructions、short-instructions

區域

此元素支援下列區域。

full-instructions

如何使用小工具的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

輸出

此元素支援下列輸出。

實體

指定註釋之開始、結束和標籤的 JSON 物件。此物件包含下列屬性。

標籤 — 指定的標籤。
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
      }
    ]
  }
}

另請參閲

如需更多資訊，請參閱下列內容。

在其中心含有影像的浮動按鈕。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是專為使用該 <crowd-fab> 元素之映像分類所設計的液體範本範例。此範本用 JavaScript 來讓 Worker 能夠報告背景工作者 UI 的問題。複製下列程式碼，並將其儲存在副檔名為 .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。

以下是可供您用來將 iron-icon 新增至 <crowd-fab> HTML 元素的語法範例。請將 icon-name 更換為您要從此圖示集中使用的圖示名稱。


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

label

由單一字元組成的字串，可用於代替圖示。表情符號或多字元可能會導致按鈕顯示省略符號。

標題

當滑鼠停留在按鈕上時會顯示為工具提示的字串。

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

所有自訂任務的表單包裝函式。設定並實作適當提交表單資料的重要動作。

如果 "submit" 類型的 crowd-button 未包含於 <crowd-form> 元素中，則會將其自動附加於 <crowd-form> 元素內。

請參閱在中使用此人群 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>

元素階層

此元素具有下列父元素及子元素。

父元素：無
子元素：任何使用者介面範本元素

元素事件

crowd-form 元素擴充標準 HTML form 元素，並繼承它的事件，例如 onclick 和 onsubmit。

另請參閲

如需更多資訊，請參閱下列內容。

影像位於其中心的按鈕。使用者觸碰按鈕時，會從按鈕的中心散發波紋效應。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是專為使用該 <crowd-icon-button> 元素之映像分類所設計的液體範本範例。此範本用 JavaScript 來讓 Worker 能夠報告背景工作者 UI 的問題。複製下列程式碼，並將其儲存在副檔名為 .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。

以下是可供您用來將 iron-icon 新增至 <crowd-icon-button> HTML 元素的語法範例。請將 icon-name 更換為您要從此圖示集中使用的圖示名稱。


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

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

用於分類影像的小工具。使用以下支援的影像格式：APNG、BMP、GIF、ICO、JPEG、PNG、SVG。影像沒有大小限制。

請參閱在中使用此人群 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

此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

overlay

要覆蓋在來源影像上的資訊。這是用於邊界框、語意分割和實例分割任務的驗證工作流程。

它是 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> 元素之類別屬性中定義的其中一個值。

範例：範例元素輸出

下列是此元素輸出的範例。


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

另請參閲

如需更多資訊，請參閱下列內容。

用於將影像分類成一個或多個類別的小工具。使用以下支援的影像格式：APNG、BMP、GIF、ICO、JPEG、PNG、SVG。影像沒有大小限制。

請參閱在中使用此人群 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

必要。此 widget 的名稱。在表單輸出中，該名稱被用作 Widget 的輸入金鑰。

src

必要。欲分類之影像的 URL。

exclusion-category

選用。具有以下格式的 JSON 格式字串："{ text: 'default-value' }"。此屬性會設定預設值，如果沒有任何標籤適用於工作者使用者介面中顯示的影像，則工作者可以選擇此值。

元素階層

此元素具有下列父元素及子元素：

父元素：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> 來關閉元素。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-input> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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

顯示於文字欄位中的字串。

當工作者開始在欄位中輸入，或已設定值屬性時，此文字會縮小並上升至文字欄位之上。

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

這表示，為了剖析這些結果而建置的任何程式碼，都應該能處理答案中每個輸入的存在 (或不存在)。

另請參閲

如需更多資訊，請參閱下列內容。

用於識別影像中特定物件的個別執行個體並為每個標籤執行個體建立顏色覆蓋的 widget。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用 <crowd-instance-segmentation> 的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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

在映像上顯示的文字。通常是給工作者的問題或簡便指示。

labels

JSON 格式的字串陣列，每個字串都是可讓工作者在影像中指派物件執行個體的標籤。工作者可以選擇工具中標籤下方的 “新增執行個體”，為每個相關的執行個體產生不同的覆蓋顏色。

name

此 widget 的名稱。在表單輸出中用做標籤資料的鍵。

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

包含標籤之 Base64 編碼 PNG 的 JSON 物件。

執行個體

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

另請參閲

如需更多資訊，請參閱下列內容。

當工作者按一下連結或按鈕，會在三個標籤頁 (摘要、詳細說明和範例) 上顯示說明的元素。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用 <crowd-instructions> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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

提供任務特定說明的內容。會在 “詳細說明” 標籤的頁面上顯示。

negative-example

提供任務完成不充足之範例的內容。會在 “範例” 標籤的頁面上顯示。此元素內可能會提供多個範例。

positive-example

提供任務妥當完成之範例的內容。會在「範例」標籤的頁面上顯示。

short-summary

總結要完成之任務的簡短陳述式。會在 “總結” 標籤的頁面上顯示。此元素內可能會提供多個範例。

另請參閲

如需更多資訊，請參閱下列內容。

產生工具以在映像上選擇和註釋關鍵點。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用 <crowd-keypoint> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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 屬性中必須有相符值，否則點不會轉譯。

labels

JSON 格式的字串陣列，做為關鍵點註釋標籤。

name

用於識別由工作者提交之回答的字串。此值會符合指定回答之 JSON 物件中的鍵。

src

要加註釋之映像的來源 URI。

元素階層

此元素具有下列父元素及子元素。

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

區域

此元素需要下列區域。

full-instructions

如何註釋映像的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

輸出

此元素支援下列輸出。

輸入 ImageProperties

JSON 物件，指定由工作者註釋之映像的維度。此物件包含下列屬性。

height – 映像的高度 (以像素為單位)。
寬度 – 映像的寬度 (以像素為單位)。

keypoints

JSON 物件的陣列，包含關鍵點的座標和標籤。每個物件包含下列屬性。

標籤 – 關鍵點的指派標籤。
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
        }
      ]
    }
  }
]

您可以擁有許多標籤，但唯有已使用的標籤會顯示在輸出中。

另請參閲

如需更多資訊，請參閱下列內容。

在影像上繪製線條的小工具。每一條線都與一個標籤相關聯，輸出資料將報告每條線的起點和終點。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-line> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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 屬性設定的線可以進行調整。無論有調整工作者的回答，都會透過 Worker 答案輸出中的 initialValueModified 布林值來追蹤。

labels

必要。JSON 格式的字串陣列，每個字串都是可讓工作者指派線條的標籤。

限制：10 個標籤

label-colors

選用。字串陣列。每個字串都是標籤的十六進位 (hex) 程式碼。

name

必要。此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

src

必要。要繪製線之影像的 URL。

區域

此元素需要下列區域。

full-instructions

如何繪製線的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

元素階層

此元素具有下列父元素及子元素。

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

輸出

輸入 ImageProperties

JSON 物件，指定由工作者註釋之映像的維度。此物件包含下列屬性。

height – 映像的高度 (以像素為單位)。
width — 影像的寬度 (以像素為單位)。

lines

JSON 陣列，包含具有線性標籤和頂點的物件。

label — 指定給一條線的標籤。
頂點 — 是該條線起點和終點的 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
            }
          ]
        }
      ]
    }
  }

另請參閲

如需更多資訊，請參閱下列內容。

開啟時會顯示的小型視窗。

請參閱在中使用此人群 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>

此元素支援下列屬性。

用於開啟模態的顯示文字。預設為 “按一下以開啟模態”。

指定模態之觸發類型的字串。可能值為 "link" (預設) 和 "button"。

此元素具有下列父元素及子元素。

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

如需更多資訊，請參閱下列內容。

用於在映像上繪製多邊形，並為每個多邊形中映像部分指派標籤的 widget。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-polygon> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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

在映像上顯示的文字。通常是給工作者的問題或簡便指示。

labels

JSON 格式的字串陣列，每個字串都是可讓工作者指派給多邊形中映像部分的標籤。

name

此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

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
         }
       ]
     }
  ]'

因為這會位在 HTML 元素中，所以 JSON 陣列必須使用單引號或雙引號括起來。上述範例使用單引號封裝 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
            }
          ]
        }
      ]
    }
  }
]

您可以擁有許多可用的標籤，但僅已使用的標籤會顯示在輸出中。

另請參閲

如需更多資訊，請參閱下列內容。

在影像上繪製折線或線條的小工具。每條折線都會與標籤相關聯，並且可以包括兩個或多個頂點。折線可以與本身交叉，並且該折線的起點和終點可以在影像的任何地方。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-polyline> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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 屬性設定的折線可以進行調整。無論有調整工作者的回答，都會透過 Worker 答案輸出中的 initialValueModified 布林值來追蹤。

labels

必要。JSON 格式的字串陣列，每個字串都是可讓工作者指派線條的標籤。

限制：10 個標籤

label-colors

選用。字串陣列。每個字串都是標籤的十六進位 (hex) 程式碼。

name

必要。此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

src

必要。要繪製折線之影像的 URL。

區域

此元素需要下列區域。

full-instructions

如何繪製折線的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

元素階層

此元素具有下列父元素及子元素。

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

輸出

輸入 ImageProperties

JSON 物件，指定由工作者註釋之映像的維度。此物件包含下列屬性。

height – 映像的高度 (以像素為單位)。
width – 映像的寬度 (以像素為單位)。

折線

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 元素的範例。

請參閱在中使用此人群 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>

在此範例中，可以在自訂 Worker 任務 GitHub 範本中看到先前的範例：實體辨識標記工作自訂範本。

Crowd HTML Element 的選項按鈕不支援 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 元素的自訂使用者介面範本的範例，請參閱此實體辨識標籤工作自訂範本。

請參閱在中使用此人群 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
    }
  }
]

另請參閲

如需更多資訊，請參閱下列內容。

用於將影像進行分割並為每個影像區段指派標籤的 widget。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-semantic-segmentation> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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 %}
   } 
}"

labels

JSON 格式的字串陣列，每個字串都是可讓工作者指派影像區段的標籤。

name

此 widget 的名稱。在表單輸出中用做 widget 輸入的鍵。

src

要進行分割的影像 URL。

元素階層

此元素具有下列父元素及子元素。

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

區域

此元素支援下列區域。

full-instructions

如何進行影像分割的一般說明。

short-instructions

在明顯位置顯示的重要任務特定指示。

輸出

此元素支援下列輸出。

labeledImage

包含標籤之 Base64 編碼 PNG 的 JSON 物件。

labelMappings

JSON 物件，包含以分隔標籤命名的物件。

色彩 – 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>"
      }
    }
  }
]

另請參閲

如需更多資訊，請參閱下列內容。

包含滑動旋鈕的滑桿，可讓工作者移動旋鈕，從一系列的值中選取值。滑桿是反映強度層級 (例如色域、亮度或色彩飽和度) 之設定的絕佳選擇。

請參閱在中使用此人群 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 值表示影片已緩衝之時間軸上的點。

步驟

指定滑桿上可選值之間差異的數字。

value

如果工作者未提供輸入，則會成為預設的預設集。

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

看起來像標籤的元件，其中包含下列資訊。

請參閱在中使用此人群 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
子元素：無

另請參閲

如需更多資訊，請參閱下列內容。

標籤資訊的容器。

請參閱在中使用此人群 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

另請參閲

如需更多資訊，請參閱下列內容。

用於文字輸入的欄位。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是液體範本的範例，設計用來轉錄使用該 <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

顯示於文字欄位中的字串。

當工作者開始在欄位中輸入，或已設定值屬性時，此文字會縮小並上升至文字欄位之上。

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 可見。

請參閱在中使用此人群 HTML 元素的 HTML 模板的互動式範例CodePen。

以下是使用該 <crowd-toast> 元素的液體範本範例。複製下列程式碼，並將其儲存在副檔名為 .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

此元素支援下列屬性。

持續時間

指定通知在畫面上顯示之持續時間 (以毫秒為單位) 的數字。

text

在通知中顯示的文字。

元素階層

此元素具有下列父元素及子元素。

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

另請參閲

如需更多資訊，請參閱下列內容。

可做為 ON/OFF 開關並切換狀態的按鈕。

請參閱在中使用此人群 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。

您必須啟用 Javascript，才能使用 AWS 文件。請參閱您的瀏覽器說明頁以取得說明。

文件慣用形式

Crowd HTML 元素參考

增強版 AI Crowd HTML 元素

SageMaker 人群的 HTML 元素

Attributes

dismissible

type

元素階層

另請參閲

Attributes

for

icon

label

元素階層

另請參閲

Attributes

disabled

form-action

href

icon

icon-align

icon-url

正在載入

目標

variant

元素階層

另請參閲

Attributes

header

initial-value

labels

name

src

元素階層

區域

full-instructions

short-instructions

輸出

boundingBoxes

輸入 ImageProperties

範例 ：範例元素輸出

另請參閲

Attributes

heading

image

元素階層

另請參閲

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

輸出

範例 ：範例元素輸出

另請參閱

重要：可獨自運作的小工具

範例：範例元素輸出

範例：範例元素輸出

範例：範例元素輸出

範例：範例元素輸出

範例：範例元素輸出

範例：範例元素輸出

範例：範例元素輸出