Développement des modèles localement Utilisation de ressources externes Suivi de vos variables Exemple de modèle personnalisé pour Amazon Textract Exemple de modèle personnalisé pour Amazon Rekognition Ajout de l'automatisation avec Liquid Aperçu d'un modèle de tâche d'employé

Créer des modèles de tâches d'employé personnalisés

Les éléments HTML Crowd sont des composants web qui fournissent un certain nombre de widgets de tâche et d'éléments de conception que vous pouvez adapter à la question que vous voulez poser. Vous pouvez utiliser ces éléments Crowd pour créer un modèle d'employé personnalisé et l'intégrer à un flux de vérification humaine Amazon Augmented AI (Amazon A2I) pour personnaliser la console d'employé et les instructions.

Pour obtenir la liste de tous les éléments HTML Crowd auxquels les utilisateurs Amazon A2I ont accès, veuillez consulter Référence des éléments HTML crowd. Pour afficher des exemples de modèles, veuillez accéder au AWSréférentiel Github, qui contient plus de 60 exemples de modèles de tâches personnalisés.

Développement des modèles localement

Lorsque vous êtes dans la console pour tester la façon dont votre modèle traite les données entrantes, vous pouvez tester l'apparence des éléments HTML et personnalisés de votre modèle dans votre navigateur en ajoutant le code suivant en haut du fichier HTML.


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

Cela charge le code nécessaire pour afficher les éléments HTML personnalisés. Utilisez ce code si vous voulez développer l'apparence de votre modèle dans votre éditeur préféré plutôt que dans la console.

Ce code n'analysera pas vos variables. Vous souhaiterez peut-être les remplacer par des exemples de contenu pendant le développement en local.

Utilisation de ressources externes

Les modèles personnalisés Amazon Augmented AI vous permettent d'incorporer des scripts externes et des feuilles de style. Par exemple, l'en-tête suivant incorpore un nom de feuille de style text/css stylesheet situé à l'adresse https://www.example.com/my-enhancement-styles.css dans le modèle personnalisé.


<script src="https://www.example.com/my-enhancment-script.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.example.com/my-enhancement-styles.css">

Si vous rencontrez des erreurs, veillez à ce que votre serveur d'origine envoie le type MIME et les en-têtes d'encodage corrects avec les ressources.

Par exemple, le type d'encodage et MIME des scripts distants est : application/javascript;CHARSET=UTF-8.

Le type d'encodage et MIME pour les feuilles de style distantes est : text/css;CHARSET=UTF-8.

Suivi de vos variables

Lors de la création d'un modèle personnalisé, vous devez y ajouter des variables pour représenter les éléments de données susceptibles de changer d'une tâche à une autre ou d'un employé à un autre. Si vous commencez avec l'un des exemples de modèles, vous devez connaître les variables qu'il utilise déjà.

Par exemple, pour un modèle personnalisé qui intègre une boucle de vérification humaine Augmented AI avec une tâche de vérification de texte Amazon Textract, {{ task.input.selectedAiServiceResponse.blocks }} est utilisé pour les données d'entrée de valeur initiale. Pour l'intégration d'Amazon Augmented AI (Amazon A2I) avec Amazon Rekognition, {{ task.input.selectedAiServiceResponse.moderationLabels }} est utilisé. Pour un type de tâche personnalisé, vous devez déterminer le paramètre d'entrée correspondant à votre type de tâche. Utilisez {{ task.input.customInputValuesForStartHumanLoop}} là où vous spécifiez customInputValuesForStartHumanLoop.

Exemple de modèle personnalisé pour Amazon Textract

Pour une tâche d'analyse de document Amazon Textract, utilisez l'<crowd-textract-analyze-document>élément . Contient les attributs suivants :

src - Spécifie l'URL du fichier image à annoter.
initialValue - Définit les valeurs initiales des attributs trouvés dans l'UI d'employé.
blockTypes (obligatoire) - Détermine le type d'analyse que les employés peuvent effectuer. KEY_VALUE_SET est le seul à être pris en charge actuellement.
keys (obligatoire) - Spécifie les nouvelles clés et la valeur de texte associée que l'employé peut ajouter.
no-key-edit (obligatoire) - Empêche les employés de modifier les clés des annotations transmises par initialValue.
no-geometry-edit – Empêche les employés de modifier les polygones des annotations transmises par initialValue.

Deux régions doivent être utilisées comme enfants de l'élément <crowd-textract-analyze-document>. Vous pouvez utiliser des éléments HTML et CSS arbitraires dans ces régions.

<full-instructions> - Instructions disponibles à partir du lien View full instructions (Afficher les instructions complètes) dans l'outil. Vous pouvez laisser ce champ vide, mais nous vous recommandons de fournir des instructions complètes pour obtenir de meilleurs résultats.
<short-instructions> - Brève description de la tâche qui apparaît dans la barre latérale de l'outil. Vous pouvez laisser ce champ vide, mais nous vous recommandons de fournir des instructions complètes pour obtenir de meilleurs résultats.

Un modèle Amazon Textract ressemblerait à ce qui suit.


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
{% capture s3_uri %}http://s3.amazonaws.com/{{ task.input.aiServiceRequest.document.s3Object.bucket }}/{{ task.input.aiServiceRequest.document.s3Object.name }}{% endcapture %}

<crowd-form>
  <crowd-textract-analyze-document
    src="{{ s3_uri | grant_read_access }}"
    initial-value="{{ task.input.selectedAiServiceResponse.blocks }}"
    header="Review the key-value pairs listed on the right and correct them if they don't match the following document."
    no-key-edit
    no-geometry-edit
    keys="{{ task.input.humanLoopContext.importantFormKeys }}"
    block-types="['KEY_VALUE_SET']"
  >
    <short-instructions header="Instructions">
      <style>
        .instructions {
          white-space: pre-wrap;
        }
        .instructionsImage {
          display: inline-block;
          max-width: 100%;
        }
      </style>
      <p class='instructions'>Choose a key-value block to highlight the corresponding key-value pair in the document.

If it is a valid key-value pair, review the content for the value. If the content is incorrect, correct it.

The text of the value is incorrect, correct it.
<img class='instructionsImage' src="https://example-site/correct-value-text.png" />

A wrong value is identified, correct it.
<img class='instructionsImage' src="https://example-site/correct-value.png" />

If it is not a valid key-value relationship, choose No.
<img class='instructionsImage' src="https://example-site/not-a-key-value-pair.png" />

If you can’t find the key in the document, choose Key not found.
<img class='instructionsImage' src="https://example-site/key-is-not-found.png" />

If the content of a field is empty, choose Value is blank.
<img class='instructionsImage' src="https://example-site/value-is-blank.png" />

<b>Examples</b>
Key and value are often displayed next to or below to each other.

Key and value displayed in one line.
<img class='instructionsImage' src="https://example-site/sample-key-value-pair-1.png" />

Key and value displayed in two lines.
<img class='instructionsImage' src="https://example-site/sample-key-value-pair-2.png" />

If the content of the value has multiple lines, enter all the text without a line break. Include all value text even if it extends beyond the highlight box.
<img class='instructionsImage' src="https://assets.crowd.aws/images/a2i-console/multiple-lines.png" /></p>
    </short-instructions>

    <full-instructions header="Instructions"></full-instructions>
  </crowd-textract-analyze-document>
</crowd-form>

Exemple de modèle personnalisé pour Amazon Rekognition

Tous les modèles personnalisés commencent et se terminent par les éléments <crowd-form> </crowd-form>. Comme les éléments <form> HTML standard, l'ensemble de votre code de formulaire doit figurer entre ces éléments. Pour un modèle de tâche personnalisée Amazon Rekognition, utilisez l'élément <crowd-rekognition-detect-moderation-labels>. Cet élément prend en charge les attributs suivants :

categories - Un tableau de chaînes ou un tableau d'objets où chaque objet comporte un champ name.
- Si les catégories sont fournies sous la forme d'objets, ce qui suit s'applique :
  - Les catégories affichées correspondent à la valeur du champ name.
  - La réponse renvoyée contient les objets complets de toutes les catégories sélectionnées.
- Si les catégories sont fournies sous la forme de chaînes, ce qui suit s'applique :
  - La réponse renvoyée est un tableau de toutes les chaînes qui ont été sélectionnées.
exclusion-category - En définissant cet attribut, vous créez un bouton sous les catégories de l'UI. Lorsqu'un utilisateur sélectionne le bouton, toutes les catégories sont désélectionnées et désactivées. Si l'employé sélectionne à nouveau le bouton, vous réautorisez les utilisateurs à choisir des catégories. Si l'employé envoie la tâche en sélectionnant le bouton Submit (Envoyer) après que vous ayez sélectionné le bouton, cette tâche renvoie un tableau vide.

Deux régions doivent être utilisées comme enfants de l'élément <crowd-rekognition-detect-moderation-labels>.

<full-instructions> - Instructions disponibles à partir du lien View full instructions (Afficher les instructions complètes) dans l'outil. Vous pouvez laisser ce champ vide, mais nous vous recommandons de fournir des instructions complètes pour obtenir de meilleurs résultats.
<short-instructions> - Brève description de la tâche qui apparaît dans la barre latérale de l'outil. Vous pouvez laisser ce champ vide, mais nous vous recommandons de fournir des instructions complètes pour obtenir de meilleurs résultats.

Un modèle utilisant ces éléments ressemblerait au modèle suivant.


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
{% capture s3_uri %}http://s3.amazonaws.com/{{ task.input.aiServiceRequest.image.s3Object.bucket }}/{{ task.input.aiServiceRequest.image.s3Object.name }}{% endcapture %}

<crowd-form>
  <crowd-rekognition-detect-moderation-labels
    categories='[
      {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
        {
          name: "{{ label.name }}",
          parentName: "{{ label.parentName }}",
        },
      {% endfor %}
    ]'
    src="{{ s3_uri | grant_read_access }}"
    header="Review the image and choose all applicable categories."
  >
    <short-instructions header="Instructions">
      <style>
        .instructions {
          white-space: pre-wrap;
        }
      </style>
      <p class='instructions'>Review the image and choose all applicable categories.
If no categories apply, choose None.

<b>Nudity</b>
Visuals depicting nude male or female person or persons

<b>Graphic Male Nudity</b>
Visuals depicting full frontal male nudity, often close ups

<b>Graphic Female Nudity</b>
Visuals depicting full frontal female nudity, often close ups

<b>Sexual Activity</b>
Visuals depicting various types of explicit sexual activities and pornography

<b>Illustrated Nudity or Sexual Activity</b>
Visuals depicting animated or drawn sexual activity, nudity, or pornography

<b>Adult Toys</b>
Visuals depicting adult toys, often in a marketing context

<b>Female Swimwear or Underwear</b>
Visuals depicting female person wearing only swimwear or underwear

<b>Male Swimwear Or Underwear</b>
Visuals depicting male person wearing only swimwear or underwear

<b>Partial Nudity</b>
Visuals depicting covered up nudity, for example using hands or pose

<b>Revealing Clothes</b>
Visuals depicting revealing clothes and poses, such as deep cut dresses

<b>Graphic Violence or Gore</b>
Visuals depicting prominent blood or bloody injuries

<b>Physical Violence</b>
Visuals depicting violent physical assault, such as kicking or punching

<b>Weapon Violence</b>
Visuals depicting violence using weapons like firearms or blades, such as shooting

<b>Weapons</b>
Visuals depicting weapons like firearms and blades

<b>Self Injury</b>
Visuals depicting self-inflicted cutting on the body, typically in distinctive patterns using sharp objects

<b>Emaciated Bodies</b>
Visuals depicting extremely malnourished human bodies

<b>Corpses</b>
Visuals depicting human dead bodies

<b>Hanging</b>
Visuals depicting death by hanging</p>
    </short-instructions>

    <full-instructions header="Instructions"></full-instructions>
  </crowd-rekognition-detect-moderation-labels>
</crowd-form>

Ajout de l'automatisation avec Liquid

Notre système de modèle personnalisé utilise Liquid pour l'automatisation. Liquid est un langage de balisage open source en ligne. Pour de plus amples informations et accéder à la documentation, veuillez consulter la page d'accueil de Liquid.

Dans Liquid, le texte entre accolades simples et symboles de pourcentage est une instruction ou balise qui exécute une opération telle qu'un flux de contrôle ou une itération. Le texte entre accolades doubles est une variable ou un objet qui génère sa valeur. La liste suivante comprend deux types de balises Liquid qui peuvent être utiles pour automatiser le traitement des données d'entrée de modèle. La sélection de l'un des types de balises suivants, vous redirige vers la documentation Liquid.

Contrôle de flux : inclut des opérateurs logiques de programmation tels que if/else, unless etcase/when.
Itération : vous permet d'exécuter des blocs de code de façon répétée en utilisant des instructions comme pour les boucles.

Par exemple, l'exemple de code suivant illustre la façon dont vous pouvez utiliser la balise Liquid for pour créer une boucle for. Cet exemple exécute une boucle sur les moderationLabels retournées par Amazon Rekognition et affiche les attributs moderationLabels name et parentName que les employés doivent vérifier :
```
 {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
    {
      name: &quot;{{ label.name }}&quot;,
      parentName: &quot;{{ label.parentName }}&quot;,
    },
 {% endfor %}
```

Utilisation de filtres de variables

En plus des filtres Liquid et des actions standard, Amazon Augmented AI (Amazon A2I) propose des filtres supplémentaires. Vous appliquez des filtres en plaçant une barre verticale (|) après le nom de la variable, puis en spécifiant un nom de filtre. Pour enchaîner des filtres, utilisez le format suivant.


{{ <content> | <filter> | <filter> }}

Échappement automatique et échappement explicite

Par défaut, les entrées sont placées dans une séquence d'échappement HTML pour éviter toute confusion entre le texte de votre variable et le code HTML. Vous pouvez ajouter explicitement le filtre escape afin que les personnes qui lisent la source de votre modèle comprennent qu'il s'agit d'un échappement.

escape_once

escape_once s'assure que votre code ne sera pas placé dans une seconde séquence d'échappement alors qu'il l'est déjà. Il s'assure, par exemple, que &amp; ne devienne pas &.

skip_autoescape

skip_autoescape est utile si votre contenu est destiné à être utilisé en tant que code HTML. Par exemple, vous pouvez avoir quelques paragraphes de texte et des images dans les instructions complètes d'un cadre de délimitation.

Note

Utilisez skip_autoescape avec modération. À titre de bonne pratique pour les modèles, évitez de transmettre du code fonctionnel ou du balisage avec skip_autoescape, sauf si vous êtes absolument certain que vous maîtrisez parfaitement ce qui est transmis. Si vous transmettez l'entrée d'un utilisateur, vous risquez d'exposer vos employés à une attaque de script intersite.

to_json

to_json code les données que vous fournissez à JavaScript Object Notation (JSON). Si vous fournissez un objet, il le sérialise.

grant_read_access

grant_read_access prend un URI Amazon Simple Storage Service (Amazon S3) et l'encode dans une URL HTTPS avec un jeton d'accès de courte durée pour cette ressource. Cela permet de montrer des objets photo, audio ou vidéo stockés dans des compartiments S3 qui ne sont pas autrement accessibles publiquement aux employés.

Exemple de filtres to_json et grant_read_access

Entrée


auto-escape: {{ "Have you read 'James & the Giant Peach'?" }}
explicit escape: {{ "Have you read 'James & the Giant Peach'?" | escape }}
explicit escape_once: {{ "Have you read 'James &amp; the Giant Peach'?" | escape_once }}
skip_autoescape: {{ "Have you read 'James & the Giant Peach'?" | skip_autoescape }}
to_json: {{ jsObject | to_json }}                
grant_read_access: {{ "s3://examplebucket/myphoto.png" | grant_read_access }}

Sortie


auto-escape: Have you read &#39;James &amp; the Giant Peach&#39;?
explicit escape: Have you read &#39;James &amp; the Giant Peach&#39;?
explicit escape_once: Have you read &#39;James &amp; the Giant Peach&#39;?
skip_autoescape: Have you read 'James & the Giant Peach'?
to_json: { "point_number": 8, "coords": [ 59, 76 ] }
grant_read_access: https://s3.amazonaws.com/examplebucket/myphoto.png?<access token and other params>

Exemple Exemple de modèle de classification automatique.

Pour automatiser cet exemple de classification de texte simple, incluez la balise Liquid {{ task.input.source }}. Cet exemple utilise l'élément crowd-classifier.


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-classifier 
    name="tweetFeeling"
    categories="['positive', 'negative', 'neutral', 'cannot determine']"
    header="Which term best describes this tweet?" 
  >
    <classification-target>
       {{ task.input.source }}
    </classification-target>

    <full-instructions header="Analyzing a sentiment">
      Try to determine the feeling the author 
      of the tweet is trying to express. 
      If none seems to match, choose "other."
    </full-instructions>

    <short-instructions>
      Pick the term that best describes the sentiment 
      of the tweet. 
    </short-instructions>

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

Aperçu d'un modèle de tâche d'employé

Pour prévisualiser un modèle de tâche d'employé personnalisé, utilisez l'opération SageMaker RenderUiTemplate. Vous pouvez utiliser l'opération RenderUiTemplate avec la AWS CLI ou votre kit SDK AWS préféré. Pour obtenir la documentation relative aux kits SDK spécifiques au langage pris en charge pour cette opération d'API, consultez la section See Also dans RenderUiTemplate.

Prérequis

Pour afficher un aperçu de votre modèle de tâche d'employé, l'Amazon Resource Name (ARN) du rôle AWS Identity and Access Management (IAM), ou RoleArn, que vous utilisez doit être autorisé d'accéder aux objets S3 utilisés par le modèle. Pour savoir comment configurer votre rôle ou votre utilisateur, veuillez consulter Activation des aperçus du modèle de tâche de travail .

Pour afficher un aperçu de votre modèle de tâche d'employé à l'aide de l'opération `RenderUiTemplate` :

Fournissez un RoleArn du rôle avec les stratégies requises jointes pour afficher un aperçu de votre modèle personnalisé.
Dans le paramètre Input de Task, fournissez un objet JSON contenant des valeurs pour les variables définies dans le modèle. Il s'agit des variables qui sont substituées à la variable task.input.source. Par exemple, si vous définissez une variable task.input.text dans votre modèle, vous pouvez fournir la variable dans l'objet JSON sous la forme text : sample text.
Dans le paramètre Content de UiTemplate, insérez votre modèle.

Après aoir configuré RenderUiTemplate, utilisez votre kit SDK préféré ou la AWS CLI pour envoyer une demande de rendu de votre modèle. Si votre demande a réussi, la réponse comprendra RenderedContent, un modèle Liquid qui rend le code HTML de l'UI d'employé.

Important

Pour prévisualiser votre modèle, vous avez besoin d'un rôle IAM disposant d'autorisations pour lire des objets Amazon S3 qui sont rendus sur votre interface utilisateur. Pour obtenir un exemple de stratégie que vous pouvez attacher à votre rôle IAM pour accorder ces autorisations, veuillez consulter Activation des aperçus du modèle de tâche de travail .

Avertissement JavaScript est désactivé ou n'est pas disponible dans votre navigateur.

Pour que vous puissiez utiliser la documentation AWS, Javascript doit être activé. Vous trouverez des instructions sur les pages d'aide de votre navigateur.

Conventions de rédaction

Créer et supprimer des modèles de tâches d'employé

Créer de bonnes instructions de travail