SageMaker Multitud de elementos HTML

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-alert>. 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.

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

<crowd-form>
  <div id="errorBox"></div>
   
  <crowd-keypoint
    src="{{ task.input.taskObject | grant_read_access }}"
    labels="['Item A', 'Item B', 'Item C']"        
    header="Please locate the centers of each item."
    name="annotatedResult">
    <short-instructions>
      Describe your task briefly here and give examples
    </short-instructions>
    <full-instructions>
      Give additional instructions and good/bad examples here
    </full-instructions>   
  </crowd-keypoint>
</crowd-form>

<script>
  var num_obj = 1;

  document.querySelector('crowd-form').onsubmit = function(e) {
    const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints;
    const labels = keypoints.map(function(p) {
      return p.label;
    });

    // 1. Make sure total number of keypoints is correct.
    var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels");

    original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\"");
    var goalNumKeypoints = num_obj*original_num_labels.length;
    if (keypoints.length != goalNumKeypoints) {
      e.preventDefault();
      errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>';
      errorBox.scrollIntoView();
      return;
    }

    // 2. Make sure all labels are unique.
    labelCounts = {};
    for (var i = 0; i < labels.length; i++) {
      if (!labelCounts[labels[i]]) {
        labelCounts[labels[i]] = 0;
      }
      labelCounts[labels[i]]++;
    }
    const goalNumSingleLabel = num_obj;

    const numLabels = Object.keys(labelCounts).length;

    Object.entries(labelCounts).forEach(entry => {
      if (entry[1] != goalNumSingleLabel) {
        e.preventDefault();
        errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>';
        errorBox.scrollIntoView();
      }
    })
  };
</script>

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.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla que utiliza el elemento <crowd-badge>. 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.

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

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Choose the correct category for this image."
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
   
    <short-instructions id="short-instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-badge icon="star" for="short-instructions"/>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

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.

icon

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 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 <crowd-badge>. Reemplace icon-name con el nombre del icono que le gustaría utilizar de este conjunto de iconos.

<crowd-badge icon="icon-name" for="short-instructions"/>

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.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla que utiliza el elemento <crowd-button>. 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.

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

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Please select the correct category for this image"
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-button>
        <iron-icon icon="question-answer"/>
      </crowd-button>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

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 principal si se establece en "submit", o restablece su elemento <crowd-form> 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.

icon

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 de código abierto, que está precargado. Por ejemplo, para insertar el iron-icon search, utilice los siguiente:

<crowd-button>
    <iron-icon icon="search"/>
</crowd-button>

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.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-bounding-box>. 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.

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

<crowd-form>
  <crowd-bounding-box
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Draw bounding boxes around all the cats and dogs in this image"
    labels="['Cat', 'Dog']"
  >
    <full-instructions header="Bounding Box Instructions" >
      <p>Use the bounding box tool to draw boxes around the requested target of interest:</p>
      <ol>
        <li>Draw a rectangle using your mouse over each instance of the target.</li>
        <li>Make sure the box does not cut into the target, leave a 2 - 3 pixel margin</li>
        <li>
          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.
        </li>
        <li>
          Do not include parts of the target that cannot be seen,
          even though you think you can interpolate the whole shape of the target.
        </li>
        <li>Avoid shadows, they're not considered as a part of the target.</li>
        <li>If the target goes off the screen, label up to the edge of the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      Draw boxes around the requested target of interest.
    </short-instructions>
  </crowd-bounding-box>
</crowd-form>  

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.

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.

Regiones

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.

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

[
  {
    "annotatedResult": {
      "boundingBoxes": [
        {
          "height": 401,
          "label": "Dog",
          "left": 243,
          "top": 117,
          "width": 187
        }
      ],
      "inputImageProperties": {
        "height": 533,
        "width": 800
      }
    }
  }
]

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

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

Véase también

Para obtener más información, consulte lo siguiente.

Cuadro con aspecto elevados para mostrar información.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla diseñada para tareas de análisis de opiniones que utiliza el elemento <crowd-card>. 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.

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

<style>
  h3 {
    margin-top: 0;
  }
  
  crowd-card {
    width: 100%;
  }
  
  .card {
    margin: 10px;
  }
  
  .left {
    width: 70%;
    margin-right: 10px;
    display: inline-block;
    height: 200px;
  }
  
  .right {
    width: 20%;
    height: 200px;
    display: inline-block;
  }
</style>

<crowd-form>
  <short-instructions>
    Your short instructions here.
  </short-instructions>
  
  <full-instructions>
    Your full instructions here.
  </full-instructions>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Nothing is great.
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment1" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Everything is great!
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment2" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
</crowd-form>

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.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-checkbox>. 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.

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

<crowd-form>
  
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-checkbox name="website-found">Website Found</crowd-checkbox>

</crowd-form>

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.

  <crowd-checkbox name="checkedBox" value="checked" checked>This box is checked</crowd-checkbox>

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.

  <crowd-checkbox name="disabledCheckBox" value="Disabled" disabled>Cannot be selected</crowd-checkbox>

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.

  <crowd-checkbox name="work_verified" required>Instructions were clear</crowd-checkbox>

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.

Salida

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.

<!-- INPUT -->  
<div><crowd-checkbox name="image_attributes" value="blurry"> Blurry </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="dim"> Too Dim </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="exposed"> Too Bright </crowd-checkbox></div>

//Output with "blurry" and "dim" checked
[
  {
    "image_attributes": {
      "blurry": true,
      "dim": true,
      "exposed": false
    }
  }
]

<!-- INPUT -->
<div><crowd-checkbox name="Stop" value="Red"> Red </crowd-checkbox></div>
<div><crowd-checkbox name="Slow" value="Yellow"> Yellow </crowd-checkbox></div>
<div><crowd-checkbox name="Go" value="Green"> Green </crowd-checkbox></div>

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

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.

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 para automatizar:

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.

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

<crowd-form>
    <crowd-classifier
      name="category"
      categories="{{ task.input.labels | to_json | escape }}"
      header="What type of a document is this?"
    >
      <classification-target>
        <iframe style="width: 100%; height: 600px;" src="{{ task.input.taskObject  | grant_read_access }}" type="application/pdf"></iframe>
      </classification-target>
      
      <full-instructions header="Document Classification Instructions">
        <p>Read the task carefully and inspect the document.</p>
        <p>Choose the appropriate label that best suits the document.</p>
      </full-instructions>

      <short-instructions>
        Please choose the correct category for the document
      </short-instructions>
    </crowd-classifier>
</crowd-form>

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.

Regiones

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.

Salida

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.

[
  {
    "<name>": {
      "label": "<value>"
    }
  }
]

Véase también

Para obtener más información, consulte lo siguiente.

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.

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.

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

<crowd-form>
    <crowd-classifier-multi-select
      name="category"
      categories="['Positive', 'Negative', 'Neutral']"
      header="Select the relevant categories"
      exclusion-category="{ text: 'None of the above' }"
    >
      <classification-target>
        {{ task.input.taskObject }}
      </classification-target>
      
      <full-instructions header="Text Categorization Instructions">
        <p><strong>Positive</strong> sentiment include: joy, excitement, delight</p>
        <p><strong>Negative</strong> sentiment include: anger, sarcasm, anxiety</p>
        <p><strong>Neutral</strong>: neither positive or negative, such as stating a fact</p>
        <p><strong>N/A</strong>: when the text cannot be understood</p>
        <p>When the sentiment is mixed, such as both joy and sadness, choose both labels.</p>
      </full-instructions>

      <short-instructions>
       Choose all categories that are expressed by the text. 
      </short-instructions>
    </crowd-classifier-multi-select>
</crowd-form>

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:

Regiones

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.

Salida

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.

[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

Véase también

Para más información, consulte los siguientes temas:

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.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla que utiliza el elemento <crowd-entity-annotation>. 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.

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

<crowd-entity-annotation
  name="crowd-entity-annotation"
  header="Highlight parts of the text below"
  labels="[{'label': 'person', 'shortDisplayName': 'per', 'fullDisplayName': 'Person'}, {'label': 'date', 'shortDisplayName': 'dat', 'fullDisplayName': 'Date'}, {'label': 'company', 'shortDisplayName': 'com', 'fullDisplayName': 'Company'}]"
  text="Amazon SageMaker Ground Truth helps you build highly accurate training datasets for machine learning quickly."
>
  <full-instructions header="Named entity recognition instructions">
    <ol>
      <li><strong>Read</strong> the text carefully.</li>
      <li><strong>Highlight</strong> words, phrases, or sections of the text.</li>
      <li><strong>Choose</strong> the label that best matches what you have highlighted.</li>
      <li>To <strong>change</strong> a label, choose highlighted text and select a new label.</li>
      <li>To <strong>remove</strong> a label from highlighted text, choose the X next to the abbreviated label name on the highlighted text.</li>
      <li>You can select all of a previously highlighted text, but not a portion of it.</li>
    </ol>
  </full-instructions>

  <short-instructions>
    Apply labels to words or phrases.
  </short-instructions>

    <div id="additionalQuestions" style="margin-top: 20px">
      <h3>
        What is the overall subject of this text?
      </h3>
      <crowd-radio-group>
        <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
        <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
      </crowd-radio-group>
    </div>
</crowd-entity-annotation>

<script>
  document.addEventListener('all-crowd-elements-ready', () => {
    document
      .querySelector('crowd-entity-annotation')
      .shadowRoot
      .querySelector('crowd-form')
      .form
      .appendChild(additionalQuestions);
  });
</script>

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.

[
  {
    label: 'person',
    startOffset: 0,
    endOffset: 16
  },
  ...
]

etiquetas

Una matriz de objetos con formato JSON; cada objeto contiene:

[
  {
    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.

texto

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 y conozca más métodos para controlar el escape.

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Regiones

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.

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

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.

A continuación se muestra un ejemplo de una plantilla Liquid diseñada para la clasificación de imágenes que utiliza el elemento <crowd-fab>. 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.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"></crowd-input>
            <crowd-fab id="button1" icon="report-problem" title="Issue"/>
        </short-instructions>
        
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

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.

icon

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 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 <crowd-fab>. Reemplace icon-name con el nombre del icono que le gustaría utilizar de este conjunto de iconos.

<crowd-fab "id="button1" icon="icon-name" title="Issue"/>

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.

title

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.

Véase también

Para obtener más información, consulte lo siguiente.

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 del tipo "submit" dentro del elemento <crowd-form>, se asociará automáticamente dentro del elemento <crowd-form>.

Vea un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla de clasificación de imágenes que utiliza el elemento <crowd-form>. 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.

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

<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Eventos de elemento

El elemento crowd-form extiende el elemento form HTML estándar y hereda sus eventos, como onclick y onsubmit.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid diseñada para la clasificación de imágenes que utiliza el elemento <crowd-icon-button>. 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.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"/></crowd-input>
            <crowd-icon-button id="button1" icon="report-problem" title="Issue"/>
        </short-instructions>
        
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

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.

icon

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 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 <crowd-icon-button>. Reemplace icon-name con el nombre del icono que le gustaría utilizar de este conjunto de iconos.

<crowd-icon-button id="button1" icon="icon-name" title="Issue"/>

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla de clasificación de imágenes que utiliza el elemento <crowd-image-classifier>. 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.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

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:

<crowd-image-classifier
    name="boundingBoxClassification"
    header="Rate the quality of the annotations based on the background section 
       in the instructions on the left hand side."
    src="https://i.imgur.com/CIPKVJo.jpg"
    categories="['good', 'bad', 'okay']"
    overlay='{
        "boundingBox": {
            labels: ["bird", "cat"], 
            value: [
                {
                  height: 284,
                  label: "bird",
                  left: 230,
                  top: 974,
                  width: 223
                },
                {
                  height: 69,
                  label: "bird",
                  left: 79,
                  top: 889,
                  width: 247
                }
            ]
        },
    }'
> ... </crowd-image-classifier>

Una tarea de verificación de segmentación semántica utilizaría el valor overlay como sigue:

<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify'
  overlay='{
    "semanticSegmentation": {
      "labels": ["Cat", "Dog", "Bird", "Cow"],
      "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#2acf59"
        }
      },
      "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

Una tarea de segmentación de instancias utilizaría el valor overlay como sigue:

<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify instances of each category'
  overlay='{
    "instanceSegmentation": {
       "labels": ["Cat", "Dog", "Bird", "Cow"],
       "instances": [
        {
         "color": "#2ca02c",
         "label": "Cat"
        },
        {
         "color": "#1f77b4",
         "label": "Cat"
        },
        {
         "color": "#d62728",
         "label": "Dog"
        }
       ],
       "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

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.

Regiones

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.

Salida

El resultado de este elemento es una cadena que especifica uno de los valores definidos en el atributo categories del elemento <crowd-image-classifier>.

[
  {
    "<name>": {
      "label": "<value>"
      "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.

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.

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.

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

<crowd-form>
  <crowd-image-classifier-multi-select
    name="animals"
    categories="['Cat', 'Dog', 'Horse', 'Pig', 'Bird']"
    src="https://images.unsplash.com/photo-1509205477838-a534e43a849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1998&q=80"
    header="Please identify the animals in this image"
    exclusion-category="{ text: 'None of the above' }"
  >
    <full-instructions header="Classification Instructions">
      <p>If more than one label applies to the image, select multiple labels.</p>
      <p>If no labels apply, select <b>None of the above</b></p>
    </full-instructions>

    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label(s) that best suit the image.</p>
    </short-instructions>
  </crowd-image-classifier-multi-select>
</crowd-form>

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:

Regiones

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.

Salida

La salida de este elemento es una cadena que especifica uno o más de los valores definidos en el atributo categories del elemento <crowd-image-classifier-multi-select>.

[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

Véase también

Para más información, consulte los siguientes temas:

Cuadro que acepta datos de entrada.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-input>. 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.

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

<crowd-form>
  <img style="max-width: 35vw; max-height: 50vh" src="{{ task.input.taskObject | grant_read_access }}">
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>

  <short-instructions>
    Your custom quick instructions and examples
  </short-instructions>

  <full-instructions>
    Your custom detailed instracutions and more examples
  </full-instructions>
</crowd-form>

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

Toma una cadena para establecer el comportamiento input-type de HTML5 para 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.

Salida

Proporciona una cadena name como nombre de la propiedad y el texto que se ha especificado en el campo como su valor.

<crowd-input name="tag1" label="Word/phrase 1"></crowd-input>
<crowd-input name="tag2" label="Word/phrase 2"></crowd-input>
<crowd-input name="tag3" label="Word/phrase 3"></crowd-input>

[
  {
    "tag1": "blue",
    "tag2": "red"
  }
]

Véase también

Para obtener más información, consulte lo siguiente.

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 Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-instance-segmentation>. 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.

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

<crowd-form>
  <crowd-instance-segmentation
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label all instances of the requested items in the image</p>
    </short-instructions>
  </crowd-instance-segmentation>
</crowd-form>

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

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-instance-segmentation
    id="annotator"
    name="myTexts"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Click Instructions to add new labels."
    labels="['placeholder']"
  >
    <short-instructions>
      <h3>Add a label to describe each type of object in this image.</h3>
      <h3>Cover each instance of each object with a segmentation mask.</h3>
      <br>
      <h3>
        Add new label
      </h3>
      <crowd-input name="_customLabel" id="customLabel"></crowd-input>
      <crowd-button id="addLabel">Add</crowd-button>
      
      <br><br><br>
      <h3>
      Manage labels
      </h3>
      <div id="labelsSection"></div>
    </short-instructions>
    
    <full-instructions>
      Describe your task in more detail here.
    </full-instructions>
  </crowd-instance-segmentation>
</crowd-form>

<script>
  document.addEventListener('all-crowd-elements-ready', function(event) {
    document.querySelector('crowd-instance-segmentation').labels = [];  
  });
  
  function populateLabelsSection() {
    labelsSection.innerHTML = '';
    annotator.labels.forEach(function(label) {
      const labelContainer = document.createElement('div');
      labelContainer.innerHTML = label + ' <a href="javascript:void(0)">(Delete)</a>';
      labelContainer.querySelector('a').onclick = function() {
        annotator.labels = annotator.labels.filter(function(l) {
          return l !== label;
        });
        populateLabelsSection();
      };
      labelsSection.appendChild(labelContainer);
    });
  }

  addLabel.onclick = function() {
    annotator.labels = annotator.labels.concat([customLabel.value]);
    customLabel.value = null;
    
    populateLabelsSection();
  };
</script>

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.

Regiones

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.

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "instances": [
        {
          "color": "#1f77b4",
          "label": "<Label 1>": 
        },
        {
          "color": "#2ca02c",
          "label": "<Label 1>": 
        },
        {
          "color": "#ff7f0e",
          "label": "<Label 3>": 
        },
      ],
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utilizó el elemento <crowd-instructions>. 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.

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

<crowd-form>
  	<crowd-instructions link-text="View instructions" link-type="button">
		  <short-summary>
		    <p>Given an image, write three words or short phrases that summarize its contents.</p>
		  </short-summary>
		  <detailed-instructions>
		    <p>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.</p>
		  </detailed-instructions>
		  <positive-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	<ul>
		    		<li>Highway</li>
		    		<li>Cars</li>
		    		<li>Gas station</li>
		    	</ul>
		    </p>
		  </positive-example>
		  <negative-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	These are not specific enough:
		    	<ol>
		    		<li>Trees</li>
		    		<li>Outside</li>
		    		<li>Daytime</li>
		    	</ol>
		    </p>
		  </negative-example>
	</crowd-instructions>
    <p><strong>Instructions: </strong>Given an image, write three words or short phrases that summarize its contents.</p>
    <p>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.</p>
	<p>View the instructions for detailed instructions and examples.</p>
	<p><img style="max-width: 100%; max-height: 100%" src="{{ task.input.taskObject | grant_read_access }}"></p>
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>
</crowd-form>

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.

Regiones

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.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-keypoint>. 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.

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

<crowd-form>
  <div id="errorBox"></div>
   
  <crowd-keypoint
    src="{{ task.input.taskObject | grant_read_access }}"
    labels="['Item A', 'Item B', 'Item C']"        
    header="Please locate the centers of each item."
    name="annotatedResult">
    <short-instructions>
      Describe your task briefly here and give examples
    </short-instructions>
    <full-instructions>
      Give additional instructions and good/bad examples here
    </full-instructions>   
  </crowd-keypoint>
</crowd-form>

<script>
  var num_obj = 1;

  document.querySelector('crowd-form').onsubmit = function(e) {
    const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints;
    const labels = keypoints.map(function(p) {
      return p.label;
    });

    // 1. Make sure total number of keypoints is correct.
    var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels");

    original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\"");
    var goalNumKeypoints = num_obj*original_num_labels.length;
    if (keypoints.length != goalNumKeypoints) {
      e.preventDefault();
      errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>';
      errorBox.scrollIntoView();
      return;
    }

    // 2. Make sure all labels are unique.
    labelCounts = {};
    for (var i = 0; i < labels.length; i++) {
      if (!labelCounts[labels[i]]) {
        labelCounts[labels[i]] = 0;
      }
      labelCounts[labels[i]]++;
    }
    const goalNumSingleLabel = num_obj;

    const numLabels = Object.keys(labelCounts).length;

    Object.entries(labelCounts).forEach(entry => {
      if (entry[1] != goalNumSingleLabel) {
        e.preventDefault();
        errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>';
        errorBox.scrollIntoView();
      }
    })
  };
</script>

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

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.

Regiones

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.

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

keypoints

Matriz de objetos JSON que contienen las coordenadas y la etiqueta de un punto clave. Cada objeto contiene las siguientes propiedades.

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

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-line>. 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.

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

<crowd-form>
  <crowd-line
    name="crowdLine"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <short-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>Draw a line on each objects that the label applies to.</p>
    </short-instructions>

    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image. 
        <p>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.
        </p>
        <p>Each line is defined by a starting and ending point. Carefully
        place the starting and ending points on the boundaries of the object.</p>
    </full-instructions>
    
  </crowd-line>
</crowd-form>

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:

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.

Regiones

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.

Salida

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

lines

Una matriz JSON que contiene objetos con las etiquetas y los vértices de las líneas.

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

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.

A continuación se muestra un ejemplo de la sintaxis que puede utilizar con el elemento <crowd-modal>. 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.

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

<crowd-modal
link-text = "See Examples"
link-type = "button">
Example Modal Text</crowd-modal>

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.

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-polygon>. 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.

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

<crowd-form>
  <crowd-polygon
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Draw a polygon around each of the requested target(s) of interest"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Polygon instructions">
      <ul>
        <li>Make the polygon tight around the object</li>
        <li>You need to select a label before starting a polygon</li>
        <li>You will need to select a label again after completing a polygon</li>
        <li>To select a polygon, you can click on its borders</li>
        <li>You can start drawing a polygon from inside another polygon</li>
        <li>You can undo and redo while you're drawing a polygon to go back and forth between points you've placed</li>
        <li>You are prevented from drawing lines that overlap other lines from the same polygon</li>
      </ul>
    </full-instructions>

    <short-instructions>
      <p>Draw a polygon around each of the requested target(s) of interest</p>
      <p>Make the polygon tight around the object</p>
    </short-instructions>
  </crowd-polygon>
</crowd-form>

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.

initial-value = 
  '[
     {
     "label": "dog",
     "vertices": 
       [
         {
            "x": 570,
            "y": 239
         },
        ... 
         {
            "x": 759,
            "y": 281
         }
       ]
     }
  ]'

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Regiones

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.

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

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

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

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

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-polyline>. 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.

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

<crowd-form>
  <crowd-polyline
    name="crowdPolyline"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>Draw a polyline around the boundaries of all objects
        that the label applies to.</p>
        <p>Use the <b>Enter</b> key to complete a polyline.</p>
        <p>Make sure that the polyline fits tightly around the boundary
        of the object.</p>
    </full-instructions>

    <short-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Review the tool guide to learn how to use the polyline tool.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>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.</p>
        <p>After you place the final point on the polyline, press <b>Enter</b> on your
        keyboard to complete the polyline.</p>

    </short-instructions>
  </crowd-polyline>
</crowd-form>

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:

 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.

Regiones

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.

Salida

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

polylines

Una matriz JSON que contiene objetos con las etiquetas y los vértices de las polilíneas.

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

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.

A continuación se muestra un ejemplo de la sintaxis que puede utilizar con el elemento <crowd-radio-button>. 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.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
<crowd-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

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.

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 <input type="radio"> para crear botones de radio y añada la etiqueta required. El atributo name de todos los elementos <input> 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.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <p>Select an animal type:</p>
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1539&q=80" style="height: 500; width: 400;"/>
<br><br>
<div>
  <input type="radio" id="cat" name="animal-type" value="cat" required>
  <label for="cat">Cat</label>
</div>
<div>
  <input type="radio" id="dog" name="animal-type" value="dog">
  <label for="dog">Dog</label>
</div>
<div>
  <input type="radio" id="unknown" name="animal-type" value="unknown">
  <label for="unknown">Unknown</label>
</div>
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </short-instructions>
</crowd-form>

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.

valor

Nombre de propiedad para el valor booleano del elemento. Si no se especifica, usa "on" como valor predeterminado; por ejemplo, { "<name>": { "<value>": <true or false> } }.

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Salida

Genera un objeto con el siguiente patrón: { "<name>": { "<value>": <true or false> } }. Si utiliza los botones fuera de un elemento crowd-radio-group 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 y use diferentes valores de nombre.

[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

Véase también

Para obtener más información, consulte lo siguiente.

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.

Vea un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML de Crowd en CodePen.

A continuación se muestra un ejemplo de la sintaxis que puede utilizar con el elemento <crowd-radio-group>. 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.

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

<style>
	body {
		padding-left: 20px;
		margin-bottom: 20px;
	}
	#outer-container {
	    display: flex;
	    justify-content: space-around;
	    max-width: 900px;
	    margin-left: 100px;
	}
	.left-container {
    	margin-right: auto;
    	padding-right: 50px;
	}
	.right-container {
    	margin-left: auto;
    	padding-left: 50px;
	}
	#vertical-separator {
	    border: solid 1px #d5dbdb;
	}
</style>

<crowd-form>
    <div>
        <h1>Instructions</h1>
	Lorem ipsum...
    </div>
    <div>
        <h2>Background</h2>
    	<p>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.</p>
    </div>
    <div id="outer-container">
	<span class="left-container">
	    <h2>Option 1</h2>
	    <p>Nulla facilisi morbi tempus iaculis urna. Orci dapibus ultrices in iaculis nunc sed augue lacus.</p>
	</span>
	<span id="vertical-separator"></span>
	<span class="right-container">
	    <h2>Option 2</h2>
	    <p>Ultrices vitae auctor eu augue ut. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.</p>
	</span>
    </div>
    <div>
        <h2>Question</h2>
    	<p>Which do you agree with?</p>
	<crowd-radio-group>
	    <crowd-radio-button name="option1" value="Option 1">Option 1</crowd-radio-button>
	    <crowd-radio-button name="option2" value="Option 2">Option 2</crowd-radio-button>
	</crowd-radio-group>

    	<p>Why did you choose this answer?</p>
	<crowd-text-area name="explanation" placeholder="Explain how you reached your conclusion..."></crowd-text-area>
    </div>
</crowd-form>

Atributos

Este elemento no admite atributos especiales.

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Salida

Genera una matriz de objetos que representa los elementos crowd-radio-button que contiene.

[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-semantic-segmentation>. 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.

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

<crowd-form>
  <crowd-semantic-segmentation
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label the requested items in the image</p>
    </short-instructions>
  </crowd-semantic-segmentation>
</crowd-form>

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 de Ground Truth con consolidación de anotaciones (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.

Regiones

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.

inicial ValueModified

Valor booleano que indica si se han modificado los valores iniciales. Solo se incluye cuando la salida proviene de una tarea de ajuste.

entrada ImageProperties

Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "labelMappings": {
        "<Label 2>": {
          "color": "#ff7f0e"
        },
        "<label 3>": {
          "color": "#2ca02c"
        },
        "<label 1>": {
          "color": "#1f77b4"
        }
      },
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

Véase también

Para obtener más información, consulte lo siguiente.

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.

A continuación se muestra un ejemplo de una plantilla de topografía que utiliza el elemento <crowd-slider>. 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.

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

<crowd-form>
<crowd-instructions link-text="View instructions" link-type="button">
  <short-summary>
    <p>Provide a brief instruction here</p>
  </short-summary>

  <detailed-instructions>
    <h3>Provide more detailed instructions here</h3>
    <p>Include additional information</p>
  </detailed-instructions>

  <positive-example>
    <p>Provide an example of a good answer here</p>
    <p>Explain why it's a good answer</p>
  </positive-example>

  <negative-example>
    <p>Provide an example of a bad answer here</p>
    <p>Explain why it's a bad answer</p>
  </negative-example>
</crowd-instructions>

<div>
  <p>What is your favorite color for a bird?</p>
  <crowd-input name="favoriteColor" placeholder="example: pink" required></crowd-input>
</div>

<div>
  <p>Check this box if you like birds</p>
  <crowd-checkbox name="likeBirds" checked="true" required></crowd-checkbox>
</div>

<div>
  <p>On a scale of 1-10, how much do you like birds?</p>
  <crowd-slider name="howMuch" min="1" max="10" step="1" pin="true" required></crowd-slider>
</div>

<div>
  <p>Write a short essay describing your favorite bird</p>
  <crowd-text-area name="essay" rows="4" placeholder="Lorem ipsum..." required></crowd-text-area>
</div>
</crowd-form>

Atributos

Los siguientes atributos son compatibles con este elemento.

disabled

Conmutador booleano que, si está presente, muestra deshabilitado el control deslizante.

editable

Conmutador booleano que, si está presente, muestra un botón hacia arriba o hacia abajo que se puede elegir para seleccionar el valor.

La selección de un valor con el botón hacia arriba o hacia abajo es una alternativa a seleccionar dicho valor moviendo el botón 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.

Véase también

Para obtener más información, consulte lo siguiente.

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 Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla que utiliza el elemento <crowd-tab>. 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.

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

<crowd-form>
  <crowd-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        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. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

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.

Véase también

Para obtener más información, consulte lo siguiente.

Contenedor para información en pestañas.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla que utiliza el elemento <crowd-tabs>. 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.

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

<crowd-form>
  <crowd-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        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. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

Atributos

Este elemento no tiene atributos.

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Véase también

Para obtener más información, consulte lo siguiente.

Campo para entrada de texto.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen.

A continuación se muestra un ejemplo de una plantilla Liquid diseñada para transcribir clips de audio que utiliza el elemento <crowd-text-area>. 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.

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

<crowd-form>
  <audio controls>
      <source src="{{ task.input.taskObject | grant_read_access }}" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  <h3>Instructions</h3>
  <p>Transcribe the audio</p>
  <p>Ignore "umms", "hmms", "uhs" and other non-textual phrases</p>
  <crowd-text-area name="transcription" rows="4"></crowd-text-area>
</crowd-form>

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.

Salida

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.

[
  {
    "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.

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.

A continuación se muestra un ejemplo de una plantilla Liquid que utiliza el elemento <crowd-toast>. 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.

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

<crowd-form>
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-toast duration="10000" opened>
    This is a message that you want users to see when opening the template. This message will disappear in 10 seconds. 
   </crowd-toast>

</crowd-form>

Atributos

Los siguientes atributos son compatibles con este elemento.

duration

Número que especifica el tiempo, en milisegundos, que la notificación se ve en la pantalla.

texto

El texto que se muestra en la notificación.

Jerarquía de elementos

Este elemento tiene los siguientes elementos principales y secundarios.

Véase también

Para obtener más información, consulte lo siguiente.

Botón que actúa como interruptor de encendido/apagado y conmuta un estado.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen.

En el ejemplo siguiente se muestran diferentes formas de utilizar para utilizar el elemento HTML <crowd-toggle-button>. 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.

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

<crowd-form>
  <!--Toggle button without value-->
  <crowd-toggle-button name="toggleButtonWithoutValue"></crowd-toggle-button>

  <!--Toggle button with value-->
  <crowd-toggle-button name="toggleButtonWithValue" value="someValue"></crowd-toggle-button>

  <!--Toggle button disabled-->
  <crowd-toggle-button name="toggleButtonDisabled" disabled></crowd-toggle-button>

  <!--Toggle button marked invalid-->
  <crowd-toggle-button name="toggleButtonInvalid" invalid></crowd-toggle-button>

  <!--Toggle button marked required-->
  <crowd-toggle-button name="toggleButtonRequired" required></crowd-toggle-button>
</crowd-form>

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.

Salida

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

[
  {
    "theToggler": {
      "on": true
    }
  }
]

Véase también

Para obtener más información, consulte lo siguiente.