Buat Templat Tugas Pekerja Kustom

Elemen HTMLadalah 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 peninjauan manusia Amazon Augmented AI (Amazon A2I) untuk menyesuaikan konsol dan instruksi pekerja.

Untuk daftar semua elemen kerumunan HTML yang tersedia untuk pengguna Amazon A2I, lihatCrowd HTML Elemen Referensi. Untuk contoh template, lihatAWSRepositori GitHub, yang berisi lebih dari 60 contoh tugas kustom template.

Mengembangkan Template Secara Lokal

Ketika di konsol untuk menguji bagaimana template Anda memproses data yang masuk, Anda dapat menguji tampilan dan nuansa HTML template Anda 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 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 sambil mengembangkan secara lokal.

Menggunakan Aset Eksternal

Templat kustom Amazon Augmented AI memungkinkan Anda untuk menyematkan skrip eksternal dan style sheet. Misalnya, header berikut menyematkantext/cssnama style sheetstylesheetterletak dihttps://www.example.com/my-enhancement-styles.csske dalam template kustom.

<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 server asal Anda mengirimkan jenis MIME yang benar dan header pengkodean dengan aset.

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

Jenis MIME dan encoding untuk stylesheet jarak jauh adalahtext/css;CHARSET=UTF-8.

Melacak Variabel Anda

Ketika membuat template kustom, Anda harus menambahkan variabel untuk itu untuk mewakili potongan-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 menyadari variabel yang sudah digunakan.

Misalnya, untuk template kustom yang mengintegrasikan loop tinjauan manusia Augmented AI dengan tugas peninjauan teks Amazon Texact,{{ task.input.selectedAiServiceResponse.blocks }}digunakan untuk inisial-nilai input data. 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}}di mana Anda menentukancustomInputValuesForStartHumanLoop.

Contoh kustom untuk Amazon Textract

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

Untuk tugas analisis dokumen Amazon Textract, gunakan<crowd-textract-analyze-document>elemen. Menggunakan atribut berikut:

• src— Menentukan URL dari file gambar yang akan dijelaskan.

• initialValue— Menetapkan nilai awal untuk atribut yang ditemukan di UI pekerja.

• blockTypes(diperlukan) - Menentukan jenis analisis yang dapat dilakukan pekerja. HANYAKEY_VALUE_SETsaat ini didukung.

• keys(diperlukan) - Menentukan kunci baru dan nilai teks terkait bahwa pekerja dapat menambahkan.

• no-key-edit(diperlukan) - Mencegah para pekerja mengedit kunci anotasi yang dilewatiinitialValue.

• no-geometry-edit— Mencegah pekerja mengedit poligon anotasi yang dilewatiinitialValue.

Untuk anak-anak dari<crowd-textract-analyze-document>elemen, Anda harus memiliki dua Daerah. Anda dapat menggunakan elemen HTML dan CSS yang sewenang-wenang di Wilayah ini.

• <full-instructions>— Instruksi yang tersedia dariPetunjuk lengkaplink di alat. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.

• <short-instructions>— Penjelasan singkat tentang tugas yang muncul di bilah sisi alat. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.

Template Amazon Textract akan terlihat serupa dengan yang berikut ini.

<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 kustom untuk Amazon Rekognition

Semua template kustom dimulai dan diakhiri dengan<crowd-form> </crowd-form>elemen. Seperti HTML standar<form>elemen, semua kode formulir Anda harus pergi antara elemen-elemen ini. Untuk template tugas kustom Amazon Rekognition, gunakan<crowd-rekognition-detect-moderation-labels>elemen. Elemen ini mendukung atribut berikut:

• categories— Array dari stringataususunan objek di mana setiap objek memilikinameBidang.

  • Jika kategori masuk sebagai objek, hal berikut berlaku:

    • Kategori yang ditampilkan adalah nilainameBidang.

    • Jawaban yang dikembalikan berisipenuhobjek dari setiap kategori yang dipilih.

  • Jika kategori masuk sebagai string, hal berikut berlaku:

    • Jawaban yang dikembalikan adalah array dari semua string yang dipilih.

• exclusion-category— Dengan menetapkan 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 menyerahkan tugas dengan memilihKirimsetelah Anda memilih tombol, tugas itu mengembalikan array kosong.

Untuk anak-anak dari<crowd-rekognition-detect-moderation-labels>elemen, Anda harus memiliki dua Daerah.

• <full-instructions>— Instruksi yang tersedia dariPetunjuk lengkaplink 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 ini. Anda dapat membiarkan ini kosong, tetapi kami menyarankan Anda memberikan instruksi lengkap untuk mendapatkan hasil yang lebih baik.

Template menggunakan elemen ini akan terlihat serupa dengan yang 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 Cairan

Sistem template kustom menggunakanCairanuntuk otomatisasi. Cairanadalah bahasa markup inline sumber terbuka. Untuk informasi lebih lanjut dan dokumentasi, lihatHomepage cair.

Dalam Liquid, teks antara kurung kurawal tunggal dan simbol persen adalah instruksi ataumenandaiyang melakukan operasi seperti aliran kontrol atau iterasi. Teks antara kurung kurawal ganda adalah variabel atauobjekyang output nilainya. Daftar berikut mencakup dua jenis tag cair yang mungkin berguna untuk mengotomatisasi pemrosesan data input template. Jika Anda memilih salah satu jenis tag berikut, Anda akan diarahkan ke dokumentasi Liquid.

• Alur kontrol: Termasuk operator logika pemrograman sepertiif/else,unless, dancase/when.

• Iterasi: Memungkinkan Anda untuk menjalankan blok kode berulang kali menggunakan pernyataan seperti untuk loop.

  Misalnya, contoh kode berikut menunjukkan bagaimana Anda dapat menggunakan Liquidfortag untuk membuatforLoop. Contoh ini loop melaluimoderationLabelsdikembalikan dari Amazon Rekognition dan menampilkanmoderationLabelsatributnamedanparentNamebagi pekerja untuk meninjau:

   {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
      {
        name: "{{ label.name }}",
        parentName: "{{ label.parentName }}",
      },
   {% endfor %}

Gunakan Filter Variabel

Selain standarFilter cairdan tindakan, Amazon Augmented AI (Amazon A2I) menawarkan filter tambahan. Anda menerapkan filter dengan menempatkan pipa (|) karakter setelah nama variabel, dan kemudian menentukan nama filter. Untuk filter rantai, gunakan format berikut.

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

Autoescape dan Eksplisit Luput

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

escape_once

escape_oncememastikan bahwa jika Anda sudah lolos dari kode Anda, itu tidak mendapatkan kembali melarikan diri lagi. Sebagai contoh, memastikan bahwa&tidak menjadi&.

skip_autoescape

skip_autoescapeberguna 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

Gunakanskip_autoescapehemat. Sebagai praktik terbaik untuk template, hindari melewati kode fungsional atau markup denganskip_autoescapekecuali Anda benar-benar yakin bahwa Anda memiliki kontrol ketat atas apa yang sedang berlalu. Jika Anda melewati masukan pengguna, Anda bisa membuka pekerja Anda hingga serangan skrip lintas situs.

to_json

to_jsonmengkodekan data yang Anda berikan ke JavaScript Object Notation (JSON). Jika Anda memberikan objek, itu serializes itu.

grant_read_access

grant_read_accessURI Amazon Simple Storage Service (Amazon S3) dan mengkodekan ke URL HTTPS dengan token akses jangka pendek untuk sumber daya itu. Hal ini memungkinkan untuk menampilkan foto, audio, atau objek video yang disimpan dalam ember S3 yang tidak dapat diakses publik oleh pekerja.

contoh Contoh filter to_json dan grant_read_access

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 & 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 }}

Output

auto-escape: Have you read 'James & the Giant Peach'?
explicit escape: Have you read 'James & the Giant Peach'?
explicit escape_once: Have you read 'James & the Giant Peach'?
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>

contoh Contoh template klasifikasi otomatis.

Untuk mengotomatisasi sampel klasifikasi teks sederhana ini, sertakan tag Liquid{{ task.input.source }}. Contoh ini menggunakanklasifikasi kerumunanelemen.

<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

Untuk melihat pratinjau template tugas pekerja khusus, gunakan SageMakerRenderUiTemplateoperasi. Anda dapat menggunakanRenderUiTemplateoperasi denganAWS CLIatau pilihan AndaAWSSDK. Untuk dokumentasi SDK khusus bahasa yang didukung untuk operasi API ini, lihatSee AlsobagianRenderUiTemplate.

Prasyarat

Untuk melihat pratinjau template tugas pekerja Anda,AWS Identity and Access Management(IAM) role Amazon Resource Name (ARN), atauRoleArn, yang Anda gunakan harus memiliki izin untuk mengakses ke objek S3 yang digunakan oleh template. Untuk mempelajari cara mengonfigurasi peran atau penggunaAktifkan Pratinjau Template Tugas Pekerja .

Untuk melihat pratinjau template tugas pekerja Anda menggunakanRenderUiTemplateOperasi:

1. BerikanRoleArndari peran dengan kebijakan yang diperlukan yang dilampirkan untuk melihat pratinjau template kustom Anda.

2. DiInputparameterTask, menyediakan objek JSON yang berisi nilai-nilai untuk variabel didefinisikan dalam template. Ini adalah variabel yang diganti untuktask.input.sourcevariabel. Misalnya, jika Anda mendefinisikan variabel task.input.text dalam template Anda, Anda dapat menyediakan variabel dalam objek JSON sebagaitext:sample text.

3. DiContentparameterUiTemplate, masukkan template Anda.

Setelah Anda mengonfigurasiRenderUiTemplate, gunakan SDK pilihan Anda atauAWS CLIuntuk mengirimkan permintaan untuk membuat template Anda. Jika permintaan Anda berhasil, tanggapannya termasukRenderedContent, template Liquid yang membuat HTML untuk UI pekerja.

penting

Untuk melihat pratinjau template, Anda memerlukan peran IAM dengan izin untuk membaca objek Amazon S3 yang diberikan pada antarmuka pengguna Anda. Untuk contoh kebijakan yang dapat Anda lampirkan ke peran IAM Anda untuk memberikan izin ini, lihatAktifkan Pratinjau Template Tugas Pekerja .