'{"datos":{"características":[1,2,3,4]}}'

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:

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

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

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

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

etiquetas

Obligatorio. Matriz de cadenas con formato JSON, cada una de las cuales es una etiqueta que un trabajador puede asignar a la línea.

Límite: 10 etiquetas.

label-colors

Opcional. Una matriz de cadenas. Cada cadena es un código hexadecimal (hex) de una etiqueta.

name

Obligatorio. El nombre del widget. Se usa como clave para la entrada del widget en la salida del formulario.

src

Obligatorio. La dirección URL de la imagen en la que se dibujan las polilíneas.

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.

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

polylines

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

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

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

ejemplo : salidas de ejemplo de los elementos

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

 {
    "crowdPolyline": { //This is the name you set for the crowd-polyline
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "polylines": [
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 651,
              "y": 498
            },
            {
              "x": 862,
              "y": 869
            },
            {
              "x": 1449,
              "y": 611
            }
          ]
        },
        {
          "label": "yardline",
          "vertices": [
            {
              "x": 1148,
              "y": 322
            },
            {
              "x": 1705,
              "y": 474
            },
            ,
            {
              "x": 1755,
              "y": 474
            }
          ]
        }
      ]
    }
  }

Véase también

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

• Usa Amazon SageMaker Ground Truth para etiquetar datos

• Referencia de Crowd HTML Elements