11 |
12 | We will train a CNN at Browser with 2 hidden layers
13 |
14 | - **Layer Convolution**
15 | - input **[28, 28, 1]**
16 | - kernel size: **5**
17 | - activation Function: **reLu**
18 | - number of Filters: **8**
19 | - strides: **1**
20 | - **Layer MaxPooling**
21 | - pool Size: **2**
22 | - strides: **2**
23 | - **Last Layer**
24 | - Softmax Layer with **10 classes**
25 |
26 | ### Installation and Run
27 |
28 | ```sh
29 | $ cd ./
30 | $ yarn
31 | $ yarn dev
32 | ```
33 |
34 | ```sh
35 | Open 127.0.0.1:1234
36 | ```
37 |
38 | ### Training
39 |
40 | 
41 |
--------------------------------------------------------------------------------
/translation/ui.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Copyright 2018 Google LLC. All Rights Reserved.
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | * =============================================================================
16 | */
17 |
18 | export function status(statusText) {
19 | console.log(statusText);
20 | document.getElementById('status').textContent = statusText;
21 | }
22 |
23 | export function setEnglish(text, translate) {
24 | document.getElementById('englishSentence').value = text;
25 | document.getElementById('frenchSentence').textContent = translate(text);
26 | }
27 |
28 | export function setTranslationFunction(translate) {
29 | const englishElement = document.getElementById('englishSentence');
30 | englishElement.addEventListener('input', (e) => {
31 | const inputSentence = englishElement.value;
32 | document.getElementById('frenchSentence').textContent =
33 | translate(inputSentence);
34 | });
35 | }
36 |
37 | export function disableLoadModelButtons() {
38 | document.getElementById('load-pretrained-remote').disabled = true;
39 | document.getElementById('load-pretrained-local').disabled = true;
40 | }
41 |
--------------------------------------------------------------------------------
/handwritten-digit-recognition-canvas-draw/app.js:
--------------------------------------------------------------------------------
1 | import inference from './inference';
2 |
3 | // Set up canvas
4 | const cv = new fabric.Canvas('cv')
5 | cv.isDrawingMode = true;
6 | cv.freeDrawingBrush.width = 20;
7 | cv.freeDrawingBrush.color = "#47494d";
8 | cv.backgroundColor = "#ffffff";
9 | cv.renderAll();
10 |
11 |
12 | // Add listener to button
13 | const clearBtn = document.getElementById("clear-btn");
14 | clearBtn.addEventListener('click', () => {
15 | cv.clear();
16 | })
17 |
18 | cv.on("mouse:up", () => {
19 | // Get canvas contents as url
20 | const scale = (1.) / 10.;
21 | const url = cv.toDataURL({
22 | format: 'png',
23 | multiplier: scale,
24 | });
25 | console.log('url', url);
26 | // FIXME
27 | const cv28 = document.createElement('canvas');
28 | cv28.width = 28;
29 | cv28.height = 28;
30 | const ctx = cv28.getContext('2d');
31 | const img = new Image;
32 | img.src = url;
33 | img.onload = () => {
34 | ctx.drawImage(img, 0, 0)
35 | const imgData = ctx.getImageData(0, 0, 28, 28);
36 | console.log('data', imgData);
37 | const imgDateLength = imgData.data.length
38 | // Loop through each pixel in chunk
39 |
40 | const imgArrayData = new Float32Array(28 * 28);
41 |
42 | for(let j = 0; j < imgDateLength / 4; j +=1) {
43 | // All channel has same value -> only need to read red channel
44 | const red_index = j * 4;
45 | // Nomarlize pixel value to [0, 1]
46 | imgArrayData[j] = imgData.data[red_index] / 255;
47 | }
48 |
49 | inference(imgArrayData, imgData);
50 | }
51 | })
52 |
53 |
--------------------------------------------------------------------------------
/polynominal-fitting-curve/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
16 |
17 |
18 | 
6 |
7 | | Resource | Link |
8 | | ------ | ------ |
9 | | Slide at Google I/O Extended | [Machine learning on Browser and TensorFlow for JavaScript](https://docs.google.com/presentation/d/1ZVO6Ripu0JL6d-aFTsUuDdlfJVKbBZC3xVupGrl_P3k/edit?usp=sharing) |
10 | | LiveStream at Google I/O Extended | [LiveStream at Google I/O Extended](https://www.youtube.com/watch?v=JWn2vESsRcY) |
11 |
12 | #### 1. Polynomial Fitting Curve
13 | ----
14 | 
15 |
16 | #### 2. Training, Inference CNN
17 | -----
18 |
19 |
20 |
21 | ### II. Installation and Run
22 |
23 | ```sh
24 | $ cd ./folder-name
25 | $ yarn
26 | $ yarn dev
27 | ```
28 |
29 | ```sh
30 | Open 127.0.0.1:1234
31 | ```
32 |
33 |
--------------------------------------------------------------------------------
/polynominal-fitting-curve/plot.js:
--------------------------------------------------------------------------------
1 | import renderChart from 'vega-embed';
2 |
3 | export async function plotData(element, x, y) {
4 | const xvals = await x.data();
5 | const yvals = await y.data();
6 |
7 | const values = Array.from(yvals).map((y, i) => {
8 | return {'x': xvals[i], 'y': yvals[i]};
9 | });
10 |
11 | const spec = {
12 | '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
13 | 'width': 300,
14 | 'height': 300,
15 | 'data': {'values': values},
16 | 'mark': 'point',
17 | 'encoding': {
18 | 'x': {'field': 'x', 'type': 'quantitative'},
19 | 'y': {'field': 'y', 'type': 'quantitative'}
20 | }
21 | };
22 | return renderChart(element, spec, {actions: false});
23 | }
24 |
25 | export async function plotPred(element, x, y, pred) {
26 | const xvals = await x.data();
27 | const yvals = await y.data();
28 | const predVals = await pred.data();
29 | const values = Array.from(yvals).map((y, i) => {
30 | return {'x': xvals[i], 'y': yvals[i], pred: predVals[i]};
31 | });
32 |
33 | const spec = {
34 | '$schema': 'https://vega.github.io/schema/vega-lite/v2.json',
35 | 'width': 300,
36 | 'height': 300,
37 | 'data': {'values': values},
38 | 'layer': [
39 | {
40 | 'mark': 'point',
41 | 'encoding': {
42 | 'x': {'field': 'x', 'type': 'quantitative'},
43 | 'y': {'field': 'y', 'type': 'quantitative'}
44 | }
45 | },
46 | {
47 | 'mark': 'line',
48 | 'encoding': {
49 | 'x': {'field': 'x', 'type': 'quantitative'},
50 | 'y': {'field': 'pred', 'type': 'quantitative'},
51 | 'color': {'value': 'tomato'}
52 | },
53 | }
54 | ]
55 | };
56 |
57 | return renderChart(element, spec, {actions: false});
58 | }
59 |
60 | export function renderCoeff(element, coeff) {
61 | document.querySelector(element).innerHTML =
62 | `a=${coeff.a.toFixed(3)}, b=${coeff.b.toFixed(3)}, c=${
63 | coeff.c.toFixed(3)}, d=${coeff.d.toFixed(3)}, e=${coeff.e.toFixed(3)}`;
64 | }
--------------------------------------------------------------------------------
/translation/loader.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license
3 | * Copyright 2018 Google LLC. All Rights Reserved.
4 | * Licensed under the Apache License, Version 2.0 (the "License");
5 | * you may not use this file except in compliance with the License.
6 | * You may obtain a copy of the License at
7 | *
8 | * http://www.apache.org/licenses/LICENSE-2.0
9 | *
10 | * Unless required by applicable law or agreed to in writing, software
11 | * distributed under the License is distributed on an "AS IS" BASIS,
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | * See the License for the specific language governing permissions and
14 | * limitations under the License.
15 | * =============================================================================
16 | */
17 |
18 | import * as tf from '@tensorflow/tfjs';
19 | import * as ui from './ui';
20 |
21 | /**
22 | * Test whether a given URL is retrievable.
23 | */
24 | export async function urlExists(url) {
25 | ui.status('Testing url ' + url);
26 | try {
27 | const response = await fetch(url, {method: 'HEAD'});
28 | return response.ok;
29 | } catch (err) {
30 | return false;
31 | }
32 | }
33 |
34 | /**
35 | * Load pretrained model stored at a remote URL.
36 | *
37 | * @return An instance of `tf.Model` with model topology and weights loaded.
38 | */
39 | export async function loadHostedPretrainedModel(url) {
40 | ui.status('Loading pretrained model from ' + url);
41 | try {
42 | const model = await tf.loadModel(url);
43 | ui.status('Done loading pretrained model.');
44 | // We can't load a model twice due to
45 | // https://github.com/tensorflow/tfjs/issues/34
46 | // Therefore we remove the load buttons to avoid user confusion.
47 | ui.disableLoadModelButtons();
48 | return model;
49 | } catch (err) {
50 | console.error(err);
51 | ui.status('Loading pretrained model failed.');
52 | }
53 | }
54 |
55 | /**
56 | * Load metadata file stored at a remote URL.
57 | *
58 | * @return An object containing metadata as key-value pairs.
59 | */
60 | export async function loadHostedMetadata(url) {
61 | ui.status('Loading metadata from ' + url);
62 | try {
63 | const metadataJson = await fetch(url);
64 | const metadata = await metadataJson.json();
65 | ui.status('Done loading metadata.');
66 | return metadata;
67 | } catch (err) {
68 | console.error(err);
69 | ui.status('Loading metadata failed.');
70 | }
71 | }
72 |
--------------------------------------------------------------------------------
/polynominal-fitting-curve/app.js:
--------------------------------------------------------------------------------
1 | import * as tf from '@tensorflow/tfjs';
2 | import mockData from './data-seed';
3 | import { renderCoeff, plotData, plotPred } from './plot';
4 |
5 | // Step 1. Initialize Random Variables
6 | const a = tf.variable(tf.scalar(Math.random()))
7 | const b = tf.variable(tf.scalar(Math.random()))
8 | const c = tf.variable(tf.scalar(Math.random()))
9 | const d = tf.variable(tf.scalar(Math.random()))
10 | const e = tf.variable(tf.scalar(Math.random()))
11 |
12 | // Step 2. Create An Optimizer
13 | const numOfInterations = 2000;
14 | const learningRate = 0.1;
15 | const optimizer = tf.train.sgd(learningRate)
16 |
17 | // Step 3. Write Predict Function
18 | function predict(x) {
19 | return tf.tidy(() => {
20 | const four = tf.scalar(4, 'int32');
21 | const three = tf.scalar(3, 'int32');
22 | return a.mul(x.pow(four))
23 | .add(b.mul(x.pow(three)))
24 | .add(c.mul(x.square()))
25 | .add(d.mul(x))
26 | .add(e)
27 | })
28 | }
29 |
30 | // Step 4. Define Loss Function: Mean Square Error
31 | function calculateLoss(pred, labels) {
32 | return pred.sub(labels).square().mean();
33 | }
34 |
35 | // Step 5. Implement Training
36 | async function train(x, y, numOfInterations) {
37 | for (let i =0; i < numOfInterations; i += 1) {
38 | optimizer.minimize(() => {
39 | const pred = predict(x);
40 | const loss = calculateLoss(pred, y);
41 | console.log(`Epoch ${i} with loss: ${loss}`);
42 | return loss;
43 |
44 | });
45 | if ( i%5 == 0) {
46 | await updateChart();
47 | }
48 | // Important: Do not block main thread.
49 | await tf.nextFrame();
50 | }
51 | }
52 |
53 | const trueCoeff = { a: -0.7, b: -0.8, c: -0.2, d: 0.8, e: 0.4 }
54 | const trainData = mockData(100, trueCoeff);
55 |
56 | async function updateChart() {
57 | // Update realtime coeff
58 | renderCoeff('#trained .coeff', {
59 | a: a.dataSync()[0],
60 | b: b.dataSync()[0],
61 | c: c.dataSync()[0],
62 | d: d.dataSync()[0],
63 | e: e.dataSync()[0],
64 | });
65 |
66 | const pred = predict(trainData.x);
67 | await plotPred("#trained .plot", trainData.x, trainData.y, pred);
68 | // pred.dispose();
69 | }
70 |
71 |
72 | async function run() {
73 | // Display data
74 | console.log('trainData', trainData);
75 | renderCoeff("#data .coeff", trueCoeff);
76 | await plotData("#data .plot", trainData.x, trainData.y);
77 | // Training
78 | const trainButton = document.getElementsByClassName("train")[0];
79 | trainButton.addEventListener('click', async () => {
80 | await train(trainData.x, trainData.y, numOfInterations);
81 | })
82 | }
83 |
84 | run();
85 |
86 |
--------------------------------------------------------------------------------
/handwritten-digit-recognition-canvas-draw/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
49 |
50 |
51 | Status
110 | Standing by. 111 |Load Model
115 | 116 |Test Model
125 | 126 |Status
116 | Standing by. 117 |Load Model
121 | 122 |Test Model
131 | 132 |