aboutsummaryrefslogtreecommitdiff
path: root/frontend/src
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src')
-rw-r--r--frontend/src/app/_data/Model.ts32
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.html59
-rw-r--r--frontend/src/app/_pages/add-model/add-model.component.ts23
-rw-r--r--frontend/src/app/app.module.ts5
4 files changed, 78 insertions, 41 deletions
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index fb6849e3..58bc3d4f 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -31,7 +31,7 @@ export default class Model {
public username: string = '',
public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
public nullValuesReplacers: NullValReplacer[] = [],
- public metrics: Metric[] = [], // TODO add to add-model form
+ public metrics: string[] = [], // TODO add to add-model form
public epochs: number = 5 // TODO add to add-model form
) { }
}
@@ -164,9 +164,35 @@ export class NullValReplacer {
"value": string;
}
-export enum Metric {
+export enum Metrics {
MSE = 'mse',
MAE = 'mae',
RMSE = 'rmse'
- //...
+
+}
+export enum MetricsRegression
+{
+ Mse = 'mse',
+ Mae = 'mae',
+ Mape = 'mape',
+ Msle='msle',
+ CosineProximity='cosine'
+}
+export enum MetricsBinaryClassification
+{
+ Accuracy='binary_accuracy',
+ Auc="AUC",
+ Precision='precision_score',
+ Recall='recall_score',
+ F1='f1_score',
+
+
+}
+export enum MetricsMultiClassification
+{
+ Accuracy='categorical_accuracy',
+ Auc="AUC",
+ Precision='precision_score',
+ Recall='recall_score',
+ F1='f1_score',
}
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 62468b2d..97b35b7a 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -287,6 +287,8 @@
</div>
<div class="row p-2">
+ <!--***********************************ENKODER*********************************************-->
+
<div class="col-1">
</div>
<div class="col-3">
@@ -300,6 +302,9 @@
</option>
</select>
</div>
+
+ <!--***********************************BROJ NEURONA SKRIVENOG SLOJA*********************************************-->
+
<div class="col-1">
</div>
<div class="col-3">
@@ -310,6 +315,7 @@
[(ngModel)]="newModel.hiddenLayerNeurons">
</div>
</div>
+ <!--***********************************OPTIMIZACIJA*********************************************-->
<div class="row p-2">
<div class="col-1">
@@ -335,7 +341,6 @@
<input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
</div>
</div>
- <!--***********************************LOSS FUNCTION*********************************************-->
<div class="row p-2">
<div class="col-1">
</div>
@@ -344,7 +349,7 @@
</div>
<div class="col-2">
<select id=lossFunctionOptions class="form-control" name="lossFunction"
- [(ngModel)]="newModel.lossFunction">
+ [(ngModel)]="newModel.lossFunction" aria-checked="true">
<option
*ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
[value]="option">
@@ -352,40 +357,14 @@
</option>
</select>
</div>
- <div class="col-1">
- </div>
-
- <!-- ************************************************************************************************** -->
+ <div class="col-1"></div>
<div class="col-3 mt-2">
<label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
<input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder"
type="checkbox" value="" checked>
</div>
- <div class="col-1">
- </div>
</div>
-
- <!--<div class="row p-2">
- <div class="col-3"></div>
- <div class="col-3">
- <label for="hiddenLayerActivationFunction" class="col-form-label">Funkcija aktivacije skrivenih
- slojeva:</label>
- </div>
- <div class="col-3">
- <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
- <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control"
- [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]">
- <option
- *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
- [value]="option">
- {{ optionName }}
- </option>
- </select>
- </div>
- </div>
- <div class="col-3"></div>
- </div>
- -->
+ <!--************************************************************************************************* -->
<div class="border m-3">
<div class="row p-2 m-2">
<div class="col-4">
@@ -465,10 +444,26 @@
</div>
</div>
-
<br><br>
+ <!--**********************************************METRIKE ZA KOMPAJLER I GRAFIKE***********************************************-->
+
+ <hr>
+ <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
+ <h3>Izaberite metrike:</h3>
+ <div id="divMetricsinput">
+
+ <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
+ class="form-check form-check-inline">
+
+ <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
+ id="metrics_{{option}}" style="float: left;">
+ <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
+ {{optionName}}
+ </label>
+ </div>
+ </div>
+ </div>
<!--<app-annvisual [model]="newModel"></app-annvisual>-->
- <br><br>
<div class="form-group row mt-5 mb-3">
<div class="col"></div>
<button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
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 ec64a3b7..b35b9fa4 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, { LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, NullValReplacer, ReplaceWith } from 'src/app/_data/Model';
-import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model';
+import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions, Metrics, MetricsRegression, MetricsBinaryClassification, MetricsMultiClassification } 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';
@@ -10,6 +10,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
import { NgxCsvParser } from 'ngx-csv-parser';
import { CsvParseService } from 'src/app/_services/csv-parse.service';
+
@Component({
selector: 'app-add-model',
templateUrl: './add-model.component.html',
@@ -27,7 +28,7 @@ export class AddModelComponent implements OnInit {
ProblemType = ProblemType;
Encoding = Encoding;
ActivationFunction = ActivationFunction;
- activationFunction: any = ActivationFunction
+ metrics: any = Metrics;
LossFunction = LossFunction;
lossFunction: any = LossFunction;
Optimizer = Optimizer;
@@ -54,10 +55,10 @@ export class AddModelComponent implements OnInit {
term: string = "";
selectedProblemType: string = '';
+ selectedMetrics = [];
trainingResult: string | undefined;
-
constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
this.newModel = new Model();
@@ -112,6 +113,7 @@ export class AddModelComponent implements OnInit {
this.getCheckedInputCols();
this.getCheckedOutputCol();
+ this.getMetrics();
if (this.validationInputsOutput()) {
console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
@@ -159,7 +161,7 @@ export class AddModelComponent implements OnInit {
if (this.selectedDataset) { //dataset je izabran
this.getCheckedInputCols();
this.getCheckedOutputCol();
-
+ this.getMetrics();
if (this.validationInputsOutput()) {
this.newModel.datasetId = this.selectedDataset._id;
@@ -475,17 +477,30 @@ export class AddModelComponent implements OnInit {
switch (this.newModel.type) {
case 'regresioni':
this.lossFunction = LossFunctionRegression;
+ this.metrics = MetricsRegression;
break;
case 'binarni-klasifikacioni':
this.lossFunction = LossFunctionBinaryClassification;
+ this.metrics = MetricsBinaryClassification;
break;
case 'multi-klasifikacioni':
this.lossFunction = LossFunctionMultiClassification;
+ this.metrics = MetricsMultiClassification;
break;
default:
break;
}
}
+ getMetrics() {
+ this.newModel.metrics = [];
+ let cb = document.getElementsByName("cbmetrics");
+ for (let i = 0; i < cb.length; i++) {
+ let chb = <HTMLInputElement>cb[i];
+ if (chb.checked == true)
+ this.newModel.metrics.push(chb.value);
+ }
+
+ }
}
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d514d1f5..d90de54d 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -5,7 +5,7 @@ import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { MatSliderModule } from '@angular/material/slider';
import { MatIconModule } from '@angular/material/icon';
-
+import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { NgChartsModule } from 'ng2-charts';
import { Ng2SearchPipeModule } from 'ng2-search-filter';
import { AppComponent } from './app.component';
@@ -39,6 +39,7 @@ import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-dataset
import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component';
import { ItemModelComponent } from './_elements/item-model/item-model.component';
import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
+
@NgModule({
declarations: [
AppComponent,
@@ -80,7 +81,7 @@ import { AnnvisualComponent } from './_elements/annvisual/annvisual.component';
MatSliderModule,
MatIconModule,
NgChartsModule,
- Ng2SearchPipeModule
+ Ng2SearchPipeModule,
],
providers: [],
bootstrap: [AppComponent]
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-20 03:53:43 +0000