demo2.component.html

<div class="container">
    <div class="row mt-2">
        <div class="grid col-xl-6 col-lg-6 col-md-12 mb-2">
            <div class="input-group">
                <span class="input-group-text">In</span>
                <input [(ngModel)]="nnInputSize" class="form-control" type="text">
                <span class="input-group-text">Hidden</span>
                <input [(ngModel)]="nnHiddenLayers" class="form-control" type="text">
                <span class="input-group-text">Out</span>
                <input [(ngModel)]="nnGenOutSize" class="form-control" type="text" disabled>
            </div>
        </div>

        <div class="col-xl-3 col-lg-6 col-md-6 col-12 mb-2">
            <div class="input-group">
                <span class="input-group-text" title="Batch Size">N</span>
                <input [(ngModel)]="batchSize" title="Batch Size" class="form-control" type="text">
                <span class="input-group-text" title="Learning Rate">lr</span>
                <input [(ngModel)]="learningRate" title="Learning Rate" class="form-control" min="0.00001" type="text">
            </div>
        </div>

        <div class="col-xl-3 col-lg-4 col-md-5 col-6 mb-2">
            <button class="btn btn-primary fa fa-ignore-lh fa-sync me-2" title="Restart training"
                    (click)="refresh()"></button>
            <div class="btn-group">
                <button class="btn btn-secondary fa fa-ignore-lh fa-file-upload dropdown-toggle me-2"
                        title="Load training data"
                        data-bs-toggle="dropdown" aria-expanded="false" [disabled]="fileLoading">
                    &nbsp;
                </button>

                <ul class="dropdown-menu">
                    <li><a class="dropdown-item pointer" (click)="loadData()">File...</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item pointer" (click)="loadPredefined('check-mark-10-16.json')">check-mark-10-16</a>
                    </li>
                    <li><a class="dropdown-item pointer" (click)="loadPredefined('mnist-500-16.json')">mnist-500-16</a>
                    </li>
                    <li><a class="dropdown-item pointer" (click)="loadPredefined('fashion-mnist-500-28.json')">fashion-mnist-500-28</a>
                    </li>
                    <li><a class="dropdown-item pointer"
                           (click)="loadPredefined('mnist-10000-16.json')">mnist-10000-16</a></li>
                </ul>

                <button class="btn btn-secondary fa fa-ignore-lh fa-cloud-download-alt me-2"
                        title="Export model" [disabled]="modelLoading" (click)="saveModel()"></button>

                <button class="btn btn-secondary fa fa-ignore-lh fa-cloud-upload-alt" title="Load model"
                        [disabled]="modelLoading" (click)="loadModel()"></button>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col" #biParent1>
            <h4>Training data</h4>
            <div class="border border-2">
                <binary-image-drawer #trainingImage [canvasWidth]="biParent1.clientWidth - 24"></binary-image-drawer>
            </div>
        </div>
        <div class="col" #biParent2>
            <h4>Generated</h4>
            <div class="border border-2">
                <binary-image-drawer #generatedImage [canvasWidth]="biParent2.clientWidth - 24"></binary-image-drawer>
            </div>
        </div>
    </div>
    <div class="row" *ngIf="currentIteration > 0 || currentBatch > 0">
        <p>Training... Epoch: {{currentIteration}}. Batch: {{currentBatch}} from {{totalBatches}} ({{speed.toFixed(2)}}
            op/s)</p>
    </div>
</div>


<loading-screen [visible]="fileProcessingTotal > 0" [current]="fileProcessingCurrent" [total]="fileProcessingTotal"/>