demo1.component.html

<div class="container" (window:keydown)="onKeyEvent($event)" (window:keyup)="onKeyEvent($event)">
    <div class="row mt-2 mb-2">
        <div class="col-xl-3 col-lg-3 col-md-3 col-6 mb-2">
            <div class="input-group">
                <span class="input-group-text">Layers</span>
                <input [(ngModel)]="layersConfig" class="form-control" type="text">
            </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-3 col-6 mb-2">
            <div class="input-group">
                <span class="input-group-text">L. Rate</span>
                <input [(ngModel)]="learningRate" class="form-control" min="0.0001" step="0.01" type="number">
            </div>
        </div>
        <div class="col-lg-auto col-md-2 col-4 mb-2">
            <div class="btn-group" role="group" aria-label="Point type">
                <input type="radio" class="btn-check" checked name="type_checker" id="type_checker_0" autocomplete="false"
                       [(ngModel)]="defaultPointType" [value]="0">
                <label class="btn btn-outline-pink" for="type_checker_0">T1</label>

                <input type="radio" class="btn-check" name="type_checker" id="type_checker_1" autocomplete="false"
                       [(ngModel)]="defaultPointType" [value]="1">
                <label class="btn btn-outline-green" for="type_checker_1">T2</label>
            </div>
        </div>
        <div class="col-lg-auto col-md-2 col-4 mb-2">
            <button class="btn btn-primary fa fa-ignore-lh fa-sync me-2" title="Restart training"
                    (click)="refresh()"></button>
            <button class="btn btn-danger fa fa-ignore-lh fa-trash" title="Clear points"
                    (click)="removePoints()" [disabled]="points.length === 0"></button>
        </div>
        <div class="col-lg-auto col-md-2 col-4 mb-2">
            <button class="btn btn-secondary fa fa-ignore-lh fa-file-download me-2" title="Save points"
                    (click)="savePoints()" [disabled]="points.length === 0"></button>
            <button class="btn btn-secondary fa fa-ignore-lh fa-file-upload" title="Load points"
                    (click)="loadPoints()"></button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-12 mb-2" oncontextmenu="return false" #plotDrawerParent>
            <plot-drawer [canvasWidth]="plotDrawerParent.offsetWidth - 24"
                         #plotDrawer (mouseup)="handleMouseEvent($event)"></plot-drawer>
        </div>
        <div class="col-lg-6 col-md-12" #nnDrawerParent>
            <nn-drawer [canvasWidth]="nnDrawerParent.offsetWidth - 24" #nnDrawer></nn-drawer>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <p *ngIf="training">Neural network is training. Points: {{points.length}}. Epoch: {{currentEpoch}}. Loss: {{currentLoss.toFixed(4)}}. Acc.: {{currentAccuracy.toFixed(2)}}</p>
            <p *ngIf="!training && currentEpoch > 0">Neural network has been trained. Epoch: {{currentEpoch}}. Loss: {{currentLoss.toFixed(8)}} Acc.: {{currentAccuracy.toFixed(4)}}</p>
            <p *ngIf="!training && currentEpoch === 0">Neural network is not training</p>
        </div>
    </div>
</div>