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

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

Amazon A2I 사용자가 사용할 수 있는 모든 HTML 크라우드 요소 목록은 을 참조하십시오. 군중 HTML 요소 참조 템플릿의 예는 다음을 참조하십시오. AWS GitHub60개 이상의 샘플 사용자 지정 작업 템플릿이 들어 있는 리포지토리.

로컬에서 템플릿 개발

콘솔에서 템플릿이 수신되는 데이터를 처리하는 방식을 테스트할 때 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> 요소를 사용하세요. 다음과 같은 속성을 사용합니다.

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

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> 요소를 사용합니다. 이 요소는 다음 속성을 지원합니다.

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

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

<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 설명서로 리디렉션됩니다.

변수 필터 사용

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

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

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

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

escape_once

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

skip_autoescape

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

to_json

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

grant_read_access

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

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

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>

<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 RenderUiTemplate작업을 다음과 함께 사용할 수 있습니다. AWS CLI 또는 원하는 대로 AWS SDK. 이 API 작업에만 지원되는 언어에 SDKs 대한 설명서는 의 See Also섹션을 참조하십시오 RenderUiTemplate.

사전 조건 

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

구성을 완료한 후에는 원하는 것을 사용하거나 RenderUiTemplate SDK AWS CLI 템플릿 렌더링 요청을 제출하려면 요청이 성공하면 응답에는 HTML 작업자용 UI를 렌더링하는 Liquid 템플릿이 포함됩니다 RenderedContent.