Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
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
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. donde se especifica customInputValuesForStartHumanLoop}}customInputValuesForStartHumanLoop
Ejemplo de plantilla personalizada para Amazon Textract
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 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 admiteKEY_VALUE_SETactualmente.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 medianteinitialValue. -
no-geometry-edit: impide que los trabajadores editen los polígonos de las anotaciones transferidas medianteinitialValue.
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 camponame.-
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
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,unlessycase/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
forde Liquid para crear un buclefor. Este ejemplo recorre en buclemoderationLabels, devuelto por Amazon Rekognition, y muestra los atributosnameyparentNamedemoderationLabelspara que los trabajadores los revisen:{% for label in task.input.selectedAiServiceResponse.moderationLabels %} { name: "{{ label.name }}", parentName: "{{ label.parentName }}", }, {% endfor %}
Uso de filtros de variables
Además de las acciones y los filtros de Liquid|) 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.
s3_presign
El filtro s3_presign funciona de la misma forma que el filtro grant_read_access. s3_presign toma un URI de 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 de variables
Input
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 }}
s3_presign: {{ "s3://amzn-s3-demo-bucket/myphoto.png" | s3_presign }}Output
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>s3_presign: https://s3.amazonaws.com/amzn-s3-demo-bucket/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.. En este ejemplo se utiliza el elemento crowd-classifier.source }}
<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 RenderUiTemplate operación SageMaker AI. Puedes usar la RenderUiTemplate operación con el AWS SDK AWS CLI o el que prefieras. Para obtener documentación sobre el lenguaje compatible específico SDKs para esta operación de API, consulta la See Alsosección 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
RoleArndel rol con políticas necesarias asociadas para obtener una vista previa de la plantilla personalizada. -
En el parámetro
InputdeTask, proporcione un objeto JSON que contenga valores para las variables definidas en la plantilla. Estas son las variables que se sustituyen por la variabletask.input.. Por ejemplo, si define una variable task.input.text en la plantilla, puede proporcionar la variable en el objeto JSON comosourcetext:sample text. -
En el parámetro
ContentdeUiTemplate, 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 .
