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

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

**catatan**  
Amazon SageMaker A2I tidak lagi terbuka untuk pelanggan baru. Pelanggan yang sudah ada dapat terus menggunakan layanan seperti biasa. AWS terus berinvestasi dalam peningkatan keamanan dan ketersediaan untuk A2I, tetapi kami tidak berencana untuk memperkenalkan fitur baru.

*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 template pekerja khusus dan mengintegrasikannya dengan alur kerja tinjauan manusia Amazon Augmented AI (Amazon A2I) untuk menyesuaikan konsol dan instruksi pekerja. 

Untuk daftar semua elemen kerumunan HTML yang tersedia untuk pengguna Amazon A2I, lihat[Crowd HTML Elemen Referensi](sms-ui-template-reference.md). Untuk contoh template, lihat [AWS GitHub repositori](https://github.com/aws-samples/amazon-a2i-sample-task-uis), yang berisi lebih dari 60 contoh template 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 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 merender 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>

Template kustom Amazon Augmented AI memungkinkan Anda menyematkan skrip eksternal dan lembar gaya. Misalnya, header berikut menyematkan nama style `text/css` sheet yang `stylesheet` terletak di `https://www.example.com/my-enhancement-styles.css` 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 mengalami kesalahan, pastikan bahwa server asal Anda mengirimkan jenis MIME yang benar dan header pengkodean dengan aset.

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

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

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

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

Misalnya, untuk template khusus yang mengintegrasikan loop peninjauan manusia Augmented AI dengan tugas tinjauan teks Amazon Textract, `{{ task.input.selectedAiServiceResponse.blocks }}` digunakan untuk data input nilai awal. Untuk integrasi Amazon Augmented AI (Amazon A2I) dengan Amazon Rekognition, `{{ task.input.selectedAiServiceResponse.moderationLabels }}` digunakan. 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 Textract
<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 `<crowd-textract-analyze-document>` elemen tersebut. Ini menggunakan atribut berikut: 
+ `src`— Menentukan URL file gambar yang akan dianotasi.
+ `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 dapat ditambahkan oleh pekerja.
+ `no-key-edit`(wajib) — Mencegah pekerja mengedit kunci anotasi yang dilewati`initialValue`.
+ `no-geometry-edit`— Mencegah pekerja mengedit poligon anotasi yang dilewati. `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 sarankan 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 sarankan 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 tersebut`<crowd-rekognition-detect-moderation-labels>`. Elemen ini mendukung atribut berikut: 
+ `categories`— Sebuah 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 K ** irim ** setelah Anda memilih tombol, tugas tersebut 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 sarankan 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 sarankan 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 Liqu [ id ](https://shopify.github.io/liquid/) untuk otomatisasi. *Li * quid adalah bahasa markup inline open-source. Untuk informasi dan dokumentasi lebih lanjut, lihat beranda [ Liquid](https://shopify.github.io/liquid/).

Di Liquid, teks antara kurung kurung tunggal dan simbol persen adalah instruksi atau * tag * yang melakukan operasi seperti aliran kontrol atau iterasi. Teks antara kurung kurung keriting ganda adalah variabel atau * objek * yang mengeluarkan nilainya. Daftar berikut mencakup dua jenis tag cair yang mungkin berguna untuk mengotomatiskan pemrosesan data input template. Jika Anda memilih salah satu dari jenis tag berikut, Anda akan diarahkan ke dokumentasi Liquid.
+ [Alur 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 for loop.

  Misalnya, contoh kode berikut menunjukkan bagaimana Anda dapat menggunakan `for` tag Liquid untuk membuat `for` loop. Contoh ini mengulang [`moderationLabels`](https://docs.aws.amazon.com/rekognition/latest/dg/API_ModerationLabel.html) kembali dari Amazon Rekognition dan menampilkan `moderationLabels` atribut `name` dan `parentName` untuk 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 Li ](https://shopify.github.io/liquid/filters/abs/) quid 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 Pelarian Eksplisit
<a name="a2i-custom-templates-step2-automate-filters-autoescape"></a>

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

#### melarikan diri sekali
<a name="a2i-custom-templates-step2-automate-escapeonce"></a>

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

#### skip\_autoescape
<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 `skip_autoescape` dengan 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 dilewatkan. Jika Anda meneruskan input pengguna, Anda bisa membuka pekerja Anda untuk serangan skrip lintas situs.

#### ke\_json
<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.

#### berikan\_aksesi\_baca
<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. Hal ini memungkinkan untuk menampilkan objek foto, audio, atau video yang disimpan dalam bucket S3 yang tidak dapat diakses publik oleh pekerja.

#### s3\_presign
<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. Hal ini memungkinkan untuk menampilkan objek foto, audio, atau video yang disimpan dalam bucket 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 Liquid`{{ task.input.{{source}} }}`. 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 Templat Tugas Pekerja
<a name="a2i-preview-your-custom-template"></a>

Untuk melihat pratinjau template tugas pekerja kustom, gunakan `RenderUiTemplate` operasi SageMaker AI. Anda dapat menggunakan `RenderUiTemplate` operasi dengan AWS CLI AWS SDK pilihan Anda. Untuk dokumentasi tentang SDK khusus bahasa yang didukung untuk operasi API ini, lihat [`See Also`](https://docs.aws.amazon.com/sagemaker/latest/APIReference/API_RenderUiTemplate.html#API_RenderUiTemplate_SeeAlso) bagian dari [`RenderUiTemplate`](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) Nama Sumber Daya Amazon (ARN)`RoleArn`, atau, yang Anda gunakan harus memiliki izin untuk mengakses objek S3 yang digunakan oleh template. Untuk mempelajari cara mengonfigurasi peran atau pengguna, lihat[Aktifkan Pratinjau Templat 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 ** `RoleArn` ** peran dengan kebijakan yang diperlukan yang dilampirkan untuk melihat pratinjau template kustom Anda. 

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

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

Setelah Anda mengonfigurasi`RenderUiTemplate`, gunakan SDK pilihan Anda atau AWS CLI untuk mengirimkan permintaan untuk merender template Anda. Jika permintaan Anda berhasil, respons termasuk [`RenderedContent`](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 Anda lampirkan ke peran IAM untuk memberikan izin ini, lihat[Aktifkan Pratinjau Templat Tugas Pekerja](a2i-permissions-security.md#permissions-for-worker-task-templates-augmented-ai).