如何编辑Amazon SageMaker GroundTruth标注界面的快捷键标签页？

我来帮你搞定这个问题！你已经成功修改了说明标签页，但自定义快捷键的标签页确实不像full-instructions或short-instructions那样有现成的标签可以直接编辑——因为默认的快捷键标签是内置组件，需要你手动扩展或替换它的内容。以下是具体步骤：

1. 自定义快捷键标签页内容 #

在你的HTML标注模板中，找到（或者添加）crowd-tabs组件，专门为快捷键标签页编写自定义内容。默认界面里的标签页结构大概是这样的，你可以直接修改Keyboard Shortcuts标签下的内容：

<crowd-tabs>
  <!-- 已有的说明标签页 -->
  <crowd-tab header="Instructions">
    <crowd-instructions>
      <short-instructions>
        <!-- 你已经编辑好的短说明 -->
      </short-instructions>
      <full-instructions>
        <!-- 你已经编辑好的完整说明 -->
      </full-instructions>
    </crowd-instructions>
  </crowd-tab>

  <!-- 自定义快捷键标签页 -->
  <crowd-tab header="Keyboard Shortcuts">
    <div style="padding: 16px;">
      <h3>自定义快捷键</h3>
      <ul style="list-style-type: disc; margin-left: 20px;">
        <li><kbd>Ctrl+Shift+S</kbd>: 快速保存并提交标注</li>
        <li><kbd>Alt+Right</kbd>: 跳转到下一个任务</li>
        <li><kbd>Alt+Left</kbd>: 返回上一个任务</li>
        <!-- 把你新增的快捷键都在这里列出来，格式和上面保持一致 -->
      </ul>
      
      <h3>系统默认快捷键</h3>
      <ul style="list-style-type: disc; margin-left: 20px;">
        <li><kbd>Ctrl+Z</kbd>: 撤销操作</li>
        <!-- 如果需要保留默认快捷键说明，也可以在这里加上 -->
      </ul>
    </div>
  </crowd-tab>
</crowd-tabs>

2. 绑定自定义快捷键的逻辑 #

光有说明还不够，你需要在模板的<script>标签里添加快捷键的事件监听，确保按键能触发对应的操作。比如：

// 监听键盘按键事件
document.addEventListener('keydown', function(e) {
  // 防止浏览器默认快捷键干扰
  e.preventDefault();

  // 快速保存并提交
  if (e.ctrlKey && e.shiftKey && e.key === 's') {
    // 这里替换成你的保存/提交逻辑，比如调用标注组件的submit方法
    document.querySelector('crowd-bounding-box').submit();
    console.log('标注已保存并提交');
  }

  // 跳转到下一个任务
  if (e.altKey && e.key === 'ArrowRight') {
    document.querySelector('crowd-form').nextButton.click();
    console.log('跳转到下一个任务');
  }

  // 返回上一个任务
  if (e.altKey && e.key === 'ArrowLeft') {
    document.querySelector('crowd-form').previousButton.click();
    console.log('返回上一个任务');
  }
});

3. 注意事项 #

• 如果你的模板是基于SageMaker预构建的任务（比如 bounding box、图像分类），默认的快捷键标签可能是内置的，这时候你需要完全替换crowd-tabs组件来覆盖默认内容。
• 尽量避免和浏览器默认快捷键冲突（比如Ctrl+W是关闭标签页，Ctrl+T是新建标签页），可以用Alt或Shift组合键来减少冲突。
• 测试时，打开标注界面的快捷键标签页，确认新增的说明显示正常，同时实际按键能触发对应的操作，确保说明和功能一致。

内容的提问来源于stack exchange，提问作者blueseal