SageMaker Elementos HTML do Crowd

Uma mensagem que alerta o trabalhador para uma situação atual.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-alert>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

dismissible

Uma operação booliana que, se presente, permite que a mensagem seja fechada pelo trabalhador.

tipo

Uma string que especifica o tipo de mensagem a ser exibida. Os valores possíveis são "info" (o padrão), "success", "error" e "warning".

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um ícone que flutua no canto superior direito de outro elemento ao qual está anexado.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo que usa o elemento <crowd-badge>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

for

Uma string que especifica o ID do elemento ao qual o emblema está anexado.

icon

Uma string que especifica o ícone a ser exibido no emblema. A string deve ser o nome de um ícone do código aberto iron-icons definido, que é pré-carregado, ou o URL para um ícone personalizado.

Este atributo substitui o atributo label.

Veja a seguir um exemplo da sintaxe que pode ser usada para adicionar um ícone de ferro a um elemento HTML <crowd-badge>. Substitua icon-name pelo nome do ícone a ser usado nesse Conjunto de ícones.

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

rótulo

O texto a ser exibido no selo. São recomendados três caracteres ou menos, pois um texto muito grande transbordará a área do selo. Um ícone pode ser exibido no lugar do texto, definindo o atributo icon.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um botão estilizado que representa alguma ação.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo que usa o elemento <crowd-button>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

desabilitado

Uma opção booliana que, se presente, exibe o botão como desabilitado e evita cliques.

form-action

Uma opção que envia seu elemento pai crowd-form, se definido como "submit", ou redefine seu elemento pai <crowd-form>, se definido como "reset".

href

O URL para um recurso online. Use essa propriedade se você precisar de um link estilizado como um botão.

icon

Uma string que especifica o ícone a ser exibido ao lado do texto do botão. A string deve ser o nome de um ícone do código aberto iron-icons definido, que é pré-carregado. Por exemplo, para inserir o iron-icon pesquisa, use o seguinte:

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

O ícone é posicionado à esquerda ou à direita do texto, conforme especificado pelo atributo icon-align.

Para usar um ícone personalizado, consulte icon-url.

icon-align

A posição esquerda ou direita do ícone em relação ao texto do botão. O padrão é "left".

icon-url

Um URL para uma imagem personalizada do ícone. Uma imagem personalizada pode ser usada no lugar de um ícone padrão especificado pelo atributo icon.

carregar

Uma operação booliana que, se presente, exibe o botão como estando em um estado em carregamento. Esse atributo terá precedência sobre o atributo disabled se os dois atributos estiverem presentes.

target

Quando você usa o atributo href para fazer o botão atuar como um link para um URL específico, o atributo target direcionará opcionalmente um quadro ou uma janela onde o URL vinculado deve ser carregado.

variant

O estilo geral do botão. Use "primary" para botões primários, "normal" para botões secundários, "link" para botões terciários ou "icon" para exibir apenas o ícone sem texto.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um widget para desenhar retângulos em uma imagem e atribuir um rótulo à parte da imagem contida em cada retângulo.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-bounding-box>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo. Para obter mais exemplos, consulte este GitHub repositório.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

initial-value

Uma matriz de objetos JSON, cada um dos quais define uma caixa delimitadora quando o componente é carregado. Cada objeto JSON na matriz contém as seguintes propriedades. As caixas delimitadoras definidas por meio da propriedade initial-value podem ser ajustadas e se uma resposta do operador foi ou não ajustada será rastreada por meio de um booliano initialValueModified na saída da resposta do operador.

rótulos

Uma matriz de strings formatadas em JSON, cada uma das quais é um rótulo que um trabalhador pode atribuir à parte da imagem delimitada por um retângulo. Limite: 10 rótulos.

name

O nome deste widget. É usada como uma chave para a entrada do widget na saída do formulário.

src

O URL da imagem na qual desenhar caixas delimitadoras.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões são exigidas por esse elemento.

full-instructions

Instruções gerais sobre como desenhar caixas delimitadoras.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A seguinte saída tem suporte por este elemento.

boundingBoxes

Uma matriz de objetos JSON, cada qual especificando uma caixa delimitadora que foi criada pelo trabalhador. Cada objeto JSON na matriz contém as seguintes propriedades.

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

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

Consulte também

Para obter mais informações, consulte.

Uma caixa com uma aparência elevada para exibir informações.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo projetado para tarefas de análise de sentimento que usa o elemento <crowd-card>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

heading

O texto exibido na parte superior da caixa.

image

Um URL para uma imagem a ser exibida dentro da caixa.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um componente da interface do usuário que pode ser marcado ou desmarcado, permitindo que um usuário selecione várias opções de um conjunto.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-checkbox>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

checked

Uma opção booliana que, se presente, exibe a caixa de seleção marcada.

Veja a seguir um exemplo da sintaxe usada para marcar uma caixa de seleção por padrão.

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

desabilitado

Uma opção booliana que, se presente, exibe a caixa de seleção como desabilitada e impede sua marcação.

Veja a seguir um exemplo da sintaxe usada para desabilitar uma caixa de seleção.

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

name

Uma string usada para identificar a resposta enviada pelo trabalhador. Esse valor corresponderá a uma chave no objeto JSON que especifica a resposta.

obrigatório

Uma operação booliana que, se presente, exige que o trabalhador forneça uma entrada.

Veja a seguir um exemplo da sintaxe usada para exigir que uma caixa de seleção seja marcada.

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

valor

Uma string usada como o nome do estado da caixa de seleção na saída. O padrão é "on" se não for especificado.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

Fornece um objeto JSON. A string name é o nome do objeto e a string value é o nome da propriedade para um valor booliano com base no estado da caixa de seleção; true se marcado, false se não marcado.

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

Consulte também

Para obter mais informações, consulte.

Um widget para classificar o conteúdo sem imagem, como áudio, vídeo ou texto.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo de tarefa de operador HTML criado usando o crowd-classifier. Este exemplo usa a Linguagem de modelo Liquid para automatização:

Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

categories

Uma matriz de strings formatadas em JSON, cada uma das quais é uma categoria que um operador pode atribuir ao exto. Você deve incluir "other" como categoria. Caso contrário, o trabalhador não poderá fornecer uma resposta.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

name

O nome deste widget. Ela é usada como uma chave para a entrada do widget na saída do formulário.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões têm suporte por esse elemento.

classification-target

O conteúdo a ser classificado pelo trabalhador. Isso pode ser texto simples ou HTML. Exemplos de como o HTML pode ser usado incluem mas não estão limitados à incorporação de um player de vídeo ou áudio, à incorporação de um PDF ou à realização de uma comparação de duas ou mais imagens.

full-instructions

Instruções gerais sobre como fazer a classificação do texto.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A saída desse elemento é um objeto usando o valor especificado name como um nome de propriedade e uma string de categories como o valor da propriedade.

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

Consulte também

Para obter mais informações, consulte.

Um widget para classificar várias formas de conteúdo: áudio, vídeo ou texto, em uma ou mais categorias. O conteúdo a ser classificado é referenciado como um objeto.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo de tarefa de operador HTML criado usando esse elemento. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte do elemento crowd-classifier-multi-select. Cada atributo aceita um valor ou valores de string.

categories

Obrigatório. Uma matriz de strings em formato JSON, cada uma das quais é uma categoria que um operador pode atribuir ao objeto.

cabeçalho

Obrigatório. O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para os operadores.

name

Obrigatório. O nome deste widget. No formulário, ele é usado como uma chave para entrada do widget.

exclusion-category

Opcional. Uma string em formato JSON com o seguinte formato: "{ text: 'default-value' }". Esse atributo define um valor padrão que os operadores podem escolher se nenhum dos rótulos se aplica ao objeto mostrado na interface do usuário do operador.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

Esse elemento usa as seguintes regiões.

classification-target

O conteúdo a ser classificado pelo trabalhador. O conteúdo pode ser texto sem formatação ou um objeto especificado no modelo usando HTML. Por exemplo, você pode usar elementos HTML para incluir um player de vídeo ou de áudio, incorporar um arquivo PDF ou incluir uma comparação de duas ou mais imagens.

full-instructions

Instruções gerais sobre como classificar texto.

short-instructions

Instruções importantes específicas da tarefa. Essas instruções são exibidas de forma proeminente.

Saída

A saída desse elemento é um objeto usando o valor name especificado como um nome de propriedade e uma string de categories como o valor da propriedade.

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

Consulte também

Para obter mais informações, consulte as informações a seguir.

Um widget para rotular palavras, frases ou strings de caracteres em um texto mais longo. Os operadores selecionam um rótulo e destacam o texto ao qual o rótulo se aplica.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo que usa o elemento <crowd-entity-annotation>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

initial-value

Uma matriz de objetos no formato JSON, cada um dos quais define uma anotação a ser aplicada ao texto na inicialização. Os objetos contêm um valor label que corresponde a um no atributo labels, um valor inteiro startOffset para o deslocamento unicode inicial do intervalo rotulado e um valor inteiro endOffset para o deslocamento unicode final.

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

rótulos

Uma matriz de objetos no formato JSON, cada um dos quais contendo:

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

name

Serve como o nome do widget no DOM. Ele também é usado como o nome do atributo de rótulo na saída do formulário e o manifesto de saída.

text

O texto a ser anotado. O sistema de modelos escapa aspas e strings HTML por padrão. Se o código já tiver sido escapado ou parcialmente escapado, consulte Filtros de variáveis para obter mais maneiras de controlar o escape.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões têm suporte por esse elemento.

full-instructions

Instruções gerais sobre como trabalhar com o widget.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A seguinte saída tem suporte por este elemento.

entidades

Um objeto JSON que especifica o início, o fim e o rótulo de uma anotação. Esse objeto contém as seguintes propriedades.

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

Consulte também

Para obter mais informações, consulte.

Um botão flutuante com uma imagem no centro.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid projetado para classificação de imagens que usa o elemento <crowd-fab>. Esse modelo é usado JavaScript para permitir que os trabalhadores relatem problemas com a interface do usuário do trabalhador. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

desabilitado

Uma operação booliana que, se presente, exibe o botão flutuante como desativado e evita cliques.

icon

Uma string que especifica o ícone a ser exibido no centro do botão. A string deve ser o nome de um ícone do código aberto iron-icons definido, que é pré-carregado, ou o URL para um ícone personalizado.

Veja a seguir um exemplo da sintaxe que pode ser usada para adicionar um ícone de ferro a um elemento HTML <crowd-fab>. Substitua icon-name pelo nome do ícone a ser usado nesse Conjunto de ícones.

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

rótulo

Uma string que consiste em um único caractere que pode ser usado em vez de um ícone. Emojis ou vários caracteres podem fazer com que o botão mostre reticências.

title

Uma string que será exibida como uma dica de ferramenta quando o mouse passar sobre o botão.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

O wrapper de formulário para todas as tarefas personalizadas. Define e implementa ações importantes para o envio adequado de seus dados de formulário.

Se um crowd-button do tipo "submit" não estiver incluído no elemento <crowd-form>, ele será automaticamente anexado ao elemento <crowd-form>.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo de classificação de imagem que usa o elemento <crowd-form>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Eventos de elemento

O elemento crowd-form estende o elemento HTML form padrão e herda seus eventos, como onclick e onsubmit.

Consulte também

Para obter mais informações, consulte.

Um botão com uma imagem colocada no centro. Quando o usuário toca no botão, um efeito de ondulação emana do centro do botão.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid projetado para classificação de imagens que usa o elemento <crowd-icon-button>. Esse modelo é usado JavaScript para permitir que os trabalhadores relatem problemas com a interface do usuário do trabalhador. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

desabilitado

Uma opção booliana que, se presente, exibe o botão como desabilitado e evita cliques.

icon

Uma string que especifica o ícone a ser exibido no centro do botão. A string deve ser o nome de um ícone do código aberto iron-icons definido, que é pré-carregado, ou o URL para um ícone personalizado.

Veja a seguir um exemplo da sintaxe que pode ser usada para adicionar um ícone de ferro a um elemento HTML <crowd-icon-button>. Substitua icon-name pelo nome do ícone a ser usado nesse Conjunto de ícones.

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

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um widget para classificar uma imagem. Use um dos seguintes formatos de imagem compatíveis: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. As imagens não têm limite de tamanho.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo de classificação de imagem que usa o elemento <crowd-image-classifier>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos são exigidos por esse elemento.

categories

Uma matriz de strings formatadas em JSON, cada uma das quais é uma categoria que um trabalhador pode atribuir à imagem. Você deve incluir "other" como categoria, para que o trabalhador possa fornecer uma resposta. É possível especificar até 10 categorias.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

name

O nome deste widget. Ela é usada como uma chave para a entrada do widget na saída do formulário.

overlay

Informações a serem sobrepostas na imagem de origem. Isso é para fluxos de trabalho de verificação de tarefas de caixa delimitadora e de segmentação semântica.

É um objeto JSON contendo um objeto com o nome do tipo de tarefa em letras minúsculas e maiúsculas como a chave. O valor dessa chave é um objeto que contém os rótulos e outras informações necessárias da tarefa anterior.

A seguir, um exemplo de um elemento crowd-image-classifier com atributos para verificar uma tarefa de segmentação semântica:

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

Uma tarefa de verificação de segmentação semântica usaria o valor overlay da seguinte forma:

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

Uma tarefa de segmentação de instâncias usaria o valor do overlay seguinte forma:

<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

A URL da imagem a ser classificada.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As regiões a seguir são exigidas por esse elemento.

full-instructions

Instruções gerais para o operador sobre como classificar uma imagem.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

worker-comment

Use isso em fluxos de trabalho de verificação quando precisar que os operadores expliquem por que fizeram a escolha que fizeram. Use o texto entre as tags de abertura e fechamento para fornecer instruções aos operadores sobre quais informações devem ser incluídas no comentário.

Ele usa os seguintes atributos:

cabeçalho

Uma frase com uma call-to-action para deixar um comentário. Usado como texto do título para uma janela modal em que o comentário é adicionado.

Opcional. O padrão é "Adicionar um comentário".

link-text

Este texto é exibido abaixo das categorias no widget. Quando clicado, ele abre uma janela modal em que o operador poderá adicionar um comentário.

Opcional. O padrão é "Adicionar um comentário".

espaço reservado

Um exemplo de texto na área de texto do comentário que é substituído quando operador começa a digitar. Isso não será exibido na saída se o operador deixar o campo em branco.

Opcional. O padrão é branco.

Saída

A saída desse elemento é uma string que especifica um dos valores definidos no atributo categories do elemento <crowd-image-classifier>.

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

Consulte também

Para obter mais informações, consulte.

Um widget para classificar uma imagem em uma ou mais categorias. Use um dos seguintes formatos de imagem compatíveis: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. As imagens não têm limite de tamanho.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo de tarefa de operador HTML criado usando esse elemento crowd. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte do elemento crowd-image-classifier-multi-select. Cada atributo aceita um valor ou valores de string.

categories

Obrigatório. Uma matriz de strings em formato JSON, cada uma das quais é uma categoria que um operador pode atribuir à imagem. Um operador deve escolher pelo menos uma categoria e pode escolher todas as categorias.

cabeçalho

Obrigatório. O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para os operadores.

name

Obrigatório. O nome deste widget. No formulário, ele é usado como uma chave para entrada do widget.

src

Obrigatório. O URL da imagem a ser classificada.

exclusion-category

Opcional. Uma string em formato JSON com o seguinte formato: "{ text: 'default-value' }". Esse atributo define um valor padrão que os operadores podem escolher se nenhum dos rótulos se aplicar à imagem mostrada na interface do usuário do operador.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

Esse elemento usa as seguintes regiões

full-instructions

Instruções gerais para o operador sobre como classificar uma imagem.

short-instructions

Instruções importantes específicas da tarefa. Essas instruções são exibidas de forma proeminente.

Saída

A saída desse elemento é uma string que especifica um ou mais dos valores definidos no atributo categories do elemento <crowd-image-classifier-multi-select>.

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

Consulte também

Para obter mais informações, consulte as informações a seguir.

Uma caixa que aceita dados de entrada.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-input>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

allowed-pattern

Uma expressão regular usada com o atributo auto-validate para ignorar caracteres não correspondentes como os tipos de trabalho.

auto-focus

Quando o valor é definido como true, o navegador coloca o foco dentro da área de entrada após o carregamento. Dessa forma, o trabalhador pode começar a digitar sem precisar selecioná-lo primeiro.

auto-validate

Uma operação booliana que, se presente, ativa a validação de entrada. O comportamento do validador pode ser modificado pelos error-message e allowed-pattern.

desabilitado

Uma operação booliana que, se presente, exibe a área de entrada como desabilitada.

error-message

O texto a ser exibido abaixo do campo de entrada, no lado esquerdo, se a validação falhar.

rótulo

Uma string que é exibida dentro de um campo de texto.

Esse texto se encolhe e se eleva acima de um campo de texto quando o trabalhador começa a digitar no campo ou quando o atributo value está definido.

max-length

Um número máximo de caracteres que a entrada aceitará. A entrada além desse limite é ignorada.

min-length

Um comprimento mínimo para a entrada no campo

name

Define o nome da entrada a ser usada no DOM e na saída do formulário.

espaço reservado

Um valor de string que é usado como texto de espaço reservado, exibido até que o funcionário comece a inserir dados na entrada. Ele não é usado como um valor padrão.

obrigatório

Uma operação booliana que, se presente, exige que o trabalhador forneça uma entrada.

tipo

Usa uma string para definir o comportamento do HTML5 input-type para a entrada. Exemplos incluem file e date.

valor

Uma predefinição que se tornará o padrão se o trabalhador não fornecer entrada. A predefinição aparece em um campo de texto.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

Fornece uma string name como o nome da propriedade e o texto que foi inserido no campo como seu valor.

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

Consulte também

Para obter mais informações, consulte.

Um widget para identificar instâncias individuais de objetos específicos em uma imagem e criar uma sobreposição colorida para cada instância rotulada.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa <crowd-instance-segmentation>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Use um modelo semelhante ao seguinte para permitir que os operadores adicionem suas próprias categorias (rótulos).

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

rótulos

Uma matriz de strings formatadas em JSON, cada uma das quais é um rótulo que um operador pode atribuir à instância de um objeto na imagem. Os operadores podem gerar diferentes cores de sobreposição para cada instância relevante selecionando "adicionar instância" no rótulo da ferramenta.

name

O nome deste widget. É usado como uma chave para os dados de rotulagem na saída do formulário.

src

O URL da imagem que deve ser rotulada.

initial-value

Um objeto JSON contendo os mapeamentos de cores de uma tarefa de segmentação instância anterior e um link para a saída da imagem de sobreposição pela tarefa anterior. Inclua isso quando quiser que um operador humano verifique os resultados de uma tarefa de rotulagem anterior e ajuste-o, se necessário.

O atributo será semelhante ao seguinte:

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

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões têm suporte por esse elemento.

full-instructions

Instruções gerais sobre como fazer a segmentação de imagens.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A seguinte saída tem suporte por este elemento.

labeledImage

Um Objeto JSON contendo um PNG codificado em Base64 dos rótulos.

instâncias

Uma matriz JSON contendo objetos com os rótulos e as cores da instância.

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

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

Consulte também

Para obter mais informações, consulte.

Um elemento que exibe instruções em três páginas com guias, Resumo, Instruções detalhadas e Exemplos, quando o trabalhador clica em um link ou botão.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usou o elemento <crowd-instructions>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

link-text

O texto a ser exibido para abrir as instruções. O padrão é Clique para obter instruções.

link-type

Uma string que especifica o tipo de trigger para as instruções. Os valores possíveis são "link" (padrão) e "button".

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões têm suporte por esse elemento.

detailed-instructions

Conteúdo que fornece instruções específicas para uma tarefa. Isso aparece na página da aba "Instruções detalhadas".

negative-example

Conteúdo que fornece exemplos de conclusão de tarefa inadequada. Isso aparece na página da aba "Exemplos". Mais de um exemplo pode ser fornecido dentro desse elemento.

positive-example

Conteúdo que fornece exemplos de conclusão de tarefa adequada. Isso aparece na página da aba "Exemplos".

short-summary

Uma breve declaração que resume a tarefa a ser concluída. Isso aparece na página da aba "Resumo". Mais de um exemplo pode ser fornecido dentro desse elemento.

Consulte também

Para obter mais informações, consulte.

Gera uma ferramenta para selecionar e anotar pontos-chave em uma imagem.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-keypoint>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

initial-value

Uma matriz, no formato JSON, de pontos principais a serem aplicados à imagem no início. Por exemplo: .

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

rótulos

Uma matriz, no formato JSON, de strings a serem usadas como rótulos de anotação de pontos principais.

name

Uma string usada para identificar a resposta enviada pelo operador. Esse valor corresponderá a uma chave no objeto JSON que especifica a resposta.

src

O URI de origem da imagem a ser anotada.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões são exigidas por esse elemento.

full-instructions

Instruções gerais sobre como anotar a imagem.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A seguinte saída tem suporte por este elemento.

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

keypoints

Uma matriz de objetos JSON que contém as coordenadas e o rótulo de um ponto principal. Cada objeto contém as seguintes propriedades:

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

Consulte também

Para obter mais informações, consulte.

Um widget para desenhar linhas em uma imagem. Cada linha é associada a um rótulo e os dados de saída relatarão os pontos inicial e final de cada linha.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-line>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo. Para obter mais exemplos, consulte este GitHub repositório.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

Opcional. O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

initial-value

Opcional. Uma matriz de objetos JSON, cada um dos quais define uma linha quando o componente é carregado. Cada objeto JSON na matriz contém as seguintes propriedades:

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

As linhas definidas por meio da propriedade initial-value podem ser ajustadas. Se a resposta de um operador foi ajustada ou não, é rastreado por meio de um booleano initialValueModified na saída da resposta do operador.

rótulos

Obrigatório. Uma matriz de strings formatadas em JSON, cada uma das quais é um rótulo que um operador pode atribuir à linha.

Limite: 10 rótulos

cores do rótulo

Opcional. Uma matriz de strings. Cada string é um código hexadecimal (hex) para um rótulo.

name

Obrigatório. O nome deste widget. É usada como uma chave para a entrada do widget na saída do formulário.

src

Obrigatório. O URL da imagem na qual desenhar as linhas.

Regiões

As seguintes regiões são exigidas por esse elemento.

full-instructions

Instruções gerais sobre como desenhar as linhas.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

lines

Uma matriz JSON contendo objetos com rótulos e vértices de linhas.

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

Consulte também

Para obter mais informações, consulte.

Uma pequena janela que aparece no visor quando é aberta.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo da sintaxe que você pode usar com o elemento <crowd-modal>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

link-text

O texto a ser exibido para abrir o modal. O padrão é "Clique para abrir o modal".

link-type

Uma string que especifica o tipo de trigger para o modal. Os valores possíveis são "link" (padrão) e "button".

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um widget para desenhar polígonos em uma imagem e atribuir um rótulo à parte da imagem contida em cada polígono.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-polygon>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

rótulos

Uma matriz de strings formatadas em JSON, cada uma das quais é um rótulo que um trabalhador pode atribuir à parte da imagem delimitada por um polígono.

name

O nome deste widget. É usada como uma chave para a entrada do widget na saída do formulário.

src

O URL da imagem na qual desenhar polígonos.

initial-value

Uma matriz de objetos JSON, cada um dos quais define um polígono a ser desenhado quando o componente é carregado. Cada objeto JSON na matriz contém as seguintes propriedades.

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

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões são necessárias:

full-instructions

Instruções gerais sobre como desenhar polígonos.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A seguinte saída tem suporte por este elemento.

polygons

Uma matriz de objetos JSON, cada um dos quais descreve um polígono que foi criado pelo operador. Cada objeto JSON na matriz contém as seguintes propriedades.

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

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

Consulte também

Para obter mais informações, consulte.

Um widget para desenhar polilinhas ou linhas em uma imagem. Cada polilinha está associada a um rótulo e pode incluir dois ou mais vértices. Uma polilinha pode se cruzar e seus pontos inicial e final podem ser colocados em qualquer lugar da imagem.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-polyline>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo. Para obter mais exemplos, consulte este GitHub repositório.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

Opcional. O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

initial-value

Opcional. Uma matriz de objetos JSON, cada um dos quais define uma polilinha quando o componente é carregado. Cada objeto JSON na matriz contém as seguintes propriedades:

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

As polilinhas definidas por meio da propriedade initial-value podem ser ajustadas. Se a resposta de um operador foi ajustada ou não, é rastreado por meio de um booleano initialValueModified na saída da resposta do operador.

rótulos

Obrigatório. Uma matriz de strings formatadas em JSON, cada uma das quais é um rótulo que um operador pode atribuir à linha.

Limite: 10 rótulos

cores do rótulo

Opcional. Uma matriz de strings. Cada string é um código hexadecimal (hex) para um rótulo.

name

Obrigatório. O nome deste widget. É usada como uma chave para a entrada do widget na saída do formulário.

src

Obrigatório. O URL da imagem na qual desenhar polilinhas.

Regiões

As seguintes regiões são exigidas por esse elemento.

full-instructions

Instruções gerais sobre como desenhar polilinhas.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

Polilinhas

Uma matriz JSON contendo objetos com rótulos e vértices de polilinhas.

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

Consulte também

Para obter mais informações, consulte.

Um botão que pode ser marcado ou desmarcado. Quando os botões de opção estão dentro de um grupo de opção, exatamente um deles no grupo pode ser marcado a qualquer momento. Veja a seguir um exemplo de como configurar um elemento crowd-radio-button dentro de um elemento crowd-radio-group.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo da sintaxe que você pode usar com o elemento <crowd-radio-button>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

O exemplo anterior pode ser visto em um modelo de tarefa de trabalhador personalizado neste GitHub exemplo: reconhecimento de entidade, rotulagem, modelo personalizado de trabalho.

Os botões de opção Crowd HTML Element não suportam a tag HTML required. Para tornar necessária a seleção de botões de rádio, use elementos <input type="radio"> para criar botões de rádio e adicionar a tag required. O atributo name de todos os elementos <input> que pertencem ao mesmo grupo de botões de opção deve ser o mesmo. Por exemplo, o modelo a seguir exige que o usuário selecione um botão de rádio no grupo animal-type antes de enviar.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

checked

Uma operação booliana que, se presente, exibe o botão de opção como marcado.

desabilitado

Uma operação booliana que, se presente, exibe o botão como desabilitado e impede que ele seja marcado.

name

Uma string usada para identificar a resposta enviada pelo trabalhador. Esse valor corresponderá a uma chave no objeto JSON que especifica a resposta.

valor

Um nome de propriedade para o valor booleano do elemento. Se não for especificado, ele usará "on" como padrão, por exemplo, { "<name>": { "<value>": <true or false> } }.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

Gera um objeto com o seguinte padrão: { "<name>": { "<value>": <true or false> } }. Se você usar os botões fora de um elemento crowd-radio-group, mas com a mesma string name e diferentes strings value, o objeto de nome conterá um valor booliano para cada string value. Para garantir que apenas um em um grupo de botões seja selecionado, torne-os filhos de um elemento crowd-radio-group e use diferentes valores de nome.

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

Consulte também

Para obter mais informações, consulte.

Um grupo de botões de opções. Apenas um botão de opção no grupo pode ser selecionado. A escolha de um botão de opção apaga qualquer botão de opção escolhido anteriormente no mesmo grupo. Para obter um exemplo de um modelo de interface do usuário personalizado que usa o elemento crowd-radio-group, consulte este modelo personalizado de trabalho de rotulagem de reconhecimento de entidade.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo da sintaxe que você pode usar com o elemento <crowd-radio-group>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Nenhum atributo especial é compatível com esse elemento.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

Gera uma matriz de objetos representando os elementos crowd-radio-button dentro dela.

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

Consulte também

Para obter mais informações, consulte.

Um widget para segmentar uma imagem e atribuir um rótulo a cada segmento de imagem.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-semantic-segmentation>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto a ser exibido acima da imagem. Isso é tipicamente uma pergunta ou uma instrução simples para o trabalhador.

initial-value

Um objeto JSON contendo os mapeamentos de cores de uma tarefa de segmentação semântica anterior e um link para a saída da imagem de sobreposição pela tarefa anterior. Inclua isso quando quiser que um operador humano verifique os resultados de uma tarefa de rotulagem anterior e ajuste-o, se necessário.

O atributo seria semelhante ao seguinte:

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

Ao usar os tipos de tarefas integrados do Ground Truth com consolidação de anotações (em que mais de um operador rotula uma única imagem), os mapeamentos de rótulos são incluídos nos registros de saída individuais do operador, no entanto, o resultado geral é representado como internal-color-map nos resultados consolidados.

É possível converter o internal-color-map para label-mappings em um modelo personalizado usando a linguagem de modelagem 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 %}
   } 
}"

rótulos

Uma matriz de strings formatadas em JSON, cada uma das quais é um rótulo que um trabalhador pode atribuir a um segmento da imagem.

name

O nome deste widget. Ela é usada como uma chave para a entrada do widget na saída do formulário.

src

O URL da imagem que deve ser segmentada.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Regiões

As seguintes regiões têm suporte por esse elemento.

full-instructions

Instruções gerais sobre como fazer a segmentação de imagens.

short-instructions

Instruções importantes específicas da tarefa exibidas em um local de destaque.

Saída

A seguinte saída tem suporte por este elemento.

labeledImage

Um Objeto JSON contendo um PNG codificado em Base64 dos rótulos.

labelMappings

Um Objeto JSON contendo objetos com nomes com os rótulos de segmentação.

inicial ValueModified

Um booliano representando se os valores iniciais foram modificados. Isso será incluído somente quando a saída for de uma tarefa de ajuste.

entrada ImageProperties

Um objeto JSON que especifica as dimensões da imagem que está sendo anotada pelo trabalhador. Esse objeto contém as seguintes propriedades.

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

Consulte também

Para obter mais informações, consulte.

Uma barra com um botão deslizante que permite que um trabalhador selecione um valor de um intervalo de valores movendo o botão. O controle deslizante faz dele uma ótima opção para configurações que refletem níveis de intensidade, como volume, brilho ou saturação de cores.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo de pesquisa que usa o elemento <crowd-slider>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

desabilitado

Uma operação booliana que, se presente, exibe o controle deslizante como desabilitado.

editable

Uma operação booliana que, se presente, exibe um botão para cima/para baixo que pode ser escolhida para selecionar o valor.

Selecionar o valor com o botão para cima/para baixo é uma alternativa para selecionar o valor movendo o botão no controle deslizante. O botão no controle deslizante se moverá sincronicamente com as opções de botão para cima/para baixo.

max

Um número que especifica o valor máximo no controle deslizante.

min

Um número que especifica o valor mínimo no controle deslizante.

name

Uma string usada para identificar a resposta enviada pelo trabalhador. Esse valor corresponderá a uma chave no objeto JSON que especifica a resposta.

pin

Uma operação booliana que, se presente, exibe o valor atual acima do botão à medida que o botão é movido.

obrigatório

Uma operação booliana que, se presente, exige que o trabalhador forneça uma entrada.

secondary-progress

Quando usado com um atributo CSS crowd-slider-secondary-color, a barra de andamento é colorida para o ponto representado pelo secondary-progress. Por exemplo, se isso representasse o progresso em um streaming de vídeo, o value representaria onde o visualizador estava na linha de tempo do vídeo. O valor secondary-progress representaria o ponto na linha do tempo em que o buffer do vídeo foi iniciado.

step (etapa)

Um número que especifica a diferença entre valores selecionáveis no controle deslizante.

valor

Uma predefinição que se tornará o padrão se o trabalhador não fornecer entrada.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um componente estilizado para se parecer com uma aba com informações abaixo.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo que usa o elemento <crowd-tab>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

cabeçalho

O texto que aparece na aba. Isso geralmente é um nome descritivo curto, indicando as informações contidas abaixo da aba.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um contêiner para informações com abas.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo que usa o elemento <crowd-tabs>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Esse elemento não possui atributos.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um campo para entrada de texto.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid projetado para transcrever clipes de áudio que usam o elemento <crowd-text-area>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

allowed-pattern

Uma expressão regular usada com o atributo auto-validate para ignorar caracteres não correspondentes como os tipos de trabalho.

auto-focus

Uma operação booliana que, se presente, colocará o cursor nesse elemento em carga para que os usuários possam começar imediatamente a digitar sem precisar clicar dentro do elemento.

auto-validate

Uma operação booliana que, se presente, ativa a validação de entrada. O comportamento do validador pode ser modificado pelos error-message e allowed-pattern.

char-counter

Uma operação booliana que, se presente, colocará um pequeno campo de texto abaixo do canto inferior direito do elemento, exibindo o número de caracteres dentro desse elemento.

desabilitado

Uma operação booliana que, se presente, exibe a área de entrada como desabilitada.

error-message

O texto a ser exibido abaixo do campo de entrada, no lado esquerdo, se a validação falhar.

rótulo

Uma string que é exibida dentro de um campo de texto.

Esse texto se encolhe e se eleva acima de um campo de texto quando o trabalhador começa a digitar no campo ou quando o atributo value está definido.

max-length

Um inteiro que especifica o número máximo de caracteres permitidos pelo elemento. Caracteres digitados ou colados além do máximo serão ignorados.

max-rows

Um número inteiro que especifica o número máximo de linhas de texto que são permitidas em um. crowd-text-area Normalmente, o elemento se expande para acomodar novas linhas. Se isso for definido, depois que o número de linhas exceder esse limite, o conteúdo rolará para cima fora da vista, e um controle da barra de rolagem será exibido.

name

Uma string usada para representar os dados do elemento na saída.

espaço reservado

Uma string apresentada ao usuário como texto de espaço reservado. Ela desaparece depois que o usuário coloca algo na área de entrada.

rows

Um inteiro que especifica a altura do elemento em linhas de texto.

valor

Uma predefinição que se tornará o padrão se o trabalhador não fornecer entrada. A predefinição aparece em um campo de texto.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

Esse elemento produz o name como um nome de propriedade e o conteúdo do texto do elemento como o valor. Os retornos de carro no texto são representados como \n.

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

Consulte também

Para obter mais informações, consulte.

Uma notificação sutil que aparece temporariamente na tela. Apenas um crowd-toast é visível.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

Veja a seguir um exemplo de um modelo do Liquid que usa o elemento <crowd-toast>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

duration

Um número que especifica a duração, em milissegundos, da exibição da notificação na tela.

text

O texto a ser exibido na notificação.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Consulte também

Para obter mais informações, consulte.

Um botão que atua como um interruptor ON/OFF, alternando um estado.

Veja um exemplo interativo de um modelo HTML que usa esse elemento HTML do Crowd em CodePen.

O exemplo a seguir mostra diferentes maneiras de usar o elemento HTML <crowd-toggle-button>. Copie o código a seguir e salve-o em um arquivo com a extensão .html. Abra o arquivo em qualquer navegador para visualizar e interagir com este modelo.

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

Atributos

Os seguintes atributos têm suporte por esse elemento.

checked

Uma operação booliana que, se presente, exibe o botão comutado para a posição ON.

desabilitado

Uma operação booliana que, se presente, exibe o botão como desabilitado e impede a alternância.

invalid

Quando em uma posição desativada, um botão usando esse atributo será exibido em uma cor de alerta. O padrão é vermelho, mas pode ser alterado no CSS. Quando ativado, o botão será exibido na mesma cor dos outros botões na posição ativado.

name

Uma string usada para identificar a resposta enviada pelo trabalhador. Esse valor corresponde a uma chave no objeto JSON que especifica a resposta.

obrigatório

Uma operação booliana que, se presente, exige que o trabalhador forneça uma entrada.

valor

Um valor usado na saída como o nome da propriedade para o estado booliano do elemento. O padrão é "on" se não for fornecido.

Hierarquia de elementos

Esse elemento possui os seguintes elementos pai e filho.

Saída

Esse elemento produz o name como o nome de um objeto, contendo o value como um nome de propriedade e o estado do elemento como valor booliano para a propriedade. Se nenhum valor para o elemento for especificado, o nome da propriedade será padronizado como "on".

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

Consulte também

Para obter mais informações, consulte.