在本機開發範本使用外部資產追蹤您的變數 Amazon Textract 的自訂範本範例 Amazon Rekognition 的自訂範本範例透過 Liquid 新增自動化預覽工作者任務範本

建立自訂工作者任務範本

Crowd HTML 元素是 Web 元件，提供許多任務 Widget 和設計元素，可根據您想要詢問的問題而量身打造。您可以使用這些 Crowd 元素來建立自訂工作者範本，並將此範本與 Amazon 增強版 AI (Amazon A2I) 人工審核工作流程整合，以自訂工作者主控台和指示。

如需 Amazon A2I 使用者可用的所有 HTML crowd 元素的清單，請參閱Crowd HTML 元素參考。如需範本的範例，請參閱AWS GitHub存放庫，其中包含超過 60 個範例自訂任務範本。

在本機開發範本

在主控台測試範本處理傳入資料的方式時，您可以將下列程式碼新增至 HTML 檔案頂端，在瀏覽器中測試範本 HTML 和自訂元素的外觀和風格。


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

此作業會載入必要的程式碼來轉譯自訂 HTML 元素。如果您想要以您偏好的編輯器 (而不是主控台) 來開發範本外觀和風格，請使用此程式碼。

此程式碼不會剖析變數。在本機開發時，您可能使用範例內容來取代。

使用外部資產

Amazon 增強版 AI 自訂範本可讓您嵌入外部指令碼和樣式表。例如，下列標題會將位於 https://www.example.com/my-enhancement-styles.css 的 text/css 樣式表名稱 stylesheet 內嵌至自訂範本。


<script src="https://www.example.com/my-enhancment-script.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.example.com/my-enhancement-styles.css">

如果發生錯誤，請確保您的原始伺服器傳送資產的正確 MIME 類型和編碼標題。

例如，遠端指令碼的 MIME 和編碼類型為 application/javascript;CHARSET=UTF-8。

遠端樣式表的 MIME 和編碼類型為 text/css;CHARSET=UTF-8。

追蹤您的變數

建立自訂範本時，您必須在其中新增變數，以表示資料片段，這些資料片段可能會依任務或工作者而有所不同。如果您從其中一個範例範本開始，請確定您知道該範本已使用的變數。

例如，對於將增強版 AI 人工審核循環與 Amazon Textract 文字審核任務整合的自訂範本，使用 {{ task.input.selectedAiServiceResponse.blocks }} 取得初始值輸入資料。對於 Amazon 增強版 AI (Amazon A2I) 與 Amazon Rekognition 整合，則是使用 {{ task.input.selectedAiServiceResponse.moderationLabels }}。對於自訂任務類型，您需要決定任務類型的輸入參數。使用 {{ task.input.customInputValuesForStartHumanLoop}}，其中指定 customInputValuesForStartHumanLoop。

Amazon Textract 的自訂範本範例

所有自訂範本都以 <crowd-form> </crowd-form> 元素開始和結束。如同標準 HTML <form> 元素，所有表單程式碼都應該放置於這些元素間。

對於 Amazon Textract 文件分析任務，請使用 <crowd-textract-analyze-document> 元素。它使用以下屬性：

src – 指定要註釋的影像檔案 URL。
initialValue – 針對工作者使用者介面中找到的屬性設定初始值。
blockTypes (必要) – 決定工作者可以執行的分析類型。目前僅支援 KEY_VALUE_SET。
keys (必要) - 指定工作者可新增的新索引鍵和相關文字值。
no-key-edit (必要) - 防止工作者編輯經由 initialValue 傳遞的註釋索引鍵。
no-geometry-edit - 防止工作者編輯經由 initialValue 傳遞的註釋多邊形。

對於 <crowd-textract-analyze-document> 元素的子系，您必須有兩個區域。您可以在這些區域中使用任意 HTML 和 CSS 元素。

<full-instructions> – 工具中檢視完整說明連結提供的說明。這可以保留空白，但我們建議您提供完整的指示，以獲得更好的結果。
<short-instructions> – 在工具側邊欄中顯示的任務簡短描述。這可以保留空白，但我們建議您提供完整的指示，以獲得更好的結果。

Amazon Textract 範本看起來與下列類似。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
{% capture s3_uri %}http://s3.amazonaws.com/{{ task.input.aiServiceRequest.document.s3Object.bucket }}/{{ task.input.aiServiceRequest.document.s3Object.name }}{% endcapture %}

<crowd-form>
  <crowd-textract-analyze-document
    src="{{ s3_uri | grant_read_access }}"
    initial-value="{{ task.input.selectedAiServiceResponse.blocks }}"
    header="Review the key-value pairs listed on the right and correct them if they don't match the following document."
    no-key-edit
    no-geometry-edit
    keys="{{ task.input.humanLoopContext.importantFormKeys }}"
    block-types="['KEY_VALUE_SET']"
  >
    <short-instructions header="Instructions">
      <style>
        .instructions {
          white-space: pre-wrap;
        }
        .instructionsImage {
          display: inline-block;
          max-width: 100%;
        }
      </style>
      <p class='instructions'>Choose a key-value block to highlight the corresponding key-value pair in the document.

If it is a valid key-value pair, review the content for the value. If the content is incorrect, correct it.

The text of the value is incorrect, correct it.
<img class='instructionsImage' src="https://example-site/correct-value-text.png" />

A wrong value is identified, correct it.
<img class='instructionsImage' src="https://example-site/correct-value.png" />

If it is not a valid key-value relationship, choose No.
<img class='instructionsImage' src="https://example-site/not-a-key-value-pair.png" />

If you can’t find the key in the document, choose Key not found.
<img class='instructionsImage' src="https://example-site/key-is-not-found.png" />

If the content of a field is empty, choose Value is blank.
<img class='instructionsImage' src="https://example-site/value-is-blank.png" />

<b>Examples</b>
Key and value are often displayed next to or below to each other.

Key and value displayed in one line.
<img class='instructionsImage' src="https://example-site/sample-key-value-pair-1.png" />

Key and value displayed in two lines.
<img class='instructionsImage' src="https://example-site/sample-key-value-pair-2.png" />

If the content of the value has multiple lines, enter all the text without a line break. Include all value text even if it extends beyond the highlight box.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/multiple-lines.png" /></p>
    </short-instructions>

    <full-instructions header="Instructions"></full-instructions>
  </crowd-textract-analyze-document>
</crowd-form>

Amazon Rekognition 的自訂範本範例

所有自訂範本都以 <crowd-form> </crowd-form> 元素開始和結束。如同標準 HTML <form> 元素，所有表單程式碼都應該放置於這些元素間。對於 Amazon Rekognition 自訂任務範本，請使用 <crowd-rekognition-detect-moderation-labels> 元素。此元素支援下列屬性：

categories - 字串陣列或物件陣列，其中每個物件都有一個 name 欄位。
- 如果以物件形式傳入類別，則情況如下：
  - 顯示的類別是 name 欄位的值。
  - 傳回的答案包含所選任何類別的完整物件。
- 如果以字串形式傳入類別，則情況如下：
  - 傳回的答案是所選全部字串的陣列。
exclusion-category – 您可以設定這個屬性，在使用者介面中的類別下建立按鈕。當使用者選擇此按鈕，所有類別將取消選取並停用。如果工作者再次選擇按鈕，您可以重新讓使用者選擇類別。如果工作者在您選取按鈕後，選取提交按鈕來提交任務，該任務將會傳回空陣列。

對於 <crowd-rekognition-detect-moderation-labels> 元素的子系，您必須有兩個區域。

<full-instructions> – 工具中檢視完整說明連結提供的說明。這可以保留空白，但我們建議您提供完整的指示，以獲得更好的結果。
<short-instructions> – 在工具側邊欄中顯示的任務簡短描述。這可以保留空白，但我們建議您提供完整的指示，以獲得更好的結果。

使用這些元素的範本看起來與下列類似。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
{% capture s3_uri %}http://s3.amazonaws.com/{{ task.input.aiServiceRequest.image.s3Object.bucket }}/{{ task.input.aiServiceRequest.image.s3Object.name }}{% endcapture %}

<crowd-form>
  <crowd-rekognition-detect-moderation-labels
    categories='[
      {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
        {
          name: "{{ label.name }}",
          parentName: "{{ label.parentName }}",
        },
      {% endfor %}
    ]'
    src="{{ s3_uri | grant_read_access }}"
    header="Review the image and choose all applicable categories."
  >
    <short-instructions header="Instructions">
      <style>
        .instructions {
          white-space: pre-wrap;
        }
      </style>
      <p class='instructions'>Review the image and choose all applicable categories.
If no categories apply, choose None.

<b>Nudity</b>
Visuals depicting nude male or female person or persons

<b>Graphic Male Nudity</b>
Visuals depicting full frontal male nudity, often close ups

<b>Graphic Female Nudity</b>
Visuals depicting full frontal female nudity, often close ups

<b>Sexual Activity</b>
Visuals depicting various types of explicit sexual activities and pornography

<b>Illustrated Nudity or Sexual Activity</b>
Visuals depicting animated or drawn sexual activity, nudity, or pornography

<b>Adult Toys</b>
Visuals depicting adult toys, often in a marketing context

<b>Female Swimwear or Underwear</b>
Visuals depicting female person wearing only swimwear or underwear

<b>Male Swimwear Or Underwear</b>
Visuals depicting male person wearing only swimwear or underwear

<b>Partial Nudity</b>
Visuals depicting covered up nudity, for example using hands or pose

<b>Revealing Clothes</b>
Visuals depicting revealing clothes and poses, such as deep cut dresses

<b>Graphic Violence or Gore</b>
Visuals depicting prominent blood or bloody injuries

<b>Physical Violence</b>
Visuals depicting violent physical assault, such as kicking or punching

<b>Weapon Violence</b>
Visuals depicting violence using weapons like firearms or blades, such as shooting

<b>Weapons</b>
Visuals depicting weapons like firearms and blades

<b>Self Injury</b>
Visuals depicting self-inflicted cutting on the body, typically in distinctive patterns using sharp objects

<b>Emaciated Bodies</b>
Visuals depicting extremely malnourished human bodies

<b>Corpses</b>
Visuals depicting human dead bodies

<b>Hanging</b>
Visuals depicting death by hanging</p>
    </short-instructions>

    <full-instructions header="Instructions"></full-instructions>
  </crowd-rekognition-detect-moderation-labels>
</crowd-form>

透過 Liquid 新增自動化

自訂範本系統使用 Liquid 進行自動化。Liquid 是開放原始碼內嵌標記語言。如需詳細資訊及文件，請前往 Liquid 首頁。

在 Liquid 中，單邊大括號和百分比符號之間的文字是指示，或執行類似控制流程或迭代之作業的標記。雙邊大括號之間的文字是變數，或輸出變數值的物件。下列清單包含兩種類型的 Liquid 標記，您可能會發現這些標記對於自動化範本輸入資料處理很有用。如果您選取下列其中一種標記類型，系統會將您重新導向至 Liquid 文件。

控制流程：包括程式設計邏輯運算子例如 if/else、unless 和 case/when。
迭代：可讓您使用 for 循環之類的陳述式重複執行程式碼區塊。

例如，下列程式碼範例將示範如何使用 Liquid for 標記建立 for 循環。此範例會循環瀏覽 Amazon Rekognition moderationLabels 傳回的資料，並顯示 moderationLabels 屬性 name 及 parentName，供工作者審核：
```
 {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
    {
      name: &quot;{{ label.name }}&quot;,
      parentName: &quot;{{ label.parentName }}&quot;,
    },
 {% endfor %}
```

使用變數篩選條件

除了標準 Liquid 篩選條件和動作外，Amazon 增強版 AI (Amazon A2I) 也提供幾個額外的篩選條件。在變數名稱後面加上管線 (|) 字元，然後指定篩選條件名稱，即可套用篩選條件。若要串連篩選條件，請使用以下格式。


{{ <content> | <filter> | <filter> }}

自動逸出和明確逸出

根據預設，輸入都經過 HTML 逸出，以避免變數文字和 HTML 之間產生混淆。您可以明確新增 escape 篩選條件，讓讀取範本來源的人明白逸出正在進行。

escape_once

escape_once 可確保如果您已逸出程式碼，則不會再次逸出。例如，為了確保 & 不會變成 &amp;。

skip_autoescape

skip_autoescape 當您的內容預定用做 HTML 時會有很幫助。例如，邊界框的完整說明中可能有幾段文字和一些影像。

注意

請謹慎使用 skip_autoescape。範本中的最佳實務是避免使用 skip_autoescape 來傳遞功能性程式碼或標記，除非您非常確定您可以嚴格控制傳遞的內容。如果您傳遞使用者輸入，可能會讓工作者遭受跨網站指令碼攻擊。

to_json

to_json編碼您提供給 JavaScript 物件符號 (JSON) 的資料。如果你提供物件，它會將該物件序列化。

grant_read_access

grant_read_access 會接受 Amazon Simple Storage Service (Amazon S3) URI 並將其編碼為 HTTPS URL，含有該資源的短期存取憑證。這能夠將存放在 S3 儲存貯體中的照片、音訊或影片物件顯示給工作者，這些物件在其他情況下無法公開存取。

範例 to_json 和 grant_read_access 篩選條件的範例

輸入


auto-escape: {{ "Have you read 'James & the Giant Peach'?" }}
explicit escape: {{ "Have you read 'James & the Giant Peach'?" | escape }}
explicit escape_once: {{ "Have you read 'James &amp; the Giant Peach'?" | escape_once }}
skip_autoescape: {{ "Have you read 'James & the Giant Peach'?" | skip_autoescape }}
to_json: {{ jsObject | to_json }}                
grant_read_access: {{ "s3://examplebucket/myphoto.png" | grant_read_access }}

輸出


auto-escape: Have you read &#39;James &amp; the Giant Peach&#39;?
explicit escape: Have you read &#39;James &amp; the Giant Peach&#39;?
explicit escape_once: Have you read &#39;James &amp; the Giant Peach&#39;?
skip_autoescape: Have you read 'James & the Giant Peach'?
to_json: { "point_number": 8, "coords": [ 59, 76 ] }
grant_read_access: https://s3.amazonaws.com/examplebucket/myphoto.png?<access token and other params>

範例自動化分類範本的範例。

若要將這個簡單的文字分類範例自動化，請包括 Liquid 標記 {{ task.input.source }}。此範例使用 crowd-classifier 元素。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-classifier 
    name="tweetFeeling"
    categories="['positive', 'negative', 'neutral', 'cannot determine']"
    header="Which term best describes this tweet?" 
  >
    <classification-target>
       {{ task.input.source }}
    </classification-target>

    <full-instructions header="Analyzing a sentiment">
      Try to determine the feeling the author 
      of the tweet is trying to express. 
      If none seems to match, choose "other."
    </full-instructions>

    <short-instructions>
      Pick the term that best describes the sentiment 
      of the tweet. 
    </short-instructions>

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

預覽工作者任務範本

欲預覽自訂 Worker 任務範本，請使用該 SageMaker RenderUiTemplate作業。您可以搭配 AWS CLI 或偏好的 AWS SDK 使用此RenderUiTemplate作業。有關此 API 作業支援的特定語言 SDK 的文件，請參閱 RenderUiTemplate 的See Also 部分。

先決條件

若要預覽您的工作者任務範本、 AWS Identity and Access Management (IAM) 角色 Amazon 資源名稱 (ARN) 或RoleArn您使用的角色必須具有存取範本所使用之 S3 物件的權限。若要了解如何設定角色或使用者，請參閱啟用工作者任務範本預覽。

若要使用 `RenderUiTemplate` 作業預覽工作者任務範本：

為 RoleArn 角色提供附加的必要政策以預覽自訂範本。
在 Task 的 Input 參數中，提供 JSON 物件，其中包含範本中定義之變數的值。這些是替換 task.input.source 變數的變數。例如，如果您在範本中定義 task.input.text 變數，則可以在 JSON 物件中提供變數做為 text: sample text。
在 UiTemplate 的 Content 參數中，插入您的範本。

設定 RenderUiTemplate 完成後，請使用您偏好的軟體開發套件或 AWS CLI 提交請求來轉譯範本。如果您請求成功，回應會包含 RenderedContent，此為可轉譯工作者使用者介面之 HTML 的 Liquid 範本。

重要

若要預覽範本，您需要具有許可的 IAM 角色，以讀取在使用者介面上轉譯的 Amazon S3 物件。如需您可以連接至 IAM 角色以授與這些許可的範例政策，請參閱啟用工作者任務範本預覽。

您的瀏覽器已停用或無法使用 Javascript。

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

文件慣用形式

建立和刪除工作者任務範本

建立良好的工作者指示