Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Buat Template Tugas Pekerja Kustom
<a name="a2i-custom-templates"></a>

*Crowd HTML Elements* adalah komponen web yang menyediakan sejumlah widget tugas dan elemen desain yang dapat Anda sesuaikan dengan pertanyaan yang ingin Anda tanyakan. Anda dapat menggunakan elemen kerumunan ini untuk membuat templat pekerja khusus dan mengintegrasikannya dengan alur kerja peninjauan manusia Amazon Augmented AI (Amazon A2I) untuk menyesuaikan konsol pekerja dan instruksi. 

Untuk daftar semua elemen kerumunan HTML yang tersedia untuk pengguna Amazon A2I, lihat. [Crowd HTML Elemen Referensi](sms-ui-template-reference.md) Untuk contoh templat, lihat [AWS GitHubrepositori](https://github.com/aws-samples/amazon-a2i-sample-task-uis), yang berisi lebih dari 60 contoh templat tugas kustom.

## Kembangkan Template Secara Lokal
<a name="developing-templates-locally"></a>

Saat berada di konsol untuk menguji bagaimana template Anda memproses data yang masuk, Anda dapat menguji tampilan dan nuansa HTML template dan elemen kustom Anda di browser Anda dengan menambahkan kode berikut ke bagian atas file HTML Anda.

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

Ini memuat kode yang diperlukan untuk membuat elemen HTML kustom. Gunakan kode ini jika Anda ingin mengembangkan tampilan dan nuansa template Anda di editor pilihan Anda, bukan di konsol.

Kode ini tidak akan mengurai variabel Anda. Anda mungkin ingin menggantinya dengan konten sampel saat mengembangkan secara lokal.

## Gunakan Aset Eksternal
<a name="a2i-custom-template-using-external-assets"></a>

Templat kustom Amazon Augmented AI memungkinkan Anda menyematkan skrip eksternal dan style sheet. Misalnya, header berikut menyematkan nama `text/css` style sheet yang `stylesheet` terletak di `https://www.example.com/my-enhancement-styles.css` ke dalam template kustom.

**Example**  

```
<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">
```

Jika Anda menemukan kesalahan, pastikan bahwa server asal Anda mengirimkan jenis MIME yang benar dan encoding header dengan aset.

Misalnya, tipe MIME dan encoding untuk skrip jarak jauh adalah. `application/javascript;CHARSET=UTF-8`

MIME dan tipe encoding untuk stylesheet jarak jauh adalah. `text/css;CHARSET=UTF-8`

## Lacak Variabel Anda
<a name="a2i-custom-template-step2-UI-vars"></a>

Saat membuat templat kustom, Anda harus menambahkan variabel ke dalamnya untuk mewakili potongan data yang mungkin berubah dari tugas ke tugas, atau pekerja ke pekerja. Jika Anda memulai dengan salah satu contoh template, Anda perlu memastikan bahwa Anda mengetahui variabel yang sudah digunakannya. 

Misalnya, untuk templat khusus yang mengintegrasikan loop peninjauan manusia Augmented AI dengan tugas peninjauan teks Amazon Textract, digunakan untuk data input nilai `{{ task.input.selectedAiServiceResponse.blocks }}` awal. Untuk integrasi Amazon Augmented AI (Amazon A2I) dengan Amazon Rekognition, digunakan. `{{ task.input.selectedAiServiceResponse.moderationLabels }}` Untuk jenis tugas khusus, Anda perlu menentukan parameter input untuk jenis tugas Anda. Gunakan `{{ task.input.customInputValuesForStartHumanLoop}}` tempat yang Anda tentukan`customInputValuesForStartHumanLoop`. 

## Contoh Template Kustom untuk Amazon Texttract
<a name="a2i-custom-templates-textract-sample"></a>

Semua template kustom dimulai dan diakhiri dengan `<crowd-form> </crowd-form>` elemen. Seperti `<form>` elemen HTML standar, semua kode formulir Anda harus berada di antara elemen-elemen ini. 

Untuk tugas analisis dokumen Amazon Textract, gunakan elemen. `<crowd-textract-analyze-document>` Ini menggunakan atribut berikut: 
+ `src`- Menentukan URL dari file gambar yang akan dijelaskan.
+ `initialValue`— Menetapkan nilai awal untuk atribut yang ditemukan di UI pekerja.
+ `blockTypes`(wajib) - Menentukan jenis analisis yang dapat dilakukan pekerja. Hanya saat `KEY_VALUE_SET` ini didukung. 
+ `keys`(wajib) - Menentukan kunci baru dan nilai teks terkait yang pekerja dapat menambahkan.
+ `no-key-edit`(wajib) - Mencegah pekerja mengedit kunci anotasi yang dilewatkan`initialValue`.
+ `no-geometry-edit`— Mencegah pekerja mengedit poligon anotasi yang dilewatkan. `initialValue`

Untuk anak-anak `<crowd-textract-analyze-document>` elemen, Anda harus memiliki dua Wilayah. Anda dapat menggunakan elemen HTML dan CSS arbitrer di Wilayah ini. 
+ `<full-instructions>`— Instruksi yang tersedia dari tautan **Lihat instruksi lengkap** di alat. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.
+ `<short-instructions>`— Deskripsi singkat tentang tugas yang muncul di sidebar alat. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.

 Template Amazon Textract akan terlihat mirip dengan yang berikut ini.

**Example**  

```
<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>
```

## Contoh Template Kustom untuk Amazon Rekognition
<a name="a2i-custom-templates-rekognition-sample"></a>

Semua template kustom dimulai dan diakhiri dengan `<crowd-form> </crowd-form>` elemen. Seperti `<form>` elemen HTML standar, semua kode formulir Anda harus berada di antara elemen-elemen ini. Untuk template tugas kustom Amazon Rekognition, gunakan elemen. `<crowd-rekognition-detect-moderation-labels>` Elemen ini mendukung atribut berikut: 
+ `categories`— Array string *atau* array objek di mana setiap objek memiliki `name` bidang.
  + Jika kategori masuk sebagai objek, berikut ini berlaku:
    + Kategori yang ditampilkan adalah nilai `name` bidang. 
    + Jawaban yang dikembalikan berisi objek *lengkap* dari setiap kategori yang dipilih.
  + Jika kategori masuk sebagai string, berikut ini berlaku:
    + Jawaban yang dikembalikan adalah array dari semua string yang dipilih.
+ `exclusion-category`— Dengan mengatur atribut ini, Anda membuat tombol di bawah kategori di UI. Ketika pengguna memilih tombol, semua kategori tidak dipilih dan dinonaktifkan. Jika pekerja memilih tombol lagi, Anda mengaktifkan kembali pengguna untuk memilih kategori. Jika pekerja mengirimkan tugas dengan memilih **Kirim** setelah Anda memilih tombol, tugas itu mengembalikan array kosong.

Untuk anak-anak `<crowd-rekognition-detect-moderation-labels>` elemen, Anda harus memiliki dua Wilayah.
+ `<full-instructions>`— Instruksi yang tersedia dari tautan **Lihat instruksi lengkap** di alat. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.
+ `<short-instructions>`— Deskripsi singkat tentang tugas yang muncul di sidebar alat. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.

Template yang menggunakan elemen-elemen ini akan terlihat mirip dengan berikut ini.

```
<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>
```

## Tambahkan otomatisasi dengan Liquid
<a name="a2i-custom-templates-step2-automate"></a>

Sistem template khusus menggunakan [Liquid](https://shopify.github.io/liquid/) untuk otomatisasi. *Liquid* adalah bahasa markup inline sumber terbuka. Untuk informasi dan dokumentasi selengkapnya, lihat [beranda Liquid](https://shopify.github.io/liquid/).

Dalam Liquid, teks antara kurung kurawal tunggal dan simbol persen adalah instruksi atau *tag* yang melakukan operasi seperti aliran kontrol atau iterasi. Teks antara kurung kurawal ganda adalah variabel atau *objek* yang mengeluarkan nilainya. Daftar berikut mencakup dua jenis tag cair yang mungkin berguna bagi Anda untuk mengotomatiskan pemrosesan data input template. Jika Anda memilih salah satu jenis tag berikut, Anda akan diarahkan ke dokumentasi Liquid.
+ [Aliran kontrol](https://shopify.github.io/liquid/tags/control-flow/): Termasuk operator logika pemrograman seperti `if/else``unless`,, dan`case/when`.
+ [Iterasi](https://shopify.github.io/liquid/tags/iteration/): Memungkinkan Anda menjalankan blok kode berulang kali menggunakan pernyataan seperti untuk loop.

  Misalnya, contoh kode berikut menunjukkan bagaimana Anda dapat menggunakan `for` tag Liquid untuk membuat `for` loop. Contoh ini mengulang melalui yang [https://docs.aws.amazon.com/rekognition/latest/dg/API_ModerationLabel.html](https://docs.aws.amazon.com/rekognition/latest/dg/API_ModerationLabel.html)dikembalikan dari Amazon Rekognition dan menampilkan `name` atribut `parentName` dan untuk `moderationLabels` ditinjau oleh pekerja:

  ```
   {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
      {
        name: &quot;{{ label.name }}&quot;,
        parentName: &quot;{{ label.parentName }}&quot;,
      },
   {% endfor %}
  ```

### Gunakan filter variabel
<a name="a2i-custom-templates-step2-automate-filters"></a>

Selain [filter dan tindakan Liquid](https://shopify.github.io/liquid/filters/abs/) standar, Amazon Augmented AI (Amazon A2I) menawarkan filter tambahan. Anda menerapkan filter dengan menempatkan karakter pipe (`|`) setelah nama variabel, dan kemudian menentukan nama filter. Untuk filter rantai, gunakan format berikut.

**Example**  

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

#### Autoescape dan Escape Eksplisit
<a name="a2i-custom-templates-step2-automate-filters-autoescape"></a>

Secara default, input di-escaped HTML untuk mencegah kebingungan antara teks variabel dan HTML Anda. Anda dapat secara eksplisit menambahkan `escape` filter untuk membuatnya lebih jelas bagi seseorang yang membaca sumber template Anda bahwa melarikan diri sedang dilakukan.

#### escape\$1once
<a name="a2i-custom-templates-step2-automate-escapeonce"></a>

`escape_once`memastikan bahwa jika Anda sudah lolos dari kode Anda, itu tidak akan lolos kembali. Misalnya, memastikan itu `&amp;` tidak menjadi`&amp;amp;`.

#### skip\$1autoescape
<a name="a2i-custom-templates-step2-automate-skipautoescape"></a>

`skip_autoescape`berguna ketika konten Anda dimaksudkan untuk digunakan sebagai HTML. Misalnya, Anda mungkin memiliki beberapa paragraf teks dan beberapa gambar dalam instruksi lengkap untuk kotak pembatas.

**catatan**  
Gunakan dengan `skip_autoescape` hemat. Sebagai praktik terbaik untuk template, hindari meneruskan kode fungsional atau markup `skip_autoescape` kecuali Anda benar-benar yakin bahwa Anda memiliki kontrol ketat atas apa yang sedang diteruskan. Jika Anda meneruskan masukan pengguna, Anda bisa membuka pekerja Anda hingga serangan skrip lintas situs.

#### to\$1json
<a name="a2i-custom-templates-step2-automate-tojson"></a>

`to_json`mengkodekan data yang Anda berikan ke JavaScript Object Notation (JSON). Jika Anda memberikan objek, itu membuat serial itu.

#### grant\$1read\$1access
<a name="a2i-custom-templates-step2-automate-grantreadaccess"></a>

`grant_read_access`mengambil URI Amazon Simple Storage Service (Amazon S3) dan mengkodekannya ke URL HTTPS dengan token akses berumur pendek untuk sumber daya tersebut. Ini memungkinkan untuk menampilkan objek foto, audio, atau video yang disimpan dalam ember S3 yang tidak dapat diakses publik oleh pekerja.

#### s3\$1presign
<a name="a2i-custom-templates-step2-automate-s3"></a>

 `s3_presign`Filter bekerja dengan cara yang sama seperti `grant_read_access` filter. `s3_presign`mengambil URI Amazon S3 dan mengkodekannya ke URL HTTPS dengan token akses berumur pendek untuk sumber daya tersebut. Ini memungkinkan untuk menampilkan objek foto, audio, atau video yang disimpan dalam ember S3 yang tidak dapat diakses publik oleh pekerja.

**Example Contoh filter variabel**  
Input  

```
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://amzn-s3-demo-bucket/myphoto.png" | grant_read_access }}
s3_presign: {{ "s3://amzn-s3-demo-bucket/myphoto.png" | s3_presign }}
```

**Example**  
Output  

```
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/amzn-s3-demo-bucket/myphoto.png?<access token and other params>
s3_presign: https://s3.amazonaws.com/amzn-s3-demo-bucket/myphoto.png?<access token and other params>
```

**Example Contoh template klasifikasi otomatis.**  
Untuk mengotomatiskan contoh klasifikasi teks sederhana ini, sertakan tag `{{ task.input.source }}` Liquid. Contoh ini menggunakan [crowd-classifier](sms-ui-template-crowd-classifier.md) elemen.  

```
<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>
```

## Pratinjau Template Tugas Pekerja
<a name="a2i-preview-your-custom-template"></a>

Untuk melihat pratinjau templat tugas pekerja khusus, gunakan `RenderUiTemplate` operasi SageMaker AI. Anda dapat menggunakan `RenderUiTemplate` operasi dengan AWS CLI atau AWS SDK pilihan Anda. Untuk dokumentasi tentang bahasa yang didukung khusus SDKs untuk operasi API ini, lihat [https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html#API_RenderUiTemplate_SeeAlso](https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html#API_RenderUiTemplate_SeeAlso)bagian [https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html](https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html). 

**Prasyarat**

Untuk melihat pratinjau template tugas pekerja Anda, peran AWS Identity and Access Management (IAM) Amazon Resource Name (ARN), `RoleArn` atau, yang Anda gunakan harus memiliki izin untuk mengakses objek S3 yang digunakan oleh template. Untuk mempelajari cara mengonfigurasi peran atau tampilan pengguna Anda[Aktifkan Pratinjau Template Tugas Pekerja](a2i-permissions-security.md#permissions-for-worker-task-templates-augmented-ai).

**Untuk melihat pratinjau template tugas pekerja Anda menggunakan `RenderUiTemplate` operasi:**

1. Berikan peran dengan kebijakan wajib yang dilampirkan untuk melihat pratinjau templat kustom Anda. **`RoleArn`** 

1. Dalam **`Input`**parameter **`Task`**, berikan objek JSON yang berisi nilai untuk variabel yang didefinisikan dalam template. Ini adalah variabel yang diganti dengan `task.input.source` variabel. Misalnya, jika Anda mendefinisikan variabel task.input.text dalam template Anda, Anda dapat menyediakan variabel dalam objek JSON sebagai:. `text` `sample text`

1. Dalam **`Content`**parameter **`UiTemplate`**, masukkan template Anda.

Setelah Anda mengkonfigurasi`RenderUiTemplate`, gunakan SDK pilihan Anda atau AWS CLI untuk mengirimkan permintaan untuk merender template Anda. Jika permintaan Anda berhasil, respons akan menyertakan [https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html#API_RenderUiTemplate_ResponseSyntax](https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html#API_RenderUiTemplate_ResponseSyntax), template Liquid yang merender HTML untuk UI pekerja.

**penting**  
Untuk melihat pratinjau template Anda, Anda memerlukan peran IAM dengan izin untuk membaca objek Amazon S3 yang dirender di antarmuka pengguna Anda. Untuk contoh kebijakan yang dapat dilampirkan ke peran IAM untuk memberikan izin ini, lihat. [Aktifkan Pratinjau Template Tugas Pekerja](a2i-permissions-security.md#permissions-for-worker-task-templates-augmented-ai)