SageMaker Crowd HTML Elements

Un messaggio che avvisa il worker su una situazione corrente.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-alert>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

dismissible

Un interruttore booleano che, se presente, consente al worker di chiudere il messaggio.

tipo

Una stringa che specifica il tipo di messaggio da visualizzare. I valori possibili sono "info" (impostazione predefinita), "success", "error" e "warning".

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un'icona che galleggia sopra l'angolo in alto a destra di un altro elemento cui è collegata.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello che utilizza l'elemento <crowd-badge>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

for

Una stringa che specifica l'ID dell'elemento cui il badge è collegato.

icon

Una stringa che specifica l'icona da visualizzare nel badge. La stringa deve essere il nome di un'icona del set iron-icons open-source, che è precaricato, o l'URL a un'icona personalizzata.

Questo attributo sostituisce l'attributo label.

Di seguito è riportato un esempio della sintassi che è possibile utilizzare per aggiungere un’iron-icon a un elemento HTML <crowd-badge>. Sostituire icon-name con il nome dell'icona che desideri usare da questo set di icone.

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

etichetta

Il testo da visualizzare nel badge. Sono consigliati al massimo tre caratteri perché un testo troppo grande eccede l'area del badge. È possibile visualizzare un'icona al posto del testo impostando l'attributo icon.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un pulsante modellato che rappresenta un'operazione.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello che utilizza l'elemento <crowd-button>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

disabled

Un interruttore booleano che, se presente, visualizza il pulsante come disabilitato e ne impedisce la selezione.

form-action

Un interruttore che invia il suo elemento crowd-form padre, se impostato su "submit", o ripristina il suo elemento <crowd-form> padre, se impostato su "reset".

href

L'URL a una risorsa online. Utilizza questa proprietà se hai bisogno di un link modellato come un pulsante.

icon

Una stringa che specifica l'icona da visualizzare accanto al testo del pulsante. La stringa deve essere il nome di un'icona del set di iron-icons open-source, che è precaricata. Ad esempio, per inserire l'iron-icon ricerca utilizza quanto segue:

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

L'icona si trova a sinistra o a destra del testo, come specificato dall'attributo icon-align.

Per utilizzare un'icona personalizzata, consulta icon-url.

icon-align

La posizione sinistra o destra dell'icona rispetto al testo del pulsante. L'impostazione predefinita è "left".

icon-url

Un URL a un'immagine personalizzata per l'icona. Un'immagine personalizzata può essere usata al posto di un'icona standard specificata dall'attributo icon.

loading

Un interruttore booleano che, se presente, visualizza il pulsante come in stato di caricamento. Questo attributo ha la precedenza sull'attributo disabilitato se entrambi sono presenti.

target

Quando si utilizza l'attributo href per fare in modo che il pulsante agisca come un collegamento ipertestuale a un URL specifico, l'attributo target fa opzionalmente riferimento a un frame o a una finestra in cui l'URL collegato deve essere caricato.

variant

Lo stile generale del pulsante. Utilizza "primary" per pulsanti principali, "normal" per pulsanti secondari, "link" per pulsanti terziari o "icon" per visualizzare solo l'icona senza testo.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per disegnare rettangoli su un'immagine e assegnare un'etichetta alla parte dell'immagine racchiusa in ogni rettangolo.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-bounding-box>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello. Per altri esempi, consulta questo 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>  

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

initial-value

Un array di oggetti JSON, ciascuno dei quali imposta un rettangolo di delimitazione quando il componente viene caricato. Ogni oggetto JSON nell'array contiene le seguenti proprietà: Le caselle di delimitazione impostate tramite la proprietà initial-value possono essere regolate e se una risposta del dipendente è stata regolata viene monitorata tramite un valore booleano initialValueModified nell'output della risposta del dipendente.

labels

Un array di stringhe in formato JSON, ciascuna delle quali è un'etichetta che un worker può assegnare alla parte di immagine racchiusa da un rettangolo. Limite: 10 etichette.

nome

Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

src

L'URL dell'immagine su cui disegnare riquadri di delimitazione.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono richieste da questo elemento.

full-instructions

Istruzioni generali su come disegnare riquadri di delimitazione.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

Il seguente output è supportato da questo elemento.

boundingBoxes

Un array di oggetti JSON, ciascuno dei quali specifica un riquadro di delimitazione che è stato creato dal worker. Ogni oggetto JSON nell'array contiene le seguenti proprietà:

input ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

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

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

[
  {
    "annotatedResult": {
      "boundingBoxes": [
        {
          "height": 395,
          "label": "Dog",
          "left": 241,
          "top": 125,
          "width": 158
        },
        {
          "height": 298,
          "label": "Cat",
          "left": 699,
          "top": 116,
          "width": 101
        }
      ],
      "inputImageProperties": {
        "height": 533,
        "width": 800
      }
    }
  }
]

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un riquadro con un aspetto elevato per la visualizzazione delle informazioni.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello progettato per le attività di analisi del sentiment che utilizzano l'elemento <crowd-card>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

heading

Il testo visualizzato nella parte superiore del riquadro.

image

Un URL a un'immagine da visualizzare all'interno del riquadro.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un componente dell'interfaccia utente che può essere selezionato o deselezionato per consentire a un utente di selezionare più opzioni di un set.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-checkbox>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

checked

Un interruttore booleano che, se presente, visualizza la casella di controllo come selezionata.

Di seguito è riportato un esempio di syntx utilizzato per selezionare una casella di controllo per impostazione predefinita.

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

disabled

Un interruttore booleano che, se presente, visualizza la casella di controllo come disabilitata e ne impedisce la selezione.

Di seguito è riportato un esempio della sintassi utilizzata per disabilitare una casella di controllo.

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

nome

Una stringa che viene utilizzata per identificare la risposta inviata dal worker. Questo valore corrisponderà a una chiave nell'oggetto JSON che specifica la risposta.

obbligatorio

Un interruttore booleano che, se presente, richiede al worker di fornire l'input.

Di seguito è riportato un esempio della sintassi utilizzata per richiedere la selezione di una casella di controllo.

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

value

Una stringa utilizzata come il nome dello stato della casella di controllo nell'output. Se non specificato, viene usato il valore predefinito "on".

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

Fornisce un oggetto JSON. La stringa name è il nome dell'oggetto e la stringa value è il nome proprietà per un valore booleano basato sullo stato della casella di controllo; true se selezionata, false se non selezionata.

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

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

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

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per la classificazione di contenuti non di immagine, ad esempio audio, video o testo.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di un modello di attività del worker HTML creato utilizzando crowd-classifier. In questo esempio viene utilizzato il linguaggio modello Liquid per automatizzare:

Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

categorie

Un array di stringhe in formato JSON, ciascuna delle quali è una categoria che un worker può assegnare al testo. È consigliabile includere "other" come una categoria; in caso contrario il worker potrebbe non essere in grado di fornire una risposta.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

nome

Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono supportate da questo elemento.

classification-target

Il contenuto che deve essere classificato dal worker. Può essere testo normale o HTML. Esempi di utilizzo di HTML includono, a titolo esemplificativo, l'integrazione di un lettore audio o video, l'integrazione di un PDF o l'esecuzione di un confronto tra due o più immagini.

full-instructions

Istruzioni generali su come eseguire la classificazione del testo.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

L'output di questo elemento è un oggetto che utilizza il valore name specificato come un nome di proprietà e una stringa di categories come valore della proprietà.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per classificare varie forme di contenuto, come audio, video o testo, in una o più categorie. Il contenuto da classificare viene definito come un oggetto.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di un modello di attività del worker HTML creato utilizzando questo elemento. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento crowd-classifier-multi-select. Ogni attributo accetta un valore stringa o valori stringa.

categorie

Obbligatorio. Un array di stringhe in formato JSON, ciascuna delle quali è una categoria che un worker può assegnare all'oggetto.

intestazione

Obbligatorio. Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per i worker.

nome

Obbligatorio. Il nome di questo widget. Nell'output del modulo, il nome viene utilizzato come una chiave per l'input del widget.

exclusion-category

Facoltativo. Una stringa in formato JSON con il seguente formato: "{ text: 'default-value' }". Questo attributo imposta un valore predefinito che i worker possono scegliere se nessuna delle etichette si applica all'oggetto visualizzato nell'interfaccia utente del worker.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio:

Regioni

Questo elemento utilizza le seguenti regioni.

classification-target

Il contenuto che deve essere classificato dal worker. Il contenuto può essere testo normale o un oggetto specificato nel modello utilizzando HTML. Ad esempio, puoi utilizzare elementi HTML per includere un lettore video o audio, incorporando un file PDF, o includere un confronto di due o più immagini.

full-instructions

Istruzioni generali su come classificare il testo.

short-instructions

Istruzioni importanti specifiche dell'attività. Queste istruzioni sono visualizzate in modo ben visibile.

Output

L'output di questo elemento è un oggetto che utilizza il valore name specificato come un nome di proprietà e una stringa di categories come il valore della proprietà.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti:

Un widget per etichettare parole, frasi o stringhe di caratteri all'interno di un testo più lungo. I worker selezionano un'etichetta ed evidenziano il testo a cui si applica l'etichetta.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello che utilizza l'elemento <crowd-entity-annotation>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

initial-value

Un array di oggetti in formato JSON, ognuno dei quali definisce un'annotazione da applicare al testo all'inizializzazione. Gli oggetti contengono un valore label che corrisponde a uno nell'attributo labels, un valore startOffset intero per l'offset unicode iniziale dello span etichettato e un valore endOffset intero per l'offset unicode finale.

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

labels

Una matrice di oggetti in formato JSON, ciascuno dei quali contiene:

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

nome

Serve come nome del widget nel DOM. Viene utilizzato anche come nome di attributo dell'etichetta nell'output del modulo e nel manifest di output.

text

Il testo da annotare. Per impostazione predefinita, il sistema di creazione di modelli utilizza caratteri di escape tra virgolette e stringhe HTML. Se il codice è già preceduto in tutto o in parte da caratteri di escape, consulta Filtri variabili per ulteriori modi per controllare i caratteri di escape.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono supportate da questo elemento.

full-instructions

Istruzioni generali su come utilizzare il widget.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

Il seguente output è supportato da questo elemento.

Entità

Un oggetto JSON che specifica l'inizio, la fine e l'etichetta di un'annotazione. Questo oggetto include le seguenti proprietà.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un pulsante mobile con un'immagine al centro.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid progettato per la classificazione delle immagini che utilizza l'elemento <crowd-fab>. Questo modello consente JavaScript ai lavoratori di segnalare problemi con l'interfaccia utente del lavoratore. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

disabled

Un interruttore booleano che, se presente, visualizza il pulsante mobile come disabilitato e ne impedisce la selezione.

icon

Una stringa che specifica l'icona da visualizzare al centro del pulsante. La stringa deve essere il nome di un'icona del set iron-icons open-source, che è precaricato, o l'URL a un'icona personalizzata.

Di seguito è riportato un esempio della sintassi che è possibile utilizzare per aggiungere un’iron-icon a un elemento HTML <crowd-fab>. Sostituire icon-name con il nome dell'icona che desideri usare da questo set di icone.

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

etichetta

Una stringa costituita da un singolo carattere che può essere utilizzata al posto di un'icona. Emoticon o più caratteri possono portare alla visualizzazione di puntini di sospensione.

titolo

Una stringa che viene visualizzata come descrizione comando quando si posiziona il puntatore del mouse sul pulsante.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Il wrapper del modulo per tutte le attività personalizzate. Consente di impostare e implementare operazioni importanti per il corretto invio dei dati del modulo.

Se un crowd-button di tipo "submit" non è incluso nell'elemento <crowd-form>, verrà aggiunto automaticamente all'elemento <crowd-form>.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di un modello di classificazione delle immagini che utilizza l'elemento <crowd-form>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Eventi elemento

L'elemento crowd-form estende l'elemento form standard HTML e ne eredita gli eventi, come onclick e onsubmit.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un pulsante con un'immagine posizionata al centro. Quando l'utente tocca il pulsante, dal centro del pulsante viene generato un effetto increspatura.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid progettato per la classificazione delle immagini che utilizza l'elemento <crowd-icon-button>. Questo modello consente JavaScript ai lavoratori di segnalare problemi con l'interfaccia utente del lavoratore. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

disabled

Un interruttore booleano che, se presente, visualizza il pulsante come disabilitato e ne impedisce la selezione.

icon

Una stringa che specifica l'icona da visualizzare al centro del pulsante. La stringa deve essere il nome di un'icona del set iron-icons open-source, che è precaricato, o l'URL a un'icona personalizzata.

Di seguito è riportato un esempio della sintassi che è possibile utilizzare per aggiungere un’iron-icon a un elemento HTML <crowd-icon-button>. Sostituire icon-name con il nome dell'icona che desideri usare da questo set di icone.

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

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per classificare un'immagine. Utilizza uno dei seguenti formati di immagine supportati: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Le immagini non hanno limiti di dimensione.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di un modello di classificazione delle immagini che utilizza l'elemento <crowd-image-classifier>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono richiesti da questo elemento.

categorie

Un array di stringhe in formato JSON, ciascuna delle quali è una categoria che un worker può assegnare all'immagine. È consigliabile includere "other" come una categoria, in modo che il worker possa fornire una risposta. Puoi specificare fino a 10 categorie.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

nome

Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

overlay

Informazioni da sovrapporre all'immagine sorgente. Questo è per i flussi di lavoro di verifica delle attività di delimitazione, di segmentazione semantica e di segmentazione istanza.

Si tratta di un oggetto JSON contenente un oggetto con il nome del tipo di attività in camelCase come chiave. Il valore di tale chiave è un oggetto che contiene le etichette e altre informazioni necessarie dall'attività precedente.

Segue un esempio di un elemento crowd-image-classifier con attributi per la verifica di un'attività di delimitazione:

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

Un'attività di verifica della segmentazione semantica utilizzerebbe il valore overlay come segue:

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

Un'attività di segmentazione delle istanze utilizzerebbe il valore overlay come segue:

<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

L'URL dell'immagine da classificare.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono utilizzate da questo elemento.

full-instructions

Istruzioni generali per il dipendente su come classificare un'immagine.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

worker-comment

Utilizzare questa opzione nei flussi di lavoro di verifica quando è necessario che i dipendenti spieghino perché hanno fatto una determinata scelta. Utilizzare il testo tra i tag di apertura e chiusura per fornire istruzioni ai dipendenti su quali informazioni devono essere incluse nel commento.

Utilizza gli attributi seguenti:

intestazione

Una frase con un invito all'azione per lasciare un commento. Utilizzata come testo del titolo per una finestra modale in cui viene aggiunto il commento.

Facoltativo. Il valore predefinito è "Aggiungi un commento".

link-text

Questo testo appare sotto le categorie del widget. Quando si seleziona con un clic, si apre una finestra modale in cui il dipendente può aggiungere un commento.

Facoltativo. Il valore predefinito è "Aggiungi un commento".

placeholder

Testo di esempio nell'area di testo del commento sovrascritto quando il dipendente inizia a digitare. Questo non viene visualizzato in output se il dipendente lascia il campo vuoto.

Facoltativo. L'impostazione predefinita è vuoto.

Output

L'output di questo elemento è una stringa che specifica uno dei valori definiti nell'attributo categories dell'elemento <crowd-image-classifier>.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per classificare un'immagine in una o più categorie. Utilizza uno dei seguenti formati di immagine supportati: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Le immagini non hanno limiti di dimensione.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di un modello di attività del worker HTML creato utilizzando questo elemento crowd. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento crowd-image-classifier-multi-select. Ogni attributo accetta un valore stringa o valori stringa.

categorie

Obbligatorio. Un array di stringhe in formato JSON, ciascuna delle quali è una categoria che un worker può assegnare all'immagine. Un worker deve scegliere almeno una categoria e può scegliere tutte le categorie.

intestazione

Obbligatorio. Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per i worker.

nome

Obbligatorio. Il nome di questo widget. Nell'output del modulo, il nome viene utilizzato come una chiave per l'input del widget.

src

Obbligatorio. L'URL dell'immagine da classificare.

exclusion-category

Facoltativo. Una stringa in formato JSON con il seguente formato: "{ text: 'default-value' }". Questo attributo imposta un valore predefinito che i worker possono scegliere se nessuna delle etichette si applica all'immagine visualizzata nell'interfaccia utente del worker.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio:

Regioni

Questo elemento utilizza le seguenti regioni

full-instructions

Istruzioni generali per il dipendente su come classificare un'immagine.

short-instructions

Istruzioni importanti specifiche dell'attività. Queste istruzioni sono visualizzate in modo ben visibile.

Output

L'output di questo elemento è una stringa che specifica uno o più dei valori definiti nell'attributo categories dell'elemento <crowd-image-classifier-multi-select>.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti:

Una casella che accetta dati di input.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-input>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

allowed-pattern

Un'espressione regolare che viene utilizzata con l'attributo auto-validate per ignorare caratteri non corrispondenti durante la digitazione del worker.

auto-focus

Quando il valore è impostato su true, l'area di input del browser diventa attiva dopo il caricamento. In questo modo, il worker può iniziare a digitare senza doverla prima selezionare.

auto-validate

Un interruttore booleano che, se presente, attiva la convalida dell'input. Il comportamento del validatore può essere modificato dagli attributi error-message e allowed-pattern.

disabled

Un interruttore booleano che, se presente, visualizza l'area di input come disabilitata.

error-message

Il testo da visualizzare sotto il campo di input, sul lato sinistro, se la convalida non riesce.

etichetta

Una stringa che viene visualizzata all'interno di un campo di testo.

Questo testo si riduce e si solleva sopra un campo di testo quando il worker inizia a digitare nel campo o quando l'attributo value è impostato.

max-length

Un numero massimo di caratteri accettati dall'input. L'immissione oltre questo limite viene ignorata.

min-length

Una lunghezza minima per l'immissione nel campo

nome

Imposta il nome dell'input da utilizzare nel DOM e l'output del modulo.

placeholder

Un valore stringa che viene usato come testo segnaposto, visualizzato finché il worker non inizia a inserire i dati nell'input. Non viene utilizzato come un valore predefinito.

obbligatorio

Un interruttore booleano che, se presente, richiede al worker di fornire l'input.

tipo

Accetta una stringa per impostare il comportamento input-type HTML5 per l'input. A titolo di esempio si possono menzionare file e date.

value

Un set di impostazioni che diventa il default se il worker non fornisce input. Il set di impostazioni viene visualizzato in un campo di testo.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

Fornisce una stringa name come il nome della proprietà e il testo che è stato inserito nel campo come il suo valore.

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

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per l'identificazione di singole istanze di oggetti specifici all'interno di un'immagine e la creazione di un overlay colorato per ogni istanza etichettata.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza <crowd-instance-segmentation>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Utilizza un modello simile al seguente per consentire ai worker di aggiungere le proprie categorie (etichette).

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

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

labels

Un array di stringhe in formato JSON, ciascuna delle quali è un'etichetta che un worker può assegnare a un'istanza di un oggetto nell'immagine. I worker possono generare colori di sovrapposizione diversi per ogni istanza pertinente selezionando "add instance" (aggiungi istanza) sotto l'etichetta nello strumento.

nome

Il nome di questo widget. Viene utilizzato come una chiave per i dati di etichettatura nell'output del modulo.

src

L'URL dell'immagine che deve essere etichettata.

initial-value

Un oggetto JSON contenente le mappature dei colori di un lavoro di segmentazione delle istanze precedente e un collegamento all'output dell'immagine sovrapposta prodotta dal lavoro precedente. Includere questa opzione quando si desidera che un dipendente umano verifichi i risultati di un processo di etichettatura precedente e lo modifichi se necessario.

L'attributo apparirà come segue:

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

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono supportate da questo elemento.

full-instructions

Istruzioni generali su come eseguire la segmentazione dell'immagine.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

Il seguente output è supportato da questo elemento.

labeledImage

Un oggetto JSON contenente un PNG con codifica Base64 delle etichette.

Istanze

Un array JSON contenente oggetti con etichette e colori dell'istanza.

input ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un elemento che visualizza le istruzioni su tre pagine con schede, Riepilogo, Istruzioni dettagliate ed Esempi, quando il worker fa clic su un collegamento o un pulsante.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di un modello Liquid che ha utilizzato l'elemento <crowd-instructions>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

link-text

Il testo da visualizzare per aprire le istruzioni. L'impostazione predefinita è Click for instructions (Fai click per le istruzioni).

link-type

Una stringa che specifica il tipo di trigger per le istruzioni. I valori possibili sono "link" (impostazione predefinita) e "button".

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono supportate da questo elemento.

detailed-instructions

Contenuto che fornisce istruzioni specifiche per un'attività. Viene visualizzato nella pagina della scheda "Detailed Instructions" (Istruzioni dettagliate).

negative-example

Contenuto che fornisce esempi di completamento attività inadeguato. Viene visualizzato nella pagina della scheda "Examples" (Esempi). All'interno di questo elemento possono essere forniti più esempi.

positive-example

Contenuto che fornisce esempi di completamento attività corretto. Viene visualizzato nella pagina della scheda "Examples" (Esempi).

short-summary

Un breve dichiarazione che riepiloga l'attività da completare. Viene visualizzata nella pagina della scheda "Summary" (Riepilogo). All'interno di questo elemento possono essere forniti più esempi.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Consente di generare uno strumento per selezionare e annotare punti chiave su un'immagine.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-keypoint>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

initial-value

Un array, in formato JSON, di keypoint da applicare all'immagine all'avvio. Per esempio:

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

labels

Un array, in formato JSON, di stringhe da utilizzare come etichette di annotazione keypoint.

nome

Una stringa utilizzata per identificare la risposta inviata dal worker. Questo valore corrisponderà a una chiave nell'oggetto JSON che specifica la risposta.

src

L'URI di origine dell'immagine da annotare.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono richieste da questo elemento.

full-instructions

Istruzioni generali su come eseguire l'annotazione dell'immagine.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

Il seguente output è supportato da questo elemento.

input ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

keypoints

Un array di oggetti JSON contenenti le coordinate e l'etichetta di un keypoint. Ogni oggetto contiene le seguenti proprietà.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per disegnare linee su un'immagine. Ogni riga è associata a un'etichetta e i dati di output riporteranno i punti iniziale e finale di ogni linea.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-line>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello. Per altri esempi, consulta questo 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>

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Facoltativo. Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

initial-value

Facoltativo. Un array di oggetti JSON, ciascuno dei quali imposta una linea quando il componente viene caricato. Ogni oggetto JSON nell'array contiene le seguenti proprietà:

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

Le linee impostate tramite la proprietà initial-value possono essere regolate. Il fatto che la risposta di un worker sia stata modificata o meno viene tracciato tramite un valore booleano initialValueModified nell'output della risposta del worker.

labels

Obbligatorio. Un array di stringhe in formato JSON, ciascuna delle quali è un'etichetta che un worker può assegnare alla linea.

Limite: 10 etichette.

label-colors

Facoltativo. Una matrice di stringhe. Ogni stringa è un codice esadecimale (esadecimale) per un'etichetta.

nome

Obbligatorio. Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

src

Obbligatorio. L'URL dell'immagine su cui disegnare linee.

Regioni

Le seguenti regioni sono richieste da questo elemento.

full-instructions

Istruzioni generali su come disegnare linee.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

input ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

lines

Un array JSON contenente oggetti con etichette e vertici di linee.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Una finestra di piccole dimensioni che viene visualizzata sullo schermo quando è aperto.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio della sintassi che è possibile utilizzare con l'elemento <crowd-modal>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

link-text

Il testo da visualizzare per aprire la finestra modale. Il valore predefinito è "Click to open modal" (Fare clic per aprire finestra modale).

link-type

Una stringa che specifica il tipo di trigger per la finestra modale. I valori possibili sono "link" (impostazione predefinita) e "button".

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per disegnare poligoni su un'immagine e assegnare un'etichetta alla parte dell'immagine racchiusa in ogni poligono.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-polygon>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

labels

Un array di stringhe in formato JSON, ciascuna delle quali è un'etichetta che un worker può assegnare alla parte di immagine racchiusa da un poligono.

nome

Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

src

L'URL dell'immagine su cui disegnare poligoni.

initial-value

Un array di oggetti JSON, ciascuno dei quali definisce un poligono da disegnare quando il componente viene caricato. Ogni oggetto JSON nell'array contiene le seguenti proprietà:

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

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono obbligatorie.

full-instructions

Istruzioni generali su come disegnare poligoni.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

Il seguente output è supportato da questo elemento.

polygons

Un array di oggetti JSON, ciascuno dei quali descrive un poligono che è stato creato dal worker. Ogni oggetto JSON nell'array contiene le seguenti proprietà:

input ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

{
    "annotatedResult": 
    {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": 
      [
        {
          "label": "dog",
          "vertices": 
          [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        }
      ]
    }
  }
]

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": [
        {
          "label": "dog",
          "vertices": [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        },
        {
          "label": "dog",
          "vertices": [
            {
              "x": 870,
              "y": 278
            },
            {
              "x": 908,
              "y": 446
            },
            {
              "x": 1009,
              "y": 602
            },
            {
              "x": 1116,
              "y": 519
            },
            {
              "x": 1174,
              "y": 498
            },
            {
              "x": 1227,
              "y": 479
            },
            {
              "x": 1179,
              "y": 405
            },
            {
              "x": 1179,
              "y": 337
            }
          ]
        }
      ]
    }
  }
]

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": [
        {
          "label": "dog",
          "vertices": [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        },
        {
          "label": "cat",
          "vertices": [
            {
              "x": 870,
              "y": 278
            },
            {
              "x": 908,
              "y": 446
            },
            {
              "x": 1009,
              "y": 602
            },
            {
              "x": 1116,
              "y": 519
            },
            {
              "x": 1174,
              "y": 498
            },
            {
              "x": 1227,
              "y": 479
            },
            {
              "x": 1179,
              "y": 405
            },
            {
              "x": 1179,
              "y": 337
            }
          ]
        }
      ]
    }
  }
]

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per disegnare polilinee o linee su un'immagine. Ogni polilinea è associata a un'etichetta e può includere due o più vertici. Una polilinea può intersecarsi e i suoi punti iniziale e finale possono essere posizionati in qualsiasi punto dell'immagine.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-polyline>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello. Per altri esempi, consulta questo 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>

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Facoltativo. Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

initial-value

Facoltativo. Un array di oggetti JSON, ciascuno dei quali imposta una polilinea quando il componente viene caricato. Ogni oggetto JSON nell'array contiene le seguenti proprietà:

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

Le polilinee impostate tramite la proprietà initial-value possono essere regolate. Il fatto che la risposta di un worker sia stata modificata o meno viene tracciato tramite un valore booleano initialValueModified nell'output della risposta del worker.

labels

Obbligatorio. Un array di stringhe in formato JSON, ciascuna delle quali è un'etichetta che un worker può assegnare alla linea.

Limite: 10 etichette.

label-colors

Facoltativo. Una matrice di stringhe. Ogni stringa è un codice esadecimale (esadecimale) per un'etichetta.

nome

Obbligatorio. Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

src

Obbligatorio. L'URL dell'immagine su cui disegnare polilinee.

Regioni

Le seguenti regioni sono richieste da questo elemento.

full-instructions

Istruzioni generali su come disegnare polilinee.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

input ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

polilinee

Un array JSON contenente oggetti con etichette e vertici di polilinee.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un pulsante che può essere selezionato o deselezionato. Quando i pulsanti di opzione si trovano all'interno di un gruppo di opzioni, un solo pulsante di opzione può essere selezionato nel gruppo in qualsiasi momento. Di seguito è riportato un esempio di come configurare un elemento crowd-radio-button all'interno di un elemento crowd-radio-group.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio della sintassi che è possibile utilizzare con l'elemento <crowd-radio-button>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
<crowd-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

L'esempio precedente può essere visto in un modello di attività di lavoro personalizzato, in questo GitHub esempio: Entity Recognition Labeling Job Custom Template.

I pulsanti di opzione dell’elemento HTML crowd non supportano il tag HTML, required. Per rendere obbligatoria la selezione di un pulsante di opzione, utilizza elementi <input type="radio"> per creare pulsanti di opzione e aggiungi il tag required. L'attributo name per tutti gli elementi <input> che appartengono allo stesso gruppo di pulsanti di opzione deve essere lo stesso. Ad esempio, il modello seguente richiede all'utente di selezionare un pulsante di opzione nel gruppo animal-type prima dell'invio.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

checked

Un interruttore booleano che, se presente, visualizza il pulsante di opzione come selezionato.

disabled

Un interruttore booleano che, se presente, visualizza il pulsante come disabilitato e ne impedisce la selezione.

nome

Una stringa che viene utilizzata per identificare la risposta inviata dal worker. Questo valore corrisponderà a una chiave nell'oggetto JSON che specifica la risposta.

value

Un nome di proprietà per il valore booleano dell'elemento. Se non specificato, utilizza "on" come impostazione predefinita, ad esempio { "<name>": { "<value>": <true or false> } }.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

Emette un oggetto con il seguente modello: { "<name>": { "<value>": <true or false> } }. Se utilizzi i pulsanti all'esterno di un elemento crowd-radio-group, ma con la stessa stringa name e stringhe value diverse, l'oggetto nome conterrà un valore booleano per ogni stringa value. Per garantire che un solo pulsante in un gruppo di pulsanti sia selezionato, renderli figli di un elemento crowd-radio-group e utilizzare valori nome diversi.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un gruppo di pulsanti di opzione. Solo un pulsante di opzione all'interno del gruppo può essere selezionato. La scelta di un pulsante di opzione cancella gli eventuali pulsanti di opzioni scelti in precedenza all'interno dello stesso gruppo. Per un esempio di modello di interfaccia utente personalizzato che utilizza l'elemento crowd-radio-group, consulta questo modello personalizzato per il processo di etichettatura di riconoscimento dell'entità.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio della sintassi che è possibile utilizzare con l'elemento <crowd-radio-group>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

Nessun attributo speciale supportato da questo elemento.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

Emette un array di oggetti che rappresentano gli elementi crowd-radio-button al suo interno.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un widget per la segmentazione di un'immagine e l'assegnazione di un'etichetta a ogni segmento dell'immagine.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-semantic-segmentation>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo da visualizzare sopra l'immagine. Si tratta in genere di una domanda o semplice istruzione per il worker.

initial-value

Un oggetto JSON contenente le mappature dei colori di un lavoro di segmentazione semantica precedente e un collegamento all'output dell'immagine sovrapposta prodotta dal lavoro precedente. Includere questa opzione quando si desidera che un dipendente umano verifichi i risultati di un processo di etichettatura precedente e lo modifichi se necessario.

L'attributo apparirà come segue:

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

Quando si utilizzano tipi di attività predefiniti di Ground Truth con consolidamento delle annotazioni (in cui più di un worker etichetta una singola immagine), le mappature delle etichette vengono incluse nei record di output dei singoli worker, tuttavia il risultato complessivo è rappresentato come internal-color-map nei risultati consolidati.

È possibile convertire internal-color-map in label-mappings in un modello personalizzato utilizzando il linguaggio di template Liquid:

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

labels

Un array di stringhe in formato JSON, ciascuna delle quali è un'etichetta che un worker può assegnare a un segmento dell'immagine.

nome

Il nome di questo widget. Viene utilizzato come una chiave per l'input del widget nell'output del modulo.

src

L'URL dell'immagine che deve essere segmentata.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Regioni

Le seguenti regioni sono supportate da questo elemento.

full-instructions

Istruzioni generali su come eseguire la segmentazione dell'immagine.

short-instructions

Istruzioni importanti specifiche dell'attività che vengono visualizzate in un posto di rilievo.

Output

Il seguente output è supportato da questo elemento.

labeledImage

Un oggetto JSON contenente un PNG con codifica Base64 delle etichette.

labelMappings

Un oggetto JSON contenete oggetti denominati con etichette di segmentazione.

iniziale ValueModified

Un valore booleano che indica se i valori iniziali sono stati modificati. Questo è incluso solo quando l'output proviene da un'attività di regolazione.

ingresso ImageProperties

Un oggetto JSON che specifica le dimensioni dell'immagine che viene annotata dal worker. Questo oggetto include le seguenti proprietà.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Una barra con una manopola scorrevole che consente a un worker di selezionare un valore da un intervallo di valori spostando la manopola. Il dispositivo di scorrimento lo rende un'ottima scelta per impostazioni che riflettono livelli di intensità, ad esempio volume, luminosità o saturazione colore.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello di indagine che utilizza l'elemento <crowd-slider>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

disabled

Un interruttore booleano che, se presente, visualizza il cursore come disabilitato.

editable

Un interruttore booleano che, se presente, visualizza un pulsante su/giù che può essere scelto per selezionare il valore.

La selezione del valore tramite il pulsante su/giù è un'alternativa alla selezione del valore spostando la manopola sul dispositivo di scorrimento. La manopola sul dispositivo di scorrimento si sposterà in modo sincrono con le scelte del pulsante su/giù.

max

Un numero che specifica il valore massimo sul dispositivo di scorrimento.

min

Un numero che specifica il valore minimo sul dispositivo di scorrimento.

nome

Una stringa che viene utilizzata per identificare la risposta inviata dal worker. Questo valore corrisponderà a una chiave nell'oggetto JSON che specifica la risposta.

pin

Un interruttore booleano che, se presente, visualizza il valore corrente sopra la manopola quando viene spostata.

obbligatorio

Un interruttore booleano che, se presente, richiede al worker di fornire l'input.

secondary-progress

Quando utilizzato con un attributo CSS crowd-slider-secondary-color, la barra di avanzamento viene colorata fino al punto rappresentato da secondary-progress. Ad esempio, se sta rappresentando l'avanzamento di un video in streaming, value rappresenta la posizione del visualizzatore nella timeline del video. Il valore secondary-progress rappresenta il punto sulla timeline fino a cui il video è stato bufferizzato.

fase

Un numero che specifica la differenza tra i valori selezionabili sul dispositivo di scorrimento.

value

Un set di impostazioni che diventa il default se il worker non fornisce input.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un componente modellato per somigliare a una scheda con le informazioni sottostanti.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello che utilizza l'elemento <crowd-tab>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

intestazione

Il testo visualizzato sulla scheda. Si tratta in genere di un nome descrittivo breve che indica le informazioni contenute sotto la scheda.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un container per informazioni a schede.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello che utilizza l'elemento <crowd-tabs>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

Questo elemento non contiene attributi.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Un campo per l'immissione di testo.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

Di seguito è riportato un esempio di modello Liquid progettato per trascrivere clip audio che utilizza l'elemento <crowd-text-area>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

allowed-pattern

Un'espressione regolare che viene utilizzata con l'attributo auto-validate per ignorare caratteri non corrispondenti durante la digitazione del worker.

auto-focus

Un interruttore booleano che, se presente, inserisce il cursore in questo elemento durante il caricamento, in modo che gli utenti possano iniziare immediatamente a digitare senza dover fare clic all'interno dell'elemento.

auto-validate

Un interruttore booleano che, se presente, attiva la convalida dell'input. Il comportamento del validatore può essere modificato dagli attributi error-message e allowed-pattern.

char-counter

Un interruttore booleano che, se presente, inserisce un piccolo campo di testo sotto l'angolo inferiore destro dell'elemento, che visualizza il numero di caratteri all'interno dell'elemento.

disabled

Un interruttore booleano che, se presente, visualizza l'area di input come disabilitata.

error-message

Il testo da visualizzare sotto il campo di input, sul lato sinistro, se la convalida non riesce.

etichetta

Una stringa che viene visualizzata all'interno di un campo di testo.

Questo testo si riduce e si solleva sopra un campo di testo quando il worker inizia a digitare nel campo o quando l'attributo value è impostato.

max-length

Un numero intero che specifica il numero massimo di caratteri consentiti dall'elemento. I caratteri digitati o incollati oltre il massimo consentito vengono ignorati.

max-rows

Un numero intero che specifica il numero massimo di righe di testo consentite all'interno di un. crowd-text-area In genere, l'elemento si espande per supportare nuove righe. Se impostato, quando il numero di righe supera questo valore, il contenuto scorre verso l'alto finché non è più visibile e viene visualizzato un controllo barra di scorrimento.

nome

Una stringa utilizzata per rappresentare i dati dell'elemento nell'output.

placeholder

Una stringa presentata all'utente come testo segnaposto. Scompare dopo che l'utente inizia a digitare nell'area di input.

righe

Un numero intero che specifica l'altezza dell'elemento in righe di testo.

value

Un set di impostazioni che diventa il default se il worker non fornisce input. Il set di impostazioni viene visualizzato in un campo di testo.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

Questo elemento emette il name come un nome di proprietà e il contenuto di testo dell'elemento come il valore. I ritorni a capo nel testo sono rappresentati come \n.

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Una notifica discreta visualizzata temporaneamente sullo schermo. È visibile un solo attributo crowd-toast.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in. CodePen

Di seguito è riportato un esempio di modello Liquid che utilizza l'elemento <crowd-toast>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

durata

Un numero che specifica la durata, in millisecondi, di visualizzazione della notifica sullo schermo.

text

Il testo da visualizzare nella notifica.

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.

Pulsante che agisce come interruttore ON/OFF, alternando uno stato.

Guarda un esempio interattivo di un modello HTML che utilizza questo elemento HTML Crowd in CodePen.

L'esempio seguente mostra diversi modi per utilizzare l'elemento HTML <crowd-toggle-button>. Copia il codice seguente e salvalo in un file con l'estensione .html. Apri il file in qualsiasi browser per visualizzare l'anteprima e interagire con questo modello.

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

Attributes

I seguenti attributi sono supportati da questo elemento.

checked

Un interruttore booleano che, se presente, mostra il pulsante in posizione ON.

disabled

Un interruttore booleano che, se presente, visualizza il pulsante come disabilitato e ne impedisce la commutazione.

invalid

Se in posizione OFF, un pulsante che utilizza questo attributo verrà visualizzato in un colore di avviso. Il colore standard è rosso, ma può essere modificato in CSS. Quando attivato, il pulsante verrà visualizzato nello stesso colore degli altri pulsanti in posizione ON.

nome

Una stringa che viene utilizzata per identificare la risposta inviata dal worker. Questo valore corrisponde a una chiave nell'oggetto JSON che specifica la risposta.

obbligatorio

Un interruttore booleano che, se presente, richiede al worker di fornire l'input.

value

Un valore utilizzato nell'output come nome di proprietà per lo stato booleano dell'elemento. Se non fornito, viene usato il valore predefinito "on".

Gerarchia di elementi

Questo elemento dispone dei seguenti elementi padre e figlio.

Output

Questo elemento restituisce l'attributo name come il nome di un oggetto, contenente value come un nome di proprietà e lo stato dell'elemento come valore booleano per la proprietà. Se non viene specificato un valore per l'elemento, l'impostazione predefinita per il nome di proprietà è "on".

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

Vedi anche

Per ulteriori informazioni, consulta gli argomenti seguenti.