crowd-keypoint

Génère un outil pour sélectionner et annoter les points clés d'une image.

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-keypoint>. 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>
  <div id="errorBox"></div>
   
  <crowd-keypoint
    src="{{ task.input.taskObject | grant_read_access }}"
    labels="['Item A', 'Item B', 'Item C']"        
    header="Please locate the centers of each item."
    name="annotatedResult">
    <short-instructions>
      Describe your task briefly here and give examples
    </short-instructions>
    <full-instructions>
      Give additional instructions and good/bad examples here
    </full-instructions>   
  </crowd-keypoint>
</crowd-form>

<script>
  var num_obj = 1;

  document.querySelector('crowd-form').onsubmit = function(e) {
    const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints;
    const labels = keypoints.map(function(p) {
      return p.label;
    });

    // 1. Make sure total number of keypoints is correct.
    var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels");

    original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\"");
    var goalNumKeypoints = num_obj*original_num_labels.length;
    if (keypoints.length != goalNumKeypoints) {
      e.preventDefault();
      errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>';
      errorBox.scrollIntoView();
      return;
    }

    // 2. Make sure all labels are unique.
    labelCounts = {};
    for (var i = 0; i < labels.length; i++) {
      if (!labelCounts[labels[i]]) {
        labelCounts[labels[i]] = 0;
      }
      labelCounts[labels[i]]++;
    }
    const goalNumSingleLabel = num_obj;

    const numLabels = Object.keys(labelCounts).length;

    Object.entries(labelCounts).forEach(entry => {
      if (entry[1] != goalNumSingleLabel) {
        e.preventDefault();
        errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>';
        errorBox.scrollIntoView();
      }
    })
  };
</script>

Attributs

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, au format JSON, des keypoints à appliquer à l'image au démarrage. Par exemple :

initial-value="[
  {
    'label': 'Left Eye',
    'x': 1022,
    'y': 429
  },
  {
    'label': 'Beak',
    'x': 941,
    'y': 403
  }
]

Note

Veuillez noter que les valeurs d'étiquette utilisées dans cet attribut doivent avoir une valeur correspondante dans l'attribut labels ou le point ne sera pas rendu.

labels

Un tableau de chaînes au format JSON à utiliser comme étiquette pour l'annotation des points clés.

name

Chaîne utilisée pour identifier la réponse envoyée par l'employé. Cette valeur correspondra à une clé dans l'objet JSON qui spécifie la réponse.

src

La source URL de l'image à annoter.

Hiérarchie des éléments

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

• Éléments parents : crowd-form

• Éléments enfants : full-instructions, short-instructions

Régions

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

full-instructions

Instructions générales concernant la procédure d'annotation des images.

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.

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.

keypoints

Tableau d'objets JSON contenant les coordonnées et l'étiquette d'un point clé. Chaque objet contient les propriétés suivantes :

• label : étiquette attribuée au point clé.

• x : coordonnée X, en pixels, du point clé sur l'image.

• y : coordonnée Y, en pixels, du point clé sur l'image.

Note

Les coordonnées X et Y sont basées sur l'angle supérieur gauche de l'image équivalent à une valeur de 0,0.

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

L'exemple suivant est une sortie de cet élément.

[
  {
    "crowdKeypoint": {
      "inputImageProperties": {
        "height": 1314,
        "width": 962
      },
      "keypoints": [
        {
          "label": "dog",
          "x": 155,
          "y": 275
        },
        {
          "label": "cat",
          "x": 341,
          "y": 447
        },
        {
          "label": "cat",
          "x": 491,
          "y": 513
        },
        {
          "label": "dog",
          "x": 714,
          "y": 578
        },
        {
          "label": "cat",
          "x": 712,
          "y": 763
        },
        {
          "label": "cat",
          "x": 397,
          "y": 814
        }
      ]
    }
  }
]

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.

• Utilisation d'Amazon SageMaker Ground Truth pour étiqueter les données

• Référence des éléments HTML crowd