Skip to content
This repository was archived by the owner on Sep 23, 2024. It is now read-only.

Commit 07ca935

Browse files
lizlooneylizlooney
authored
Merge pull request #242 from FIRST-Tech-Challenge/pr_advanced_section
Updated Start Training and Train More dialog boxes
2 parents 52e4447 + d7be35a commit 07ca935

File tree

4 files changed

+77
-9
lines changed

4 files changed

+77
-9
lines changed

‎server/src/js/startTrainingDialog.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ fmltc.StartTrainingDialog = function(
4141
this.backdrop = document.getElementsByClassName('modal-backdrop')[0];
4242
this.xButton = document.getElementById('stXButton');
4343
this.closeButton = document.getElementById('stCloseButton');
44+
this.advanced = document.getElementById('stAdvanced');
45+
this.advancedUpDown = document.getElementById('stAdvancedUpDown');
46+
this.advancedDiv = document.getElementById('stAdvancedDiv');
4447
this.maxRunningMinutesInput = document.getElementById('stMaxRunningMinutesInput');
4548
this.remainingTrainingMinutesSpan = document.getElementById('stRemainingTrainingMinutesSpan');
4649
this.startingModelSelect = document.getElementById('stStartingModelSelect');
@@ -53,9 +56,11 @@ fmltc.StartTrainingDialog = function(
5356

5457
this.startTrainingInProgress = false;
5558

59+
this.advancedDiv.style.display = 'none';
60+
this.advancedUpDown.textContent = '▼'; // down
5661
this.maxRunningMinutesInput.min = Math.min(10, remainingTrainingMinutes);
5762
this.maxRunningMinutesInput.max = remainingTrainingMinutes;
58-
this.maxRunningMinutesInput.value = Math.min(60, remainingTrainingMinutes);
63+
this.maxRunningMinutesInput.value = remainingTrainingMinutes;
5964

6065
if (this.startingModelSelect.options.length == 0) {
6166
const startingModels = this.util.modelTrainerData['starting_models'];
@@ -82,6 +87,7 @@ fmltc.StartTrainingDialog = function(
8287
this.xButton.onclick = this.closeButton.onclick = this.closeButton_onclick.bind(this);
8388
this.startingModelSelect.onchange = this.startingModelSelect_onchange.bind(this);
8489
this.numTrainingStepsInput.onchange = this.numTrainingStepsInput_onchange.bind(this);
90+
this.advanced.onclick = this.advanced_onclick.bind(this);
8591
this.maxRunningMinutesInput.onchange = this.maxRunningMinutesInput_onchange.bind(this);
8692
this.descriptionInput.oninput = this.descriptionInput_oninput.bind(this);
8793
this.startButton.onclick = this.startButton_onclick.bind(this);
@@ -118,7 +124,11 @@ fmltc.StartTrainingDialog.prototype.updateHelpfulText = function() {
118124
'It will take ' + info.stepsPerEpoch + ' steps to perform one full cycle through your training data. This is called an epoch.';
119125

120126
document.getElementById('stNumEpochs').textContent =
121-
'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.'
127+
'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.';
128+
129+
document.getElementById('stTimeInfo').textContent =
130+
'This training job will take approximately ' + info.estimateMinutes +
131+
' minutes, but will be stopped if it runs longer than ' + info.maxMinutes + ' minutes.';
122132
};
123133

124134
fmltc.StartTrainingDialog.prototype.getTrainingInfo = function() {
@@ -129,13 +139,17 @@ fmltc.StartTrainingDialog.prototype.getTrainingInfo = function() {
129139
const stepsPerEpoch = Math.ceil(trainFrameCount / batchSize);
130140
const numSteps = this.numTrainingStepsInput.value;
131141
const numEpochs = Math.floor(numSteps * batchSize / trainFrameCount);
142+
const estimateMinutes = Math.ceil(numSteps / 60);
143+
const maxMinutes = this.maxRunningMinutesInput.value;
132144
return {
133145
'oneDataset': oneDataset,
134146
'trainFrameCount': trainFrameCount,
135147
'batchSize': batchSize,
136148
'stepsPerEpoch': stepsPerEpoch,
137149
'numEpochs': numEpochs,
138150
'numSteps': numSteps,
151+
'estimateMinutes': estimateMinutes,
152+
'maxMinutes': maxMinutes,
139153
};
140154
};
141155

@@ -145,8 +159,19 @@ fmltc.StartTrainingDialog.prototype.numTrainingStepsInput_onchange = function()
145159
this.updateStartButton();
146160
};
147161

162+
fmltc.StartTrainingDialog.prototype.advanced_onclick = function() {
163+
if (this.advancedDiv.style.display == 'none') {
164+
this.advancedDiv.style.display = 'block';
165+
this.advancedUpDown.textContent = '▲'; // up
166+
} else {
167+
this.advancedDiv.style.display = 'none';
168+
this.advancedUpDown.textContent = '▼'; // down
169+
}
170+
};
171+
148172
fmltc.StartTrainingDialog.prototype.maxRunningMinutesInput_onchange = function() {
149173
this.maxRunningMinutesInput.value = Math.max(this.maxRunningMinutesInput.min, Math.min(this.maxRunningMinutesInput.value, this.maxRunningMinutesInput.max));
174+
this.updateHelpfulText();
150175
this.updateStartButton();
151176
};
152177

‎server/src/js/trainMoreDialog.js‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ fmltc.TrainMoreDialog = function(
4242
this.backdrop = document.getElementsByClassName('modal-backdrop')[0];
4343
this.xButton = document.getElementById('tmXButton');
4444
this.closeButton = document.getElementById('tmCloseButton');
45+
this.advanced = document.getElementById('tmAdvanced');
46+
this.advancedUpDown = document.getElementById('tmAdvancedUpDown');
47+
this.advancedDiv = document.getElementById('tmAdvancedDiv');
4548
this.maxRunningMinutesInput = document.getElementById('tmMaxRunningMinutesInput');
4649
this.remainingTrainingMinutesSpan = document.getElementById('tmRemainingTrainingMinutesSpan');
4750
this.numTrainingStepsInput = document.getElementById('tmNumTrainingStepsInput');
@@ -57,14 +60,16 @@ fmltc.TrainMoreDialog = function(
5760

5861
this.startTrainingInProgress = false;
5962

63+
this.advancedDiv.style.display = 'none';
64+
this.advancedUpDown.textContent = '▼'; // down
6065
this.maxRunningMinutesInput.min = Math.min(10, remainingTrainingMinutes);
6166
this.maxRunningMinutesInput.max = remainingTrainingMinutes;
62-
this.maxRunningMinutesInput.value = Math.min(60, remainingTrainingMinutes);
67+
this.maxRunningMinutesInput.value = remainingTrainingMinutes;
6368

6469
this.numTrainingStepsInput.min = this.util.modelTrainerData['min_training_steps'];
6570
this.numTrainingStepsInput.max = this.util.modelTrainerData['max_training_steps'];
6671
this.numTrainingStepsInput.value = this.util.modelTrainerData['default_training_steps'];
67-
this.updateHelpfulText()
72+
this.updateHelpfulText();
6873

6974
// Create checkboxes for the datasets. Omit the datasets that are already part of this model.
7075
this.datasetsHeaderDiv.style.display = 'none';
@@ -99,6 +104,7 @@ fmltc.TrainMoreDialog = function(
99104

100105
this.xButton.onclick = this.closeButton.onclick = this.closeButton_onclick.bind(this);
101106
this.numTrainingStepsInput.onchange = this.numTrainingStepsInput_onchange.bind(this);
107+
this.advanced.onclick = this.advanced_onclick.bind(this);
102108
this.maxRunningMinutesInput.onchange = this.maxRunningMinutesInput_onchange.bind(this);
103109
this.descriptionInput.oninput = this.descriptionInput_oninput.bind(this);
104110
this.startButton.onclick = this.startButton_onclick.bind(this);
@@ -144,7 +150,11 @@ fmltc.TrainMoreDialog.prototype.updateHelpfulText = function() {
144150
'It will take ' + info.stepsPerEpoch + ' steps to perform one full cycle through your training data. This is called an epoch.';
145151

146152
document.getElementById('tmNumEpochs').textContent =
147-
'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.'
153+
'Training for ' + info.numSteps + ' steps will perform ' + info.numEpochs + ' epochs.';
154+
155+
document.getElementById('tmTimeInfo').textContent =
156+
'This training job will take approximately ' + info.estimateMinutes +
157+
' minutes, but will be stopped if it runs longer than ' + info.maxMinutes + ' minutes.';
148158
};
149159

150160
fmltc.TrainMoreDialog.prototype.getTrainingInfo = function() {
@@ -161,13 +171,17 @@ fmltc.TrainMoreDialog.prototype.getTrainingInfo = function() {
161171
const stepsPerEpoch = Math.ceil(trainFrameCount / batchSize);
162172
const numSteps = this.numTrainingStepsInput.value;
163173
const numEpochs = Math.floor(numSteps * batchSize / trainFrameCount);
174+
const estimateMinutes = Math.ceil(numSteps / 60);
175+
const maxMinutes = this.maxRunningMinutesInput.value;
164176
return {
165177
'oneDataset': oneDataset,
166178
'trainFrameCount': trainFrameCount,
167179
'batchSize': batchSize,
168180
'stepsPerEpoch': stepsPerEpoch,
169181
'numEpochs': numEpochs,
170182
'numSteps': numSteps,
183+
'estimateMinutes': estimateMinutes,
184+
'maxMinutes': maxMinutes,
171185
};
172186
};
173187

@@ -177,8 +191,19 @@ fmltc.TrainMoreDialog.prototype.numTrainingStepsInput_onchange = function() {
177191
this.updateStartButton();
178192
};
179193

194+
fmltc.TrainMoreDialog.prototype.advanced_onclick = function() {
195+
if (this.advancedDiv.style.display == 'none') {
196+
this.advancedDiv.style.display = 'block';
197+
this.advancedUpDown.textContent = '▲'; // up
198+
} else {
199+
this.advancedDiv.style.display = 'none';
200+
this.advancedUpDown.textContent = '▼'; // down
201+
}
202+
};
203+
180204
fmltc.TrainMoreDialog.prototype.maxRunningMinutesInput_onchange = function() {
181205
this.maxRunningMinutesInput.value = Math.max(this.maxRunningMinutesInput.min, Math.min(this.maxRunningMinutesInput.value, this.maxRunningMinutesInput.max));
206+
this.updateHelpfulText();
182207
this.updateStartButton();
183208
};
184209

‎server/static/css/styles.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,10 @@ body {
5252
cursor: wait;
5353
}
5454

55+
.pointerCursor {
56+
cursor: pointer;
57+
}
58+
5559
.rightText {
5660
text-align: right;
5761
}

‎server/templates/root.html‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -399,6 +399,10 @@ <h5 class="modal-title">Start Training</h5>
399399
</tr>
400400
</table>
401401
<br>
402+
<div class="pointerCursor">
403+
<span id="stAdvanced" class="text-14">Advanced&nbsp;<span id="stAdvancedUpDown">&#x25BC;</span></span>
404+
</div>
405+
<div id="stAdvancedDiv" style="display: none; padding-left: 20px;">
402406
<table>
403407
<tr>
404408
<td>
@@ -410,13 +414,14 @@ <h5 class="modal-title">Start Training</h5>
410414
</tr>
411415
<tr>
412416
<td colspan="2">
413-
<div class="text-14" style="padding-left: 20px">
417+
<div class="text-14">
414418
Your team has <span id="stRemainingTrainingMinutesSpan"></span> minutes of training time remaining.
415419
</div>
416420
</td>
417421
</tr>
418422
</table>
419-
<br>
423+
</div>
424+
<hr>
420425
<label for="stDescriptionInput">Description:</label><br>
421426
<input type="text" maxlength="30" id="stDescriptionInput" class="form-control" style="width: 100%">
422427
<br>
@@ -425,6 +430,8 @@ <h5 class="modal-title">Start Training</h5>
425430
<div class="text-14" id="stEpochInfo"></div>
426431
<div class="text-14" id="stNumEpochs"></div>
427432
<br>
433+
<div class="text-14" id="stTimeInfo"></div>
434+
<br>
428435
<button id="stStartButton" class="btn btn-secondary">Start Training</button>
429436
<br>
430437
<div id="stInProgressDiv" class="text-16" style="display: none;">Submitting job request...</div>
@@ -465,6 +472,10 @@ <h5 class="modal-title">Train More</h5>
465472
</tr>
466473
</table>
467474
<br>
475+
<div class="pointerCursor">
476+
<span id="tmAdvanced" class="text-14">Advanced&nbsp;<span id="tmAdvancedUpDown">&#x25BC;</span></span>
477+
</div>
478+
<div id="tmAdvancedDiv" style="display: none; padding-left: 20px;">
468479
<table>
469480
<tr>
470481
<td>
@@ -476,13 +487,14 @@ <h5 class="modal-title">Train More</h5>
476487
</tr>
477488
<tr>
478489
<td colspan="2">
479-
<div class="text-14" style="padding-left: 20px">
490+
<div class="text-14">
480491
Your team has <span id="tmRemainingTrainingMinutesSpan"></span> minutes of training time remaining.
481492
</div>
482493
</td>
483494
</tr>
484495
</table>
485-
<br>
496+
</div>
497+
<hr>
486498
<label for="tmDescriptionInput">Description:</label><br>
487499
<input type="text" maxlength="30" id="tmDescriptionInput" class="form-control" style="width: 100%">
488500
<br>
@@ -491,6 +503,8 @@ <h5 class="modal-title">Train More</h5>
491503
<div class="text-14" id="tmEpochInfo"></div>
492504
<div class="text-14" id="tmNumEpochs"></div>
493505
<br>
506+
<div class="text-14" id="tmTimeInfo"></div>
507+
<br>
494508
<button id="tmStartButton" class="btn btn-secondary">Start Training</button>
495509
<br>
496510
<div id="tmInProgressDiv" class="text-16" style="display: none;">Submitting job request...</div>

0 commit comments

Comments
 (0)