Buat Templat Tugas Pekerja Kustom

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, lihatCrowd HTML Elemen Referensi. Untuk contoh template, lihat AWS GitHub repositori, yang berisi lebih dari 60 contoh template tugas kustom.

Kembangkan Template Secara Lokal

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

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.

<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 adalahapplication/javascript;CHARSET=UTF-8.

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

Lacak Variabel Anda

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 tentukancustomInputValuesForStartHumanLoop.

Contoh Template Kustom untuk Amazon Textract

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:

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

Template Amazon Textract akan terlihat mirip 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 Template Kustom untuk Amazon Rekognition

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:

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

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

Sistem template khusus menggunakan Liqu id untuk otomatisasi. Li quid adalah bahasa markup inline open-source. Untuk informasi dan dokumentasi lebih lanjut, lihat beranda 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.

Gunakan filter variabel

Selain filter dan tindakan Li 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.

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

Autoescape dan Pelarian Eksplisit

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

escape_oncememastikan bahwa jika Anda sudah lolos dari kode Anda, kode itu tidak akan lolos lagi. Misalnya, memastikan itu & 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.

ke_json

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

berikan_aksesi_baca

grant_read_accessmengambil 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

s3_presignFilter bekerja dengan cara yang sama seperti grant_read_access filter. s3_presignmengambil 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.

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

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

<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

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 bagian dari RenderUiTemplate.

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, lihatAktifkan Pratinjau Templat Tugas Pekerja.

Setelah Anda mengonfigurasiRenderUiTemplate, gunakan SDK pilihan Anda atau AWS CLI untuk mengirimkan permintaan untuk merender template Anda. Jika permintaan Anda berhasil, respons termasuk RenderedContent, template Liquid yang merender HTML untuk UI pekerja.