From 1177f4b29b616a59af39f4aef11b116f9660357d Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 01:28:46 +0200 Subject: Reorganizovao stranice i komponente. --- .../src/app/_elements/form-model/form-model.component.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/app/_elements/form-model/form-model.component.ts (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts new file mode 100644 index 00000000..2ff8c605 --- /dev/null +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-form-model', + templateUrl: './form-model.component.html', + styleUrls: ['./form-model.component.css'] +}) +export class FormModelComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- cgit v1.2.3 From 7f4315cc4accda4e7c038a58f6e8a2623c986eca Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Sat, 23 Apr 2022 20:46:13 +0200 Subject: Dodate stavke u material.module i form-model --- frontend/package-lock.json | 44 +++---- frontend/package.json | 4 +- .../_elements/form-model/form-model.component.css | 3 + .../_elements/form-model/form-model.component.html | 140 ++++++++++++++++++++- .../_elements/form-model/form-model.component.ts | 45 ++++++- frontend/src/app/_services/auth.service.ts | 3 +- frontend/src/app/material.module.ts | 117 +++++++++++++++-- 7 files changed, 318 insertions(+), 38 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') 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 @@ -

form-model works!

+
+
+
+
+ + Naziv + + + Obavezno polje + + +
+
+ + Tip problema + + + Obavezno polje + + +
+
+
+
+ + Optimizacija + + + Obavezno polje + + +
+
+ + Learning rate + + + Obavezno polje + + +
+
+
+
+ + Broj epoha + + + Obavezno polje + + +
+
+ + Broj uzoraka po iteraciji + + + Obavezno polje + + +
+
+
+
+ + Funkcija aktivacije izlaznog sloja + + + Obavezno polje + + +
+
+ + Funkcija troška + + + Obavezno polje + + +
+
+
+ +
+ +
+
+ +
+ +
+
+ +
\ 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(); 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 = 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 -- cgit v1.2.3 From aee2cd43578a255f5a0e346ac8955f663a673cca Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 00:56:45 +0200 Subject: Ažurirana komponenta form-model, dodata komponenta hidden-layer. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/package-lock.json | 12 +-- .../_elements/form-model/form-model.component.css | 11 ++- .../_elements/form-model/form-model.component.html | 107 +++++++++++---------- .../_elements/form-model/form-model.component.ts | 12 +-- .../hidden-layer/hidden-layer.component.css | 5 + .../hidden-layer/hidden-layer.component.html | 40 ++++++++ .../hidden-layer/hidden-layer.component.spec.ts | 25 +++++ .../hidden-layer/hidden-layer.component.ts | 16 +++ frontend/src/app/app.module.ts | 5 +- 9 files changed, 166 insertions(+), 67 deletions(-) create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.css create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.html create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts create mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 22756c36..14c957cb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -3420,9 +3420,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -14355,9 +14355,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" 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 9340fed5..c650bdeb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -1,3 +1,12 @@ -*{ +mat-label{ + color: var(--offwhite) !important; +} +select{ + color: var(--offwhite) !important; +} +mat-form-field{ + color: var(--offwhite) !important; +} +hr{ 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 5db2cb49..69635a4a 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -2,29 +2,27 @@
- - Naziv - - - Obavezno polje - - + + Naziv + + + Unesite naziv + + + Naziv je obavezan + +
Tip problema - + + Obavezno polje @@ -35,13 +33,13 @@
Optimizacija - + + Obavezno polje @@ -50,12 +48,12 @@
Learning rate - + + + Saab + Mercedes + Audi + Obavezno polje @@ -66,12 +64,12 @@
Broj epoha - + + + Saab + Mercedes + Audi + Obavezno polje @@ -80,12 +78,12 @@
Broj uzoraka po iteraciji - + + + Saab + Mercedes + Audi + Obavezno polje @@ -96,13 +94,13 @@
Funkcija aktivacije izlaznog sloja - + + Obavezno polje @@ -111,13 +109,13 @@
Funkcija troška - + + Obavezno polje @@ -125,15 +123,24 @@
- +
- -
+ +
+
+ Broj skrivenih slojeva:
- +
+
+
+
+ +
+ +
\ 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 6f795161..c5ab9811 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -4,6 +4,8 @@ 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'; +import {FormGroupDirective, NgForm} from '@angular/forms'; +import {ErrorStateMatcher} from '@angular/material/core'; @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', @@ -18,15 +20,9 @@ export class FormModelComponent implements OnInit { 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!'}, - ]; - */ + nameFormControl = new FormControl('', [Validators.required, Validators.email]); + newModel: Model = new Model(); myModels?: Model[]; selectedModel?: Model; diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css new file mode 100644 index 00000000..c8db6056 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css @@ -0,0 +1,5 @@ +.container{ + max-width: 15rem; + border: 1px solid white; + border-radius: 5px; +} diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html new file mode 100644 index 00000000..65e0f626 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html @@ -0,0 +1,40 @@ +
+ + Aktivaciona funkcija + + + Relu + Sigmoid + Softmax + + + Obavezno polje + + +
+ Broj čvorova: +
+ + Regularizacija + + + L1 + L2 + + + Obavezno polje + + +
+ + Stopa regularizacije + + 0.001 + 0.01 + 0.1 + + + Obavezno polje + + +
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts new file mode 100644 index 00000000..103e4539 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HiddenLayerComponent } from './hidden-layer.component'; + +describe('HiddenLayerComponent', () => { + let component: HiddenLayerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ HiddenLayerComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HiddenLayerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts new file mode 100644 index 00000000..fa9a1114 --- /dev/null +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-hidden-layer', + templateUrl: './hidden-layer.component.html', + styleUrls: ['./hidden-layer.component.css'] +}) +export class HiddenLayerComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + selectFormControl = new FormControl('', Validators.required); +} diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 5502df26..a7850552 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -45,7 +45,7 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; - +import { HiddenLayerComponent } from './_elements/hidden-layer/hidden-layer.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); } @@ -78,7 +78,8 @@ export function initializeApp(appConfig: Configuration) { BoxPlotComponent, FolderComponent, TestComponent, - DoughnutChartComponent + DoughnutChartComponent, + HiddenLayerComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From 044ef1a76cf2f53b0dd86c4a77fabd01a81e93ad Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 03:40:36 +0200 Subject: Ažurirane komponente form-model i hidden-layer. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/_data/Model.ts | 6 +- .../_elements/form-model/form-model.component.css | 16 +++ .../_elements/form-model/form-model.component.html | 134 +++++++++++---------- .../_elements/form-model/form-model.component.ts | 32 ++++- .../hidden-layer/hidden-layer.component.css | 14 ++- .../hidden-layer/hidden-layer.component.html | 21 ++-- .../hidden-layer/hidden-layer.component.ts | 8 +- frontend/src/app/_pages/home/home.component.html | 3 + 8 files changed, 155 insertions(+), 79 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index b273f56a..6cef09e5 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -21,7 +21,9 @@ export default class Model { public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form - public epochs: number = 5 // TODO add to add-model form + public epochs: number = 5, // TODO add to add-model form + public inputColNum:number=5, + public learningRate:number=0.01 ) { } } @@ -156,4 +158,4 @@ export enum MetricsMultiClassification { Precision = 'precision_score', Recall = 'recall_score', F1 = 'f1_score', -} +} \ No newline at end of file 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 c650bdeb..20546e17 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -1,3 +1,6 @@ +#container{ + color:var(--offwhite); +} mat-label{ color: var(--offwhite) !important; } @@ -6,7 +9,20 @@ select{ } mat-form-field{ color: var(--offwhite) !important; + padding: 0; } hr{ color: var(--offwhite) !important; + margin-bottom: 30px;; +} +.row{ + margin: 0; + padding: 0; +} +mat-icon{ + color: var(--ns-primary); +} +#rowhn{ + margin-bottom:-50px; + padding: 0; } \ 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 69635a4a..40631570 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,4 +1,4 @@ -
+
@@ -16,14 +16,14 @@
Tip problema - + {{ optionName }} - + Obavezno polje @@ -33,114 +33,122 @@
Optimizacija - + {{ optionName }} - + Obavezno polje
- - Learning rate - - - Saab - Mercedes - Audi + + Funkcija troška + + + {{ optionName }} + - - Obavezno polje + + Obavezno polje
- + + + Funkcija aktivacije izlaznog sloja + + + {{ optionName }} + + + + Obavezno polje + + + +
+
+ + Funkcija troška + + + {{ optionName }} + + + + Obavezno polje + + +
+
+
+
+ Broj epoha - + Saab Mercedes Audi - + Obavezno polje
- + Broj uzoraka po iteraciji - + Saab Mercedes Audi - + Obavezno polje
-
-
- - Funkcija aktivacije izlaznog sloja - - - {{ optionName }} - - - - Obavezno polje - - -
-
- - Funkcija troška - - - {{ optionName }} - - - - Obavezno polje - - -
-
- -
- -
- - Broj skrivenih slojeva: -
- + + +
+
+
Broj Skrivenih Slojeva
+
add_circle
+
{{newModel.hiddenLayers}}
+
remove_circle
-
-
- +
+
\ 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 c5ab9811..6dad9e6c 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -22,6 +22,13 @@ export class FormModelComponent implements OnInit { } selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); + selectTypeFormControl=new FormControl('', Validators.required); + selectOptFormControl=new FormControl('', Validators.required); + selectLFFormControl=new FormControl('', Validators.required); + selectLRFormControl=new FormControl('', Validators.required); + selectEpochFormControl=new FormControl('', Validators.required); + selectAFFormControl=new FormControl('', Validators.required); + selectBSFormControl=new FormControl('', Validators.required); newModel: Model = new Model(); myModels?: Model[]; @@ -41,10 +48,33 @@ export class FormModelComponent implements OnInit { lossFunction: any = LossFunction; showMyModels: boolean = true; - + batchSizePower: number = 2; + + updateGraph() { this.graph.update(); } + removeLayer(){ + if(this.newModel.hiddenLayers>0) + { + this.newModel.hiddenLayers-=1; + } + else + { + this.newModel.hiddenLayers=this.newModel.hiddenLayers; + } + + } + addLayer(){ + if(this.newModel.hiddenLayers<12) + { + this.newModel.hiddenLayers+=1; + } + else + { + this.newModel.hiddenLayers=this.newModel.hiddenLayers; + } + } } diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css index c8db6056..dd96e0c5 100644 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css @@ -1,5 +1,17 @@ .container{ - max-width: 15rem; + + text-align: justify; border: 1px solid white; border-radius: 5px; + padding: 0; + color: white!important; + background-color: var(--ns-bg-dark-100) !important; + } +mat-form-field{ + font-size: 10px; +} +input{ + background-color: #004165; + color: aliceblue; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html index 65e0f626..16c41b28 100644 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html @@ -1,39 +1,42 @@
+
+ +
Aktivaciona funkcija - - + Relu Sigmoid Softmax - + Obavezno polje
- Broj čvorova: +
+ +

Regularizacija - - + L1 L2 - + Obavezno polje
Stopa regularizacije - + 0.001 0.01 0.1 - + Obavezno polje diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts index fa9a1114..301476de 100644 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts +++ b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts @@ -1,16 +1,18 @@ import { Component, OnInit } from '@angular/core'; import { FormControl, Validators } from '@angular/forms'; - +import Model from 'src/app/_data/Model'; @Component({ selector: 'app-hidden-layer', templateUrl: './hidden-layer.component.html', styleUrls: ['./hidden-layer.component.css'] }) export class HiddenLayerComponent implements OnInit { - + hiddenLayerNum:number=1; constructor() { } ngOnInit(): void { } - selectFormControl = new FormControl('', Validators.required); + selectActivationFormControl = new FormControl('', Validators.required); + selectRegularisationFormControl = new FormControl('', Validators.required); + selectRRateFormControl = new FormControl('', Validators.required); } diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index f73e7571..956e9784 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -16,4 +16,7 @@
+ + +
\ No newline at end of file -- cgit v1.2.3 From 636d944d3fabbf3b42b3b316756a52a777657d03 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 04:30:57 +0200 Subject: Ažurirana komponenta form-model, izbrisana komponenta hidden-layer. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/_data/Model.ts | 2 +- .../_elements/form-model/form-model.component.css | 20 +++++ .../_elements/form-model/form-model.component.html | 86 ++++++++++++++------ .../_elements/form-model/form-model.component.ts | 93 ++++++++++++++++++++-- .../hidden-layer/hidden-layer.component.css | 17 ---- .../hidden-layer/hidden-layer.component.html | 43 ---------- .../hidden-layer/hidden-layer.component.spec.ts | 25 ------ .../hidden-layer/hidden-layer.component.ts | 18 ----- 8 files changed, 169 insertions(+), 135 deletions(-) delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.css delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.html delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts delete mode 100644 frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 6cef09e5..00ac0d0c 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -14,7 +14,7 @@ export default class Model { public optimizer: Optimizer = Optimizer.Adam, public lossFunction: LossFunction = LossFunction.MeanSquaredError, public inputNeurons: number = 1, - public hiddenLayerNeurons: number = 1, + public hiddenLayerNeurons: number=1, public hiddenLayers: number = 1, public batchSize: number = 5, public hiddenLayerActivationFunctions: string[] = ['sigmoid'], 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 20546e17..b4477bce 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -25,4 +25,24 @@ mat-icon{ #rowhn{ margin-bottom:-50px; padding: 0; +} +.neuron{ + + text-align: justify; + border: 1px solid white; + border-radius: 5px; + padding: 0; + color: white!important; + background-color: var(--ns-bg-dark-100) !important; + +} +mat-form-field{ + font-size: 12px; +} +col-1{ + text-align: center; +} +mat-icon{ + margin-right: 5px; + margin-left: -7px; } \ 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 40631570..22307d4d 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -95,34 +95,20 @@
-
+
- - Broj epoha - - - Saab - Mercedes - Audi - - - Obavezno polje - - +
Broj Epoha
+ add_circle +
{{newModel.epochs}}
+ remove_circle
+
+
- - Broj uzoraka po iteraciji - - - Saab - Mercedes - Audi - - - Obavezno polje - - +
Broj Uzoraka Po Iteraciji
+ add_circle +
{{newModel.batchSize}}
+ remove_circle
@@ -149,6 +135,54 @@
- +
+
+ +
+ + Aktivaciona funkcija + + Relu + Sigmoid + Softmax + + + Obavezno polje + + +
+
+ + +
Broj čvorova
+ add_circle +
{{newModel.hiddenLayerNeurons}}
+ remove_circle + +
+
+ + Regularizacija + + L1 + L2 + + + Obavezno polje + + +
+ + Stopa regularizacije + + 0.001 + 0.01 + 0.1 + + + Obavezno polje + + +
\ 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 6dad9e6c..cff967aa 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -16,7 +16,10 @@ export class FormModelComponent implements OnInit { @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter(); - constructor() { } + constructor() { + this.newModel.epochs=1; + this.newModel.batchSize=1; +} ngOnInit(): void { } @@ -29,7 +32,9 @@ export class FormModelComponent implements OnInit { selectEpochFormControl=new FormControl('', Validators.required); selectAFFormControl=new FormControl('', Validators.required); selectBSFormControl=new FormControl('', Validators.required); - + selectActivationFormControl = new FormControl('', Validators.required); + selectRegularisationFormControl = new FormControl('', Validators.required); + selectRRateFormControl = new FormControl('', Validators.required); newModel: Model = new Model(); myModels?: Model[]; selectedModel?: Model; @@ -49,17 +54,18 @@ export class FormModelComponent implements OnInit { showMyModels: boolean = true; - batchSizePower: number = 2; - + + updateGraph() { this.graph.update(); } removeLayer(){ - if(this.newModel.hiddenLayers>0) + if(this.newModel.hiddenLayers>1) { this.newModel.hiddenLayers-=1; + this.updateGraph(); } else { @@ -71,10 +77,87 @@ export class FormModelComponent implements OnInit { if(this.newModel.hiddenLayers<12) { this.newModel.hiddenLayers+=1; + this.updateGraph(); } else { this.newModel.hiddenLayers=this.newModel.hiddenLayers; + + } + } + removeBatch(){ + if(this.newModel.batchSize>1) + { + this.newModel.batchSize=this.newModel.batchSize/2; + } + else + { + this.newModel.batchSize=this.newModel.batchSize; + } + + } + addBatch(){ + if(this.newModel.batchSize<600) + { + this.newModel.batchSize=this.newModel.batchSize*2; + } + else + { + this.newModel.batchSize=this.newModel.batchSize; + + } + } + removeEpoch(){ + if(this.newModel.epochs>1) + { + this.newModel.epochs=this.newModel.epochs-1; + } + else + { + this.newModel.epochs=this.newModel.epochs; + } + + } + addEpoch(){ + if(this.newModel.epochs<100) + { + this.newModel.epochs=this.newModel.epochs+1; + } + else + { + this.newModel.epochs=this.newModel.epochs; + + } + } + /* + setNeurons() + { + for(let i=0;i1) + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons-1; + this.updateGraph(); + } + else + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; + } + + } + addNeuron(){ + if(this.newModel.hiddenLayerNeurons<100) + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons+1; + this.updateGraph(); + } + else + { + this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; + } } } diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css deleted file mode 100644 index dd96e0c5..00000000 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.css +++ /dev/null @@ -1,17 +0,0 @@ -.container{ - - text-align: justify; - border: 1px solid white; - border-radius: 5px; - padding: 0; - color: white!important; - background-color: var(--ns-bg-dark-100) !important; - -} -mat-form-field{ - font-size: 10px; -} -input{ - background-color: #004165; - color: aliceblue; -} \ No newline at end of file diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html deleted file mode 100644 index 16c41b28..00000000 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.html +++ /dev/null @@ -1,43 +0,0 @@ -
-
- -
- - Aktivaciona funkcija - - Relu - Sigmoid - Softmax - - - Obavezno polje - - -
-
- -
-
- - Regularizacija - - L1 - L2 - - - Obavezno polje - - -
- - Stopa regularizacije - - 0.001 - 0.01 - 0.1 - - - Obavezno polje - - -
diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts deleted file mode 100644 index 103e4539..00000000 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HiddenLayerComponent } from './hidden-layer.component'; - -describe('HiddenLayerComponent', () => { - let component: HiddenLayerComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ HiddenLayerComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(HiddenLayerComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts b/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts deleted file mode 100644 index 301476de..00000000 --- a/frontend/src/app/_elements/hidden-layer/hidden-layer.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormControl, Validators } from '@angular/forms'; -import Model from 'src/app/_data/Model'; -@Component({ - selector: 'app-hidden-layer', - templateUrl: './hidden-layer.component.html', - styleUrls: ['./hidden-layer.component.css'] -}) -export class HiddenLayerComponent implements OnInit { - hiddenLayerNum:number=1; - constructor() { } - - ngOnInit(): void { - } - selectActivationFormControl = new FormControl('', Validators.required); - selectRegularisationFormControl = new FormControl('', Validators.required); - selectRRateFormControl = new FormControl('', Validators.required); -} -- cgit v1.2.3 From f20f77226f0106ed2c9e2bb7b49550f5e5eb4c50 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 25 Apr 2022 13:05:47 +0200 Subject: Ažurirana komponenta form-model, dodata mogućnost iscrtavanja kartica za skrivene slojeve u zavisnosti od broja slojeva. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_elements/form-model/form-model.component.css | 2 ++ .../_elements/form-model/form-model.component.html | 22 +++++++++++++--------- .../_elements/form-model/form-model.component.ts | 4 ++++ .../_pages/experiment/experiment.component.html | 3 ++- frontend/src/app/_pages/home/home.component.html | 4 +--- 5 files changed, 22 insertions(+), 13 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') 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 b4477bce..f4d085ea 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -34,6 +34,8 @@ mat-icon{ padding: 0; color: white!important; background-color: var(--ns-bg-dark-100) !important; + min-width: none; + max-width: 12.5rem; } mat-form-field{ 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 7d669d1d..0b63c5ac 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -124,13 +124,15 @@
-
+
-
+
+ {{item}}
-
- +
+
+
Aktivaciona funkcija @@ -142,17 +144,15 @@ Obavezno polje -
+
- -
Broj čvorova
add_circle
{{newModel.hiddenLayerNeurons}}
remove_circle
-
+
Regularizacija @@ -163,7 +163,8 @@ Obavezno polje -
+
+
Stopa regularizacije @@ -175,6 +176,9 @@ Obavezno polje +
+
+
\ 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 cff967aa..b1d0a2a9 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -54,6 +54,7 @@ export class FormModelComponent implements OnInit { showMyModels: boolean = true; + hiddenLayers=[]; @@ -136,6 +137,9 @@ export class FormModelComponent implements OnInit { this.newModel.hiddenLayerNeurons[i]=1; } }*/ + numSequence(n: number): Array { + return Array(n); + } removeNeuron(){ if(this.newModel.hiddenLayerNeurons>1) { diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 2ffc7d8b..c988a50a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -28,7 +28,8 @@
Insert odabir kolona
-
Insert treniranje
+ +
\ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 956e9784..e682d8dd 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -16,7 +16,5 @@
- - - +
\ No newline at end of file -- cgit v1.2.3 From b23f781aedd6c7b8ba57d457ea8690401352e44b Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Tue, 26 Apr 2022 20:11:02 +0200 Subject: Omogućeno definisanje parametara pojedinačno za svaki sloj. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/_data/Model.ts | 21 ++++++++++-- .../_elements/form-model/form-model.component.html | 8 ++--- .../_elements/form-model/form-model.component.ts | 39 +++++++--------------- .../src/app/_elements/graph/graph.component.ts | 9 ++--- 4 files changed, 39 insertions(+), 38 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 00ac0d0c..094378f3 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -14,19 +14,34 @@ export default class Model { public optimizer: Optimizer = Optimizer.Adam, public lossFunction: LossFunction = LossFunction.MeanSquaredError, public inputNeurons: number = 1, - public hiddenLayerNeurons: number=1, public hiddenLayers: number = 1, public batchSize: number = 5, - public hiddenLayerActivationFunctions: string[] = ['sigmoid'], public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5, // TODO add to add-model form public inputColNum:number=5, - public learningRate:number=0.01 + public learningRate:number=0.01, + public layers:Layer[]=[new Layer()] + ) { } } +export class Layer{ + constructor( + public layerNumber:number=0, + public activationFunction:ActivationFunction=ActivationFunction.Sigmoid, + public neurons:number=1, + public regularisation:Regularisation=Regularisation.L1, + public regularisationRate:number=0.01 + ) + {} + +} +export enum Regularisation{ + L1='l1', + L2='l2' +} export enum ProblemType { Regression = 'regresioni', BinaryClassification = 'binarni-klasifikacioni', 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 0b63c5ac..ac5ca9ab 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -126,7 +126,7 @@
-
+
{{item}}
@@ -147,9 +147,9 @@
Broj čvorova
- add_circle -
{{newModel.hiddenLayerNeurons}}
- remove_circle + add_circle +
{{newModel.layers[i].neurons}}
+ remove_circle
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 b1d0a2a9..40bc30ea 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angul 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 Model, {Layer, ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; import {FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; @@ -65,26 +65,20 @@ export class FormModelComponent implements OnInit { removeLayer(){ if(this.newModel.hiddenLayers>1) { + this.newModel.layers.splice(this.newModel.layers.length-1,1); this.newModel.hiddenLayers-=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayers=this.newModel.hiddenLayers; - } - } addLayer(){ if(this.newModel.hiddenLayers<12) { + this.newModel.layers.push(new Layer(this.newModel.layers.length)); + this.newModel.hiddenLayers+=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayers=this.newModel.hiddenLayers; - - } + } removeBatch(){ if(this.newModel.batchSize>1) @@ -140,28 +134,19 @@ export class FormModelComponent implements OnInit { numSequence(n: number): Array { return Array(n); } - removeNeuron(){ - if(this.newModel.hiddenLayerNeurons>1) + + removeNeuron(index:number){ + if(this.newModel.layers[index].neurons>1) { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons-1; + this.newModel.layers[index].neurons-=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; - } - } - addNeuron(){ - if(this.newModel.hiddenLayerNeurons<100) + addNeuron(index:number){ + if(this.newModel.layers[index].neurons<100) { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons+1; + this.newModel.layers[index].neurons+=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; - - } } } diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 8051acc3..c20d3dd7 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; -import Model from 'src/app/_data/Model'; +import Model,{Layer} from 'src/app/_data/Model'; @Component({ selector: 'app-graph', @@ -26,6 +26,7 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#44ee22'; private ctx?: CanvasRenderingContext2D; + @Input() inputNeurons: number=1; constructor() { } @@ -50,7 +51,7 @@ export class GraphComponent implements AfterViewInit { let inputNodeIndex = 0; const inputLayer: Node[] = []; while (inputNodeIndex < this.inputCols) { - const x = 0.5 / (this.model!.hiddenLayers + 2); + const x = 0.5 / (this.inputNeurons + 2); const y = (inputNodeIndex + 0.5) / this.inputCols; const node = new Node(x, y, this.inputNodeColor); inputLayer.push(node); @@ -62,9 +63,9 @@ export class GraphComponent implements AfterViewInit { while (layerIndex < this.model!.hiddenLayers + 1) { const newLayer: Node[] = []; let nodeIndex = 0; - while (nodeIndex < this.model!.hiddenLayerNeurons) { + while (nodeIndex < this.model!.layers[layerIndex].neurons) { const x = (layerIndex + 0.5) / (this.model!.hiddenLayers + 2); - const y = (nodeIndex + 0.5) / this.model!.hiddenLayerNeurons; + const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex].neurons; const node = new Node(x, y, this.nodeColor); newLayer.push(node); nodeIndex += 1; -- cgit v1.2.3 From 6196023a54bcf0ac5a81c64aff0bcf55f22e0ef8 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Tue, 26 Apr 2022 22:54:07 +0200 Subject: Parametri su povezani. --- frontend/src/app/_data/Model.ts | 29 ++++++- .../_elements/form-model/form-model.component.css | 10 ++- .../_elements/form-model/form-model.component.html | 93 +++++++++------------- .../_elements/form-model/form-model.component.ts | 10 ++- 4 files changed, 80 insertions(+), 62 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 094378f3..a3b86bdf 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -21,7 +21,7 @@ export default class Model { public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5, // TODO add to add-model form public inputColNum:number=5, - public learningRate:number=0.01, + public learningRate:LearningRate=LearningRate.LR1, public layers:Layer[]=[new Layer()] ) { } @@ -32,16 +32,41 @@ export class Layer{ public activationFunction:ActivationFunction=ActivationFunction.Sigmoid, public neurons:number=1, public regularisation:Regularisation=Regularisation.L1, - public regularisationRate:number=0.01 + public regularisationRate:RegularisationRate=RegularisationRate.RR1, ) {} } +export enum LearningRate{ + LR1='0.00001', + LR2='0.0001', + LR3='0.001', + LR4='0.003', + LR5='0.01', + LR6='0.03', + LR7='0.1', + LR8='0.3', + LR9='1', + LR10='3', + LR11='10', +} export enum Regularisation{ L1='l1', L2='l2' } +export enum RegularisationRate{ + RR1='0', + RR2='0.001', + RR3='0.003', + RR4='0.01', + RR5='0.03', + RR6='0.1', + RR7='0.3', + RR8='1', + RR9='3', + RR10='10', +} export enum ProblemType { Regression = 'regresioni', BinaryClassification = 'binarni-klasifikacioni', 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 f4d085ea..051e23fc 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -12,8 +12,10 @@ mat-form-field{ padding: 0; } hr{ - color: var(--offwhite) !important; - margin-bottom: 30px;; + color:var(--ns-primary) 100%; + margin-bottom: 30px; + height: 2px; + } .row{ margin: 0; @@ -29,7 +31,7 @@ mat-icon{ .neuron{ text-align: justify; - border: 1px solid white; + border: 1px solid var(--ns-primary); border-radius: 5px; padding: 0; color: white!important; @@ -39,7 +41,7 @@ mat-icon{ } mat-form-field{ - font-size: 12px; + font-size: 15px; } col-1{ text-align: center; 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 ac5ca9ab..6435b8d6 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -4,28 +4,20 @@
Naziv - - - Unesite naziv - - - Naziv je obavezan - +
Tip problema - + {{ optionName }} - - Obavezno polje - +
@@ -33,31 +25,27 @@
Optimizacija - + {{ optionName }} - - Obavezno polje - +
Funkcija troška - + {{ optionName }} - - Obavezno polje - +
@@ -66,32 +54,28 @@ Funkcija aktivacije izlaznog sloja - + {{ optionName }} - - Obavezno polje - +
- Funkcija troška - + Stopa učenja + {{ optionName }} - - Obavezno polje - +
@@ -130,19 +114,19 @@ {{item}}
- +
Aktivaciona funkcija - - Relu - Sigmoid - Softmax - - - Obavezno polje - + + + {{ optionName }} + + +
@@ -155,26 +139,27 @@
Regularizacija - - L1 - L2 - - - Obavezno polje - + + + {{ optionName }} + + +
Stopa regularizacije - - 0.001 - 0.01 - 0.1 - - - Obavezno polje - + + + {{ optionName }} + + +
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 40bc30ea..c3c73b3e 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angul import {FormControl, Validators} from '@angular/forms'; import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; -import Model, {Layer, ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; +import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; import {FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; @@ -35,19 +35,25 @@ export class FormModelComponent implements OnInit { selectActivationFormControl = new FormControl('', Validators.required); selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); + newModel: Model = new Model(); myModels?: Model[]; + selectedModel?: Model; ProblemType = ProblemType; ActivationFunction = ActivationFunction; + RegularisationRate=RegularisationRate; + Regularisation=Regularisation; metrics: any = Metrics; LossFunction = LossFunction; Optimizer = Optimizer; Object = Object; document = document; shared = Shared; - + LearningRate=LearningRate; + Layer=Layer; + term: string = ""; selectedMetrics = []; lossFunction: any = LossFunction; -- cgit v1.2.3 From 0d2ba69f53f8f916d3758d532bddf0ed1cc69bda Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 27 Apr 2022 02:18:18 +0200 Subject: Ispravio graph da radi sa razlicitim brojem neurona za svaki sloj, uskladio sve korake na experiment strani, promenio stil navbara, dodao bottom dugmice u folder. Dodao responzivnost na nekim komponentama. --- frontend/src/app/_data/Dataset.ts | 14 +- frontend/src/app/_data/FolderFile.ts | 13 + frontend/src/app/_data/Model.ts | 109 ++++---- .../src/app/_elements/folder/folder.component.css | 73 +++++- .../src/app/_elements/folder/folder.component.html | 44 +++- .../src/app/_elements/folder/folder.component.ts | 34 ++- .../form-dataset/form-dataset.component.css | 38 ++- .../form-dataset/form-dataset.component.html | 81 +++--- .../_elements/form-model/form-model.component.css | 126 +++++++--- .../_elements/form-model/form-model.component.html | 278 ++++++++++----------- .../_elements/form-model/form-model.component.ts | 133 +++------- .../src/app/_elements/graph/graph.component.html | 2 +- .../src/app/_elements/graph/graph.component.ts | 44 ++-- .../src/app/_elements/navbar/navbar.component.html | 8 +- .../app/_pages/experiment/experiment.component.css | 6 + .../_pages/experiment/experiment.component.html | 15 +- .../app/_pages/experiment/experiment.component.ts | 3 + frontend/src/styles/helper.css | 44 ++++ 18 files changed, 617 insertions(+), 448 deletions(-) create mode 100644 frontend/src/app/_data/FolderFile.ts (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 03060982..9d4b67a9 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -1,15 +1,17 @@ -export default class Dataset { +import { FolderFile } from "./FolderFile"; + +export default class Dataset extends FolderFile { _id: string = ''; constructor( - public name: string = 'Novi izvor podataka', + name: string = 'Novi izvor podataka', public description: string = '', public header: string[] = [], public fileId?: number, public extension: string = '.csv', public isPublic: boolean = false, public accessibleByLink: boolean = false, - public dateCreated: Date = new Date(), - public lastUpdated: Date = new Date(), + dateCreated: Date = new Date(), + lastUpdated: Date = new Date(), public uploaderId: string = '', public delimiter: string = '', public hasHeader: boolean = true, @@ -19,7 +21,9 @@ export default class Dataset { public nullRows: number = 0, public nullCols: number = 0, public preview: string[][] = [[]] - ) { } + ) { + super(name, dateCreated, lastUpdated); + } } export class ColumnInfo { diff --git a/frontend/src/app/_data/FolderFile.ts b/frontend/src/app/_data/FolderFile.ts new file mode 100644 index 00000000..a79eeac5 --- /dev/null +++ b/frontend/src/app/_data/FolderFile.ts @@ -0,0 +1,13 @@ +export class FolderFile { + constructor( + public name: string, + public dateCreated: Date, + public lastUpdated: Date + ) { } +} + + +export enum FolderType { + Dataset, + Model +} \ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index a3b86bdf..c1f3d108 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -1,12 +1,13 @@ import { NgIf } from "@angular/common"; +import { FolderFile } from "./FolderFile"; -export default class Model { +export default class Model extends FolderFile { _id: string = ''; constructor( - public name: string = 'Novi model', + name: string = 'Novi model', public description: string = '', - public dateCreated: Date = new Date(), - public lastUpdated: Date = new Date(), + dateCreated: Date = new Date(), + lastUpdated: Date = new Date(), //public experimentId: string = '', // Neural net training settings @@ -15,57 +16,56 @@ export default class Model { public lossFunction: LossFunction = LossFunction.MeanSquaredError, public inputNeurons: number = 1, public hiddenLayers: number = 1, - public batchSize: number = 5, + public batchSize: BatchSize = BatchSize.O3, public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5, // TODO add to add-model form - public inputColNum:number=5, - public learningRate:LearningRate=LearningRate.LR1, - public layers:Layer[]=[new Layer()] + public inputColNum: number = 5, + public learningRate: LearningRate = LearningRate.LR1, + public layers: Layer[] = [new Layer()] - ) { } + ) { + super(name, dateCreated, lastUpdated); + } } -export class Layer{ +export class Layer { constructor( - public layerNumber:number=0, - public activationFunction:ActivationFunction=ActivationFunction.Sigmoid, - public neurons:number=1, - public regularisation:Regularisation=Regularisation.L1, - public regularisationRate:RegularisationRate=RegularisationRate.RR1, - - ) - {} - -} -export enum LearningRate{ - LR1='0.00001', - LR2='0.0001', - LR3='0.001', - LR4='0.003', - LR5='0.01', - LR6='0.03', - LR7='0.1', - LR8='0.3', - LR9='1', - LR10='3', - LR11='10', -} -export enum Regularisation{ - L1='l1', - L2='l2' -} -export enum RegularisationRate{ - RR1='0', - RR2='0.001', - RR3='0.003', - RR4='0.01', - RR5='0.03', - RR6='0.1', - RR7='0.3', - RR8='1', - RR9='3', - RR10='10', + public layerNumber: number = 0, + public activationFunction: ActivationFunction = ActivationFunction.Sigmoid, + public neurons: number = 1, + public regularisation: Regularisation = Regularisation.L1, + public regularisationRate: RegularisationRate = RegularisationRate.RR1, + ) { } +} +export enum LearningRate { + LR1 = '0.00001', + LR2 = '0.0001', + LR3 = '0.001', + LR4 = '0.003', + LR5 = '0.01', + LR6 = '0.03', + LR7 = '0.1', + LR8 = '0.3', + LR9 = '1', + LR10 = '3', + LR11 = '10', +} +export enum Regularisation { + L1 = 'l1', + L2 = 'l2' +} +export enum RegularisationRate { + RR1 = '0', + RR2 = '0.001', + RR3 = '0.003', + RR4 = '0.01', + RR5 = '0.03', + RR6 = '0.1', + RR7 = '0.3', + RR8 = '1', + RR9 = '3', + RR10 = '10', } export enum ProblemType { Regression = 'regresioni', @@ -198,4 +198,17 @@ export enum MetricsMultiClassification { Precision = 'precision_score', Recall = 'recall_score', F1 = 'f1_score', +} + +export enum BatchSize { + O1 = '2', + O2 = '4', + O3 = '8', + O4 = '16', + O5 = '32', + O6 = '64', + O7 = '128', + O8 = '256', + O9 = '512', + O10 = '1024' } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 3e865576..ce9b9fad 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -8,7 +8,7 @@ display: flex; flex-direction: row; align-items: flex-end; - height: 4rem; + height: 3.1rem; } #tabs>.folder-tab:not(:first-child) { @@ -83,16 +83,15 @@ #search-options { margin-left: auto; - margin-top: 7px; display: flex; flex-direction: row; align-items: center; + height: 100%; } #selected-content { background-color: var(--ns-bg-dark-50); width: 100%; - height: 36rem; /*backdrop-filter: blur(2px);*/ border-color: var(--ns-primary); border-style: solid; @@ -120,4 +119,72 @@ .rounded-bottom { border-top-right-radius: 0; border-top-left-radius: 0; +} + +.separator { + border-left-color: var(--ns-primary); + border-left-width: 1px; + border-left-style: solid; +} + +.list-view { + height: 100%; + overflow-y: auto; +} + +.list-item { + height: 3rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid var(--ns-primary); +} + +.list-item:hover { + background-color: var(--ns-bg-dark-100); + box-shadow: 0px 3px 3px var(--ns-primary); +} + +.list-item:hover>.hover-hide { + display: none; +} + +.folder-inside { + width: 100%; + height: 40rem; + overflow-y: auto; +} + +.file-content { + width: 100%; + height: 100%; + position: relative; +} + +.file-bottom-buttons { + position: absolute; + bottom: 15px; + right: 15px; + display: flex; + flex-direction: row-reverse; +} + +.file-button { + position: relative; + color: var(--offwhite); + border-radius: 4px; + border: 1px solid var(--ns-primary); + margin: 5px; + padding: 5px; + cursor: pointer; + z-index: 1001; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + +.file-button:hover { + background-color: var(--ns-primary); } \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 95e99911..f0bc409a 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,4 +1,4 @@ -
+
add @@ -24,7 +24,6 @@
- timeline Regresioni looks_two @@ -32,19 +31,48 @@ auto_awesome_motion Multiklasifikacioni
-
[sort options here TODO]
- + +
+
+ +
+
+
+ + + +
+ + +
+
+
+
+ {{file.name}} +
+
+ {{file.lastUpdated | date}} +
+
- -
+
+
+ + + + + {{ option }} + + + +
-
+
- -
- -
-
- -
-
-
Broj Skrivenih Slojeva
-
add_circle
-
{{newModel.hiddenLayers}}
-
remove_circle
-
-
-
-
- -
- {{item}} -
-
- -
-
+
- Aktivaciona funkcija - - - {{ optionName }} - - - - -
-
-
Broj čvorova
- add_circle -
{{newModel.layers[i].neurons}}
- remove_circle - + Broj uzoraka po iteraciji + + + {{option}} + +
-
- - Regularizacija - - - {{ optionName }} - - - - -
-
- - Stopa regularizacije - - - {{ optionName }} - - - - -
+ +
+
+ + + +
+
+ +
+
Broj Skrivenih Slojeva
+ +
{{newModel.hiddenLayers}}
+ +
+
+
+
+ +
+
+ #{{i+1}} +
+ + + Aktivaciona funkcija + + + {{ optionName }} + + + + +
+
Broj čvorova
+ +
{{newModel.layers[i].neurons}}
+
-
-
- -
\ No newline at end of file + + + Regularizacija + + + {{ optionName }} + + + + + + Stopa regularizacije + + + {{ optionName }} + + + +
+
\ 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 c3c73b3e..c29fd0bb 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -1,37 +1,36 @@ -import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angular/core'; -import {FormControl, Validators} from '@angular/forms'; +import { Component, OnInit, Input, ViewChild, Output, EventEmitter, AfterViewInit } from '@angular/core'; +import { FormControl, Validators } from '@angular/forms'; import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; -import Model, {Layer, ActivationFunction, LossFunction,LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType ,Regularisation,RegularisationRate} from 'src/app/_data/Model'; +import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; -import {FormGroupDirective, NgForm} from '@angular/forms'; -import {ErrorStateMatcher} from '@angular/material/core'; +import { FormGroupDirective, NgForm } from '@angular/forms'; +import { ErrorStateMatcher } from '@angular/material/core'; + @Component({ selector: 'app-form-model', templateUrl: './form-model.component.html', styleUrls: ['./form-model.component.css'] }) -export class FormModelComponent implements OnInit { +export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter(); - constructor() { - this.newModel.epochs=1; - this.newModel.batchSize=1; -} - - ngOnInit(): void { + constructor() { } + + ngAfterViewInit(): void { } + selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); - selectTypeFormControl=new FormControl('', Validators.required); - selectOptFormControl=new FormControl('', Validators.required); - selectLFFormControl=new FormControl('', Validators.required); - selectLRFormControl=new FormControl('', Validators.required); - selectEpochFormControl=new FormControl('', Validators.required); - selectAFFormControl=new FormControl('', Validators.required); - selectBSFormControl=new FormControl('', Validators.required); + selectTypeFormControl = new FormControl('', Validators.required); + selectOptFormControl = new FormControl('', Validators.required); + selectLFFormControl = new FormControl('', Validators.required); + selectLRFormControl = new FormControl('', Validators.required); + selectEpochFormControl = new FormControl('', Validators.required); + selectAFFormControl = new FormControl('', Validators.required); + selectBSFormControl = new FormControl('', Validators.required); selectActivationFormControl = new FormControl('', Validators.required); selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); @@ -43,92 +42,44 @@ export class FormModelComponent implements OnInit { ProblemType = ProblemType; ActivationFunction = ActivationFunction; - RegularisationRate=RegularisationRate; - Regularisation=Regularisation; + RegularisationRate = RegularisationRate; + Regularisation = Regularisation; metrics: any = Metrics; LossFunction = LossFunction; Optimizer = Optimizer; + BatchSize = BatchSize; Object = Object; document = document; shared = Shared; - LearningRate=LearningRate; - Layer=Layer; - + LearningRate = LearningRate; + Layer = Layer; + term: string = ""; selectedMetrics = []; lossFunction: any = LossFunction; showMyModels: boolean = true; - - hiddenLayers=[]; - - - updateGraph() { + console.log(this.newModel.layers); this.graph.update(); } - removeLayer(){ - if(this.newModel.hiddenLayers>1) - { - this.newModel.layers.splice(this.newModel.layers.length-1,1); - this.newModel.hiddenLayers-=1; + + removeLayer() { + if (this.newModel.hiddenLayers > 1) { + this.newModel.layers.splice(this.newModel.layers.length - 1, 1); + this.newModel.hiddenLayers -= 1; this.updateGraph(); } } - addLayer(){ - if(this.newModel.hiddenLayers<12) - { + addLayer() { + if (this.newModel.hiddenLayers < 128) { this.newModel.layers.push(new Layer(this.newModel.layers.length)); - this.newModel.hiddenLayers+=1; + this.newModel.hiddenLayers += 1; this.updateGraph(); } - - } - removeBatch(){ - if(this.newModel.batchSize>1) - { - this.newModel.batchSize=this.newModel.batchSize/2; - } - else - { - this.newModel.batchSize=this.newModel.batchSize; - } - - } - addBatch(){ - if(this.newModel.batchSize<600) - { - this.newModel.batchSize=this.newModel.batchSize*2; - } - else - { - this.newModel.batchSize=this.newModel.batchSize; - - } - } - removeEpoch(){ - if(this.newModel.epochs>1) - { - this.newModel.epochs=this.newModel.epochs-1; - } - else - { - this.newModel.epochs=this.newModel.epochs; - } - - } - addEpoch(){ - if(this.newModel.epochs<100) - { - this.newModel.epochs=this.newModel.epochs+1; - } - else - { - this.newModel.epochs=this.newModel.epochs; - - } + } /* setNeurons() @@ -140,18 +91,16 @@ export class FormModelComponent implements OnInit { numSequence(n: number): Array { return Array(n); } - - removeNeuron(index:number){ - if(this.newModel.layers[index].neurons>1) - { - this.newModel.layers[index].neurons-=1; + + removeNeuron(index: number) { + if (this.newModel.layers[index].neurons > 1) { + this.newModel.layers[index].neurons -= 1; this.updateGraph(); } } - addNeuron(index:number){ - if(this.newModel.layers[index].neurons<100) - { - this.newModel.layers[index].neurons+=1; + addNeuron(index: number) { + if (this.newModel.layers[index].neurons < 100) { + this.newModel.layers[index].neurons += 1; this.updateGraph(); } } diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 92e9df38..b8220115 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index c20d3dd7..5dec3152 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; -import Model,{Layer} from 'src/app/_data/Model'; +import Model, { Layer } from 'src/app/_data/Model'; @Component({ selector: 'app-graph', @@ -22,11 +22,11 @@ export class GraphComponent implements AfterViewInit { @Input() lineColor: string = '#00a8e8'; @Input() nodeColor: string = '#222277'; @Input() borderColor: string = '#00a8e8'; - @Input() inputNodeColor: string = '#ffdd11'; - @Input() outputNodeColor: string = '#44ee22'; + @Input() inputNodeColor: string = '#00a8e8'; + @Input() outputNodeColor: string = '#dfd7d7'; - private ctx?: CanvasRenderingContext2D; - @Input() inputNeurons: number=1; + private ctx!: CanvasRenderingContext2D; + @Input() inputNeurons: number = 1; constructor() { } @@ -51,7 +51,7 @@ export class GraphComponent implements AfterViewInit { let inputNodeIndex = 0; const inputLayer: Node[] = []; while (inputNodeIndex < this.inputCols) { - const x = 0.5 / (this.inputNeurons + 2); + const x = 0.5 / (this.model!.hiddenLayers + 2); const y = (inputNodeIndex + 0.5) / this.inputCols; const node = new Node(x, y, this.inputNodeColor); inputLayer.push(node); @@ -63,9 +63,9 @@ export class GraphComponent implements AfterViewInit { while (layerIndex < this.model!.hiddenLayers + 1) { const newLayer: Node[] = []; let nodeIndex = 0; - while (nodeIndex < this.model!.layers[layerIndex].neurons) { + while (nodeIndex < this.model!.layers[layerIndex - 1].neurons) { const x = (layerIndex + 0.5) / (this.model!.hiddenLayers + 2); - const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex].neurons; + const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex - 1].neurons; const node = new Node(x, y, this.nodeColor); newLayer.push(node); nodeIndex += 1; @@ -81,7 +81,7 @@ export class GraphComponent implements AfterViewInit { } draw() { - this.ctx!.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); + this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height); let index = 0; while (index < this.layers!.length - 1) { @@ -101,22 +101,22 @@ export class GraphComponent implements AfterViewInit { } drawLine(node1: Node, node2: Node) { - this.ctx!.strokeStyle = this.lineColor; - this.ctx!.lineWidth = this.lineThickness; - this.ctx!.beginPath(); - this.ctx!.moveTo(node1.x * this.width, node1.y * this.height); - this.ctx!.lineTo(node2.x * this.width, node2.y * this.height); - this.ctx!.stroke(); + this.ctx.strokeStyle = this.lineColor; + this.ctx.lineWidth = this.lineThickness; + this.ctx.beginPath(); + this.ctx.moveTo(node1.x * this.width, node1.y * this.height); + this.ctx.lineTo(node2.x * this.width, node2.y * this.height); + this.ctx.stroke(); } drawNode(node: Node) { - this.ctx!.fillStyle = node.color; - this.ctx!.strokeStyle = this.borderColor; - this.ctx!.lineWidth = this.lineThickness; - this.ctx!.beginPath(); - this.ctx!.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); - this.ctx!.fill(); - this.ctx!.stroke(); + this.ctx.fillStyle = node.color; + this.ctx.strokeStyle = this.borderColor; + this.ctx.lineWidth = this.lineThickness; + this.ctx.beginPath(); + this.ctx.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); + this.ctx.fill(); + this.ctx.stroke(); } width = 200; diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 09d83bd1..9a54a9de 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -1,4 +1,4 @@ -
+
@@ -6,10 +6,10 @@ diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 2fde8e7f..aca0562a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -46,4 +46,10 @@ mat-stepper { flex-direction: row; justify-content: center; align-items: center; +} + +.step-content-inside { + width: 90%; + height: 90%; + overflow-y: auto; } \ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 6200270c..1606adf5 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -22,16 +22,19 @@
- +
+ +
-
- -
+
+ +
- - +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index ad0f1df2..d80ba70f 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -2,6 +2,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@ import { StepperSelectionEvent } from '@angular/cdk/stepper'; import { MatStepper } from '@angular/material/stepper'; import Shared from 'src/app/Shared'; +import { FolderType } from 'src/app/_data/FolderFile'; @Component({ selector: 'app-experiment', @@ -86,4 +87,6 @@ export class ExperimentComponent implements AfterViewInit { scrolling: boolean = false; + FolderType = FolderType; + } diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 875b94f1..08ce6e56 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -74,4 +74,48 @@ flex-direction: row; justify-content: space-between; align-items: center; +} + +.icon-toggle { + color: var(--offwhite); + height: 100%; +} + +.icon-toggle>* { + margin-top: 5px; +} + +.icon-toggle:active { + background-color: var(--ns-primary); +} + +.icon-toggle-on { + background-color: var(--ns-primary); +} + +.icon-toggle-on>* { + transform: scale(1.3); +} + +.force-link { + color: var(--offwhite) !important; + text-decoration: none; + cursor: pointer; +} + +.text-primary { + color: var(--ns-primary) !important; +} + +.btn-icon { + color: var(--offwhite) !important; + background-color: var(--ns-primary); + border-radius: 50%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + margin: 3px; + width: 28px; + height: 28px; } \ No newline at end of file -- cgit v1.2.3 From 96eae581ca377a940f39d1908a4b5661ccb7c223 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Wed, 27 Apr 2022 23:57:53 +0200 Subject: Dodata opcija da se istovremeno podešavaju parametri svih skrivenih slojeva. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_elements/form-model/form-model.component.css | 13 +++--- .../_elements/form-model/form-model.component.html | 54 +++++++++++++++++++++- .../_elements/form-model/form-model.component.ts | 39 +++++++++++++++- 3 files changed, 96 insertions(+), 10 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') 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 b69b2dbb..5776085f 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -21,7 +21,7 @@ mat-form-field { hr { color: var(--offwhite) !important; margin-bottom: 30px; - ; + } .neuron { @@ -33,12 +33,10 @@ hr { background-color: var(--ns-bg-dark-100) !important; min-width: none; max-width: 12.5rem; -} -col-1 { - text-align: center; } + .row { margin: 0; padding: 0; @@ -70,11 +68,14 @@ col-1 { border: 1px solid var(--ns-primary); border-radius: 4px; margin: 5px; - padding: 3px; + padding: 0px; width: 12rem; - height: 13rem; + height: 13.5rem; } .layer>mat-form-field { margin-left: 0; +} +.m-2{ + max-height: 20 rem; } \ 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 4c5505f0..2a8d79a8 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -92,7 +92,10 @@
-
+
+
+ +
Broj Skrivenih Slojeva
+ +
+
+
+ + Aktivaciona funkcija svih slojeva + + + + {{ optionName }} + + +
+ +
+ + Broj Neurona svih slojeva + + +
+
+
+ + Regularizacija svih slojeva + + + {{ optionName }} + + + +
+ +
+ + Stopa regularizacije svih slojeva + + + {{ optionName }} + + + +
+ +
+ + +
@@ -124,7 +174,7 @@ -
{{newModel.layers[i].neurons}}
+
{{newModel.layers[i].neurons}}
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 c29fd0bb..062c380e 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -4,8 +4,7 @@ import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; -import { FormGroupDirective, NgForm } from '@angular/forms'; -import { ErrorStateMatcher } from '@angular/material/core'; + @Component({ selector: 'app-form-model', @@ -104,4 +103,40 @@ export class FormModelComponent implements AfterViewInit { this.updateGraph(); } } + selectedActivation: ActivationFunction = ActivationFunction.Sigmoid; + selectedRegularisationRate: RegularisationRate = RegularisationRate.RR1; + selectedRegularisation: Regularisation = Regularisation.L1; + selectedNumberOfNeurons:number=1; + + changeAllActivation(){ + for(let i=0;i Date: Fri, 29 Apr 2022 00:44:09 +0200 Subject: Promenio liniju u grafu modela na bezier krivu, dodao ispis ulazne kolone / aktivacione funkcije sloja na hoveru preko cvora. --- frontend/src/app/_data/Model.ts | 2 +- .../src/app/_elements/folder/folder.component.html | 2 +- .../src/app/_elements/folder/folder.component.ts | 9 +++- .../_elements/form-model/form-model.component.html | 4 +- .../_elements/form-model/form-model.component.ts | 44 ++++++++---------- .../src/app/_elements/graph/graph.component.css | 17 +++++++ .../src/app/_elements/graph/graph.component.html | 9 +++- .../src/app/_elements/graph/graph.component.ts | 53 +++++++++++++++------- 8 files changed, 92 insertions(+), 48 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index c1f3d108..6281748c 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -33,7 +33,7 @@ export class Layer { constructor( public layerNumber: number = 0, public activationFunction: ActivationFunction = ActivationFunction.Sigmoid, - public neurons: number = 1, + public neurons: number = 3, public regularisation: Regularisation = Regularisation.L1, public regularisationRate: RegularisationRate = RegularisationRate.RR1, ) { } diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index b4e90e56..763a82a1 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -59,7 +59,7 @@ zoom_out_map
- +
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 23a982fb..eb1b9b98 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -1,5 +1,6 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import Dataset from 'src/app/_data/Dataset'; +import Dataset, { ColumnInfo } from 'src/app/_data/Dataset'; +import Experiment from 'src/app/_data/Experiment'; import { FolderFile, FolderType } from 'src/app/_data/FolderFile'; import Model from 'src/app/_data/Model'; import { DatasetsService } from 'src/app/_services/datasets.service'; @@ -19,6 +20,8 @@ export class FolderComponent implements OnInit { @Input() type: FolderType = FolderType.Dataset; + @Input() forExperiment?: Experiment; + newFileSelected: boolean = true; selectedFileIndex: number = -1; @@ -32,10 +35,12 @@ export class FolderComponent implements OnInit { searchTerm: string = ''; - myDatasets : Dataset[] = []; + myDatasets: Dataset[] = []; constructor(private datasets: DatasetsService) { //PLACEHOLDER + this.forExperiment = new Experiment(); + this.forExperiment.inputColumns = ['kolona1', 'kol2', '???', 'test']; this.datasets.getMyDatasets().subscribe((datasets) => { this.myDatasets = datasets; 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 f11b609d..d5187383 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -90,7 +90,7 @@
- +
@@ -121,7 +121,7 @@
Broj Neurona svih slojeva - +
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 062c380e..e58d1764 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -60,7 +60,7 @@ export class FormModelComponent implements AfterViewInit { showMyModels: boolean = true; updateGraph() { - console.log(this.newModel.layers); + //console.log(this.newModel.layers); this.graph.update(); } @@ -73,7 +73,7 @@ export class FormModelComponent implements AfterViewInit { } addLayer() { if (this.newModel.hiddenLayers < 128) { - this.newModel.layers.push(new Layer(this.newModel.layers.length)); + this.newModel.layers.push(new Layer(this.newModel.layers.length, this.selectedActivation, this.selectedNumberOfNeurons, this.selectedRegularisation, this.selectedRegularisationRate)); this.newModel.hiddenLayers += 1; this.updateGraph(); @@ -106,37 +106,33 @@ export class FormModelComponent implements AfterViewInit { selectedActivation: ActivationFunction = ActivationFunction.Sigmoid; selectedRegularisationRate: RegularisationRate = RegularisationRate.RR1; selectedRegularisation: Regularisation = Regularisation.L1; - selectedNumberOfNeurons:number=1; + selectedNumberOfNeurons: number = 3; + + changeAllActivation() { + for (let i = 0; i < this.newModel.layers.length; i++) { + this.newModel.layers[i].activationFunction = this.selectedActivation; - changeAllActivation(){ - for(let i=0;i +
+ +
+ {{ i == 0 ? (inputColumns ? inputColumns[j] : 'nepoznato') : (i > 0 && i + < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? 'out' : '')) }}
+ -
\ No newline at end of file +
\ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 5dec3152..31814c2c 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,5 +1,6 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; -import Dataset from 'src/app/_data/Dataset'; +import { RgbColor } from '@syncfusion/ej2-angular-heatmap'; +import Dataset, { ColumnInfo } from 'src/app/_data/Dataset'; import Model, { Layer } from 'src/app/_data/Model'; @Component({ @@ -15,18 +16,19 @@ export class GraphComponent implements AfterViewInit { canvas!: ElementRef; @Input() model?: Model; - @Input() inputCols: number = 1; + //@Input() inputCols: number = 1; @Input() lineThickness: number = 2; @Input() nodeRadius: number = 15; - @Input() lineColor: string = '#00a8e8'; + @Input() lineColor1: RgbColor = new RgbColor(0, 168, 232); + @Input() lineColor2: RgbColor = new RgbColor(0, 70, 151); @Input() nodeColor: string = '#222277'; @Input() borderColor: string = '#00a8e8'; @Input() inputNodeColor: string = '#00a8e8'; @Input() outputNodeColor: string = '#dfd7d7'; private ctx!: CanvasRenderingContext2D; - @Input() inputNeurons: number = 1; + @Input() inputColumns?: string[] = []; constructor() { } @@ -43,16 +45,16 @@ export class GraphComponent implements AfterViewInit { this.resize(); } - layers?: Node[][]; + layers: Node[][] = []; update() { - this.layers = []; + this.layers.length = 0; let inputNodeIndex = 0; const inputLayer: Node[] = []; - while (inputNodeIndex < this.inputCols) { + while (this.inputColumns && inputNodeIndex < this.inputColumns.length) { const x = 0.5 / (this.model!.hiddenLayers + 2); - const y = (inputNodeIndex + 0.5) / this.inputCols; + const y = (inputNodeIndex + 0.5) / this.inputColumns.length; const node = new Node(x, y, this.inputNodeColor); inputLayer.push(node); inputNodeIndex += 1; @@ -94,27 +96,36 @@ export class GraphComponent implements AfterViewInit { } for (let layer of this.layers!) { - for (let node of layer) { - this.drawNode(node); - } + layer.forEach((node, index) => { + this.drawNode(node, 0.5 / layer.length + 0.5); + }); } } + bezierOffset = 5; + drawLine(node1: Node, node2: Node) { - this.ctx.strokeStyle = this.lineColor; + const lineColor: RgbColor = this.lerpColor(this.lineColor1, this.lineColor2, node1.y); + this.ctx.strokeStyle = `rgb(${lineColor.R}, ${lineColor.G}, ${lineColor.B})`; this.ctx.lineWidth = this.lineThickness; this.ctx.beginPath(); this.ctx.moveTo(node1.x * this.width, node1.y * this.height); - this.ctx.lineTo(node2.x * this.width, node2.y * this.height); + //this.ctx.lineTo(node2.x * this.width, node2.y * this.height); + const middle = (node1.x + (node2.x - node1.x) / 2) * this.width; + this.ctx.bezierCurveTo( + middle, node1.y * this.height, + middle, node2.y * this.height, + node2.x * this.width, node2.y * this.height); this.ctx.stroke(); } - drawNode(node: Node) { + drawNode(node: Node, sizeMult: number) { + const lineColor: RgbColor = this.lerpColor(this.lineColor1, this.lineColor2, node.y); + this.ctx.strokeStyle = `rgb(${lineColor.R}, ${lineColor.G}, ${lineColor.B})`; this.ctx.fillStyle = node.color; - this.ctx.strokeStyle = this.borderColor; this.ctx.lineWidth = this.lineThickness; this.ctx.beginPath(); - this.ctx.arc(node.x * this.width, node.y * this.height, this.nodeRadius, 0, 2 * Math.PI); + this.ctx.arc(node.x * this.width, node.y * this.height, this.nodeRadius * sizeMult, 0, 2 * Math.PI); this.ctx.fill(); this.ctx.stroke(); } @@ -135,6 +146,16 @@ export class GraphComponent implements AfterViewInit { this.draw(); } + + lerpColor(value1: RgbColor, value2: RgbColor, amount: number): RgbColor { + const newColor = new RgbColor(0, 0, 0); + amount = amount < 0 ? 0 : amount; + amount = amount > 1 ? 1 : amount; + newColor.R = value1.R + (value2.R - value1.R) * amount; + newColor.G = value1.G + (value2.G - value1.G) * amount; + newColor.B = value1.B + (value2.B - value1.B) * amount; + return newColor; + }; } class Node { -- cgit v1.2.3 From 6cfa4e691fd176c4d7fa67b67307d86bddfd7eeb Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Fri, 29 Apr 2022 00:54:55 +0200 Subject: Dodao responzivnost na dugmice za dodavanje i brisanje slojeva i neurona, ispravio BUG gde je bilo moguce dodati vise neurona za individualni sloj nego za sve slojeve. --- .../src/app/_elements/form-model/form-model.component.html | 10 +++++----- frontend/src/app/_elements/form-model/form-model.component.ts | 2 +- frontend/src/styles/theme.css | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') 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 d5187383..76601465 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -96,11 +96,11 @@
Broj Skrivenih Slojeva
-
{{newModel.hiddenLayers}}
- @@ -120,7 +120,7 @@
- Broj Neurona svih slojeva + Broj neurona svih slojeva
@@ -172,11 +172,11 @@
Broj čvorova
-
{{newModel.layers[i].neurons}}
-
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 e58d1764..2c78cd56 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -98,7 +98,7 @@ export class FormModelComponent implements AfterViewInit { } } addNeuron(index: number) { - if (this.newModel.layers[index].neurons < 100) { + if (this.newModel.layers[index].neurons < 18) { this.newModel.layers[index].neurons += 1; this.updateGraph(); } diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index a76f4714..ee7a2e61 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -54,11 +54,11 @@ a { .bubble { background-position: center; - transition: background 0.8s; + transition: background 0.2s; } .bubble:hover { - background: #47a7f5 radial-gradient(circle, transparent 1%, #47a7f5 1%) center/15000%; + background: var(--ns-primary-50) radial-gradient(circle, transparent 1%, var(--ns-accent) 1%) center/15000%; } .bubble:active { -- cgit v1.2.3 From fdf0b814fcc3ffe890384720f4e3d8d38f502c37 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Mon, 2 May 2022 20:28:08 +0200 Subject: Pomereni atributi iz experimenta u model na frontu i backu. Premesteni elementi za biranje test skupa iz column-table u form-model. --- backend/api/api/Models/Experiment.cs | 3 --- backend/api/api/Models/Model.cs | 3 +++ frontend/src/app/_data/Experiment.ts | 5 +---- frontend/src/app/_data/Model.ts | 7 ++++++- .../column-table/column-table.component.html | 14 -------------- .../_elements/column-table/column-table.component.ts | 7 ++----- .../app/_elements/form-model/form-model.component.css | 10 +++++++++- .../_elements/form-model/form-model.component.html | 19 ++++++++++++++++++- .../app/_elements/form-model/form-model.component.ts | 7 +++++-- 9 files changed, 44 insertions(+), 31 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/backend/api/api/Models/Experiment.cs b/backend/api/api/Models/Experiment.cs index f7bec083..cfff337c 100644 --- a/backend/api/api/Models/Experiment.cs +++ b/backend/api/api/Models/Experiment.cs @@ -16,9 +16,6 @@ namespace api.Models public string uploaderId { get; set; } public string[] inputColumns { get; set; } public string outputColumn { get; set; } - public bool randomOrder { get; set; } - public bool randomTestSet { get; set; } - public float randomTestSetDistribution { get; set; } public string nullValues { get; set; } public NullValues[] nullValuesReplacers { get; set; } public ColumnEncoding[] encodings { get; set; } diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs index a9dbfbdd..f89c8e56 100644 --- a/backend/api/api/Models/Model.cs +++ b/backend/api/api/Models/Model.cs @@ -38,5 +38,8 @@ namespace api.Models public int epochs { get; set; } //public bool isTrained { get; set; } //public NullValues[] nullValues { get; set; } + public bool randomOrder { get; set; } + public bool randomTestSet { get; set; } + public float randomTestSetDistribution { get; set; } } } diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts index 23fd77d4..ab87e3ca 100644 --- a/frontend/src/app/_data/Experiment.ts +++ b/frontend/src/app/_data/Experiment.ts @@ -13,10 +13,7 @@ export default class Experiment { public lastUpdated: Date = new Date(), public modelIds: string[] = [], - // Test set settings - public randomOrder: boolean = true, - public randomTestSet: boolean = true, - public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U + public encodings: ColumnEncoding[] = []//[{columnName: "", columnEncoding: Encoding.Label}] ) { } diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 6281748c..185e2257 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -23,7 +23,12 @@ export default class Model extends FolderFile { public epochs: number = 5, // TODO add to add-model form public inputColNum: number = 5, public learningRate: LearningRate = LearningRate.LR1, - public layers: Layer[] = [new Layer()] + public layers: Layer[] = [new Layer()], + + // Test set settings + public randomOrder: boolean = true, + public randomTestSet: boolean = true, + public randomTestSetDistribution: number = 0.1 //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U ) { super(name, dateCreated, lastUpdated); diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 42c43138..557b7be3 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -209,20 +209,6 @@
-
- -
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening - - Test
- -
-
-
- Nasumični redosled podataka -
-
-
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 4499196c..3f958aee 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -5,7 +5,6 @@ import { DatasetsService } from 'src/app/_services/datasets.service'; import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component'; import { MatDialog } from '@angular/material/dialog'; import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component'; -import { MatSliderChange } from '@angular/material/slider'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; @@ -28,7 +27,7 @@ export class ColumnTableComponent implements AfterViewInit { columnsChecked: boolean[] = []; //niz svih kolona - testSetDistribution: number = 70; + constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -145,9 +144,7 @@ export class ColumnTableComponent implements AfterViewInit { this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } - updateTestSet(event: MatSliderChange) { - this.testSetDistribution = event.value!; - } + MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) { 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 8c279523..9b55a814 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -84,4 +84,12 @@ hr { .m-2 { max-height: 20 rem; -} \ No newline at end of file +} + +mat-slider { + width: 40%; +} + +.slider { + background-color: var(--ns-bg-dark-100); +} 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 76601465..e51c2cac 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -85,7 +85,23 @@
+
+
+
+ +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening + + Test
+ +
+
+ Nasumični redosled podataka +
+ +
+
@@ -199,4 +215,5 @@
-
\ 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 2c78cd56..d5c497aa 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -4,7 +4,7 @@ import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; import Model, { Layer, ActivationFunction, LossFunction, LearningRate, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType, Regularisation, RegularisationRate, BatchSize } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; - +import { MatSliderChange } from '@angular/material/slider'; @Component({ selector: 'app-form-model', @@ -15,7 +15,7 @@ export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter(); - + testSetDistribution: number = 70; constructor() { } ngAfterViewInit(): void { @@ -132,6 +132,9 @@ export class FormModelComponent implements AfterViewInit { this.updateGraph(); } } + updateTestSet(event: MatSliderChange) { + this.testSetDistribution = event.value!; + } -- cgit v1.2.3 From 2fbc26bb36c79c9b86a8eb9818b85b1c52a16159 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 3 May 2022 21:24:20 +0200 Subject: Ispravio bug gde se graf nije prikazivao dok se strane ne resize-uje. --- .../column-table/column-table.component.css | 5 +- .../src/app/_elements/folder/folder.component.html | 2 +- .../src/app/_elements/folder/folder.component.ts | 35 +-- .../_elements/form-model/form-model.component.html | 341 +++++++++++---------- .../_elements/form-model/form-model.component.ts | 14 +- .../src/app/_elements/graph/graph.component.ts | 3 +- .../_pages/experiment/experiment.component.html | 2 +- 7 files changed, 198 insertions(+), 204 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index aee2314e..0477b7be 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -189,8 +189,9 @@ table ::ng-deep .mat-form-field-wrapper { } .hidden { - visibility: hidden; - height: 1px; + /*visibility: hidden; + height: 1px;*/ + display: none; } .bottom-button { diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index e77f837e..113db616 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -66,7 +66,7 @@ zoom_out_map
- +
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index e0336ded..e92ea468 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -9,6 +9,7 @@ import { FormDatasetComponent } from '../form-dataset/form-dataset.component'; import Experiment from 'src/app/_data/Experiment'; import { ExperimentsService } from 'src/app/_services/experiments.service'; import { PredictorsService } from 'src/app/_services/predictors.service'; +import { FormModelComponent } from '../form-model/form-model.component'; @Component({ selector: 'app-folder', @@ -17,18 +18,16 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; }) export class FolderComponent implements AfterViewInit { - @ViewChild(FormDatasetComponent) formDataset?: FormDatasetComponent; - - - + @ViewChild(FormDatasetComponent) formDataset!: FormDatasetComponent; + @ViewChild(FormModelComponent) formModel!: FormModelComponent; @Input() folderName: string = 'Moji podaci'; @Input() files!: FolderFile[] - newFile!: Dataset | Model; + newFile?: Dataset | Model; @Input() type: FolderType = FolderType.Dataset; - @Input() forExperiment?: Experiment; + @Input() forExperiment!: Experiment; @Input() startingTab: TabType = TabType.MyDatasets; newFileSelected: boolean = true; @@ -45,24 +44,22 @@ export class FolderComponent implements AfterViewInit { searchTerm: string = ''; constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService) { - //PLACEHOLDER - this.forExperiment = new Experiment(); - this.forExperiment.inputColumns = ['kolona1', 'kol2', '???', 'test']; - - this.folders[TabType.File] = []; - this.folders[TabType.NewFile] = []; + this.tabsToShow.forEach(tab => this.folders[tab] = []); + this.files = []; + this.filteredFiles = [] + this.selectTab(this.startingTab); } ngAfterViewInit(): void { this.refreshFiles(); } - _initialized = false; - displayFile() { if (this.type == FolderType.Dataset) - this.formDataset!.dataset = this.fileToDisplay; + this.formDataset.dataset = this.fileToDisplay; + else if (this.type == FolderType.Model) + this.formModel.newModel = this.fileToDisplay; } hoverOverFile(i: number) { @@ -142,12 +139,7 @@ export class FolderComponent implements AfterViewInit { this.folders[TabType.MyExperiments] = experiments; }); - if (!this._initialized) { - this.selectTab(this.startingTab); - this._initialized = true; - } - else - this.searchTermsChanged(); + this.searchTermsChanged(); } saveNewFile() { @@ -232,7 +224,6 @@ export class FolderComponent implements AfterViewInit { selectTab(tab: TabType) { if (tab == TabType.NewFile) { - this.selectNewFile(); } 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 e51c2cac..fa57ad46 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -1,219 +1,220 @@ -
-
+
+
+
+ +
+ + Naziv + + +
+
+ + Tip problema + + + {{ optionName }} + + + +
+ +
+ +
+ + Optimizacija + + + {{ optionName }} + + + + +
+
+ + Funkcija troška + + + {{ optionName }} + + + +
+ +
+ +
+ + Funkcija aktivacije izlaznog sloja + + + {{ optionName }} + + + +
+
+ + Stopa učenja + + + {{ optionName }} + + + +
+ +
+ +
+ + Broj epoha + + +
+
+ + Broj uzoraka po iteraciji + + + {{option}} + + +
-
- - Naziv - -
-
- - Tip problema - - - {{ optionName }} - - - +
+
+
+
+ +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening + + Test
+ +
+
+ Nasumični redosled podataka +
+ +
+
-
+ +
+
+ +
+
-
- - Optimizacija - - - {{ optionName }} - - +
+
Broj Skrivenih Slojeva
+ +
{{newModel.hiddenLayers}}
+ -
+
- Funkcija troška - - + Aktivaciona funkcija svih slojeva + + + {{ optionName }}
-
-
- Funkcija aktivacije izlaznog sloja - - - {{ optionName }} - - + Broj neurona svih slojeva +
+
- Stopa učenja - - + Regularizacija svih slojeva + + {{ optionName }}
-
-
- Broj epoha - - -
-
- - Broj uzoraka po iteraciji - - - {{option}} + Stopa regularizacije svih slojeva + + + {{ optionName }} +
-
-
-
-
-
- -
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening - - Test
- -
-
- Nasumični redosled podataka -
-
-
- - -
-
- -
-
- -
-
Broj Skrivenih Slojeva
- -
{{newModel.hiddenLayers}}
- - -
-
-
- - Aktivaciona funkcija svih slojeva - - - - {{ optionName }} - - - -
- -
- - Broj neurona svih slojeva - - -
-
-
- - Regularizacija svih slojeva - - - {{ optionName }} - - - -
- -
- - Stopa regularizacije svih slojeva - - - {{ optionName }} - - - -
- - -
- -
+ +
-
+
- - Aktivacija - - - - {{ optionName }} - - - - -
-
Broj čvorova
- -
{{newModel.layers[i].neurons}}
- -
+
- - Regularizacija - - - {{ optionName }} - - - - - - Stopa regularizacije - - - {{ optionName }} - - - -
-
+ + Regularizacija + + + {{ optionName }} + + + + + Stopa regularizacije + + + {{ optionName }} + + + +
+
+
\ 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 d5c497aa..ef456547 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -13,13 +13,12 @@ import { MatSliderChange } from '@angular/material/slider'; }) export class FormModelComponent implements AfterViewInit { @ViewChild(GraphComponent) graph!: GraphComponent; - @Input() forExperiment?: Experiment; + @Input() forExperiment!: Experiment; @Output() selectedModelChangeEvent = new EventEmitter(); testSetDistribution: number = 70; constructor() { } - ngAfterViewInit(): void { - } + ngAfterViewInit(): void { } selectFormControl = new FormControl('', Validators.required); nameFormControl = new FormControl('', [Validators.required, Validators.email]); @@ -34,8 +33,7 @@ export class FormModelComponent implements AfterViewInit { selectRegularisationFormControl = new FormControl('', Validators.required); selectRRateFormControl = new FormControl('', Validators.required); - newModel: Model = new Model(); - myModels?: Model[]; + newModel!: Model; selectedModel?: Model; @@ -57,7 +55,9 @@ export class FormModelComponent implements AfterViewInit { selectedMetrics = []; lossFunction: any = LossFunction; - showMyModels: boolean = true; + loadModel(model: Model) { + this.newModel = model; + } updateGraph() { //console.log(this.newModel.layers); @@ -121,7 +121,6 @@ export class FormModelComponent implements AfterViewInit { } } changeAllRegularisationRate() { - for (let i = 0; i < this.newModel.layers.length; i++) { this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate; } @@ -132,6 +131,7 @@ export class FormModelComponent implements AfterViewInit { this.updateGraph(); } } + updateTestSet(event: MatSliderChange) { this.testSetDistribution = event.value!; } diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 31814c2c..c7f8d964 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -28,7 +28,7 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#dfd7d7'; private ctx!: CanvasRenderingContext2D; - @Input() inputColumns?: string[] = []; + @Input() inputColumns?: string[] = ['Nije odabran eksperiment']; constructor() { } @@ -43,6 +43,7 @@ export class GraphComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.update(); this.resize(); + console.log(this.layers); } layers: Node[][] = []; diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 4b75c929..74c59fdf 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -37,7 +37,7 @@
- +
-- cgit v1.2.3 From c746191b225f3e59f4b7b0cee6a01c2e5bf00271 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 4 May 2022 18:17:28 +0200 Subject: Dodao dodavanje modela i popravio klasu model na beku. --- backend/api/api/Controllers/ModelController.cs | 3 ++ backend/api/api/Models/Model.cs | 14 ++++++- backend/api/api/Services/FillAnEmptyDb.cs | 6 --- .../src/app/_elements/folder/folder.component.html | 19 ++++------ .../src/app/_elements/folder/folder.component.ts | 43 ++++++++++++++++++++-- .../form-dataset/form-dataset.component.ts | 20 +++++----- .../_elements/form-model/form-model.component.ts | 3 -- 7 files changed, 73 insertions(+), 35 deletions(-) (limited to 'frontend/src/app/_elements/form-model/form-model.component.ts') diff --git a/backend/api/api/Controllers/ModelController.cs b/backend/api/api/Controllers/ModelController.cs index fb30a7a2..d68e98e2 100644 --- a/backend/api/api/Controllers/ModelController.cs +++ b/backend/api/api/Controllers/ModelController.cs @@ -187,8 +187,11 @@ namespace api.Controllers /*if (_modelService.CheckHyperparameters(1, model.hiddenLayerNeurons, model.hiddenLayers, model.outputNeurons) == false) return BadRequest("Bad parameters!");*/ + model.uploaderId = getUserId(); + var existingModel = _modelService.GetOneModel(model.uploaderId, model.name); + if (existingModel != null && !overwrite) return NotFound($"Model with name = {model.name} exisits"); else diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs index f89c8e56..d8921713 100644 --- a/backend/api/api/Models/Model.cs +++ b/backend/api/api/Models/Model.cs @@ -26,12 +26,11 @@ namespace api.Models public string optimizer { get; set; } public string lossFunction { get; set; } //public int inputNeurons { get; set; } - public int hiddenLayerNeurons { get; set; } public int hiddenLayers { get; set; } public int batchSize { get; set; } // na izlazu je moguce da bude vise neurona (klasifikacioni problem sa vise od 2 klase) public int outputNeurons { get; set; } - public string[] hiddenLayerActivationFunctions { get; set; } + public Layer[] layers { get; set; } public string outputLayerActivationFunction { get; set; } public string[] metrics { get; set; } @@ -42,4 +41,15 @@ namespace api.Models public bool randomTestSet { get; set; } public float randomTestSetDistribution { get; set; } } + + public class Layer + { + public int layerNumber { get; set; } + public string activationFunction { get; set; } + public int neurons { get; set; } + public string regularisation { get; set; } + public float regularisationRate { get; set; } + } } + + diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs index d1208c9c..1b6b8bbf 100644 --- a/backend/api/api/Services/FillAnEmptyDb.cs +++ b/backend/api/api/Services/FillAnEmptyDb.cs @@ -98,11 +98,9 @@ namespace api.Services model.type = "binarni-klasifikacioni"; model.optimizer = "Adam"; model.lossFunction = "mean_squared_error"; - model.hiddenLayerNeurons = 3; model.hiddenLayers = 5; model.batchSize = 8; model.outputNeurons = 0; - model.hiddenLayerActivationFunctions = new string[] { "relu", "relu", "relu", "relu", "relu" }; model.outputLayerActivationFunction = "sigmoid"; model.metrics = new string[] { }; model.epochs = 5; @@ -212,11 +210,9 @@ namespace api.Services model.type = "regresioni"; model.optimizer = "Adam"; model.lossFunction = "mean_absolute_error"; - model.hiddenLayerNeurons = 2; model.hiddenLayers = 4; model.batchSize = 5; model.outputNeurons = 0; - model.hiddenLayerActivationFunctions = new string[] { "relu", "relu", "relu", "relu" }; model.outputLayerActivationFunction = "relu"; model.metrics = new string[] { }; model.epochs = 5; @@ -321,11 +317,9 @@ namespace api.Services model.type = "multi-klasifikacioni"; model.optimizer = "Adam"; model.lossFunction = "sparse_categorical_crossentropy"; - model.hiddenLayerNeurons = 3; model.hiddenLayers = 3; model.batchSize = 4; model.outputNeurons = 0; - model.hiddenLayerActivationFunctions = new string[] { "relu", "relu", "softmax" }; model.outputLayerActivationFunction = "softmax"; model.metrics = new string[] { }; model.epochs = 1; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 113db616..48b59dc8 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -30,20 +30,20 @@
-
+ -
+ @@ -55,16 +55,13 @@
-
- - -
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 1e57fdf1..20ca1121 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -137,6 +137,7 @@ export class FolderComponent implements AfterViewInit { }); this.modelsService.getMyModels().subscribe((models) => { + console.log(models); this.folders[TabType.MyModels] = models; }); @@ -160,8 +161,26 @@ export class FolderComponent implements AfterViewInit { } saveNewFile() { - if (this.type == FolderType.Dataset) - this.formDataset!.uploadDataset(); + switch (this.type) { + case FolderType.Dataset: + this.formDataset!.uploadDataset((dataset: Dataset) => { + Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); + this.refreshFiles(dataset._id); + }, + () => { + Shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); + }); + break; + case FolderType.Model: + this.modelsService.addModel(this.formModel.newModel).subscribe(model => { + this.formModel.newModel = model; + Shared.openDialog("Obaveštenje", "Uspešno ste dodali novu konfiguraciju neuronske mreže u kolekciju."); + this.refreshFiles(null); // todo select model + }, (err) => { + Shared.openDialog("Neuspeo pokušaj!", "Konfiguracija neuronske mreže sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeću konfiguraciju."); + }); + break; + } } @@ -207,8 +226,26 @@ export class FolderComponent implements AfterViewInit { this.listView = !this.listView; } - deleteFile() { + deleteFile(file: FolderFile) { console.log('delete'); + switch (this.type) { + case FolderType.Dataset: + this.datasetsService.deleteDataset(file).subscribe((response) => { + console.log(response); + }); + break; + case FolderType.Model: + this.modelsService.deleteModel(file).subscribe((response) => { + console.log(response); + }); + break; + case FolderType.Experiment: + // this.experimentsService.deleteExperiment(file).subscribe((response) => { + // console.log(response); + // }); + //todo delete za predictor + break; + } } folders: { [tab: number]: FolderFile[] } = {}; diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts index 5e088e46..62afaa47 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -5,7 +5,7 @@ import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; import { DatatableComponent, TableData } from '../datatable/datatable.component'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; -import {FormControl, Validators} from '@angular/forms'; +import { FormControl, Validators } from '@angular/forms'; @Component({ selector: 'app-form-dataset', @@ -18,7 +18,7 @@ export class FormDatasetComponent { nameFormControl = new FormControl('', [Validators.required, Validators.email]); - delimiterOptions: Array = [",", ";", "|", "razmak", "novi red"]; //podrazumevano "," + delimiterOptions: Array = [",", ";", "|", "razmak", "novi red"]; //podrazumevano "," csvRecords: any[] = []; files: File[] = []; @@ -29,7 +29,7 @@ export class FormDatasetComponent { tableData: TableData = new TableData(); - @ViewChild('fileInput') fileInput! : ElementRef + @ViewChild('fileInput') fileInput!: ElementRef filename: String; @@ -65,7 +65,7 @@ export class FormDatasetComponent { if (typeof fileReader.result === 'string') { const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter) - + this.csvRecords = result.splice(0, 11); this.colsNumber = result[0].length; @@ -91,28 +91,28 @@ export class FormDatasetComponent { this.dataset.accessibleByLink = true; } - uploadDataset() { + uploadDataset(onSuccess: Function = (dataset: Dataset) => { }, onError: Function = () => { }) { if (this.files[0] == undefined) { shared.openDialog("Greška", "Niste izabrali fajl za učitavanje."); return; } - this.modelsService.uploadData(this.files[0]).subscribe((file) => { + return this.modelsService.uploadData(this.files[0]).subscribe((file) => { //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); this.dataset._id = ""; this.dataset.fileId = file._id; this.dataset.uploaderId = shared.userId; this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { - shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); + onSuccess(); }, (error) => { - shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); + onError(); }); //kraj addDataset subscribe }, (error) => { - + onError(); }); //kraj uploadData subscribe } - + } 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 ef456547..71b374b0 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -135,7 +135,4 @@ export class FormModelComponent implements AfterViewInit { updateTestSet(event: MatSliderChange) { this.testSetDistribution = event.value!; } - - - } -- cgit v1.2.3