crowd-bounding-box - Amazon SageMaker

crowd-bounding-box

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

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-bounding-box>. 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. Pour plus d'exemples, consultez ce référentiel GitHub.

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

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

initial-value

Tableau d'objets JSON. Chaque objet définit un cadre de délimitation lorsque le composant est chargé. Chaque objet JSON du tableau comprend les propriétés suivantes : Les zones de délimitation définies au moyen de la propriété initial-value peuvent être ajustées et si une réponse de travail a été ajustée ou non est suivie via un booléen initialValueModified dans la sortie de réponse de travail.

  • height : hauteur du cadre en pixels.

  • label : texte attribué à la zone 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-bounding-box>.

  • left : distance, en pixels, entre le coin supérieur gauche du cadre et le côté gauche de l'image.

  • top : distance, en pixels, entre le coin supérieur gauche du cadre et le haut de l'image.

  • width : largeur du cadre en pixels.

    Vous pouvez extraire la valeur initiale du cadre de délimitation à partir d'un fichier manifeste d'une tâche précédente dans un modèle personnalisé à l'aide du langage de modélisation Liquid :

    initial-value="[ {% for box in task.input.manifestLine.label-attribute-name-from-prior-job.annotations %} {% capture class_id %}{{ box.class_id }}{% endcapture %} {% assign label = task.input.manifestLine.label-attribute-name-from-prior-job-metadata.class-map[class_id] %} { label: {{label | to_json}}, left: {{box.left}}, top: {{box.top}}, width: {{box.width}}, height: {{box.height}}, }, {% endfor %} ]"

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 rectangle. Limite : 10 étiquettes.

nom

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

src

URL de l'image sur laquelle dessiner des cadres de délimitation.

Hiérarchie des éléments

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

Régions

Les régions suivantes sont requises par cet élément.

full-instructions

Instructions générales concernant la procédure de tracé des cadres de délimitation.

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.

boundingBoxes

Tableau d'objets JSON. Chaque objet spécifie un cadre de délimitation qui a été créé par l'employé. Chaque objet JSON du tableau comprend les propriétés suivantes :

  • height : hauteur du cadre en pixels.

  • label : texte attribué à la zone 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-bounding-box>.

  • left : distance, en pixels, entre le coin supérieur gauche du cadre et le côté gauche de l'image.

  • top : distance, en pixels, entre le coin supérieur gauche du cadre et le haut de l'image.

  • width : largeur du cadre en pixels.

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 cadre / Plusieurs étiquettes, un cadre

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

Une étiquette, plusieurs cadres

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

Plusieurs étiquettes, plusieurs cadres

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

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.