SageMaker Éléments HTML pour les foules

Message qui informe l'employé d'une situation en cours.

Consultez un exemple interactif de 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-alert>. 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.

dismissible

Commutateur booléen qui, s'il est présent, autorise la fermeture du message par l'employé.

type

Chaîne qui spécifie le type de message à afficher. Les valeurs possibles sont « info » (information) (par défaut), « success » (réussite), « error » (erreur) et « warning » (avertissement).

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Icône flottante dans le coin supérieur droit d'un autre élément auquel elle est attachée.

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

Voici un exemple de modèle d'enquête qui utilise l'élément <crowd-badge>. 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-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Choose the correct category for this image."
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
   
    <short-instructions id="short-instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-badge icon="star" for="short-instructions"/>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

Attributs

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

for

Chaîne qui spécifie l'ID de l'élément auquel le badge est attaché.

icon

Chaîne qui spécifie l'icône à afficher dans le badge. La chaîne doit être le nom d'une icône de l'ensemble open source iron-icons, qui est préchargé, ou l'URL d'une icône personnalisée.

Cet attribut remplace l'attribut label.

Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône de fer à un élément HTML <crowd-badge>. Remplacez icon-name par le nom de l'icône que vous souhaitez utiliser dans ce jeu d'icônes.

<crowd-badge icon="icon-name" for="short-instructions"/>

étiquette

Texte à afficher dans le badge. Il est recommandé d'utiliser trois caractères maximum pour que le texte ne dépasse pas de la zone du badge. Il est possible d'affiche une icône à la place du texte en définissant l'attribut icon.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Bouton avec style qui représente une action.

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

Voici un exemple de modèle d'enquête qui utilise l'élément <crowd-button>. 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-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Please select the correct category for this image"
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-button>
        <iron-icon icon="question-answer"/>
      </crowd-button>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

Attributs

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

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton comme étant désactivé et empêche les clics.

form-action

Commutateur qui envoie son élément parent crowd-form s'il est défini sur « submit », ou réinitialise son élément parent <crowd-form> s'il est défini sur « reset ».

href

URL d'une ressource en ligne. Utilisez cette propriété si vous avez besoin d'un lien avec style sous forme d'un bouton.

icon

Chaîne qui spécifie l'icône à afficher en regard du texte du bouton. La chaîne doit être le nom d'une icône de l'ensemble open source iron-icons, qui est préchargé. Par exemple, pour insérer l'iron-icon search, procédez comme suit :

<crowd-button>
    <iron-icon icon="search"/>
</crowd-button>

L'icône est positionnée à gauche ou à droite du texte, comme spécifié par l'attribut icon-align.

Pour utiliser une icône personnalisée, voir icon-url.

icon-align

Position de l'icône à gauche ou à droite du texte du bouton. La valeur par défaut est « left » (gauche).

icon-url

URL d'une image personnalisée pour l'icône. Une image personnalisée peut être utilisée à la place de l'icône standard qui est spécifiée par l'attribut icon.

loading

Commutateur booléen qui, s'il est présent, affiche le bouton comme étant dans un état de chargement. Cet attribut a la priorité sur l'attribut disabled si les deux attributs sont présents.

cible

Si vous utilisez l'attribut href pour que le bouton fasse office de lien hypertexte vers une URL spécifique, l'attribut target cible, si vous le souhaitez, un cadre ou une fenêtre où l'URL avec lien doit charger.

variant

Style général du bouton. Utilisez « primary » pour les boutons principaux, « normal » pour les boutons secondaires, « link » pour les boutons tertiaires ou « icon » pour afficher uniquement l'icône sans texte.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

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 de 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 GitHub référentiel.

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

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

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.

name

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 :

entrée ImageProperties

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.

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

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

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Cadre surélevé pour afficher des informations.

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

Voici un exemple de modèle conçu pour les tâches d'analyse des sentiments qui utilisent l'élément <crowd-card> 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>

<style>
  h3 {
    margin-top: 0;
  }
  
  crowd-card {
    width: 100%;
  }
  
  .card {
    margin: 10px;
  }
  
  .left {
    width: 70%;
    margin-right: 10px;
    display: inline-block;
    height: 200px;
  }
  
  .right {
    width: 20%;
    height: 200px;
    display: inline-block;
  }
</style>

<crowd-form>
  <short-instructions>
    Your short instructions here.
  </short-instructions>
  
  <full-instructions>
    Your full instructions here.
  </full-instructions>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Nothing is great.
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment1" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Everything is great!
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment2" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
</crowd-form>

Attributs

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

heading

Texte affiché en haut du cadre.

image

URL d'une image à afficher dans le cadre.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Composant d'interface utilisateur qui peut être coché ou décoché et permet à l'utilisateur de sélectionner plusieurs options d'un ensemble.

Consultez un exemple interactif de 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-checkbox>. 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>
  
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-checkbox name="website-found">Website Found</crowd-checkbox>

</crowd-form>

Attributs

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

checked

Commutateur booléen qui, s'il est présent, affiche la case comme cochée.

Voici un exemple de syntx utilisée pour cocher une case par défaut.

  <crowd-checkbox name="checkedBox" value="checked" checked>This box is checked</crowd-checkbox>

disabled

Commutateur booléen qui, s'il est présent, affiche la case comme décochée et empêche celle-ci d'être cochée.

Voici un exemple de syntaxe utilisée pour désactiver une case à cocher.

  <crowd-checkbox name="disabledCheckBox" value="Disabled" disabled>Cannot be selected</crowd-checkbox>

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.

obligatoire

Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.

Voici un exemple de syntaxe utilisée pour exiger une case à cocher.

  <crowd-checkbox name="work_verified" required>Instructions were clear</crowd-checkbox>

value

Chaîne utilisée comme nom pour l'état de la case à cocher dans la sortie. La valeur par défaut est « on » si elle n'est pas spécifiée.

Hiérarchie des éléments

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

Sortie

Fournit un objet JSON. La chaîne name est le nom de l'objet et la chaîne value est le nom de propriété de la valeur booléenne en fonction de l'état de la case à cocher. La valeur est true si elle est cochée et false si elle ne l'est pas.

<!-- INPUT -->  
<div><crowd-checkbox name="image_attributes" value="blurry"> Blurry </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="dim"> Too Dim </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="exposed"> Too Bright </crowd-checkbox></div>

//Output with "blurry" and "dim" checked
[
  {
    "image_attributes": {
      "blurry": true,
      "dim": true,
      "exposed": false
    }
  }
]

<!-- INPUT -->
<div><crowd-checkbox name="Stop" value="Red"> Red </crowd-checkbox></div>
<div><crowd-checkbox name="Slow" value="Yellow"> Yellow </crowd-checkbox></div>
<div><crowd-checkbox name="Go" value="Green"> Green </crowd-checkbox></div>

//Output with "Red" checked
[
  {
    "Go": {
      "Green": false
    },
    "Slow": {
      "Yellow": false
    },
    "Stop": {
      "Red": true
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget permettant de classer du contenu autre que des images (audio, vidéo ou texte).

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

Voici un exemple de modèle de tâche de travail HTML créé à l'aide de crowd-classifier. Cet exemple utilise le langage du modèle Liquid pour automatiser :

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-classifier
      name="category"
      categories="{{ task.input.labels | to_json | escape }}"
      header="What type of a document is this?"
    >
      <classification-target>
        <iframe style="width: 100%; height: 600px;" src="{{ task.input.taskObject  | grant_read_access }}" type="application/pdf"></iframe>
      </classification-target>
      
      <full-instructions header="Document Classification Instructions">
        <p>Read the task carefully and inspect the document.</p>
        <p>Choose the appropriate label that best suits the document.</p>
      </full-instructions>

      <short-instructions>
        Please choose the correct category for the document
      </short-instructions>
    </crowd-classifier>
</crowd-form>

Attributs

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

categories

Tableau de chaînes au format JSON, chaque chaîne étant une catégorie qu'un employé peut attribuer au texte. Vous devez inclure « autre » comme catégorie. Sinon, l'employé pourrait ne pas être en mesure de répondre.

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

name

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

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 prises en charge par cet élément.

classification-target

Contenu à classer par l'employé. Il peut s'agir de texte brut ou d'élément HTML. Les exemples d'utilisation de code HTML peuvent inclure mais sans s'y limiter l'intégration d'un lecteur vidéo ou audio, l'intégration d'un PDF ou une comparaison entre deux images ou plus.

full-instructions

Instructions générales concernant la procédure de classification de textes.

short-instructions

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

Sortie

La sortie cet élément est un objet utilisant la valeur name spécifiée comme nom de propriété, et une chaîne de categories comme valeur de propriété.

[
  {
    "<name>": {
      "label": "<value>"
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget pour classer diverses formes de contenu, audio, vidéo ou texte, par exemple, dans une ou plusieurs catégories. Le contenu à classer est appelé objet.

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

Voici un exemple de modèle de tâche d'employé HTML créé à l'aide de cet élément. 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-classifier-multi-select
      name="category"
      categories="['Positive', 'Negative', 'Neutral']"
      header="Select the relevant categories"
      exclusion-category="{ text: 'None of the above' }"
    >
      <classification-target>
        {{ task.input.taskObject }}
      </classification-target>
      
      <full-instructions header="Text Categorization Instructions">
        <p><strong>Positive</strong> sentiment include: joy, excitement, delight</p>
        <p><strong>Negative</strong> sentiment include: anger, sarcasm, anxiety</p>
        <p><strong>Neutral</strong>: neither positive or negative, such as stating a fact</p>
        <p><strong>N/A</strong>: when the text cannot be understood</p>
        <p>When the sentiment is mixed, such as both joy and sadness, choose both labels.</p>
      </full-instructions>

      <short-instructions>
       Choose all categories that are expressed by the text. 
      </short-instructions>
    </crowd-classifier-multi-select>
</crowd-form>

Attributs

Les attributs suivants sont pris en charge par l'élément crowd-classifier-multi-select. Chaque attribut accepte une ou plusieurs valeurs de chaîne.

categories

Obligatoire. Tableau de chaînes au format JSON. Chaque chaîne est une catégorie qu'un collaborateur peut attribuer à l'objet.

header

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

name

Obligatoire. Nom de ce widget. Dans la sortie du formulaire, le nom est utilisé en tant que clé pour la saisie du widget.

catégorie d'exclusion

Facultatif. Chaîne au format JSON avec le format suivant : "{ text: 'default-value' }". Cet attribut définit une valeur par défaut que les collaborateurs peuvent choisir si aucune des étiquettes ne s'applique à l'objet affiché dans l'interface utilisateur de travail.

Hiérarchie des éléments

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

Régions

Cet élément utilise les régions suivantes.

classification-target

Contenu à classer par l'employé. Le contenu peut être un texte brut ou un objet que vous spécifiez dans le modèle à l'aide de code HTML. Par exemple, vous pouvez utiliser des éléments HTML pour inclure un lecteur vidéo ou audio, en intégrant un fichier PDF, ou inclure une comparaison d'au moins deux images.

full-instructions

Instructions générales concernant le classement de texte.

short-instructions

Instructions importantes spécifiques à la tâche. Ces instructions sont affichées en évidence.

Sortie

La sortie cet élément est un objet utilisant la valeur name spécifiée comme nom de propriété et une chaîne de categories comme valeur de propriété.

[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les ressources suivantes :

Widget pour étiqueter des mots, des expressions ou des chaînes de caractères dans un texte long. Les travailleurs sélectionnent une étiquette et mettent en surbrillance le texte auquel elle s'applique.

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

Voici un exemple de modèle d'enquête qui utilise l'élément <crowd-entity-annotation>. 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-entity-annotation
  name="crowd-entity-annotation"
  header="Highlight parts of the text below"
  labels="[{'label': 'person', 'shortDisplayName': 'per', 'fullDisplayName': 'Person'}, {'label': 'date', 'shortDisplayName': 'dat', 'fullDisplayName': 'Date'}, {'label': 'company', 'shortDisplayName': 'com', 'fullDisplayName': 'Company'}]"
  text="Amazon SageMaker Ground Truth helps you build highly accurate training datasets for machine learning quickly."
>
  <full-instructions header="Named entity recognition instructions">
    <ol>
      <li><strong>Read</strong> the text carefully.</li>
      <li><strong>Highlight</strong> words, phrases, or sections of the text.</li>
      <li><strong>Choose</strong> the label that best matches what you have highlighted.</li>
      <li>To <strong>change</strong> a label, choose highlighted text and select a new label.</li>
      <li>To <strong>remove</strong> a label from highlighted text, choose the X next to the abbreviated label name on the highlighted text.</li>
      <li>You can select all of a previously highlighted text, but not a portion of it.</li>
    </ol>
  </full-instructions>

  <short-instructions>
    Apply labels to words or phrases.
  </short-instructions>

    <div id="additionalQuestions" style="margin-top: 20px">
      <h3>
        What is the overall subject of this text?
      </h3>
      <crowd-radio-group>
        <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
        <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
      </crowd-radio-group>
    </div>
</crowd-entity-annotation>

<script>
  document.addEventListener('all-crowd-elements-ready', () => {
    document
      .querySelector('crowd-entity-annotation')
      .shadowRoot
      .querySelector('crowd-form')
      .form
      .appendChild(additionalQuestions);
  });
</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 d'objets au format JSON, chacun d'entre eux définissant une annotation à appliquer au texte lors de l'initialisation. Les objets contiennent une valeur label qui correspond à une étiquette dans l'attribut labels, une valeur startOffset entière pour le décalage Unicode de départ de la plage étiquetée et une valeur endOffset entière pour le décalage Unicode de fin.

[
  {
    label: 'person',
    startOffset: 0,
    endOffset: 16
  },
  ...
]

labels

Tableau d'objets au format JSON, chacun d'entre eux contenant :

[
  {
    label: 'person',
    shortDisplayName: 'per', 
    fullDisplayName: 'person'
  }
]

name

Sert de nom du widget dans le DOM. Il est également utilisé comme nom d'attribut d'étiquette dans la sortie du formulaire et le manifeste de sortie.

text

Texte à annoter. Le système de modélisation place les guillemets et les chaînes HTML dans une séquence d'échappement par défaut. Si votre code est déjà placé dans une séquence d'échappement ou l'est partiellement, consultez Filtres de variables pour obtenir d'autres façons de contrôler l'échappement.

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 prises en charge par cet élément.

full-instructions

Instructions générales sur la façon d'utiliser le widget.

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.

entities

Objet JSON qui spécifie le début, la fin et l'étiquette d'une annotation. Cet objet contient les propriétés suivantes.

{
  "myAnnotatedResult": {
    "entities": [
      {
        "endOffset": 54,
        "label": "person",
        "startOffset": 47
      },
      {
        "endOffset": 97,
        "label": "event",
        "startOffset": 93
      },
      {
        "endOffset": 219,
        "label": "date",
        "startOffset": 212
      },
      {
        "endOffset": 271,
        "label": "location",
        "startOffset": 260
      }
    ]
  }
}

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Bouton flottant avec une image en son centre.

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

Voici un exemple de modèle Liquid conçu pour la classification d'image qui utilise l'élément <crowd-fab>. Ce modèle permet JavaScript aux travailleurs de signaler les problèmes liés à l'interface utilisateur du travailleur. 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-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"></crowd-input>
            <crowd-fab id="button1" icon="report-problem" title="Issue"/>
        </short-instructions>
        
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

Attributs

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

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton flottant comme étant désactivé et empêche les clics.

icon

Chaîne qui spécifie l'icône à afficher au centre du bouton. La chaîne doit être le nom d'une icône de l'ensemble open source iron-icons, qui est préchargé, ou l'URL d'une icône personnalisée.

Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône de fer à un élément HTML <crowd-fab>. Remplacez icon-name par le nom de l'icône que vous souhaitez utiliser dans ce jeu d'icônes.

<crowd-fab "id="button1" icon="icon-name" title="Issue"/>

étiquette

Chaîne composée d'un seul caractère, qui peut être utilisée à la place d'une icône. Les emojis ou les caractères multiples peuvent entraîner l'affichage d'une ellipse à la place.

title

Chaîne qui s'affiche sous la forme d'une info-bulle lorsque la souris passe sur le bouton.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Habillage de formulaire pour toutes les tâches personnalisées. Définit et met en œuvre les actions importantes pour l'envoi des données de votre formulaire.

Si un crowd-button de type « submit » n'est pas inclus dans l'élément <crowd-form>, il sera ajouté automatiquement dans l'élément <crowd-form>.

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

Voici un exemple de modèle de classification d'image qui utilise l'élément <crowd-form>. 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-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

Hiérarchie des éléments

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

Événements des éléments

L'élément crowd-form prolonge l'élément HTML standard form et il hérite de ses événements tels que onclick et onsubmit.

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Bouton flottant avec une image placée en son centre. Lorsque l'utilisateur touche le bouton, un effet d'ondulation émane du centre du bouton.

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

Voici un exemple de modèle Liquid conçu pour la classification d'image qui utilise l'élément <crowd-icon-button>. Ce modèle permet JavaScript aux travailleurs de signaler les problèmes liés à l'interface utilisateur du travailleur. 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-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"/></crowd-input>
            <crowd-icon-button id="button1" icon="report-problem" title="Issue"/>
        </short-instructions>
        
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

Attributs

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

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton comme étant désactivé et empêche les clics.

icon

Chaîne qui spécifie l'icône à afficher au centre du bouton. La chaîne doit être le nom d'une icône de l'ensemble open source iron-icons, qui est préchargé, ou l'URL d'une icône personnalisée.

Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône de fer à un élément HTML <crowd-icon-button>. Remplacez icon-name par le nom de l'icône que vous souhaitez utiliser dans ce jeu d'icônes.

<crowd-icon-button id="button1" icon="icon-name" title="Issue"/>

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget pour classer une image. Utilisez l'un des formats d'image pris en charge suivants : APNG, BMP, GIF, ICO, JPEG, PNG ou SVG. Les images n'ont pas de limite de taille.

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

Voici un exemple de modèle de classification d'image qui utilise l'élément <crowd-image-classifier>. 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-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

Attributs

Les attributs suivants sont requis par cet élément.

categories

Tableau de chaînes au format JSON. Chaque chaîne est une catégorie qu'un employé peut attribuer à l'image. Vous devez inclure « autre » comme catégorie afin que l'employé puisse répondre. Vous pouvez spécifier jusqu'à 10 catégories.

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

name

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

overlay

Informations à superposer à l'image source. Ceci vaut pour les flux de vérification des tâches de cadre de délimitation, de segmentation sémantique et de segmentation d'instance.

Il s'agit d'un objet JSON contenant un objet avec le nom du type de tâche dans CamelCase comme clé. La valeur de cette clé est un objet qui contient les étiquettes et autres informations nécessaires de la tâche précédente.

Voici l'exemple d'un élément crowd-image-classifier avec des attributs pour vérifier une tâche de cadre de délimitation :

<crowd-image-classifier
    name="boundingBoxClassification"
    header="Rate the quality of the annotations based on the background section 
       in the instructions on the left hand side."
    src="https://i.imgur.com/CIPKVJo.jpg"
    categories="['good', 'bad', 'okay']"
    overlay='{
        "boundingBox": {
            labels: ["bird", "cat"], 
            value: [
                {
                  height: 284,
                  label: "bird",
                  left: 230,
                  top: 974,
                  width: 223
                },
                {
                  height: 69,
                  label: "bird",
                  left: 79,
                  top: 889,
                  width: 247
                }
            ]
        },
    }'
> ... </crowd-image-classifier>

Une tâche de vérification de segmentation sémantique utiliserait la valeur overlay de la façon suivante :

<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify'
  overlay='{
    "semanticSegmentation": {
      "labels": ["Cat", "Dog", "Bird", "Cow"],
      "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#2acf59"
        }
      },
      "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

Une tâche de segmentation d'instance utiliserait la valeur overlay de la façon suivante :

<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify instances of each category'
  overlay='{
    "instanceSegmentation": {
       "labels": ["Cat", "Dog", "Bird", "Cow"],
       "instances": [
        {
         "color": "#2ca02c",
         "label": "Cat"
        },
        {
         "color": "#1f77b4",
         "label": "Cat"
        },
        {
         "color": "#d62728",
         "label": "Dog"
        }
       ],
       "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

src

URL de l'image à classer.

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 utilisées par cet élément.

full-instructions

Instructions générales pour le travail sur la façon de classer une image.

short-instructions

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

worker-comment

Utilisez ceci dans les workflows de vérification lorsque vous avez besoin de travaux pour expliquer les choix qui ont été faits. Utilisez le texte entre les balises d'ouverture et de fermeture pour fournir aux travaux des instructions sur les informations à inclure dans le commentaire.

Contient les attributs suivants :

header

Une phrase avec un appel à l'action pour laisser un commentaire. Utilisé comme texte de titre pour une fenêtre modale où le commentaire est ajouté.

Facultatif. La valeur par défaut est « Ajouter un commentaire. »

link-text

Ce texte apparaît sous les catégories du widget. Lorsque vous cliquez dessus, il ouvre une fenêtre modale dans laquelle le travail peut ajouter un commentaire.

Facultatif. La valeur par défaut est « Ajouter un commentaire. »

placeholder

Exemple de texte dans la zone de texte du commentaire qui est écrasé lorsque le travailleur commence à taper. Cela n'apparaît pas en sortie si le travail laisse le champ vide.

Facultatif. Vide par défaut.

Sortie

La sortie de cet élément est une chaîne qui spécifie l'une des valeurs définies dans l'attribut categories de l'élément <crowd-image-classifier>.

[
  {
    "<name>": {
      "label": "<value>"
      "workerComment": "Comment - if no comment is provided, this field will not be present"
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget pour classer une image dans une ou plusieurs catégories. Utilisez l'un des formats d'image pris en charge suivants : APNG, BMP, GIF, ICO, JPEG, PNG ou SVG. Les images n'ont pas de limite de taille.

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

Voici un exemple de modèle de tâche de travail HTML créé à l'aide de cet élément Crowd. 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-image-classifier-multi-select
    name="animals"
    categories="['Cat', 'Dog', 'Horse', 'Pig', 'Bird']"
    src="https://images.unsplash.com/photo-1509205477838-a534e43a849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1998&q=80"
    header="Please identify the animals in this image"
    exclusion-category="{ text: 'None of the above' }"
  >
    <full-instructions header="Classification Instructions">
      <p>If more than one label applies to the image, select multiple labels.</p>
      <p>If no labels apply, select <b>None of the above</b></p>
    </full-instructions>

    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label(s) that best suit the image.</p>
    </short-instructions>
  </crowd-image-classifier-multi-select>
</crowd-form>

Attributs

Les attributs suivants sont pris en charge par l'élément crowd-image-classifier-multi-select. Chaque attribut accepte une ou plusieurs valeurs de chaîne.

categories

Obligatoire. Tableau de chaînes au format JSON. Chaque chaîne est une catégorie qu'un collaborateur peut attribuer à l'image. Un collaborateur doit choisir au moins une catégorie et peut choisir toutes les catégories.

header

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

name

Obligatoire. Nom de ce widget. Dans la sortie du formulaire, le nom est utilisé en tant que clé pour la saisie du widget.

src

Obligatoire. URL de l'image à classer.

catégorie d'exclusion

Facultatif. Chaîne au format JSON avec le format suivant : "{ text: 'default-value' }". Cet attribut définit une valeur par défaut que les collaborateurs peuvent choisir si aucune des étiquettes ne s'applique à l'image affichée dans l'interface utilisateur de travail.

Hiérarchie des éléments

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

Régions

Cet élément utilise les régions suivantes

full-instructions

Instructions générales pour le travail sur la façon de classer une image.

short-instructions

Instructions importantes spécifiques à la tâche. Ces instructions sont affichées en évidence.

Sortie

La sortie de cet élément est une chaîne qui spécifie une ou plusieurs des valeurs définies dans l'attribut categories de l'élément <crowd-image-classifier-multi-select>.

[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les ressources suivantes :

Zone qui accepte la saisie de données.

Consultez un exemple interactif de 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-input>. 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>
  <img style="max-width: 35vw; max-height: 50vh" src="{{ task.input.taskObject | grant_read_access }}">
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>

  <short-instructions>
    Your custom quick instructions and examples
  </short-instructions>

  <full-instructions>
    Your custom detailed instracutions and more examples
  </full-instructions>
</crowd-form>

Attributs

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

allowed-pattern

Expression régulière utilisée avec l'attribut auto-validate pour ignorer les caractères saisis par l'employé qui ne correspondent pas.

auto-focus

Lorsque la valeur est définie sur true, le navigateur place le curseur dans la zone de saisie après le chargement. L'employé peut ainsi commencer sa saisie sans avoir à la sélectionner d'abord.

auto-validate

Commutateur booléen qui, s'il est présent, active la validation de la saisie. Le comportement du valideur peut être modifié par les attributs error-message et allowed-pattern.

disabled

Commutateur booléen qui, s'il est présent, affiche la zone de saisie comme désactivée.

error-message

Texte à afficher sous le champ de saisie, sur le côté gauche, si la validation échoue.

étiquette

Chaîne qui s'affiche dans un champ de texte.

Ce texte rétrécit et se déplace au-dessus du champ de texte lorsque l'employé commence sa saisie dans le champ ou lorsque l'attribut value est défini.

max-length

Nombre maximal de caractères accepté pour la saisie. Au-delà de cette limite, la saisie est ignorée.

min-length

Longueur minimale de la saisie dans le champ.

name

Définit le nom de la saisie à utiliser dans le DOM et la sortie du formulaire.

placeholder

Valeur de chaîne qui est utilisée comme espace réservé pour le texte et s'affiche jusqu'à ce que l'employé commence à saisir des données. Elle n'est pas utilisée comme valeur par défaut.

obligatoire

Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.

type

Prend une chaînes de caractères pour définir le comportement HTML5 input-type de la saisie. Exemples : file et date.

value

Ce préréglage devient la valeur par défaut si l'employé ne saisit rien. Il s'affiche dans un champ de texte.

Hiérarchie des éléments

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

Sortie

Fournit une chaîne de caractères name comme nom de propriété, et le texte saisi dans le champ comme valeur.

<crowd-input name="tag1" label="Word/phrase 1"></crowd-input>
<crowd-input name="tag2" label="Word/phrase 2"></crowd-input>
<crowd-input name="tag3" label="Word/phrase 3"></crowd-input>

[
  {
    "tag1": "blue",
    "tag2": "red"
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget permettant d'identifier les instances individuelles d'objets spécifiques au sein d'une image et de créer une superposition colorée pour chaque instance étiquetée.

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

Voici un exemple de modèle Liquid qui utilise la <crowd-instance-segmentation>. 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-instance-segmentation
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label all instances of the requested items in the image</p>
    </short-instructions>
  </crowd-instance-segmentation>
</crowd-form>

Utilisez un modèle semblable au suivant pour permettre aux employés d'ajouter leurs propres catégories (étiquettes).

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-instance-segmentation
    id="annotator"
    name="myTexts"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Click Instructions to add new labels."
    labels="['placeholder']"
  >
    <short-instructions>
      <h3>Add a label to describe each type of object in this image.</h3>
      <h3>Cover each instance of each object with a segmentation mask.</h3>
      <br>
      <h3>
        Add new label
      </h3>
      <crowd-input name="_customLabel" id="customLabel"></crowd-input>
      <crowd-button id="addLabel">Add</crowd-button>
      
      <br><br><br>
      <h3>
      Manage labels
      </h3>
      <div id="labelsSection"></div>
    </short-instructions>
    
    <full-instructions>
      Describe your task in more detail here.
    </full-instructions>
  </crowd-instance-segmentation>
</crowd-form>

<script>
  document.addEventListener('all-crowd-elements-ready', function(event) {
    document.querySelector('crowd-instance-segmentation').labels = [];  
  });
  
  function populateLabelsSection() {
    labelsSection.innerHTML = '';
    annotator.labels.forEach(function(label) {
      const labelContainer = document.createElement('div');
      labelContainer.innerHTML = label + ' <a href="javascript:void(0)">(Delete)</a>';
      labelContainer.querySelector('a').onclick = function() {
        annotator.labels = annotator.labels.filter(function(l) {
          return l !== label;
        });
        populateLabelsSection();
      };
      labelsSection.appendChild(labelContainer);
    });
  }

  addLabel.onclick = function() {
    annotator.labels = annotator.labels.concat([customLabel.value]);
    customLabel.value = null;
    
    populateLabelsSection();
  };
</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é.

labels

Tableau de chaînes au format JSON, chacune étant une étiquette qu'une application de travail peut attribuer à une instance d'un objet dans l'image. Les applications de travail peuvent générer des couleurs de superposition différentes pour chaque instance correspondante en sélectionnant « add instance » (ajouter une instance) sous l'étiquette dans l'outil.

name

Nom de ce widget. Il est utilisé comme clé pour l'étiquetage des données dans la sortie du formulaire.

src

URL de l'image à étiqueter.

initial-value

Objet JSON contenant les mappages de couleurs d'une tâche de segmentation d'instance précédente et un lien vers la sortie de l'image de superposition par la tâche précédente. Incluez ceci lorsque vous souhaitez qu'un travail humain vérifie les résultats d'une tâche d'étiquetage antérieure et l'adapte si nécessaire.

L'attribut ressemble à ce qui suit :

  initial-value="{
    "instances": [
      {
        "color": "#2ca02c",
        "label": "Cat"
      },
      {
        "color": "#1f77b4",
        "label": "Cat"
      },
      {
        "color": "#d62728",
        "label": "Dog"
      }
    ],
    "src": {{ "S3 file URL for image" | grant_read_access }}
  }"

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 prises en charge par cet élément.

full-instructions

Instructions générales concernant la procédure de segmentation 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.

labeledImage

Objet JSON contant un PNG encodé en Base64 des étiquettes.

Instances

Tableau JSON contenant les objets avec les étiquettes et les couleurs des instances.

entrée ImageProperties

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.

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "instances": [
        {
          "color": "#1f77b4",
          "label": "<Label 1>": 
        },
        {
          "color": "#2ca02c",
          "label": "<Label 1>": 
        },
        {
          "color": "#ff7f0e",
          "label": "<Label 3>": 
        },
      ],
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Élément qui affiche des instructions sur les trois pages à onglets, Summary (Récapitulatif), Detailed Instructions (Instructions détaillées) et Examples (Exemples), lorsque l'employé clique sur un lien ou un bouton.

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

Voici un exemple de modèle Liquid qui a utilisé l'élément <crowd-instructions>. 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-instructions link-text="View instructions" link-type="button">
		  <short-summary>
		    <p>Given an image, write three words or short phrases that summarize its contents.</p>
		  </short-summary>
		  <detailed-instructions>
		    <p>Imagine that you are describing an image to a friend or tagging it for a news website. Provide three specific words or short phrases that describe it.</p>
		  </detailed-instructions>
		  <positive-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	<ul>
		    		<li>Highway</li>
		    		<li>Cars</li>
		    		<li>Gas station</li>
		    	</ul>
		    </p>
		  </positive-example>
		  <negative-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	These are not specific enough:
		    	<ol>
		    		<li>Trees</li>
		    		<li>Outside</li>
		    		<li>Daytime</li>
		    	</ol>
		    </p>
		  </negative-example>
	</crowd-instructions>
    <p><strong>Instructions: </strong>Given an image, write three words or short phrases that summarize its contents.</p>
    <p>If someone were to see these three words or phrases, they should understand the subject and context of the image, as well as any important actions.</p>
	<p>View the instructions for detailed instructions and examples.</p>
	<p><img style="max-width: 100%; max-height: 100%" src="{{ task.input.taskObject | grant_read_access }}"></p>
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>
</crowd-form>

Attributs

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

link-text

Texte à afficher pour ouvrir les instructions. La valeur par défaut est Click for instructions (Cliquez pour afficher les instructions).

link-type

Chaîne qui spécifie le type de déclencheur pour les instructions. Les valeurs possibles sont « link » (lien) (par défaut) et « button » (bouton).

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 prises en charge par cet élément.

detailed-instructions

Contenu qui fournit des instructions spécifiques pour une tâche. Il s'affiche sur la page de l'onglet « Detailed Instructions » (Instructions détaillées).

negative-example

Contenu qui fournit des exemples de tâches mal réalisées. Il s'affiche sur la page de l'onglet « Examples » (Exemples). Plusieurs exemples peuvent être fournis au sein de cet élément.

positive-example

Contenu qui fournit des exemples de tâches bien réalisées. Il s'affiche sur la page de l'onglet « Examples » (Exemples).

short-summary

Bref résumé de la tâche qui doit être effectuée. Il s'affiche sur la page de l'onglet « Summary » (Récapitulatif). Plusieurs exemples peuvent être fournis au sein de cet élément.

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

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

Consultez un exemple interactif de 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
  }
]

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 :

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.

entrée ImageProperties

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.

keypoints

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

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget pour tracer des lignes sur une image. Chaque ligne est associée à une étiquette, et les données en sortie indiquent les points de départ et de fin de chaque ligne.

Consultez un exemple interactif de 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-line>. 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 GitHub référentiel.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-line
    name="crowdLine"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <short-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 line on each objects that the label applies to.</p>
    </short-instructions>

    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image. 
        <p>Draw a line along each object that the image applies to.
            Make sure that the line does not extend beyond the boundaries
            of the object.
        </p>
        <p>Each line is defined by a starting and ending point. Carefully
        place the starting and ending points on the boundaries of the object.</p>
    </full-instructions>
    
  </crowd-line>
</crowd-form>

Attributs

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

header

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

Facultatif. Tableau d'objets JSON, chaque objet définissant un cadre de délimitation lorsque le composant est chargé. Chaque objet JSON du tableau comprend les propriétés suivantes :

initial-value="{
    lines: [
    {
        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
        }
        ]
    }
   ]
}"

Les lignes définies au moyen de la propriété initial-value peuvent être ajustées. L'ajustement d'une réponse d'employé est suivi au moyen d'un booléen initialValueModified dans la sortie de la réponse d'employé.

labels

Obligatoire. Tableau de chaînes au format JSON, chaque chaîne étant une étiquette qu'un employé peut attribuer à une ligne.

Limit : 10 étiquettes

label-colors

Facultatif. Tableau de chaînes. Chaque chaîne est un code hexadécimal (hex) pour une étiquette.

name

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

src

Obligatoire. L'URL de l'image sur laquelle tracer des lignes.

Régions

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

full-instructions

Instructions générales sur la façon de tracer des lignes.

short-instructions

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

Hiérarchie des éléments

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

Sortie

entrée ImageProperties

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.

lines

Tableau JSON contenant des objets avec les étiquettes et les sommets des lignes.

{
    "crowdLine": { //This is the name you set for the crowd-line
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "lines": [
        {
          "label": "yardline",
          "vertices": [ 
            {
              "x": 58,
              "y": 295
            },
            {
              "x": 1342,
              "y": 398
            }
          ]
        },
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 472,
              "y": 910
            },
            {
              "x": 1480,
              "y": 600
            }
          ]
        }
      ]
    }
  }

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Petite fenêtre qui s'affiche à l'écran lorsqu'on l'ouvre.

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

Voici un exemple de syntaxe que vous pouvez utiliser avec l'élément <crowd-modal>. 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-modal
link-text = "See Examples"
link-type = "button">
Example Modal Text</crowd-modal>

Attributs

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

link-text

Texte à afficher pour ouvrir la boîte de dialogue modale. La valeur par défaut est « Click to open modal » (Cliquez pour ouvrir la boîte de dialogue modale).

link-type

Chaîne qui spécifie le type de déclencheur pour la boîte de dialogue modale. Les valeurs possibles sont « link » (lien) (par défaut) et « button » (bouton).

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

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

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

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.

name

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 :

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

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 :

entrée ImageProperties

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.

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

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

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget pour tracer des lignes brisées ou des lignes sur une image. Chaque ligne brisée est associée à une étiquette et peut comprendre deux sommets ou plus. Une ligne brisée peut se couper elle-même et ses points de départ et de fin peuvent se trouver n'importe où sur l'image.

Consultez un exemple interactif de 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-polyline>. 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 GitHub référentiel.

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

Attributs

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

header

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

Facultatif. Tableau d'objets JSON, chaque objet définissant une ligne brisée lorsque le composant est chargé. Chaque objet JSON du tableau comprend les propriétés suivantes :

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

Les lignes brisées définies au moyen de la propriété initial-value peuvent être ajustées. L'ajustement d'une réponse d'employé est suivi au moyen d'un booléen initialValueModified dans la sortie de la réponse d'employé.

labels

Obligatoire. Tableau de chaînes au format JSON, chaque chaîne étant une étiquette qu'un employé peut attribuer à une ligne.

Limit : 10 étiquettes

label-colors

Facultatif. Tableau de chaînes. Chaque chaîne est un code hexadécimal (hex) pour une étiquette.

name

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

src

Obligatoire. L'URL de l'image sur laquelle tracer des lignes brisées.

Régions

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

full-instructions

Instructions générales sur la façon de tracer des lignes brisées.

short-instructions

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

Hiérarchie des éléments

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

Sortie

entrée ImageProperties

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.

polylines

Tableau JSON contenant des objets avec les étiquettes et les sommets des lignes brisées.

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Bouton qui peut être coché ou décoché. Lorsque les boutons radio appartiennent à un groupe, seul un bouton radio du groupe peut être coché à tout moment. Voici un exemple de configuration d'un élément crowd-radio-button à l'intérieur d'un élément crowd-radio-group.

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

Voici un exemple de syntaxe que vous pouvez utiliser avec l'élément <crowd-radio-button>. 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-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

L'exemple précédent peut être vu dans un modèle de tâche de travail personnalisé dans cet GitHub exemple : modèle personnalisé de tâche d'étiquetage de reconnaissance d'entités.

Les boutons radio de l'élément HTML Crowd ne prennent pas en charge la balise HTML required. Pour que la sélection d'un bouton radio soit requise, utilisez des éléments <input type="radio"> pour créer des boutons radio et ajoutez la balise required. Tous les éléments <input> appartenant au même groupe de boutons radio doivent avoir le même attribut name. Par exemple, dans le modèle suivant, l'utilisateur doit sélectionner un bouton radio dans le groupe animal-type avant d'envoyer l'élément.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <p>Select an animal type:</p>
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1539&q=80" style="height: 500; width: 400;"/>
<br><br>
<div>
  <input type="radio" id="cat" name="animal-type" value="cat" required>
  <label for="cat">Cat</label>
</div>
<div>
  <input type="radio" id="dog" name="animal-type" value="dog">
  <label for="dog">Dog</label>
</div>
<div>
  <input type="radio" id="unknown" name="animal-type" value="unknown">
  <label for="unknown">Unknown</label>
</div>
    <full-instructions header="Classification Instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
    </short-instructions>
</crowd-form>

Attributs

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

checked

Commutateur booléen qui, s'il est présent, affiche le bouton radio comme coché.

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton comme décoché et empêche celui-ci d'être coché.

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.

value

Nom de propriété pour la valeur booléenne de l'élément. S'il n'est pas spécifié, « on » est la valeur par défaut, par exemple { "<name>": { "<value>": <true or false> } }.

Hiérarchie des éléments

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

Sortie

Génère un objet avec le modèle suivant : { "<name>": { "<value>": <true or false> } }. Si vous utilisez les boutons en dehors d'un élément crowd-radio-group, mais avec la même chaîne name et des chaînes value différentes, l'objet du nom contiendra une valeur booléenne pour chaque chaîne value. Pour vous assurer qu'un seul bouton d'un groupe est sélectionné, faites-en des enfants d'un élément crowd-radio-group et utilisez des valeurs de nom différentes.

[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Groupe de boutons radio. Seul un bouton radio du groupe peut être sélectionné. Le fait de choisir un bouton radio efface n'importe quel bouton radio choisi précédemment au sein du même groupe. Pour obtenir un exemple de modèle d'interface utilisateur personnalisé qui utilise l'élément crowd-radio-group, veuillez consulter ce modèle personnalisé de tâche d'étiquetage de reconnaissance d'entité.

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

Voici un exemple de syntaxe que vous pouvez utiliser avec l'élément <crowd-radio-group>. 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>

<style>
	body {
		padding-left: 20px;
		margin-bottom: 20px;
	}
	#outer-container {
	    display: flex;
	    justify-content: space-around;
	    max-width: 900px;
	    margin-left: 100px;
	}
	.left-container {
    	margin-right: auto;
    	padding-right: 50px;
	}
	.right-container {
    	margin-left: auto;
    	padding-left: 50px;
	}
	#vertical-separator {
	    border: solid 1px #d5dbdb;
	}
</style>

<crowd-form>
    <div>
        <h1>Instructions</h1>
	Lorem ipsum...
    </div>
    <div>
        <h2>Background</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="outer-container">
	<span class="left-container">
	    <h2>Option 1</h2>
	    <p>Nulla facilisi morbi tempus iaculis urna. Orci dapibus ultrices in iaculis nunc sed augue lacus.</p>
	</span>
	<span id="vertical-separator"></span>
	<span class="right-container">
	    <h2>Option 2</h2>
	    <p>Ultrices vitae auctor eu augue ut. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.</p>
	</span>
    </div>
    <div>
        <h2>Question</h2>
    	<p>Which do you agree with?</p>
	<crowd-radio-group>
	    <crowd-radio-button name="option1" value="Option 1">Option 1</crowd-radio-button>
	    <crowd-radio-button name="option2" value="Option 2">Option 2</crowd-radio-button>
	</crowd-radio-group>

    	<p>Why did you choose this answer?</p>
	<crowd-text-area name="explanation" placeholder="Explain how you reached your conclusion..."></crowd-text-area>
    </div>
</crowd-form>

Attributs

Aucun attribut spécial n'est pris en charge par cet élément.

Hiérarchie des éléments

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

Sortie

Génère un tableau d'objets représentant les éléments crowd-radio-button de celui-ci.

[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Widget permettant de segmenter une image et d'attribuer une étiquette à chaque segment de l'image.

Consultez un exemple interactif de 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-semantic-segmentation>. 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-semantic-segmentation
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label the requested items in the image</p>
    </short-instructions>
  </crowd-semantic-segmentation>
</crowd-form>

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

Objet JSON contenant les mappages de couleurs d'une tâche de segmentation sémantique précédente et un lien vers la sortie de l'image de superposition par la tâche précédente. Incluez ceci lorsque vous souhaitez qu'un travail humain vérifie les résultats d'une tâche d'étiquetage antérieure et l'adapte si nécessaire.

L'attribut apparaîtrait comme suit :

  initial-value='{
    "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#1f77b4"
        }
      },
    "src": {{ "S3 file URL for image" | grant_read_access }}
  }'

Lorsque vous utilisez des types de tâches intégrés Ground Truth avec une consolidation d'annotation (lorsque plusieurs employés étiquettent une image unique), les mappages d'étiquettes sont inclus dans les enregistrements de sortie d'employés individuels, mais le résultat global apparaît sous internal-color-map dans les résultats consolidés.

Vous pouvez convertir le internal-color-map vers label-mappings dans un modèle personnalisé à l'aide du langage de gabarit Liquid :

initial-value="{
  'src' : '{{ task.input.manifestLine.label-attribute-name-from-prior-job| grant_read_access }}',
  'labelMappings': {
     {% for box in task.input.manifestLine.label-attribute-name-from-prior-job-metadata.internal-color-map %}
       {% if box[1]['class-name'] != 'BACKGROUND' %}
         {{ box[1]['class-name'] | to_json }}: {
           'color': {{ box[1]['hex-color'] | to_json }}
         },
       {% endif %} 
     {% endfor %}
   } 
}"

labels

Tableau de chaînes au format JSON. Chaque chaîne est une étiquette qu'un employé peut attribuer à un segment de l'image.

name

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 à segmenter.

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 prises en charge par cet élément.

full-instructions

Instructions générales concernant la procédure de segmentation 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.

labeledImage

Objet JSON contant un PNG encodé en Base64 des étiquettes.

labelMappings

Objet JSON contenant des objets nommés avec les étiquettes de segmentation.

initiale ValueModified

Booléen indiquant si les valeurs initiales ont été modifiées. Ceci n'est inclus que lorsque la sortie provient d'une tâche d'ajustement.

entrée ImageProperties

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.

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "labelMappings": {
        "<Label 2>": {
          "color": "#ff7f0e"
        },
        "<label 3>": {
          "color": "#2ca02c"
        },
        "<label 1>": {
          "color": "#1f77b4"
        }
      },
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Barre avec curseur qui permet à l'employé de sélectionner une valeur de la plage en déplaçant le curseur. Le curseur est parfait pour régler des niveaux d'intensité, comme le volume, la luminosité ou la saturation de la couleur.

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

Voici un exemple de modèle d'enquête qui utilise l'élément <crowd-slider>. 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-instructions link-text="View instructions" link-type="button">
  <short-summary>
    <p>Provide a brief instruction here</p>
  </short-summary>

  <detailed-instructions>
    <h3>Provide more detailed instructions here</h3>
    <p>Include additional information</p>
  </detailed-instructions>

  <positive-example>
    <p>Provide an example of a good answer here</p>
    <p>Explain why it's a good answer</p>
  </positive-example>

  <negative-example>
    <p>Provide an example of a bad answer here</p>
    <p>Explain why it's a bad answer</p>
  </negative-example>
</crowd-instructions>

<div>
  <p>What is your favorite color for a bird?</p>
  <crowd-input name="favoriteColor" placeholder="example: pink" required></crowd-input>
</div>

<div>
  <p>Check this box if you like birds</p>
  <crowd-checkbox name="likeBirds" checked="true" required></crowd-checkbox>
</div>

<div>
  <p>On a scale of 1-10, how much do you like birds?</p>
  <crowd-slider name="howMuch" min="1" max="10" step="1" pin="true" required></crowd-slider>
</div>

<div>
  <p>Write a short essay describing your favorite bird</p>
  <crowd-text-area name="essay" rows="4" placeholder="Lorem ipsum..." required></crowd-text-area>
</div>
</crowd-form>

Attributs

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

disabled

Commutateur booléen qui, s'il est présent, affiche le curseur comme désactivé.

editable

Commutateur booléen qui, s'il est présent, affiche un bouton haut/bas qui peut servir à sélectionner la valeur.

La sélection de la valeur via le bouton haut/bas est une alternative au déplacement de la molette sur le curseur. Le curseur se déplacera de manière synchrone avec le réglage du bouton haut/bas.

max

Nombre qui spécifie la valeur maximale du curseur.

min

Nombre qui spécifie la valeur minimale du curseur.

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.

pin

Commutateur booléen qui, s'il est présent, affiche la valeur actuelle au-dessus du curseur lorsque celui-ci est déplacé.

obligatoire

Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.

secondary-progress

Lorsqu'elle est utilisée avec un attribut CSS crowd-slider-secondary-color, la barre de progression est colorée au point représenté par secondary-progress. Par exemple, s'il s'agissait de représenter la progression d'une vidéo en streaming, value représenterait l'emplacement de l'utilisateur dans la ligne de temps de la vidéo. La valeur secondary-progress représenterait le moment sur la ligne de temps auquel la vidéo a été mise en mémoire tampon.

step

Nombre qui spécifie la différence entre les valeurs sélectionnables sur le curseur.

value

Ce préréglage devient la valeur par défaut si l'employé ne saisit rien.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Composant conçu pour ressembler à un onglet avec les informations ci-dessous.

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

Voici un exemple de modèle qui utilise l'élément <crowd-tab>. 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-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. 
        Pellentesque nulla ipsum ante quisque quam augue. 
        Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. 
        At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, 
        quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, 
        nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

Attributs

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

header

Texte figurant dans l'onglet. Il s'agit généralement d'un nom descriptif court indiquant les informations contenues sous l'onglet.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Conteneur pour des informations à onglets.

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

Voici un exemple de modèle qui utilise l'élément <crowd-tabs>. 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-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. 
        Pellentesque nulla ipsum ante quisque quam augue. 
        Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. 
        At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, 
        quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, 
        nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

Attributs

Cet élément n'a pas d'attributs.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Champ pour la saisie de texte.

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

Voici un exemple de modèle Liquid pour transcrire des clips audio qui utilise l'élément <crowd-text-area>. 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>
  <audio controls>
      <source src="{{ task.input.taskObject | grant_read_access }}" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  <h3>Instructions</h3>
  <p>Transcribe the audio</p>
  <p>Ignore "umms", "hmms", "uhs" and other non-textual phrases</p>
  <crowd-text-area name="transcription" rows="4"></crowd-text-area>
</crowd-form>

Attributs

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

allowed-pattern

Expression régulière utilisée avec l'attribut auto-validate pour ignorer les caractères saisis par l'employé qui ne correspondent pas.

auto-focus

Commutateur booléen qui, s'il est présent, place le curseur dans cet élément en chargement de manière à ce que les utilisateurs puissent immédiatement commencer leur saisie sans avoir à cliquer à l'intérieur de l'élément.

auto-validate

Commutateur booléen qui, s'il est présent, active la validation de la saisie. Le comportement du valideur peut être modifié par les attributs error-message et allowed-pattern.

char-counter

Commutateur booléen qui, s'il est présent, place sous le coin inférieur droit de l'élément un petit champ de texte indiquant le nombre de caractères à l'intérieur de l'élément.

disabled

Commutateur booléen qui, s'il est présent, affiche la zone de saisie comme désactivée.

error-message

Texte à afficher sous le champ de saisie, sur le côté gauche, si la validation échoue.

étiquette

Chaîne qui s'affiche dans un champ de texte.

Ce texte rétrécit et se déplace au-dessus du champ de texte lorsque l'employé commence sa saisie dans le champ ou lorsque l'attribut value est défini.

max-length

Nombre entier qui spécifie le nombre maximal de caractères autorisés par l'élément. Les caractères saisis ou collés au-delà de la valeur maximale sont ignorés.

max-rows

Nombre entier qui indique le nombre maximal de lignes de texte autorisées dans un crowd-text-area. Normalement, l'élément se développe pour accueillir de nouvelles lignes. Si cette valeur est définie, une fois le nombre de lignes dépassé, le contenu défile vers le haut hors de l'affichage et une barre de défilement apparaît.

name

Chaîne utilisée pour représenter les données de l'élément dans la sortie.

placeholder

Chaîne présentée à l'utilisateur sous forme d'espace réservé. Elle disparaît une fois que l'utilisateur saisit quelque chose dans la zone.

rows

Nombre entier qui spécifie la hauteur de l'élément en lignes de texte.

value

Ce préréglage devient la valeur par défaut si l'employé ne saisit rien. Il s'affiche dans un champ de texte.

Hiérarchie des éléments

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

Sortie

Cet élément génère le name comme nom de propriété et le texte de l'élément comme valeur. Les retours chariot du texte sont représentés \n.

[
  {
    "textInput1": "This is the text; the text that\nmakes the crowd go wild."
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Notification discrète qui s'affiche temporairement à l'écran. Seul un élément crowd-toast est visible.

Consultez un exemple interactif de 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-toast>. 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>
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-toast duration="10000" opened>
    This is a message that you want users to see when opening the template. This message will disappear in 10 seconds. 
   </crowd-toast>

</crowd-form>

Attributs

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

duration

Nombre qui spécifie la durée, en millisecondes, pendant laquelle la notification s'affiche à l'écran.

text

Texte à afficher dans la notification.

Hiérarchie des éléments

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

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.

Bouton qui fait office de commutateur ON/OFF et change d'état.

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

L'exemple suivant présente différentes façons d'utiliser l'élément HTML <crowd-toggle-button>. 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>
  <!--Toggle button without value-->
  <crowd-toggle-button name="toggleButtonWithoutValue"></crowd-toggle-button>

  <!--Toggle button with value-->
  <crowd-toggle-button name="toggleButtonWithValue" value="someValue"></crowd-toggle-button>

  <!--Toggle button disabled-->
  <crowd-toggle-button name="toggleButtonDisabled" disabled></crowd-toggle-button>

  <!--Toggle button marked invalid-->
  <crowd-toggle-button name="toggleButtonInvalid" invalid></crowd-toggle-button>

  <!--Toggle button marked required-->
  <crowd-toggle-button name="toggleButtonRequired" required></crowd-toggle-button>
</crowd-form>

Attributs

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

checked

Commutateur booléen qui, s'il est présent, affiche le bouton en position ON.

disabled

Commutateur booléen qui, s'il est présent, affiche le bouton comme étant désactivé et empêche le basculement.

invalid

S'il est en position OFF, un bouton utilisant cet attribut s'affiche dans une couleur d'alerte. La couleur standard est rouge, mais elle peut être modifiée dans CSS. Lorsqu'il bascule en position ON, le bouton s'affiche dans la même couleur que les autres boutons en position ON.

name

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

obligatoire

Commutateur booléen qui, s'il est présent, nécessite une saisie de la part de l'employé.

value

Valeur utilisée dans la sortie comme nom de propriété pour l'état booléen de l'élément. La valeur par défaut est « on » si elle n'est pas spécifiée.

Hiérarchie des éléments

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

Sortie

Cet élément génère le name comme nom d'objet et contient value comme nom de propriété et l'état de l'élément comme valeur booléenne de la propriété. Si aucune valeur n'est spécifiée pour l'élément, le nom de propriété par défaut est « on ».

[
  {
    "theToggler": {
      "on": true
    }
  }
]

consultez aussi

Pour plus d’informations, consultez les rubriques suivantes.