AWS SageMaker - кнопка отправки не работает с пользовательским шаблоном - PullRequest
Новая
       35

AWS SageMaker - кнопка отправки не работает с пользовательским шаблоном

1 голос
/ 13 января 2020

Когда я создаю новое задание на AWS SageMaker, используя мой пользовательский шаблон с формой толпы (см. Прикрепленный образец), кнопка SUBMIT не работает и даже не активируется. Есть ли способ заставить это работать? Не вижу хорошего ответа на поддержку 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>

1 Ответ

1 голос
/ 16 января 2020

Есть несколько проблем с вашим фрагментом кода.

Вот ссылки на SageMaker's HTML Ссылка и Пример создания пользовательского шаблона маркировки

Сначала удалите все эти кнопки отправки (<crowd-button> elements) и обработчик событий onClick. Отсюда у вас есть два варианта: использовать кнопку отправки SageMaker по умолчанию или создать свою собственную в шаблоне.

Использовать кнопку отправки SageMaker

Не использовать кнопки отправки (crowd-button), и SageMaker автоматически добавит одну внутри crowd-form. В соответствии с документацией здесь

Использовать пользовательскую кнопку отправки

В этом случае вам необходимо:

  1. Запретить кнопку добавления SageMaker, включив crowd-button внутри элемент crowd-form и настройка style="display: none;
  2. Добавьте собственную кнопку Отправить в другом месте шаблона и добавьте 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>

Источник кода

...