From bcd4852ea7964e15f4ad7d0061522da42d866d37 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 19 Apr 2022 02:28:18 +0200 Subject: Dodao komponentu za prikaz dataseta sa tabelama. Promenio scrollbar i home stranicu. Zapoceo trening stranicu. --- frontend/src/app/_elements/graph/graph.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/app/_elements/graph') diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 1c21fb6c..92e9df38 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 -- 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/graph') 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 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/graph') 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/_elements/graph') 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 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/graph') 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 8462d0080036650a9e79a379a06ae395ccacf0c8 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 3 May 2022 22:43:30 +0200 Subject: Ispravio gresku pri otvaranju folder komponente sa izabranim novim fajlom. --- .../src/app/_elements/folder/folder.component.ts | 44 +++++++++++----------- .../src/app/_elements/graph/graph.component.css | 7 +++- .../src/app/_elements/graph/graph.component.html | 2 +- 3 files changed, 29 insertions(+), 24 deletions(-) (limited to 'frontend/src/app/_elements/graph') diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index e92ea468..b7a2e5d4 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -28,7 +28,7 @@ export class FolderComponent implements AfterViewInit { @Input() type: FolderType = FolderType.Dataset; @Input() forExperiment!: Experiment; - @Input() startingTab: TabType = TabType.MyDatasets; + @Input() startingTab!: TabType; newFileSelected: boolean = true; @@ -45,10 +45,6 @@ export class FolderComponent implements AfterViewInit { constructor(private datasetsService: DatasetsService, private experimentsService: ExperimentsService, private modelsService: ModelsService, private predictorsService: PredictorsService) { this.tabsToShow.forEach(tab => this.folders[tab] = []); - - this.files = []; - this.filteredFiles = [] - this.selectTab(this.startingTab); } ngAfterViewInit(): void { @@ -109,6 +105,8 @@ export class FolderComponent implements AfterViewInit { this.okPressed.emit(); } + _initialized: boolean = false; + refreshFiles() { this.tabsToShow.forEach(tab => { this.folders[tab] = []; @@ -139,6 +137,13 @@ export class FolderComponent implements AfterViewInit { this.folders[TabType.MyExperiments] = experiments; }); + if (!this._initialized) { + this.files = this.folders[this.startingTab]; + this.filteredFiles = []; + this.selectTab(this.startingTab); + this._initialized = true; + } + this.searchTermsChanged(); } @@ -169,6 +174,7 @@ export class FolderComponent implements AfterViewInit { filteredFiles: FolderFile[] = []; searchTermsChanged() { + if (!this.files) return; this.filteredFiles.length = 0; this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase()))); /*if (this.selectedFile) { @@ -223,19 +229,20 @@ export class FolderComponent implements AfterViewInit { hoverTab: TabType = TabType.None; selectTab(tab: TabType) { - if (tab == TabType.NewFile) { - this.selectNewFile(); - } + setTimeout(() => { + if (tab == TabType.NewFile) { + this.selectNewFile(); + } - this.listView = this.getListView(tab); - this.type = this.getFolderType(tab); - this.previousPrivacy = this.privacy; - this.privacy = this.getPrivacy(tab); - this.selectedTab = tab; - this.files = this.folders[tab]; + this.listView = this.getListView(tab); + this.type = this.getFolderType(tab); + this.privacy = this.getPrivacy(tab); + this.selectedTab = tab; + this.files = this.folders[tab]; - if (tab !== TabType.File && tab !== TabType.NewFile) - this.searchTermsChanged(); + if (tab !== TabType.File && tab !== TabType.NewFile) + this.searchTermsChanged(); + }); } getListView(tab: TabType) { @@ -270,15 +277,11 @@ export class FolderComponent implements AfterViewInit { } } - previousPrivacy: Privacy = Privacy.Private; - getPrivacy(tab: TabType) { switch (tab) { case TabType.PublicDatasets: case TabType.PublicModels: return Privacy.Public; - case TabType.None: - return this.previousPrivacy; default: return Privacy.Private; } @@ -286,7 +289,6 @@ export class FolderComponent implements AfterViewInit { hoverOverTab(tab: TabType) { this.listView = this.getListView(tab); - this.previousPrivacy = this.privacy; this.privacy = this.getPrivacy(tab); this.hoverTab = tab; if (tab == TabType.None) { diff --git a/frontend/src/app/_elements/graph/graph.component.css b/frontend/src/app/_elements/graph/graph.component.css index 361e7249..456a8df1 100644 --- a/frontend/src/app/_elements/graph/graph.component.css +++ b/frontend/src/app/_elements/graph/graph.component.css @@ -1,6 +1,5 @@ .node-text { position: absolute; - color: transparent; width: 100px; height: 40px; text-align: center; @@ -12,6 +11,10 @@ transform: translate(-50%, -50%); } -.node-text:hover { +.node-text:not(.inputs) { + color: transparent; +} + +.node-text:not(.inputs):hover { color: var(--offwhite); } \ No newline at end of file diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 19e5c14a..3c01bc5e 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,6 +1,6 @@
-
+
{{ i == 0 ? (inputColumns ? inputColumns[j] : 'nepoznato') : (i > 0 && i < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? 'out' : '')) }}
-- cgit v1.2.3 From a5365ef62bc89130b4240e124b3a361edfb34391 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 4 May 2022 21:06:06 +0200 Subject: Dodao dugmad za brisanje kada korisnik pregleda liste ssvojih podataka, ispravio neke bagove oko grafa kada nema ulaznih kolona. Dodao kor. matricu u dataset. --- backend/api/api/Models/Dataset.cs | 1 + backend/api/api/Models/Model.cs | 3 ++- backend/api/api/Services/FillAnEmptyDb.cs | 6 +++--- frontend/src/app/_data/Dataset.ts | 6 +++--- frontend/src/app/_data/Experiment.ts | 9 ++++---- .../src/app/_elements/folder/folder.component.css | 8 +++++++ .../src/app/_elements/folder/folder.component.html | 12 ++++++++--- .../src/app/_elements/folder/folder.component.ts | 25 +++++++++++++++------- .../_elements/form-model/form-model.component.html | 4 +++- .../src/app/_elements/graph/graph.component.html | 2 +- .../src/app/_elements/graph/graph.component.ts | 2 +- .../_pages/experiment/experiment.component.html | 2 +- 12 files changed, 54 insertions(+), 26 deletions(-) (limited to 'frontend/src/app/_elements/graph') diff --git a/backend/api/api/Models/Dataset.cs b/backend/api/api/Models/Dataset.cs index 7acd4382..beb66de9 100644 --- a/backend/api/api/Models/Dataset.cs +++ b/backend/api/api/Models/Dataset.cs @@ -28,6 +28,7 @@ namespace api.Models public int nullRows { get; set; } public bool isPreProcess { get; set; } + public float[][] cMatrix { get; set; } } } diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs index d8921713..494ae9e9 100644 --- a/backend/api/api/Models/Model.cs +++ b/backend/api/api/Models/Model.cs @@ -27,7 +27,8 @@ namespace api.Models public string lossFunction { get; set; } //public int inputNeurons { get; set; } public int hiddenLayers { get; set; } - public int batchSize { get; set; } + public string batchSize { get; set; } + public string learningRate { get; set; } // na izlazu je moguce da bude vise neurona (klasifikacioni problem sa vise od 2 klase) public int outputNeurons { get; set; } public Layer[] layers { get; set; } diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs index 99bbb91f..f05d8cd8 100644 --- a/backend/api/api/Services/FillAnEmptyDb.cs +++ b/backend/api/api/Services/FillAnEmptyDb.cs @@ -99,7 +99,7 @@ namespace api.Services model.optimizer = "Adam"; model.lossFunction = "mean_squared_error"; model.hiddenLayers = 5; - model.batchSize = 8; + model.batchSize = "8"; model.outputNeurons = 0; model.outputLayerActivationFunction = "sigmoid"; model.metrics = new string[] { }; @@ -210,7 +210,7 @@ namespace api.Services model.optimizer = "Adam"; model.lossFunction = "mean_absolute_error"; model.hiddenLayers = 4; - model.batchSize = 5; + model.batchSize = "8"; model.outputNeurons = 0; model.outputLayerActivationFunction = "relu"; model.metrics = new string[] { }; @@ -316,7 +316,7 @@ namespace api.Services model.optimizer = "Adam"; model.lossFunction = "sparse_categorical_crossentropy"; model.hiddenLayers = 3; - model.batchSize = 4; + model.batchSize = "64"; model.outputNeurons = 0; model.outputLayerActivationFunction = "softmax"; model.metrics = new string[] { }; diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 7ae5c4ab..9efb9f9b 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -18,7 +18,7 @@ export default class Dataset extends FolderFile { public rowCount: number = 0, public nullRows: number = 0, public nullCols: number = 0, - public preview: string[][] = [[]] + public cMatrix: string[][] = [[]] ) { super(name, dateCreated, lastUpdated); } @@ -39,13 +39,13 @@ export class ColumnInfo { public max?: number, public q1?: number, public q3?: number, - ) { + ) { /*if (isNumber) this.columnType = ColumnType.numerical; else this.columnType = ColumnType.categorical;*/ } - + } export enum ColumnType { diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts index 9ad57fc3..05336495 100644 --- a/frontend/src/app/_data/Experiment.ts +++ b/frontend/src/app/_data/Experiment.ts @@ -16,10 +16,12 @@ export default class Experiment { public lastUpdated: Date = new Date(), public modelIds: string[] = [], - + public encodings: ColumnEncoding[] = []//[{columnName: "", columnEncoding: Encoding.Label}] ) { } + + _columnsSelected: boolean = false; } export enum NullValueOptions { @@ -67,9 +69,8 @@ export enum Encoding { } export class ColumnEncoding { - constructor ( + constructor( public columnName: string, public encoding: Encoding - ) - {} + ) { } } \ 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 2340ee8a..62324d62 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -152,6 +152,14 @@ display: none; } +.hover-show { + display: none; +} + +.list-item:hover>.hover-show { + display: initial; +} + .list-add { display: flex; flex-direction: row; diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 48b59dc8..bff066be 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -56,15 +56,15 @@
-
- - + +
@@ -74,6 +74,12 @@
{{file.lastUpdated | date}}
+
+ +
+
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 20ca1121..ffce3fb1 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -98,8 +98,8 @@ export class FolderComponent implements AfterViewInit { this.newFileSelected = false; this.listView = false; this.selectedFileChanged.emit(this.selectedFile); - this.displayFile(); this.selectTab(TabType.File); + this.displayFile(); } createNewFile() { @@ -117,9 +117,13 @@ export class FolderComponent implements AfterViewInit { _initialized: boolean = false; refreshFiles(selectedDatasetId: string | null) { + this.files = [] + this.filteredFiles.length = 0; + this.folders[TabType.NewFile] = []; + this.folders[TabType.File] = []; this.tabsToShow.forEach(tab => { this.folders[tab] = []; - }) + }); this.datasetsService.getMyDatasets().subscribe((datasets) => { this.folders[TabType.MyDatasets] = datasets; @@ -137,7 +141,6 @@ export class FolderComponent implements AfterViewInit { }); this.modelsService.getMyModels().subscribe((models) => { - console.log(models); this.folders[TabType.MyModels] = models; }); @@ -164,6 +167,7 @@ export class FolderComponent implements AfterViewInit { switch (this.type) { case FolderType.Dataset: this.formDataset!.uploadDataset((dataset: Dataset) => { + this.newFile = undefined; 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); }, @@ -173,7 +177,7 @@ export class FolderComponent implements AfterViewInit { break; case FolderType.Model: this.modelsService.addModel(this.formModel.newModel).subscribe(model => { - this.formModel.newModel = model; + this.newFile = undefined; Shared.openDialog("Obaveštenje", "Uspešno ste dodali novu konfiguraciju neuronske mreže u kolekciju."); this.refreshFiles(null); // todo select model }, (err) => { @@ -205,8 +209,8 @@ export class FolderComponent implements AfterViewInit { filteredFiles: FolderFile[] = []; searchTermsChanged() { - if (!this.files) return; this.filteredFiles.length = 0; + if (!this.files) return; this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase()))); /*if (this.selectedFile) { if (!this.filteredFiles.includes(this.selectedFile)) { @@ -226,17 +230,22 @@ export class FolderComponent implements AfterViewInit { this.listView = !this.listView; } - deleteFile(file: FolderFile) { + deleteFile(file: FolderFile, event: Event) { + event.stopPropagation(); console.log('delete'); switch (this.type) { case FolderType.Dataset: this.datasetsService.deleteDataset(file).subscribe((response) => { - console.log(response); + console.log(this.files, this.filteredFiles) + this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + console.log(this.files, this.filteredFiles) + this.refreshFiles(null); + console.log(this.files, this.filteredFiles) }); break; case FolderType.Model: this.modelsService.deleteModel(file).subscribe((response) => { - console.log(response); + this.refreshFiles(null); }); break; case FolderType.Experiment: 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 c0318012..bf4aa0e3 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -108,7 +108,9 @@
- + + +
diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 3c01bc5e..a021431d 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,7 +1,7 @@
- {{ i == 0 ? (inputColumns ? inputColumns[j] : 'nepoznato') : (i > 0 && i + {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i < layers.length - 1 ? model!.layers[i-1].activationFunction : (i==layers.length - 1 ? 'out' : '')) }}
diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index c7f8d964..73c3b1ab 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[] = ['Nije odabran eksperiment']; + @Input() inputColumns?: string[]; constructor() { } diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index baae864e..83c45405 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -32,7 +32,7 @@
- +
-- cgit v1.2.3 From f5b097930797f49a97d12c9885def67a22edf02e Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 4 May 2022 21:38:53 +0200 Subject: Promenio ispis korelacione matrice na prave vrednosti. --- backend/microservice/api/newmlservice.py | 4 +++- frontend/src/app/_data/Dataset.ts | 2 +- .../_elements/column-table/column-table.component.html | 8 ++++---- .../app/_elements/column-table/column-table.component.ts | 16 ++++++++-------- frontend/src/app/_elements/folder/folder.component.ts | 2 +- .../app/_elements/form-model/form-model.component.html | 2 +- frontend/src/app/_elements/graph/graph.component.html | 6 +++--- 7 files changed, 21 insertions(+), 19 deletions(-) (limited to 'frontend/src/app/_elements/graph') diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py index f5e5abcc..ad848fd9 100644 --- a/backend/microservice/api/newmlservice.py +++ b/backend/microservice/api/newmlservice.py @@ -130,7 +130,9 @@ def returnColumnsInfo(dataset): #print(NullRows) #print(len(NullRows)) allNullRows=len(NullRows) - return {'columnInfo':dict,'allNullColl':int(allNullCols),'allNullRows':int(allNullRows),'rowCount':int(rowCount),'colCount':int(colCount),'cMatrix':str(np.matrix(cMatrix))} + print(cMatrix.to_json(orient='index')) + #json.loads()['data'] + return {'columnInfo':dict,'allNullColl':int(allNullCols),'allNullRows':int(allNullRows),'rowCount':int(rowCount),'colCount':int(colCount),'cMatrix':json.loads(cMatrix.to_json(orient='split'))['data']} @dataclass class TrainingResultClassification: diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 9efb9f9b..ca1a2a5e 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -18,7 +18,7 @@ export default class Dataset extends FolderFile { public rowCount: number = 0, public nullRows: number = 0, public nullCols: number = 0, - public cMatrix: string[][] = [[]] + public cMatrix: number[][] = [] ) { 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 43895863..09ddffc6 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -64,15 +64,15 @@ - +
- {{colInfo.columnName}} + {{dataset.columnInfo[i].columnName}}
- +
- 0.1 + {{corrVal}}
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 7cac3b27..da451d55 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -36,7 +36,7 @@ export class ColumnTableComponent implements AfterViewInit { columnsChecked: boolean[] = []; //niz svih kolona loaded: boolean = false; - + constructor(private datasetService: DatasetsService, private experimentService: ExperimentsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -45,11 +45,11 @@ export class ColumnTableComponent implements AfterViewInit { this.dataset = dataset; this.setColumnTypeInitial(); - + this.dataset.columnInfo.forEach(column => { this.columnsChecked.push(true); }); - + this.resetInputColumns(); this.resetOutputColumn(); this.resetColumnEncodings(Encoding.Label); @@ -69,7 +69,7 @@ export class ColumnTableComponent implements AfterViewInit { } ngAfterViewInit(): void { - + } setColumnTypeInitial() { @@ -113,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit { columnTypeChanged(columnName: string) { if (this.experiment.outputColumn == columnName) this.changeOutputColumn(columnName); - else + else this.columnTableChangeDetected(); } @@ -147,7 +147,7 @@ export class ColumnTableComponent implements AfterViewInit { else { if (column.uniqueValues!.length == 2) this.experiment.type = ProblemType.BinaryClassification; - else + else this.experiment.type = ProblemType.MultiClassification; } this.columnTableChangeDetected(); @@ -199,7 +199,7 @@ export class ColumnTableComponent implements AfterViewInit { value: "" }); let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[i])[0]).numNulls; - this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; + this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; } } this.columnTableChangeDetected(); @@ -228,7 +228,7 @@ export class ColumnTableComponent implements AfterViewInit { }); }); } - + openUpdateExperimentDialog() { this.experimentService.updateExperiment(this.experiment).subscribe((response) => { Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu."); diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index ffce3fb1..a99c6a9d 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -169,7 +169,7 @@ export class FolderComponent implements AfterViewInit { this.formDataset!.uploadDataset((dataset: Dataset) => { this.newFile = undefined; 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); + this.refreshFiles(null); }, () => { Shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); 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 bf4aa0e3..96a5e1b6 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -109,7 +109,7 @@
- +
diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index a021431d..35753d40 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,8 +1,8 @@
- + -
\ No newline at end of file +
\ No newline at end of file -- cgit v1.2.3 From ed21703046eaef34f5dca064f991ad1858026cf8 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Thu, 5 May 2022 00:29:48 +0200 Subject: Izbrisao console log. --- backend/microservice/api/newmlservice.py | 21 +++++++-------------- .../src/app/_elements/folder/folder.component.ts | 5 +---- frontend/src/app/_elements/graph/graph.component.ts | 2 +- .../_elements/metric-view/metric-view.component.ts | 2 +- .../notifications/notifications.component.ts | 4 ++-- .../app/_elements/playlist/playlist.component.ts | 2 +- 6 files changed, 13 insertions(+), 23 deletions(-) (limited to 'frontend/src/app/_elements/graph') diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py index 826ac7cb..85d8fb71 100644 --- a/backend/microservice/api/newmlservice.py +++ b/backend/microservice/api/newmlservice.py @@ -130,7 +130,7 @@ def returnColumnsInfo(dataset): #print(NullRows) #print(len(NullRows)) allNullRows=len(NullRows) - print(cMatrix.to_json(orient='index')) + #print(cMatrix.to_json(orient='index')) #json.loads()['data'] return {'columnInfo':dict,'allNullColl':int(allNullCols),'allNullRows':int(allNullRows),'rowCount':int(rowCount),'colCount':int(colCount),'cMatrix':json.loads(cMatrix.to_json(orient='split'))['data']} @@ -185,7 +185,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): col=columnInfo[i] if(columnTypes[i]=="categorical"): data[col['columnName']]=data[col['columnName']].apply(str) - kategorijskekolone.append(col['coumnName']) + kategorijskekolone.append(col['columnName']) #kategorijskekolone=data.select_dtypes(include=['object']).columns print(kategorijskekolone) ###NULL @@ -367,7 +367,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt, metrics =paramsModel['metrics']) - history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=float(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id'])) + history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id'])) hist=history.history #plt.plot(hist['accuracy']) @@ -421,14 +421,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt , metrics =paramsModel['metrics']) - print('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') - print(x_train) - print('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') - print(y_train) - print('AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA') - - - history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=float(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id'])) + history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id'])) hist=history.history y_pred=classifier.predict(x_test) y_pred=(y_pred>=0.5).astype('int') @@ -473,11 +466,11 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback): classifier.add(tf.keras.layers.Dense(units=paramsModel['layers'][i+1]['neurons'], activation=paramsModel['layers'][i+1]['activationFunction'],kernel_regularizer=kernelreg, bias_regularizer=biasreg, activity_regularizer=activityreg))#i-ti skriveni sloj - classifier.add(tf.keras.layers.Dense(units=1),activation=paramsModel['outputLayerActivationFunction']) + classifier.add(tf.keras.layers.Dense(units=1,activation=paramsModel['outputLayerActivationFunction'])) classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt , metrics =paramsModel['metrics']) - history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=float(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id'])) + history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id'])) hist=history.history y_pred=classifier.predict(x_test) #print(classifier.evaluate(x_test, y_test)) @@ -647,7 +640,7 @@ def manageH5(dataset,params,h5model): h5model.compile(loss=params['lossFunction'], optimizer=params['optimizer'], metrics=params['metrics']) - history=h5model.fit(x2, y2, epochs = params['epochs'],batch_size=params['batchSize']) + history=h5model.fit(x2, y2, epochs = params['epochs'],batch_size=int(params['batchSize'])) y_pred2=h5model.predict(x2) diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index d5a7a85c..6ca0faa8 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -233,15 +233,12 @@ export class FolderComponent implements AfterViewInit { deleteFile(file: FolderFile, event: Event) { event.stopPropagation(); - console.log('delete'); + //console.log('delete'); switch (this.type) { case FolderType.Dataset: this.datasetsService.deleteDataset(file).subscribe((response) => { - console.log(this.files, this.filteredFiles) this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); - console.log(this.files, this.filteredFiles) this.refreshFiles(null); - console.log(this.files, this.filteredFiles) }); break; case FolderType.Model: diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 73c3b1ab..da2c7767 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -43,7 +43,7 @@ export class GraphComponent implements AfterViewInit { window.addEventListener('resize', () => { this.resize() }); this.update(); this.resize(); - console.log(this.layers); + //console.log(this.layers); } layers: Node[][] = []; diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts index 3840692a..6fd2f320 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.ts +++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts @@ -28,7 +28,7 @@ export class MetricViewComponent implements OnInit { myEpochs.push(epoch + 1); for (let key in metrics) { let value = metrics[key]; - console.log(key, ':::', value, epoch); + //console.log(key, ':::', value, epoch); if (key === 'accuracy') { myAcc.push(parseFloat(value)); } diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index d64530b9..5716c1e6 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -24,8 +24,8 @@ export class NotificationsComponent implements OnInit { this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { const existingNotification = this.notifications.find(x => x.id === mId) const progress = ((currentEpoch + 1) / totalEpochs); - console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); - console.log("stat:", stat); + //console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + //console.log("stat:", stat); if (!existingNotification) this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); else { diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts index 7529b36b..7f476178 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.ts +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -44,6 +44,6 @@ export class PlaylistComponent implements OnInit { } }); - console.log(this.tableDatas); + //console.log(this.tableDatas); } } -- cgit v1.2.3