Elementos HTML do Augmented AI Crowd

Os Elementos HTML do Crowd a seguir estão disponíveis apenas para tarefas de fluxo de trabalho humano da Amazon Augmented AI.

Um widget para ativar a revisão humana de um resultado de análise de documentos do Amazon Textract.

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

Esse é o texto que é exibido como o cabeçalho.

src

Esse é um link para a imagem a ser analisada pelo operador.

initialValue

Isso define valores iniciais para atributos encontrados na interface do usuário do operador.

Veja a seguir um exemplo de uma entrada de 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

Isso determina o tipo de análise que os operadores podem fazer. No momento, somente KEY_VALUE_SET é compatível.

keys

Isso especifica novas chaves e o valor de texto associado que o operador pode adicionar. Os valores de entrada para keys podem incluir os seguintes elementos:

importantFormKey aceita strings, e é usado para especificar uma única chave.
importantFormKeyAliases pode ser usado para especificar aliases que são alternativas aceitáveis para as chaves fornecidas. Use esse elemento para identificar ortografias alternativas ou apresentações das chaves. Esse parâmetro aceita uma lista de uma ou mais strings.

Veja a seguir um exemplo de uma entrada para keys.


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

no-key-edit

Isso impede que os operadores editem as chaves de anotações transmitidas por initialValue. Isso impede que os operadores editem as chaves que foram detectadas nos documentos. Isso é obrigatório.

no-geometry-edit

Isso impede que os operadores editem os polígonos de anotações transmitidas pelo initialValue. Por exemplo, isso impediria que o operador editasse a caixa delimitadora em torno de determinada chave. Isso é obrigatório.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Elementos pai - formulário de público
Elementos filho: full-instructions, short-instructions

Regiões

As seguintes regiões têm suporte por esse elemento. É possível usar código HTML e CSS personalizado nessas regiões para formatar as instruções para os operadores. Por exemplo, use a seção short-instructions para fornecer exemplos bons e ruins de como concluir uma tarefa.

full-instructions

Instruções gerais sobre como trabalhar com o widget.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Exemplo de um modelo do operador usando o elemento de público

Um exemplo de um modelo do operador usando esse elemento de público seria semelhante ao seguinte.


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

Saída

Veja a seguir uma amostra da saída desse elemento. Você pode encontrar uma explicação detalhada desse resultado na documentação da AnalyzeDocumentAPI Amazon Textract.


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

Um widget para ativar a revisão humana de um resultado de moderação de imagem do Amazon Rekognition.

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

Esse é o texto que é exibido como o cabeçalho.

src

Esse é um link para a imagem a ser analisada pelo operador.

exclusion-category

Ao definir este atributo, você cria um botão abaixo das categorias na interface do usuário.

Quando um usuário seleciona o botão, todas as categorias são desmarcadas e desativadas.
Selecionar o botão novamente ativa as categorias para que os usuários possam escolhê-las.
Se você enviar depois de selecionar o botão, ele retornará uma matriz vazia.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Elementos pai - formulário de público
Elementos filho: full-instructions, short-instructions

AWS Regiões

As seguintes AWS regiões são suportadas por esse elemento. É possível usar código HTML e CSS personalizado nessas regiões para formatar as instruções aos operadores. Por exemplo, use a seção short-instructions para fornecer exemplos bons e ruins de como concluir uma tarefa.

full-instructions

Instruções gerais sobre como trabalhar com o widget.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Exemplo de modelo do operador com o elemento de público

Um exemplo de um modelo do operador usando o elemento de público seria semelhante ao seguinte.


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

Saída

Veja a seguir uma amostra da saída desse elemento. Para obter detalhes sobre essa saída, consulte a documentação da API Amazon Rekognition DetectModerationLabels.


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

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

SageMaker Elementos HTML do Crowd

Augmented AI