tensorflow.js

Author: csxiaoyaojianxian

20-tensorflow.js/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.cache

20-tensorflow.js/05-logistic-regression/script.js

@@ -2,7 +2,7 @@
  * @Author: victorsun
  * @Date: 2019-12-04 20:15:29
  * @LastEditors: victorsun - csxiaoyao
- * @LastEditTime: 2020-03-22 00:05:54
+ * @LastEditTime: 2020-03-22 16:24:51
  * @Description: [email protected]
  */
 import * as tf from '@tensorflow/tfjs';
@@ -31,11 +31,11 @@ window.onload = async () => {
 
     // 2. 初始化神经网络模型
     const model = tf.sequential();
-    // 添加层，dense： y=ax+b，设置激活函数sigmoid(防止输入超过100%，对过大过小值收敛，保证数据在 0 - 1 之间)
+    // 添加层，dense： y=ax+b
     model.add(tf.layers.dense({
         units: 1, // 输出值为一个概率值，1个神经元即可
         inputShape: [2], // 坐标 x,y 两个值，特征数量为2
-        activation: 'sigmoid' // 设置激活函数 sigmoid 0-1
+        activation: 'sigmoid' // 设置激活函数 sigmoid 0-1，(防止输入超过100%，对过大过小值收敛，保证数据在 0 - 1 之间)
     }));
     // 设置损失函数和优化器
     model.compile({

20-tensorflow.js/11-mobilenet/script.js

@@ -2,7 +2,7 @@
  * @Author: victorsun
  * @Date: 2019-12-04 20:15:29
  * @LastEditors: victorsun - csxiaoyao
- * @LastEditTime: 2020-03-22 16:10:04
+ * @LastEditTime: 2020-03-22 16:17:47
  * @Description: [email protected]
  */
 import * as tf from '@tensorflow/tfjs';
@@ -15,6 +15,7 @@ import { file2img } from './utils';
  * 在 tensorflow.js 中调用web格式的模型文件
  * 
  * 【 MobileNet模型 】
+ * 图像分类模型
  * 卷积神经网络模型的一种，轻量、速度快，但是准确性一般
  * 
  * 【 文件说明 】

20-tensorflow.js/12-brand/data.js

@@ -0,0 +1,42 @@
+/*
+ * @Author: victorsun
+ * @Date: 2019-12-04 20:15:29
+ * @LastEditors: victorsun - csxiaoyao
+ * @LastEditTime: 2020-03-22 16:32:52
+ * @Description: 图片加载
+ */
+
+const IMAGE_SIZE = 224;
+
+const loadImg = (src) => {
+    return new Promise(resolve => {
+        const img = new Image();
+        // 允许跨域
+        img.crossOrigin = "anonymous";
+        img.src = src;
+        img.width = IMAGE_SIZE;
+        img.height = IMAGE_SIZE;
+        img.onload = () => resolve(img);
+    });
+};
+export const getInputs = async () => {
+    const loadImgs = []; // img - promise
+    const labels = [];
+    for (let i = 0; i < 30; i += 1) {
+        ['android', 'apple', 'windows'].forEach(label => {
+            const src = `http://127.0.0.1:8080/brand/train/${label}-${i}.jpg`;
+            const img = loadImg(src);
+            loadImgs.push(img);
+            labels.push([
+                label === 'android' ? 1 : 0,
+                label === 'apple' ? 1 : 0,
+                label === 'windows' ? 1 : 0,
+            ]);
+        });
+    }
+    const inputs = await Promise.all(loadImgs);
+    return {
+        inputs,
+        labels,
+    };
+}

20-tensorflow.js/12-brand/index.html

@@ -0,0 +1,3 @@
+<script src="script.js"></script>
+<input type="file" onchange="predict(this.files[0])">
+<button onclick="download()">下载模型</button>

20-tensorflow.js/12-brand/script.js

@@ -0,0 +1,111 @@
+/*
+ * @Author: victorsun
+ * @Date: 2019-12-04 20:15:29
+ * @LastEditors: victorsun - csxiaoyao
+ * @LastEditTime: 2020-03-22 20:13:25
+ * @Description: [email protected]
+ */
+import * as tf from '@tensorflow/tfjs';
+import * as tfvis from '@tensorflow/tfjs-vis';
+import { getInputs } from './data';
+import { img2x, file2img } from './utils';
+
+/**
+ * 【 迁移学习 】
+ * 把已训练好的模型参数迁移到新的模型来帮助新模型训练
+ * 深度学习模型参数多，从头训练成本高
+ * 删除原始模型的最后一层，基于此截断模型的输出训练一个新的（通常相当浅的）模型
+ * 本案例，在 mobilenet 基础上，最后输出 ['android', 'apple', 'windows'] 三选一
+ * 模型的保存
+ */
+const MOBILENET_MODEL_PATH = 'http://127.0.0.1:8080/mobilenet/web_model/model.json';
+const NUM_CLASSES = 3;
+const BRAND_CLASSES = ['android', 'apple', 'windows'];
+
+window.onload = async () => {
+    // 1. 获取输入数据并在 visor 面板中展示
+    const { inputs, labels } = await getInputs();
+    const surface = tfvis.visor().surface({ name: '输入示例', styles: { height: 250 } });
+    inputs.forEach(img => {
+        surface.drawArea.appendChild(img);
+    });
+
+    // 加载mobilenet 模型并截断  构建双层神经网络  截断模型作为输入，双层神经网络作为输出
+    // 2. 模型迁移
+    // 2.1 加载 mobilenet 模型， tfjs_layers_model 格式
+    const mobilenet = await tf.loadLayersModel(MOBILENET_MODEL_PATH);
+    // 查看模型概况
+    mobilenet.summary();
+
+    // 2.2 获取模型中间层并截断
+    const layer = mobilenet.getLayer('conv_pw_13_relu'); // 根据层名获取层
+    // 生成新的截断模型
+    const truncatedMobilenet = tf.model({
+        inputs: mobilenet.inputs,
+        outputs: layer.output
+    });
+
+    // 3. 构建双层神经网络，tensor数据从 mobilenet 模型 flow 到 构建到双层神经网络模型
+    // 初始化神经网络模型
+    const model = tf.sequential();
+    // flatten输入
+    model.add(tf.layers.flatten({
+        inputShape: layer.outputShape.slice(1) // [null,7,7,256] => [7,7,256]，null表示个数不定，此处删除
+    }));
+    // 双层神经网络
+    model.add(tf.layers.dense({
+        units: 10,
+        activation: 'relu'
+    }));
+    model.add(tf.layers.dense({
+        units: NUM_CLASSES, // 输出类别数量
+        activation: 'softmax'
+    }));
+
+    // 4. 训练
+    // 4.1 定义损失函数和优化器
+    model.compile({
+        loss: 'categoricalCrossentropy', // 交叉熵
+        optimizer: tf.train.adam()
+    });
+    // 4.2 数据预处理: 处理输入为截断模型接受的数据格式，即 mobilenet 接受的格式
+    const { xs, ys } = tf.tidy(() => {
+        // img2x: img 转 mobilenet 接受的tensor格式，并合并单个 tensor 为一个大 tensor
+        const xs = tf.concat(inputs.map(imgEl => truncatedMobilenet.predict(img2x(imgEl))));
+        const ys = tf.tensor(labels);
+        return { xs, ys };
+    });
+    // 4.3 通过 fit 方法训练
+    await model.fit(xs, ys, {
+        epochs: 20,
+        callbacks: tfvis.show.fitCallbacks(
+            { name: '训练效果' },
+            ['loss'],
+            { callbacks: ['onEpochEnd'] }
+        )
+    });
+
+    // 5. 迁移学习下的模型预测
+    window.predict = async (file) => {
+        const img = await file2img(file);
+        document.body.appendChild(img);
+        const pred = tf.tidy(() => {
+            // img 转 tensor
+            const x = img2x(img);
+            // 截断模型先执行
+            const input = truncatedMobilenet.predict(x);
+            // 再用新模型预测出最终结果
+            return model.predict(input);
+        });
+        const index = pred.argMax(1).dataSync()[0];
+        setTimeout(() => {
+            alert(`预测结果：${BRAND_CLASSES[index]}`);
+        }, 0);
+    };
+    
+    // 6. 模型的保存 tfjs_layers_model
+    // json + 权重bin
+    window.download = async () => {
+        await model.save('downloads://model');
+    };
+};

20-tensorflow.js/12-brand/utils.js

@@ -0,0 +1,27 @@
+import * as tf from '@tensorflow/tfjs';
+
+// img 转 mobilenet 接受的格式
+export function img2x(imgEl){
+    return tf.tidy(() => {
+        const input = tf.browser.fromPixels(imgEl)
+            .toFloat()
+            .sub(255 / 2)
+            .div(255 / 2)
+            .reshape([1, 224, 224, 3]);
+        return input;
+    });
+}
+
+export function file2img(f) {
+    return new Promise(resolve => {
+        const reader = new FileReader();
+        reader.readAsDataURL(f);
+        reader.onload = (e) => {
+            const img = document.createElement('img');
+            img.src = e.target.result;
+            img.width = 224;
+            img.height = 224;
+            img.onload = () => resolve(img);
+        };
+    });
+}

20-tensorflow.js/13-speech/index.html

@@ -0,0 +1,8 @@
+<script src="script.js"></script>
+<style>
+    #result>div {
+        float: left;
+        padding: 20px;
+    }
+</style>
+<div id="result"></div>

20-tensorflow.js/13-speech/script.js

@@ -0,0 +1,51 @@
+/*
+ * @Author: victorsun
+ * @Date: 2019-12-04 20:15:29
+ * @LastEditors: victorsun - csxiaoyao
+ * @LastEditTime: 2020-03-22 18:03:26
+ * @Description: [email protected]
+ */
+import * as speechCommands from '@tensorflow-models/speech-commands';
+
+/**
+ * 【 使用预训练模型进行语音识别 】
+ * 语音识别的本质是分类
+ * 
+ * $ npm i @tensorflow-models/speech-commands
+ */
+const MODEL_PATH = 'http://127.0.0.1:8080/speech';
+
+window.onload = async () => {
+    // 创建识别器
+    const recognizer = speechCommands.create(
+        'BROWSER_FFT', // 语音识别需要用到傅立叶变换，此处使用浏览器自带的傅立叶
+        null, // 识别的单词，null为默认单词
+        MODEL_PATH + '/model.json', // 模型
+        MODEL_PATH + '/metadata.json' // 自定义源信息
+    );
+    // 确保模型加载
+    await recognizer.ensureModelLoaded();
+
+    // 获取模型能够识别的单词
+    const labels = recognizer.wordLabels().slice(2); // 去掉前两个无意义的单词
+    console.log(labels);
+
+    // 绘制交互界面
+    const resultEl = document.querySelector('#result');
+    resultEl.innerHTML = labels.map(l => `
+        <div>${l}</div>
+    `).join('');
+
+    // 打开设备麦克风监听，可以不用编写 h5 代码
+    recognizer.listen(result => {
+        const { scores } = result;
+        const maxValue = Math.max(...scores);
+        const index = scores.indexOf(maxValue) - 2; // 去掉前两个无意义的单词
+        resultEl.innerHTML = labels.map((l, i) => `
+            <div style="background: ${i === index && 'green'}">${l}</div>
+        `).join('');
+    }, {
+        overlapFactor: 0.3, // 识别频率
+        probabilityThreshold: 0.9 // 识别阈值，超过指定的准确度即执行上面的回调
+    });
+};

20-tensorflow.js/14-speech-cn/index.html

@@ -0,0 +1,9 @@
+<script src="script.js"></script>
+<button onclick="collect(this)">上一张</button>
+<button onclick="collect(this)">下一张</button>
+<button onclick="collect(this)">背景噪音</button>
+<button onclick="save()">保存</button>
+<pre id="count"></pre>
+<button onclick="train()">训练</button>
+<br><br>
+监听开关：<input type="checkbox" onchange="toggle(this.checked)">