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

Commit 92bb84c

Browse files
lizlooneylizlooney
committed
In Start Training and Train More dialogs, put the Maximum Training Time into an expandable advanced section which is initially collapsed.
Set Maximum Training Time to the remaining time that the team has.
1 parent 53ef4cb commit 92bb84c

File tree

4 files changed

+53
-7
lines changed

4 files changed

+53
-7
lines changed

‎server/src/js/startTrainingDialog.js‎

Lines changed: 17 additions & 1 deletion
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);
@@ -145,6 +151,16 @@ fmltc.StartTrainingDialog.prototype.numTrainingStepsInput_onchange = function()
145151
this.updateStartButton();
146152
};
147153

154+
fmltc.StartTrainingDialog.prototype.advanced_onclick = function() {
155+
if (this.advancedDiv.style.display == 'none') {
156+
this.advancedDiv.style.display = 'block';
157+
this.advancedUpDown.textContent = '▲'; // up
158+
} else {
159+
this.advancedDiv.style.display = 'none';
160+
this.advancedUpDown.textContent = '▼'; // down
161+
}
162+
};
163+
148164
fmltc.StartTrainingDialog.prototype.maxRunningMinutesInput_onchange = function() {
149165
this.maxRunningMinutesInput.value = Math.max(this.maxRunningMinutesInput.min, Math.min(this.maxRunningMinutesInput.value, this.maxRunningMinutesInput.max));
150166
this.updateStartButton();

‎server/src/js/trainMoreDialog.js‎

Lines changed: 18 additions & 2 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);
@@ -177,6 +183,16 @@ fmltc.TrainMoreDialog.prototype.numTrainingStepsInput_onchange = function() {
177183
this.updateStartButton();
178184
};
179185

186+
fmltc.TrainMoreDialog.prototype.advanced_onclick = function() {
187+
if (this.advancedDiv.style.display == 'none') {
188+
this.advancedDiv.style.display = 'block';
189+
this.advancedUpDown.textContent = '▲'; // up
190+
} else {
191+
this.advancedDiv.style.display = 'none';
192+
this.advancedUpDown.textContent = '▼'; // down
193+
}
194+
};
195+
180196
fmltc.TrainMoreDialog.prototype.maxRunningMinutesInput_onchange = function() {
181197
this.maxRunningMinutesInput.value = Math.max(this.maxRunningMinutesInput.min, Math.min(this.maxRunningMinutesInput.value, this.maxRunningMinutesInput.max));
182198
this.updateStartButton();

‎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: 14 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>
@@ -465,6 +470,10 @@ <h5 class="modal-title">Train More</h5>
465470
</tr>
466471
</table>
467472
<br>
473+
<div class="pointerCursor">
474+
<span id="tmAdvanced" class="text-14">Advanced&nbsp;<span id="tmAdvancedUpDown">&#x25BC;</span></span>
475+
</div>
476+
<div id="tmAdvancedDiv" style="display: none; padding-left: 20px;">
468477
<table>
469478
<tr>
470479
<td>
@@ -476,13 +485,14 @@ <h5 class="modal-title">Train More</h5>
476485
</tr>
477486
<tr>
478487
<td colspan="2">
479-
<div class="text-14" style="padding-left: 20px">
488+
<div class="text-14">
480489
Your team has <span id="tmRemainingTrainingMinutesSpan"></span> minutes of training time remaining.
481490
</div>
482491
</td>
483492
</tr>
484493
</table>
485-
<br>
494+
</div>
495+
<hr>
486496
<label for="tmDescriptionInput">Description:</label><br>
487497
<input type="text" maxlength="30" id="tmDescriptionInput" class="form-control" style="width: 100%">
488498
<br>

0 commit comments

Comments
 (0)