Added text at bottom of start training (and train more) dialog box that says

"This training job will take approximately <estimate> minutes, but will be stopped if it runs longer than <max> minutes."

Author: lizlooney

server/src/js/startTrainingDialog.js

@@ -124,7 +124,11 @@ fmltc.StartTrainingDialog.prototype.updateHelpfulText = function() {
       'It will take ' + info.stepsPerEpoch + ' steps to perform one full cycle through your training data. This is called an epoch.';
 
   document.getElementById('stNumEpochs').textContent =
-      'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.'
+      'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.';
+
+  document.getElementById('stTimeInfo').textContent =
+      'This training job will take approximately ' + info.estimateMinutes +
+      ' minutes, but will be stopped if it runs longer than ' + info.maxMinutes + ' minutes.';
 };
 
 fmltc.StartTrainingDialog.prototype.getTrainingInfo = function() {
@@ -135,13 +139,17 @@ fmltc.StartTrainingDialog.prototype.getTrainingInfo = function() {
   const stepsPerEpoch = Math.ceil(trainFrameCount / batchSize);
   const numSteps = this.numTrainingStepsInput.value;
   const numEpochs = Math.floor(numSteps * batchSize / trainFrameCount);
+  const estimateMinutes = Math.ceil(numSteps / 60);
+  const maxMinutes = this.maxRunningMinutesInput.value;
   return {
     'oneDataset': oneDataset,
     'trainFrameCount': trainFrameCount,
     'batchSize': batchSize,
     'stepsPerEpoch': stepsPerEpoch,
     'numEpochs': numEpochs,
     'numSteps': numSteps,
+    'estimateMinutes': estimateMinutes,
+    'maxMinutes': maxMinutes,
   };
 };
 
@@ -163,6 +171,7 @@ fmltc.StartTrainingDialog.prototype.advanced_onclick = function() {
 
 fmltc.StartTrainingDialog.prototype.maxRunningMinutesInput_onchange = function() {
   this.maxRunningMinutesInput.value = Math.max(this.maxRunningMinutesInput.min, Math.min(this.maxRunningMinutesInput.value, this.maxRunningMinutesInput.max));
+  this.updateHelpfulText();
   this.updateStartButton();
 };
 

server/src/js/trainMoreDialog.js

@@ -150,7 +150,11 @@ fmltc.TrainMoreDialog.prototype.updateHelpfulText = function() {
       'It will take ' + info.stepsPerEpoch + ' steps to perform one full cycle through your training data. This is called an epoch.';
 
   document.getElementById('tmNumEpochs').textContent =
-      'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.'
+      'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.';
+
+  document.getElementById('tmTimeInfo').textContent =
+      'This training job will take approximately ' + info.estimateMinutes +
+      ' minutes, but will be stopped if it runs longer than ' + info.maxMinutes + ' minutes.';
 };
 
 fmltc.TrainMoreDialog.prototype.getTrainingInfo = function() {
@@ -167,13 +171,17 @@ fmltc.TrainMoreDialog.prototype.getTrainingInfo = function() {
   const stepsPerEpoch = Math.ceil(trainFrameCount / batchSize);
   const numSteps = this.numTrainingStepsInput.value;
   const numEpochs = Math.floor(numSteps * batchSize / trainFrameCount);
+  const estimateMinutes = Math.ceil(numSteps / 60);
+  const maxMinutes = this.maxRunningMinutesInput.value;
   return {
     'oneDataset': oneDataset,
     'trainFrameCount': trainFrameCount,
     'batchSize': batchSize,
     'stepsPerEpoch': stepsPerEpoch,
     'numEpochs': numEpochs,
     'numSteps': numSteps,
+    'estimateMinutes': estimateMinutes,
+    'maxMinutes': maxMinutes,
   };
 };
 
@@ -195,6 +203,7 @@ fmltc.TrainMoreDialog.prototype.advanced_onclick = function() {
 
 fmltc.TrainMoreDialog.prototype.maxRunningMinutesInput_onchange = function() {
   this.maxRunningMinutesInput.value = Math.max(this.maxRunningMinutesInput.min, Math.min(this.maxRunningMinutesInput.value, this.maxRunningMinutesInput.max));
+  this.updateHelpfulText();
   this.updateStartButton();
 };
 

server/templates/root.html

@@ -430,6 +430,8 @@ <h5 class="modal-title">Start Training</h5>
                 <div class="text-14" id="stEpochInfo"></div>
                 <div class="text-14" id="stNumEpochs"></div>
                 <br>
+                <div class="text-14" id="stTimeInfo"></div>
+                <br>
                 <button id="stStartButton" class="btn btn-secondary">Start Training</button>
                 <br>
                 <div id="stInProgressDiv" class="text-16" style="display: none;">Submitting job request...</div>
@@ -501,6 +503,8 @@ <h5 class="modal-title">Train More</h5>
                 <div class="text-14" id="tmEpochInfo"></div>
                 <div class="text-14" id="tmNumEpochs"></div>
                 <br>
+                <div class="text-14" id="tmTimeInfo"></div>
+                <br>
                 <button id="tmStartButton" class="btn btn-secondary">Start Training</button>
                 <br>
                 <div id="tmInProgressDiv" class="text-16" style="display: none;">Submitting job request...</div>