diff options
Diffstat (limited to 'frontend/src')
10 files changed, 145 insertions, 21 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index f6e01d08..48418d51 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -15,7 +15,7 @@ export default class Model { public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U // Neural net training settings - public type: ANNType = ANNType.FullyConnected, + public type: ProblemType = ProblemType.Regression, public encoding: Encoding = Encoding.Label, public optimizer: Optimizer = Optimizer.Adam, public lossFunction: LossFunction = LossFunction.MeanSquaredError, @@ -23,8 +23,8 @@ export default class Model { public hiddenLayerNeurons: number = 1, public hiddenLayers: number = 1, public batchSize: number = 5, - public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, - public hiddenLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, + public hiddenLayerActivationFunction = [], + //public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public username: string = '', public nullValues: NullValueOptions = NullValueOptions.DeleteRows, @@ -32,9 +32,10 @@ export default class Model { ) { } } -export enum ANNType { - FullyConnected = 'potpuno povezana', - Convolutional = 'konvoluciona' +export enum ProblemType { + Regression = 'regresioni', + BinaryClassification = 'binarni-klasifikacioni', + MultiClassification = 'multi-klasifikacioni' } // replaceMissing srednja vrednost mean, median, najcesca vrednost (mode) diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.css b/frontend/src/app/_elements/annvisual/annvisual.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/annvisual/annvisual.component.css diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html new file mode 100644 index 00000000..6dd3b3ae --- /dev/null +++ b/frontend/src/app/_elements/annvisual/annvisual.component.html @@ -0,0 +1,5 @@ +<div style="text-align: center; width: 100%;" > + <button (click)="d3()">Prikaz veštačke neuronske mreže</button> + <div id="graph"></div> + </div> + diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts new file mode 100644 index 00000000..cb07ef1d --- /dev/null +++ b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AnnvisualComponent } from './annvisual.component'; + +describe('AnnvisualComponent', () => { + let component: AnnvisualComponent; + let fixture: ComponentFixture<AnnvisualComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ AnnvisualComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(AnnvisualComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts new file mode 100644 index 00000000..ff5b45d6 --- /dev/null +++ b/frontend/src/app/_elements/annvisual/annvisual.component.ts @@ -0,0 +1,47 @@ +import { Component, OnInit,Input } from '@angular/core'; +import Model from 'src/app/_data/Model'; +import { graphviz } from 'd3-graphviz'; + +@Component({ + selector: 'app-annvisual', + templateUrl: './annvisual.component.html', + styleUrls: ['./annvisual.component.css'] +}) +export class AnnvisualComponent implements OnInit { + ngOnInit(): void { + throw new Error('Method not implemented.'); + } + + @Input() model: Model = new Model(); + + d3(){ + let inputlayerstring:string=''; + let hiddenlayerstring:string=''; + let digraphstring:string='digraph {'; + + for(let i=0;i<this.model.inputNeurons;i++) + { + inputlayerstring=inputlayerstring+'i'+i+','; + } + inputlayerstring=inputlayerstring.slice(0,-1); + + digraphstring=digraphstring+'->'; + + for(let j=0;j<this.model.hiddenLayers;j++) + { + for(let i=0;i<this.model.hiddenLayerNeurons;i++) + { + hiddenlayerstring=hiddenlayerstring+'h'+j+'_'+i+','; + } + hiddenlayerstring=hiddenlayerstring.slice(0,1); + digraphstring=digraphstring+hiddenlayerstring+'->'; + hiddenlayerstring=''; + } + digraphstring=digraphstring+'o}'; + alert(digraphstring); + + graphviz('#graph').renderDot(digraphstring); + } + + +} diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 09a11e37..9dde9afe 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -40,21 +40,21 @@ Dodajte novi dataset </button> </div> - + <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> <div class="px-5"> <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let dataset of myDatasets" + <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> <app-item-dataset name="usersDataset" [dataset]="dataset" - (click)="selectThisDataset(dataset)"></app-item-dataset> + (click)="scrollToNextForm(); selectThisDataset(dataset);"></app-item-dataset> </li> </ul> </div> </div> <app-dataset-load *ngIf="!showMyDatasets" id="dataset" - (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader"> + (loaded)="scrollToNextForm(); datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader"> </app-dataset-load> <div class="px-5 mt-5"> <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> @@ -62,6 +62,7 @@ </div> <!-- ULAZNE/IZLAZNE KOLONE --> + <span id="selectInAndOuts"></span> <div *ngIf="selectedDataset"> <div class="row"> <div class="col d-flex justify-content-center"> @@ -70,7 +71,7 @@ <br> <div *ngFor="let item of selectedDataset.header; let i = index"> <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" - name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> + name="cbsNew" [checked] = "this.selectedOutputColumnVal != item" [disabled]="this.selectedOutputColumnVal == item"> <label class="form-check-label" for="cb_{{item}}"> {{item}} </label> @@ -151,8 +152,6 @@ </div> </div> - - <h2 class="mt-5 mb-4">Parametri treniranja:</h2> <div> @@ -160,11 +159,11 @@ <div class="col-1"> </div> <div class="col-3"> - <label for="type" class="col-form-label">Tip mreže: </label> + <label for="type" class="col-form-label">Tip problema: </label> </div> <div class="col-2"> <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type"> - <option *ngFor="let option of Object.keys(ANNType); let optionName of Object.values(ANNType)" + <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> {{ optionName }} </option> @@ -259,12 +258,14 @@ </div> <div class="row p-2"> - <div class="col-1"> + + <!-- <div class="col-1"> </div> <div class="col-3"> <label for="inputLayerActivationFunction" class="col-form-label">Funkcija aktivacije ulaznog sloja:</label> </div> + <div class="col-2"> <select id=inputLayerActivationFunctionOptions class="form-control" name="inputLayerActivationFunction" [(ngModel)]="newModel.inputLayerActivationFunction"> @@ -277,6 +278,8 @@ </div> <div class="col-1"> </div> + --> + <div class="col-5"> <label for="splitYesNo" class="form-check-label">Podela test skupa: <input id="splitYesNo" class="form-check-input" type="checkbox" diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index 995aaa87..37672d0a 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewChild } from '@angular/core'; import Model, { ReplaceWith } from 'src/app/_data/Model'; -import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model'; +import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model'; import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component'; import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; @@ -23,7 +23,7 @@ export class AddModelComponent implements OnInit { newModel: Model; - ANNType = ANNType; + ProblemType = ProblemType; Encoding = Encoding; ActivationFunction = ActivationFunction; LossFunction = LossFunction; @@ -47,6 +47,9 @@ export class AddModelComponent implements OnInit { tempTestSetDistribution: number = 90; + //accepted: Boolean; + term: string = ""; + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) { this.newModel = new Model(); @@ -93,7 +96,7 @@ export class AddModelComponent implements OnInit { if (this.validationInputsOutput()) { console.log('ADD MODEL: STEP 1 - UPLOAD FILE'); if (this.datasetLoadComponent) { - + console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files); this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => { console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); if (this.datasetLoadComponent) { @@ -216,12 +219,16 @@ export class AddModelComponent implements OnInit { if (datasets[i]._id == dataset._id) }*/ - //this.datasetFile = csvRecords; this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { if (file) { this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - this.datasetFile.length = this.datasetFile.length - 1; + for (let i = this.datasetFile.length - 1; i >= 0; i--) { //moguce da je vise redova na kraju fajla prazno i sl. + if (this.datasetFile[i].length != this.datasetFile[0].length) + this.datasetFile[i].pop(); + else + break; //nema potrebe dalje + } console.log(this.datasetFile); } }); @@ -230,6 +237,15 @@ export class AddModelComponent implements OnInit { this.resetCbsAndRbs(); } + scrollToNextForm() { + console.log("USAO U SCROLL"); + (<HTMLSelectElement>document.getElementById("selectInAndOuts")).scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest" + }); + } + resetSelectedDataset(): boolean { const temp = this.selectedDataset; this.selectedDataset = this.otherDataset; diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts index 7e4471e8..c9267e77 100644 --- a/frontend/src/app/_pages/home/home.component.ts +++ b/frontend/src/app/_pages/home/home.component.ts @@ -3,6 +3,8 @@ import Dataset from 'src/app/_data/Dataset'; import Predictor from 'src/app/_data/Predictor'; import { ItemDatasetComponent } from 'src/app/_elements/item-dataset/item-dataset.component'; import shared from 'src/app/Shared'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { PredictorsService } from 'src/app/_services/predictors.service'; @Component({ selector: 'app-home', diff --git a/frontend/src/app/_services/home.service.spec.ts b/frontend/src/app/_services/home.service.spec.ts new file mode 100644 index 00000000..1afaf229 --- /dev/null +++ b/frontend/src/app/_services/home.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { HomeService } from './home.service'; + +describe('HomeService', () => { + let service: HomeService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(HomeService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/home.service.ts b/frontend/src/app/_services/home.service.ts new file mode 100644 index 00000000..0026413a --- /dev/null +++ b/frontend/src/app/_services/home.service.ts @@ -0,0 +1,9 @@ +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root' +}) +export class HomeService { + + constructor() { } +} |