Question

当我在AWS SageMaker上创建新作业时，使用带有人群形式的自定义模板（请参阅随附的示例），“提交”按钮不起作用，甚至无法单击。反正有做这项工作吗？在AWS支持方面还没有得到很好的回应。

$('#submitButton').onclick = function() {
   $('crowd-form').submit(); 
};


 <body>
    <h2 id="hit">test</h2>
        <canvas id="canvas" width=1210 height=687></canvas>    
        <crowd-button id="submitButton3">Test button</crowd-button>

    <crowd-form>

        <input type="hidden" name="path0" id="input0123" value="{{task.input.metadata.images.path0}}" />
        <crowd-input label="Please input the character you see in the image" max-length="1" name="workerInput0"></crowd-input>

        <crowd-button id="submitButto3223n">Submit123</crowd-button>

    </div></div>

    <crowd-button id="submitButton">Submit123</crowd-button>

    </crowd-form>
    <crowd-button id="submitButton1">Submit1232</crowd-button>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
 </body>

Answer 1

您的代码段几乎没有问题。

以下是指向SageMaker's HTML Reference和Example for building custom Labeling template的链接

首先删除所有那些提交按钮（<crowd-button>元素）和onClick事件处理程序。在这里，您有两个选择，可以使用默认的SageMaker提交按钮或在模板中创建自己的按钮。

使用SageMaker的“提交”按钮

省略提交按钮（crowd-button），SageMaker将自动在crowd-form内附加一个。根据文档here

使用自定义的提交按钮

在这种情况下，您需要：

通过在crowd-button元素内包含crowd-form 并设置style="display: none;

来防止SageMaker添加按钮
在模板上的其他位置添加您自己的“提交”按钮，并添加onclick甚至将执行form.submit()的处理程序

这是模板的工作示例（摘自上述示例）。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <link rel="stylesheet" href="https://s3.amazonaws.com/smgtannotation/web/static/css/1.3fc3007b.chunk.css"> <link rel="stylesheet" href="https://s3.amazonaws.com/smgtannotation/web/static/css/main.9504782e.chunk.css"> <div id='document-text' style="display: none;"> {{ task.input.text }} </div> <div id='document-image' style="display: none;"> {{ task.input.taskObject | grant_read_access }} </div> <div id="metadata" style="display: none;"> {{ task.input.metadata }} </div> <crowd-form> <input name="annotations" id="annotations" type="hidden">  <crowd-button form-action="submit" style="display: none;"></crowd-button> </crowd-form>  <div id="root"></div> <crowd-button id="submitButton">Submit</crowd-button> <script> document.querySelector('crowd-form').onsubmit = function() { document.getElementById('annotations').value = JSON.stringify(JSON.parse(document.querySelector('pre').innerText)); }; document.getElementById('submitButton').onclick = function() { document.querySelector('crowd-form').submit(); }; </script> <script src="https://s3.amazonaws.com/smgtannotation/web/static/js/1.3e5a6849.chunk.js"></script> <script src="https://s3.amazonaws.com/smgtannotation/web/static/js/main.96e12312.chunk.js"></script> <script src="https://s3.amazonaws.com/smgtannotation/web/static/js/runtime~main.229c360f.js"></script>

代码源

AWS SageMaker-提交按钮不适用于自定义模板

1 个答案:

使用SageMaker的“提交”按钮

使用自定义的提交按钮