crowd-polygon - Amazon SageMaker

crowd-polygon

Widget permettant de dessiner des polygones sur une image et d'attribuer une étiquette à la partie de l'image placée dans chaque polygone.

Consultez un exemple interactif d'un modèle HTML qui utilise cet élément HTML Crowd dans CodePen.

Voici un exemple de modèle Liquid qui utilise l'élément <crowd-polygon>. Copiez le code suivant et enregistrez-le dans un fichier avec l'extension .html. Ouvrez le fichier dans n'importe quel navigateur pour prévisualiser et interagir avec ce modèle.

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

Attributes

Les attributs suivants sont pris en charge par cet élément.

header

Texte à afficher au-dessus de l'image. Il s'agit généralement d'une question ou d'une instruction simple pour l'employé.

labels

Tableau de chaînes au format JSON. Chacune d'elles est une étiquette qu'un employé peut attribuer à la partie de l'image placée dans un polygone.

nom

Nom de ce widget. Il est utilisé en tant que clé pour la saisie du widget dans la sortie du formulaire.

src

L'URL de l'image sur laquelle dessiner des polygones.

initial-value

Tableau d'objets JSON. Chaque objet définit un polygone à dessiner lorsque le composant est chargé. Chaque objet JSON du tableau comprend les propriétés suivantes :

  • label : texte attribué au polygone en tant que partie de la tâche d'étiquetage. Ce texte doit correspondre à l'une des étiquettes définies dans l'attribut labels de l'élément <crowd-polygon>.

  • vertices : tableau d'objets JSON. Chaque objet contient une valeur de coordonnées X et Y d'un point du polygone.

Un attribut initial-value peut ressembler à ceci :

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

Comme les chaînes de caractères JSON se trouvent dans un élément HTML, elles doivent être encadrées par des guillemets simples ou doubles. Dans l'exemple ci-dessus, des guillemets simples sont utilisés pour entourer le fichier JSON et des guillemets doubles sont utilisés dans le fichier JSON lui-même. Si vous devez combiner les guillemets simples et doubles dans votre fichier JSON, remplacez-les par leurs codes d'entité HTML (&quot; pour les guillemets doubles, &#39; pour les guillemets simples) afin de les échapper sans problème.

Hiérarchie des éléments

Les éléments parents et enfants de cet élément sont les suivants :

Régions

Les zones suivantes sont obligatoires :

full-instructions

Instructions générales concernant la procédure de tracé des polygones.

short-instructions

Instructions importantes spécifiques à la tâche qui s'affichent à un endroit bien visible.

Sortie

La sortie suivante est prise en charge par cet élément.

polygons

Tableau d'objets JSON. Chaque objet décrit un polygone qui a été créé par l'employé. Chaque objet JSON du tableau comprend les propriétés suivantes :

  • label : texte attribué au polygone en tant que partie de la tâche d'étiquetage.

  • vertices : tableau d'objets JSON. Chaque objet contient une valeur de coordonnées X et Y d'un point du polygone. L'angle supérieur gauche de l'image possède une valeur de 0,0.

inputImageProperties

Objet JSON qui spécifie les dimensions de l'image en cours d'annotation par l'employé. Cet objet contient les propriétés suivantes.

  • height : hauteur de l'image, en pixels.

  • width : largeur de l'image, en pixels.

Exemple : Exemples de sorties de l'élément

Voici des exemples de sorties issus des scénarios d'utilisation courante pour cet élément.

Une étiquette, un polygone

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

Une étiquette, plusieurs polygones

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

Plusieurs étiquettes, plusieurs polygones

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

Vous pouvez obtenir plusieurs étiquettes, mais seules celles qui sont utilisées apparaissent dans la sortie.

Voir aussi

Pour plus d’informations, consultez les rubriques suivantes.