crowd-line

Un widget para dibujar líneas en una imagen. Cada línea está asociada a una etiqueta y los datos de salida indicarán los puntos inicial y final de cada línea.

Consulte un ejemplo interactivo de una plantilla HTML que utiliza este Crowd HTML Element 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 obtener más ejemplos, consulte este repositorio de GitHub.

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

• etiqueta: el texto asignado a la línea como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo labels del elemento <crowd-line>.

• vértices: las coordenadas x e y de los píxeles del punto inicial y final de la línea, en relación con la esquina superior izquierda de la imagen.

initial-value="{
    lines: [
    {
        label: 'sideline', // label of this line annotation
        vertices:[         // an array of vertices which decide the position of the line
        {
            x: 84,
            y: 110
        },
        {
            x: 60,
            y: 100
        }
        ]
    },
    {
        label: 'yardline',
        vertices:[       
        {
            x: 651,
            y: 498
        },
        {
            x: 862,
            y: 869
        }
        ]
    }
   ]
}"

Las líneas definidas mediante la propiedad initial-value se pueden ajustar. Se registra si la respuesta de un trabajador se ajustó o no mediante un booleano initialValueModified en el resultado de la respuesta del trabajador.

labels

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.

nombre

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.

• Elementos principales: crowd-form

• Elementos secundarios: short-instructions, full-instructions

Salida

inputImageProperties

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

• altura: la altura de la imagen en píxeles.

• ancho: el ancho de la imagen en píxeles.

lines

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

• etiqueta: la etiqueta que se asigna a una línea.

• vértices: las coordenadas x e y de los píxeles del punto inicial y final de la línea, en relación con la esquina superior izquierda de la imagen.

ejemplo : salidas de ejemplo de los elementos

A continuación se muestra un ejemplo de resultado de este elemento.

{
    "crowdLine": { //This is the name you set for the crowd-line
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "lines": [
        {
          "label": "yardline",
          "vertices": [ 
            {
              "x": 58,
              "y": 295
            },
            {
              "x": 1342,
              "y": 398
            }
          ]
        },
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 472,
              "y": 910
            },
            {
              "x": 1480,
              "y": 600
            }
          ]
        }
      ]
    }
  }

Véase también

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

• Utilizar Amazon SageMaker Ground Truth para etiquetar datos

• Referencia de Crowd HTML Elements