diff options
| -rw-r--r-- | frontend/package-lock.json | 44 | ||||
| -rw-r--r-- | frontend/package.json | 4 | ||||
| -rw-r--r-- | frontend/src/app/_elements/form-model/form-model.component.css | 3 | ||||
| -rw-r--r-- | frontend/src/app/_elements/form-model/form-model.component.html | 140 | ||||
| -rw-r--r-- | frontend/src/app/_elements/form-model/form-model.component.ts | 45 | ||||
| -rw-r--r-- | frontend/src/app/_services/auth.service.ts | 3 | ||||
| -rw-r--r-- | frontend/src/app/material.module.ts | 117 |
7 files changed, 318 insertions, 38 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 488653db..22756c36 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,13 +10,13 @@ "hasInstallScript": true, "dependencies": { "@angular/animations": "~13.2.0", - "@angular/cdk": "^13.2.6", + "@angular/cdk": "^13.3.4", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/localize": "~13.2.0", - "@angular/material": "^13.2.6", + "@angular/material": "^13.3.4", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", @@ -351,9 +351,9 @@ "dev": true }, "node_modules/@angular/animations": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.6.tgz", - "integrity": "sha512-DrjpKo68uR3lSLQQXosoTCbjKQS6IKRCpR14E2t8fo0AX8i2hkB8je4SrhdCyB7FgFN7l2kgUYo4Qa8+BOB+aA==", + "version": "13.2.7", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.7.tgz", + "integrity": "sha512-FthGqRPQ1AOcOx/NIW65xeFYkQZJ7PpXcX59Kt+qkoUzngAQEY+UUpOteG52tmL0iZSVwOCjtxRFi9w4heVgEg==", "dependencies": { "tslib": "^2.3.0" }, @@ -361,13 +361,13 @@ "node": "^12.20.0 || ^14.15.0 || >=16.10.0" }, "peerDependencies": { - "@angular/core": "13.2.6" + "@angular/core": "13.2.7" } }, "node_modules/@angular/cdk": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz", - "integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.4.tgz", + "integrity": "sha512-im4LKxJaIuqFVzmtf650PoiYsn/SZlvBV2zEgzusK8HwQ24C1Lya7NQSApwl8k43h4eKO1OvUKBjqL5uDgEQag==", "dependencies": { "tslib": "^2.3.0" }, @@ -670,15 +670,15 @@ } }, "node_modules/@angular/material": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz", - "integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.4.tgz", + "integrity": "sha512-jK9rWmBaPrE+3re6uIdyvG5DCzc47VUvnP1DqblNnpaa8GCKllb1cFRGqa5GPYB1/96d3wO+RPwzhC06qqV+yw==", "dependencies": { "tslib": "^2.3.0" }, "peerDependencies": { "@angular/animations": "^13.0.0 || ^14.0.0-0", - "@angular/cdk": "13.2.6", + "@angular/cdk": "13.3.4", "@angular/common": "^13.0.0 || ^14.0.0-0", "@angular/core": "^13.0.0 || ^14.0.0-0", "@angular/forms": "^13.0.0 || ^14.0.0-0", @@ -12087,17 +12087,17 @@ } }, "@angular/animations": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.6.tgz", - "integrity": "sha512-DrjpKo68uR3lSLQQXosoTCbjKQS6IKRCpR14E2t8fo0AX8i2hkB8je4SrhdCyB7FgFN7l2kgUYo4Qa8+BOB+aA==", + "version": "13.2.7", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.2.7.tgz", + "integrity": "sha512-FthGqRPQ1AOcOx/NIW65xeFYkQZJ7PpXcX59Kt+qkoUzngAQEY+UUpOteG52tmL0iZSVwOCjtxRFi9w4heVgEg==", "requires": { "tslib": "^2.3.0" } }, "@angular/cdk": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.2.6.tgz", - "integrity": "sha512-epuXmaHqfukwPsYvIksbuHLXDtb6GALV2Vgv6W2asj4TorD584CeQTs0EcdPGmCzhGUYI8U8QV63WOxu9YFcNA==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.4.tgz", + "integrity": "sha512-im4LKxJaIuqFVzmtf650PoiYsn/SZlvBV2zEgzusK8HwQ24C1Lya7NQSApwl8k43h4eKO1OvUKBjqL5uDgEQag==", "requires": { "parse5": "^5.0.0", "tslib": "^2.3.0" @@ -12304,9 +12304,9 @@ } }, "@angular/material": { - "version": "13.2.6", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.2.6.tgz", - "integrity": "sha512-/h5wa/tXE0DMIIEQX+rozFkUWHYUWg1Xf1R2tXUFLslLQ0KRCGyNo225Sv/1wrxXHxfrML787lA9ex4p90Feqw==", + "version": "13.3.4", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-13.3.4.tgz", + "integrity": "sha512-jK9rWmBaPrE+3re6uIdyvG5DCzc47VUvnP1DqblNnpaa8GCKllb1cFRGqa5GPYB1/96d3wO+RPwzhC06qqV+yw==", "requires": { "tslib": "^2.3.0" } diff --git a/frontend/package.json b/frontend/package.json index c02a1fb0..5d9d677d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,13 +13,13 @@ "private": true, "dependencies": { "@angular/animations": "~13.2.0", - "@angular/cdk": "^13.2.6", + "@angular/cdk": "^13.3.4", "@angular/common": "~13.2.0", "@angular/compiler": "~13.2.0", "@angular/core": "~13.2.0", "@angular/forms": "~13.2.0", "@angular/localize": "~13.2.0", - "@angular/material": "^13.2.6", + "@angular/material": "^13.3.4", "@angular/platform-browser": "~13.2.0", "@angular/platform-browser-dynamic": "~13.2.0", "@angular/router": "~13.2.0", diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index e69de29b..9340fed5 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -0,0 +1,3 @@ +*{ + color: var(--offwhite) !important; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 8f284c46..5db2cb49 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1 +1,139 @@ -<p>form-model works!</p> +<div class="container"> + <div class="row"> + <div class="col-sm"> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Naziv</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option label="--select something --"></option> + <option value="saab">Saab</option> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Tip problema</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option + *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" + [value]="option"> + {{ optionName }} + </option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + </div> + <div class="col-sm"> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Optimizacija</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option + *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" + [value]="option"> + {{ optionName }} + </option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Learning rate</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option label="--select something --"></option> + <option value="saab">Saab</option> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + </div> + <div class="col-sm"> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Broj epoha</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option label="--select something --"></option> + <option value="saab">Saab</option> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Broj uzoraka po iteraciji</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option label="--select something --"></option> + <option value="saab">Saab</option> + <option value="mercedes">Mercedes</option> + <option value="audi">Audi</option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + </div> + <div class="col-sm"> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Funkcija aktivacije izlaznog sloja</mat-label> + <select matNativeControl required [formControl]="selectFormControl" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <option + *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + <div class="row"> + <mat-form-field appearance="fill"> + <mat-label>Funkcija troška</mat-label> + <select matNativeControl required [formControl]="selectFormControl"> + <option + *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" + [value]="option"> + {{ optionName }} + </option> + </select> + <mat-error *ngIf="selectFormControl.hasError('required')"> + Obavezno polje + </mat-error> + </mat-form-field> + </div> + </div> + </div><!--kraj unosa parametara--> + + <div class="col-1"> + <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()"> + </div> + <div class="m-5"> + <app-graph [model]="newModel" [inputCols]="4"></app-graph> + <div class="col-1"> + <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()"> + </div> + </div> + + </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index 2ff8c605..6f795161 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -1,15 +1,54 @@ -import { Component, OnInit } from '@angular/core'; - +import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core'; +import {FormControl, Validators} from '@angular/forms'; +import Shared from 'src/app/Shared'; +import Experiment from 'src/app/_data/Experiment'; +import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; +import { GraphComponent } from '../graph/graph.component'; @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', styleUrls: ['./form-model.component.css'] }) export class FormModelComponent implements OnInit { + @ViewChild(GraphComponent) graph!: GraphComponent; + @Input() forExperiment?: Experiment; + @Output() selectedModelChangeEvent = new EventEmitter<Model>(); constructor() { } - + ngOnInit(): void { } + animalControl = new FormControl('', Validators.required); + selectFormControl = new FormControl('', Validators.required); + /*animals: Animal[] = [ + {name: 'Dog', sound: 'Woof!'}, + {name: 'Cat', sound: 'Meow!'}, + {name: 'Cow', sound: 'Moo!'}, + {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'}, + ]; + */ + newModel: Model = new Model(); + myModels?: Model[]; + selectedModel?: Model; + + ProblemType = ProblemType; + ActivationFunction = ActivationFunction; + metrics: any = Metrics; + LossFunction = LossFunction; + Optimizer = Optimizer; + Object = Object; + document = document; + shared = Shared; + + term: string = ""; + selectedMetrics = []; + lossFunction: any = LossFunction; + showMyModels: boolean = true; + + batchSizePower: number = 2; + + updateGraph() { + this.graph.update(); + } } diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts index b7d28d77..dd46615d 100644 --- a/frontend/src/app/_services/auth.service.ts +++ b/frontend/src/app/_services/auth.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { EventEmitter, Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; @@ -13,6 +13,7 @@ const jwtHelper = new JwtHelperService(); export class AuthService { shared = shared; + public loggedInEvent: EventEmitter<boolean> = new EventEmitter(); constructor(private http: HttpClient, private cookie: CookieService) { } diff --git a/frontend/src/app/material.module.ts b/frontend/src/app/material.module.ts index 4cee3146..baaae58b 100644 --- a/frontend/src/app/material.module.ts +++ b/frontend/src/app/material.module.ts @@ -1,23 +1,122 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { MatDialogModule } from '@angular/material/dialog'; -import { MatButtonModule } from '@angular/material/button'; +// Material Form Controls +import { MatAutocompleteModule } from '@angular/material/autocomplete'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatDatepickerModule } from '@angular/material/datepicker'; import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { MatInputModule } from '@angular/material/input'; -import { MatCheckboxModule } from '@angular/material/checkbox'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatSelectModule } from '@angular/material/select'; +import { MatSliderModule } from '@angular/material/slider'; +import { MatSlideToggleModule } from '@angular/material/slide-toggle'; +// Material Navigation +import { MatMenuModule } from '@angular/material/menu'; +import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatToolbarModule } from '@angular/material/toolbar'; +// Material Layout +import { MatCardModule } from '@angular/material/card'; +import { MatDividerModule } from '@angular/material/divider'; +import { MatExpansionModule } from '@angular/material/expansion'; +import { MatGridListModule } from '@angular/material/grid-list'; +import { MatListModule } from '@angular/material/list'; +import { MatStepperModule } from '@angular/material/stepper'; +import { MatTabsModule } from '@angular/material/tabs'; +import { MatTreeModule } from '@angular/material/tree'; +// Material Buttons & Indicators +import { MatButtonModule } from '@angular/material/button'; +import { MatButtonToggleModule } from '@angular/material/button-toggle'; +import { MatBadgeModule } from '@angular/material/badge'; +import { MatChipsModule } from '@angular/material/chips'; import { MatIconModule } from '@angular/material/icon'; - +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { MatProgressBarModule } from '@angular/material/progress-bar'; +import { MatRippleModule } from '@angular/material/core'; +// Material Popups & Modals +import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; +import { MatDialogModule } from '@angular/material/dialog'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatTooltipModule } from '@angular/material/tooltip'; +// Material Data tables +import { MatPaginatorModule } from '@angular/material/paginator'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; @NgModule({ - exports: [ + declarations: [], + imports: [ CommonModule, - MatDialogModule, - MatButtonModule, + MatAutocompleteModule, + MatCheckboxModule, + MatDatepickerModule, MatFormFieldModule, MatInputModule, + MatRadioModule, + MatSelectModule, + MatSliderModule, + MatSlideToggleModule, + MatMenuModule, + MatSidenavModule, + MatToolbarModule, + MatCardModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatListModule, + MatStepperModule, + MatTabsModule, + MatTreeModule, + MatButtonModule, + MatButtonToggleModule, + MatBadgeModule, + MatChipsModule, + MatIconModule, + MatProgressSpinnerModule, + MatProgressBarModule, + MatRippleModule, + MatBottomSheetModule, + MatDialogModule, + MatSnackBarModule, + MatTooltipModule, + MatPaginatorModule, + MatSortModule, + MatTableModule + ], + exports: [ + MatAutocompleteModule, MatCheckboxModule, + MatDatepickerModule, + MatFormFieldModule, + MatInputModule, + MatRadioModule, + MatSelectModule, + MatSliderModule, + MatSlideToggleModule, + MatMenuModule, + MatSidenavModule, + MatToolbarModule, + MatCardModule, + MatDividerModule, + MatExpansionModule, + MatGridListModule, + MatListModule, + MatStepperModule, + MatTabsModule, + MatTreeModule, + MatButtonModule, + MatButtonToggleModule, + MatBadgeModule, + MatChipsModule, MatIconModule, - MatSlideToggleModule + MatProgressSpinnerModule, + MatProgressBarModule, + MatRippleModule, + MatBottomSheetModule, + MatDialogModule, + MatSnackBarModule, + MatTooltipModule, + MatPaginatorModule, + MatSortModule, + MatTableModule ] }) export class MaterialModule { }
\ No newline at end of file |