访问 Crowd HTML 输出结果答案

【问题标题】：Access Crowd HTML output results访问 Crowd HTML 输出结果
【发布时间】：2020-04-15 01:21:05
【问题描述】：

我正在使用Crowd HTML Elements 创建一个网站，让用户/工作人员使用边界框格式注释图像。表单如下所示：

<crowd-form>
  <crowd-bounding-box
    name="annotatedResult"
    labels="['Referee', 'Player']"
    src="https://s3.amazonaws.com/cv-demo-images/basketball-outdoor.jpg"
    header="Draw boxes around each basketball player and referee in this image"
  >
    <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 each basketball player and referee in this image.
    </short-instructions>
  </crowd-bounding-box>
</crowd-form>

worker 提交的结果如下所示：

  {
    "annotatedResult": {
      "boundingBoxes": [
        {
          "height": 3300,
          "label": "Dog",
          "left": 536,
          "top": 154,
          "width": 4361
        }
      ],
      "inputImageProperties": {
        "height": 3456,
        "width": 5184
      }
    }
  }
]

我想将此输出写入数据库，将其传递给 AWS Lambda，将其存储为元数据等，但我不知道如何访问结果。 JSON 输出是我可以抓取的某个 HTML DOM 属性的属性吗？

我可以在众包部分的提交操作中附加一个 javascript 函数...

<script>
  document.querySelector('crowd-form').onsubmit = function() {
      ???
  };
</script>

...但我不确定我需要抓取什么对象才能获得结果。感谢您的帮助！

【问题讨论】：

标签： amazon-sagemaker mechanicalturk

【解决方案1】：

您可以在 onsubmit 事件期间访问边界框，如下所示：

<script>
    document.querySelector('crowd-form').onsubmit = function(e) {
      const boundingBoxes = document.querySelector('crowd-bounding-box').value.boundingBoxes || document.querySelector('crowd-bounding-box')._submittableValue.boundingBoxes;
    }
</script>

Here's 一个工作中的 jsfiddle。

您的用例听起来很有趣。如果您不介意分享，请发送电子邮件至 samhenry@amazon.com，我可能会提供进一步帮助。

谢谢，

亚马逊机械土耳其人

【讨论】：