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. # SageMaker Elementos HTML de AI Crowd A continuación, se muestra una lista de los Crowd HTML Elements que facilitan la creación de una plantilla personalizada y proporcionan una interfaz de usuario familiar para los trabajadores. Estos elementos son compatibles con Ground Truth, Augmented AI y Mechanical Turk. # crowd-alert Mensaje que alerta al trabajador sobre una situación actual. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/YzNPdGd). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Describe your task briefly here and give examples

Give additional instructions and good/bad examples here

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### dismissible Conmutador booleano que, si está presente, permite que el trabajador cierre el mensaje. ### type Cadena que especifica el tipo de mensaje que se va a mostrar. Los posibles valores son "info" (valor predeterminado), "success", "error" y "warning". ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-badge Icono que flota por la esquina superior derecha de otro elemento al que está asociado. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/WNRbPwZ). A continuación se muestra un ejemplo de una plantilla que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### for Cadena que especifica el ID del elemento al que está asociado la tarjeta de identificación. ### icono Cadena que especifica el icono que se va a mostrar en la tarjeta de identificación. La cadena tiene que ser el nombre de un icono del conjunto de *[iron-icons](https://github.com/PolymerElements/iron-icons)* de código abierto que está cargado previamente o la dirección URL de un icono personalizado. Este atributo anula el atributo *label*. A continuación se muestra un ejemplo de la sintaxis que puede utilizar para agregar un iron-icon a un elemento HTML ``. Reemplace `icon-name` con el nombre del icono que le gustaría utilizar de este [conjunto de iconos](https://www.webcomponents.org/element/@polymer/iron-icons/demo/demo/index.html). ``` ``` ### etiqueta El texto que se muestra en la tarjeta de identificación. Se recomienda usar tres o menos caracteres porque un texto demasiado grande desbordaría el área de la tarjeta de identificación. Se puede mostrar un icono en lugar de texto estableciendo el atributo *icon*. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-button Botón con estilo aplicado que representa alguna acción. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/RwKNvgG). A continuación se muestra un ejemplo de una plantilla que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### disabled Conmutador booleano que, si está presente, muestra el botón como deshabilitado y evita que se hagan clics. ### form-action Conmutador que envía su elemento [crowd-form](sms-ui-template-crowd-form.md) principal si se establece en "submit", o restablece su elemento principal si se establece en "reset". ### href Dirección URL de un recurso online. Utilice esta propiedad si necesita un enlace presentado como un botón. ### icono Cadena que especifica el icono que se va a mostrar al lado del texto del botón. La cadena debe ser el nombre de un icono del conjunto de *[iron-icons](https://github.com/PolymerElements/iron-icons)* de código abierto, que está precargado. Por ejemplo, para insertar el iron-icon [search](https://www.webcomponents.org/element/@polymer/iron-icons/demo/demo/index.html), utilice los siguiente: ```

``` El icono se coloca a la izquierda o la derecha del texto, según lo que especifique el atributo *icon-align*. Para usar un icono personalizado, consulte **icon-url**. ### icon-align La posición (izquierda o derecha) del icono en relación con el texto del botón. El valor predeterminado es "left". ### icon-url Dirección URL a una imagen personalizada para el icono. Se puede utilizar una imagen personalizada en lugar de un icono estándar que se especifica con el atributo *icon*. ### cargar Conmutador booleano que, si está presente, muestra el botón como si estuviera en estado de carga. Este atributo tiene prioridad sobre el atributo *disabled* si ambos atributos están presentes. ### destino Cuando se utiliza el atributo `href` para que el botón actúe como hipervínculo a una dirección URL específica, el atributo `target` está dirigido de forma opcional a un fotograma o una ventana donde la dirección URL vinculada debe cargarse. ### variant El estilo general del botón. Utilice "primary" para botones principales, "normal" para botones secundarios, "link" para botones terciarios o "icon" para mostrar solo el icono sin texto. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-bounding-box Un widget utilizado para dibujar rectángulos en una imagen y asignar una etiqueta a la parte de la imagen que está en cada rectángulo. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/XWpJGad). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. Para ver más ejemplos, consulta este [GitHub repositorio](https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/tree/master/images). ```

Use the bounding box tool to draw boxes around the requested target of interest:

Draw a rectangle using your mouse over each instance of the target.
Make sure the box does not cut into the target, leave a 2 - 3 pixel margin
When targets are overlapping, draw a box around each object, include all contiguous parts of the target in the box. Do not include parts that are completely overlapped by another object.
Do not include parts of the target that cannot be seen, even though you think you can interpolate the whole shape of the target.
Avoid shadows, they're not considered as a part of the target.
If the target goes off the screen, label up to the edge of the image.

Draw boxes around the requested target of interest.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### initial-value Matriz de objetos JSON, cada uno de los cuales establece un cuadro delimitador cuando se carga el componente. Cada objeto JSON de la matriz contiene las propiedades siguientes. Los cuadros delimitadores establecidos a través de la propiedad `initial-value` se pueden ajustar y se puede comprobar si la respuesta del trabajo se ajustó o no a través de un valor booleano `initialValueModified` en la salida de la respuesta del trabajador. + **altura**: la altura del cuadro en píxeles. + **etiqueta**: el texto asignado al cuadro como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo *labels* del elemento < crowd-bounding-box >. + **izquierda**: distancia entre la esquina superior izquierda del cuadro y el lado izquierdo de la imagen, medida en píxeles. + **superior**: distancia entre la esquina superior izquierda del cuadro y la parte superior de la imagen, medida en píxeles. + **ancho**: el ancho del cuadro en píxeles. Puede extraer el valor inicial del cuadro delimitador de un archivo de manifiesto de un trabajo anterior en una plantilla personalizada utilizando el lenguaje de plantillas Liquid: ``` initial-value="[ {% for box in task.input.manifestLine.label-attribute-name-from-prior-job.annotations %} {% capture class_id %}{{ box.class_id }}{% endcapture %} {% assign label = task.input.manifestLine.label-attribute-name-from-prior-job-metadata.class-map[class_id] %} { label: {{label | to_json}}, left: {{box.left}}, top: {{box.top}}, width: {{box.width}}, height: {{box.height}}, }, {% endfor %} ]" ``` ### etiquetas Una matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a la parte de la imagen delimitada por un rectángulo. **Límite:** 10 etiquetas. ### name El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ### src La dirección URL de la imagen en la que se dibujan los cuadros delimitadores. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](#bounding-box-regions-full-instructions), [short-instructions](#bounding-box-regions-short-instructions) ## Regions Este elemento necesita las regiones siguientes. ### full-instructions Instrucciones generales sobre cómo dibujar cuadros delimitadores. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Salida La siguiente salida es compatible con este elemento. ### boundingBoxes Matriz de objetos JSON, cada una de las cuales especifica un cuadro delimitador que el trabajador ha creado. Cada objeto JSON de la matriz contiene las propiedades siguientes. + **altura**: la altura del cuadro en píxeles. + **etiqueta**: el texto asignado al cuadro como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo *labels* del elemento < crowd-bounding-box >. + **izquierda**: distancia entre la esquina superior izquierda del cuadro y el lado izquierdo de la imagen, medida en píxeles. + **superior**: distancia entre la esquina superior izquierda del cuadro y la parte superior de la imagen, medida en píxeles. + **ancho**: el ancho del cuadro en píxeles. ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. **Example : salidas de ejemplo de los elementos** A continuación, se muestran ejemplos de salidas de escenarios de uso habituales para este elemento. **Etiqueta única, cuadro único/Varias etiquetas, cuadro único** ``` [ { "annotatedResult": { "boundingBoxes": [ { "height": 401, "label": "Dog", "left": 243, "top": 117, "width": 187 } ], "inputImageProperties": { "height": 533, "width": 800 } } } ] ``` **Etiqueta única, varios cuadros** ``` [ { "annotatedResult": { "boundingBoxes": [ { "height": 401, "label": "Dog", "left": 243, "top": 117, "width": 187 }, { "height": 283, "label": "Dog", "left": 684, "top": 120, "width": 116 } ], "inputImageProperties": { "height": 533, "width": 800 } } } ] ``` **Varias etiquetas, varios cuadros** ``` [ { "annotatedResult": { "boundingBoxes": [ { "height": 395, "label": "Dog", "left": 241, "top": 125, "width": 158 }, { "height": 298, "label": "Cat", "left": 699, "top": 116, "width": 101 } ], "inputImageProperties": { "height": 533, "width": 800 } } } ] ``` Puede tener disponibles numerosas etiquetas, pero solo se muestran en la salida las que se usan. ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-card Cuadro con aspecto elevados para mostrar información. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/QWdwoxe). A continuación se muestra un ejemplo de una plantilla diseñada para tareas de análisis de opiniones que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Your short instructions here.

Your full instructions here.

What sentiment does this text convey?

Nothing is great.

Select an option

What sentiment does this text convey?

Everything is great!

Select an option

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### heading El texto que se muestra en la parte superior del cuadro. ### imagen Dirección URL de una imagen que se mostrará en el cuadro. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-checkbox Componente de la interfaz de usuario que puede activarse o no y que permite al usuario seleccionar varias opciones de un conjunto. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/YzNPgOL). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Find the official website for: {{ task.input.company }}

Do not give Yelp pages, LinkedIn pages, etc.

Include the http:// prefix from the website

Website Found

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### checked Conmutador booleano que, si está presente, muestra activada la casilla de verificación. A continuación se muestra un ejemplo de la sintaxis utilizada para marcar una casilla de verificación de forma predeterminada. ``` This box is checked ``` ### disabled Conmutador booleano que, si está presente, muestra deshabilitada la casilla de verificación e impide que se active. A continuación se muestra un ejemplo de la sintaxis utilizada para deshabilitar una casilla de verificación. ``` Cannot be selected ``` ### name Cadena que se utiliza para identificar la respuesta enviada por el trabajador. Este valor coincidirá con una clave del objeto JSON que especifica la respuesta. ### obligatorio Conmutador booleano que, si está presente, requiere que el trabajador proporcione información. A continuación se muestra un ejemplo de la sintaxis utilizada para requerir que se seleccione una casilla de verificación. ``` Instructions were clear ``` ### valor Cadena que se utiliza como nombre del estado de la casilla de verificación en la salida. Toma "on" como valor predeterminado si no se especifica. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Output Proporciona un objeto JSON. La cadena `name` es el nombre del objeto y la cadena `value` es el nombre de la propiedad de un valor booleano basado en el estado de la casilla de verificación; true si está activado, false en caso contrario. **Example : salidas de ejemplo de los elementos** **Uso del mismo valor `name` para varios cuadros.** ```

Blurry

Too Dim

Too Bright

``` ``` //Output with "blurry" and "dim" checked [ { "image_attributes": { "blurry": true, "dim": true, "exposed": false } } ] ``` Tenga en cuenta que los valores de los tres colores son propiedades de un único objeto. **Uso de diferentes valores de `name` para cada caja.** ```

Red

Yellow

Green

``` ``` //Output with "Red" checked [ { "Go": { "Green": false }, "Slow": { "Yellow": false }, "Stop": { "Red": true } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-classifier Widget que se utiliza para clasificar contenido sin imagen, como, por ejemplo, audio, vídeo o texto. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/KKawYBm). A continuación se muestra un ejemplo de una plantilla de tarea de trabajador HTML creada mediante `crowd-classifier`. En este ejemplo se utiliza el [lenguaje de plantilla Liquid](https://shopify.github.io/liquid/basics/introduction/) para automatizar: + Categorías de etiquetas en el parámetro `categories` + Los objetos que se están clasificando en el parámetro `classification-target`. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the document.

Choose the appropriate label that best suits the document.

Please choose the correct category for the document

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### categories Matriz de cadenas con formato JSON, cada una de las cuales es una categoría que un trabajador puede asignar al texto. Debe incluir "otros" como categoría, si no es así, es posible que el trabajador puede dar una respuesta. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### name El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [classification-target](#crowd-classifier-regions-classification-target), [full-instructions](#crowd-classifier-regions-full-instructions) y [short-instructions](#crowd-classifier-regions-short-instructions) ## Regions Las regiones siguientes son compatibles con este elemento. ### classification-target El contenido que el trabajador debe clasificar. Puede tratarse de texto sin formato o HTML. Por ejemplo, el HTML se puede utilizar, *sin limitarse a ello,* para integrar un vídeo o un reproductor de audio, un PDF o realizar una comparación de dos o más imágenes. ### full-instructions Instrucciones generales sobre cómo clasificar texto. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Output El resultado de este elemento es un objeto que usa el valor `name` especificado como nombre de propiedad y una cadena de `categories` como valor de la propiedad. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado para este elemento. ``` [ { "": { "label": "" } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-classifier-multi-select Un widget para clasificar varios tipos de contenido, como audio, vídeo o texto, en una o más categorías. El contenido que se va a clasificar se conoce como un *objeto*. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/ExZaMOm). A continuación, se muestra un ejemplo de una plantilla de tarea de trabajador HTML construida mediante este elemento. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Positive sentiment include: joy, excitement, delight

Negative sentiment include: anger, sarcasm, anxiety

Neutral: neither positive or negative, such as stating a fact

N/A: when the text cannot be understood

When the sentiment is mixed, such as both joy and sadness, choose both labels.

Choose all categories that are expressed by the text.

``` ## Atributos Los siguientes atributos son compatibles con el elemento `crowd-classifier-multi-select`. Cada atributo acepta uno o varios valores de cadena. ### categories Obligatorio. Matriz de cadenas con formato JSON, cada una de las cuales es una categoría que un trabajador puede asignar al objeto. ### header Obligatorio. El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para trabajadores. ### name Obligatorio. El nombre del widget. En la salida del formulario, se usa el nombre como clave para la entrada del widget. ### exclusion-category Opcional. Una cadena con formato JSON con el siguiente formato: `"{ text: 'default-value' }"`. Este atributo establece un valor predeterminado que los trabajadores pueden seleccionar si no hay ninguna de las etiquetas que se pueda aplicar al objeto mostrado en la interfaz de usuario del trabajador. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios: + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [classification-target](sms-ui-template-crowd-classifier.md#crowd-classifier-regions-classification-target), [full-instructions](sms-ui-template-crowd-classifier.md#crowd-classifier-regions-full-instructions) y [short-instructions](sms-ui-template-crowd-classifier.md#crowd-classifier-regions-short-instructions) ## Regions Este elemento utiliza las siguientes regiones. ### classification-target El contenido que el trabajador debe clasificar. El contenido puede ser texto sin formato o un objeto que especifique en la plantilla mediante HTML. Por ejemplo, puede utilizar elementos HTML para incluir un reproductor de vídeo o audio, incrustar un archivo PDF o incluir una comparación de dos o más imágenes. ### full-instructions Instrucciones generales sobre cómo clasificar el texto. ### short-instructions Instrucciones importantes específicas para tareas. Estas instrucciones se muestran de forma destacada. ## Output El resultado de este elemento es un objeto que usa el valor `name` especificado como nombre de propiedad y una cadena de `categories` como valor de la propiedad. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado para este elemento. ``` [ { "": { labels: ["label_a", "label_b"] } } ] ``` ## Véase también Para obtener más información, consulte los siguientes temas: + [Categorización de texto con clasificación de texto (etiquetas múltiples)](sms-text-classification-multilabel.md) + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-entity-annotation Un widget para etiquetar palabras, frases y cadenas de caracteres dentro de un texto más grande. Los trabajadores seleccionan una etiqueta y resaltan el texto al que se aplica la etiqueta. **Importante: widget autónomo** No utilice el elemento `` con el elemento ``. Contiene su propia lógica para enviar formularios y un botón **Submit (Enviar)**. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/XWpJQrR). A continuación se muestra un ejemplo de una plantilla que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the text carefully.
Highlight words, phrases, or sections of the text.
Choose the label that best matches what you have highlighted.
To change a label, choose highlighted text and select a new label.
To remove a label from highlighted text, choose the X next to the abbreviated label name on the highlighted text.
You can select all of a previously highlighted text, but not a portion of it.

Apply labels to words or phrases.

What is the overall subject of this text?

Technology

Politics

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### initial-value Una matriz de objetos con formato JSON; cada objeto define una anotación para aplicarla al texto en la inicialización. Los objetos contienen un valor `label` que coincide con uno del atributo `labels`, un valor entero `startOffset` para el desplazamiento Unicode inicial de la extensión etiquetada y un valor entero `endOffset` para el desplazamiento Unicode final. **Example** ``` [ { label: 'person', startOffset: 0, endOffset: 16 }, ... ] ``` ### etiquetas Una matriz de objetos con formato JSON; cada objeto contiene: + `label` (obligatorio): el nombre que se utiliza para identificar las identidades. + `fullDisplayName` (opcional): elemento que se utiliza en la lista de etiquetas del widget de la tarea. Si no se especifica, el valor predeterminado es el valor de la etiqueta. + `shortDisplayName` (opcional): una abreviatura de 3-4 letras para mostrarla sobre las entidades seleccionadas. Si no se especifica, el valor predeterminado es el valor de la etiqueta. **Le recomendamos `shortDisplayName`** Los valores que aparecen sobre las selecciones se pueden solapar y generar dificultades a la hora de administrar las entidades etiquetadas del espacio de trabajo. Le recomendamos proporcionar un `shortDisplayName` de 3-4 caracteres para cada etiqueta con el fin de evitar los solapamientos y hacer que los trabajadores puedan gestionar el espacio de trabajo con facilidad. **Example** ``` [ { label: 'person', shortDisplayName: 'per', fullDisplayName: 'person' } ] ``` ### name Sirve como el nombre del widget en el DOM. También se utiliza como el nombre de atributo de etiqueta en la salida del formulario y el manifiesto de salida. ### text El texto que se va a anotar. El sistema de plantillas aplica caracteres de escape a las cadenas HTML y los presupuestos de forma predeterminada. Si el código es totalmente o parcialmente de escape, consulte [Filtros de variables](sms-custom-templates-step2-automate.md#sms-custom-templates-step2-automate-filters) y conozca más métodos para controlar el escape. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos secundarios**: [full-instructions](#entity-annotation-regions-full-instructions), [short-instructions](#entity-annotation-regions-short-instructions) ## Regions Las regiones siguientes son compatibles con este elemento. ### full-instructions Instrucciones generales acerca de cómo utilizar el widget. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Salida La siguiente salida es compatible con este elemento. ### entities Un objeto JSON que especifica el inicio, el final y la etiqueta de una anotación. Este objeto contiene las siguientes propiedades. + **etiqueta**: la etiqueta asignada. + **startOffset**: el desplazamiento Unicode del principio del texto seleccionado. + **endOffset**: el desplazamiento Unicode del primer carácter después de la selección. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado para este elemento. ``` { "myAnnotatedResult": { "entities": [ { "endOffset": 54, "label": "person", "startOffset": 47 }, { "endOffset": 97, "label": "event", "startOffset": 93 }, { "endOffset": 219, "label": "date", "startOffset": 212 }, { "endOffset": 271, "label": "location", "startOffset": 260 } ] } } ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-fab Botón flotante con una imagen en el centro. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/ExZaJaw). A continuación se muestra un ejemplo de una plantilla Liquid diseñada para la clasificación de imágenes que utiliza el elemento ``. Esta plantilla se utiliza JavaScript para permitir a los trabajadores informar de problemas con la interfaz de usuario del trabajador. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

If there is an issue with the image or tools, please select None of the Above, describe the issue in the text box and click the button below.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image. Use the None of the Above option if none of the other labels suit the image.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### disabled Conmutador booleano que, si está presente, muestra el botón flotante como deshabilitado y evita que se hagan clics. ### icono Cadena que especifica el icono que se va a mostrar en el centro del botón. La cadena tiene que ser el nombre de un icono del conjunto de *[iron-icons](https://github.com/PolymerElements/iron-icons)* de código abierto que está cargado previamente o la dirección URL de un icono personalizado. A continuación se muestra un ejemplo de la sintaxis que puede utilizar para agregar un iron-icon a un elemento HTML ``. Reemplace `icon-name` con el nombre del icono que le gustaría utilizar de este [conjunto de iconos](https://www.webcomponents.org/element/@polymer/iron-icons/demo/demo/index.html). ``` ``` ### etiqueta Cadena consistente en un único carácter que se pueden utilizar en lugar de un icono. Si se usan emojis o varios caracteres podría pasar que el botón mostrase puntos suspensivos en su lugar. ### título Cadena que se mostrará como ayuda sobre herramientas cuando el ratón pase por encima del botón. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-form El contenedor de formularios de todas las tareas personalizadas. Establece e implementa acciones importante para el envío adecuado de los datos del formulario. Si no se incluye un [crowd-button](sms-ui-template-crowd-button.md) del tipo "submit" dentro del elemento ``, se asociará automáticamente dentro del elemento ``. Vea un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/oNBgOWa). A continuación se muestra un ejemplo de una plantilla de clasificación de imágenes que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image. Use the None of the Above option if none of the other labels suit the image.

``` ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: ninguno + **Elementos secundarios**: cualquiera de los elementos de [plantilla de interfaz de usuario](sms-ui-template-reference.md) ## Eventos de elemento El elemento `crowd-form` extiende el [elemento `form` HTML estándar](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) y hereda sus eventos, como `onclick` y `onsubmit`. ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-icon-button Botón con una imagen ubicada en el centro. Cuando el usuario toca el botón, emana un efecto onda del centro del botón. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/ExZaJXE). A continuación se muestra un ejemplo de una plantilla Liquid diseñada para la clasificación de imágenes que utiliza el elemento ``. Esta plantilla se utiliza JavaScript para permitir a los trabajadores informar de problemas con la interfaz de usuario del trabajador. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

If there is an issue with the image or tools, please select None of the Above, describe the issue in the text box and click the button below.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image. Use the None of the Above option if none of the other labels suit the image.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### disabled Conmutador booleano que, si está presente, muestra el botón como deshabilitado y evita que se hagan clics. ### icono Cadena que especifica el icono que se va a mostrar en el centro del botón. La cadena tiene que ser el nombre de un icono del conjunto de *[iron-icons](https://github.com/PolymerElements/iron-icons)* de código abierto que está cargado previamente o la dirección URL de un icono personalizado. A continuación se muestra un ejemplo de la sintaxis que puede utilizar para agregar un iron-icon a un elemento HTML ``. Reemplace `icon-name` con el nombre del icono que le gustaría utilizar de este [conjunto de iconos](https://www.webcomponents.org/element/@polymer/iron-icons/demo/demo/index.html). ``` ``` ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-image-classifier Un widget para clasificar una imagen. Utilice uno de los siguientes formatos de imagen compatibles: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Las imágenes no tienen un límite de tamaño. Vea un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/vYgEvWw). A continuación se muestra un ejemplo de una plantilla de clasificación de imágenes que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image. Use the None of the Above option if none of the other labels suit the image.

``` ## Atributos Este elemento requiere el uso de los siguientes atributos. ### categories Matriz de cadenas con formato JSON, cada una de las cuales es una categoría que un trabajador puede asignar a la imagen. Debe incluir "otros" como categoría, de forma que el trabajador puede dar una respuesta. Puede especificar hasta 10 categorías. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### name El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ### overlay Información que se superpone en la imagen de origen. Se utiliza en flujos de trabajo de verificación de tareas de segmentación semántica, segmentación de instancias y cuadros delimitadores. Es un objeto JSON que contiene un objeto con el nombre del tipo de tarea como clave en formato camelCase. El valor de esa clave es un objeto que contiene las etiquetas y otra información necesaria de la tarea anterior. A continuación, se muestra un ejemplo de un elemento `crowd-image-classifier` con atributos para verificar una tarea de cuadro delimitador: ``` ... ``` Una tarea de verificación de segmentación semántica utilizaría el valor `overlay` como sigue: ``` ... ``` Una tarea de segmentación de instancias utilizaría el valor `overlay` como sigue: ``` ... ``` ### src Dirección URL de la imagen que se va a clasificar. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](#image-classifier-regions-full-instructions), [short-instructions](#image-classifier-regions-short-instructions) y [worker-comment](#image-classifier-regions-worker-comment) ## Regions Este elemento utiliza las regiones siguientes. ### full-instructions Instrucciones generales para el trabajador acerca de cómo clasificar una imagen. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ### worker-comment Utilice esta región en los flujos de trabajo de verificación cuando necesite trabajadores para explicar por qué hicieron la elección que hicieron. Utilice el texto incluido entre las etiquetas de apertura y cierre para proporcionar instrucciones a los trabajadores sobre qué información debe incluirse en el comentario. Utiliza los siguientes atributos: #### header Frase con un llamada a la acción para dejar un comentario. Se utiliza como texto del título de una ventana modal en la que se agrega el comentario. Opcional. El valor predeterminado es "Add a comment (Añada un comentario". #### link-text Este texto aparece debajo de las categorías del widget. Cuando se hace clic en él, se abre una ventana modal en la que el trabajador puede añadir un comentario. Opcional. El valor predeterminado es "Add a comment (Añada un comentario". #### marcador de posición Texto de ejemplo del área de texto del comentario que se sobrescribe cuando el trabajador comienza a escribir. Este texto no aparece en la salida si el trabajador deja el campo en blanco. Opcional. Cambia por defecto a en blanco. ## Output La salida de este elemento es una cadena que especifica uno de los valores definidos en el atributo *categories* del elemento < crowd-image-classifier >. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado para este elemento. ``` [ { "": { "label": "" "workerComment": "Comment - if no comment is provided, this field will not be present" } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-image-classifier-multi-seleccionar Un widget para clasificar una imagen en una o más categorías. Utilice uno de los siguientes formatos de imagen compatibles: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Las imágenes no tienen un límite de tamaño. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/WNRbWgR). A continuación se muestra un ejemplo de una plantilla de tarea de trabajador HTML creada con este elemento crowd. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

If more than one label applies to the image, select multiple labels.

If no labels apply, select None of the above

Read the task carefully and inspect the image.

Choose the appropriate label(s) that best suit the image.

``` ## Atributos Los siguientes atributos son compatibles con el elemento `crowd-image-classifier-multi-select`. Cada atributo acepta uno o varios valores de cadena. ### categories Obligatorio. Matriz de cadenas con formato JSON, cada una de las cuales es una categoría que un trabajador puede asignar a la imagen. Un trabajador debe elegir al menos una categoría y puede elegir todas las categorías. ### header Obligatorio. El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para trabajadores. ### name Obligatorio. El nombre del widget. En la salida del formulario, se usa el nombre como clave para la entrada del widget. ### src Obligatorio. Dirección URL de la imagen que se va a clasificar. ### exclusion-category Opcional. Una cadena con formato JSON con el siguiente formato: `"{ text: 'default-value' }"`. Este atributo establece un valor predeterminado que los trabajadores pueden elegir si ninguna de las etiquetas se aplica a la imagen mostrada en la interfaz de usuario de trabajador. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios: + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](sms-ui-template-crowd-image-classifier.md#image-classifier-regions-full-instructions), [short-instructions](sms-ui-template-crowd-image-classifier.md#image-classifier-regions-short-instructions) y [worker-comment](sms-ui-template-crowd-image-classifier.md#image-classifier-regions-worker-comment) ## Regions Este elemento utiliza las siguientes regiones ### full-instructions Instrucciones generales para el trabajador acerca de cómo clasificar una imagen. ### short-instructions Instrucciones importantes específicas para tareas. Estas instrucciones se muestran de forma destacada. ## Output La salida de este elemento es una cadena que especifica uno o más de los valores definidos en el atributo `categories` del elemento ``. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado para este elemento. ``` [ { "": { labels: ["label_a", "label_b"] } } ] ``` ## Véase también Para obtener más información, consulte los siguientes temas: + [Creación de un trabajo de etiquetado de clasificación de imágenes (varias etiquetas)](sms-image-classification-multilabel.md) + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-input Cuadro que acepta datos de entrada. **No puede autocerrarse.** A diferencia del elemento `input` en el estándar HTML, este elemento no puede autocerrarse poniendo una barra inclinada antes del corchete de cierre, por ejemplo ``. Tiene que ir seguido de un `` para cerrar el elemento. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/wvgBZYW). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Your custom quick instructions and examples

Your custom detailed instracutions and more examples

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### allowed-pattern Expresión regular que se utiliza con el atributo *auto-validate* para pasar por alto los tipos de caracteres no coincidentes como tipos de trabajadores. ### auto-focus Cuando el valor se establece en true, el explorador se centra en el área de entrada después de realizar la carga. De esta forma, el trabajador puede comenzar a escribir sin tener que seleccionarla antes. ### auto-validate Conmutador booleano que, si está presente, activa la validación de entrada. El comportamiento del validador se puede modificar mediante los atributos *error-message* y *allowed-pattern*. ### disabled Conmutador booleano que, si está presente, muestra deshabilitada el área de entrada. ### error-message Texto que se va a mostrar debajo del campo de entrada, en el lado izquierdo, si se produce un error de validación. ### etiqueta Cadena que se muestra dentro de un campo de texto. Este texto se reduce y se eleva por encima de un campo de texto cuando el trabajador comienza a escribir en el campo o cuando el atributo *value* está establecido. ### max-length Número máximo de caracteres que la entrada aceptará. La introducción de caracteres por encima de este límite no se tendrá en cuenta. ### min-length Longitud mínima de la entrada del campo. ### name Establece el nombre de la entrada que se va a utilizar en el DOM y la salida del formulario. ### marcador de posición Valor de cadena que se utiliza como texto marcador de posición, que se muestra hasta que el trabajador comienza a introducir datos en la entrada. No se utiliza como valor predeterminado. ### obligatorio Conmutador booleano que, si está presente, requiere que el trabajador proporcione información. ### type Se necesita una cadena para establecer el HTML5 `input-type` comportamiento de la entrada. Entre los ejemplos se incluyen `file` y `date`. ### valor Un elemento preestablecido que se convierte en valor predeterminado si el trabajador no proporciona entrada. El elemento preestablecido aparece en un cuadro de texto. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Output Proporciona una cadena `name` como nombre de la propiedad y el texto que se ha especificado en el campo como su valor. **Example : resultado de JSON de ejemplo** Los valores de varios elementos salen en el mismo objeto, con su valor de atributo `name` como su nombre de propiedad. Los elementos que no tengan información de entrada no aparecen en el resultado. Por ejemplo, usemos tres entradas: ```

``` Este es el resultado si solo se han introducido dos: ``` [ { "tag1": "blue", "tag2": "red" } ] ``` Esto significa que cualquier código creado para analizar estos resultados debe poder manejar la presencia o ausencia de cada entrada en las respuestas. ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-instance-segmentation Un widget para identificar instancias individuales de objetos específicos dentro de una imagen y crear una superposición de color para cada instancia etiquetada. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/PoWwvwG). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.
Read the options and review the examples provided to understand more about the labels.
Choose the appropriate label that best suits the image.

Use the tools to label all instances of the requested items in the image

``` Utilice una plantilla similar a la siguiente para permitir a los trabajadores añadir sus propias categorías (etiquetas). ```

Add a label to describe each type of object in this image.

Cover each instance of each object with a segmentation mask.

Add new label

Add

Manage labels

Describe your task in more detail here.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### etiquetas Matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a una instancia de un objeto de la imagen. Los trabajadores pueden generar distintos colores para las superposiciones para cada instancia pertinente seleccionando "add instance" (agregar instancia) debajo de la etiqueta en la herramienta. ### name El nombre del widget. Se utiliza como clave para los datos de etiquetado en la salida del formulario. ### src La dirección URL de la imagen que se va a etiquetar. ## initial-value Un objeto JSON que contiene las asignaciones de color de un trabajo anterior de segmentación de instancia y un vínculo a la salida de imagen superpuesta por el trabajo anterior. Incluya esto cuando desee que un trabajador humano verifique los resultados de un trabajo de etiquetado anterior y, si es necesario, lo ajuste. El atributo aparecerá como sigue: ``` initial-value="{ "instances": [ { "color": "#2ca02c", "label": "Cat" }, { "color": "#1f77b4", "label": "Cat" }, { "color": "#d62728", "label": "Dog" } ], "src": {{ "S3 file URL for image" | grant_read_access }} }" ``` ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](#instance-segmentation-regions-full-instructions), [short-instructions](#instance-segmentation-regions-short-instructions) ## Regions Las regiones siguientes son compatibles con este elemento. ### full-instructions Instrucciones generales sobre cómo segmentar imágenes. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Salida La siguiente salida es compatible con este elemento. ### labeledImage Objeto JSON que contiene un PNG con codificación Base64 de las etiquetas. ### instances Una matriz JSON que contiene objetos con las etiquetas y los colores de las instancias. + **color**: el valor hexadecimal del color RGB de la etiqueta en el PNG `labeledImage`. + **etiqueta**: la etiqueta que se asigna a las superposiciones que utilizan ese color. Este valor se puede repetir, ya que las distintas instancias de la etiqueta se identifican mediante su color exclusivo. ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado de este elemento. ``` [ { "annotatedResult": { "inputImageProperties": { "height": 533, "width": 800 }, "instances": [ { "color": "#1f77b4", "label": "": }, { "color": "#2ca02c", "label": "": }, { "color": "#ff7f0e", "label": "": }, ], "labeledImage": { "pngImageData": "" } } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-instructions Elemento que muestra instrucciones en tres páginas de pestañas, **Summary (Resumen)**, **Detailed Instructions (Instrucciones detalladas)** y **Examples (Ejemplos)**, cuando el trabajador hace clic en un enlace o botón. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/XWpJwbx). A continuación se muestra un ejemplo de una plantilla Liquid que utilizó el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Given an image, write three words or short phrases that summarize its contents.

Imagine that you are describing an image to a friend or tagging it for a news website. Provide three specific words or short phrases that describe it.

Highway
Cars
Gas station

These are not specific enough:

Trees
Outside
Daytime

Instructions: Given an image, write three words or short phrases that summarize its contents.

If someone were to see these three words or phrases, they should understand the subject and context of the image, as well as any important actions.

View the instructions for detailed instructions and examples.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### link-text Texto que se mostrará para abrir las instrucciones. El valor predeterminado es **Click for instructions (Haga clic para obtener instrucciones)**. ### link-type Cadena que especifica el tipo de desencadenador para las instrucciones. Los valores posibles son "link" (valor predeterminado) y "button". ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Regions Las regiones siguientes son compatibles con este elemento. ### detailed-instructions Contenido que proporciona instrucciones específicas para una tarea. Aparece en la página de la pestaña "Detailed Instructions (Instrucciones detalladas)". ### negative-example Contenido que proporciona ejemplos de tareas finalizadas inadecuadamente. Aparece en la página de la pestaña "Examples (Ejemplos)". Se puede proporcionar más de un ejemplo para este elemento. ### positive-example Contenido que proporciona ejemplos de tareas finalizadas correctamente. Aparece en la página de la pestaña "Examples (Ejemplos)". ### short-summary Breve instrucción que resume la tarea que se va a llevar a cabo. Aparece en la página de la pestaña "Summary (Resumen)". Se puede proporcionar más de un ejemplo para este elemento. ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-keypoint Genera una herramienta para seleccionar y anotar puntos clave en una imagen. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/GRrgaWN). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Describe your task briefly here and give examples

Give additional instructions and good/bad examples here

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### initial-value Una matriz, en formato JSON, de puntos clave que deben aplicarse a la imagen en el inicio. Por ejemplo: ``` initial-value="[ { 'label': 'Left Eye', 'x': 1022, 'y': 429 }, { 'label': 'Beak', 'x': 941, 'y': 403 } ] ``` **nota** Tenga en cuenta que los valores de etiqueta que se utilizan en este atributo debe tener un valor coincidente en el atributo `labels` o el punto no se representará. ### etiquetas Matriz, en formato JSON, de cadenas que se van a utilizar como etiquetas de anotación de puntos clave. ### name Cadena que se utiliza para identificar la respuesta enviada por el trabajador. Este valor coincidirá con una clave del objeto JSON que especifica la respuesta. ### src El URI de origen de la imagen que se va a anotar. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](#keypoint-regions-full-instructions), [short-instructions](#keypoint-regions-short-instructions) ## Regions Este elemento necesita las regiones siguientes. ### full-instructions Instrucciones generales sobre cómo anotar la imagen. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Salida La siguiente salida es compatible con este elemento. ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. ### keypoints Matriz de objetos JSON que contienen las coordenadas y la etiqueta de un punto clave. Cada objeto contiene las siguientes propiedades. + **etiqueta**: la etiqueta asignada al punto clave. + **x**: la coordenada X del punto clave de la imagen en píxeles. + **y**: la coordenada y del punto clave de la imagen en píxeles. **nota** Las coordenadas X e Y consideran el punto 0,0 como la parte superior izquierda de la imagen. **Example : salidas de ejemplo de los elementos** A continuación, se muestra un ejemplo de salida del uso de este elemento. ``` [ { "crowdKeypoint": { "inputImageProperties": { "height": 1314, "width": 962 }, "keypoints": [ { "label": "dog", "x": 155, "y": 275 }, { "label": "cat", "x": 341, "y": 447 }, { "label": "cat", "x": 491, "y": 513 }, { "label": "dog", "x": 714, "y": 578 }, { "label": "cat", "x": 712, "y": 763 }, { "label": "cat", "x": 397, "y": 814 } ] } } ] ``` Puede tener disponibles numerosas etiquetas, pero solo se muestran en la salida las que se utilizan. ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-line Un widget para dibujar líneas en una imagen. Cada línea está asociada a una etiqueta y los datos de salida indicarán los puntos inicial y final de cada línea. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/NWdPVgw). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. Para ver más ejemplos, consulta este [GitHub repositorio](https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/tree/master/images). ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Draw a line on each objects that the label applies to.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Draw a line along each object that the image applies to. Make sure that the line does not extend beyond the boundaries of the object.

Each line is defined by a starting and ending point. Carefully place the starting and ending points on the boundaries of the object.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header Opcional. El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### initial-value Opcional. Matriz de objetos JSON, cada uno de los cuales establece una línea cuando se carga el componente. Cada objeto JSON de la matriz contiene las propiedades siguientes: + **etiqueta**: el texto asignado a la línea como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo *labels* del elemento ``. + **vértices**: las coordenadas `x` e `y` de los píxeles del punto inicial y final de la línea, en relación con la esquina superior izquierda de la imagen. ``` initial-value="{ lines: [ { label: 'sideline', // label of this line annotation vertices:[ // an array of vertices which decide the position of the line { x: 84, y: 110 }, { x: 60, y: 100 } ] }, { label: 'yardline', vertices:[ { x: 651, y: 498 }, { x: 862, y: 869 } ] } ] }" ``` Las líneas definidas mediante la propiedad `initial-value` se pueden ajustar. Se registra si la respuesta de un trabajador se ajustó o no mediante un booleano `initialValueModified` en el resultado de la respuesta del trabajador. ### etiquetas Obligatorio. Matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a la línea. **Límite:** 10 etiquetas. ### label-colors Opcional. Una matriz de cadenas. Cada cadena es un código hexadecimal (hex) de una etiqueta. ### name Obligatorio. El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ### src Obligatorio. La dirección URL de la imagen en la que se dibujan las líneas. ## Regions Este elemento necesita las regiones siguientes. ### full-instructions Instrucciones generales sobre cómo dibujar líneas. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [short-instructions](#line-regions-short-instructions), [full-instructions](#line-regions-full-instructions) ## Output ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. ### lines Una matriz JSON que contiene objetos con las etiquetas y los vértices de las líneas. + **etiqueta**: la etiqueta que se asigna a una línea. + vértices: las coordenadas `x` e `y` de los píxeles del punto inicial y final de la línea, en relación con la esquina superior izquierda de la imagen. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado de este elemento. ``` { "crowdLine": { //This is the name you set for the crowd-line "inputImageProperties": { "height": 1254, "width": 2048 }, "lines": [ { "label": "yardline", "vertices": [ { "x": 58, "y": 295 }, { "x": 1342, "y": 398 } ] }, { "label": "sideline", "vertices": [ { "x": 472, "y": 910 }, { "x": 1480, "y": 600 } ] } ] } } ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-modal Pequeña ventana que emerge en la pantalla cuando esta se abre. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/RwKNmyK). A continuación se muestra un ejemplo de la sintaxis que puede utilizar con el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ``` Example Modal Text ``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### link-text Texto que se mostrará para abrir el modal. El valor predeterminado es "Click to open modal (Haga clic para abrir modal)". ### link-type Cadena que especifica el tipo de desencadenador para el modal. Los valores posibles son "link" (valor predeterminado) y "button". ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-polygon Un widget utilizado para dibujar polígonos en una imagen y asignar una etiqueta a la parte de la imagen que está en cada polígono. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/eYgmajo). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Make the polygon tight around the object
You need to select a label before starting a polygon
You will need to select a label again after completing a polygon
To select a polygon, you can click on its borders
You can start drawing a polygon from inside another polygon
You can undo and redo while you're drawing a polygon to go back and forth between points you've placed
You are prevented from drawing lines that overlap other lines from the same polygon

Draw a polygon around each of the requested target(s) of interest

Make the polygon tight around the object

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### etiquetas Una matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a la parte de la imagen delimitada por un polígono. ### name El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ### src La dirección URL de la imagen en la que se dibujan los polígonos. ### initial-value Matriz de objetos JSON, cada uno de los cuales define un polígono que se va dibujar al cargar el componente. Cada objeto JSON de la matriz contiene las propiedades siguientes. + **etiqueta**: el texto asignado al polígono como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo *labels* del elemento . + **vértices**: una matriz de objetos JSON. Cada objeto contiene un valor de coordenada x e y para un punto en el polígono. **Example** Un atributo `initial-value` podría tener este aspecto. ``` initial-value = '[ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, ... { "x": 759, "y": 281 } ] } ]' ``` Dado que estará dentro de un elemento HTML, la matriz JSON se debe escribir entre comillas simples o dobles. El ejemplo anterior utiliza comillas simples para encapsular la matriz JSON y comillas dobles dentro de la propia matriz. Si tiene que combinar comillas simples y dobles dentro de la matriz JSON, reemplácelas por sus códigos de entidad HTML (`"` para comilla doble, `'` para comilla simple) para aplicarlas correctamente. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](#polygon-regions-full-instructions), [short-instructions](#polygon-regions-short-instructions) ## Regions Se requieren las siguientes regiones. ### full-instructions Instrucciones generales sobre cómo dibujar polígonos. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Salida La siguiente salida es compatible con este elemento. ### polygons Matriz de objetos JSON, cada uno de los cuales describe un polígono que ha creado el trabajador. Cada objeto JSON de la matriz contiene las propiedades siguientes. + **etiqueta**: el texto asignado al polígono como parte de la tarea de etiquetado. + **vértices**: una matriz de objetos JSON. Cada objeto contiene un valor de coordenada x e y para un punto en el polígono. La esquina superior izquierda de la imagen es 0,0. ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. **Example : salidas de ejemplo de los elementos** A continuación, se muestran ejemplos de salidas de escenarios de uso habituales para este elemento. **Una sola etiqueta, un solo polígono** ``` { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] } ] } } ] ``` **Una sola etiqueta, varios polígonos** ``` [ { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] }, { "label": "dog", "vertices": [ { "x": 870, "y": 278 }, { "x": 908, "y": 446 }, { "x": 1009, "y": 602 }, { "x": 1116, "y": 519 }, { "x": 1174, "y": 498 }, { "x": 1227, "y": 479 }, { "x": 1179, "y": 405 }, { "x": 1179, "y": 337 } ] } ] } } ] ``` **Varias etiquetas, varios polígonos** ``` [ { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] }, { "label": "cat", "vertices": [ { "x": 870, "y": 278 }, { "x": 908, "y": 446 }, { "x": 1009, "y": 602 }, { "x": 1116, "y": 519 }, { "x": 1174, "y": 498 }, { "x": 1227, "y": 479 }, { "x": 1179, "y": 405 }, { "x": 1179, "y": 337 } ] } ] } } ] ``` Puede tener disponibles numerosas etiquetas, pero solo se muestran en la salida las que se usan. ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # '\$1"datos":\$1"características":[1,2,3,4]\$1\$1' Un widget para dibujar polilínea en una imagen. Cada polilínea está asociada a una etiqueta y puede incluir dos o más vértices. Una polilínea puede intersecarse a sí misma y sus puntos inicial y final pueden situarse en cualquier parte de la imagen. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/PoWwvyJ). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. Para ver más ejemplos, consulta este [GitHub repositorio](https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/tree/master/images). ```

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Draw a polyline around the boundaries of all objects that the label applies to.

Use the Enter key to complete a polyline.

Make sure that the polyline fits tightly around the boundary of the object.

Read the task carefully and inspect the image.

Review the tool guide to learn how to use the polyline tool.

Choose the appropriate label that best suits the image.

To draw a polyline, select a label that applies to an object of interest and add a single point to the photo by clicking on that point. Continue to draw the polyline around the object by adding additional points around the object boundary.

After you place the final point on the polyline, press Enter on your keyboard to complete the polyline.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header Opcional. El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### initial-value Opcional. Matriz de objetos JSON, cada uno de los cuales establece una polilínea cuando se carga el componente. Cada objeto JSON de la matriz contiene las propiedades siguientes: + **etiqueta**: el texto asignado a la polilínea como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo *labels* del elemento ``. + **vértices**: las coordenadas `x` e `y` de los píxeles de los vértices de una polilínea, en relación con la esquina superior izquierda de la imagen. ``` initial-value= "{ polylines: [ { label: 'sideline', // label of this line annotation vertices:[ // an array of vertices which decide the position of the line { x: 84, y: 110 }, { x: 60, y: 100 } ] }, { label: 'yardline', vertices:[ { x: 651, y: 498 }, { x: 862, y: 869 }, { x: 1000, y: 869 } ] } ] }" ``` Las polilíneas definidas mediante la propiedad `initial-value` se pueden ajustar. Se registra si la respuesta de un trabajador se ajustó o no mediante un booleano `initialValueModified` en el resultado de la respuesta del trabajador. ### etiquetas Obligatorio. Matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a la línea. **Límite:** 10 etiquetas. ### label-colors Opcional. Una matriz de cadenas. Cada cadena es un código hexadecimal (hex) de una etiqueta. ### name Obligatorio. El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ### src Obligatorio. La dirección URL de la imagen en la que se dibujan las polilíneas. ## Regions Este elemento necesita las regiones siguientes. ### full-instructions Instrucciones generales sobre cómo dibujar polilíneas. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [short-instructions](#polyline-regions-short-instructions), [full-instructions](#polyline-regions-full-instructions) ## Output ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. ### polylines Una matriz JSON que contiene objetos con las etiquetas y los vértices de las polilíneas. + **etiqueta**: la etiqueta que se asigna a una línea. + vértices: las coordenadas `x` e `y` de los píxeles de los vértices de una polilínea, en relación con la esquina superior izquierda de la imagen. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado de este elemento. ``` { "crowdPolyline": { //This is the name you set for the crowd-polyline "inputImageProperties": { "height": 1254, "width": 2048 }, "polylines": [ { "label": "sideline", "vertices": [ { "x": 651, "y": 498 }, { "x": 862, "y": 869 }, { "x": 1449, "y": 611 } ] }, { "label": "yardline", "vertices": [ { "x": 1148, "y": 322 }, { "x": 1705, "y": 474 }, , { "x": 1755, "y": 474 } ] } ] } } ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-radio-button Botón que puede estar activado o desactivado. Cuando hay botones de opción dentro de un grupo de botones de opción, puede haber exactamente un botón de opción activado en el grupo, en cualquier momento. El siguiente es un ejemplo de cómo configurar un elemento `crowd-radio-button` dentro de un elemento `crowd-radio-group`. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/yLgyWGZ). A continuación se muestra un ejemplo de la sintaxis que puede utilizar con el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Technology

Politics

``` El ejemplo anterior se puede ver en una plantilla de tareas de trabajo personalizada en este GitHub ejemplo: [plantilla personalizada de trabajo de etiquetado de reconocimiento de entidades](https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/blob/master/text/named-entity-recognition-with-additional-classification.liquid.html). Los botones de opción de Crowd HTML Element no admiten la etiqueta HTML, `required`. Para que sea obligatorio seleccionar un botón de opción, utilice elementos `` para crear botones de radio y añada la etiqueta `required`. El atributo `name` de todos los elementos `` que pertenecen al mismo grupo de botones de opción debe ser el mismo. Por ejemplo, la siguiente plantilla requiere que el usuario seleccione un botón de opción del grupo `animal-type` antes de enviarla. ```

Select an animal type:

Cat

Dog

Unknown

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

Read the task carefully and inspect the image.

Choose the appropriate label that best suits the image.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### checked Conmutador booleano que, si está presente, muestra activado el botón de opción. ### disabled Conmutador booleano que, si está presente, muestra deshabilitado el botón e impide que se active. ### name Cadena que se utiliza para identificar la respuesta enviada por el trabajador. Este valor coincidirá con una clave del objeto JSON que especifica la respuesta. **nota** Si utiliza los botones fuera de un elemento [crowd-radio-group](sms-ui-template-crowd-radio-group.md) pero con la misma cadena `name` y diferentes cadenas `value`, el objeto `name` de la salida contendrá un valor booleano para cada cadena `value`. Para asegurarse de que solo se selecciona un botón en un grupo, conviértalos en elementos secundarios de un elemento [crowd-radio-group](sms-ui-template-crowd-radio-group.md) y utilice diferentes valores de nombre. ### valor Nombre de propiedad para el valor booleano del elemento. Si no se especifica, usa "on" como valor predeterminado; por ejemplo, `{ "": { "": } }`. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-radio-group](sms-ui-template-crowd-radio-group.md) + **Elementos secundarios**: ninguno ## Output Genera un objeto con el siguiente patrón: `{ "": { "": } }`. Si utiliza los botones fuera de un elemento [crowd-radio-group](sms-ui-template-crowd-radio-group.md) pero con la misma cadena `name` y diferentes cadenas `value`, el objeto de nombre contendrá un valor booleano para cada cadena `value`. Para asegurarse de que solo se selecciona uno de un grupo de botones, conviértalos en elementos secundarios de un elemento [crowd-radio-group](sms-ui-template-crowd-radio-group.md) y use diferentes valores de nombre. **Example Resultado de ejemplo de este elemento** ``` [ { "btn1": { "yes": true }, "btn2": { "no": false } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-radio-group Grupo de botones de opción. Solo se puede seleccionar un botón de opción en el grupo. Si se selecciona un botón de opción, se desactivará cualquier botón de opción que se haya elegido previamente en el mismo grupo. Para obtener un ejemplo de una plantilla de interfaz de usuario personalizada que utiliza el elemento `crowd-radio-group`, consulte esta [plantilla personalizada de trabajo de etiquetado de reconocimiento de entidades](https://github.com/aws-samples/amazon-sagemaker-ground-truth-task-uis/blob/master/text/named-entity-recognition-with-additional-classification.liquid.html). Vea un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/KKawjPJ). A continuación se muestra un ejemplo de la sintaxis que puede utilizar con el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Instructions

Lorem ipsum...

Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Option 1

Nulla facilisi morbi tempus iaculis urna. Orci dapibus ultrices in iaculis nunc sed augue lacus.

Option 2

Ultrices vitae auctor eu augue ut. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.

Question

Which do you agree with?

Option 1

Option 2

Why did you choose this answer?

``` ## Atributos Este elemento no admite atributos especiales. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [crowd-radio-button](sms-ui-template-crowd-radio-button.md) ## Output Genera una matriz de objetos que representa los elementos [crowd-radio-button](sms-ui-template-crowd-radio-button.md) que contiene. **Example Ejemplo de salida de elementos** ``` [ { "btn1": { "yes": true }, "btn2": { "no": false } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-semantic-segmentation Widget para segmentar una imagen y asignar una etiqueta a cada segmento de imagen. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/LYxEKEb). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Read the task carefully and inspect the image.
Read the options and review the examples provided to understand more about the labels.
Choose the appropriate label that best suits the image.

Use the tools to label the requested items in the image

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header El texto que se muestra por encima de la imagen. Por lo general, es una pregunta o instrucciones sencillas para el trabajador. ### initial-value Objeto JSON que contiene las asignaciones de color de un trabajo anterior de segmentación semántica y un vínculo a la salida de imagen superpuesta por el trabajo anterior. Incluya esto cuando desee que un trabajador humano verifique los resultados de un trabajo de etiquetado anterior y, si es necesario, lo ajuste. El atributo se parecería al código siguiente: ``` initial-value='{ "labelMappings": { "Bird": { "color": "#ff7f0e" }, "Cat": { "color": "#2ca02c" }, "Cow": { "color": "#d62728" }, "Dog": { "color": "#1f77b4" } }, "src": {{ "S3 file URL for image" | grant_read_access }} }' ``` Cuando se utilizan los [tipos de tareas integrados](https://docs.aws.amazon.com/sagemaker/latest/dg/sms-task-types.html) de Ground Truth con [consolidación de anotaciones](https://docs.aws.amazon.com/sagemaker/latest/dg/sms-annotation-consolidation.html) (en los que más de un trabajador etiqueta una sola imagen), las asignaciones de etiquetas se incluyen en los registros de salida de cada trabajador; sin embargo, el resultado general se representa como `internal-color-map` en los resultados consolidados. Puede convertir `internal-color-map` en `label-mappings` en una plantilla personalizada utilizando el lenguaje de plantillas Liquid: ``` initial-value="{ 'src' : '{{ task.input.manifestLine.label-attribute-name-from-prior-job| grant_read_access }}', 'labelMappings': { {% for box in task.input.manifestLine.label-attribute-name-from-prior-job-metadata.internal-color-map %} {% if box[1]['class-name'] != 'BACKGROUND' %} {{ box[1]['class-name'] | to_json }}: { 'color': {{ box[1]['hex-color'] | to_json }} }, {% endif %} {% endfor %} } }" ``` ### etiquetas Matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a un segmento de la imagen. ### name El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario. ### src La dirección URL de la imagen que se va a segmentar. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [full-instructions](#semantic-segmentation-regions-full-instructions), [short-instructions](#semantic-segmentation-regions-short-instructions) ## Regions Las regiones siguientes son compatibles con este elemento. ### full-instructions Instrucciones generales sobre cómo segmentar imágenes. ### short-instructions Instrucciones importantes específicas de la tarea que se muestran en un lugar destacado. ## Salida La siguiente salida es compatible con este elemento. ### labeledImage Objeto JSON que contiene un PNG con codificación Base64 de las etiquetas. ### labelMappings Objeto JSON que contiene objetos denominados con etiquetas de segmentación. + **color**: el valor hexadecimal del color RGB de la etiqueta en el PNG `labeledImage`. ### initialValueModified Valor booleano que indica si se han modificado los valores iniciales. Solo se incluye cuando la salida proviene de una tarea de ajuste. ### inputImageProperties Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades. + **altura**: la altura de la imagen en píxeles. + **ancho**: el ancho de la imagen en píxeles. **Example : salidas de ejemplo de los elementos** A continuación se muestra un ejemplo de resultado para este elemento. ``` [ { "annotatedResult": { "inputImageProperties": { "height": 533, "width": 800 }, "labelMappings": { "": { "color": "#ff7f0e" }, "": { "color": "#2ca02c" }, "": { "color": "#1f77b4" } }, "labeledImage": { "pngImageData": "" } } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-slider Barra con un botón deslizante que permite a un trabajador seleccionar un valor de un intervalo de valores moviendo el botón. El control deslizante es excelente para configuraciones que reflejen niveles de intensidad, como, por ejemplo, volumen, brillo o saturación de color. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/RwKNzWL). A continuación se muestra un ejemplo de una plantilla de topografía que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Provide a brief instruction here

Provide more detailed instructions here

Include additional information

Provide an example of a good answer here

Explain why it's a good answer

Provide an example of a bad answer here

Explain why it's a bad answer

What is your favorite color for a bird?

Check this box if you like birds

On a scale of 1-10, how much do you like birds?

Write a short essay describing your favorite bird

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### disabled Conmutador booleano que, si está presente, muestra deshabilitado el control deslizante. ### editable Un modificador booleano que, si está presente, muestra un up/down botón que se puede elegir para seleccionar el valor. Seleccionar el valor mediante el up/down botón es una alternativa a seleccionar el valor moviendo la perilla del control deslizante. El botón del control deslizante se moverá en sincronización con las opciones de botón hacia arriba o hacia abajo. ### max Número que especifica el valor máximo del control deslizante. ### min Número que especifica el valor mínimo del control deslizante. ### name Cadena que se utiliza para identificar la respuesta enviada por el trabajador. Este valor coincidirá con una clave del objeto JSON que especifica la respuesta. ### pin Conmutador booleano que, si está presente, muestra el valor actual por encima del botón cuando este se mueve. ### obligatorio Conmutador booleano que, si está presente, requiere que el trabajador proporcione información. ### secondary-progress Cuando se utiliza con un atributo CSS `crowd-slider-secondary-color`, la barra de progresión estará coloreada hasta el punto representado por el `secondary-progress`. Por ejemplo, si este representara la progresión en un vídeo en streaming, `value` representaría en qué punto de la escala de tiempo del vídeo se encuentra el espectador. El valor `secondary-progress` representaría el punto de la escala de tiempo en el que el vídeo se había almacenado en búfer. ### paso Número que especifica la diferencia entre los valores seleccionables del control deslizante. ### valor Un elemento preestablecido que se convierte en valor predeterminado si el trabajador no proporciona entrada. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-tab Componente diseñado para verse como una pestaña con información debajo. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en. [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/dyNPBGW) A continuación se muestra un ejemplo de una plantilla que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Image

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.

Description

Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.

Foo Bar Some button

Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. Pellentesque nulla ipsum ante quisque quam augue. Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros.

Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tempus egestas sed sed risus.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### header Texto que aparece en la pestaña. Normalmente se trata de algún tipo de nombre descriptivo breve indicativo de la información contenida debajo de la pestaña. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-tabs](sms-ui-template-crowd-tabs.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-tabs Contenedor para información en pestañas. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/ZELYdWz). A continuación se muestra un ejemplo de una plantilla que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Image

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.

Description

Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.

Foo Bar Some button

Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tempus egestas sed sed risus.

``` ## Atributos Este elemento no tiene atributos. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: [crowd-tab](sms-ui-template-crowd-tab.md) ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-text-area Campo para entrada de texto. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/ZELYdOz). A continuación se muestra un ejemplo de una plantilla Liquid diseñada para transcribir clips de audio que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Instructions

Transcribe the audio

Ignore "umms", "hmms", "uhs" and other non-textual phrases

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### allowed-pattern Expresión regular que se utiliza con el atributo *auto-validate* para pasar por alto los tipos de caracteres no coincidentes como tipos de trabajadores. ### auto-focus Conmutador booleano que, si está presente, pone el cursor en este elemento en carga para que los usuarios puedan comenzar a escribir inmediatamente sin tener que hacer clic en el elemento. ### auto-validate Conmutador booleano que, si está presente, activa la validación de entrada. El comportamiento del validador se puede modificar mediante los atributos *error-message* y *allowed-pattern*. ### char-counter Conmutador booleano que, si está presente, pone un pequeño campo de texto bajo la esquina inferior derecha del elemento, en la que se muestra la cantidad de caracteres que hay dentro del elemento. ### disabled Conmutador booleano que, si está presente, muestra deshabilitada el área de entrada. ### error-message Texto que se va a mostrar debajo del campo de entrada, en el lado izquierdo, si se produce un error de validación. ### etiqueta Cadena que se muestra dentro de un campo de texto. Este texto se reduce y se eleva por encima de un campo de texto cuando el trabajador comienza a escribir en el campo o cuando el atributo *value* está establecido. ### max-length Número entero que especifica el número máximo de caracteres permitido por el elemento. No se tendrán en cuenta los caracteres escritos o pegados que superen dicho número máximo. ### max-rows Un entero que especifica el número máximo de filas de texto que se permiten dentro de a crowd-text-area. Normalmente el elemento se expande para abarcar nuevas filas. Si max-rows se establece y el número de filas lo supera, el contenido se desplaza hacia arriba, fuera de la vista, y aparece un control de la barra de desplazamiento. ### name Cadena que se utiliza para representar los datos del elemento en la salida. ### marcador de posición Cadena que se presenta al usuario como marcador de posición. Desaparece después de que el usuario pone algo en el área de entrada. ### rows Número entero que especifica la altura del elemento en filas de texto. ### valor Un elemento preestablecido que se convierte en valor predeterminado si el trabajador no proporciona entrada. El elemento preestablecido aparece en un cuadro de texto. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Output Este elemento devuelve el `name` como un nombre de propiedad y el contenido de texto del elemento como el valor. Los retornos de carro del texto se representan como `\n`. **Example Resultado de ejemplo de este elemento** ``` [ { "textInput1": "This is the text; the text that\nmakes the crowd go wild." } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-toast Notificación sutil que aparece temporalmente en la pantalla. Solo se ve un crowd-toast. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/ExZaBgK). A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

Find the official website for: {{ task.input.company }}

Do not give Yelp pages, LinkedIn pages, etc.

Include the http:// prefix from the website

This is a message that you want users to see when opening the template. This message will disappear in 10 seconds.

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### duración Número que especifica el tiempo, en milisegundos, que la notificación se ve en la pantalla. ### text El texto que se muestra en la notificación. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) # crowd-toggle-button Un botón que actúa como un ON/OFF conmutador y cambia de estado. Vea un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd. [CodePen](https://codepen.io/sagemaker_crowd_html_elements/pen/XWpJLNm) En el ejemplo siguiente se muestran diferentes formas de utilizar para utilizar el elemento HTML ``. Copie el siguiente código y guárdelo en un archivo con la extensión `.html`. Abra el archivo en cualquier navegador para obtener una vista previa e interactuar con esta plantilla. ```

``` ## Atributos Los siguientes atributos son compatibles con este elemento. ### checked Conmutador booleano que, si está presente, muestra el botón en la posición de encendido. ### disabled Conmutador booleano que, si está presente, muestra el botón como deshabilitado y evita que se hagan conmutaciones. ### invalid Cuando está en la posición de desactivado, un botón que use este atributo se visualizará con un color de alerta. El estándar es rojo, pero se puede cambiar en CSS. Cuando esté en la posición de activado, el botón se mostrará en el mismo color que otros botones que estén en la posición de activado. ### name Cadena que se utiliza para identificar la respuesta enviada por el trabajador. Este valor coincide con una clave del objeto JSON que especifica la respuesta. ### obligatorio Conmutador booleano que, si está presente, requiere que el trabajador proporcione información. ### valor Valor que se utiliza en la salida como nombre de propiedad para el estado booleano del elemento. Toma "on" como valor predeterminado si no se proporciona. ## Jerarquía de elementos Este elemento tiene los siguientes elementos principales y secundarios. + **Elementos principales**: [crowd-form](sms-ui-template-crowd-form.md) + **Elementos secundarios**: ninguno ## Output Este elemento devuelve `name` como nombre de un objeto, que contiene el elemento `value` como nombre de propiedad y el estado del elemento como valor booleano para la propiedad. Si no se especifica ningún valor para el elemento, el nombre de la propiedad toma de forma predeterminada el valor "on". **Example Resultado de ejemplo de este elemento** ``` [ { "theToggler": { "on": true } } ] ``` ## Véase también Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) ## Crowd HTML Elements V2 Crowd HTML V2 Elements presenta capacidades de etiquetado mejoradas diseñadas para apoyar a los trabajadores, con nuevas características adaptadas a los casos de uso de entrenamiento de modelos de GenAI. Estos elementos V2 son compatibles con los Crowd HTML Elements crowd-form, short-instructions, crowd-button, crowd-tabs y crowd-tab. Si utiliza otros elementos con elementos V2, la aplicación de anotaciones no funcionará correctamente. ### crowd-text-ranking Widget para que los trabajadores deslicen y clasifiquen diversas entradas de texto en función de las dimensiones que especifique. Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements_2/pen/ZYGqBPQ). ```

Hello these are my instructions 1

Hello these are my instructions 2

Hello these are my instructions 3

``` #### Atributos Este elemento admite los siguientes atributos. ##### text El texto o la referencia de S3 al texto al que se hace referencia al clasificar las respuestas. ##### ordinal-ranking-dimensions Matriz obligatoria del objeto `ordinal-ranking-dimensions`, que especifica la dimensión en la que se van a clasificar las respuestas. Esta dimensión contiene un **nombre** y una propiedad denominada **allowTie**, que determina si un trabajador puede dar a las respuestas la misma clasificación. ##### responses Matriz obligatoria del objeto `ordinal-ranking-dimensions`, que especifica la dimensión en la que se van a clasificar las respuestas. Esta dimensión contiene un **nombre** y una propiedad denominada **allowTie**, que determina si un trabajador puede dar a las respuestas la misma clasificación. ##### name Campo de cadena obligatorio que identifica la respuesta que el trabajador envía. Coincide con una clave del contrato de datos de salida del envío del trabajador. Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md) ### crowd-question-answer-generation Widget para que los trabajadores resalten secciones de texto y asignen pares de pregunta y respuesta según sus instrucciones Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en [CodePen](https://codepen.io/sagemaker_crowd_html_elements_2/pen/zxGmobo). ```

User instructions will be displayed here.

``` #### Atributos Este elemento admite los siguientes atributos. ##### text El texto o la referencia de S3 al texto al que se hace referencia al clasificar las respuestas. ##### min-questions Entero opcional que especifica la cantidad mínima de preguntas que un trabajador tendría que crear durante la tarea. Si no se proporciona, se le pedirá que escriba al menos un par de pregunta y respuesta. ##### max-questions Entero opcional que especifica la cantidad máxima de preguntas que un trabajador puede crear durante la tarea. ##### question-min-words Entero opcional que especifica la cantidad mínima de palabras permitidas en una pregunta. Si no se proporciona, se le pedirá que introduzca al menos una palabra en la pregunta. ##### question-max-words Entero opcional que especifica la cantidad máxima de palabras permitidas en una pregunta. ##### answer-min-words Entero opcional que especifica la cantidad mínima de palabras permitidas en una respuesta. Si no se proporciona, se le pedirá que introduzca al menos una palabra en la respuesta. ##### answer-max-words Entero opcional que especifica la cantidad máxima de palabras permitidas en una respuesta. ##### question-tags Matriz obligatoria de cadenas que especifica las posibles etiquetas que un trabajador puede asignar a un par de pregunta y respuesta. Si esta matriz está vacía, no se muestra el campo de etiquetas de preguntas. ##### allow-custom-question-tags Campo booleano obligatorio que indica si un trabajador puede especificar una etiqueta de pregunta personalizada. ##### name Campo de cadena obligatorio que identifica la respuesta que el trabajador envía. Coincide con una clave del contrato de datos de salida del envío del trabajador. Para obtener más información, consulte lo siguiente. + [Entrena el etiquetado de datos con humanos con Amazon SageMaker Ground Truth](sms.md) + [Referencia de Crowd HTML Elements](sms-ui-template-reference.md)