SageMaker HTMLÉléments de l'IA Crowd

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

Consultez un exemple interactif de HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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 soit le nom d'une icône du jeu open source iron-icons, qui est préchargé, soit le URL nom 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 en fer à un <crowd-badge> HTML élément. 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 HTML modèle utilisant cet HTML élément de foule 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

Le URL vers 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

A URL vers 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

Lorsque vous utilisez l'hrefattribut pour que le bouton agisse comme un lien hypertexte vers un élément spécifiqueURL, l'targetattribut cible éventuellement un cadre ou une fenêtre dans lequel le lien URL doit être chargé.

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 HTML modèle utilisant cet HTML élément de foule 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

Un tableau d'JSONobjets dont chacun définit un cadre de délimitation lorsque le composant est chargé. Chaque JSON objet du tableau contient 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

Un tableau JSON formaté de chaînes, chacune étant une étiquette qu'un utilisateur peut attribuer à la partie de l'image entourée d'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

URLL'image sur laquelle dessiner les 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

Un tableau d'JSONobjets, dont chacun indique un cadre de délimitation créé par le travailleur. Chaque JSON objet du tableau contient les propriétés suivantes.

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. 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 HTML modèle utilisant cet HTML élément de foule 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

A URL vers une image à afficher dans la boîte.

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 HTML modèle utilisant cet HTML élément de foule 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é de l'JSONobjet 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 JSON objet. 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 HTML modèle utilisant cet HTML élément de foule dans CodePen.

Voici un exemple de modèle de tâche de HTML travail créé à l'aide decrowd-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

Un tableau JSON formaté de chaînes, chacune étant une catégorie qu'un utilisateur 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é. Cela peut être du texte brut ouHTML. Les HTML exemples d'utilisation incluent, sans toutefois s'y limiter, l'intégration d'un lecteur vidéo ou audio, l'intégration d'une PDF ou la comparaison de 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 HTML modèle utilisant cet HTML élément de foule dans CodePen.

Voici un exemple de modèle de tâches de HTML travail 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. Un tableau de chaînes JSON au format -formaté, chacune d'elles étant une catégorie qu'un utilisateur 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. Une chaîne JSON au format -formaté 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 du texte brut ou un objet que vous spécifiez dans le modèle à l'aide de ce dernierHTML. Par exemple, vous pouvez utiliser HTML des éléments pour inclure un lecteur vidéo ou audio, intégrer un PDF fichier ou inclure une comparaison de deux images ou plus.

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 HTML modèle utilisant cet HTML élément de foule 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 JSON formaté d'objets, dont chacun définit 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

Un tableau JSON formaté d'objets, dont chacun contient :

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

name

Sert de nom du widget dans leDOM. 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 création de modèles évite les guillemets et les HTML chaînes 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

JSONObjet qui indique le début, la fin et le libellé 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 HTML modèle utilisant cet HTML élément de foule 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 soit le nom d'une icône du jeu open source iron-icons, qui est préchargé, soit le URL nom d'une icône personnalisée.

Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône en fer à un <crowd-fab> HTML élément. 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 HTML modèle utilisant cet HTML élément de foule 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'crowd-formélément étend l'HTMLformélément standard et hérite de ses événements, tels que onclick etonsubmit.

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 HTML modèle utilisant cet HTML élément de foule 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 soit le nom d'une icône du jeu open source iron-icons, qui est préchargé, soit le URL nom d'une icône personnalisée.

Voici un exemple de syntaxe que vous pouvez utiliser pour ajouter une icône en fer à un <crowd-icon-button> HTML élément. 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 BMPGIF,,ICO,JPEG,PNG,SVG. Les images n'ont pas de limite de taille.

Consultez un exemple interactif de HTML modèle utilisant cet HTML élément de foule 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

Un tableau JSON formaté de chaînes, chacune étant une catégorie qu'un utilisateur 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 JSON objet contenant un objet dont le nom du type de tâche est indiqué 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

URLL'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 BMPGIF,,ICO,JPEG,PNG,SVG. Les images n'ont pas de limite de taille.

Consultez un exemple interactif de HTML modèle utilisant cet HTML élément de foule dans CodePen.

Voici un exemple de modèle de tâche de HTML travailleur créé à l'aide de cet élément de foule. 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. Un tableau de chaînes JSON au format -formaté, dont chacune est une catégorie qu'un utilisateur 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. URLL'image à classer.

catégorie d'exclusion

Facultatif. Une chaîne JSON au format -formaté 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 HTML modèle utilisant cet HTML élément de foule 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 l'entrée à utiliser dans DOM et dans 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îne pour définir le HTML5 input-type comportement de l'entrée. 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 HTML modèle utilisant cet HTML élément de foule 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

Un tableau JSON formaté de chaînes, chacune étant une étiquette qu'un utilisateur 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

URLL'image qui doit être étiquetée.

initial-value

Un JSON objet contenant les mappages de couleurs d'une tâche de segmentation d'instance précédente et un lien vers l'image de superposition produite 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

Un JSON objet contenant un code Base64 PNG des étiquettes.

Instances

Un JSON tableau contenant des objets avec les étiquettes et les couleurs de l'instance.

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. 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 HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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 JSON format, de points clés à appliquer à l'image au démarrage. Par exemple :

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

labels

Tableau, au JSON format, de chaînes à utiliser comme étiquettes d'annotation de points clés.

name

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

src

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

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. Cet objet contient les propriétés suivantes.

keypoints

Tableau d'JSONobjets 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 HTML modèle utilisant cet HTML élément de foule 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. Un tableau d'JSONobjets dont chacun définit une ligne lorsque le composant est chargé. Chaque JSON objet du tableau contient 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. Un tableau JSON formaté de chaînes, chacune étant une étiquette qu'un utilisateur peut attribuer à la 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. URLL'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

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. Cet objet contient les propriétés suivantes.

lines

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

{
    "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 HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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

Un tableau JSON formaté de chaînes, chacune étant une étiquette qu'un utilisateur peut attribuer à la partie de l'image entourée par 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

URLL'image sur laquelle dessiner des polygones.

initial-value

Un tableau d'JSONobjets, dont chacun définit un polygone à dessiner lorsque le composant est chargé. Chaque JSON objet du tableau contient 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'JSONobjets, dont chacun décrit un polygone créé par le travailleur. Chaque JSON objet du tableau contient les propriétés suivantes.

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. 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 HTML modèle utilisant cet HTML élément de foule 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'JSONobjets dont chacun définit une polyligne lorsque le composant est chargé. Chaque JSON objet du tableau contient 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. Un tableau JSON formaté de chaînes, chacune étant une étiquette qu'un utilisateur peut attribuer à la 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. URLL'image sur laquelle dessiner des polylignes.

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

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. Cet objet contient les propriétés suivantes.

polylines

Un JSON tableau contenant des objets avec des étiquettes et des sommets de polylignes.

 {
    "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 HTML modèle utilisant cet HTML élément de foule 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 Crowd HTML Element ne supportent pas le HTML tag,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é de l'JSONobjet 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 HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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

Un JSON objet contenant les mappages de couleurs d'une tâche de segmentation sémantique précédente et un lien vers l'image de superposition produite 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

Un tableau JSON formaté de chaînes, chacune étant une étiquette qu'un utilisateur 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

Celui 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

Un JSON objet contenant un code Base64 PNG des étiquettes.

labelMappings

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

initialValueModified

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.

inputImageProperties

JSONObjet qui spécifie les dimensions de l'image annotée par le travailleur. 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 HTML modèle utilisant cet HTML élément de foule 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.

Sélection de la valeur via les choix des up/down button is an alternative to selecting the value by moving the knob on the slider. The knob on the slider will move synchronously with the up/down boutons.

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é de l'JSONobjet 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 crowd-slider-secondary-color CSS attribut, la barre de progression est colorée au point représenté par lesecondary-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 HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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 HTML modèle utilisant cet HTML élément de foule 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.

Un bouton qui agit comme un interrupteur ON/ qui permet de OFF passer d'un état à un autre.

Consultez un exemple interactif de HTML modèle utilisant cet HTML élément de foule dans CodePen.

L'exemple suivant montre les différentes manières d'utiliser l'<crowd-toggle-button>HTMLé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>
  <!--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 norme est rouge, mais elle peut être modifiéeCSS. 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é de l'JSONobjet 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.