SageMaker 크라우드 HTML 엘리먼츠 - 아마존 SageMaker

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

SageMaker 크라우드 HTML 엘리먼츠

다음은 사용자 지정 템플릿의 빌드를 더욱 쉽게 만들고 작업자에게 친숙한 UI를 제공하는 군중 HTML 요소 목록입니다. 이러한 요소는 Ground Truth, Augmented AI 및 Mechanical Turk에서 지원됩니다.

작업자에게 현재 상태를 알리는 메시지

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-alert> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

dismissible

(있는 경우) 작업자가 메시지를 닫을 수 있도록 허용하는 부울 스위치

type

표시되는 메시지 유형을 지정하는 문자열. 가능한 값은 "info"(기본값), "success", "error" 및 "warning"입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

연결된 다른 요소의 오른쪽 위 모서리에 떠 있는 아이콘

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-badge> 요소를 사용하는 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.


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

속성

이 요소는 다음 속성을 지원합니다.

for

배지가 연결된 요소의 ID를 지정하는 문자열

icon

배지에 표시되는 아이콘을 지정하는 문자열. 이 문자열은 사전에 로드된 오픈 소스 iron-icons 세트의 아이콘 이름 또는 사용자 지정 아이콘에 대한 URL이어야 합니다.

이 속성은 label 속성을 재지정합니다.

다음은 <crowd-badge> HTML 요소에 iron-icon을 추가하는 데 사용할 수 있는 구문 예제입니다. icon-name을 이 아이콘 세트에서 사용하려는 아이콘의 이름으로 변경하세요.

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

레이블

배지에 표시되는 텍스트. 텍스트가 너무 길면 배지 영역을 벗어나기 때문에 3자 이하가 좋습니다. icon 속성을 설정하면 텍스트 대신 아이콘을 표시할 수 있습니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

몇 가지 작업을 나타내는 스타일이 지정된 버튼

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-button> 요소를 사용하는 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.


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

속성

이 요소는 다음 속성을 지원합니다.

disabled

(있는 경우) 버튼을 비활성화된 상태로 표시해 클릭하지 못하도록 방지하는 부울 스위치

form-action

"submit"으로 설정된 경우 상위 crowd-form 요소를 제출하고 "reset"으로 설정된 경우에는 상위 <crowd-form> 요소를 재설정하는 스위치

href

온라인 리소스의 URL. 버튼으로 스타일이 지정된 링크가 필요한 경우 이 속성을 사용합니다.

icon

버튼 텍스트 옆에 표시되는 아이콘을 지정하는 문자열. 문자열은 사전 로드된 오픈 소스 iron-icons 세트에서 나온 아이콘의 이름이어야 합니다. 예를 들어 검색 iron-icon을 삽입하려면 다음을 사용합니다.

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

이 아이콘은 icon-align 속성으로 지정된 대로 텍스트의 왼쪽 또는 오른쪽에 배치됩니다.

사용자 정의 아이콘을 사용하려면 icon-url을 참조하세요.

icon-align

버튼 텍스트를 기준으로 한 아이콘의 왼쪽 또는 오른쪽 위치. 기본값은 "left"입니다.

icon-url

아이콘에 대한 사용자 지정 이미지의 URL. 사용자 지정 이미지는 icon 속성으로 지정되는 표준 아이콘 위치에 사용할 수 있습니다.

로드 중

(있는 경우) 버튼을 로드 중인 상태로 표시하는 부울 스위치. disabled과 함께 있는 경우 이 속성이 disabled 속성보다 우선합니다.

대상

href 속성을 사용하여 버튼이 특정 URL에 대한 하이퍼링크로 작동하도록 설정한 경우 target 속성은 연결된 URL을 로드해야 하는 프레임 또는 창을 선택적으로 대상으로 지정합니다.

variant

일반적인 버튼 스타일. 기본 버튼에는 "primary", 보조 버튼에는 "normal", 제3의 버튼에는 "link" 또는 텍스트 없이 아이콘만 표시하려는 경우에는 "icon"을 사용합니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

이미지 위에 직사각형을 그리고 각 직사각형으로 둘러싸인 이미지의 일부분에 레이블을 할당하는 위젯입니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-bounding-box> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다. 더 많은 예제를 보려면 이 GitHub 리포지토리를 참조하십시오.

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

속성

이 요소는 다음 속성을 지원합니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

initial-value

JSON 객체의 배열로, 각 객체는 구성 요소 로드 시 경계 상자를 설정합니다. 배열의 각 JSON 객체에는 다음 속성이 포함되어 있습니다. initial-value 속성을 통해 설정된 경계 상자는 조정할 수 있으며, 작업자 응답이 조정되었는지 여부에 관계없이 작업자 응답 출력의 initialValueModified 부울을 통해 추적됩니다.

  • height – 상자의 높이(픽셀)

  • label – 라벨링 작업의 일부로 상자에 할당되는 텍스트 이 텍스트는 <crowd-bounding-box> 요소의 labels 속성에 정의된 레이블 중 하나와 일치해야 합니다.

  • left – 이미지의 왼쪽에서 상자의 왼쪽 위 구석까지 거리(픽셀)

  • top – 이미지의 위쪽에서 상자의 왼쪽 위 구석까지 거리(픽셀)

  • width – 상자의 너비(픽셀)

    Liquid 템플릿 언어를 사용하여 사용자 지정 템플릿에 있는 이전 작업의 매니페스트 파일에서 경계 상자 초기 값을 추출할 수 있습니다.

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

labels

JSON 형식의 문자열 배열로, 각 문자열은 작업자가 직사각형으로 둘러싸인 이미지 부분에 할당할 수 있는 레이블입니다. 한도: 10 레이블.

이름

이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

src

경계 상자를 그린 이미지의 URL입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소에는 다음 영역이 필요합니다.

full-instructions

경계 상자를 그리는 방법에 대한 일반적인 지침입니다.

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소는 다음 출력을 지원합니다.

boundingBoxes

JSON 객체의 배열로, 각 객체는 작업자가 생성한 경계 상자를 지정합니다. 배열의 각 JSON 객체에는 다음 속성이 포함되어 있습니다.

  • height – 상자의 높이(픽셀)

  • label – 라벨링 작업의 일부로 상자에 할당되는 텍스트 이 텍스트는 <crowd-bounding-box> 요소의 labels 속성에 정의된 레이블 중 하나와 일치해야 합니다.

  • left – 이미지의 왼쪽에서 상자의 왼쪽 위 구석까지 거리(픽셀)

  • top – 이미지의 위쪽에서 상자의 왼쪽 위 구석까지 거리(픽셀)

  • width – 상자의 너비(픽셀)

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • width – 이미지의 너비(픽셀)

예 : 샘플 요소 출력

다음은 이 요소에 대한 일반적인 사용 시나리오의 출력 샘플입니다.

단일 레이블, 단일 상자/복수 레이블, 단일 상자

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

레이블은 여러 개를 사용할 수 있지만 출력에는 사용된 레이블만 표시됩니다.

참고

추가 정보는 다음을 참조하세요.

정보를 표시하기 위한 높은 모양의 상자

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-card> 요소를 사용하는 감정 분석 작업용으로 설계된 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

heading

상자 맨 위에 표시되는 텍스트

image

상자 내에 표시되는 이미지의 URL

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

사용자가 세트에서 여러 옵션을 선택할 수 있도록 선택 또는 선택 취소할 수 있는 UI 구성 요소

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-checkbox> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

checked

(있는 경우) 확인란을 선택됨으로 표시하는 부울 스위치

다음은 기본적으로 확인란을 확인하는 데 사용하는 구문의 예입니다.

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

disabled

(있는 경우) 확인란을 비활성화된 상태로 표시해 선택하지 못하도록 방지하는 부울 스위치

다음은 확인란을 비활성화하는 데 사용되는 구문의 예입니다.

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

이름

작업자가 제출한 답변을 식별하는 데 사용되는 문자열. 이 값은 답변을 지정하는 JSON 객체의 키와 일치합니다.

필수

(있는 경우) 작업자가 입력을 제공해야 하는 부울 스위치

다음은 확인란을 선택할 때 사용하는 구문의 예입니다.

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

값

출력에서 확인란 상태에 대한 이름으로 사용되는 문자열. 지정하지 않으면 기본적으로 "on"으로 설정됩니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

JSON 객체를 제공합니다. name 문자열은 객체 이름이고, value 문자열은 확인란 상태를 기반으로 한 부울 값에 대한 속성 이름입니다. 선택하면 true, 선택하지 않은 경우 false입니다.

예 : 샘플 요소 출력

여러 상자에 동일한 name 값을 사용합니다.

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

3가지 색상 값은 모두 단일 객체의 속성입니다.

각 상자에 다른 name 값을 사용합니다.

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

참고

추가 정보는 다음을 참조하세요.

이미지 이외 콘텐츠(예: 오디오, 비디오 또는 텍스트)를 분류하는 위젯

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 crowd-classifier를 사용하여 작성된 HTML 작업자 작업 템플릿의 예제입니다. 이 예제에서는 Liquid 템플릿 언어를 사용하여 다음 항목을 자동화합니다.

  • categories 파라미터의 레이블 범주

  • classification-target 파라미터에서 분류되는 객체

다음 코드를 복사하여 확장자가 .html인 파일에 저장합니다. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

categories

JSON 형식의 문자열 배열로, 각 문자열은 작업자가 텍스트에 할당할 수 있는 범주입니다. 범주로 "기타"를 포함해야 합니다. 그렇지 않으면 작업자가 답변을 제공할 수 없습니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

이름

이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 영역을 지원합니다.

classification-target

작업자가 분류하는 콘텐츠. 일반 텍스트 또는 HTML일 수 있습니다. HTML 사용 방법의 예에는 비디오 또는 오디오 플레이어 포함, PDF 포함 또는 2개 이상의 이미지 비교 등이 있지만 이에 국한되지 않습니다.

full-instructions

텍스트 분류를 수행하는 방법에 대한 일반 지침

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소의 출력은 속성 이름으로 지정된 name 값을 사용하는 객체와 이 속성의 값으로 categories에서 출력되는 문자열입니다.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력입니다.

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

참고

추가 정보는 다음을 참조하세요.

오디오, 동영상, 텍스트 등 다양한 형태의 콘텐츠를 하나 이상의 범주로 분류하기 위한 위젯입니다. 분류되는 콘텐츠를 객체라고 합니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 이 요소를 사용하여 작성된 HTML 작업자 작업 템플릿의 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일에 저장합니다. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

crowd-classifier-multi-select 요소는 다음 속성을 지원합니다. 각 속성은 하나 이상의 문자열 값을 허용합니다.

categories

필수 사항입니다. JSON 형식의 문자열 배열로, 각 문자열은 작업자가 객체에 할당할 수 있는 범주입니다.

header

필수 사항입니다. 이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

name

필수 사항입니다. 이 위젯의 이름입니다. 양식 출력에서 이름은 위젯의 입력에 대한 키로 사용됩니다.

exclusion-category

선택 사항입니다. JSON 형식의 문자열은 "{ text: 'default-value' }" 형식으로 되어 있습니다. 이 속성은 작업자 UI에 표시된 객체에 적용되는 레이블이 없는 경우 작업자가 선택할 수 있는 기본값을 설정합니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 리전을 사용합니다.

classification-target

작업자가 분류하는 콘텐츠. 콘텐츠는 일반 텍스트 또는 HTML을 사용하여 템플릿에 지정하는 객체일 수 있습니다. 예를 들어, HTML 요소를 사용하여 비디오 또는 오디오 플레이어를 포함하거나, PDF 파일을 포함하거나, 둘 이상의 이미지 비교를 포함할 수 있습니다.

full-instructions

텍스트를 분류하는 방법에 대한 일반 지침입니다.

short-instructions

중요한 작업별 지침입니다. 이러한 지침은 눈에 잘 띄게 표시됩니다.

출력

이 요소의 출력은 지정된 name 값을 속성 이름으로 사용하는 객체와 이 속성의 값으로 categories에서 출력되는 문자열입니다.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력입니다.

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

참고

자세한 내용은 다음 자료를 참조하십시오.

더 긴 텍스트 내에서 단어, 구 또는 문자열에 레이블을 지정하기 위한 위젯입니다. 작업자는 레이블을 선택하고 레이블이 적용되는 텍스트를 강조 표시합니다.

중요: 독립형 위젯

<crowd-entity-annotation> 요소를 <crowd-form> 요소와 함께 사용하지 마세요. 자체 양식 제출 논리 및 제출 버튼이 포함되어 있습니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-entity-annotation> 요소를 사용하는 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

initial-value

JSON 형식의 객체 배열이며, 각각 초기화 시 텍스트에 적용할 주석을 정의합니다. 객체에는 labels 속성의 값과 일치하는 label 값, 레이블이 지정된 span의 시작 유니코드 오프셋에 대한 정수 startOffset 값 및 종료 유니코드 오프셋에 대한 정수 endOffset 값이 포함됩니다.

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

labels

JSON 형식의 객체 배열이며, 각각 다음 항목을 포함합니다.

  • label(필수): 엔터티를 식별하는 데 사용되는 이름입니다.

  • fullDisplayName(선택): 작업 위젯의 레이블 목록에 사용됩니다. 지정하지 않는 경우 레이블 값이 기본값입니다.

  • shortDisplayName(선택): 선택한 엔터티 위에 표시되는 3~4자 약어입니다. 지정하지 않는 경우 레이블 값이 기본값입니다.

    shortDisplayName이 적극적으로 권장됩니다.

    선택 항목 위에 표시되는 값이 중복되며 작업 공간에서 레이블이 지정된 엔터티를 관리하기 어려울 수 있습니다. 중복을 방지하고 작업자가 작업 공간을 관리할 수 있도록 각 레이블에 3~4자 shortDisplayName을 제공하는 것이 좋습니다.

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

이름

DOM에서 위젯의 이름으로 사용됩니다. 양식 출력 및 출력 매니페스트의 레이블 속성 이름으로도 사용됩니다.

텍스트

주석을 작성할 텍스트입니다. 템플릿 시스템은 기본적으로 따옴표와 HTML 문자열을 이스케이프 처리합니다. 코드가 이미 이스케이프 처리되었거나 부분적으로 이스케이프 처리된 경우 이스케이프를 제어하는 자세한 내용은 변수 필터 섹션을 참조하세요.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 영역을 지원합니다.

full-instructions

위젯을 작동하는 방법에 대한 일반 지침

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소는 다음 출력을 지원합니다.

엔터티

주석의 시작, 끝 및 레이블을 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • label – 할당된 레이블.

  • startOffset – 선택한 텍스트 시작 부분의 유니코드 오프셋.

  • endOffset – 선택 항목 다음 첫 번째 문자의 유니코드 오프셋.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력입니다.

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

참고

추가 정보는 다음을 참조하세요.

가운데 이미지가 있는 부동 버튼

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-fab> 요소를 사용하는 이미지 분류용으로 설계된 Liquid 템플릿 예제입니다. 이 템플릿은 JavaScript 작업자가 작업자 UI와 관련된 문제를 보고할 수 있도록 하는 데 사용됩니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

disabled

(있는 경우) 부동 버튼을 비활성화된 상태로 표시해 클릭하지 못하도록 방지하는 부울 스위치

icon

버튼 가운데 표시되는 아이콘을 지정하는 문자열. 이 문자열은 사전에 로드된 오픈 소스 iron-icons 세트의 아이콘 이름 또는 사용자 지정 아이콘에 대한 URL이어야 합니다.

다음은 <crowd-fab> HTML 요소에 iron-icon을 추가하는 데 사용할 수 있는 구문 예제입니다. icon-name을 이 아이콘 세트에서 사용하려는 아이콘의 이름으로 변경하세요.

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

레이블

아이콘 대신 사용할 수 있는 단일 문자로 구성된 문자열. 이모티콘 또는 여러 문자를 사용하면 줄임표가 버튼 대신 표시될 수 있습니다.

title

버튼 위에 마우스를 올려 놓으면 도움말로 표시되는 문자열

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

모든 사용자 작업에 대한 양식 래퍼. 양식 데이터의 적절한 제출에 대해 중요한 작업을 설정 및 구현합니다.

유형 "submit"의 crowd-button이 <crowd-form> 요소 내에 포함되어 있지 않으면 자동으로 <crowd-form> 요소 내에 추가됩니다.

에서 이 크라우드 HTML 요소를 사용하는 대화형 HTML 템플릿의 예를 참조하십시오. CodePen

다음은 <crowd-form> 요소를 사용하는 이미지 분류 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일에 저장합니다. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

  • 상위 요소: 없음

  • 하위 요소: UI 템플릿 요소 중 하나

요소 이벤트

crowd-form 요소는 표준 HTML form 요소를 확장하고 onclick 및 onsubmit과 같은 해당 이벤트를 상속합니다.

참고

추가 정보는 다음을 참조하세요.

가운데 이미지가 있는 버튼 사용자가 버튼을 누르면 잔물결 효과가 버튼 가운데에서 발생합니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-icon-button> 요소를 사용하는 이미지 분류용으로 설계된 Liquid 템플릿 예제입니다. 이 템플릿은 JavaScript 작업자가 작업자 UI와 관련된 문제를 보고할 수 있도록 하는 데 사용됩니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

disabled

(있는 경우) 버튼을 비활성화된 상태로 표시해 클릭하지 못하도록 방지하는 부울 스위치

icon

버튼 가운데 표시되는 아이콘을 지정하는 문자열. 이 문자열은 사전에 로드된 오픈 소스 iron-icons 세트의 아이콘 이름 또는 사용자 지정 아이콘에 대한 URL이어야 합니다.

다음은 <crowd-icon-button> HTML 요소에 iron-icon을 추가하는 데 사용할 수 있는 구문 예제입니다. icon-name을 이 아이콘 세트에서 사용하려는 아이콘의 이름으로 변경하세요.

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

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

이미지를 분류하기 위한 위젯입니다. 지원되는 이미지 형식인 APNG, BMP, GIF, ICO, JPEG, PNG, SVG 중 하나를 사용하세요. 이미지에는 크기 제한이 없습니다.

에서 이 크라우드 HTML 요소를 사용하는 대화형 HTML 템플릿의 예를 참조하십시오. CodePen

다음은 <crowd-image-classifier> 요소를 사용하는 이미지 분류 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일에 저장합니다. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소에는 다음 속성이 필요합니다.

categories

JSON 형식의 문자열 배열로, 각 문자열은 작업자가 이미지에 할당할 수 있는 범주입니다. 범주로 "other"를 포함해야 작업자가 답변을 제공할 수 있습니다. 범주는 최대 10개까지 지정할 수 있습니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

이름

이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

overlay

소스 이미지에 중첩될 정보입니다. 이 속성은 경계 상자, 의미 체계 분할 및 인스턴스 세분화 작업의 확인 워크플로를 위한 것입니다.

키로 낙타 대문자(camelCase) 형식의 작업-유형 이름이 있는 객체가 포함된 JSON 객체입니다. 해당 키의 값은 이전 작업의 레이블과 기타 필수 정보가 포함된 객체입니다.

경계 상자 작업을 확인하기 위한 속성이 있는 crowd-image-classifier 요소의 예는 다음과 같습니다.

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

의미 체계 분할 확인 작업에서는 overlay 값을 다음과 같이 사용합니다.

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

인스턴스 세분화 작업에서는 overlay 값을 다음과 같이 사용합니다.

<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

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 영역을 사용합니다.

full-instructions

작업자가 이미지를 분류하는 방법에 대한 일반 지침입니다.

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

worker-comment

작업자가 선택한 이유에 대해 설명해야 하는 경우 확인 워크플로우에서 이 영역을 사용합니다. 여는 태그와 닫는 태그 사이의 텍스트를 사용하여 작업자가 설명에 포함해야 하는 정보에 대한 지침을 제공합니다.

다음과 같은 속성을 사용합니다.

header

설명을 남기기 위한 동작 요청(call to action)이 있는 문구입니다. 설명이 추가된 모달 창의 제목 텍스트로 사용됩니다.

선택 사항입니다. 기본값은 "설명 추가"입니다.

link-text

이 텍스트는 위젯의 범주 아래에 나타납니다. 클릭하면 작업자가 설명을 추가할 수 있는 모달 창이 열립니다.

선택 사항입니다. 기본값은 "설명 추가"입니다.

placeholder

설명 텍스트 영역의 예제 텍스트로 작업자가 입력을 시작하면 예제 텍스트를 덮어씁니다. 작업자가 필드를 비워두면 출력에 나타나지 않습니다.

선택 사항입니다. 기본적으로 비어 있습니다.

출력

이 요소의 출력은 <crowd-image-classifier> 요소의 categories 속성에 정의된 값 중 하나를 지정하는 문자열입니다.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력입니다.

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

참고

추가 정보는 다음을 참조하세요.

이미지를 하나 이상의 범주로 분류하기 위한 위젯입니다. 지원되는 이미지 형식인 APNG, BMP, GIF, ICO, JPEG, PNG, SVG 중 하나를 사용하세요. 이미지에는 크기 제한이 없습니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 이 군중 요소를 사용하여 작성된 HTML 작업자 작업 템플릿의 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

crowd-image-classifier-multi-select 요소는 다음 속성을 지원합니다. 각 속성은 하나 이상의 문자열 값을 허용합니다.

categories

필수 사항입니다. JSON 형식의 문자열 배열로, 각 문자열은 작업자가 이미지에 할당할 수 있는 범주입니다. 작업자는 하나 이상의 범주를 선택해야 하며 모든 범주를 선택할 수 있습니다.

header

필수 사항입니다. 이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

name

필수 사항입니다. 이 위젯의 이름입니다. 양식 출력에서 이름은 위젯의 입력에 대한 키로 사용됩니다.

src

필수 사항입니다. 분류되는 이미지의 URL

exclusion-category

선택 사항입니다. JSON 형식의 문자열은 "{ text: 'default-value' }" 형식으로 되어 있습니다. 이 속성은 작업자 UI에 표시된 이미지에 적용되는 레이블이 없는 경우 작업자가 선택할 수 있는 기본값을 설정합니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 리전을 사용합니다.

full-instructions

작업자가 이미지를 분류하는 방법에 대한 일반 지침입니다.

short-instructions

중요한 작업별 지침입니다. 이러한 지침은 눈에 잘 띄게 표시됩니다.

출력

이 요소의 출력은 <crowd-image-classifier-multi-select> 요소의 categories 속성에 정의된 값 중 하나 이상을 지정하는 문자열입니다.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력입니다.

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

참고

자세한 내용은 다음 자료를 참조하십시오.

입력 데이터를 수락하는 상자

자체 닫기가 불가능합니다.

HTML 표준의 input 요소와 달리 이 요소는 닫는 대괄호 앞에 슬래시를 입력해 자체 닫기가 불가능합니다(예: <crowd-input ... />). 이 요소를 닫으려면 뒤에 </crowd-input>이 와야 합니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-input> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

allowed-pattern

작업자가 입력할 때 일치하지 않는 문자를 무시하기 위해 auto-validate 속성과 함께 사용하는 정규식

auto-focus

이 값이 true로 설정되면 로드 후 브라우저가 입력 영역 내에 초점을 배치합니다. 이러한 방식으로 작업자는 입력 영역을 먼저 선택할 필요 없이 입력하기 시작할 수 있습니다.

auto-validate

(있는 경우) 입력 확인을 활성화하는 부울 스위치. 검사기의 동작은 error-message 및 allowed-pattern 속성으로 수정할 수 있습니다.

disabled

(있는 경우) 입력 영역을 비활성화 상태로 표시하는 부울 스위치

error-message

확인에 실패한 경우 입력 필드 왼쪽 아래에 표시되는 텍스트

레이블

텍스트 필드 내에 표시되는 문자열.

이 텍스트는 작업자가 필드에 입력하기 시작한 경우 또는 value 속성이 설정된 경우 줄어들고 텍스트 필드 위로 올라옵니다.

max-length

입력 시 수락되는 최대 문자 수. 이 제한을 벗어난 입력 데이터는 무시됩니다.

min-length

필드에 입력 가능한 최소 길이

이름

DOM 및 양식 출력에 사용되는 입력의 이름을 설정합니다.

placeholder

작업자가 입력 영역에 데이터를 입력하기 시작할 때까지 표시되는 자리 표시자 텍스트로 사용되는 문자열 값으로, 기본값으로는 사용되지 않습니다.

필수

(있는 경우) 작업자가 입력을 제공해야 하는 부울 스위치

type

입력에 대한 HTML5 input-type 동작을 설정하는 문자열을 가져옵니다. 예를 들면 file나 date와 같습니다.

값

작업자가 입력 데이터를 제공하지 않으면 기본값이 되는 사전 설정. 사전 설정은 텍스트 필드에 나타납니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

name 문자열은 속성 이름으로, 필드에 입력한 텍스트는 속성의 값으로 제공합니다.

예 : 샘플 JSON 출력

여러 요소에 대한 값이 동일한 객체에 출력되는데, 이러한 요소의 name 속성 값은 속성의 이름으로 출력됩니다. 입력이 없는 요소는 출력에 표시되지 않습니다. 예를 들어, 다음 3가지 입력을 사용하여 보겠습니다.

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

입력 값이 2개만 있는 경우 다음과 같이 출력됩니다.

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

즉, 이러한 결과를 구문 분석하기 위해 빌드된 모든 코드는 답변에서 각 입력의 존재 또는 부재를 처리할 수 있어야 합니다.

참고

추가 정보는 다음을 참조하세요.

이미지 내에서 특정 객체의 개별 인스턴스를 식별하고 레이블이 지정된 각 인스턴스에 대해 색상 오버레이를 생성하는 위젯입니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-instance-segmentation>를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

다음과 비슷한 템플릿을 사용하면 작업자는 고유한 카테고리(레이블)를 추가할 수 있습니다.

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

속성

이 요소는 다음 속성을 지원합니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

labels

JSON 형식의 문자열 배열로, 각 문자열은 작업자가 이미지에 있는 객체의 인스턴스에 할당할 수 있는 레이블입니다. 작업자는 도구의 레이블에서 "인스턴스 추가"를 선택하여 각 관련 인스턴스에 대해 서로 다른 오버레이 색상을 생성할 수 있습니다.

이름

이 위젯의 이름입니다. 양식 출력에서 라벨링 데이터에 대한 키로 사용됩니다.

src

레이블 지정할 이미지의 URL

initial-value

이전 인스턴스 세분화 작업의 색상 매핑과 이전 작업으로 인한 오버레이 이미지 출력의 링크가 포함된 JSON 객체입니다. 인간 작업자가 이전 레이블 지정 작업의 결과를 확인하고 필요한 경우 조정하도록 하려면 이 항목을 포함합니다.

속성은 다음과 같이 나타납니다.

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

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 영역을 지원합니다.

full-instructions

이미지 조각화를 수행하는 방법에 대한 일반 지침

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소는 다음 출력을 지원합니다.

labeledImage

레이블의 Base64 인코딩 PNG가 포함된 JSON 객체

instances

인스턴스 레이블과 색상이 지정된 객체를 포함하는 JSON 어레이

  • color – labeledImage PNG에서 레이블의 RGB 색상에 대한 16진수 값

  • label – 해당 색상을 사용하여 오버레이에 지정되는 레이블. 이 값은 레이블의 여러 인스턴스가 고유한 색상으로 식별되기 때문에 반복될 수 있습니다.

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • width – 이미지의 너비(픽셀)

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력 예제입니다.

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

참고

추가 정보는 다음을 참조하세요.

작업자가 링크나 버튼을 클릭할 때 3개의 탭 페이지 즉, 요약, 세부 지침 및 예제에 지침을 표시하는 요소

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-instructions> 요소를 사용한 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

link-text

지침을 열기 위해 표시하는 텍스트. 기본값은 Click for instructions(클릭하여 지침 열기)입니다.

지침에 대한 트리거 유형을 지정하는 문자열. 가능한 값은 "link"(기본값) 및 "button"입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 영역을 지원합니다.

detailed-instructions

작업에 대한 구체적인 지침을 제공하는 콘텐츠입니다. "Detailed Instructions(전체 지침)" 탭 페이지에 나타납니다.

negative-example

부적절한 작업 완료의 예를 제공하는 콘텐츠. "Examples(예) 탭 페이지에 나타납니다. 이 요소 내에 예가 두 개 이상 제공될 수 있습니다.

positive-example

적절한 작업 완료의 예를 제공하는 콘텐츠. "Examples(예) 탭 페이지에 나타납니다.

short-summary

완료된 작업을 요약하는 간단한 설명. "Summary(요약) 탭 페이지에 나타납니다. 이 요소 내에 예가 두 개 이상 제공될 수 있습니다.

참고

추가 정보는 다음을 참조하세요.

이미지를 선택하고 중요 사항을 주석으로 추가하는 도구를 생성합니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-keypoint> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일에 저장합니다. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

initial-value

시작 시 이미지에 적용될 키포인트의 배열(JSON 형식)입니다. 예:

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

이 속성에 사용된 레이블 값은 labels 속성에서 일치하는 값을 가져야 합니다. 그렇지 않으면 해당 포인트는 렌더링되지 않습니다.

labels

중요 사항 주석 레이블로 사용할 문자열의 배열(JSON 형식)입니다.

이름

작업자가 제출한 답변을 식별하는 데 사용되는 문자열입니다. 이 값은 답변을 지정하는 JSON 객체의 키와 일치합니다.

src

주석을 달 이미지의 원본 URI입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소에는 다음 영역이 필요합니다.

full-instructions

이미지에 주석을 다는 방법에 대한 일반 지침

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소는 다음 출력을 지원합니다.

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • width – 이미지의 너비(픽셀)

keypoints

중요 사항의 레이블과 좌표를 포함하는 JSON 객체의 배열입니다. 각 객체는 다음 속성을 포함합니다.

  • label – 중요 사항에 할당된 레이블입니다.

  • x – 이미지의 중요 사항의 X 좌표(픽셀 단위)입니다.

  • y – 이미지의 중요 사항의 Y 좌표(픽셀 단위)입니다.

참고

X 좌표와 Y 좌표는 이미지의 상단 왼쪽 모서리가 되는 0,0을 기준으로 합니다.

예 : 샘플 요소 출력

다음은 이 요소를 사용한 샘플 출력입니다.

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

레이블은 여러 개를 사용할 수 있지만 출력에는 사용된 레이블만 표시됩니다.

참고

추가 정보는 다음을 참조하세요.

이미지에 선을 그리기 위한 위젯입니다. 각 선은 레이블과 연결되며 출력 데이터는 각 선의 시작점과 끝점을 보고합니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-line> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다. 더 많은 예제를 보려면 이 GitHub 리포지토리를 참조하십시오.

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

속성

이 요소는 다음 속성을 지원합니다.

header

선택 사항입니다. 이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

initial-value

선택 사항입니다. JSON 객체의 배열로, 이들 각각이 구성 요소 로드 시 선을 설정합니다. 배열의 각 JSON 객체에는 다음 속성이 포함되어 있습니다.

  • label – 라벨링 작업의 일부로 선에 할당되는 텍스트 이 텍스트는 <crowd-line> 요소의 레이블 속성에 정의된 레이블 중 하나와 일치해야 합니다.

  • vertices – 이미지의 왼쪽 상단 모서리를 기준으로 한 선의 시작점과 끝점의 x 및 y 픽셀 좌표입니다.

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

initial-value 속성을 통해 설정된 선을 조정할 수 있습니다. 작업자의 답변이 조정되었는지 여부는 작업자 답변 출력의 initialValueModified 부울을 통해 추적됩니다.

labels

필수 사항입니다. JSON 형식의 문자열 배열입니다. 각 문자열은 작업자가 선에 할당할 수 있는 레이블입니다.

한도: 레이블 10개

label-colors

선택 사항입니다. 문자열 배열입니다. 각 문자열은 레이블의 16진수(hex) 코드입니다.

name

필수 사항입니다. 이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

src

필수 사항입니다. 선을 그린 이미지의 URL입니다.

리전

이 요소에는 다음 영역이 필요합니다.

full-instructions

선을 그리는 방법에 대한 일반적인 지침입니다.

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • width – 이미지의 너비(픽셀)

lines

선 레이블과 꼭짓점이 있는 객체를 포함하는 JSON 배열입니다.

  • label – 선에 지정된 레이블입니다.

  • 꼭짓점 - 이미지의 왼쪽 상단 모서리를 기준으로 한 선의 시작점과 끝점의 x 및 y 픽셀 좌표입니다.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력 예제입니다.

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

참고

추가 정보는 다음을 참조하세요.

열리면 디스플레이에 표시되는 작은 창

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-modal> 요소와 함께 사용할 수 있는 구문 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

이 요소는 다음 속성을 지원합니다.

link-text

모달을 열기 위해 표시하는 텍스트. 기본값은 "Click to open modal(모달을 열려면 클릭)"입니다.

모달에 대한 트리거 유형을 지정하는 문자열. 가능한 값은 "link"(기본값) 및 "button"입니다.

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

추가 정보는 다음을 참조하세요.

이미지 위에 다각형을 그리고 각 다각형으로 둘러싸인 이미지의 일부분에 레이블을 할당하는 위젯입니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-polygon> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

labels

JSON 형식의 문자열 배열로, 각 문자열은 작업자가 다각형으로 둘러싸인 이미지 부분에 할당할 수 있는 레이블입니다.

이름

이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

src

다각형을 그린 이미지의 URL입니다.

initial-value

JSON 객체의 배열입니다. 각 객체는 구성 요소 로드 시 그릴 다각형을 정의합니다. 배열의 각 JSON 객체에는 다음 속성이 포함되어 있습니다.

  • label – 라벨링 작업의 일부로 다각형에 할당되는 텍스트입니다. 이 텍스트는 <crowd-polygon> 요소의 labels 속성에 정의된 레이블 중 하나와 일치해야 합니다.

  • vertices – JSON 객체의 배열입니다. 각 객체는 다각형의 한 점에 대한 x 좌표값과 y 좌표값을 포함합니다.

initial-value 속성의 예는 다음과 같습니다.

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

이 속성은 HTML 요소 내에 포함되므로 JSON 배열은 작은따옴표나 큰따옴표로 묶어야 합니다. 위의 예는 작은따옴표를 사용하여 JSON을 캡슐화하고 JSON 자체 내에서 큰따옴표를 사용합니다. JSON에 작은따옴표와 큰따옴표를 혼합해야 할 경우 HTML 개체 코드(큰따옴표의 경우 &quot;, 작은따옴표의 경우 &#39;)로 바꿔서 안전하게 이스케이프 처리하세요.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

다음과 같은 영역이 필요합니다.

full-instructions

다각형을 그리는 방법에 대한 일반적인 지침입니다.

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소는 다음 출력을 지원합니다.

polygons

JSON 객체의 배열로, 각 객체는 작업자가 생성한 다각형을 명시합니다. 배열의 각 JSON 객체에는 다음 속성이 포함되어 있습니다.

  • label – 라벨링 작업의 일부로 다각형에 할당되는 텍스트입니다.

  • vertices – JSON 객체의 배열입니다. 각 객체는 다각형의 한 점에 대한 x 좌표값과 y 좌표값을 포함합니다. 이미지의 상단 왼쪽 모서리는 0,0입니다.

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • width – 이미지의 너비(픽셀)

예 : 샘플 요소 출력

다음은 이 요소에 대한 일반적인 사용 시나리오의 출력 샘플입니다.

단일 레이블, 단일 다각형

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

레이블은 여러 개를 사용할 수 있지만 출력에는 사용된 레이블만 표시됩니다.

참고

추가 정보는 다음을 참조하세요.

이미지에 폴리라인 또는 선을 그리기 위한 위젯입니다. 각 폴리라인은 한 레이블에 연결되며 2개 이상의 꼭짓점을 포함할 수 있습니다. 폴리라인은 서로 교차할 수 있으며 이미지의 아무 곳에나 시작점과 끝점을 찍을 수 있습니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-polyline> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다. 더 많은 예제를 보려면 이 GitHub 리포지토리를 참조하십시오.

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

속성

이 요소는 다음 속성을 지원합니다.

header

선택 사항입니다. 이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

initial-value

선택 사항입니다. JSON 객체의 배열입니다. 각 객체는 구성 요소 로드 시 폴리라인을 설정합니다. 이 배열의 각 JSON 객체에는 다음 속성이 포함되어 있습니다.

  • 레이블 – 레이블 지정 작업의 일환으로 폴리라인에 할당되는 텍스트입니다. 이 텍스트는 <crowd-polyline> 요소의 레이블 속성으로 정의된 레이블 중 하나와 일치해야 합니다.

  • 꼭짓점 – 이미지의 왼쪽 상단 모서리를 기준으로 한 폴리라인 꼭짓점의 x 및 y 픽셀 좌표입니다.

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

initial-value 속성을 통해 설정된 폴리라인을 조정할 수 있습니다. 작업자 답변이 조정되었는지 여부는 작업자 답변 출력의 initialValueModified 부울을 통해 추적됩니다.

labels

필수 사항입니다. JSON 형식의 문자열 배열입니다. 각 문자열은 작업자가 선에 할당할 수 있는 레이블입니다.

한도: 레이블 10개

label-colors

선택 사항입니다. 문자열 배열입니다. 각 문자열은 레이블의 16진수(hex) 코드입니다.

name

필수 사항입니다. 이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

src

필수 사항입니다. 폴리라인을 그린 이미지의 URL입니다.

리전

이 요소에는 다음 영역이 필요합니다.

full-instructions

폴리라인을 그리는 방법에 대한 일반 지침입니다.

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • 너비 – 이미지의 너비(단위: 픽셀)입니다.

폴리라인

폴리라인의 레이블과 꼭짓점이 있는 객체를 포함하는 JSON 배열입니다.

  • 레이블 – 선에 지정된 레이블입니다.

  • 꼭짓점 – 이미지의 왼쪽 상단 모서리를 기준으로 한 폴리라인 꼭짓점의 x 및 y 픽셀 좌표입니다.

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력 예제입니다.

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

참고

추가 정보는 다음을 참조하세요.

선택 또는 선택 취소 할 수 있는 버튼. 라디오 버튼이 라디오 그룹 내에 있으면 그룹 내 정확히 하나의 라디오 버튼을 언제든지 선택할 수 있습니다. 다음은 crowd-radio-group 요소 내부에 crowd-radio-button 요소를 구성하는 방법의 예제입니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-radio-button> 요소와 함께 사용할 수 있는 구문 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

이전 예제는 이 GitHub 예제의 사용자 지정 작업자 작업 템플릿인 개체 인식 레이블 지정 작업 사용자 지정 템플릿에서 볼 수 있습니다.

Crowd HTML 요소 라디오 버튼은 HTML 태그 required를 지원하지 않습니다. 라디오 버튼 선택을 필수로 하려면 <input type="radio"> 요소를 사용하여 라디오 버튼을 만들고 required 태그를 추가합니다. 동일한 라디오 버튼 그룹에 속하는 모든 <input> 요소의 name 속성은 동일해야 합니다. 예를 들어, 다음 템플릿을 제출하려면 사용자가 animal-type 그룹에서 라디오 버튼을 선택해야 합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

checked

(있는 경우) 라디오 버튼을 선택됨으로 표시하는 부울 스위치

disabled

(있는 경우) 버튼을 비활성화된 상태로 표시하여 선택하지 못하도록 하는 부울 스위치

이름

작업자가 제출한 답변을 식별하는 데 사용되는 문자열. 이 값은 답변을 지정하는 JSON 객체의 키와 일치합니다.

참고

crowd-radio-group 요소를 벗어났지만 name 문자열은 같고 value 문자열은 다른 버튼을 사용하면 출력의 name 객체에 각 value 문자열에 대한 부울 값이 포함됩니다. 버튼 그룹에서 버튼 하나만 선택되도록 하려면 버튼을 crowd-radio-group 요소의 하위 항목으로 설정하고 다른 이름 값을 사용합니다.

값

요소의 부울 값에 대한 속성 이름. 지정하지 않으면 기본값으로 "on"을 사용합니다(예: { "<name>": { "<value>": <true or false> } }).

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

다음 패턴으로 객체를 출력합니다. { "<name>": { "<value>": <true or false> } } crowd-radio-group 요소를 벗어났지만 name 문자열은 같고 value 문자열은 다른 버튼을 사용하면 이름 객체에 각 value 문자열에 대한 부울 값이 포함됩니다. 버튼 그룹에서 버튼 하나만 선택되도록 하려면 버튼을 crowd-radio-group 요소의 하위 항목으로 설정하고 다른 이름 값을 사용합니다.

예 이 요소의 샘플 출력
[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

참고

추가 정보는 다음을 참조하세요.

라디오 버튼의 그룹. 그룹 내 라디오 버튼 하나만 선택할 수 있습니다. 라디오 버튼을 하나 선택하면 동일 그룹 내에서 이전에 선택한 라디오 버튼이 지워집니다. crowd-radio-group 요소를 사용하는 사용자 지정 UI 템플릿의 예는 엔터티 인식 레이블 지정 작업 사용자 지정 템플릿을 참조하세요.

에서 이 Crowd HTML Element를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-radio-group> 요소와 함께 사용할 수 있는 구문 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 특별 특성을 지원하지 않습니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

내부에 있는 crowd-radio-button 요소를 나타내는 객체의 배열을 출력합니다.

예 요소 출력 샘플
[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

참고

추가 정보는 다음을 참조하세요.

이미지를 분류하고 각 이미지 세그먼트에 레이블을 할당하는 위젯

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-semantic-segmentation> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

header

이미지 위에 표시되는 텍스트입니다. 일반적으로 작업자를 위한 간단한 지침 또는 질문입니다.

initial-value

이전 의미 체계 분할 작업의 색상 매핑과 이전 작업으로 인한 오버레이 이미지 출력의 링크가 포함된 JSON 객체입니다. 인간 작업자가 이전 레이블 지정 작업의 결과를 확인하고 필요한 경우 조정하도록 하려면 이 항목을 포함합니다.

속성은 다음과 같이 나타납니다.

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

Ground Truth 기본 제공 태스크 유형을 주석 통합(한 명 이상의 작업자가 단일 이미지에 레이블을 지정하는 경우)과 함께 사용하는 경우 레이블 매핑은 개별 작업자 출력 레코드에 포함되지만 전체 결과는 통합 결과에 internal-color-map으로 표시됩니다.

사용자 지정 템플릿에서 Liquid 템플릿 언어를 사용하여 internal-color-map을 label-mappings로 변환할 수 있습니다.

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

labels

JSON 형식의 문자열 배열로, 각 문자열은 작업자가 이미지의 세그먼트에 할당할 수 있는 레이블입니다.

이름

이 위젯의 이름입니다. 양식 출력에서 위젯의 입력에 대한 키로 사용됩니다.

src

조각화할 이미지의 URL

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

리전

이 요소는 다음 영역을 지원합니다.

full-instructions

이미지 조각화를 수행하는 방법에 대한 일반 지침

short-instructions

눈에 띄는 위치에 표시되는 중요한 작업 관련 지침입니다.

출력

이 요소는 다음 출력을 지원합니다.

labeledImage

레이블의 Base64 인코딩 PNG가 포함된 JSON 객체

labelMappings

조각화 레이블로 이름이 지정된 객체가 포함된 JSON 객체

  • color – labeledImage PNG에서 레이블의 RGB 색상에 대한 16진수 값

이니셜 ValueModified

초기 값이 수정되었는지 여부를 나타내는 부울입니다. 출력이 조정 작업에서 발생한 경우에만 포함됩니다.

입력 ImageProperties

작업자가 주석을 달고 있는 이미지의 치수를 지정하는 JSON 객체입니다. 이 객체는 다음 속성을 포함하고 있습니다.

  • height – 이미지의 높이(픽셀)

  • width – 이미지의 너비(픽셀)

예 : 샘플 요소 출력

다음은 이 요소의 샘플 출력입니다.

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

참고

추가 정보는 다음을 참조하세요.

작업자가 노브를 이동해 값 범위에서 값을 선택할 수 있도록 하는 슬라이딩 노브가 있는 막대. 슬라이더를 사용하여 음량, 밝기 또는 색 채도 등과 같은 강도를 반영하는 설정을 편리하게 선택할 수 있습니다.

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-slider> 요소를 사용하는 설문 조사 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.


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

속성

이 요소는 다음 속성을 지원합니다.

disabled

(있는 경우) 슬라이더를 비활성화 상태로 표시하는 부울 스위치

editable

(있는 경우) 값을 선택하기 위해 선택 가능한 위쪽/아래쪽 버튼을 표시하는 부울 스위치.

위쪽/아래쪽 버튼을 통해 값을 선택하는 것은 슬라이더에서 노브를 이동해 값을 선택하는 방법의 대안입니다. 슬라이더의 노브는 위쪽/아래쪽 버튼 선택에 맞춰 움직입니다.

최대

슬라이더에 대한 최댓값을 지정하는 숫자

min

슬라이더에 대한 최솟값을 지정하는 숫자

이름

작업자가 제출한 답변을 식별하는 데 사용되는 문자열. 이 값은 답변을 지정하는 JSON 객체의 키와 일치합니다.

pin

(있는 경우) 노브가 움직일 때 노브 위에 현재 값을 표시하는 부울 스위치

필수

(있는 경우) 작업자가 입력을 제공해야 하는 부울 스위치

secondary-progress

crowd-slider-secondary-color CSS 속성과 함께 사용하면 진행률 표시줄이 secondary-progress로 표시되는 지점까지 컬러로 표시됩니다. 예를 들어, 스트리밍 비디오에 대한 진행률을 나타내는 경우 value는 비디오 타임라인에서 최종 사용자가 어디에 있는지를 나타냅니다. secondary-progress 값은 타임라인에서 비디오가 버퍼링된 지점을 나타냅니다.

단계

슬라이더에서 선택 가능한 값 간의 차이를 지정하는 숫자

값

작업자가 입력 데이터를 제공하지 않으면 기본값이 되는 사전 설정.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

아래에 정보가 있는 탭처럼 보이도록 스타일이 지정된 구성 요소

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-tab> 요소를 사용하는 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

header

탭에 표시되는 텍스트. 일반적으로 탭 아래 포함된 정보에 대한 간단한 설명적 이름입니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

탭으로 구분된 정보를 위한 컨테이너

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-tabs> 요소를 사용하는 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소에는 속성이 없습니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

텍스트 입력을 위한 필드

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-text-area> 요소를 사용하는 오디오 클립을 변환하도록 설계된 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

allowed-pattern

작업자가 입력할 때 일치하지 않는 문자를 무시하기 위해 auto-validate 속성과 함께 사용하는 정규식

auto-focus

(있는 경우) 사용자가 요소 내부를 클릭하지 않아도 바로 입력을 시작할 수 있도록 로드 시 이 요소에 커서를 배치하는 부울 스위치

auto-validate

(있는 경우) 입력 확인을 활성화하는 부울 스위치. 검사기의 동작은 error-message 및 allowed-pattern 속성으로 수정할 수 있습니다.

char-counter

(있는 경우) 요소의 아래 오른쪽 모서리 바로 밑에 작은 텍스트 필드를 배치하여 요소 내 문자 수를 표시하는 부울 스위치

disabled

(있는 경우) 입력 영역을 비활성화 상태로 표시하는 부울 스위치

error-message

확인에 실패한 경우 입력 필드 왼쪽 아래에 표시되는 텍스트

레이블

텍스트 필드 내에 표시되는 문자열.

이 텍스트는 작업자가 필드에 입력하기 시작한 경우 또는 value 속성이 설정된 경우 줄어들고 텍스트 필드 위로 올라옵니다.

max-length

요소에서 허용하는 최대 문자 수를 지정하는 정수. 이 최댓값을 초과해 입력하거나 붙여 넣는 문자는 무시됩니다.

max-rows

a 내에 허용되는 최대 텍스트 행 수를 지정하는 정수. crowd-text-area 일반적으로 새 행을 수용하도록 요소가 확장됩니다. 이 값을 설정한 경우 행 수가 최댓값을 초과하면 콘텐츠가 위로 스크롤되어 보이지 않게 되고 스크롤 막대 컨트롤이 나타납니다.

이름

출력에서 요소의 데이터를 나타내는 데 사용되는 문자열

placeholder

사용자에게 자리 표시자 텍스트로 표시되는 문자열. 사용자가 입력 영역에 무엇이든 입력하면 사라집니다.

rows

텍스트 행에서 요소 높이를 지정하는 정수

값

작업자가 입력 데이터를 제공하지 않으면 기본값이 되는 사전 설정. 사전 설정은 텍스트 필드에 나타납니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

이 요소는 name을 속성 이름으로, 요소의 텍스트 내용을 값으로 출력합니다. 텍스트는 캐리지 리턴은 \n으로 표시됩니다.

예 이 요소의 샘플 출력
[
  {
    "textInput1": "This is the text; the text that\nmakes the crowd go wild."
  }
]

참고

추가 정보는 다음을 참조하세요.

디스플레이에 일시적으로 나타나는 미세한 알림. crowd-toast 하나만 표시됩니다.

에서 이 Crowd HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음은 <crowd-toast> 요소를 사용하는 Liquid 템플릿 예제입니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.



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

속성

이 요소는 다음 속성을 지원합니다.

기간

알림이 화면에 나타나는 기간(밀리초)을 지정하는 수

텍스트

알림에 표시되는 텍스트

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

참고

추가 정보는 다음을 참조하세요.

상태를 전환하는 ON/OFF 스위치 역할을 하는 버튼

에서 이 크라우드 HTML 요소를 사용하는 HTML 템플릿의 대화형 예제를 참조하십시오. CodePen

다음 예는 <crowd-toggle-button> HTML 요소를 사용하는 다양한 방법을 보여 줍니다. 다음 코드를 복사하여 확장자가 .html인 파일로 저장하세요. 브라우저에서 파일을 열어 이 템플릿을 미리 보고 상호 작용합니다.

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

속성

이 요소는 다음 속성을 지원합니다.

checked

(있는 경우) ON 위치로 전환된 버튼을 표시하는 부울 스위치

disabled

(있는 경우) 버튼을 비활성화된 상태로 표시해 전환하지 못하도록 방지하는 부울 스위치

invalid

off 위치에 있으면 이 속성을 사용하는 버튼이 알림 색상으로 표시됩니다. 표준은 빨간색이지만 CSS에서 색상을 변경할 수 있습니다. on으로 전환되면 버튼이 on 위치의 다른 버튼과 같은 색상으로 표시됩니다.

이름

작업자가 제출한 답변을 식별하는 데 사용되는 문자열. 이 값은 답변을 지정하는 JSON 객체의 키와 일치합니다.

필수

(있는 경우) 작업자가 입력을 제공해야 하는 부울 스위치

값

출력에서 요소의 부울 상태에 대한 속성 이름으로 사용되는 값. 제공하지 않으면 기본적으로 "on"으로 설정됩니다.

요소 계층 구조

이 요소에는 다음과 같은 상위 및 하위 요소가 포함되어 있습니다.

출력

이 요소는 value는 속성 이름으로, 요소의 상태는 속성에 대한 부울 값으로 포함한 객체의 이름으로 name을 출력합니다. 요소에 대해 값을 지정하지 않으면 속성 이름은 기본적으로 "on"으로 지정됩니다.

예 이 요소의 샘플 출력
[
  {
    "theToggler": {
      "on": true
    }
  }
]

참고

추가 정보는 다음을 참조하세요.