篇首语：本文由编程笔记#小编为大家整理，主要介绍了TensorFlow.js机器学习教程 - 穿梭于浏览器与node间相关的知识，希望对你有一定的参考价值。
前端同学学习机器学习&＃xff0c;面对汗牛充栋的基于Python的各种教程&＃xff0c;虽然不见得不懂Python&＃xff0c;但是因为不是后端&＃xff0c;想把学到的知识用到工作中还是有一段距离。
Python确实在机器学习和深度学习领域有着不可替代的生态优势&＃xff0c;不过&＃xff0c;放到浏览器端和手机端&＃xff0c;Python的生态优势好像就发挥不出来了。不管是android手机还是ios手机&＃xff0c;默认都没有Python运行环境&＃xff0c;也写不了Python应用。浏览器里和小程序里&＃xff0c;就更没Python什么事儿了。
在浏览器里&＃xff0c;可以直接使用TensorFlow.js库&＃xff0c;尽管可能会有性能的问题&＃xff0c;但是至少是从0到1的突破。
我们看个例子&＃xff1a;
html>
<html>
<head>
<meta encoding&＃61;"UTF-8"/>
<script src&＃61;"https://cdn.jsdelivr.net/npm/&＃64;tensorflow/tfjs&＃64;3.6.0/dist/tf.min.js">script>
head>
<body>
<div id&＃61;"tf-display">div>
<script>
let a &＃61; tf.tensor1d([1.0]);
let d1 &＃61; document.getElementById("tf-display");
d1.innerText &＃61; a;
script>
body>
html>
可以看到&＃xff0c;在浏览器里显示了一个值为1.0的张量的值。我们的第一个TensorFlow.js(以下简称tf.js)应用就算是跑通了。通过引用tf.js的库&＃xff0c;我们就可以调用tf下面的函数。
下面我们修改一下&＃xff0c;看看tf.js是靠什么技术在运行的。我们通过tf.getBackend()函数来查看支持tf.js
<html>
<head>
<meta encoding&＃61;"UTF-8"/>
<script src&＃61;"https://cdn.jsdelivr.net/npm/&＃64;tensorflow/tfjs&＃64;3.6.0/dist/tf.min.js">script>
head>
<body>
<div id&＃61;"tf-display">div>
<div id&＃61;"tf-backend">div>
<script>
let a &＃61; tf.tensor1d([1.0,2.0,3.0]);
let d1 &＃61; document.getElementById("tf-display");
d1.innerText &＃61; a;
let backend &＃61; tf.getBackend();
let div_backend &＃61; document.getElementById("tf-backend");
div_backend.innerText &＃61; backend;
script>
body>
html>
在我的浏览器里&＃xff0c;tf.js是使用webgl来进行计算的。
作为一个js库&＃xff0c;tf.js当然也可以运行在node环境里。我们可以通过
npm install &＃64;tensorflow/tfjs
来安装tf.js库。
然后把上面网页里面的代码移值过来&＃xff1a;
const tf &＃61; require(&＃39;&＃64;tensorflow/tfjs&＃39;);
let a &＃61; tf.tensor1d([1.0,2.0,3.0]);
console.log(a);
console.log(tf.getBackend());
在我的电脑里执行&＃xff0c;这个getBackend()返回的是’cpu’.
tf.js还会给tfjs-node做个广告&＃xff1a;
&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
Hi there &＃x1f44b;. Looks like you are running TensorFlow.js in Node.js. To speed things up dramatically, install our node backend, which binds to TensorFlow C&＃43;&＃43;, by running npm i &＃64;tensorflow/tfjs-node, or npm i &＃64;tensorflow/tfjs-node-gpu if you have CUDA. Then call require(&＃39;&＃64;tensorflow/tfjs-node&＃39;); (-gpu suffix for CUDA) at the start of your program. Visit https://github.com/tensorflow/tfjs-node for more details.
&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;
听人劝吃饱饭&＃xff0c;那我们就换成tfjs-node吧&＃xff1a;
const tf &＃61; require(&＃39;&＃64;tensorflow/tfjs-node&＃39;);
let a &＃61; tf.tensor1d([1.0,2.0,3.0]);
console.log(a);
console.log(tf.getBackend());
记得要
npm install &＃64;tensorflow/tfjs-node
现在&＃xff0c;后端从cpu换成了tensorflow。
还有更凶残的&＃xff0c;我们还可以换成tfjs-node-gpu来使用GPU&＃xff1a;
const tf &＃61; require(&＃39;&＃64;tensorflow/tfjs-node-gpu&＃39;);
let a &＃61; tf.tensor1d([1.0,2.0,3.0]);
console.log(a);
console.log(tf.getBackend());
在没有GPU的机器上&＃xff0c;会使用CPU版的tensorflow作为后端&＃xff0c;不会报错。
按照国际惯例&＃xff0c;我们的tfjs机器学习之旅也从预测房价开始。
我们先搞个node里运行的版本&＃xff0c;这样我们可以使用tf.data.csv去读取csv数据。而在浏览器里&＃xff0c;我们就得求助于强大的papaparser之类的库了。
首先我们先指定数据的URL&＃xff0c;直接为网上的地址&＃xff1a;
const csvUrl &＃61;
&＃39;https://storage.googleapis.com/tfjs-examples/multivariate-linear-regression/data/boston-housing-train.csv&＃39;;
我们要预测的是房价中位数medv字段&＃xff0c;先定义好&＃xff1a;
const csvDataset &＃61; tf.data.csv(
csvUrl, {
columnConfigs: {
medv: {
isLabel: true
}
}
});
然后转换一下格式&＃xff1a;
// Number of features is the number of column names minus one for the label
// column.
const numOfFeatures &＃61; (await csvDataset.columnNames()).length - 1;
// Prepare the Dataset for training.
const flattenedDataset &＃61;
csvDataset
.map(({xs, ys}) &＃61;>
{
// Convert xs(features) and ys(labels) from object form (keyed by
// column name) to array form.
return {xs:Object.values(xs), ys:Object.values(ys)};
})
.batch(10);
线性回归就是没有隐藏层的一层。输入是numOfFeatures个元素&＃xff0c;输出是1个元素&＃xff1a;
const model &＃61; tf.sequential();
model.add(tf.layers.dense({
inputShape: [numOfFeatures],
units: 1
}));
最后设置优化算法、学习率等参数&＃xff0c;编译运行就好了&＃xff1a;
model.compile({
optimizer: tf.train.sgd(0.000001),
loss: &＃39;meanSquaredError&＃39;
});
return model.fitDataset(flattenedDataset, {
epochs: 10,
callbacks: {
onEpochEnd: async (epoch, logs) &＃61;> {
console.log(epoch &＃43; &＃39;:&＃39; &＃43; logs.loss);
}
}
});
其中说一下callbacks吧&＃xff0c;支持一些生命周期的回调。除了onEpochEnd&＃xff0c;还有onEpochBegin, onTrainBegin, onTrainEnd等&＃xff1a;
return model.fitDataset(flattenedDataset, {
epochs: 10,
callbacks: {
onEpochEnd: async (epoch, logs) &＃61;> {
console.log(epoch &＃43; &＃39;:&＃39; &＃43; logs.loss);
},
onTrainBegin: async(logs) &＃61;> {
console.log("Train Begin!");
},
onTrainEnd: async(logs) &＃61;> {
console.log(&＃39;Train End!&＃39;);
}
}
});
用Node运行&＃xff0c;就可以看到训练的过程了&＃xff1a;
Train Begin!
Epoch 1 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
1124ms 41639us/step - loss&＃61;1445.89
0:1445.89404296875
Epoch 2 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
1002ms 37093us/step - loss&＃61;254.11
1:254.1094970703125
Epoch 3 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
989ms 36618us/step - loss&＃61;250.23
2:250.233642578125
Epoch 4 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
965ms 35746us/step - loss&＃61;246.57
3:246.57472229003906
Epoch 5 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
974ms 36056us/step - loss&＃61;243.12
4:243.11817932128906
Epoch 6 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
955ms 35358us/step - loss&＃61;239.85
5:239.85049438476562
Epoch 7 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
963ms 35659us/step - loss&＃61;236.76
6:236.75921630859375
Epoch 8 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
942ms 34904us/step - loss&＃61;233.83
7:233.83265686035156
Epoch 9 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
963ms 35650us/step - loss&＃61;231.06
8:231.05992126464844
Epoch 10 / 10
eta&＃61;0.0 &＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;>
920ms 34064us/step - loss&＃61;228.43
9:228.43093872070312
Train End!
完整的代码如下&＃xff1a;
const tf &＃61; require(&＃39;&＃64;tensorflow/tfjs-node&＃39;);
const csvUrl &＃61;
&＃39;https://storage.googleapis.com/tfjs-examples/multivariate-linear-regression/data/boston-housing-train.csv&＃39;;
async function run() {
// We want to predict the column "medv", which represents a median value of
// a home (in $1000s), so we mark it as a label.
const csvDataset &＃61; tf.data.csv(
csvUrl, {
columnConfigs: {
medv: {
isLabel: true
}
}
});
// Number of features is the number of column names minus one for the label
// column.
const numOfFeatures &＃61; (await csvDataset.columnNames()).length - 1;
// Prepare the Dataset for training.
const flattenedDataset &＃61;
csvDataset
.map(({xs, ys}) &＃61;>
{
// Convert xs(features) and ys(labels) from object form (keyed by
// column name) to array form.
return {xs:Object.values(xs), ys:Object.values(ys)};
})
.batch(10);
// Define the model.
const model &＃61; tf.sequential();
model.add(tf.layers.dense({
inputShape: [numOfFeatures],
units: 1
}));
model.compile({
optimizer: tf.train.sgd(0.000001),
loss: &＃39;meanSquaredError&＃39;
});
// Fit the model using the prepared Dataset
return model.fitDataset(flattenedDataset, {
epochs: 10,
callbacks: {
onEpochEnd: async (epoch, logs) &＃61;> {
console.log(epoch &＃43; &＃39;:&＃39; &＃43; logs.loss);
},
onTrainBegin: async(logs) &＃61;> {
console.log("Train Begin!");
},
onTrainEnd: async(logs) &＃61;> {
console.log(&＃39;Train End!&＃39;);
}
}
});
}
run();
运行在浏览器里&＃xff0c;上面的核心算法都不用变&＃xff0c;只是对数据处理和UI的部分要复杂一些。
csv读取我们换用强大的papaparser:
export const loadCsv &＃61; async (filename) &＃61;> {
return new Promise(resolve &＃61;> {
const url &＃61; &＃96;${BASE_URL}${filename}&＃96;;
console.log(&＃96; * Downloading data from: ${url}&＃96;);
Papa.parse(url, {
download: true,
header: true,
complete: (results) &＃61;> {
resolve(parseCsv(results[&＃39;data&＃39;]));
}
})
});
};
模型还是那个模型&＃xff1a;
export function linearRegressionModel() {
const model &＃61; tf.sequential();
model.add(tf.layers.dense({inputShape: [bostonData.numFeatures], units: 1}));
model.summary();
return model;
};
compile的过程也是一样的&＃xff1a;
model.compile(
{optimizer: tf.train.sgd(LEARNING_RATE), loss: &＃39;meanSquaredError&＃39;});
训练的过程因为要更新UI变得更复杂了一些&＃xff1a;
await model.fit(tensors.trainFeatures, tensors.trainTarget, {
batchSize: BATCH_SIZE,
epochs: NUM_EPOCHS,
validationSplit: 0.2,
callbacks: {
onEpochEnd: async (epoch, logs) &＃61;> {
await ui.updateModelStatus(
&＃96;Epoch ${epoch &＃43; 1} of ${NUM_EPOCHS} completed.&＃96;, modelName);
trainLogs.push(logs);
tfvis.show.history(container, trainLogs, [&＃39;loss&＃39;, &＃39;val_loss&＃39;])
...
}
}
});
ui.updateStatus(&＃39;Running on test data...&＃39;);
const result &＃61; model.evaluate(
tensors.testFeatures, tensors.testTarget, {batchSize: BATCH_SIZE});
const testLoss &＃61; result.dataSync()[0];
浏览器里的完整代码请参看&＃xff1a;https://github.com/tensorflow/tfjs-examples/blob/master/boston-housing/&＃xff0c;这里希望更多给大家一个宏观的印象&＃xff0c;就不深入细节了。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 