Desarrollar plantillas localmente Uso de recursos externos Seguimiento de las variables Ejemplo de plantilla personalizada para Amazon Textract Ejemplo de plantilla personalizada para Amazon Rekognition Adición de automatización con Liquid Vista previa de una plantilla de tarea de trabajador

Crear plantillas de tareas de trabajador personalizadas

Crowd HTML Elements son componentes web que proporcionan una serie de widgets de tareas y elementos de diseño que puede adaptar a la pregunta que desea hacer. Puede utilizar estos elementos crowd para crear una plantilla de trabajador personalizada e integrarla con un flujo de trabajo de revisión humana de Amazon Augmented AI (Amazon A2I), a fin de personalizar la consola y las instrucciones del trabajador.

Para obtener una lista de todos los elementos HTML crowd disponibles para los usuarios de Amazon A2I, consulte Referencia de Crowd HTML Elements. Para ver ejemplos de plantillas, consulta el AWS GitHubrepositorio, que contiene más de 60 ejemplos de plantillas de tareas personalizadas.

Desarrollar plantillas localmente

Cuando se encuentre en la consola para probar cómo procesa la plantilla los datos entrantes, puede probar el aspecto y el funcionamiento del HTML de la plantilla y de los elementos personalizados en el navegador; para ello, añada el siguiente código en la parte superior del archivo HTML.


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

Esto carga el código necesario para representar los elementos de HTML personalizados. Use este código si quiere desarrollar el aspecto de la plantilla en su editor preferido en lugar de hacerlo en la consola.

Este código no analizará sus variables. Es posible que quiera sustituirlas con contenido de ejemplo, mientras realiza las tareas de desarrollo localmente.

Uso de recursos externos

Las plantillas personalizadas de Amazon Augmented AI le permiten integrar scripts externos y hojas de estilo. Por ejemplo, el encabezado siguiente incrusta un nombre text/css de hoja de estilo stylesheet ubicado en https://www.example.com/my-enhancement-styles.css en la plantilla personalizada.


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

Si se produce cualquier error, asegúrese de que su servidor de origen envía el tipo MIME correcto y los encabezados de codificación con los activos.

Por ejemplo, el tipo MIME y de codificación para scripts remotos es application/javascript;CHARSET=UTF-8.

El tipo de MIME y codificación para hojas de estilo remotas es text/css;CHARSET=UTF-8.

Seguimiento de las variables

Al crear una plantilla personalizada, debe agregarle variables para representar los datos que pueden cambiar de tarea a tarea, o de trabajador a trabajador. Si es la primera vez que utiliza una de las plantillas de ejemplo, tendrá que asegurarse de conocer las variables que ya utiliza.

Por ejemplo, en una plantilla personalizada que integra un bucle de revisión humana de Augmented AI con una tarea de revisión de texto de Amazon Textract, se utiliza {{ task.input.selectedAiServiceResponse.blocks }} para los datos de entrada de valor inicial. Para la integración de Amazon Augmented AI (Amazon A2I) con Amazon Rekognition, se utiliza {{ task.input.selectedAiServiceResponse.moderationLabels }}. Para un tipo de tarea personalizado, tiene que determinar el parámetro de entrada para el tipo de tarea. Use {{ task.input.customInputValuesForStartHumanLoop}} donde se especifica customInputValuesForStartHumanLoop.

Ejemplo de plantilla personalizada para Amazon Textract

Para una tarea de análisis de documentos de Amazon Textract, utilice el elemento <crowd-textract-analyze-document>. Utiliza los siguientes atributos:

src: especifica la URL del archivo de imagen que se va a anotar.
initialValue: establece los valores iniciales para los atributos encontrados en la interfaz de usuario del trabajador.
blockTypes (obligatorio): determina el tipo de análisis que pueden realizar los trabajadores. Solo se admite KEY_VALUE_SET actualmente.
keys (obligatorio): especifica nuevas claves y el valor de texto asociado que el trabajador puede agregar.
no-key-edit (obligatorio): impide que los trabajadores editen las claves de las anotaciones transferidas mediante initialValue.
no-geometry-edit: impide que los trabajadores editen los polígonos de las anotaciones transferidas mediante initialValue.

Como elementos secundarios del elemento <crowd-textract-analyze-document>, debe tener dos regiones. Puede utilizar elementos HTML y CSS arbitrarios en estas regiones.

<full-instructions>: instrucciones que están disponibles en el enlace Ver instrucciones completas, en la herramienta. Puede dejarlo en blanco, pero le recomendamos que proporcione instrucciones completas para obtener mejores resultados.
<short-instructions>: descripción breve de la tarea que aparece en la barra lateral de la herramienta. Puede dejarlo en blanco, pero le recomendamos que proporcione instrucciones completas para obtener mejores resultados.

Una plantilla de Amazon Textract tendría un aspecto similar al siguiente.


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

Ejemplo de plantilla personalizada para Amazon Rekognition

Todas las plantillas personalizadas comienzan y terminan con los elementos <crowd-form> </crowd-form>. Al igual que los elementos <form> HTML estándar, todo el código de formulario debería ir entre estos elementos. Para una plantilla de tareas personalizada de Amazon Rekognition, utilice el elemento <crowd-rekognition-detect-moderation-labels>. Este elemento admite los siguientes atributos:

categories: una matriz de cadenas o una matriz de objetos, donde cada objeto tiene un campo name.
- Si las categorías aparecen como objetos, se aplica lo siguiente:
  - Las categorías mostradas son el valor del campo name.
  - La respuesta devuelta contiene los objetos completos de las categorías seleccionadas.
- Si las categorías vienen en forma de cadenas, se aplica lo siguiente:
  - La respuesta devuelta es una matriz de todas las cadenas seleccionadas.
exclusion-category: al establecer este atributo, crea un botón debajo de las categorías en la interfaz de usuario. Cuando un usuario selecciona el botón, se anula la selección de todas las categorías y se desactivan. Si el trabajador selecciona de nuevo el botón, se habilita de nuevo a los usuarios para que elijan categorías. Si el trabajador envía la tarea seleccionando el botón Enviar después de seleccionar el botón, esa tarea devolverá una matriz vacía.

Como elementos secundarios del elemento <crowd-rekognition-detect-moderation-labels>, debe tener dos regiones.

<full-instructions>: instrucciones que están disponibles en el enlace Ver instrucciones completas, en la herramienta. Puede dejarlo en blanco, pero le recomendamos que proporcione instrucciones completas para obtener mejores resultados.
<short-instructions>: descripción breve de la tarea que aparece en la barra lateral de la herramienta. Puede dejarlo en blanco, pero le recomendamos que proporcione instrucciones completas para obtener mejores resultados.

Una plantilla que utilice estos elementos tendría un aspecto similar al siguiente.


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

Adición de automatización con Liquid

El sistema de plantillas personalizado utiliza Liquid para la automatización. Liquid es un lenguaje de marcado en línea de código abierto. Para obtener más información y documentación, visite la página de inicio de Liquid.

En Liquid, el texto entre llaves y símbolos de porcentaje es una instrucción o etiqueta que lleva a cabo una operación, como un flujo de control o una iteración. El texto que está entre llaves dobles es una variable u objeto que genera su valor. La siguiente lista incluye dos tipos de etiquetas de Liquid que podrían ser útiles para automatizar el procesamiento de los datos de entrada de las plantillas. Si selecciona uno de los siguientes tipos de etiquetas, se le redirigirá a la documentación de Liquid.

Flujo de control: incluye operadores lógicos de programación, como if/else, unless y case/when.
Iteración: permite ejecutar bloques de código repetidamente con instrucciones como los bucles for.

Por ejemplo, en el siguiente código se ve cómo se puede utilizar la etiqueta for de Liquid para crear un bucle for. Este ejemplo recorre en bucle moderationLabels, devuelto por Amazon Rekognition, y muestra los atributos name y parentName de moderationLabels para que los trabajadores los revisen:
```
 {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
    {
      name: &quot;{{ label.name }}&quot;,
      parentName: &quot;{{ label.parentName }}&quot;,
    },
 {% endfor %}
```

Uso de filtros de variables

Además de las acciones y los filtros de Liquid estándar, Amazon Augmented AI (Amazon A2I) ofrece filtros adicionales. Los filtros se aplican colocando una barra vertical (|) después del nombre de la variable y luego especificando un nombre de filtro. Para encadenar filtros, utilice el siguiente formato.


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

Autoescape y escape explícito

De forma predeterminada, las entradas tendrán un escape de HTML para evitar que haya confusión entre el texto de la variable y HTML. Puede añadir de forma explícita el filtro escape para que sea más evidente para la persona que esté leyendo la fuente de la plantilla en la que se está realizando un escape.

escape_once

escape_once garantiza que si ya ha escapado el código, no se vuelva a realizar un escape de nuevo. Por ejemplo, permite garantizar que & no se convierta en &amp;.

skip_autoescape

skip_autoescape es útil cuando se prevé utilizar el contenido como HTML. Por ejemplo, puede que tenga unos cuantos párrafos de texto y algunas imágenes en las instrucciones completas de un cuadro delimitador.

nota

Utilice skip_autoescape con moderación. Como práctica recomendada en el caso de las plantillas, evite transferir código funcional o de marcado con skip_autoescape, a menos que esté absolutamente seguro de que tiene un control estricto sobre lo que se transfiere. Si está transfiriendo entradas de usuario, podría estar dejando a sus trabajadores desprotegidos ante un ataque de scripts de sitios.

to_json

to_jsoncodifica los datos que proporciona a JavaScript Object Notation (JSON). Si introduce un objeto, lo serializa.

grant_read_access

grant_read_access toma un URI de Amazon Simple Storage Service (Amazon S3) y lo codifica en una URL de HTTPS con un token de acceso de duración limitada para dicho recurso. Esto permite mostrar a los trabajadores objetos de foto, audio o vídeo almacenados en buckets de S3 a los que, de lo contrario, no se podría obtener acceso públicamente.

ejemplo Ejemplo de los filtros to_json y grant_read_access

Entrada


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 &amp; 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 }}

Salida


auto-escape: Have you read &#39;James &amp; the Giant Peach&#39;?
explicit escape: Have you read &#39;James &amp; the Giant Peach&#39;?
explicit escape_once: Have you read &#39;James &amp; the Giant Peach&#39;?
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>

ejemplo Ejemplo de una plantilla de clasificación automatizada.

Para automatizar este ejemplo de clasificación de texto simple, incluya la etiqueta Liquid {{ task.input.source }}. En este ejemplo se utiliza el elemento 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>

Vista previa de una plantilla de tarea de trabajador

Para obtener una vista previa de una plantilla de tareas de trabajo personalizada, utilice la SageMaker RenderUiTemplate operación. Puede utilizar la RenderUiTemplate operación con el AWS SDK AWS CLI o con el que prefiera. Para obtener documentación sobre los SDK específicos del idioma compatible para esta operación de API, consulte la sección See Also de RenderUiTemplate.

Requisitos previos

Para obtener una vista previa de la plantilla de tareas de trabajo, el rol AWS Identity and Access Management (IAM) Amazon Resource Name (ARN) RoleArn o el que utilice debe tener permiso para acceder a los objetos de S3 que utiliza la plantilla. Para obtener más información sobre cómo configurar el rol o el usuario, consulte Habilitar vistas previas de plantillas de tareas del trabajador .

Para obtener una vista previa de la plantilla de tarea de trabajador mediante la operación `RenderUiTemplate`:

Proporcione un RoleArn del rol con políticas necesarias asociadas para obtener una vista previa de la plantilla personalizada.
En el parámetro Input de Task, proporcione un objeto JSON que contenga valores para las variables definidas en la plantilla. Estas son las variables que se sustituyen por la variable task.input.source. Por ejemplo, si define una variable task.input.text en la plantilla, puede proporcionar la variable en el objeto JSON como text: sample text.
En el parámetro Content de UiTemplate, inserte su plantilla.

Cuando haya configurado RenderUiTemplate, use AWS CLI o el SDK que prefiera a fin de enviar una solicitud para renderizar la plantilla. Si la solicitud se ha realizado correctamente, la respuesta incluirá RenderedContent, una plantilla de Liquid que representa el HTML de la interfaz de usuario del trabajador.

importante

Para previsualizar la plantilla, necesita un rol de IAM con permisos para leer los objetos de Amazon S3 que se renderizan en su interfaz de usuario. Si desea obtener una política de ejemplo que pueda asociar a su rol de IAM para conceder estos permisos, consulte Habilitar vistas previas de plantillas de tareas del trabajador .

Aviso JavaScript está desactivado o no está disponible en su navegador.

Para utilizar la documentación de AWS, debe estar habilitado JavaScript. Para obtener más información, consulte las páginas de ayuda de su navegador.

Convenciones del documento

Crear y eliminar plantillas de tareas de trabajador

Creación de instrucciones correctas de trabajador