Buat Template 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 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 Untuk contoh templat, lihat AWS GitHubrepositori, yang berisi lebih dari 60 contoh templat 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 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

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.

<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 header encoding 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

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

Contoh Template Kustom untuk Amazon Texttract

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:

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. <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 Otomasi dengan Cairan

Sistem template khusus menggunakan Liquid untuk otomatisasi. Liquid adalah bahasa markup inline sumber terbuka. Untuk informasi dan dokumentasi selengkapnya, lihat beranda 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.

Gunakan Filter Variabel

Selain filter dan tindakan Liquid 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 Escape Eksplisit

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_once

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

to_json

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

grant_read_access

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

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

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>

<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 kustom, gunakan SageMaker RenderUiTemplate operasi. Anda dapat menggunakan RenderUiTemplate operasi dengan AWS CLI atau AWS SDK pilihan Anda. Untuk dokumentasi tentang SDK khusus bahasa yang didukung untuk operasi API ini, lihat See Alsobagian RenderUiTemplate.

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 AndaAktifkan Pratinjau Template Tugas Pekerja .

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