SageMaker Crowd Elemen HTML

Pesan yang mengingatkan pekerja tentang situasi saat ini.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-alert> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

dapat diremehkan

Sakelar Boolean yang, jika ada, memungkinkan pesan ditutup oleh pekerja.

jenis

Sebuah string yang menentukan jenis pesan yang akan ditampilkan. Nilai yang mungkin adalah “info” (default), “sukses”, “kesalahan”, dan “peringatan”.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Ikon yang mengapung di sudut kanan atas elemen lain yang dilampirkan.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template yang menggunakan <crowd-badge> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

untuk

Sebuah string yang menentukan ID dari elemen yang lencana dilampirkan.

ikon

Sebuah string yang menentukan ikon yang akan ditampilkan dalam lencana. String harus berupa nama ikon dari kumpulan ikon besi sumber terbuka, yang sudah dimuat sebelumnya, atau URL ke ikon khusus.

Atribut ini mengesampingkan atribut label.

Berikut ini adalah contoh sintaks yang dapat Anda gunakan untuk menambahkan ikon besi ke elemen HTML. <crowd-badge> Ganti icon-name dengan nama ikon yang ingin Anda gunakan dari set Ikon ini.

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

label

Teks untuk ditampilkan di lencana. Tiga karakter atau kurang direkomendasikan karena teks yang terlalu besar akan meluap area lencana. Ikon dapat ditampilkan alih-alih teks dengan mengatur atribut ikon.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Tombol bergaya yang mewakili beberapa tindakan.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template yang menggunakan <crowd-button> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan tombol sebagai dinonaktifkan dan mencegah klik.

bentuk-tindakan

Sakelar yang mengirimkan bentuk kerumunan elemen induknya, jika disetel ke “submit”, atau me-reset <crowd-form>elemen induknya, jika disetel ke “reset”.

href

URL ke sumber daya online. Gunakan properti ini jika Anda membutuhkan tautan yang ditata sebagai tombol.

ikon

String yang menentukan ikon yang akan ditampilkan di sebelah teks tombol. String harus berupa nama ikon dari set ikon besi sumber terbuka, yang sudah dimuat sebelumnya. Misalnya, untuk menyisipkan ikon besi pencarian, gunakan yang berikut ini:

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

Ikon diposisikan ke kiri atau kanan teks, seperti yang ditentukan oleh atribut ikon-align.

Untuk menggunakan ikon kustom, lihat ikon-url.

ikon-sejajar

Posisi kiri atau kanan ikon relatif terhadap teks tombol. Defaultnya adalah “kiri”.

ikon-url

URL ke gambar kustom untuk ikon. Gambar kustom dapat digunakan sebagai pengganti ikon standar yang ditentukan oleh atribut ikon.

memuat

Sakelar Boolean yang, jika ada, menampilkan tombol sebagai berada dalam status pemuatan. Atribut ini lebih diutamakan daripada atribut yang dinonaktifkan jika kedua atribut hadir.

target

Saat Anda menggunakan href atribut untuk membuat tombol bertindak sebagai hyperlink ke URL tertentu, target atribut tersebut secara opsional menargetkan bingkai atau jendela tempat URL yang ditautkan harus dimuat.

varian

Gaya umum tombol. Gunakan “primer” untuk tombol utama, “normal” untuk tombol sekunder, “tautan” untuk tombol tersier, atau “ikon” untuk hanya menampilkan ikon tanpa teks.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk menggambar persegi panjang pada gambar dan menetapkan label ke bagian gambar yang tertutup di setiap persegi panjang.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-bounding-box> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini. Untuk contoh lainnya, lihat GitHub repositori ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

nilai awal

Array objek JSON, yang masing-masing menetapkan kotak pembatas saat komponen dimuat. Setiap objek JSON dalam array berisi properti berikut. Kotak pembatas yang diatur melalui initial-value properti dapat disesuaikan dan apakah jawaban pekerja disesuaikan atau tidak dilacak melalui initialValueModified boolean dalam output jawaban pekerja.

label

Array string yang diformat JSON, yang masing-masing adalah label yang dapat ditetapkan pekerja ke bagian gambar yang diapit oleh persegi panjang. Batas: 10 label.

name

Nama widget ini. Ini digunakan sebagai kunci untuk input widget dalam output formulir.

src

URL gambar untuk menggambar kotak pembatas.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Wilayah berikut diperlukan oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara menggambar kotak pembatas.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output berikut didukung oleh elemen ini.

boundingBoxes

Array objek JSON, yang masing-masing menentukan kotak pembatas yang telah dibuat oleh pekerja. Setiap objek JSON dalam array berisi properti berikut.

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Sebuah kotak dengan tampilan tinggi untuk menampilkan informasi.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template yang dirancang untuk tugas analisis sentimen yang menggunakan <crowd-card> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

menuju

Teks ditampilkan di bagian atas kotak.

gambar

URL ke gambar yang akan ditampilkan di dalam kotak.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Komponen UI yang dapat dicentang atau tidak dicentang memungkinkan pengguna untuk memilih beberapa opsi dari satu set.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-checkbox> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

memeriksa

Sakelar Boolean yang, jika ada, menampilkan kotak centang seperti yang dicentang.

Berikut ini adalah contoh syntx yang digunakan untuk mencentang kotak centang secara default.

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

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan kotak centang sebagai dinonaktifkan dan mencegahnya dicentang.

Berikut ini adalah contoh sintaks yang digunakan untuk menonaktifkan kotak centang.

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

name

String yang digunakan untuk mengidentifikasi jawaban yang diajukan oleh pekerja. Nilai ini akan cocok dengan kunci dalam objek JSON yang menentukan jawabannya.

wajib

Sakelar Boolean yang, jika ada, mengharuskan pekerja untuk memberikan masukan.

Berikut ini adalah contoh sintaks yang digunakan untuk meminta kotak centang dipilih.

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

nilai

String yang digunakan sebagai nama untuk status kotak centang di output. Default ke “on” jika tidak ditentukan.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

Menyediakan objek JSON. nameString adalah nama objek dan value string adalah nama properti untuk nilai Boolean berdasarkan status kotak centang; true jika dicentang, false jika tidak dicentang.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk mengklasifikasikan konten non-gambar, seperti audio, video, atau teks.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template tugas pekerja HTML dibangun menggunakancrowd-classifier. Contoh ini menggunakan bahasa template Liquid untuk mengotomatisasi:

Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

kategori

Array string yang diformat JSON, yang masing-masing merupakan kategori yang dapat ditetapkan oleh pekerja ke teks. Anda harus memasukkan “lain” sebagai kategori, jika tidak pekerja saya tidak dapat memberikan jawaban.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

name

Nama widget ini. Hal ini digunakan sebagai kunci untuk input widget dalam bentuk output.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Daerah berikut didukung oleh elemen ini.

klasifikasi-target

Konten yang akan diklasifikasikan oleh pekerja. Ini bisa berupa teks biasa atau HTML. Contoh bagaimana HTML dapat digunakan termasuk tetapi tidak terbatas pada menyematkan pemutar video atau audio, menyematkan PDF, atau melakukan perbandingan dua gambar atau lebih.

instruksi lengkap

Instruksi umum tentang cara melakukan klasifikasi teks.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output dari elemen ini adalah objek yang menggunakan name nilai yang ditentukan sebagai nama properti, dan string dari categories sebagai nilai properti.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk mengklasifikasikan berbagai bentuk konten — seperti audio, video, atau teks — ke dalam satu atau beberapa kategori. Konten untuk mengklasifikasikan disebut sebagai objek.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh dari template tugas pekerja HTML dibangun menggunakan elemen ini. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh crowd-classifier-multi-select elemen. Setiap atribut menerima nilai string atau nilai string.

kategori

Wajib. Sebuah array string berformat JSON, yang masing-masing adalah kategori yang pekerja dapat menetapkan ke objek.

header

Wajib. Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

name

Wajib. Nama widget ini. Dalam bentuk output, nama digunakan sebagai kunci untuk input widget.

pengecualian kategori

Tidak wajib. String berformat JSON dengan format berikut:. "{ text: 'default-value' }" Atribut ini menetapkan nilai default yang dapat dipilih pekerja jika tidak ada label yang berlaku untuk objek yang ditampilkan di UI pekerja.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut:

Wilayah

Elemen ini menggunakan wilayah berikut.

klasifikasi-target

Konten yang akan diklasifikasikan oleh pekerja. Konten dapat berupa teks biasa atau objek yang Anda tentukan dalam template menggunakan HTML. Misalnya, Anda dapat menggunakan elemen HTML untuk menyertakan pemutar video atau audio, menyematkan file PDF, atau menyertakan perbandingan dua gambar atau lebih.

instruksi lengkap

Instruksi umum tentang cara mengklasifikasikan teks.

instruksi singkat

Instruksi khusus tugas yang penting. Instruksi ini ditampilkan dengan jelas.

Output

Output dari elemen ini adalah objek yang menggunakan name nilai yang ditentukan sebagai nama properti, dan string dari categories sebagai nilai properti.

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

Lihat Juga

Untuk informasi selengkapnya, lihat berikut ini:

Widget untuk memberi label kata, frasa, atau string karakter dalam teks yang lebih panjang. Pekerja memilih label, dan menyorot teks yang diterapkan label.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template yang menggunakan <crowd-entity-annotation> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

nilai awal

Sebuah array objek yang diformat JSON, yang masing-masing mendefinisikan anotasi untuk diterapkan pada teks pada inisialisasi. Objek berisi label nilai yang cocok dengan satu di labels atribut, startOffset nilai integer untuk offset unicode awal rentang berlabel, dan endOffset nilai integer untuk offset unicode akhir.

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

label

Sebuah array objek yang diformat JSON, yang masing-masing berisi:

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

name

Berfungsi sebagai nama widget di DOM. Hal ini juga digunakan sebagai nama atribut label dalam bentuk output dan output manifes.

text

Teks yang akan dianotasi. Sistem templating lolos dari kutipan dan string HTML secara default. Jika kode Anda sudah lolos atau sebagian lolos, lihat cara lain Filter variabel untuk mengontrol pelolosan.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Daerah berikut didukung oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara bekerja dengan widget.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output berikut didukung oleh elemen ini.

pengada

Objek JSON yang menentukan awal, akhir, dan label anotasi. Objek ini berisi properti berikut.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Tombol mengambang dengan gambar di tengahnya.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang dirancang untuk klasifikasi gambar yang menggunakan <crowd-fab> elemen. Template ini digunakan JavaScript untuk memungkinkan pekerja melaporkan masalah dengan UI pekerja. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan tombol mengambang sebagai dinonaktifkan dan mencegah klik.

ikon

Sebuah string yang menentukan ikon yang akan ditampilkan di tengah tombol. String harus berupa nama ikon dari kumpulan ikon besi sumber terbuka, yang sudah dimuat sebelumnya, atau URL ke ikon khusus.

Berikut ini adalah contoh sintaks yang dapat Anda gunakan untuk menambahkan ikon besi ke elemen HTML. <crowd-fab> Ganti icon-name dengan nama ikon yang ingin Anda gunakan dari set Ikon ini.

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

label

String yang terdiri dari satu karakter yang dapat digunakan sebagai pengganti ikon. Emoji atau beberapa karakter dapat mengakibatkan tombol menampilkan elipsis sebagai gantinya.

title

String yang akan ditampilkan sebagai tip alat saat mouse melayang di atas tombol.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Pembungkus formulir untuk semua tugas khusus. Menetapkan dan mengimplementasikan tindakan penting untuk pengiriman data formulir Anda dengan benar.

Jika tombol kerumunan tipe “submit” tidak termasuk di dalam <crowd-form> elemen, itu akan secara otomatis ditambahkan dalam <crowd-form> elemen.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template klasifikasi gambar yang menggunakan <crowd-form> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Acara Elemen

crowd-formElemen memperluas formelemen HTML standar dan mewarisi acaranya, seperti onclick dan. onsubmit

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Tombol dengan gambar ditempatkan di tengah. Ketika pengguna menyentuh tombol, efek riak berasal dari tengah tombol.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang dirancang untuk klasifikasi gambar yang menggunakan <crowd-icon-button> elemen. Template ini digunakan JavaScript untuk memungkinkan pekerja melaporkan masalah dengan UI pekerja. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan tombol sebagai dinonaktifkan dan mencegah klik.

ikon

Sebuah string yang menentukan ikon yang akan ditampilkan di tengah tombol. String harus berupa nama ikon dari kumpulan ikon besi sumber terbuka, yang sudah dimuat sebelumnya, atau URL ke ikon khusus.

Berikut ini adalah contoh sintaks yang dapat Anda gunakan untuk menambahkan ikon besi ke elemen HTML. <crowd-icon-button> Ganti icon-name dengan nama ikon yang ingin Anda gunakan dari set Ikon ini.

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

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk mengklasifikasikan gambar. Gunakan salah satu format gambar yang didukung berikut: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Gambar tidak memiliki batas ukuran.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template klasifikasi gambar yang menggunakan <crowd-image-classifier> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut diperlukan oleh elemen ini.

kategori

Array string yang diformat JSON, yang masing-masing merupakan kategori yang dapat ditetapkan pekerja ke gambar. Anda harus memasukkan “lain” sebagai kategori, sehingga pekerja dapat memberikan jawaban. Anda dapat menentukan hingga 10 kategori.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

name

Nama widget ini. Hal ini digunakan sebagai kunci untuk input widget dalam bentuk output.

hamparan

Informasi yang akan dilapis pada gambar sumber. Ini untuk alur kerja verifikasi tugas bounding-box, segmentasi semantik, dan segmentasi instance.

Ini adalah objek JSON yang berisi objek dengan nama tipe tugas di camelCase sebagai kuncinya. Nilai kunci itu adalah objek yang berisi label dan informasi lain yang diperlukan dari tugas sebelumnya.

Contoh crowd-image-classifier elemen dengan atribut untuk memverifikasi tugas kotak pembatas berikut:

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

Tugas verifikasi segmentasi semantik akan menggunakan overlay nilai sebagai berikut:

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

Tugas segmentasi instance akan menggunakan nilai sebagai berikutoverlay:

<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

URL gambar yang akan diklasifikasikan.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Daerah berikut digunakan oleh elemen ini.

instruksi lengkap

Instruksi umum untuk pekerja tentang cara mengklasifikasikan gambar.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

komentar pekerja

Gunakan ini dalam alur kerja verifikasi ketika Anda membutuhkan pekerja untuk menjelaskan mengapa mereka membuat pilihan yang mereka lakukan. Gunakan teks antara tag pembuka dan penutup untuk memberikan instruksi bagi pekerja tentang informasi apa yang harus dimasukkan dalam komentar.

Ini menggunakan atribut berikut:

header

Frasa dengan ajakan bertindak untuk meninggalkan komentar. Digunakan sebagai teks judul untuk jendela modal tempat komentar ditambahkan.

Tidak wajib. Default untuk “Tambahkan komentar.”

tautan-teks

Teks ini muncul di bawah kategori di widget. Ketika diklik, itu membuka jendela modal di mana pekerja dapat menambahkan komentar.

Tidak wajib. Default untuk “Tambahkan komentar.”

placeholder

Contoh teks di area teks komentar yang ditimpa ketika pekerja mulai mengetik. Ini tidak muncul dalam output jika pekerja membiarkan bidang kosong.

Tidak wajib. Default ke kosong.

Output

Output dari elemen ini adalah string yang menentukan salah satu nilai yang didefinisikan dalam kategori atribut <crowd-image-classifier>elemen.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk mengklasifikasikan gambar ke dalam satu atau beberapa kategori. Gunakan salah satu format gambar yang didukung berikut: APNG, BMP, GIF, ICO, JPEG, PNG, SVG. Gambar tidak memiliki batas ukuran.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template tugas pekerja HTML dibangun menggunakan elemen kerumunan ini. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh crowd-image-classifier-multi-select elemen. Setiap atribut menerima nilai string atau nilai string.

kategori

Wajib. Array string yang diformat JSON, yang masing-masing merupakan kategori yang dapat ditetapkan pekerja ke gambar. Seorang pekerja harus memilih setidaknya satu kategori dan dapat memilih semua kategori.

header

Wajib. Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

name

Wajib. Nama widget ini. Dalam bentuk output, nama digunakan sebagai kunci untuk input widget.

src

Wajib. URL gambar yang akan diklasifikasikan.

pengecualian kategori

Tidak wajib. String berformat JSON dengan format berikut:. "{ text: 'default-value' }" Atribut ini menetapkan nilai default yang dapat dipilih pekerja jika tidak ada label yang berlaku untuk gambar yang ditampilkan di UI pekerja.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut:

Wilayah

Elemen ini menggunakan wilayah berikut

instruksi lengkap

Instruksi umum untuk pekerja tentang cara mengklasifikasikan gambar.

instruksi singkat

Instruksi khusus tugas yang penting. Instruksi ini ditampilkan dengan jelas.

Output

Output dari elemen ini adalah string yang menentukan satu atau lebih dari nilai-nilai yang didefinisikan dalam categories atribut <crowd-image-classifier-multi-select> elemen.

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

Lihat Juga

Untuk informasi selengkapnya, lihat berikut ini:

Kotak yang menerima data input.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-input> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

pola yang diizinkan

Ekspresi reguler yang digunakan dengan atribut validasi otomatis untuk mengabaikan karakter yang tidak cocok sebagai tipe pekerja.

fokus otomatis

Ketika nilai diatur ke true, browser menempatkan fokus di dalam area input setelah loading. Dengan cara ini, pekerja dapat mulai mengetik tanpa harus memilihnya terlebih dahulu.

validasi otomatis

Sakelar Boolean yang, jika ada, mengaktifkan validasi input. Perilaku validator dapat dimodifikasi oleh pesan kesalahan dan atribut pola yang diizinkan.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan area input sebagai dinonaktifkan.

pesan kesalahan

Teks yang akan ditampilkan di bawah bidang input, di sisi kiri, jika validasi gagal.

label

String yang ditampilkan di dalam bidang teks.

Teks ini menyusut dan naik di atas bidang teks saat pekerja mulai mengetik di bidang atau saat atribut nilai disetel.

panjang maks

Jumlah maksimum karakter yang akan diterima input. Masukan di luar batas ini diabaikan.

panjang min

Panjang minimum untuk input di lapangan

name

Menetapkan nama input yang akan digunakan dalam DOM dan output dari formulir.

placeholder

Sebuah nilai string yang digunakan sebagai teks placeholder, ditampilkan sampai pekerja mulai memasukkan data ke dalam input, Hal ini tidak digunakan sebagai nilai default.

wajib

Sakelar Boolean yang, jika ada, mengharuskan pekerja untuk memberikan masukan.

jenis

Mengambil string untuk mengatur input-type perilaku HTML5 untuk input. Contohnya termasuk file dan date.

nilai

Sebuah preset yang menjadi default jika pekerja tidak memberikan input. Preset muncul di bidang teks.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

Menyediakan name string sebagai nama properti, dan teks yang dimasukkan dalam bidang sebagai nilainya.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk mengidentifikasi instance individual objek tertentu dalam gambar dan membuat overlay berwarna untuk setiap instance berlabel.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan<crowd-instance-segmentation>. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Gunakan template yang mirip dengan berikut ini untuk memungkinkan pekerja menambahkan kategori mereka sendiri (label).

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

label

Sebuah array string yang diformat JSON, yang masing-masing adalah label yang pekerja dapat menetapkan untuk sebuah instance dari sebuah objek dalam gambar. Pekerja dapat menghasilkan warna overlay yang berbeda untuk setiap instance yang relevan dengan memilih “tambahkan instance” di bawah label di alat.

name

Nama widget ini. Ini digunakan sebagai kunci untuk data pelabelan dalam bentuk output.

src

URL gambar yang akan diberi label.

nilai awal

Objek JSON yang berisi pemetaan warna dari pekerjaan segmentasi instance sebelumnya dan tautan ke output gambar overlay oleh pekerjaan sebelumnya. Sertakan ini ketika Anda ingin pekerja manusia memverifikasi hasil pekerjaan pelabelan sebelumnya dan menyesuaikannya jika perlu.

Atribut akan muncul sebagai berikut:

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

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Daerah berikut didukung oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara melakukan segmentasi gambar.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output berikut didukung oleh elemen ini.

labeledImage

Objek JSON yang berisi PNG yang dikodekan Base64 dari label.

Instans

Array JSON yang berisi objek dengan label dan warna instance.

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Elemen yang menampilkan instruksi pada tiga halaman tab, Ringkasan, Petunjuk Terperinci, dan Contoh, saat pekerja mengklik tautan atau tombol.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-instructions> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

tautan-teks

Teks yang akan ditampilkan untuk membuka instruksi. Defaultnya adalah Klik untuk instruksi.

jenis tautan

Sebuah string yang menentukan jenis pemicu untuk instruksi. Nilai yang mungkin adalah “tautan” (default) dan “tombol”.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Daerah berikut didukung oleh elemen ini.

detail-instruksi

Konten yang memberikan instruksi khusus untuk suatu tugas. Ini muncul di halaman tab “Instruksi Terperinci”.

contoh negatif

Konten yang memberikan contoh penyelesaian tugas yang tidak memadai. Ini muncul di halaman tab “Contoh”. Lebih dari satu contoh dapat diberikan dalam elemen ini.

contoh positif

Konten yang memberikan contoh penyelesaian tugas yang tepat. Ini muncul di halaman tab “Contoh”.

ringkasan singkat

Pernyataan singkat yang merangkum tugas yang harus diselesaikan. Ini muncul di halaman tab “Ringkasan”. Lebih dari satu contoh dapat diberikan dalam elemen ini.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Menghasilkan alat untuk memilih dan membubuhi keterangan poin-poin penting pada gambar.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-keypoint> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

nilai awal

Sebuah array, dalam format JSON, dari keypoints yang akan diterapkan pada gambar pada awal. Sebagai contoh:

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

label

Sebuah array, dalam format JSON, string yang akan digunakan sebagai label anotasi keypoint.

name

String yang digunakan untuk mengidentifikasi jawaban yang diajukan oleh pekerja. Nilai ini akan cocok dengan kunci dalam objek JSON yang menentukan jawabannya.

src

URI sumber gambar yang akan dianotasi.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Wilayah berikut diperlukan oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara membuat anotasi gambar.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output berikut didukung oleh elemen ini.

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

titik kunci

Array objek JSON yang berisi koordinat dan label dari keypoint. Setiap objek berisi properti berikut.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk menggambar garis pada gambar. Setiap baris dikaitkan dengan label, dan data keluaran akan melaporkan titik awal dan akhir setiap baris.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-line> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini. Untuk contoh lainnya, lihat GitHub repositori ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Tidak wajib. Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

nilai awal

Tidak wajib. Sebuah array objek JSON, yang masing-masing menetapkan garis ketika komponen dimuat. Setiap objek JSON dalam array berisi properti berikut:

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

Garis yang diatur melalui initial-value properti dapat disesuaikan. Apakah jawaban pekerja disesuaikan atau tidak dilacak melalui initialValueModified boolean dalam output jawaban pekerja.

label

Wajib. Sebuah array string yang diformat JSON, yang masing-masing adalah label yang pekerja dapat menetapkan ke baris.

Batas: 10 label

label-warna

Tidak wajib. Sebuah susunan string. Setiap string adalah kode heksadesimal (hex) untuk label.

name

Wajib. Nama widget ini. Ini digunakan sebagai kunci untuk input widget dalam output formulir.

src

Wajib. URL gambar untuk menggambar garis.

Wilayah

Wilayah berikut diperlukan oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara menggambar garis.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

lini

Array JSON yang berisi objek dengan label garis dan simpul.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Jendela kecil yang muncul di layar saat dibuka.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh sintaks yang dapat Anda gunakan dengan <crowd-modal> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

tautan-teks

Teks yang akan ditampilkan untuk membuka modal. Defaultnya adalah “Klik untuk membuka modal”.

jenis tautan

Sebuah string yang menentukan jenis pemicu untuk modal. Nilai yang mungkin adalah “tautan” (default) dan “tombol”.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk menggambar poligon pada gambar dan menetapkan label ke bagian gambar yang tertutup di setiap poligon.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-polygon> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

label

Array string yang diformat JSON, yang masing-masing adalah label yang dapat ditetapkan pekerja ke bagian gambar yang diapit oleh poligon.

name

Nama widget ini. Ini digunakan sebagai kunci untuk input widget dalam output formulir.

src

URL gambar untuk menggambar poligon.

nilai awal

Array objek JSON, yang masing-masing mendefinisikan poligon yang akan digambar ketika komponen dimuat. Setiap objek JSON dalam array berisi properti berikut.

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

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Diperlukan wilayah berikut.

instruksi lengkap

Instruksi umum tentang cara menggambar poligon.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output berikut didukung oleh elemen ini.

poligon

Array objek JSON, yang masing-masing menggambarkan poligon yang telah dibuat oleh pekerja. Setiap objek JSON dalam array berisi properti berikut.

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk menggambar polyline atau garis pada gambar. Setiap polyline dikaitkan dengan label dan dapat mencakup dua atau lebih simpul. Polyline dapat berpotongan dengan sendirinya dan titik awal dan akhirnya dapat ditempatkan di mana saja pada gambar.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-polyline> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini. Untuk contoh lainnya, lihat GitHub repositori ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Tidak wajib. Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

nilai awal

Tidak wajib. Sebuah array objek JSON, yang masing-masing menetapkan polyline ketika komponen dimuat. Setiap objek JSON dalam array berisi properti berikut:

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

Polylines yang diatur melalui initial-value properti dapat disesuaikan. Apakah jawaban pekerja disesuaikan atau tidak dilacak melalui initialValueModified boolean dalam output jawaban pekerja.

label

Wajib. Sebuah array string yang diformat JSON, yang masing-masing adalah label yang pekerja dapat menetapkan ke baris.

Batas: 10 label

label-warna

Tidak wajib. Sebuah susunan string. Setiap string adalah kode heksadesimal (hex) untuk label.

name

Wajib. Nama widget ini. Ini digunakan sebagai kunci untuk input widget dalam output formulir.

src

Wajib. URL gambar untuk menggambar polylines.

Wilayah

Wilayah berikut diperlukan oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara menggambar polylines.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

polyline

Array JSON yang berisi objek dengan label dan simpul polylines.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Tombol yang dapat dicentang atau tidak dicentang. Ketika tombol radio berada di dalam grup radio, tepat satu tombol radio dalam grup dapat diperiksa kapan saja. Berikut ini adalah contoh cara mengkonfigurasi crowd-radio-button elemen di dalam crowd-radio-group elemen.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh sintaks yang dapat Anda gunakan dengan <crowd-radio-button> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Contoh sebelumnya dapat dilihat pada templat tugas pekerja khusus dalam GitHub contoh ini: templat kustom pekerjaan pelabelan pengenalan entitas.

Crowd HTML Element tombol radio tidak mendukung tag HTML,required. Untuk membuat pemilihan tombol radio diperlukan, gunakan <input type="radio"> elemen untuk membuat tombol radio dan menambahkan required tag. nameAtribut untuk semua <input> elemen yang termasuk dalam kelompok tombol radio yang sama harus sama. Misalnya, template berikut mengharuskan pengguna untuk memilih tombol radio di animal-type grup sebelum mengirimkan.

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

Atribut

Atribut berikut didukung oleh elemen ini.

memeriksa

Sakelar Boolean yang, jika ada, menampilkan tombol radio seperti yang dicentang.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan tombol sebagai dinonaktifkan dan mencegahnya dicentang.

name

String yang digunakan untuk mengidentifikasi jawaban yang diajukan oleh pekerja. Nilai ini akan cocok dengan kunci dalam objek JSON yang menentukan jawabannya.

nilai

Sebuah nama properti untuk nilai boolean elemen. Jika tidak ditentukan, ia menggunakan “on” sebagai default, mis{ "<name>": { "<value>": <true or false> } }.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

Mengeluarkan objek dengan pola sebagai berikut:{ "<name>": { "<value>": <true or false> } }. Jika Anda menggunakan tombol di luar kerumunan-radio-grup elemen, tetapi dengan string yang sama dan name value string yang berbeda, objek nama akan berisi nilai Boolean untuk setiap value string. Untuk memastikan bahwa hanya satu dari sekelompok tombol yang dipilih, buat mereka anak-anak dari kerumunan-radio-grup elemen dan gunakan nilai nama yang berbeda.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Sekelompok tombol radio. Hanya satu tombol radio dalam grup yang dapat dipilih. Memilih satu tombol radio menghapus tombol radio yang dipilih sebelumnya dalam grup yang sama. Untuk contoh templat UI kustom yang menggunakan crowd-radio-group elemen, lihat templat kustom pekerjaan pelabelan pengenalan entitas ini.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh sintaks yang dapat Anda gunakan dengan <crowd-radio-group> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Tidak ada atribut khusus yang didukung oleh elemen ini.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

Output array objek yang mewakili tombol radio kerumunan elemen di dalamnya.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Widget untuk segmentasi gambar dan menetapkan label ke setiap segmen gambar.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-semantic-segmentation> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks untuk ditampilkan di atas gambar. Ini biasanya pertanyaan atau instruksi sederhana untuk pekerja.

nilai awal

Objek JSON yang berisi pemetaan warna dari pekerjaan segmentasi semantik sebelumnya dan tautan ke output gambar overlay oleh pekerjaan sebelumnya. Sertakan ini ketika Anda ingin pekerja manusia memverifikasi hasil pekerjaan pelabelan sebelumnya dan menyesuaikannya jika perlu.

Atribut akan muncul sebagai berikut:

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

Saat menggunakan tipe tugas bawaan Ground Truth dengan konsolidasi anotasi (di mana lebih dari satu pekerja memberi label pada satu gambar), pemetaan label disertakan dalam catatan keluaran pekerja individu, namun hasil keseluruhan direpresentasikan sebagai hasil konsolidasi. internal-color-map

Anda dapat mengonversi internal-color-map ke label-mappings dalam template kustom menggunakan bahasa template Liquid:

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

label

Array string yang diformat JSON, yang masing-masing adalah label yang dapat ditetapkan pekerja ke segmen gambar.

name

Nama widget ini. Hal ini digunakan sebagai kunci untuk input widget dalam bentuk output.

src

URL gambar yang akan disegmentasi.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Wilayah

Daerah berikut didukung oleh elemen ini.

instruksi lengkap

Instruksi umum tentang cara melakukan segmentasi gambar.

instruksi singkat

Instruksi khusus tugas penting yang ditampilkan di tempat yang menonjol.

Output

Output berikut didukung oleh elemen ini.

labeledImage

Objek JSON yang berisi PNG yang dikodekan Base64 dari label.

labelMappings

Objek JSON yang berisi objek dengan nama dengan label segmentasi.

awal ValueModified

Sebuah boolean yang mewakili apakah nilai awal telah dimodifikasi. Ini hanya disertakan ketika output berasal dari tugas penyesuaian.

masukan ImageProperties

Objek JSON yang menentukan dimensi gambar yang sedang dianotasi oleh pekerja. Objek ini berisi properti berikut.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Bilah dengan kenop geser yang memungkinkan pekerja memilih nilai dari rentang nilai dengan menggerakkan kenop. Slider menjadikannya pilihan tepat untuk pengaturan yang mencerminkan tingkat intensitas, seperti volume, kecerahan, atau saturasi warna.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template survei yang menggunakan <crowd-slider> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan slider sebagai dinonaktifkan.

dapat diedit

Sakelar Boolean yang, jika ada, menampilkan tombol atas/bawah yang dapat dipilih untuk memilih nilai.

Memilih nilai melalui tombol atas/bawah adalah alternatif untuk memilih nilai dengan menggerakkan kenop pada slider. Kenop pada slider akan bergerak serempak dengan pilihan tombol atas/bawah.

max

Angka yang menentukan nilai maksimum pada slider.

min

Angka yang menentukan nilai minimum pada slider.

name

String yang digunakan untuk mengidentifikasi jawaban yang diajukan oleh pekerja. Nilai ini akan cocok dengan kunci dalam objek JSON yang menentukan jawabannya.

pin

Sakelar Boolean yang, jika ada, menampilkan nilai saat ini di atas kenop saat kenop dipindahkan.

wajib

Sakelar Boolean yang, jika ada, mengharuskan pekerja untuk memberikan masukan.

kemajuan sekunder

Ketika digunakan dengan atribut crowd-slider-secondary-color CSS, progress bar diwarnai ke titik yang diwakili olehsecondary-progress. Misalnya, jika ini mewakili kemajuan pada video streaming, itu value akan mewakili di mana pemirsa berada di timeline video. secondary-progressNilainya akan mewakili titik pada garis waktu di mana video telah di-buffer.

langkah

Angka yang menentukan perbedaan antara nilai-nilai yang dapat dipilih pada slider.

nilai

Sebuah preset yang menjadi default jika pekerja tidak memberikan input.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Komponen yang ditata agar terlihat seperti tab dengan informasi di bawah ini.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template yang menggunakan <crowd-tab> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

header

Teks yang muncul di tab. Ini biasanya beberapa nama deskriptif pendek yang menunjukkan informasi yang terkandung di bawah tab.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Wadah untuk informasi tab.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template yang menggunakan <crowd-tabs> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Elemen ini tidak memiliki atribut.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Bidang untuk masukan teks.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang dirancang untuk mentranskripsikan klip audio yang menggunakan <crowd-text-area> elemen tersebut. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

pola yang diizinkan

Ekspresi reguler yang digunakan dengan atribut validasi otomatis untuk mengabaikan karakter yang tidak cocok sebagai tipe pekerja.

fokus otomatis

Sakelar Boolean yang, jika ada, menempatkan kursor dalam elemen ini on-load sehingga pengguna dapat segera mulai mengetik tanpa harus mengklik di dalam elemen.

validasi otomatis

Sakelar Boolean yang, jika ada, mengaktifkan validasi input. Perilaku validator dapat dimodifikasi oleh pesan kesalahan dan atribut pola yang diizinkan.

penghitung arang

Sakelar Boolean yang, jika ada, menempatkan bidang teks kecil di bawah sudut kanan bawah elemen, menampilkan jumlah karakter di dalam elemen.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan area input sebagai dinonaktifkan.

pesan kesalahan

Teks yang akan ditampilkan di bawah bidang input, di sisi kiri, jika validasi gagal.

label

String yang ditampilkan di dalam bidang teks.

Teks ini menyusut dan naik di atas bidang teks saat pekerja mulai mengetik di bidang atau saat atribut nilai disetel.

panjang maks

Sebuah integer yang menentukan jumlah maksimum karakter yang diizinkan oleh elemen. Karakter yang diketik atau ditempelkan di luar maksimum diabaikan.

baris maks

Sebuah integer yang menentukan jumlah maksimum baris teks yang diizinkan dalam. crowd-text-area Biasanya elemen mengembang untuk mengakomodasi baris baru. Jika ini diatur, setelah jumlah baris melebihi itu, konten bergulir ke atas keluar dari tampilan dan kontrol scrollbar muncul.

name

Sebuah string yang digunakan untuk mewakili data elemen dalam output.

placeholder

Sebuah string disajikan kepada pengguna sebagai teks placeholder. Itu menghilang setelah pengguna menempatkan sesuatu di area input.

baris

Sebuah integer yang menentukan ketinggian elemen dalam baris teks.

nilai

Sebuah preset yang menjadi default jika pekerja tidak memberikan input. Preset muncul di bidang teks.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

Elemen ini mengeluarkan name sebagai nama properti dan isi teks elemen sebagai nilai. Pengembalian pengangkutan dalam teks direpresentasikan sebagai\n.

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Pemberitahuan halus yang sementara muncul di layar. Hanya satu roti panggang yang terlihat.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Berikut ini adalah contoh template Liquid yang menggunakan <crowd-toast> elemen. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

durasi

Angka yang menentukan durasi, dalam milidetik, pemberitahuan muncul di layar.

text

Teks yang akan ditampilkan dalam notifikasi.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.

Tombol yang bertindak sebagai sakelar ON/OFF, beralih status.

Lihat contoh interaktif dari template HTML yang menggunakan Crowd HTML Element ini di CodePen.

Contoh berikut menunjukkan berbagai cara yang dapat Anda gunakan untuk menggunakan elemen <crowd-toggle-button> HTML. Salin kode berikut dan simpan dalam file dengan ekstensi.html. Buka file di browser apa pun untuk melihat pratinjau dan berinteraksi dengan template ini.

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

Atribut

Atribut berikut didukung oleh elemen ini.

memeriksa

Sakelar Boolean yang, jika ada, menampilkan tombol beralih ke posisi ON.

dinonaktifkan

Sakelar Boolean yang, jika ada, menampilkan tombol sebagai dinonaktifkan dan mencegah pengalihan.

tidak valid

Ketika dalam posisi mati, tombol menggunakan atribut ini, akan ditampilkan dalam warna peringatan. Standarnya berwarna merah, tetapi dapat diubah dalam CSS. Saat diaktifkan, tombol akan ditampilkan dalam warna yang sama dengan tombol lain di posisi aktif.

name

String yang digunakan untuk mengidentifikasi jawaban yang diajukan oleh pekerja. Nilai ini cocok dengan kunci dalam objek JSON yang menentukan jawabannya.

wajib

Sakelar Boolean yang, jika ada, mengharuskan pekerja untuk memberikan masukan.

nilai

Nilai yang digunakan dalam output sebagai nama properti untuk status Boolean elemen. Default ke “on” jika tidak disediakan.

Hirarki Elemen

Elemen ini memiliki elemen induk dan anak berikut.

Output

Elemen ini menampilkan name sebagai nama objek, yang berisi value sebagai nama properti dan status elemen sebagai nilai Boolean untuk properti. Jika tidak ada nilai untuk elemen yang ditentukan, nama properti default ke “on.”

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

Lihat Juga

Untuk informasi selengkapnya, lihat hal berikut.