Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
crowd-polygon
Un widget utilizado para dibujar polígonos en una imagen y asignar una etiqueta a la parte de la imagen que está en cada polígono.
Consulte un ejemplo interactivo de una plantilla HTML que utiliza este elemento HTML Crowd en CodePen
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.
-
etiqueta: el texto asignado al polígono como parte de la tarea de etiquetado. Este texto debe coincidir con una de las etiquetas definidas en el atributo labels del elemento <crowd-polygon>.
-
vértices: una matriz de objetos JSON. Cada objeto contiene un valor de coordenada x e y para un punto en el polígono.
Un atributo initial-value podría tener este aspecto.
initial-value = '[ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, ... { "x": 759, "y": 281 } ] } ]'
Dado que estará dentro de un elemento HTML, la matriz JSON se debe escribir entre comillas simples o dobles. El ejemplo anterior utiliza comillas simples para encapsular la matriz JSON y comillas dobles dentro de la propia matriz. Si tiene que combinar comillas simples y dobles dentro de la matriz JSON, reemplácelas por sus códigos de entidad HTML (" para comilla doble, ' para comilla simple) para aplicarlas correctamente.
Jerarquía de elementos
Este elemento tiene los siguientes elementos principales y secundarios.
-
Elementos principales: crowd-form
-
Elementos secundarios: full-instructions, short-instructions
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.
-
etiqueta: el texto asignado al polígono como parte de la tarea de etiquetado.
-
vértices: una matriz de objetos JSON. Cada objeto contiene un valor de coordenada x e y para un punto en el polígono. La esquina superior izquierda de la imagen es 0,0.
inputImageProperties
Objeto JSON que especifica las dimensiones de la imagen que el trabajador está comentando. Este objeto contiene las siguientes propiedades.
-
altura: la altura de la imagen en píxeles.
-
ancho: el ancho de la imagen en píxeles.
ejemplo : salidas de ejemplo de los elementos
A continuación, se muestran ejemplos de salidas de escenarios de uso habituales para este elemento.
Una sola etiqueta, un solo polígono
{ "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] } ] } } ]
Una sola etiqueta, varios polígonos
[ { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] }, { "label": "dog", "vertices": [ { "x": 870, "y": 278 }, { "x": 908, "y": 446 }, { "x": 1009, "y": 602 }, { "x": 1116, "y": 519 }, { "x": 1174, "y": 498 }, { "x": 1227, "y": 479 }, { "x": 1179, "y": 405 }, { "x": 1179, "y": 337 } ] } ] } } ]
Varias etiquetas, varios polígonos
[ { "annotatedResult": { "inputImageProperties": { "height": 853, "width": 1280 }, "polygons": [ { "label": "dog", "vertices": [ { "x": 570, "y": 239 }, { "x": 603, "y": 513 }, { "x": 823, "y": 645 }, { "x": 901, "y": 417 }, { "x": 759, "y": 281 } ] }, { "label": "cat", "vertices": [ { "x": 870, "y": 278 }, { "x": 908, "y": 446 }, { "x": 1009, "y": 602 }, { "x": 1116, "y": 519 }, { "x": 1174, "y": 498 }, { "x": 1227, "y": 479 }, { "x": 1179, "y": 405 }, { "x": 1179, "y": 337 } ] } ] } } ]
Puede tener disponibles numerosas etiquetas, pero solo se muestran en la salida las que se usan.
Véase también
Para obtener más información, consulte lo siguiente.
