amazon-sagemaker - AWS SageMaker - 提交按钮不适用于自定义模板
问题描述
当我在 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>
解决方案
您的代码片段几乎没有问题。
以下是用于构建自定义标签模板的 SageMaker 的 HTML 参考和示例的链接
首先删除所有那些提交按钮(<crowd-button>
元素)和onClick
事件处理程序。从这里您有两个选项,使用默认 SageMaker 提交按钮或在模板中创建您自己的按钮。
使用 SageMaker 的提交按钮
省去提交按钮 ( crowd-button
),SageMaker 会自动在里面添加一个crowd-form
。根据此处的文档
使用自定义提交按钮
在这种情况下,您需要:
crowd-button
通过包含在crowd-form
元素内部和设置来防止 SageMaker 添加按钮style="display: none;
- 在模板的其他位置添加您自己的提交按钮,并添加
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">
<!-- 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>
代码源
推荐阅读
- android - Cordova Android 在运行时以编程方式设置 windowBackground
- c++ - 未安装的包上的 CMake“find_package”命令意外成功
- jquery - 使用 $.load() 时如何等待所有脚本加载?
- c# - 如何使用 JSON 填充 ObservableCollection?
- javascript - 不同的元素正在接收点击,即使 Xpath 是正确且唯一的(量角器)
- prolog - 如何将动态谓词的更改永久保存到 .pl 文件?(Tau 序言)
- c# - 如何使用 for 创建球形瓷砖地形?
- c - 有没有办法在 C 预处理器中执行任意代码?
- apache-kafka - 如何获取存储在 zookeeper 中的偏移量
- serial-port - 2.3x DM 串行端口连接