NMZivkovic

  /// Loading the model.
  public async ngOnInit(): Promise<void> {

    this.title = 'Loading model, please wait...';

    this.model = await tf.loadLayersModel('http://localhost:3000/model.json')
    console.log(this.model.summary());
    
    this.title = 'Model Trained! Write down digits!';
  }

NMZivkovic

  private getImage(canvasHtmlElement)
  {
    this.context.drawImage(canvasHtmlElement, 0, 0, 28, 28);
    let imageData = this.context.getImageData(0, 0, 28, 28);
    let img = tf.browser.fromPixels(imageData, 1);
    let imgtmp = img.reshape([1, 28, 28, 1]);
    imgtmp = tf.cast(imgtmp, 'float32');

    return imgtmp;
  }

NMZivkovic

import { Component, OnInit, ViewChild, Input, AfterViewInit, ElementRef } from '@angular/core';

import { fromEvent } from 'rxjs';
import { switchMap, takeUntil, pairwise } from 'rxjs/operators';
import * as tf from '@tensorflow/tfjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']

NMZivkovic

<div class="toolbar" role="banner">
  <img
    width="55"
    src="https://i.imgur.com/WQKir0M.png"
  />
  <span>Tensorflow.js and Angular Integration</span>
  <div class="spacer"></div>
</div>
<h2>
  {{title}}

NMZivkovic

model.save('model.h5')

NMZivkovic

predictions = model.predict(X_test)

plt.figure(figsize=(28, 28)) 
for i in range(5):    
    ax = plt.subplot(2, 10, i + 1)    
    plt.imshow(X_test[i, :, :, 0], cmap='gray')
    original = y_test[i]
    predicted = np.argmax(predictions[i])
    plt.title("Original: {}\nPredicted: {}".format(original, predicted), loc='left')    
    plt.axis('off') 

NMZivkovic

score = model.evaluate(X_test, y_test)
print("Accuracy is: {}".format(score[1]))

NMZivkovic

model.fit(X_train, y_train, batch_size=128, epochs=10) 

NMZivkovic

(X_train, y_train), (X_test, y_test) = mnist.load_data()

X_train = X_train / 255.0
X_train = np.expand_dims(X_train, axis=3)

X_test = X_test / 255.0
X_test = np.expand_dims(X_test, axis=3)

NMZivkovic

model = Sequential()
model.add(Conv2D(32, 3, activation='relu', input_shape=(28,28, 1)))
model.add(Conv2D(64, 3, activation='relu'))
model.add(Conv2D(128, 3, activation='relu'))
model.add(MaxPooling2D(2, 2))
model.add(Flatten())
model.add(Dense(128, activation='relu'))
model.add(Dense(10, activation='softmax'))

model.compile(optimizer='adam',