Lokales Entwickeln von Vorlagen Verwenden externer Komponenten Verfolgen Ihrer Variablen Beispiel für eine benutzerdefinierte Vorlage für Amazon Textract Beispiel für eine benutzerdefinierte Vorlage für Amazon Rekognition Hinzufügen von Automatisierung mit Liquid Vorschau einer Vorlage für Auftragnehmeraufgaben

Erstellen benutzerdefinierter Auftragnehmervorlagen

Crowd-HTML-Elemente sind Webkomponenten, die eine Reihe von Aufgaben-Widgets und Designelementen bereitstellen, die Sie auf die zu stellende Frage zuschneiden können. Sie können diese Crowd-Elemente verwenden, um eine benutzerdefinierte Arbeitsvorlage zu erstellen und sie mit einem Amazon Augmented AI (Amazon A2I) menschlichen Überprüfungsworkflow zu integrieren, um die Arbeitskonsole und Anweisungen anzupassen.

Eine Liste aller HTML-Crowd-Elemente, die für Amazon A2I-Benutzer verfügbar sind, finden Sie unter Referenz der Crowd-HTML-Elemente. Beispiele für Vorlagen finden Sie im AWSGitHub-Repository, das über 60 Beispielvorlagen für benutzerdefinierte Aufgaben enthält.

Lokales Entwickeln von Vorlagen

Wenn Sie in der Konsole testen, wie Ihre Vorlage eingehende Daten verarbeitet, können Sie das Aussehen der HTML- und benutzerdefinierten Elemente Ihrer Vorlage in Ihrem Browser testen, indem Sie den folgenden Code am Anfang Ihrer HTML-Datei hinzufügen.


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

Dies lädt den erforderlichen Code zum Rendern der benutzerdefinierten HTML-Elemente. Verwenden Sie diesen Code, wenn Sie das Erscheinungsbild Ihrer Vorlage lieber in Ihrem bevorzugten Editor anstatt in der Konsole entwickeln möchten.

Dieser Code analysiert Ihre Variablen nicht. Möglicherweise möchten Sie diese mit Beispielinhalten ersetzen, während Sie lokal entwickeln.

Verwenden externer Komponenten

Mit den benutzerdefinierten Vorlagen von Amazon Augmented AI können Sie externe Skripte und Stylesheets einbetten. Die folgende Kopfzeile bettet beispielsweise ein text/css-Stylesheet namens stylesheet, das sich unter https://www.example.com/my-enhancement-styles.css befindet, in die benutzerdefinierte Vorlage ein.


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

Wenn Fehler auftreten, stellen Sie sicher, dass Ihr Ursprungsserver den richtigen MIME-Typ und die richtigen Kodierungskopfzeilen mit den Assets sendet.

Der MIME- und Kodierungstyp für entfernte Skripte ist zum Beispiel application/javascript;CHARSET=UTF-8.

Der MIME- und Kodierungs-Typ für Remote-Stylesheets ist text/css;CHARSET=UTF-8.

Verfolgen Ihrer Variablen

Beim Erstellen einer benutzerdefinierten Vorlage müssen Sie Variablen für die Datenteile hinzufügen, die sich von Aufgabe zu Aufgabe oder von Auftragnehmer zu Auftragnehmer ändern können. Wenn Sie mit einer der Beispielvorlagen beginnen, müssen Sie sicherstellen, dass Sie wissen, welche Variablen bereits verwendet werden.

Für eine benutzerdefinierte Vorlage, die eine Augmented AI-Bewertungsschleife mit einer Amazon Textract-Textbewertungsaufgabe integriert, wird beispielsweise {{ task.input.selectedAiServiceResponse.blocks }} für die Eingabedaten der Anfangswerte verwendet. Für Amazon Augmented AI (Amazon A2I) wird {{ task.input.selectedAiServiceResponse.moderationLabels }} mit Amazon Rekognition verwendet. Für einen benutzerdefinierten Aufgabentyp müssen Sie den Eingabeparameter für Ihren Aufgabentyp bestimmen. Verwenden Sie {{ task.input.customInputValuesForStartHumanLoop}} dort, wo sie customInputValuesForStartHumanLoop angeben.

Beispiel für eine benutzerdefinierte Vorlage für Amazon Textract

Verwenden Sie das <crowd-textract-analyze-document> Element für eine Amazon Textract Textract-Dokumentenanalyseaufgabe. Es verwendet die folgenden Attribute:

src – Gibt die URL der Bilddatei an, die mit Anmerkungen versehen werden soll.
initialValue – Legt die Anfangswerte für die Attribute in der Auftragnehmer-Benutzeroberfläche fest.
blockTypes (erforderlich) - Bestimmt die Art der Analyse, die die Auftragnehmer durchführen können. Derzeit wird nur KEY_VALUE_SET unterstützt.
keys (erforderlich) - Gibt neue Schlüssel und den zugehörigen Textwert an, den der Auftragnehmer hinzufügen kann.
no-key-edit (erforderlich) - Verhindert, dass die Arbeiter die Schlüssel der durch initialValue übermittelten Anmerkungen bearbeiten.
no-geometry-edit – Verhindert, dass Auftragnehmer die Polygone von Anmerkungen, die durch initialValue weitergegeben werden, bearbeiten können.

Für untergeordnete Elemente des <crowd-textract-analyze-document>-Elements müssen Sie zwei Regionen haben. Sie können beliebige HTML- und CSS-Elemente in diesen Regionen verwenden.

<full-instructions> – Anweisungen, die über den Link Vollständige Anweisungen anzeigen im Tool verfügbar sind. Sie können dieses Feld leer lassen, aber wir empfehlen Ihnen, vollständige Anweisungen zu geben, um bessere Ergebnisse zu erzielen.
<short-instructions> – Eine kurze Beschreibung der Aufgabe, die in der Seitenleiste des Werkzeugs angezeigt wird. Sie können dieses Feld leer lassen, aber wir empfehlen Ihnen, vollständige Anweisungen zu geben, um bessere Ergebnisse zu erzielen.

Eine Amazon Textract-Vorlage würde ähnlich wie die folgende aussehen.


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

Beispiel für eine benutzerdefinierte Vorlage für Amazon Rekognition

Alle benutzerdefinierten Vorlagen beginnen und enden mit den <crowd-form> </crowd-form>-Elementen. Wie bei Standard-HTML-Elementen <form> sollte der gesamte Formularcode zwischen diesen Elementen platziert werden. Für eine benutzerdefinierte Amazon Rekognition-Aufgabenvorlage verwenden Sie das Element <crowd-rekognition-detect-moderation-labels>. Dieses Element unterstützt die folgenden Attribute:

categories – Eine Reihe von Zeichenketten oder eine Reihe von Objekten, wobei jedes Objekt ein name-Feld hat.
- Wenn die Kategorien als Objekte eingestuft werden, gilt Folgendes:
  - Die angezeigten Kategorien sind der Wert des Feldes name.
  - Die zurückgegebene Antwort enthält die vollständigen Objekte aller ausgewählten Kategorien.
- Wenn die Kategorien als Zeichenfolgen eingestuft werden, gilt Folgendes:
  - Die zurückgegebene Antwort ist ein Array aller Zeichenfolgen, die ausgewählt wurden.
exclusion-category – Durch Festlegen dieses Attributs erstellen Sie eine Schaltfläche unterhalb der Kategorien in der Benutzeroberfläche. Wenn ein Benutzer die Schaltfläche anklickt, werden alle Kategorien abgewählt und deaktiviert. Wenn der Auftragnehmer die Schaltfläche erneut auswählt, können die Benutzer wieder Kategorien auswählen. Wenn der Auftragnehmer die Aufgabe abgibt, indem er Absenden wählt, nachdem Sie die Schaltfläche ausgewählt haben, gibt diese Aufgabe ein leeres Array zurück.

Für untergeordnete Elemente des <crowd-rekognition-detect-moderation-labels>-Elements müssen Sie zwei Regionen haben.

<full-instructions> – Anweisungen, die über den Link Vollständige Anweisungen anzeigen im Tool verfügbar sind. Sie können dieses Feld leer lassen, aber wir empfehlen Ihnen, vollständige Anweisungen zu geben, um bessere Ergebnisse zu erzielen.
<short-instructions> – Kurze Beschreibung der Aufgabe, die in der Seitenleiste des Werkzeugs angezeigt wird. Sie können dieses Feld leer lassen, aber wir empfehlen Ihnen, vollständige Anweisungen zu geben, um bessere Ergebnisse zu erzielen.

Eine Vorlage, die diese Elemente verwendet, würde ungefähr wie folgt aussehen.


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

Hinzufügen von Automatisierung mit Liquid

Das benutzerdefinierte Vorlagensystem verwendet Liquid zur Automatisierung. Liquid ist eine Open-Source Inline Markup Language. Weitere Informationen und Dokumentationen finden Sie auf der Liquid-Homepage.

In Liquid ist der Text zwischen einzelnen geschweiften Klammern und Prozentzeichen eine Anweisung oder ein tag, das eine Operation wie Kontrollfluss oder Iteration durchführt. Text zwischen doppelten geschweiften Klammern ist eine Variable oder ein Objekt zum Ausgeben des Werts. Die folgende Liste enthält zwei Arten von Liquid-Tags, die für Sie nützlich sein könnten, um die Verarbeitung von Vorlageneingabedaten zu automatisieren. Wenn Sie einen der folgenden Tag-Typen auswählen, werden Sie zur Liquid-Dokumentation weitergeleitet.

Kontrollfluss: Beinhaltet Programmierlogik-Operatoren wie if/else,unless, und. case/when
Iteration: Ermöglicht das wiederholte Ausführen von Codeblöcken mithilfe von Anweisungen wie für Schleifen.

Das folgende Codebeispiel zeigt beispielsweise, wie Sie das for Liquid-Tag verwenden können, um eine for Schleife zu erstellen. Dieses Beispiel durchläuft die von Amazon Rekognition moderationLabels zurückgegebenen Daten und zeigt die moderationLabels und name Attribute an, sodass Auftragnehmende sie parentName überprüfen können:
```
 {% for label in task.input.selectedAiServiceResponse.moderationLabels %}
    {
      name: &quot;{{ label.name }}&quot;,
      parentName: &quot;{{ label.parentName }}&quot;,
    },
 {% endfor %}
```

Verwenden von Variablenfiltern

Zusätzlich zu den standardmäßigen Liquid-Filtern und -Aktionen bietet Amazon Augmented AI (Amazon A2I) zusätzliche Filter. Filter werden angewendet, indem ein Pipe-Zeichen (|) nach dem Variablennamen platziert und dann ein Filtername angegeben wird. Verwenden Sie das folgende Format, um Filter zu verketten.


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

Autoescape und explizites Escape

Standardmäßig sind Eingaben durch HTML-Escape-Zeichen geschützt, um Verwirrung zwischen Ihrem variablen Text und HTML zu verhindern. Sie können den escape-Filter explizit hinzufügen, um es für den Leser der Quelle Ihrer Vorlage ersichtlicher zu machen, dass Escaping erfolgt.

escape_once

escape_once stellt sicher, dass, wenn Sie Ihren Code bereits durch Escape-Zeichen geschützt haben, er nicht erneut durch Escape-Zeichen geschützt wird. So wird zum Beispiel sichergestellt, dass aus & nicht &amp; wird.

skip_autoescape

skip_autoescape ist nützlich, wenn Ihre Inhalte als HTML verwendet werden sollen. Beispiel: Sie haben ein paar Textabsätze und einige Bilder in den vollständigen Anweisungen für einen Begrenzungsrahmen.

Anmerkung

Sie sollten skip_autoescape sparsam verwenden. Eine bewährte Methode bei Vorlagen besteht darin, die Übergabe von funktionalem Code oder Markup mit skip_autoescape zu vermeiden, es sei denn, Sie sind absolut sicher, dass Sie strenge Kontrolle darüber haben, was übergeben wird. Wenn Sie Benutzereingaben übergeben, können Sie Ihre Auftragnehmer einem siteübergreifenden Skriptangriff aussetzen.

to_json

to_json kodiert Daten, die Sie JavaScript Object Notation (JSON) bereitstellen. Wenn Sie ein Objekt angeben, wird es serialisiert.

grant_read_access

grant_read_access nimmt einen Amazon Simple Storage Service (Amazon S3) URI und kodiert ihn in eine HTTPS-URL mit einem kurzlebigen Zugriffstoken für diese Ressource. Dadurch ist es möglich, Foto-, Audio- oder Videoobjekte anzuzeigen, die in S3-Buckets gespeichert sind, auf die Auftragnehmer nicht anders öffentlich zugreifen können.

Beispiel für die Filter to_json und grant_read_access

Eingabe


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

Ausgabe


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>

Beispiel Beispiel für eine automatisierte Klassifizierungsvorlage.

Um dieses einfache Textklassifizierungsbeispiel zu automatisieren, schließen Sie das Liquid-Tag {{ task.input.source }} ein. In dem Beispiel wird das Element crowd-classifier verwendet.


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

Vorschau einer Vorlage für Auftragnehmeraufgaben

Um eine benutzerdefinierte Arbeitsaufgabenvorlage in der Vorschau anzuzeigen, verwenden Sie die SageMaker RenderUiTemplate-Operation. Sie können die Operation RenderUiTemplate mit der AWS CLI oder Ihrem bevorzugten AWS-SDK verwenden. Für die Dokumentation der unterstützten sprachspezifischen SDKs für diese API-Operation, siehe den Abschnitt See Also der RenderUiTemplate.

Voraussetzungen

Um eine Vorschau Ihrer Vorlage für Auftragnehmeraufgaben anzuzeigen, muss der Amazon-Ressourcenname (ARN) der AWS Identity and Access Management (IAM-)Rolle, oder RoleArn, die Sie verwenden, über die Berechtigung zum Zugriff auf die von der Vorlage verwendeten S3-Objekte verfügen. Informationen zum Konfigurieren der Rolle oder des Benutzers finden Sie unter Aktivieren der Vorschau von Vorlagen für Auftragnehmeraufgaben .

So zeigen Sie mithilfe der Operation `RenderUiTemplate`eine Vorschau Ihrer Vorlage für Auftragnehmeraufgaben an:

Geben Sie einen RoleArn der Rolle mit den erforderlichen Richtlinien an, um eine Vorschau Ihrer benutzerdefinierten Vorlage anzuzeigen.
Geben Sie im Input-Parameter von Task ein JSON-Objekt an, das Werte für die in der Vorlage definierten Variablen enthält. Dies sind die Variablen, die die Variable task.input.source ersetzen. Wenn Sie beispielsweise eine Variable task.input.text in Ihrer Vorlage definieren, können Sie die Variable im JSON-Objekt als text: sample text angeben.
Fügen Sie in den Content-Parameter von UiTemplate Ihre Vorlage ein.

Nachdem Sie RenderUiTemplate konfiguriert haben, verwenden Sie Ihr bevorzugtes SDK oder die AWS CLI, um eine Anforderung zum Rendern Ihrer Vorlage zu übermitteln. Wenn Ihre Anfrage erfolgreich war, enthält die Antwort RenderedContent, eine Liquid-Vorlage, die das HTML für die Worker-UI rendert.

Wichtig

Um eine Vorschau Ihrer Vorlage anzuzeigen, benötigen Sie eine IAM-Rolle mit der Berechtigung, Amazon S3-Objekte zu lesen, die auf Ihrer Benutzeroberfläche dargestellt werden. Ein Beispiel für eine Richtlinie, die Sie an Ihre IAM-Rolle anhängen können, um diese Berechtigungen zu gewähren, finden Sie unter Aktivieren der Vorschau von Vorlagen für Auftragnehmeraufgaben .

Warnung JavaScript ist in Ihrem Browser nicht verfügbar oder deaktiviert.

Zur Nutzung der AWS-Dokumentation muss JavaScript aktiviert sein. Weitere Informationen finden auf den Hilfe-Seiten Ihres Browsers.

Dokumentkonventionen

Vorlagen für Worker-Aufgabenvorlagen erstellen und löschen

Erstellen von guten Anweisungen für Auftragnehmer