Augmented AI 군중 HTML 요소

PDF

RSS

포커스 모드

Augmented AI 군중 HTML 요소 - Amazon SageMaker AI

다음 군중 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

작업자가 추가할 수 있는 새 키와 관련 텍스트 값을 지정합니다. 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 AnalyzeDocument API 설명서에서 확인할 수 있습니다.


{
  "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"
      }
    ]
  }
}

crowd-textract-analyze-document

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

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

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

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


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

no-key-edit

no-geometry-edit

요소 계층 구조

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

상위 요소 – crowd-form
하위 요소 – full-instructions, 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 AnalyzeDocument API 설명서에서 확인할 수 있습니다.


{
  "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 DetectModerationLabels API 설명서를 참조하세요.


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

crowd-rekognition-detect-moderation-labels

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

속성

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

header

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

src

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

exclusion-category

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

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

요소 계층 구조

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

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

AWS 리전

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 DetectModerationLabels API 설명서를 참조하세요.


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

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

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

문서 규칙

SageMaker AI 크라우드 HTML 요소

Augmented AI

쿠키 기본 설정 선택

Augmented AI 군중 HTML 요소

속성

header

src

initialValue

blockTypes

keys

no-key-edit

no-geometry-edit

요소 계층 구조

리전

full-instructions

short-instructions

군중 요소를 사용하는 작업자 템플릿의 예제

출력

crowd-textract-analyze-document

속성

header

src

initialValue

blockTypes

keys

no-key-edit

no-geometry-edit

요소 계층 구조

리전

full-instructions

short-instructions

군중 요소를 사용하는 작업자 템플릿의 예제

출력

속성

header

src

categories

exclusion-category

요소 계층 구조

AWS 리전

full-instructions

short-instructions

군중 요소가 있는 작업자 템플릿 예제

출력

crowd-rekognition-detect-moderation-labels

속성

header

src

categories

exclusion-category

요소 계층 구조

AWS 리전

full-instructions

short-instructions

군중 요소가 있는 작업자 템플릿 예제

출력

Related resources

페이지 내용이 도움이 되었습니까?

Related resources

다음 주제:

이전 주제:

도움이 필요하십니까?