path: root/frontend/src/app/_pages/add-model/add-model.component.html

<div id="header">
    <h1>Napravite svoj model veštačke neuronske mreže</h1>
</div>

<div id="wrapper">
    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
            <!--justify-content-center-->
            <h2 class="col-2"> Nov model: </h2>
            <div class="col-3">
                <label for="name" class="col-form-label">Naziv modela:</label>
                <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
            </div>
            <div class="col-5">
                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
                <div>
                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
                </div>
            </div>
            <div class="col-2">
                <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
                <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
                    value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
            </div>
        </div>

        <div class="py-3 pr-5 justify-content-center">

            <div class="col-12 d-flex my-5">
                <h2 class="">Izvor podataka:</h2>
                <div class="col-1">
                </div>
                <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
                    [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
                    Izaberite dataset iz kolekcije
                </button>
                <h3 class="mt-3 mx-3">ili</h3>
                <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
                    [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
                    Dodajte novi dataset
                </button>
            </div>
            <div class="px-5 my-2">
                <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
            </div>
            <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|filter:term"
                            [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
                            <app-item-dataset name="usersDataset" [dataset]="dataset"
                                (click)="scrollToNextForm(); selectThisDataset(dataset);"></app-item-dataset>
                        </li>
                    </ul>
                </div>
            </div>

            <app-dataset-load [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
                (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>
            </div>
        </div>

        <!-- ULAZNE/IZLAZNE KOLONE -->
        <span id="selectInAndOuts"></span>
        <div *ngIf="selectedDataset && (showMyDatasets || (!showMyDatasets && datasetLoaded))"> <!--postignuto da se kod newdataseta ucita tabela pa ulazi/izlazi. ostalo srediti to kod mydatasets(dopuna 2. uslova)-->
            <div class="row">
                <div class="col d-flex justify-content-center">
                    <h3>Izaberite ulazne kolone:</h3>
                    <div id="divInputs" class="form-check mt-2">
                        <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]="this.selectedOutputColumnVal != item"
                                [disabled]="this.selectedOutputColumnVal == item">&nbsp;
                            <label class="form-check-label" for="cb_{{item}}">
                                {{item}}
                            </label>
                        </div>
                    </div>
                </div>
                <div class="col d-flex justify-content-left">
                    <h3>Izaberite izlaznu kolonu:</h3>
                    <div id="divOutputs" class="form-check mt-2">
                        <br>
                        <div *ngFor="let item of selectedDataset.header; let i = index">
                            <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew"
                                (change)="this.selectedOutputColumnVal = item">&nbsp;
                            <label class="form-check-label" for="rb_{{item}}">
                                {{item}}
                            </label>
                        </div>
                    </div>
                </div>


                <div class="mt-5" *ngIf="datasetFile">
                    <h2>Popunjavanje nedostajućih vrednosti:</h2>
                    <div class="form-check">
                        <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteRows"
                            class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
                            data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
                        <label for="delRows" class="form-check-label">Obriši sve
                            redove sa nedostajućim vrednostima</label><br>
                        <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.DeleteColumns"
                            class="form-check-input" value="deleteCols" name="fillMissing" id="delCols"
                            data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
                        <label for="delCols" class="form-check-label">Obriši sve
                            kolone sa nedostajućim vrednostima</label><br>
                        <input type="radio" [(ngModel)]="newModel.nullValues" [value]="NullValueOptions.Replace"
                            class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
                            data-bs-target="#fillMissingCustom:not(.show)">
                        <label for="replace" class="form-check-label">Izabraću
                            vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
                        <div class="collapse" id="fillMissingCustom">
                            <div>
                                <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
                                <div id="columnReplacers">
                                    <!--Ulazne kolone - popunjavanje null vrednosti -->
                                    <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
                                        <div class="input-group row" *ngIf="getInputById('cb_'+column).checked">
                                            <span class="input-group-text col-2 text-center">
                                                {{column}}&nbsp;<span class="small" style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} null)</span>
                                            </span>
                                            <label *ngIf="calculateSumOfNullValuesInCol(column)==0" class="form-control col-2">Ova kolona nema nedostajućih vrednosti.</label>
                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" class="form-control col-1" [id]="'fillText_'+column" (keyup)="checkFillColRadio(column)">
                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1"  
                                                [name]="'delOp_'+column">  <!--OVDE SREDI IZGLED-->
                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
                                                *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);">
                                                <option
                                                    *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                    [value]="option">
                                                    {{ optionName }}
                                                </option>
                                            </select>
                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
                                                *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedString($event);">
                                                <option *ngFor="let option of arrayColumn(datasetFile, i)"
                                                    [value]="option">
                                                    {{ option }}
                                                </option>
                                            </select>
                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
                                                <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'delCol_'+column"
                                                    [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"></label>
                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
                                                <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column"
                                                    checked (change)="emptyFillTextInput(column)"></label>
                                        </div>
                                    </div>
                                    <!--Izlazna kolona - popunjavanje null vrednosti -->
                                    <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> <!--moze bez for petlje (this.selectedOutputColumnVal je id), al ne moze ova fja array column onda-->
                                        <div class="input-group row" *ngIf="getInputById('rb_'+column).checked">
                                            <span class="input-group-text col-2 text-center">
                                                {{column}}&nbsp;<span class="small" style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} null)</span>
                                            </span>
                                            <label *ngIf="calculateSumOfNullValuesInCol(column)==0" class="form-control">Ova kolona nema nedostajućih vrednosti.</label>
                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" class="form-control col-1" [id]="'fillText_'+column" (keyup)="checkFillColRadio(column)">
                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1"  
                                                [name]="'delOp_'+column">  <!--OVDE SREDI IZGLED-->
                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
                                                *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);">
                                                <option
                                                    *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                    [value]="option">
                                                    {{ optionName }}
                                                </option>
                                            </select>
                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
                                                *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedString($event);">
                                                <option *ngFor="let option of arrayColumn(datasetFile, i)"
                                                    [value]="option">
                                                    {{ option }}
                                                </option>
                                            </select>
                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
                                                <input type="radio" [id]="'delCol_'+column"
                                                    [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"></label>
                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
                                                <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"
                                                    checked></label>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>

        <div>
            <div class="row p-2">
                <div class="col-1">
                </div>
                <div class="col-3">
                    <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(ProblemType); let optionName of Object.values(ProblemType)"
                            [value]="option">
                            {{ optionName }}
                        </option>
                    </select>
                </div>
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
                </div>
                <div class="col-1">
                    <input type="number" min="1" class="form-control" name="hiddenLayers"
                        [(ngModel)]="newModel.hiddenLayers"
                        (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])">
                </div>
            </div>

            <div class="row p-2">
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="encoding" class="col-form-label">Enkoding: </label>
                </div>
                <div class="col-2">
                    <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
                            [value]="option">
                            {{ optionName }}
                        </option>
                    </select>
                </div>
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
                </div>
                <div class="col-1">
                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
                        [(ngModel)]="newModel.hiddenLayerNeurons">
                </div>
            </div>

            <div class="row p-2">
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="optimizer" class="col-form-label">Optimizacija: </label>
                </div>
                <div class="col-2">
                    <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
                        <option
                            *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
                            [value]="option">
                            {{ optionName }}
                        </option>
                    </select>
                </div>
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
                </div>
                <div class="col-1">
                    <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
                </div>
            </div>

            <div class="row p-2">
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
                </div>
                <div class="col-2">
                    <select id=lossFunctionOptions class="form-control" name="lossFunction"
                        [(ngModel)]="newModel.lossFunction">
                        <option
                            *ngFor="let option of Object.keys(LossFunction); let optionName of Object.values(LossFunction)"
                            [value]="option">
                            {{ optionName }}
                        </option>
                    </select>
                </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="row p-2">
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="splitYesNo" class="form-check-label">Podela test skupa:&nbsp;&nbsp;
                        <input id="splitYesNo" class="form-check-input" type="checkbox"
                            [checked]="newModel.randomTestSet"
                            (change)="newModel.randomTestSet = !newModel.randomTestSet">
                    </label>
                </div>
                <div class="col-1">
                </div>
                <div class="col-2">
                    <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label>
                </div>
                <div class="col-1">
                    <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
                        [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
                </div>
            </div>

            <div class="row p-2">
                <div class="col-1">
                </div>
                <div class="col-3">
                    <label for="outputLayerActivationFunction" class="col-form-label">Funkcija aktivacije izlaznog
                        sloja:</label>
                </div>
                <div class="col-2">
                    <select id=outputLayerActivationFunctionOptions class="form-control"
                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                        <option
                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                            [value]="option">
                            {{ optionName }}
                        </option>
                    </select>
                </div>
                <div class="col-1">
                </div>
                <div class="col">
                    trening
                    <mat-slider min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel
                        [disabled]="!newModel.randomTestSet" [(ngModel)]="tempTestSetDistribution">
                    </mat-slider>
                    test
                </div>
                <div class="col">
                </div>
            </div>
        </div>


        <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;"
                (click)="addModel();">Sačuvaj model</button>
            <div class="col"></div>
            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
                (click)="trainModel();">Treniraj model</button>
            <div class="col"></div>
        </div>

    </div>
</div>

<button (click)="calculateSumOfNullValuesInCol('Embarked'); calculateMeanColValue('Age');calculateMedianColValue('Age'); getNullValuesReplacersArray();">DUGME</button>