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

问题描述 投票:1回答:1

[当我在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>
amazon-sagemaker mechanicalturk
1个回答
1
投票

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

这里是SageMaker's HTML ReferenceExample for building custom Labeling template的链接

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

使用SageMaker的提交按钮

省去提交按钮(crowd-button),SageMaker会在crowd-form中自动添加一个。根据文档here

使用自定义提交按钮

在这种情况下,您需要:

  1. 通过包含crowd-button inside crowd-form元素并设置style="display: none;来防止SageMaker添加按钮>
  2. 在模板上的其他位置添加您自己的Submit按钮,并添加onclick甚至将执行form.submit()的处理程序>
  3. 这是模板的工作示例(摘自上述示例)。>>

    <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">
    
         <!-- Prevent crowd-form from creating its own button -->
        <crowd-button form-action="submit" style="display: none;"></crowd-button>
    </crowd-form>
    
    <!-- Custom annotation user interface is rendered here -->
    <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>
    

    代码源

© www.soinside.com 2019 - 2024. All rights reserved.