SageMaker Crowd-HTML-Elemente - Amazon SageMaker

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

SageMaker Crowd-HTML-Elemente

Im Folgenden finden Sie eine Liste der Crowd-HTML-Elemente, die das Erstellen einer benutzerdefinierten Vorlage vereinfachen und Auftragnehmern eine vertraute Benutzeroberfläche bereitstellen. Diese Elemente werden in Ground Truth, Augmented AI und Mechanical Turk unterstützt.

Eine Nachricht, die den Worker vor einer aktuellen Situation warnt.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-alert>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

dismissible

Ein boolescher Schalter, der, falls vorhanden, erlaubt, dass der Worker die Nachricht schließt.

Typ

Eine Zeichenfolge, die den Typ der anzuzeigenden Nachricht angibt. Mögliche Werte sind "Information" (die Standardeinstellung), "Erfolg", "Fehler" und "Warnung".

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Symbol, das über der rechten oberen Ecke eines anderen Elements schwebt, dem es zugeordnet ist.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Vorlage, die das <crowd-badge>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 


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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

for

Eine Zeichenfolge, die die ID des Elements angibt, zu dem das Logo zugeordnet ist.

icon

Eine Zeichenfolge, die das Symbol angibt, das im Logo angezeigt werden soll. Die Zeichenfolge muss entweder der Name eines Symbols aus dem Open-Source-iron-icons-Satz sein, der bereits geladen ist, oder die URL zu einem benutzerdefinierten Symbol.

Dieses Attribut überschreibt das label-Attribut.

Im Folgenden finden Sie ein Beispiel für die Syntax, mit der Sie einem <crowd-badge>-HTML-Element ein iron-icon hinzufügen können. Ersetzen Sie icon-name durch den Namen des Symbols aus diesem Symbolsatz, das Sie verwenden möchten. 

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

Bezeichnung

Der Text, der im Logo angezeigt werden soll. Drei Zeichen oder weniger wird empfohlen, da Text, der zu groß ist, über den Logobereich hinausreicht. Ein Symbol kann anstelle von Text angezeigt werden, indem Sie das icon-Attribut festlegen.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine formatierte Schaltfläche, die eine Aktion darstellt.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Vorlage, die das <crowd-button>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 


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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

disabled

Ein boolescher Schalter, der, falls vorhanden, die Schaltfläche als deaktiviert anzeigt und Klicks verhindert.

form-action

Ein Schalter, der entweder sein übergeordnetes crowd-form-Element sendet, wenn die Einstellung auf "Senden" gesetzt wurde, oder sein übergeordnetes <crowd-form>-Element zurücksetzt, wenn die Einstellung auf "Zurücksetzen" gesetzt wurde.

href

Die URL zu einer Online-Ressource. Verwenden Sie diese Eigenschaft, wenn Sie einen Link als Schaltfläche formatiert benötigen.

icon

Eine Zeichenfolge, die das Symbol angibt, das neben dem Schaltflächentext angezeigt werden soll. Die Zeichenfolge muss der Name eines Symbols aus dem Open-Source-Satz iron-icons sein, das vorinstalliert ist. Verwenden Sie zum Beispiel Folgendes, um das Suchsymbol einzufügen:

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

Das Symbol befindet sich entweder links oder rechts neben dem Text, wie vom icon-align-Attribut angegeben.

Informationen zum Verwenden eines benutzerdefinierten Symbols finden Sie unter icon-url.

icon-align

Die linke oder rechte Position des Symbols relativ zum Schaltflächentext. Der Standardwert ist "links".

icon-url

Eine URL zu einem benutzerdefinierten Bild für das Symbol. Ein benutzerdefiniertes Bild kann anstelle eines Standardsymbols verwendet werden, das vom icon-Attribut angegeben wird.

laden

Ein boolescher Schalter, der, falls vorhanden, die Schaltfläche als im Ladestatus anzeigt. Dieses Attribut hat Vorrang vor dem disabled-Attribut, wenn beide Attribute vorhanden sind.

Ziel

Wenn Sie das href-Attribut verwenden, damit die Schaltfläche als Hyperlink auf eine bestimmte URL fungiert, zielt das target-Attribut optional auf ein Frame oder Fenster, in dem die verknüpfte URL laden soll.

variant

Der allgemeine Stil der Schaltfläche. Verwenden Sie "primary" für primäre Schaltflächen, "normal" für sekundäre Schaltflächen, "link" für tertiäre Schaltflächen oder "icon", um nur das Symbol ohne Text anzuzeigen.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget für das Zeichnen von Rechtecken auf einem Bild und das Zuweisen einer Bezeichnung zum Teil des Bildes, der in jedem Rechteck eingeschlossen ist.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-bounding-box>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. Weitere Beispiele finden Sie in diesem GitHub Repository. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

initial-value

Ein Array von JSON-Objekten, von denen jedes einen Begrenzungsrahmen festlegt, wenn die Komponente geladen wird. Jedes JSON-Objekt im Array enthält die folgenden Eigenschaften. Über die initial-value Eigenschaft festgelegte Begrenzungsfelder können angepasst werden. Außerdem wird über einen initialValueModified booleschen Wert in der Auftragnehmer-Antwortausgabe verfolgt, ob eine Auftragnehmerantwort angepasst wurde oder nicht.

  • height – Die Höhe des Rahmens in Pixeln.

  • label – Der dem Rahmen zugewiesene Text als Teil der Labeling-Aufgabe. Dieser Text muss einer der Bezeichnungen entsprechen, die im labels-Attribut des <crowd-bounding-box>-Elements definiert wurden.

  • left – Entfernung der oberen linken Ecke des Rahmens von der linken Seite des Bildes, gemessen in Pixeln.

  • top – Entfernung der oberen linken Ecke des Rahmens von der Oberkante des Bildes, gemessen in Pixeln.

  • width – Die Breite des Rahmens in Pixeln.

    Sie können den Anfangswert des Begrenzungsrahmens aus einer Manifestdatei eines vorherigen Auftrags in einer benutzerdefinierten Vorlage mit der Templating-Sprache „Liquid“ extrahieren:

    initial-value="[
  {% for box in task.input.manifestLine.label-attribute-name-from-prior-job.annotations %}
    {% capture class_id %}{{ box.class_id }}{% endcapture %}
    {% assign label = task.input.manifestLine.label-attribute-name-from-prior-job-metadata.class-map[class_id] %}
    {
      label: {{label | to_json}},
      left: {{box.left}},
      top: {{box.top}},
      width: {{box.width}},
      height: {{box.height}},
    },
  {% endfor %}
 ]"

labels

Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Bezeichnung sind, die ein Worker dem Bildteil zuweisen kann, der durch ein Rechteck eingeschlossen ist. Limit: 10 Bezeichnungen.

Name

Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

src

Die URL des Bildes, auf dem Begrenzungsrahmen gezeichnet werden sollen.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element benötigt.

full-instructions

Allgemeine Anweisungen zum Zeichnen von Begrenzungsrahmen.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die folgende Ausgabe wird von diesem Element unterstützt.

boundingBoxes

Ein Array von JSON-Objekten, von denen jedes einen Begrenzungsrahmen angibt, der vom Worker erstellt wurde. Jedes JSON-Objekt im Array enthält die folgenden Eigenschaften.

  • height – Die Höhe des Rahmens in Pixeln.

  • label – Der dem Rahmen zugewiesene Text als Teil der Labeling-Aufgabe. Dieser Text muss einer der Bezeichnungen entsprechen, die im labels-Attribut des <crowd-bounding-box>-Elements definiert wurden.

  • left – Entfernung der oberen linken Ecke des Rahmens von der linken Seite des Bildes, gemessen in Pixeln.

  • top – Entfernung der oberen linken Ecke des Rahmens von der Oberkante des Bildes, gemessen in Pixeln.

  • width – Die Breite des Rahmens in Pixeln.

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

Beispiel : Beispielausgaben des Elements

Nachfolgend finden Sie Beispiele für Ausgaben von gängigen Nutzungsszenarien für dieses Element.

Einzelne Bezeichnung, einzelner Rahmen / Mehrere Bezeichnungen, einzelner Rahmen

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

Einzelne Bezeichnung, mehrere Rahmen

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

Mehrere Bezeichnungen, mehrere Rahmen

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

Es können viele Bezeichnungen zur Verfügung stehen, jedoch werden nur diejenigen in der Ausgabe angezeigt, die verwendet werden.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Feld mit einem erhöhten Erscheinungsbild für die Anzeige von Informationen.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Vorlage, die das <crowd-card>-Element verwendet und für Stimmungsanalyseaufgaben konzipiert wurde. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

heading

Der Text, der am oberen Rand des Feldes angezeigt wird.

Abbild

Eine URL zu einem Bild, das innerhalb des Feldes angezeigt werden soll.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine UI-Komponente, die aktiviert oder deaktiviert werden kann, sodass der Benutzer mehrere Optionen aus einem Satz auswählen kann.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-checkbox>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

checked

Ein boolescher Schalter, der, falls vorhanden, das Kontrollkästchen als aktiviert anzeigt.

Im Folgenden finden Sie ein Beispiel für die Syntax, die zum standardmäßigen Aktivieren eines Kontrollkästchens verwendet wird.

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

disabled

Ein boolescher Schalter, der, falls vorhanden, das Kontrollkästchen als deaktiviert anzeigt und verhindert, dass es aktiviert wird.

Im Folgenden finden Sie ein Beispiel für die Syntax, die zum Deaktivieren eines Kontrollkästchens verwendet wird. 

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

Name

Eine Zeichenfolge, die verwendet wird, um die Antwort zu identifizieren, die vom Worker übermittelt wurde. Dieser Wert stimmt mit einem Schlüssel im JSON-Objekt überein, das die Antwort angibt.

Erforderlich

Ein boolescher Schalter, der, falls vorhanden, erfordert, dass der Worker die Eingabe bereitstellt.

Im Folgenden finden Sie ein Beispiel für die Syntax, die verwendet wird, um festzulegen, dass ein Kontrollkästchen ausgewählt werden muss.

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

Wert

Eine Zeichenfolge, die als Namen für den Status des Kontrollkästchens in der Ausgabe verwendet wird. Es gilt der Standardwert "aktiviert", wenn keine Angabe gemacht wird.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Output

Liefert ein JSON-Objekt. Die name-Zeichenfolge ist der Name des Objekts und die value-Zeichenfolge ist der Name der Eigenschaft für einen booleschen Wert basierend auf dem Status des Kontrollkästchens: "true", wenn überprüft, "false", wenn nicht überprüft.

Beispiel : Beispielausgaben des Elements

Verwendung des gleichen name-Werts für mehrere Felder.

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

Beachten Sie, dass alle drei Farbwerte Eigenschaften eines einzelnen Objekts sind.

Verwendung unterschiedlicher name-Werte für jedes Feld.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zur Klassifizierung von Nicht-Bild-Inhalten, wie z. B. Audio, Video oder Text.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine HTML-Worker-Aufgabenvorlage, die mit crowd-classifier erstellt wurde. In diesem Beispiel wird die Liquid-Vorlagensprache verwendet, um Folgendes zu automatisieren:

  • Beschriftungskategorien im categories-Parameter

  • Die Objekte, die im classification-target-Parameter klassifiziert werden.

Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

categories

Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Kategorie sind, die ein Auftragnehmer dem Text zuweisen kann. Sie sollten "Sonstige" als eine Kategorie einschließen, andernfalls kann der Worker möglicherweise keine Antwort bereitstellen.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisungen für den Worker.

Name

Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element unterstützt.

classification-target

Der Inhalt, der vom Worker klassifiziert werden soll. Dabei kann es sich um Klartext oder HTML handeln. Zu den Beispielen für die Verwendung des HTML gehören unter anderem das Einbetten eines Video- oder Audio-Players, das Einbetten einer PDF-Datei oder das Durchführen eines Vergleichs von zwei oder mehr Bildern.

full-instructions

Allgemeine Anweisungen zur Durchführung der Textklassifizierung.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die Ausgabe dieses Elements ist ein Objekt, das den angegebenen name-Wert als Eigenschaftenname und eine Zeichenfolge aus den categories als Wert der Eigenschaft verwendet.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt die Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zur Klassifizierung verschiedener Inhaltsformen – wie Audio, Video oder Text – in eine oder mehrere Kategorien. Der zu klassifizierende Inhalt wird als Objekt bezeichnet.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine HTML-Arbeitsaufgabenvorlage, die mit diesem Crowd-Element erstellt wurde. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden vom Element crowd-classifier-multi-select unterstützt. Jedes Attribut akzeptiert einen Zeichenfolgenwert oder Zeichenfolgenwerte.

categories

Erforderlich Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Kategorie sind, die ein Mitarbeiter dem Objekt zuweisen kann.

header

Erforderlich Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für Mitarbeiter.

Name

Erforderlich Der Name dieses Widgets. in der Formularausgabe wird der Name als Schlüssel für die Widget-Eingabe verwendet.

exclusion-category

Optional. Eine JSON-formatierte Zeichenfolge mit folgendem Format: "{ text: 'default-value' }". Dieses Attribut legt einen Standardwert fest, den Mitarbeiter wählen können, wenn keine der Bezeichnungen auf das in der Benutzeroberfläche des Mitarbeiters angezeigte Objekt zutrifft.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente:

Regionen

Dieses Element verwendet die folgenden Regionen.

classification-target

Der Inhalt, der vom Worker klassifiziert werden soll. Inhalt kann Klartext oder ein Objekt sein, das Sie in der Vorlage mit HTML angeben. Sie können beispielsweise HTML-Elemente verwenden, um einen Video- oder Audioplayer einzuschließen, eine PDF-Datei einzubetten oder einen Vergleich von zwei oder mehr Bildern einzuschließen.

full-instructions

Allgemeine Anweisungen zum Klassifizieren von Text.

short-instructions

Wichtige aufgabenspezifische Anweisungen. Diese Anweisungen werden auffallend angezeigt.

Output

Die Ausgabe dieses Elements ist ein Objekt, das den angegebenen name-Wert als Eigenschaftenname und eine Zeichenfolge aus categories als Wert der Eigenschaft verwendet.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt die Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie hier:

Ein Widget zum Bezeichnen von Wörtern, Phrasen oder Zeichenfolgen in einem längeren Text. Auftragnehmer wählen ein Label aus und markieren den Text, auf den sich das Label bezieht.

Wichtig: Eigenständiges Widget

Verwenden Sie das Element <crowd-entity-annotation> nicht mit dem Element <crowd-form>. Es enthält eigene Logik für die Übermittlung von Formularen und die Schaltfläche Submit (Senden).

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Vorlage, die das <crowd-entity-annotation>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

initial-value

Ein JSON-formatiertes Array mit Objekten, die jeweils eine Anmerkung definieren, die dem Text bei der Initialisierung zugewiesen werden soll. Objekte enthalten einen label-Wert, der einem Wert im labels-Attribut entspricht, einen startOffset-Ganzzahlwert für den bezeichneten Anfang des Unicode-Offset-Bereichs und einen endOffset-Ganzzahlwert für das Ende des Unicode-Offset-Bereichs.

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

labels

Ein JSON-formatiertes Array mit Objekten, die jeweils Folgendes enthalten:

  • label (erforderlich): Name zum Identifizieren von Entitys.

  • fullDisplayName (optional): wird für die Bezeichnungsliste im Aufgaben-Widget verwendet. Wenn kein Wert angegeben wird, wird standardmäßig der Bezeichnungswert verwendet.

  • shortDisplayName (optional): Abkürzung aus 3 bis 4 Buchstaben, die über den ausgewählten Entitys angezeigt wird. Wenn kein Wert angegeben wird, wird standardmäßig der Bezeichnungswert verwendet.

    shortDisplayName wird dringend empfohlen

    Werte, die oberhalb der Auswahl angezeigt werden, können sich überschneiden und Schwierigkeiten bei der Verwaltung bezeichneter Entitys im Workspace verursachen. Es wird dringend empfohlen, für jede Bezeichnung einen aus 3 bis 4 Zeichen bestehenden shortDisplayName bereitzustellen, um Überschneidungen zu vermeiden und die Verwaltung des Workspaces durch die Auftragnehmer zu erleichtern.

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

Name

Dient im DOM als Name des Widgets. Wird auch als Attributname der Bezeichnung in Formularausgaben und im Ausgabemanifest verwendet.

text

Der Text, der kommentiert werden soll. Das Vorlagensystem verwendet standardmäßig Escape-Zeichen für Anführungszeichen und HTML-Zeichenfolgen. Wenn im Code bereits – zumindest teilweise – Escape-Zeichen eingesetzt werden, siehe Variablenfilter für weitere Methoden des Einsatzes von Escape-Zeichen.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element unterstützt.

full-instructions

Allgemeine Anleitungen zum Arbeiten mit dem Widget.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die folgende Ausgabe wird von diesem Element unterstützt.

entities

Ein JSON-Objekt, das Start, Ende und Bezeichnung einer Anmerkung angibt. Dieses Objekt enthält die folgenden Eigenschaften.

  • label – Die zugewiesene Beschriftung.

  • startOffset – Der Unicode-Offset des Anfangs des ausgewählten Textes.

  • endOffset – Der Unicode-Offset des ersten Zeichens nach der Auswahl.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt eine Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine schwebende Schaltfläche mit einem Bild in der Mitte.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-fab>-Element verwendet und für die Bildklassifizierung konzipiert wurde. Diese Vorlage ermöglicht JavaScript es Mitarbeitern, Probleme mit der Worker-Benutzeroberfläche zu melden. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

disabled

Ein boolescher Schalter, der, falls vorhanden, die schwebende Schaltfläche als deaktiviert anzeigt und Klicks verhindert.

icon

Eine Zeichenfolge, die das Symbol angibt, das in der Mitte der Schaltfläche angezeigt werden soll. Die Zeichenfolge muss entweder der Name eines Symbols aus dem Open-Source-iron-icons-Satz sein, der bereits geladen ist, oder die URL zu einem benutzerdefinierten Symbol.

Im Folgenden finden Sie ein Beispiel für die Syntax, mit der Sie einem <crowd-fab>-HTML-Element ein iron-icon hinzufügen können. Ersetzen Sie icon-name durch den Namen des Symbols aus diesem Symbolsatz, das Sie verwenden möchten. 

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

Bezeichnung

Eine Zeichenfolge bestehend aus einem einzigen Zeichen, das anstelle eines Symbols verwendet werden kann. Emojis oder mehrere Zeichen können dazu führen, dass die Schaltfläche stattdessen eine Ellipse anzeigt.

Titel

Eine Zeichenfolge, die als QuickInfo angezeigt wird, wenn sich der Mauszeiger über der Schaltfläche befindet.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Der Formular-Wrapper für alle benutzerdefinierten Aufgaben. Legt wichtige Aktionen für die ordnungsgemäße Übermittlung Ihrer Formulardaten fest und implementiert sie.

Wenn eine crowd-button vom Typ "submit" nicht im <crowd-form>-Element enthalten ist, wird sie automatisch innerhalb des <crowd-form>-Elements angehängt.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Bildklassifizierungsvorlage, die das <crowd-form>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Elementereignisse

Das Element crowd-form erweitert das -Standard-HTML-form-Element und übernimmt dessen Ereignisse wie onclick und onsubmit.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine Schaltfläche mit einem Bild, das in der Mitte platziert ist. Wenn der Benutzer die Schaltfläche berührt, geht ein Welleneffekt von der Mitte der Schaltfläche aus.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-icon-button>-Element verwendet und für die Bildklassifizierung konzipiert wurde. Diese Vorlage ermöglicht JavaScript es Mitarbeitern, Probleme mit der Worker-Benutzeroberfläche zu melden. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

disabled

Ein boolescher Schalter, der, falls vorhanden, die Schaltfläche als deaktiviert anzeigt und Klicks verhindert.

icon

Eine Zeichenfolge, die das Symbol angibt, das in der Mitte der Schaltfläche angezeigt werden soll. Die Zeichenfolge muss entweder der Name eines Symbols aus dem Open-Source-iron-icons-Satz sein, der bereits geladen ist, oder die URL zu einem benutzerdefinierten Symbol.

Im Folgenden finden Sie ein Beispiel für die Syntax, mit der Sie einem <crowd-icon-button>-HTML-Element ein iron-icon hinzufügen können. Ersetzen Sie icon-name durch den Namen des Symbols aus diesem Symbolsatz, das Sie verwenden möchten. 

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

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zum Klassifizieren eines Bildes. Verwenden Sie eines der folgenden unterstützten Bildformate: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Für Bilder gibt es keine Größenbeschränkung.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Bildklassifizierungsvorlage, die das <crowd-image-classifier>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element benötigt.

categories

Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Kategorie sind, die ein Worker dem Bild zuweisen kann. Sie sollten "Sonstige" als eine Kategorie einschließen, sodass der Worker eine Antwort bereitstellen kann. Sie können bis zu 10 Kategorien angeben.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisungen für den Worker.

Name

Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

Overlay

Informationen, die auf dem Quellbild überlagert werden sollen. Dies gilt für Verifizierungs-Workflows von Bounding Box-, Semantik-Segmentierungs- und Instance-Segmentierungsaufgaben.

Es ist ein JSON-Objekt, das ein Objekt mit dem Namen des Aufgabentyps in camelCase als Schlüssel. Der Wert dieses Schlüssels ist ein Objekt mit den Beschriftungen und anderen notwendigen Informationen aus der vorherigen Aufgabe.

Im Folgenden finden Sie das Beispiel eines crowd-image-classifier-Elements mit Attributen zum Überprüfen einer Bounding Box-Aufgabe:

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

Eine Aufgabe zur Überprüfung der semantischen Segmentierung würde den overlay Wert wie folgt verwenden:

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

Eine Aufgabe zur Instance-Segmentierung würde den overlay Wert wie folgt verwenden:

<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

Die URL des Bildes, das klassifiziert werden soll.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element verwendet.

full-instructions

Allgemeine Anweisungen für den Auftragnehmer zum Klassifizieren eines Bildes.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Auftragnehmer-Kommentar

Verwenden Sie dies in Verifizierungs-Workflows, wenn Auftragnehmer erklären müssen, warum sie eine Entscheidung getroffen haben. Verwenden Sie den Text zwischen den öffnenden und schließenden Tags, um Auftragnehmern Anweisungen zu Informationen zu geben, die im Kommentar aufgenommen werden sollen.

Es verwendet die folgenden Attribute:

header

Ein Text, der zum Hinterlassen eines Kommentars auffordert. Wird als Titeltext für ein modales Fenster verwendet, in dem der Kommentar hinzugefügt wird.

Optional. Standardmäßig „Kommentar hinzufügen“

link-text

Dieser Text wird unter den Kategorien im Widget angezeigt. Wenn Sie darauf klicken, wird ein modales Fenster geöffnet, in dem der Auftragnehmer einen Kommentar hinzufügen kann.

Optional. Standardmäßig „Kommentar hinzufügen“

placeholder

Ein Beispieltext im Kommentartextbereich, der überschrieben wird, wenn der Auftragnehmer mit der Eingabe beginnt. Dies wird in der Ausgabe nicht angezeigt, wenn der Auftragnehmer das Feld leer lässt.

Optional. Der Standardwert ist leer.

Output

Die Ausgabe dieses Elements ist eine Zeichenfolge, die einen der Werte angibt, die im categories-Attribut des <crowd-image-classifier>-Elements definiert sind.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt die Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zur Klassifizierung eines Bilds in eine oder mehrere Kategorien. Verwenden Sie eines der folgenden unterstützten Bildformate: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Für Bilder gibt es keine Größenbeschränkung.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine HTML-Arbeitsaufgabenvorlage, die mit diesem Crowd-Element erstellt wurde. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden vom Element crowd-image-classifier-multi-select unterstützt. Jedes Attribut akzeptiert einen Zeichenfolgenwert oder Zeichenfolgenwerte.

categories

Erforderlich Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Kategorie sind, die ein Mitarbeiter dem Bild zuweisen kann. Ein Mitarbeiter kann alle Kategorien und muss mindestens eine Kategorie wählen.

header

Erforderlich Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für Mitarbeiter.

Name

Erforderlich Der Name dieses Widgets. in der Formularausgabe wird der Name als Schlüssel für die Widget-Eingabe verwendet.

src

Erforderlich Die URL des Bildes, das klassifiziert werden soll.

exclusion-category

Optional. Eine JSON-formatierte Zeichenfolge mit folgendem Format: "{ text: 'default-value' }". Dieses Attribut legt einen Standardwert fest, den Mitarbeiter wählen können, wenn keine der Bezeichnungen auf das in der Benutzeroberfläche des Mitarbeiters angezeigte Bild zutrifft.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente:

Regionen

Dieses Element verwendet die folgenden Regionen.

full-instructions

Allgemeine Anweisungen für den Auftragnehmer zum Klassifizieren eines Bildes.

short-instructions

Wichtige aufgabenspezifische Anweisungen. Diese Anweisungen werden auffallend angezeigt.

Output

Die Ausgabe dieses Elements ist eine Zeichenfolge, die einen oder mehrere der Werte angibt, die im categories-Attribut des Elements <crowd-image-classifier-multi-select> definiert sind.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt die Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie hier:

Ein Feld, das Eingabedaten akzeptiert.

Kann nicht selbstschließend sein

Im Gegensatz zum input-Element im HTML-Standard kann dieses Element nicht selbstschließend sein, indem ein Schrägstrich vor der schließenden Klammer gesetzt wird, z. B. <crowd-input ... />. Es muss von einem </crowd-input> gefolgt werden, um das Element zu schließen.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-input>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

allowed-pattern

Ein regulärer Ausdruck, der mit dem auto-validate-Attribut verwendet wird, um nicht übereinstimmende Zeichen während der Eingabe des Workers zu ignorieren.

auto-focus

Wenn der Wert auf "true" gesetzt ist, setzt der Browser den Fokus nach dem Laden in den Eingabebereich. Auf diese Weise kann der Worker mit der Eingabe beginnen, ohne ihn zunächst markieren zu müssen.

auto-validate

Ein boolescher Schalter, der, falls vorhanden, die Validierung der Eingabe aktiviert. Das Verhalten der Validierung kann durch die Attribute error-message und allowed-pattern geändert werden.

disabled

Ein boolescher Schalter, der, falls vorhanden, den Eingabebereich als deaktiviert anzeigt.

error-message

Der Text, der unter dem Eingabefeld auf der linken Seite angezeigt werden soll, wenn die Validierung fehlschlägt.

Bezeichnung

Eine Zeichenfolge, die in einem Textfeld angezeigt wird.

Dieser Text verkleinert und erhebt sich über ein Textfeld, wenn der Worker mit der Eingabe im Feld beginnt oder das value-Attribut festgelegt ist.

max-length

Eine maximale Anzahl von Zeichen, die die Eingabe akzeptiert. Eingaben über diese Grenze hinaus werden ignoriert.

min-length

Eine Mindestlänge für die Eingabe im Feld.

Name

Legt den Namen der Eingabe, die im DOM verwendet werden soll, und die Ausgabe des Formulars fest.

placeholder

Ein Zeichenfolgenwert, der als Platzhaltertext verwendet und angezeigt wird, bis der Worker mit der Eingabe von Daten in die Eingabe beginnt. Er wird nicht als Standardwert verwendet.

Erforderlich

Ein boolescher Schalter, der, falls vorhanden, erfordert, dass der Worker die Eingabe bereitstellt.

Typ

Übernimmt eine Zeichenfolge zum Festlegen des HTML5-input-type-Verhaltens für die Eingabe. Beispiele hierfür sind file und date.

Wert

Eine Voreinstellung, die zur Standardeinstellung wird, wenn der Worker keine Eingabe bereitstellt. Die Voreinstellung wird in einem Textfeld angezeigt.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Output

Stellt eine name-Zeichenfolge als Name der Eigenschaft und den Text bereit, der als Wert in das Feld eingegeben wurde.

Beispiel : Beispiel einer JSON-Ausgabe

Die Werte für mehrere Elemente werden im gleichen Objekt ausgegeben, mit dem name-Attributwert als Eigenschaftsnamen. Elemente ohne Eingabe werden nicht in der Ausgabe angezeigt. Verwenden wir als Beispiel drei Eingaben:

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

Dies ist die Ausgabe, wenn nur zwei Eingaben haben:

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

Das bedeutet, dass jeder Code, der zum Analysieren dieser Ergebnisse erstellt wurde, in der Lage sein sollte, das Vorhandensein oder Fehlen der einzelnen Eingabequellen in den Antworten zu handhaben.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zum Identifizieren einzelner Instances bestimmter Objekte innerhalb eines Abbildes und zum Erstellen einer farbigen Überblendung für jede gekennzeichnete Instance.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Nachfolgend ein Beispiel für eine Liquid-Vorlage, in der <crowd-instance-segmentation> verwendet wird. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Verwenden Sie eine Vorlage, die der folgenden ähnelt, damit Auftragnehmer ihre eigenen Kategorien (Beschriftungen) hinzufügen können.

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

Beschriftungen

Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Bezeichnung sind, die ein Worker einer Instance eines Objekts im Bild zuweisen kann. Worker können für jede betreffende Instance unterschiedliche Überblendungsfarben erzeugen, indem sie unter der Bezeichnung im Tool „add instance” (Instance hinzufügen) auswählen.

Name

Der Name dieses Widgets. Er wird als Schlüssel für die Kennzeichnungsdaten in der Formularausgabe verwendet.

src

Die URL des Bildes, das gekennzeichnet werden soll.

initial-value

Ein JSON-Objekt, das die Farbzuweisungen eines früheren semantischen Segmentierungsauftrags und einen Link zur Overlay-Bildausgabe des vorherigen Auftrags enthält. Schließen Sie diese Option ein, wenn ein Auftragnehmer die Ergebnisse eines vorherigen Beschriftungsauftrags überprüft und passen Sie ihn gegebenenfalls an.

Das Attribut würde wie folgt aussehen:

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

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element unterstützt.

full-instructions

Allgemeine Anweisungen zur Durchführung der Bildsegmentierung.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die folgende Ausgabe wird von diesem Element unterstützt.

labeledImage

Ein JSON-Objekt mit einem Base64-kodierten PNG der Bezeichnung.

-Instances

Ein JSON-Array, das Objekte mit den Instance-Bezeichnungen und -Farben enthält.

  • color – Der hexadezimale Wert der RGB-Farbe der Bezeichnung im labeledImage PNG.

  • label – Die Bezeichnung, die die Überblendungen erhalten, die diese Farbe verwenden. Dieser Wert kann sich wiederholen, da die verschiedenen Instances der Bezeichnung durch ihre eindeutige Farbe gekennzeichnet sind.

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt eine Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Element, das Anweisungen auf drei Registerkarten anzeigt, Zusammenfassung, detaillierte Anweisungen und Beispiele, wenn der Worker auf einen Link oder eine Schaltfläche klickt.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-instructions>-Element verwendet hat. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

link-text

Der Text, der zum Öffnen der Anweisungen angezeigt werden soll. Der Standardwert ist Klicken, um Anweisungen zu erhalten.

Eine Zeichenfolge, die den Typ des Auslösers für die Anweisungen angibt. Die möglichen Werte sind "Link" (Standard) und "Schaltfläche".

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Regionen

Die folgenden Regionen werden von diesem Element unterstützt.

detailed-instructions

Inhalte, die spezifische Anweisungen für eine Aufgabe bereitstellen. Diese werden auf der Seite der Registerkarte "Detaillierte Anweisungen" angezeigt.

negative-example

Inhalte, die Beispiele für unzureichende Aufgabenabschlüsse bereitstellen. Diese werden auf der Seite der Registerkarte "Beispiele" angezeigt. Mehr als ein Beispiel wird innerhalb dieses Elements ausgegeben.

positive-example

Inhalte, die Beispiele für ordnungsgemäße Aufgabenabschlüsse bereitstellen. Diese werden auf der Seite der Registerkarte "Beispiele" angezeigt.

short-summary

Eine kurze Erklärung, die die abzuschließende Aufgabe zusammenfasst. Diese wird auf der Seite der Registerkarte "Zusammenfassung" angezeigt. Mehr als ein Beispiel wird innerhalb dieses Elements ausgegeben.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Erzeugt ein Tool für die Auswahl und Anmerkung von Schlüsselpunkten auf einem Bild.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-keypoint>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

initial-value

Ein Array im JSON-Format von Keypoins zur Anwendung auf das Abbild beim Start. Beispielsweise:

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

Bitte beachten Sie, dass Beschriftungswerte in diesem Attribut über einen passenden Wert im labels-Attribut verfügen müssen, damit der Punkt gerendert wird.

Beschriftungen

Ein Array von Zeichenfolgen im JSON-Format, die als Bezeichnungen für Keypoint-Anmerkungen verwendet werden sollen.

Name

Eine Zeichenfolge, die verwendet wird, um die Antwort zu identifizieren, die vom Worker übermittelt wurde. Dieser Wert stimmt mit einem Schlüssel im JSON-Objekt überein, das die Antwort angibt.

src

Die Quell-URI des Bildes, zu dem Anmerkungen erstellt werden sollen.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element benötigt.

full-instructions

Allgemeine Anweisungen dazu, wie das Bild mit Anmerkungen zu versehen ist.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die folgende Ausgabe wird von diesem Element unterstützt.

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

keypoints

Ein Array von JSON-Objekten, das die Koordinaten und die Bezeichnung eines Keypoints enthält. Jedes Objekt enthält die folgenden Eigenschaften:

  • label – Das zugewiesene Label für den Keypoint.

  • x – Die X-Koordinate des Keypoints auf dem Bild in Pixel.

  • y – Die Y-Koordinate des Keypoints auf dem Bild in Pixel.

Anmerkung

Die X- und Y-Koordinaten basieren darauf, dass 0,0 für die linke obere Ecke des Bildes steht.

Beispiel : Beispielausgaben des Elements

Im Folgenden finden Sie ein Beispiel für die Ausgabe dieses Elements.

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

Es können viele Bezeichnungen zur Verfügung stehen, jedoch werden nur diejenigen in der Ausgabe angezeigt, die verwendet werden.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zum Zeichnen von Linien auf einem Bild. Jede Linie ist mit einer Beschriftung verknüpft, und die Ausgabedaten geben die Start- und Endpunkte jeder Linie an.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-line>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. Weitere Beispiele finden Sie in diesem GitHub Repository. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Optional. Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

initial-value

Optional. Ein Array von JSON-Objekten, von denen jedes einen Begrenzungsrahmen festlegt, wenn die Komponente geladen wird. Jedes JSON-Objekt im Array enthält die folgenden Eigenschaften.

  • label – Der dem Rahmen zugewiesene Text als Teil der Labeling-Aufgabe. Dieser Text muss einer der Beschriftung entsprechen, die im Beschriftung -Attribut des <crowd-line> Elements definiert wurden.

  • vertices – die x und y Pixelkoordinaten des Start- und Endpunkts der Linie, relativ zur linken oberen Ecke des Bildes.

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

Linien, die über die initial-value Eigenschaft festgelegt wurden, können angepasst werden. Ob die Antwort eines Auftragnehmers angepasst wurde oder nicht, wird über einen initialValueModified booleschen Wert in der Ausgabe der Antwort des Auftragnehmers erfasst.

labels

Erforderlich Ein JSON-formatiertes Array von Strings, die jeweils eine Beschriftung sind, die ein Worker einem Segment des Bildes zuweisen kann.

Limit: 10 Beschriftungen

label-colors

Optional. Ein Array von Zeichenfolgen. Jede String ist ein Hexadezimalcode (hex) für eine Beschriftung.

Name

Erforderlich Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

src

Erforderlich Die URL des Bildes, auf dem Polygone gezeichnet werden sollen.

Regionen

Die folgenden Regionen werden von diesem Element benötigt.

full-instructions

Allgemeine Anweisungen zum Zeichnen von Polygonen.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Output

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

lines

Ein JSON-Array, das Objekte mit den Instance-Beschriftungen und -Farben enthält.

  • label – Die Bezeichnung, die einer Zeile zugewiesen wurde.

  • vertices – die x und die y Pixelkoordinaten des Start- und Endpunkts der Linie im Verhältnis zur oberen linken Ecke des Bildes.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt eine Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein kleines Fenster, das beim Öffnen in der Anzeige angezeigt wird.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für die Syntax, die Sie mit dem <crowd-modal>-Element verwenden können. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Die folgenden Attribute werden von diesem Element unterstützt.

link-text

Der Text, der zum Öffnen des Modals angezeigt werden soll. Der Standardwert ist "Klicken, um Modal zu öffnen".

Eine Zeichenfolge, die den Typ des Auslösers für das Modal angibt. Die möglichen Werte sind "Link" (Standard) und "Schaltfläche".

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget für das Zeichnen von Polygonen auf einem Bild und das Zuweisen einer Bezeichnung zum Teil des Bildes, der in jedem Polygon eingeschlossen ist.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-polygon>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

Beschriftungen

Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Bezeichnung sind, die ein Worker dem Bildteil zuweisen kann, der durch ein Polygon eingeschlossen ist.

Name

Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

src

Die URL des Bildes, auf dem Polygone gezeichnet werden sollen.

initial-value

Ein Array von JSON-Objekten, von denen jedes ein Polygon definiert, das beim Laden der Komponente gezeichnet werden soll. Jedes JSON-Objekt im Array enthält die folgenden Eigenschaften.

  • label – Der dem Polygon zugewiesene Text als Teil der Labeling-Aufgabe. Dieser Text muss einer der Bezeichnungen entsprechen, die im labels-Attribut des <crowd-polygon>-Elements definiert wurden.

  • vertices – Ein Array von JSON-Objekten. Jedes Objekt enthält einen X- und Y-Koordinatenwert für einen Punkt im Polygon.

Ein initial-value-Attribut könnte etwa so aussehen:

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

Da dies innerhalb eines HTML-Elements geschieht, muss das JSON-Array in einfache oder doppelte Anführungszeichen gesetzt werden. Das obige Beispiel verwendet einfache Anführungszeichen, um das JSON zu kapseln und doppelte Anführungszeichen innerhalb des JSON selbst. Wenn Sie einfache und doppelte Anführungszeichen in Ihrem JSON mischen müssen, ersetzen Sie diese durch ihre HTML-Entity-Codes (&quot; für doppelte Anführungszeichen, &#39; für einfache Anführungszeichen), um sie sicher zu umgehen.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen sind erforderlich:

full-instructions

Allgemeine Anweisungen zum Zeichnen von Polygonen.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die folgende Ausgabe wird von diesem Element unterstützt.

polygons

Ein Array von JSON-Objekten, von denen jedes ein Polygon beschreibt, der vom Worker erstellt wurde. Jedes JSON-Objekt im Array enthält die folgenden Eigenschaften.

  • label – Der dem Polygon zugewiesene Text als Teil der Labeling-Aufgabe.

  • vertices – Ein Array von JSON-Objekten. Jedes Objekt enthält einen X- und Y-Koordinatenwert für einen Punkt im Polygon. Die linke obere Ecke des Bildes befindet sich auf Position 0,0.

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

Beispiel : Beispielausgaben des Elements

Nachfolgend finden Sie Beispiele für Ausgaben von gängigen Nutzungsszenarien für dieses Element.

Einzelne Bezeichnung, einzelnes Polygon

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

Einzelne Bezeichnung, mehrere Polygone

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

Mehrere Bezeichnungen, mehrere Polygone

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

Es können viele Bezeichnungen zur Verfügung stehen, jedoch werden nur diejenigen in der Ausgabe angezeigt, die verwendet werden.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zum Zeichnen von Polylinien oder Linien auf einem Bild. Jede Polylinie ist mit einer Beschriftung verknüpft und kann zwei oder mehr Scheitelpunkte enthalten. Eine Polylinie kann sich selbst schneiden und ihre Start- und Endpunkte können an einer beliebigen Stelle im Bild platziert werden.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-polyline>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. Weitere Beispiele finden Sie in diesem GitHub Repository. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Optional. Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

initial-value

Optional. Ein Array von JSON-Objekten, von denen jedes eine Polylinie setzt, wenn die Komponente geladen wird. Jedes JSON-Objekt im Array enthält die folgenden Eigenschaften:

  • label – Der dem Polygon zugewiesene Text als Teil der Labeling-Aufgabe. Dieser Text muss einer der Beschriftungen entsprechen, die im labels-Attribut des <crowd-polyline> Elements definiert wurden.

  • vertices – Die x und y Pixelkoordinaten der Scheitelpunkte einer Polylinie relativ zur linken oberen Ecke des Bilds.

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

Polylinien, die über die initial-value Eigenschaft festgelegt wurden, können angepasst werden. Ob die Antwort eines Auftragnehmers angepasst wurde oder nicht, wird anhand eines initialValueModified booleschen Werts in der Antwortausgabe des Auftragnehmers erfasst.

labels

Erforderlich Ein JSON-formatiertes Array von Strings, die jeweils eine Beschriftung sind, die ein Worker einem Segment des Bildes zuweisen kann.

Limit: 10 Beschriftungen

label-colors

Optional. Ein Array von Zeichenfolgen. Jede String ist ein Hexadezimalcode (hex) für eine Beschriftung.

Name

Erforderlich Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

src

Erforderlich Die URL des Bildes, auf dem Polylinien gezeichnet werden sollen.

Regionen

Die folgenden Regionen werden von diesem Element benötigt.

full-instructions

Allgemeine Anweisungen zum Zeichnen von Polylinien.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Output

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

polylines

Ein JSON-Array, das Objekte mit Beschriftungen und Scheitelpunkten von Polylinien enthält.

  • label – Die Beschriftung, die einer Linie zugewiesen wurde.

  • vertices – Die x und y Pixelkoordinaten der Scheitelpunkte einer Polylinie relativ zur linken oberen Ecke des Bilds.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt eine Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine Schaltfläche, die entweder aktiviert oder deaktiviert werden kann. Wenn Optionsfelder innerhalb einer Optionsfeldgruppe sind, kann genau ein Optionsfeld in der Gruppe jederzeit geprüft werden. Im Folgenden finden Sie ein Beispiel für die Konfiguration eines crowd-radio-button-Elements innerhalb eines crowd-radio-group-Elements.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für die Syntax, die Sie mit dem <crowd-radio-button>-Element verwenden können. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Das vorherige Beispiel ist in einer benutzerdefinierten Worker-Aufgabenvorlage zu sehen. In diesem GitHub Beispiel finden Sie eine benutzerdefinierte Vorlage für einen Job zur Kennzeichnung von Entitäten.

Die Optionsfelder des Crowd-HTML-Elements unterstützen das HTML-Tag nicht, required. Um die Auswahl eines Optionsfeldes erforderlich zu machen, verwenden Sie <input type="radio"> Elemente, um Optionsfelder zu erstellen und das required Tag hinzuzufügen. Das name Attribut für alle <input> Elemente, die zu derselben Gruppe von Optionsfeldern gehören, muss identisch sein. Bei der folgenden Vorlage muss der Benutzer beispielsweise vor dem Absenden ein Optionsfeld in der animal-type Gruppe auswählen.

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

checked

Ein boolescher Schalter, der, falls vorhanden, das Optionsfeld als aktiviert anzeigt.

disabled

Ein boolescher Schalter, der, falls vorhanden, die Schaltfläche als deaktiviert anzeigt und verhindert, dass sie aktiviert wird.

Name

Eine Zeichenfolge, die verwendet wird, um die Antwort zu identifizieren, die vom Worker übermittelt wurde. Dieser Wert stimmt mit einem Schlüssel im JSON-Objekt überein, das die Antwort angibt.

Anmerkung

Wenn Sie die Schaltflächen außerhalb eines crowd-radio-group-Elements verwenden, jedoch mit derselben name-Zeichenfolge und unterschiedlichen value-Zeichenfolgen, enthält das name-Objekt in der Ausgabe einen booleschen Wert für jede value-Zeichenfolge. Um sicherzustellen, dass jeweils nur eine Schaltfläche in einer Gruppe von Schaltflächen ausgewählt ist, machen Sie sie zu untergeordneten Elementen eines crowd-radio-group-Elements und verwenden Sie unterschiedliche name-Werte.

Wert

Ein Eigenschaftenname für den booleschen Wert des Elements. Wenn Sie nichts angeben, wird standardmäßig "aktiviert" verwendet, z. B. { "<name>": { "<value>": <true or false> } }.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Output

Gibt ein Objekt mit folgendem Muster aus: { "<name>": { "<value>": <true or false> } }. Wenn Sie die Schaltflächen außerhalb eines crowd-radio-group-Elements verwenden, jedoch mit derselben name-Zeichenfolge und unterschiedlichen value-Zeichenfolgen, enthält das name-Objekt einen booleschen Wert für jede value-Zeichenfolge. Um sicherzustellen, dass jeweils nur eine in einer Gruppe von Schaltflächen ausgewählt ist, machen Sie sie zu untergeordneten Elementen eines crowd-radio-group-Elements und verwenden Sie unterschiedliche name-Werte.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine Gruppe von Optionsfeldern. Nur ein Optionsfeld innerhalb der Gruppe kann ausgewählt werden. Wenn Sie ein Optionsfeld auswählen, werden alle zuvor ausgewählten Optionsfelder innerhalb derselben Gruppe gelöscht. Ein Beispiel für eine benutzerdefinierte Benutzeroberflächenvorlage, die das crowd-radio-group-Element verwendet, finden Sie in dieser benutzerdefinierten Vorlage für den Kennzeichnungsauftrag zur Entitätenerkennung

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für die Syntax, die Sie mit dem <crowd-radio-group>-Element verwenden können. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Von diesem Element werden keine speziellen Attribute unterstützt.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Output

Gibt ein Array von Objekten aus, die die darin enthaltenen crowd-radio-button-Elemente darstellen.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Widget zur Segmentierung eines Bildes und zur Zuweisung einer Bezeichnung zu jedem Bildsegment.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-semantic-segmentation>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der über dem Bild angezeigt werden soll. Dies ist in der Regel eine Frage oder einfache Anweisung für den Worker.

initial-value

Ein JSON-Objekt, das die Farbzuweisungen eines früheren semantischen Segmentierungsauftrags und einen Link zur Overlay-Bildausgabe des vorherigen Auftrags enthält. Schließen Sie diese Option ein, wenn ein Auftragnehmer die Ergebnisse eines vorherigen Beschriftungsauftrags überprüft und passen Sie ihn gegebenenfalls an.

Das Attribut würde wie folgt aussehen:

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

Bei Verwendung der Ground Truth integrierten Aufgabentypen mit Annotationskonsolidierung (bei der mehr als ein Auftragnehmer ein einzelnes Bild beschriftet), sind Beschriftungszuordnungen in den einzelnen Auftragnehmer-Ausgabedatensätzen enthalten, das Gesamtergebnis wird jedoch als das internal-color-map in den konsolidierten Ergebnissen dargestellt.

Sie können internal-color-map mit der Templating-Sprache „Liquid“ in einer benutzerdefinierten Vorlage in label-mappings konvertieren:

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

Beschriftungen

Ein JSON-formatiertes Array von Zeichenfolgen, die jeweils eine Bezeichnung sind, die ein Worker einem Segment des Bildes zuweisen kann.

Name

Der Name dieses Widgets. Er wird als Schlüssel für die Widget-Eingabe in der Formularausgabe verwendet.

src

Die URL des Bildes, das segmentiert werden soll.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Regionen

Die folgenden Regionen werden von diesem Element unterstützt.

full-instructions

Allgemeine Anweisungen zur Durchführung der Bildsegmentierung.

short-instructions

Wichtige aufgabenspezifische Anweisungen, die an exponierter Stelle angezeigt werden.

Output

Die folgende Ausgabe wird von diesem Element unterstützt.

labeledImage

Ein JSON-Objekt mit einem Base64-kodierten PNG der Bezeichnung.

labelMappings

Ein JSON-Objekt mit Objekten mit benannten Segmentierungsbezeichnungen.

  • color – Der hexadezimale Wert der RGB-Farbe der Bezeichnung im labeledImage PNG.

anfänglich ValueModified

Ein boolescher Wert, der angibt, ob die Anfangswerte geändert wurden. Dies ist nur enthalten, wenn die Ausgabe von einem Anpassungsvorgang stammt.

Eingabe ImageProperties

Ein JSON-Objekt, in dem die Dimensionen des Bildes angegeben werden, das durch den Worker kommentiert wird. Dieses Objekt enthält die folgenden Eigenschaften.

  • height – Die Höhe, in Pixeln, des Bildes.

  • width – Die Breite, in Pixeln, des Bildes.

Beispiel : Beispielausgaben des Elements

Das folgende Beispiel zeigt die Ausgabe dieses Elements.

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

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine Leiste mit einem Schiebeknopf, mit dem ein Worker durch Verschieben des Knopfes aus einer Reihe von Werten einen Wert auswählen kann. Der Schieberegler ist ideal für Einstellungen geeignet, die Intensitätsstufen widerspiegeln, wie z. B. Lautstärke, Helligkeit oder Farbsättigung.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Umfragevorlage, die das <crowd-slider>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 


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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

disabled

Ein boolescher Schalter, der, falls vorhanden, den Schieberegler als deaktiviert anzeigt.

editable

Ein boolescher Schalter, der, falls vorhanden, eine Auf/Ab-Schaltfläche anzeigt, die zur Auswahl des Werts ausgewählt werden kann.

Die Auswahl des Werts über die Auf/Ab-Schaltfläche ist eine Alternative zur Auswahl des Werts durch Verschieben des Knopfes auf dem Schieberegler. Der Knopf auf dem Schieberegler bewegt sich synchron mit der Auswahl der Auf/Ab-Schaltfläche.

max

Eine Zahl, die den maximalen Wert auf dem Schieberegler angibt.

min

Eine Zahl, die den minimalen Wert auf dem Schieberegler angibt.

Name

Eine Zeichenfolge, die verwendet wird, um die Antwort zu identifizieren, die vom Worker übermittelt wurde. Dieser Wert stimmt mit einem Schlüssel im JSON-Objekt überein, das die Antwort angibt.

pin

Ein boolescher Schalter, der, sofern vorhanden, den aktuellen Wert oberhalb des Knopfes anzeigt, wenn er verschoben wird.

Erforderlich

Ein boolescher Schalter, der, falls vorhanden, erfordert, dass der Worker die Eingabe bereitstellt.

secondary-progress

Bei Verwendung mit einem crowd-slider-secondary-color-CSS-Attribut wird der Fortschrittsbalken bis zu dem Zeitpunkt farbig dargestellt, der durch den secondary-progress repräsentiert wird. Beispiel: Wenn dies den Fortschritt in einem Streaming-Video darstellt, repräsentiert der value den Zeitpunkt, an dem der Betrachter sich in der Video-Zeitleiste befand. Der secondary-progress-Wert repräsentiert den Zeitpunkt auf der Zeitleiste, an dem das Video gepuffert hatte.

Schritt

Eine Zahl, die die Differenz zwischen auswählbaren Werten auf dem Schieberegler angibt.

Wert

Eine Voreinstellung, die zur Standardeinstellung wird, wenn der Worker keine Eingabe bereitstellt.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine Komponente, die dem Aussehen einer Registerkarte mit untenstehenden Informationen nachempfunden wurde.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie eine Beispielvorlage, die das <crowd-tab>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

header

Der Text, der auf der Registerkarte angezeigt wird. Dies ist in der Regel ein kurzer aussagekräftiger Name der auf die Informationen hinweist, die unterhalb der Registerkarte enthalten sind.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-tabs

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Container für Registerkarteninformationen.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie eine Beispielvorlage, die das <crowd-tabs>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Dieses Element verfügt über keine Attribute.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Ein Feld für die Texteingabe.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-text-area>-Element verwendet und für die Transkription von Audioclips konzipiert wurde. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

allowed-pattern

Ein regulärer Ausdruck, der mit dem auto-validate-Attribut verwendet wird, um nicht übereinstimmende Zeichen während der Eingabe des Workers zu ignorieren.

auto-focus

Ein boolescher Schalter, der, falls vorhanden, den Cursor in diesem Element unter Last setzt, damit die Benutzer sofort mit der Eingabe beginnen können, ohne auf das Element klicken zu müssen.

auto-validate

Ein boolescher Schalter, der, falls vorhanden, die Validierung der Eingabe aktiviert. Das Verhalten der Validierung kann durch die Attribute error-message und allowed-pattern geändert werden.

char-counter

Ein boolescher Schalter, der, falls vorhanden, ein kleines Textfeld unterhalb der unteren rechten Ecke des Elements setzt, das die Anzahl der Zeichen im Element anzeigt.

disabled

Ein boolescher Schalter, der, falls vorhanden, den Eingabebereich als deaktiviert anzeigt.

error-message

Der Text, der unter dem Eingabefeld auf der linken Seite angezeigt werden soll, wenn die Validierung fehlschlägt.

Bezeichnung

Eine Zeichenfolge, die in einem Textfeld angezeigt wird.

Dieser Text verkleinert und erhebt sich über ein Textfeld, wenn der Worker mit der Eingabe im Feld beginnt oder das value-Attribut festgelegt ist.

max-length

Eine Ganzzahl, die die maximale Anzahl an Zeichen angibt, die vom Element zugelassen werden. Darüber hinaus eingegebene oder eingefügte Zeichen werden ignoriert.

max-rows

Eine Ganzzahl, die die maximale Anzahl von Textzeilen angibt, die innerhalb von a zulässig sind crowd-text-area. Normalerweise wird das Element erweitert, um neue Zeilen zu bewältigen. Wenn dies festgelegt wird, nachdem die Anzahl der Zeilen diese überschreiten, werden Inhalte aus der Ansicht nach oben verschoben und eine Bildlaufleiste wird angezeigt.

Name

Eine Zeichenfolge zur Darstellung der Daten des Elements in der Ausgabe.

placeholder

Eine Zeichenfolge, die dem Benutzer als Platzhaltertext dargestellt wird. Sie wird ausgeblendet, nachdem der Benutzer etwas in den Eingabebereich setzt.

rows

Eine Ganzzahl, die die Höhe des Elements in Textzeilen angibt.

Wert

Eine Voreinstellung, die zur Standardeinstellung wird, wenn der Worker keine Eingabe bereitstellt. Die Voreinstellung wird in einem Textfeld angezeigt.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Output

Dieses Element gibt den name als Eigenschaftsnamen und die Elementtextinhalte als Wert aus. Zeilenumbrüche im Text werden als \n dargestellt.

Beispielausgabe für dieses Element
[
  {
    "textInput1": "This is the text; the text that\nmakes the crowd go wild."
  }
]

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine subtile Benachrichtigung, die vorübergehend auf der Anzeige erscheint. Nur ein crowd-toast ist sichtbar.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im Folgenden finden Sie ein Beispiel für eine Liquid-Vorlage, die das <crowd-toast>-Element verwendet. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 



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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

duration

Eine Zahl, die die Dauer in Millisekunden angibt, die die Benachrichtigung auf dem Bildschirm angezeigt wird.

text

Der Text, der in der Benachrichtigung angezeigt werden soll.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.

Eine Schaltfläche, die als AN/AUS-Schalter zum Umschalten eines Zustands fungiert.

Ein interaktives Beispiel für eine HTML-Vorlage, die dieses Crowd-HTML-Element verwendet, finden Sie unter CodePen.

Im folgenden Beispiel werden verschiedene Möglichkeiten gezeigt, wie das HTML-Element <crowd-toggle-button> verwendet werden kann. Kopieren Sie den folgenden Code und speichern Sie ihn in einer Datei mit der Erweiterung .html. Öffnen Sie die Datei in einem beliebigen Browser, um eine Vorschau anzuzeigen und mit dieser Vorlage zu interagieren. 

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

Attribute

Die folgenden Attribute werden von diesem Element unterstützt.

checked

Ein boolescher Schalter, der, falls vorhanden, die Schaltfläche in der AN-Stellung anzeigt.

disabled

Ein boolescher Schalter, der, falls vorhanden, die Schaltfläche als deaktiviert anzeigt und ein Umschalten verhindert.

invalid

Wenn in einer ausgeschalteten Position wird eine Schaltfläche mit diesem Attribut in einer Warnfarbe angezeigt. Der Standard ist rot, kann jedoch in CSS geändert werden. Wenn aktiviert, wird die Schaltfläche in der gleichen Farbe wie andere Schaltflächen in der eingeschalteten Position angezeigt.

Name

Eine Zeichenfolge, die verwendet wird, um die Antwort zu identifizieren, die vom Worker übermittelt wurde. Dieser Wert stimmt mit einem Schlüssel im JSON-Objekt überein, das die Antwort angibt.

Erforderlich

Ein boolescher Schalter, der, falls vorhanden, erfordert, dass der Worker die Eingabe bereitstellt.

Wert

Ein Wert, der in der Ausgabe als Eigenschaftsname für den booleschen Status des Elements verwendet wird. Es gilt der Standardwert "aktiviert", falls nicht vorhanden.

Hierarchie der Elemente

Dieses Element verfügt über folgende übergeordnete und untergeordnete Elemente.

  • Übergeordnete Elemente: crowd-form

  • Untergeordnete Elemente: keine

Output

Dieses Element gibt den name als den Namen eines Objekts aus, das den value als Eigenschaftsnamen und den Status des Elements als booleschen Wert für die Eigenschaft enthält. Wenn kein Wert für das Element angegeben wird, ist der Eigenschaftsname standardmäßig auf "aktiviert" gesetzt.

Beispielausgabe für dieses Element
[
  {
    "theToggler": {
      "on": true
    }
  }
]

Weitere Informationen finden Sie unter:

Weitere Informationen finden Sie unter den folgenden Topics.