사용자 지정 작업자 태스크 템플릿 생성

군중 HTML 요소는 사용자가 원하는 질문에 맞게 조정할 수 있는 다양한 작업 위젯과 디자인 요소를 제공하는 웹 구성 요소입니다. 사용자는 이러한 군중 요소를 사용하여 사용자 지정 작업자 템플릿을 생성하고 이 템플릿을 Amazon Augmented AI(Amazon A2I) 인적 검토 워크플로에 통합하여 작업자 콘솔 및 지침을 사용자 지정할 수 있습니다.

Amazon A2 사용자가 사용할 수 있는 모든 HTML 군중 요소의 목록은 군중 HTML 요소 참조 단원을 참조하세요. 템플릿의 예는 60개 이상의 샘플 사용자 정의 작업 템플릿이 들어 있는 AWS GitHub저장소를 참조하십시오.

로컬에서 템플릿 개발

콘솔에서 템플릿이 수신 데이터를 처리하는 방법을 테스트하려면 다음 코드를 HTML 파일의 맨 위에 추가해 사용자는 브라우저에서 템플릿의 HTML 및 사용자 지정 요소의 모양과 느낌을 테스트할 수 있습니다.

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

이렇게 하면 필수 코드가 로드되어 사용자 지정 HTML 요소가 렌더링됩니다. 콘솔 대신 원하는 편집기에서 템플릿의 모양 및 느낌을 개발하려면 이 코드를 사용하세요.

이 코드는 변수를 구문 분석하지 않습니다. 로컬에서 개발하는 동안 이러한 변수를 샘플 콘텐츠로 바꿀 수 있습니다.

외부 자산 사용

Amazon Augmented AI 사용자 지정 템플릿을 사용하면 외부 스크립트 및 스타일 시트를 임베딩할 수 있습니다. 예를 들어, 다음 헤더는 https://www.example.com/my-enhancement-styles.css에 있는 text/css 스타일시트 이름 stylesheet를 사용자 지정 템플릿에 포함합니다.

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

오류가 발생하면 원본 서버가 자산과 함께 올바른 MIME 유형 및 인코딩 헤더를 보내고 있는지 확인하세요.

예를 들어 원격 스크립트의 MIME 및 인코딩 유형은 application/javascript;CHARSET=UTF-8입니다.

원격 스타일 시트의 MIME 및 인코딩 유형은 text/css;CHARSET=UTF-8입니다.

변수 추적

사용자 지정 템플릿 작성 시 먼저 작업마다 또는 작업자마다 변경될 수 있는 데이터를 나타내기 위한 변수를 추가해야 합니다. 샘플 템플릿 중 하나로 시작하려는 경우 해당 템플릿에서 이미 사용하고 있는 변수에 대해 알고 있어야 합니다.

예를 들어, Augmented AI 인적 검토 루프와 Amazon Textract 텍스트 검토 작업을 통합하는 사용자 지정 템플릿의 경우 초기 값 입력 데이터에는 {{ task.input.selectedAiServiceResponse.blocks }}가 사용됩니다. Amazon Augmented AI(Amazon A2I)의 경우 Amazon Rekognition과의 통합, {{ task.input.selectedAiServiceResponse.moderationLabels }}가 사용됩니다. 사용자 지정 태스크 유형의 경우 태스크 유형에 대한 입력 파라미터를 결정해야 합니다. {{ task.input.customInputValuesForStartHumanLoop}} 사용 시 customInputValuesForStartHumanLoop를 지정합니다.

Amazon Textract에 사용되는 사용자 지정 템플릿 예제

모든 사용자 지정 템플릿은 <crowd-form> </crowd-form> 요소로 시작하고 끝납니다. 표준 HTML <form> 요소처럼 모든 양식 코드는 이러한 요소 사이에 있어야 합니다.

Amazon Textract의 문서 분석 작업에는 <crowd-textract-analyze-document> 요소를 사용하세요. 다음과 같은 속성을 사용합니다.

• src - 주석을 달 이미지 파일의 URL을 지정합니다.

• initialValue - 작업자 UI에서 확인된 속성의 초기 값을 설정합니다.

• blockTypes (필수 사항) - 작업자가 수행할 수 있는 분석의 종류를 결정합니다. 현재 KEY_VALUE_SET만 지원됩니다.

• keys (필수 사항) - 작업자가 추가할 수 있는 새 키와 관련 텍스트 값을 지정합니다.

• no-key-edit (필수 사항) - 작업자가 initialValue을 통해 전달된 주석 키를 편집할 수 없게 합니다.

• no-geometry-edit - 작업자가 initialValue을 통해 전달된 주석 다각형을 편집할 수 없게 합니다.

<crowd-textract-analyze-document> 요소의 하위 요소에는 먼저 두 개의 리전이 있어야 합니다. 사용자는 이러한 리전에서 임의의 HTML 및 CSS 요소를 사용할 수 있습니다.

• <full-instructions> - 도구의 View full instructions(전체 지침 보기) 링크에서 확인할 수 있는 지침입니다. 사용자는 이 값을 비워 둘 수 있지만 더 나은 결과를 얻으려면 전체 지침을 제공하는 것이 좋습니다.

• <short-instructions> - 도구의 사이드바에 나타나는 작업에 대한 간략한 설명입니다. 사용자는 이 값을 비워 둘 수 있지만 더 나은 결과를 얻으려면 전체 지침을 제공하는 것이 좋습니다.

Amazon Textract 템플릿의 형식은 다음과 유사합니다.

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

Amazon Rekognition에 사용되는 사용자 지정 템플릿 예제

모든 사용자 지정 템플릿은 <crowd-form> </crowd-form> 요소로 시작하고 끝납니다. 표준 HTML <form> 요소처럼 모든 양식 코드는 이러한 요소 사이에 있어야 합니다. Amazon Rekognition 사용자 지정 작업 템플릿의 경우 <crowd-rekognition-detect-moderation-labels> 요소를 사용합니다. 이 요소는 다음 속성을 지원합니다.

• categories - 문자열 배열 또는 각 객체에 name 필드가 있는 객체 배열입니다.

  • 범주가 객체로 들어오는 경우 다음이 적용됩니다.

    • 표시된 범주는 name 필드의 값입니다.

    • 반환된 답변에는 선택한 범주의 전체 객체가 포함됩니다.

  • 범주가 문자열로 들어오는 경우 다음이 적용됩니다.

    • 반환된 대답은 선택된 모든 문자열의 배열입니다.

• exclusion-category - 이 속성을 설정하여 UI의 범주 아래에 버튼을 생성합니다. 사용자가 이 버튼을 선택하면 모든 범주가 선택 취소되고 비활성화됩니다. 작업자가 버튼을 다시 선택하면 사용자가 범주를 선택할 수 있도록 다시 활성화합니다. 작업자가 버튼을 선택한 후 제출을 선택하여 작업을 제출하면 해당 작업은 빈 배열을 반환합니다.

<crowd-rekognition-detect-moderation-labels> 요소의 하위 요소에는 먼저 두 개의 리전이 있어야 합니다.

• <full-instructions> - 도구의 View full instructions(전체 지침 보기) 링크에서 확인할 수 있는 지침입니다. 사용자는 이 값을 비워 둘 수 있지만 더 나은 결과를 얻으려면 전체 지침을 제공하는 것이 좋습니다.

• <short-instructions> - 도구의 사이드바에 나타나는 작업에 대한 간략한 설명입니다. 사용자는 이 값을 비워 둘 수 있지만 더 나은 결과를 얻으려면 전체 지침을 제공하는 것이 좋습니다.

이러한 요소를 사용하는 템플릿의 형식은 다음과 유사합니다.

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

Liquid를 사용하여 자동화 추가

사용자 지정 템플릿 시스템은 자동화를 위해 Liquid를 사용합니다. Liquid는 오픈 소스 인라인 마크업 언어입니다. 자세한 내용 및 설명서는 Liquid 홈페이지를 참조하세요.

Liquid에서 단일 중괄호와 퍼센트 기호 사이에 있는 텍스트는 제어 흐름 또는 반복과 같은 작업을 수행하는 지침 또는 태그입니다. 이중 중괄호 사이에 있는 텍스트는 변수 또는 변수의 값을 출력하는 객체입니다. 다음 목록에는 템플릿 입력 데이터 처리를 자동화하는 데 유용할 수 있는 두 가지 유형의 Liquid 태그가 포함되어 있습니다. 다음 태그 유형 중 하나를 선택하면 Liquid 설명서로 리디렉션됩니다.

• 제어 흐름: if/else, unless 및 case/when과 같은 프로그래밍 로직 연산자를 포함합니다.

• 반복: 루프와 같은 명령문을 사용하여 코드 블록을 반복적으로 실행할 수 있습니다.

  예를 들어, 다음 코드 예제는 Liquid for 태그를 사용하여 사용자는 for 루프를 만드는 방법을 보여줍니다. 이 예제는 Amazon Rekognition에서 반환된 moderationLabels을 반복하여 작업자가 검토할 moderationLabels 속성 name과 parentName을 표시합니다.

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

변수 필터 사용

Amazon Augmented AI(Amazon A2I)는 표준 Liquid 필터 및 작업 이외에 몇 가지 추가 필터를 제공합니다. 필터는 변수 이름 뒤에 파이프(|) 문자를 삽입한 후 필터 이름을 지정하여 적용됩니다. 필터를 체인화하려면 다음 형식을 사용하세요.

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

자동 이스케이프 및 명시적 이스케이프

기본적으로 입력은 변수 텍스트와 HTML 간에 혼동을 피하기 위해 이스케이프된 HTML입니다. 사용자는 이스케이프가 완료된 템플릿의 소스를 보다 분명하게 읽을 수 있도록 escape 필터를 명시적으로 추가할 수 있습니다.

escape_once

escape_once는 코드를 이미 이스케이프한 경우 이후에 해당 코드가 다시 이스케이프되지 않도록 합니다. 예를 들어, &를 &가 되지 않도록 합니다.

skip_autoescape

skip_autoescape는 콘텐츠가 HTML로 사용되는 경우 유용합니다. 예를 들어, 경계 상자에 대한 전체 지침에 텍스트 단락 몇 개와 이미지 몇 개가 있을 수 있습니다.

참고

드물게 skip_autoescape가 사용되기도 합니다. 템플릿 사용 시 전달 항목에 대해 엄격한 제어 권한이 없는 한 skip_autoescape로 함수 코드나 마크업을 전달하지 않는 것이 좋습니다. 사용자 입력을 전달하는 경우 작업자를 교차 사이트 스크립팅 공격에 노출시킬 수 있습니다.

to_json

to_json JavaScript 객체 표기법 (JSON) 에 제공하는 데이터를 인코딩합니다. 객체를 제공하면 직렬화됩니다.

grant_read_access

grant_read_access는 Amazon Simple Storage Service(Amazon S3) URI를 가져와 해당 리소스에 대해 수명이 짧은 액세스 토큰을 사용하여 HTTPS URL로 인코딩합니다. 이를 통해 작업자가 공개적으로 액세스할 수 없는 S3 버킷에 저장된 사진, 오디오 또는 비디오 객체를 표시할 수 있습니다.

예 to_json 및 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 }}

출력

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>

예 자동화된 분류 템플릿의 예제

이 간단한 텍스트 분류 샘플을 자동화하려면 Liquid 태그 {{ task.input.source }}를 포함합니다. 이 예제에서는 crowd-classifier 요소를 사용합니다.

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

작업자 태스크 템플릿 미리 보기

사용자 정의 작업자 작업 템플릿을 미리 보려면 작업을 사용하십시오. SageMaker RenderUiTemplate AWS CLI 또는 원하는 AWS SDK와 함께 RenderUiTemplate 작업을 사용할 수 있습니다. 이 API 작업에 지원되는 언어별 SDK에 대한 설명서는 See Also의 RenderUiTemplate 섹션을 참조하세요.

사전 조건

작업자 작업 템플릿을 미리 보려면 사용하는 AWS Identity and Access Management (IAM) 역할 Amazon 리소스 이름 (ARN) RoleArn 또는 에 템플릿에서 사용하는 S3 객체에 대한 액세스 권한이 있어야 합니다. 역할 또는 사용자를 구성하는 방법에 대한 자세한 내용은 작업자 작업 템플릿 미리 보기 사용 단원을 참조하세요.

RenderUiTemplate 작업을 사용하여 작업자 태스크 템플릿을 미리 보려면

1. 사용자 지정 템플릿을 미리 볼 수 있도록 연결된 필수 정책을 역할의 RoleArn에 제공합니다.

2. Task의 Input 파라미터에는 템플릿에 정의된 변수 값이 포함된 JSON 객체를 제공하세요. 이러한 객체는 task.input.source 변수를 대체하는 변수입니다. 예를 들어, 템플릿에 task.input.text 변수를 정의한 경우 사용자는 JSON 객체의 변수를 text: sample text로 제공할 수 있습니다.

3. UiTemplate의 Content 파라미터에 템플릿을 삽입합니다.

RenderUiTemplate을 구성한 후 선호하는 SDK 또는 AWS CLI 를 사용하여 템플릿 렌더링 요청을 제출합니다. 요청이 성공하면 응답에 작업자 UI에 대한 HTML을 렌더링하는 Liquid 템플릿인 RenderedContent가 포함됩니다.

중요

템플릿을 미리 보려면 사용자 인터페이스에서 렌더링되는 Amazon S3 객체에 대한 읽기 권한이 있는 IAM 역할이 필요합니다. 이러한 권한을 부여하기 위해 IAM 역할에 연결할 수 있는 샘플 정책은 작업자 작업 템플릿 미리 보기 사용 단원을 참조하세요.