Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Population based training UI #1862

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions cmd/new-ui/v1beta1/main.go
Original file line number Diff line number Diff line change
@@ -59,6 +59,7 @@ func main() {

http.HandleFunc("/katib/fetch_hp_job_info/", kuh.FetchHPJobInfo)
http.HandleFunc("/katib/fetch_hp_job_trial_info/", kuh.FetchHPJobTrialInfo)
http.HandleFunc("/katib/fetch_hp_job_label_info/", kuh.FetchHPJobLabelInfo)
http.HandleFunc("/katib/fetch_nas_job_info/", kuh.FetchNASJobInfo)

http.HandleFunc("/katib/fetch_trial_templates/", kuh.FetchTrialTemplates)
Original file line number Diff line number Diff line change
@@ -242,6 +242,29 @@ export const DartsSettings: AlgorithmSetting[] = [
},
];

export const PbtSettings: AlgorithmSetting[] = [
{
name: 'suggestion_trial_dir',
value: '/var/log/katib/checkpoints/',
type: AlgorithmSettingType.STRING,
},
{
name: 'n_population',
value: 40,
type: AlgorithmSettingType.INTEGER,
},
{
name: 'resample_probability',
value: null,
type: AlgorithmSettingType.FLOAT,
},
{
name: 'truncation_threshold',
value: 0.2,
type: AlgorithmSettingType.FLOAT,
},
];

export const EarlyStoppingSettings: AlgorithmSetting[] = [
{
name: 'min_trials_required',
@@ -271,4 +294,5 @@ export const AlgorithmSettingsMap: { [key: string]: AlgorithmSetting[] } = {
[AlgorithmsEnum.SOBOL]: SOBOLSettings,
[AlgorithmsEnum.ENAS]: ENASSettings,
[AlgorithmsEnum.DARTS]: DartsSettings,
[AlgorithmsEnum.PBT]: PbtSettings,
};
Original file line number Diff line number Diff line change
@@ -12,6 +12,7 @@ export const AlgorithmNames = {
[AlgorithmsEnum.MULTIVARIATE_TPE]: 'Multivariate Tree of Parzen Estimators',
[AlgorithmsEnum.CMAES]: 'Covariance Matrix Adaptation: Evolution Strategy',
[AlgorithmsEnum.SOBOL]: 'Sobol Quasirandom Sequence',
[AlgorithmsEnum.PBT]: 'Population Based Training',
};

export const NasAlgorithmNames = {
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ export enum AlgorithmsEnum {
SOBOL = 'sobol',
ENAS = 'enas',
DARTS = 'darts',
PBT = 'pbt',
}

export enum EarlyStoppingAlgorithmsEnum {
Original file line number Diff line number Diff line change
@@ -60,6 +60,13 @@
[experimentJson]="experimentDetails"
></app-experiment-yaml>
</mat-tab>
<mat-tab label="PBT">
<app-experiment-pbt-tab
[experiment]="experimentDetails"
[labelCsv]="labelCsv"
[experimentTrialsCsv]="experimentTrialsCsv"
></app-experiment-pbt-tab>
</mat-tab>
</mat-tab-group>
</div>
</ng-template>
Original file line number Diff line number Diff line change
@@ -30,6 +30,7 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
columns: string[] = [];
details: string[][] = [];
experimentTrialsCsv: string;
labelCsv: string;
hoveredTrial: number;
experimentDetails: ExperimentK8s;
showGraph: boolean;
@@ -94,6 +95,11 @@ export class ExperimentDetailsComponent implements OnInit, OnDestroy {
this.details = this.parseTrialsDetails(data.details);
this.showGraph = true;
});
this.backendService
.getExperimentLabelInfo(this.name, this.namespace)
.subscribe(response => {
this.labelCsv = response;
});
this.backendService
.getExperiment(this.name, this.namespace)
.subscribe((response: ExperimentK8s) => {
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ import { ExperimentOverviewModule } from './overview/experiment-overview.module'
import { ExperimentDetailsTabModule } from './details/experiment-details-tab.module';
import { TrialsGraphModule } from './trials-graph/trials-graph.module';
import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
import { PbtTabModule } from './pbt/pbt-tab-loader.module';

@NgModule({
declarations: [ExperimentDetailsComponent],
@@ -33,6 +34,7 @@ import { ExperimentYamlModule } from './yaml/experiment-yaml.module';
MatProgressSpinnerModule,
ExperimentYamlModule,
TitleActionsToolbarModule,
PbtTabModule,
],
exports: [ExperimentDetailsComponent],
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatCheckboxModule } from '@angular/material/checkbox';

import { PbtTabComponent } from './pbt-tab.component';

@NgModule({
declarations: [PbtTabComponent],
imports: [
CommonModule,
FormsModule,
MatFormFieldModule,
MatSelectModule,
MatCheckboxModule,
],
exports: [PbtTabComponent],
})
export class PbtTabModule {}
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<div class="pbt-wrapper">
<div class="pbt-options-wrapper">
<mat-form-field appearance="fill" class="pbt-option">
<mat-label>Y-Axis</mat-label>
<mat-select
[(ngModel)]="selectedName"
(ngModelChange)="onDropdownChange()"
>
<mat-option *ngFor="let name of selectableNames" [value]="name">
{{ name }}
</mat-option>
</mat-select>
</mat-form-field>

<mat-checkbox [(ngModel)]="displayTrace" (ngModelChange)="onTraceChange()"
>Display Seed Traces</mat-checkbox
>
</div>

<div #pbtGraph id="pbt-graph" class="d3-tab-graph"></div>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
:host {
display: block;
}

.pbt-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.pbt-options-wrapper {
display: flex;
align-items: center;
flex-direction: row;
}

.pbt-option {
margin: 10px;
}

.d3-tab-graph {
width: 400px;
text-align: center;

@media (min-width: 768px) {
width: 700px;
}

@media (min-width: 1024px) {
width: 1000px;
}

@media (min-width: 1400px) {
width: 1300px;
}

@media (min-width: 1650px) {
width: 1600px;
}

@media (min-width: 2000px) {
width: 1900px;
}

height: 600px;
}
Loading