本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# SageMaker AI Crowd HTML 元素
<a name="general-topiclist"></a>

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

## Crowd HTML 元素 V2
<a name="elements-v2"></a>

Crowd HTML V2 元素推出增強型標籤功能，旨在以針對 GenAI 模型訓練使用案例量身打造的新功能來支援工作者。這些 V2 元素相容於 Crowd HTML 元素 crowd-form、short-instructions、crowd-button、crowd-tabs 和 crowd-tab。如果您搭配使用 V2 元素和其他元素，註釋應用程式將無法正常運作。

### crowd-text-ranking
<a name="sms-ui-template-crowd-text-ranking"></a>

供工作者根據您指定的維度滑動和排列各種文字輸入的小工具。

請參閱使用此 Crowd HTML 元素的 HTML 範本的互動式範例 [CodePen](https://codepen.io/sagemaker_crowd_html_elements_2/pen/ZYGqBPQ)。

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

<crowd-form>
  <crowd-text-ranking
    name="textRanking"
    ordinal-ranking-dimensions='[{"name":"Clarity","allowTie":true},{"name":"Inclusivity","allowTie":false}]'
    text="Explain why you can see yourself in a mirror at a level that a 16 year old can understand."
    responses='["When light is emitted from light source like a light bulb, some of it travels toward your body, where it may be reflected toward the mirror with some probability or it may be absorbed. If it were reflected off your body, then some of it could travel toward the mirror, where it could be reflected again. If it is the case where light strikes the mirror, the light is then again redirected as a reflection. If that light is pointed in the direction of your eyes, then the light will enter your eyes. Then, your brain processes the electrical signal made by your eyes and sees it as an image.","You can see yourself because of a series of light reflections. Light travels from the light source, hits and reflects off of your body and travels toward the mirror. Then, it reflects off of the mirror and travels to your eyes, where your brain registers it as a picture of yourself.","Light travels in various directions from a light source like a light bulb. Some of the light reflects off of your body with some probability, after which some of it travels to the mirror. Upon striking the mirror, the some of the light again reflects off the mirror and travels toward your eyes, wherein your eyes detect the light after absorbing it. After this process, your brain processes the signal as an image of yourself.","The phenomenon of self-visual perception via a mirror at an ontological plane derives from the intricate interplay of photons within the electromagnetic spectrum, quantum mechanical principles, and the neurocognitive processes underpinning self-recognition. In essence, the mirror serves as an interface wherein incident photons, emitted from an external object, interact with the reflective surface at a specific angle of incidence governed by the laws of geometric optics. This interaction culminates in the process of specular reflection, leading to the formation of a virtual image."]'
  >
    <short-instructions>
      <h1>Hello these are my instructions 1</h1>
      <p>Hello these are my instructions 2</p>
      <p>Hello these are my instructions 3</p>
    </short-instructions>
  </crowd-text-ranking>
</crowd-form>
```

#### 屬性
<a name="crowd-text-ranking-attributes"></a>

此元素支援下列屬性。

##### text
<a name="crowd-text-ranking-attributes-text"></a>

排列回應時要參考的文字或 S3 參考。

##### ordinal-ranking-dimensions
<a name="crowd-text-ranking-attributes-ordinal-ranking"></a>

`ordinal-ranking-dimensions` 物件的必要陣列，其會指定要排列回應的維度。此維度包含**名稱**和名為 **allowTie** 的屬性，可決定工作者是否可以提供相同排名的回應。

##### 回應
<a name="crowd-text-ranking-attributes-responses"></a>

`ordinal-ranking-dimensions` 物件的必要陣列，其會指定要排列回應的維度。此維度包含**名稱**和名為 **allowTie** 的屬性，可決定工作者是否可以提供相同排名的回應。

##### name
<a name="crowd-text-ranking-attributes-name"></a>

必要字串欄位，可識別工作者提交的回答。它符合工作者提交的輸出資料合約中的索引鍵。

如需更多資訊，請參閱下列內容。
+ [搭配使用人工和 Amazon SageMaker Ground Truth 來訓練資料標籤](sms.md)
+ [Crowd HTML 元素參考](sms-ui-template-reference.md)

### crowd-question-answer-generation
<a name="sms-ui-template-crowd-question-answer-generation"></a>

供工作者根據指示反白文字區段並指派問答配對的小工具

請參閱使用此 Crowd HTML 元素的 HTML 範本的互動式範例 [CodePen](https://codepen.io/sagemaker_crowd_html_elements_2/pen/zxGmobo)。

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

<crowd-form>
  <crowd-question-answer-generation
    name="questionAnswerGeneration"
    text='The Amazon rainforest (Portuguese: Floresta Amazônica or Amazônia; Spanish: Selva Amazónica, Amazonía or usually Amazonia; French: Forêt amazonienne; Dutch: Amazoneregenwoud), also known in English as Amazonia or the Amazon Jungle, is a moist broadleaf forest that covers most of the Amazon basin of South America. This basin encompasses 7,000,000 square kilometres (2,700,000 sq mi), of which 5,500,000 square kilometres (2,100,000 sq mi) are covered by the rainforest. This region includes territory belonging to nine nations. The majority of the forest is contained within Brazil, with 60% of the rainforest, followed by Peru with 13%, Colombia with 10%, and with minor amounts in Venezuela, Ecuador, Bolivia, Guyana, Suriname and French Guiana. States or departments in four nations contain "Amazonas" in their names. The Amazon represents over half of the planet's remaining rainforests, and comprises the largest and most biodiverse tract of tropical rainforest 
    in the world, with an estimated 390 billion individual trees divided into 16,000 species. For a long time, it was thought that the 
    Amazon rainforest was only ever sparsely populated, as it was impossible to sustain a large population through agriculture given the poor soil. 
    Archeologist Betty Meggers was a prominent proponent of this idea, as described in her book Amazonia: Man and Culture in a Counterfeit Paradise. 
    She claimed that a population density of 0.2 inhabitants per square kilometre (0.52/sq mi) is the maximum that can be sustained in the rainforest 
    through hunting, with agriculture needed to host a larger population. However, recent anthropological findings have suggested that the region was 
    actually densely populated. Some 5 million people may have lived in the Amazon region in AD 1500, divided between dense coastal settlements, such as that at
    Marajó, and inland dwellers. By 1900 the population had fallen to 1 million and by the early 1980s it was less than 200,000.'
    min-questions="1"
    max-questions="10"
    question-min-words="1"
    question-max-words="100"
    answer-min-words="1"
    answer-max-words="100"
    question-tags='[
      "tag1",
      "tag2",
      "tag3"
    ]'
    allow-custom-question-tags="true"
  >
    <short-instructions>
      <p>User instructions will be displayed here.</p>
    </short-instructions>
  </crowd-question-answer-generation>
</crowd-form>
```

#### 屬性
<a name="crowd-question-answer-generation-attributes"></a>

此元素支援下列屬性。

##### text
<a name="crowd-question-answer-generation-attributes-text"></a>

排列回應時要參考的文字或 S3 參考。

##### min-questions
<a name="crowd-question-answer-generation-attributes-min-questions"></a>

選用整數，指定工作者在任務期間必須建立的問題數量下限。如果未提供，系統會要求您至少撰寫一個問答配對。

##### max-questions
<a name="crowd-question-answer-generation-attributes-max-questions"></a>

選用整數，指定工作者在任務期間可以建立的問題數量上限。

##### question-min-words
<a name="crowd-question-answer-generation-attributes-question-min-words"></a>

選用整數，指定問題中允許的字數下限。如果未提供，系統會要求您在問題中至少寫一個字。

##### question-max-words
<a name="crowd-question-answer-generation-attributes-question-max-words"></a>

選用整數，指定問題中允許的字數上限。

##### answer-min-words
<a name="crowd-question-answer-generation-attributes-answer-min-words"></a>

選用整數，指定回答中允許的字數下限。如果未提供，系統會要求您在回答中至少寫一個字。

##### answer-max-words
<a name="crowd-question-answer-generation-attributes-answer-max-words"></a>

選用整數，指定回答中允許的字數上限。

##### question-tags
<a name="crowd-question-answer-generation-attributes-question-tags"></a>

必要字串陣列，指定工作者可指派給問答配對的可能標籤。如果此陣列為空白，則不會顯示 question-tags 欄位。

##### allow-custom-question-tags
<a name="crowd-question-answer-generation-attributes-allow-custom-question-tags"></a>

必要布林值欄位，說明工作者是否可以指定自訂問題標籤。

##### name
<a name="crowd-question-answer-generation-attributes-name"></a>

必要字串欄位，可識別工作者提交的回答。它符合工作者提交的輸出資料合約中的索引鍵。

如需更多資訊，請參閱下列內容。
+ [搭配使用人工和 Amazon SageMaker Ground Truth 來訓練資料標籤](sms.md)
+ [Crowd HTML 元素參考](sms-ui-template-reference.md)