Access Crowd HTML output results - amazon-sagemaker

Question

I'm creating a website using the Crowd HTML Elements that let users/workers annotate images with the bounding box format. The form looks like this:
<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>
The results of a worker's submission looks like the following:
{
"annotatedResult": {
"boundingBoxes": [
{
"height": 3300,
"label": "Dog",
"left": 536,
"top": 154,
"width": 4361
}
],
"inputImageProperties": {
"height": 3456,
"width": 5184
}
}
}
]
I'd like to take this output and write it to a database, pass it to AWS Lambda, store it as metadata, etc. but I don't know how to access the results. Is the JSON output a property of some HTML DOM property I can grab?
I can attach a javascript function to the submit action of the crowd-form portion...
<script>
document.querySelector('crowd-form').onsubmit = function() {
???
};
</script>
...but I'm not sure what object I need to grab to get the results. Thanks for your help!

Answer 1

You can access the bounding boxes during the onsubmit event like this:
<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 a working jsfiddle.
Your use case sounds interesting. If you don't mind sharing, please email me at samhenry#amazon.com and I may be able to help further.
Thank you,
Amazon Mechanical Turk