Augmented AI 군중 HTML 요소

다음 군중 HTML 요소는 Amazon Augmented AI 인적 워크플로 작업에서만 사용할 수 있습니다.

Amazon Textract 문서 분석 결과의 인적 검토를 지원하는 위젯입니다.

속성

이 요소는 다음 속성을 지원합니다.

header

헤더로 표시되는 텍스트입니다.

src

작업자가 분석하게 될 이미지에 대한 링크입니다.

initialValue

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

다음은 initialValue 입력의 예제입니다.


[
            {
                "blockType": "KEY_VALUE_SET",
                "confidence": 38.43309020996094,
                "geometry": {
                    "boundingBox": {
                        "width": 0.32613086700439453,
                        "weight": 0.0942094624042511,
                        "left": 0.4833833575248718,
                        "top": 0.5227988958358765
                    },
                    "polygon": [
                        {"x": 0.123, "y": 0.345}, ...
                    ]
                }
                "id": "8c97b240-0969-4678-834a-646c95da9cf4",
                "relationships": [
                    {
                        "type": "CHILD",
                        "ids": [
                            "7ee7b7da-ee1b-428d-a567-55a3e3affa56",
                            "4d6da730-ba43-467c-a9a5-c6137ba0c472"
                        ]
                    },
                    {
                        "type": "VALUE",
                        "ids": [
                            "6ee7b7da-ee1b-428d-a567-55a3e3affa54"
                        ]
                    }
                ],
                "entityTypes": [
                    "KEY"
                ],
                "text": "Foo bar"
            },
]

blockTypes

이는 작업자가 수행할 수 있는 분석의 종류를 결정합니다. 현재 KEY_VALUE_SET만 지원됩니다.

키

작업자가 추가할 수 있는 새 키와 관련 텍스트 값을 지정합니다. keys의 입력 값에는 다음 요소가 포함될 수 있습니다.

importantFormKey는 문자열을 허용하며 단일 키를 지정하는 데 사용됩니다.
importantFormKeyAliases는 제공된 키를 적절하게 대체할 별칭을 지정하는 데 사용할 수 있습니다. 이 요소를 사용하여 키의 대체 철자 또는 표현을 식별할 수 있습니다. 이 파라미터는 하나 이상의 문자열 목록을 허용합니다.

다음은 keys에 대한 입력 예제입니다.


[
      {
        importantFormKey: 'Address',
        importantFormKeyAliases: [
          'address',
          'Addr.',
          'Add.',
        ]
      },
      {
        importantFormKey: 'Last name',
        importantFormKeyAliases: ['Surname']
      }
]

no-key-edit

이렇게 하면 작업자가 initialValue를 통해 전달된 주석 다각형을 편집할 수 없습니다. 이는 작업자가 문서에서 감지된 키를 편집하지 못하도록 합니다. 이 항목은 필수입니다.

no-geometry-edit

이렇게 하면 작업자가 initialValue를 통해 전달된 주석 다각형을 편집할 수 없습니다. 예를 들어 작업자가 해당 키 주위의 경계 상자를 편집하지 못하도록 할 수 있습니다. 이 항목은 필수입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

상위 요소 – crowd-form
하위 요소 – full-instructions, short-instructions

리전

이 요소는 다음 영역을 지원합니다. 이러한 리전 내에서 사용자 지정 HTML 및 CSS 코드를 사용하여 작업자에 대한 지침의 서식을 지정할 수 있습니다. 예를 들어 short-instructions 섹션을 사용하여 작업을 완료하는 방법에 대한 좋은 예와 나쁜 예를 제공합니다.

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.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'>Click on 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://assets.crowd.aws/images/a2i-console/correct-value-text.png" />

A wrong value is identified, correct it.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/correct-value.png" />

If it is not a valid key-value relationship, choose No.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/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://assets.crowd.aws/images/a2i-console/key-is-not-found.png" />

If the content of a field is empty, choose Value is blank.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/value-is-blank.png" />

<b>Examples</b>
Key and value are often displayed next or below to each other.

Key and value displayed in one line.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/sample-key-value-pair-1.png" />

Key and value displayed in two lines.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/sample-key-value-pair-2.png" />

If the content of the value has multiple lines, enter all the text without 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 Textract AnalyzeDocumentAPI 설명서에서 찾을 수 있습니다.


{
  "AWS/Textract/AnalyzeDocument/Forms/V1": {
    blocks: [
      {
        "blockType": "KEY_VALUE_SET",
        "id": "8c97b240-0969-4678-834a-646c95da9cf4",
        "relationships": [
          {
            "type": "CHILD",
            "ids": ["7ee7b7da-ee1b-428d-a567-55a3e3affa56", "4d6da730-ba43-467c-a9a5-c6137ba0c472"]
          },
          {
            "type": "VALUE",
            "ids": ["6ee7b7da-ee1b-428d-a567-55a3e3affa54"]
          }
        ],
        "entityTypes": ["KEY"],
        "text": "Foo bar baz"
      }
    ]
  }
}

Amazon Rekognition 이미지 중재 결과의 인적 검토를 지원하는 위젯입니다.

속성

이 요소는 다음 속성을 지원합니다.

header

헤더로 표시되는 텍스트입니다.

src

작업자가 분석하게 될 이미지에 대한 링크입니다.

exclusion-category

이 속성을 설정하여 UI의 범주 아래에 버튼을 생성합니다.

사용자가 이 버튼을 선택하면 모든 범주가 선택 취소되고 비활성화됩니다.
버튼을 다시 선택하면 사용자가 선택할 수 있도록 범주가 다시 활성화됩니다.
버튼을 선택한 후 제출하면 빈 배열이 반환됩니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

상위 요소 – crowd-form
하위 요소 – full-instructions, short-instructions

AWS 지역

이 요소가 지원하는 AWS 지역은 다음과 같습니다. 이러한 리전 내에서 사용자 지정 HTML 및 CSS 코드를 사용하여 작업자에 대한 지침의 서식을 지정할 수 있습니다. 예를 들어 short-instructions 섹션을 사용하여 작업을 완료하는 방법에 대한 좋은 예와 나쁜 예를 제공합니다.

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>

출력

다음은 이 요소의 샘플 출력입니다. 이 출력에 대한 자세한 내용은 Amazon Rekognition 레이블 API DetectModeration설명서를 참조하십시오.


{
  "AWS/Rekognition/DetectModerationLabels/Image/V3": {
    "ModerationLabels": [
        { name: 'Gore', parentName: 'Violence' },
        { name: 'Corpses', parentName: 'Violence' },
    ]
  }
}

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

SageMaker 크라우드 HTML 엘리먼츠

Augmented AI