From f897b364af1c814ef2ffed2da989c4e35947a4cb Mon Sep 17 00:00:00 2001 From: Ivan Ljubisavljevic Date: Mon, 18 Apr 2022 01:14:31 +0200 Subject: Izmena na frontu i ml-u(username -> userId) #71 --- frontend/src/app/_data/Model.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/app/_data/Model.ts') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 1af3fe30..b273f56a 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -19,7 +19,7 @@ export default class Model { public batchSize: number = 5, public hiddenLayerActivationFunctions: string[] = ['sigmoid'], public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, - public username: string = '', + public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5 // TODO add to add-model form ) { } -- 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/_data/Model.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/_data/Model.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 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/_data/Model.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/_data/Model.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/_data/Model.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 9d73bc044eaea6176556935a81db8e654476e6f1 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković 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/_data/Model.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 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/_data/Model.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 0e945bd6f428edb13718aed247209f215b93e735 Mon Sep 17 00:00:00 2001 From: Ivan Ljubisavljevic Date: Wed, 4 May 2022 20:27:55 +0200 Subject: Update, delete - Dataset, Model, Experiment. Public models... --- backend/api/api/Controllers/DatasetController.cs | 14 ++++++---- .../api/api/Controllers/ExperimentController.cs | 32 ++++++++++++++++++++-- backend/api/api/Controllers/ModelController.cs | 10 ++++--- backend/api/api/Interfaces/IDatasetService.cs | 3 +- backend/api/api/Interfaces/IExperimentService.cs | 3 +- backend/api/api/Interfaces/IModelService.cs | 6 ++-- backend/api/api/Models/Model.cs | 2 ++ backend/api/api/Services/DatasetService.cs | 31 +++++++++++++++------ backend/api/api/Services/ExperimentService.cs | 21 ++++++++++---- backend/api/api/Services/FillAnEmptyDb.cs | 10 +++++-- backend/api/api/Services/ModelService.cs | 14 +++++++--- frontend/src/app/_data/Model.ts | 4 ++- frontend/src/app/_services/models.service.ts | 5 ++++ 13 files changed, 117 insertions(+), 38 deletions(-) (limited to 'frontend/src/app/_data/Model.ts') diff --git a/backend/api/api/Controllers/DatasetController.cs b/backend/api/api/Controllers/DatasetController.cs index 58a903eb..1873d9ec 100644 --- a/backend/api/api/Controllers/DatasetController.cs +++ b/backend/api/api/Controllers/DatasetController.cs @@ -18,14 +18,14 @@ namespace api.Controllers private readonly IFileService _fileService; private IJwtToken jwtToken; - public DatasetController(IDatasetService datasetService, IConfiguration configuration,IJwtToken Token,IMlConnectionService mlConnectionService, IFileService fileService) + public DatasetController(IDatasetService datasetService, IConfiguration configuration, IJwtToken Token, IMlConnectionService mlConnectionService, IFileService fileService) { _datasetService = datasetService; _mlConnectionService = mlConnectionService; _fileService = fileService; jwtToken = Token; } - + public string getUserId() { string userId; @@ -116,7 +116,7 @@ namespace api.Controllers if (userId == null) return BadRequest(); - var dataset = _datasetService.GetOneDataset(userId, name); + var dataset = _datasetService.GetOneDatasetN(userId, name); if (dataset == null) return NotFound($"Dataset with name = {name} not found or dataset is not public or not preprocessed"); @@ -129,11 +129,13 @@ namespace api.Controllers public async Task> Post([FromBody] Dataset dataset) { string uploaderId = getUserId(); - + + dataset.uploaderId = uploaderId; + //da li ce preko tokena da se ubaci username ili front salje //dataset.username = usernameToken; //username = "" ako je GUEST DODAO - var existingDataset = _datasetService.GetOneDataset(dataset.uploaderId, dataset.name); + var existingDataset = _datasetService.GetOneDatasetN(dataset.uploaderId, dataset.name); if (existingDataset != null) return NotFound($"Dateset with name = {dataset.name} exisits"); @@ -142,7 +144,7 @@ namespace api.Controllers FileModel fileModel = _fileService.getFile(dataset.fileId); dataset.isPreProcess = false; _datasetService.Create(dataset); - _mlConnectionService.PreProcess(dataset,fileModel.path,uploaderId); + _mlConnectionService.PreProcess(dataset, fileModel.path, uploaderId); return Ok(); } } diff --git a/backend/api/api/Controllers/ExperimentController.cs b/backend/api/api/Controllers/ExperimentController.cs index eecbe756..1cac386a 100644 --- a/backend/api/api/Controllers/ExperimentController.cs +++ b/backend/api/api/Controllers/ExperimentController.cs @@ -53,6 +53,7 @@ namespace api.Controllers return BadRequest(); experiment.uploaderId = uploaderId; + var existingExperiment = _experimentService.Get(uploaderId, experiment.name); if(existingExperiment != null) return NotFound($"Experiment with this name exists"); @@ -99,10 +100,10 @@ namespace api.Controllers if (uploaderId == null) return BadRequest(); - var existingDataset = _experimentService.GetOneExperiment(uploaderId, id); + var existingExperiment = _experimentService.GetOneExperiment(uploaderId, id); //ne mora da se proverava - if (existingDataset == null) + if (existingExperiment == null) return NotFound($"Experiment with ID = {id} or user with ID = {uploaderId} not found"); experiment.lastUpdated = DateTime.UtcNow; @@ -111,5 +112,32 @@ namespace api.Controllers return Ok($"Experiment with ID = {id} updated"); } + + // DELETE api//name + [HttpDelete("{id}")] + [Authorize(Roles = "User")] + public ActionResult Delete(string id) + { + string uploaderId = getUserId(); + + if (uploaderId == null) + return BadRequest(); + + var experiment = _experimentService.GetOneExperiment(uploaderId, id); + + if (experiment == null) + return NotFound($"Experiment with ID = {id} or user with ID = {uploaderId} not found"); + + _experimentService.Delete(experiment.uploaderId, experiment._id); + + return Ok($"Experiment with ID = {id} deleted"); + + } + + public void DeleteHelper(string uploaderId, string experimentId) + { + _experimentService.Delete(uploaderId, experimentId); + } + } } diff --git a/backend/api/api/Controllers/ModelController.cs b/backend/api/api/Controllers/ModelController.cs index d68e98e2..2916fa98 100644 --- a/backend/api/api/Controllers/ModelController.cs +++ b/backend/api/api/Controllers/ModelController.cs @@ -91,10 +91,12 @@ namespace api.Controllers return Ok(); } - - - - + // GET: api//publicmodels + [HttpGet("publicmodels")] + public ActionResult> GetPublicModels() + { + return _modelService.GetPublicModels(); + } // GET: api//mymodels [HttpGet("mymodels")] diff --git a/backend/api/api/Interfaces/IDatasetService.cs b/backend/api/api/Interfaces/IDatasetService.cs index f493a2ec..2f7d0010 100644 --- a/backend/api/api/Interfaces/IDatasetService.cs +++ b/backend/api/api/Interfaces/IDatasetService.cs @@ -5,7 +5,8 @@ namespace api.Services { public interface IDatasetService { - Dataset GetOneDataset(string userId, string name); + Dataset GetOneDataset(string userId, string id); + Dataset GetOneDatasetN(string userId, string name); Dataset GetOneDataset(string id); List SearchDatasets(string name); List GetMyDatasets(string userId); diff --git a/backend/api/api/Interfaces/IExperimentService.cs b/backend/api/api/Interfaces/IExperimentService.cs index 2a69cff9..311560e8 100644 --- a/backend/api/api/Interfaces/IExperimentService.cs +++ b/backend/api/api/Interfaces/IExperimentService.cs @@ -8,8 +8,9 @@ namespace api.Services public Experiment Get(string id); public List GetMyExperiments(string id); public Experiment Get(string uploaderId, string name); - Experiment GetOneExperiment(string userId, string name); + Experiment GetOneExperiment(string userId, string id); void Update(string userId, string id, Experiment experiment); + void Delete(string userId, string id); } } \ No newline at end of file diff --git a/backend/api/api/Interfaces/IModelService.cs b/backend/api/api/Interfaces/IModelService.cs index 00299979..8c4543de 100644 --- a/backend/api/api/Interfaces/IModelService.cs +++ b/backend/api/api/Interfaces/IModelService.cs @@ -3,14 +3,14 @@ using api.Models; namespace api.Services { - public interface IModelService - { + public interface IModelService + { Model GetOneModel(string userId, string name); Model GetOneModel(string id); List GetMyModels(string userId); List GetMyModelsByType(string userId, string problemType); List GetLatestModels(string userId); - //List GetPublicModels(); + List GetPublicModels(); Model Create(Model model); Model Replace(Model model); void Update(string userId, string name, Model model); diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs index d8921713..f95be715 100644 --- a/backend/api/api/Models/Model.cs +++ b/backend/api/api/Models/Model.cs @@ -40,6 +40,8 @@ namespace api.Models public bool randomOrder { get; set; } public bool randomTestSet { get; set; } public float randomTestSetDistribution { get; set; } + public bool isPublic { get; set; } + public bool accessibleByLink { get; set; } } public class Layer diff --git a/backend/api/api/Services/DatasetService.cs b/backend/api/api/Services/DatasetService.cs index f39cac29..f38a363b 100644 --- a/backend/api/api/Services/DatasetService.cs +++ b/backend/api/api/Services/DatasetService.cs @@ -1,4 +1,5 @@ -using api.Interfaces; +using api.Controllers; +using api.Interfaces; using api.Models; using MongoDB.Driver; @@ -7,11 +8,15 @@ namespace api.Services public class DatasetService : IDatasetService { private readonly IMongoCollection _dataset; + private readonly IMongoCollection _experiment; + private readonly IExperimentService _experimentService; - public DatasetService(IUserStoreDatabaseSettings settings, IMongoClient mongoClient) + public DatasetService(IUserStoreDatabaseSettings settings, IMongoClient mongoClient, IExperimentService experimentService) { var database = mongoClient.GetDatabase(settings.DatabaseName); _dataset = database.GetCollection(settings.DatasetCollectionName); + _experiment = database.GetCollection(settings.ExperimentCollectionName); + _experimentService = experimentService; } public List SearchDatasets(string name) @@ -29,7 +34,13 @@ namespace api.Services //brisanje odredjenog name-a public void Delete(string userId, string id) { - _dataset.DeleteOne(dataset => (dataset.uploaderId == userId && dataset._id == id)); + List experiment = null; + _dataset.DeleteOne(dataset => (dataset.uploaderId == userId && dataset._id == id)); + + experiment = _experiment.Find(experiment => (experiment.datasetId == id && experiment.uploaderId == userId)).ToList(); + + foreach (Experiment experimentItem in experiment) + _experimentService.Delete(userId, experimentItem._id); } public List GetMyDatasets(string userId) @@ -39,7 +50,7 @@ namespace api.Services public List GetGuestDatasets() { //Join Igranonica public datasetove sa svim temp uploadanim datasetovima - List datasets= _dataset.Find(dataset => dataset.uploaderId == "000000000000000000000000" && dataset.isPublic == true && dataset.isPreProcess).ToList(); + List datasets = _dataset.Find(dataset => dataset.uploaderId == "000000000000000000000000" && dataset.isPublic == true && dataset.isPreProcess).ToList(); datasets.AddRange(_dataset.Find(dataset => dataset.uploaderId == "" && dataset.isPreProcess).ToList()); return datasets; } @@ -49,7 +60,7 @@ namespace api.Services { List list = _dataset.Find(dataset => dataset.uploaderId == userId && dataset.isPreProcess).ToList(); - if(ascdsc) + if (ascdsc) list = list.OrderBy(dataset => dataset.lastUpdated).ToList(); else list = list.OrderByDescending(dataset => dataset.lastUpdated).ToList(); @@ -62,7 +73,11 @@ namespace api.Services return _dataset.Find(dataset => dataset.isPublic == true && dataset.isPreProcess).ToList(); } - public Dataset GetOneDataset(string userId, string name) + public Dataset GetOneDataset(string userId, string id) + { + return _dataset.Find(dataset => dataset.uploaderId == userId && dataset._id == id && dataset.isPreProcess).FirstOrDefault(); + } + public Dataset GetOneDatasetN(string userId, string name) { return _dataset.Find(dataset => dataset.uploaderId == userId && dataset.name == name && dataset.isPreProcess).FirstOrDefault(); } @@ -74,13 +89,13 @@ namespace api.Services } //ako je potrebno da se zameni name ili ekstenzija - public void Update(string userId, string id, Dataset dataset ) + public void Update(string userId, string id, Dataset dataset) { _dataset.ReplaceOne(dataset => dataset.uploaderId == userId && dataset._id == id, dataset); } public void Update(Dataset dataset) { - _dataset.ReplaceOne(x=>x._id==dataset._id, dataset); + _dataset.ReplaceOne(x => x._id == dataset._id, dataset); } public string GetDatasetId(string fileId) diff --git a/backend/api/api/Services/ExperimentService.cs b/backend/api/api/Services/ExperimentService.cs index 539e4c08..2ad9d606 100644 --- a/backend/api/api/Services/ExperimentService.cs +++ b/backend/api/api/Services/ExperimentService.cs @@ -7,10 +7,13 @@ namespace api.Services public class ExperimentService : IExperimentService { private readonly IMongoCollection _experiment; + private readonly IMongoCollection _predictor; + public ExperimentService(IUserStoreDatabaseSettings settings, IMongoClient mongoClient) { var database = mongoClient.GetDatabase(settings.DatabaseName); _experiment = database.GetCollection(settings.ExperimentCollectionName); + _predictor = database.GetCollection(settings.PredictorCollectionName); } public Experiment Create(Experiment experiment) @@ -20,31 +23,37 @@ namespace api.Services } public Experiment Get(string id) { - return _experiment.Find(exp=>exp._id == id).FirstOrDefault(); + return _experiment.Find(exp => exp._id == id).FirstOrDefault(); } public Experiment Get(string uploaderId, string name) { - return _experiment.Find(exp => exp.uploaderId == uploaderId && exp.name == name ).FirstOrDefault(); + return _experiment.Find(exp => exp.uploaderId == uploaderId && exp.name == name).FirstOrDefault(); } public void Update(string id, Experiment experiment) { _experiment.ReplaceOne(experiment => experiment._id == id, experiment); } - public List GetMyExperiments(string id) + public List GetMyExperiments(string userId) { - return _experiment.Find(e=>e.uploaderId==id).ToList(); + return _experiment.Find(experiment => experiment.uploaderId == userId).ToList(); } - public Experiment GetOneExperiment(string userId, string name) + public Experiment GetOneExperiment(string userId, string id) { - return _experiment.Find(experiment => experiment.uploaderId == userId && experiment.name == name).FirstOrDefault(); + return _experiment.Find(experiment => experiment.uploaderId == userId && experiment._id == id).FirstOrDefault(); } public void Update(string userId, string id, Experiment experiment) { _experiment.ReplaceOne(experiment => experiment.uploaderId == userId && experiment._id == id, experiment); } + + public void Delete(string userId, string id) + { + _experiment.DeleteOne(experiment => (experiment.uploaderId == userId && experiment._id == id)); + _predictor.DeleteMany(predictor => (predictor.uploaderId == userId && predictor.experimentId == id)); + } } } diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs index 99bbb91f..6148efb6 100644 --- a/backend/api/api/Services/FillAnEmptyDb.cs +++ b/backend/api/api/Services/FillAnEmptyDb.cs @@ -19,9 +19,9 @@ namespace api.Services var database = mongoClient.GetDatabase(settings.DatabaseName); _fileService = new FileService(settings, mongoClient); - _datasetService = new DatasetService(settings, mongoClient); - _modelService = new ModelService(settings, mongoClient); _experimentService = new ExperimentService(settings, mongoClient); + _datasetService = new DatasetService(settings, mongoClient, _experimentService); + _modelService = new ModelService(settings, mongoClient); _predictorService = new PredictorService(settings, mongoClient); } @@ -104,6 +104,8 @@ namespace api.Services model.outputLayerActivationFunction = "sigmoid"; model.metrics = new string[] { }; model.epochs = 5; + model.isPublic = true; + model.accessibleByLink = true; _modelService.Create(model); @@ -215,6 +217,8 @@ namespace api.Services model.outputLayerActivationFunction = "relu"; model.metrics = new string[] { }; model.epochs = 5; + model.isPublic = true; + model.accessibleByLink = true; _modelService.Create(model); @@ -321,6 +325,8 @@ namespace api.Services model.outputLayerActivationFunction = "softmax"; model.metrics = new string[] { }; model.epochs = 1; + model.isPublic = true; + model.accessibleByLink = true; _modelService.Create(model); diff --git a/backend/api/api/Services/ModelService.cs b/backend/api/api/Services/ModelService.cs index 12297635..e852d71f 100644 --- a/backend/api/api/Services/ModelService.cs +++ b/backend/api/api/Services/ModelService.cs @@ -5,14 +5,16 @@ using MongoDB.Driver; namespace api.Services { - public class ModelService : IModelService + public class ModelService : IModelService { private readonly IMongoCollection _model; + private readonly IMongoCollection _predictor; public ModelService(IUserStoreDatabaseSettings settings, IMongoClient mongoClient) { var database = mongoClient.GetDatabase(settings.DatabaseName); _model = database.GetCollection(settings.ModelCollectionName); + _predictor = database.GetCollection(settings.PredictorCollectionName); } public Model Create(Model model) @@ -28,7 +30,11 @@ namespace api.Services public void Delete(string userId, string name) { + Model model = _model.Find(model => model.uploaderId == userId && model.name == name).FirstOrDefault(); + _model.DeleteOne(model => (model.uploaderId == userId && model.name == name)); + _predictor.DeleteMany(predictor => (predictor.uploaderId == userId && predictor.modelId == model._id)); + } public List GetMyModels(string userId) @@ -48,12 +54,12 @@ namespace api.Services return list; } - /* + public List GetPublicModels() { return _model.Find(model => model.isPublic == true).ToList(); } - */ + public Model GetOneModel(string userId, string name) { return _model.Find(model => model.uploaderId == userId && model.name == name).FirstOrDefault(); @@ -93,7 +99,7 @@ namespace api.Services return false; else return true; - + } } } diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 185e2257..526a8290 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -28,8 +28,10 @@ export default class Model extends FolderFile { // 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 randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U + public isPublic: boolean = false, + public accessibleByLink: boolean = false ) { super(name, dateCreated, lastUpdated); } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index d79e2781..fc888556 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -53,4 +53,9 @@ export class ModelsService { deleteModel(model: Model) { return this.http.delete(`${Configuration.settings.apiURL}/model/` + model.name, { headers: this.authService.authHeader(), responseType: "text" }); } + + getPublicModels(): Observable { + return this.http.get(`${Configuration.settings.apiURL}/model/publicmodels`, { headers: this.authService.authHeader() }); + } + } -- cgit v1.2.3