识别鸢尾花
本文将在浏览器中定义、训练和运行模型。 为了实现这一功能,我将构建一个识别鸢尾花的案例。
接下来,我们将创建一个神经网络。同时,根据开源数据集我们将鸢尾花分为三类:Setosa、Virginica 和 Versicolor。
每个机器学习项目的核心都是数据集。 我们需要采取的第一步是将这个数据集拆分为训练集和测试集。
这样做的原因是我们将使用我们的训练集来训练我们的算法和我们的测试集来检查我们的预测的准确性,以验证我们的模型是否可以使用或需要调整。
为了方便起见,我已经将训练集和测试集拆分为两个 JSON 文件:
测试集: testing.json
[{"sepal_length":6,"sepal_width":2.9,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":5.2,"sepal_width":3.4,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":6.5,"sepal_width":3,"petal_length":5.8,"petal_width":2.2,"species":"virginica"}, {"sepal_length":5.9,"sepal_width":3.2,"petal_length":4.8,"petal_width":1.8,"species":"versicolor"}, {"sepal_length":5.1,"sepal_width":3.8,"petal_length":1.9,"petal_width":0.4,"species":"setosa"}, {"sepal_length":5.4,"sepal_width":3,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":7,"sepal_width":3.2,"petal_length":4.7,"petal_width":1.4,"species":"versicolor"}, {"sepal_length":5.7,"sepal_width":2.8,"petal_length":4.5,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.1,"sepal_width":2.5,"petal_length":3,"petal_width":1.1,"species":"versicolor"}, {"sepal_length":4.9,"sepal_width":2.4,"petal_length":3.3,"petal_width":1,"species":"versicolor"}, {"sepal_length":5.1,"sepal_width":3.7,"petal_length":1.5,"petal_width":0.4,"species":"setosa"}, {"sepal_length":5.7,"sepal_width":2.8,"petal_length":4.1,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.6,"sepal_width":3,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":6.1,"sepal_width":3,"petal_length":4.6,"petal_width":1.4,"species":"versicolor"}]
训练集: training.json
[{"sepal_length":5.1,"sepal_width":3.5,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.9,"sepal_width":3,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.7,"sepal_width":3.2,"petal_length":1.3,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.6,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.6,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.6,"sepal_width":3.4,"petal_length":1.4,"petal_width":0.3,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.4,"petal_length":1.5,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.4,"sepal_width":2.9,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.9,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"}, {"sepal_length":5.4,"sepal_width":3.7,"petal_length":1.5,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.8,"sepal_width":3.4,"petal_length":1.6,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.8,"sepal_width":3,"petal_length":1.4,"petal_width":0.1,"species":"setosa"}, {"sepal_length":4.3,"sepal_width":3,"petal_length":1.1,"petal_width":0.1,"species":"setosa"}, {"sepal_length":5.8,"sepal_width":4,"petal_length":1.2,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5.7,"sepal_width":4.4,"petal_length":1.5,"petal_width":0.4,"species":"setosa"}, {"sepal_length":5.4,"sepal_width":3.9,"petal_length":1.3,"petal_width":0.4,"species":"setosa"}, {"sepal_length":5.1,"sepal_width":3.5,"petal_length":1.4,"petal_width":0.3,"species":"setosa"}, {"sepal_length":5.7,"sepal_width":3.8,"petal_length":1.7,"petal_width":0.3,"species":"setosa"}, {"sepal_length":5.1,"sepal_width":3.8,"petal_length":1.5,"petal_width":0.3,"species":"setosa"}, {"sepal_length":5.4,"sepal_width":3.4,"petal_length":1.7,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.6,"sepal_width":3.6,"petal_length":1,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5.1,"sepal_width":3.3,"petal_length":1.7,"petal_width":0.5,"species":"setosa"}, {"sepal_length":4.8,"sepal_width":3.4,"petal_length":1.9,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5,"sepal_width":3,"petal_length":1.6,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.4,"petal_length":1.6,"petal_width":0.4,"species":"setosa"}, {"sepal_length":5.2,"sepal_width":3.5,"petal_length":1.5,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.7,"sepal_width":3.2,"petal_length":1.6,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.8,"sepal_width":3.1,"petal_length":1.6,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5.4,"sepal_width":3.4,"petal_length":1.5,"petal_width":0.4,"species":"setosa"}, {"sepal_length":5.2,"sepal_width":4.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"}, {"sepal_length":5.5,"sepal_width":4.2,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.9,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.2,"petal_length":1.2,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5.5,"sepal_width":3.5,"petal_length":1.3,"petal_width":0.2,"species":"setosa"}, {"sepal_length":4.9,"sepal_width":3.1,"petal_length":1.5,"petal_width":0.1,"species":"setosa"}, {"sepal_length":4.4,"sepal_width":3,"petal_length":1.3,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5.1,"sepal_width":3.4,"petal_length":1.5,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.5,"petal_length":1.3,"petal_width":0.3,"species":"setosa"}, {"sepal_length":4.5,"sepal_width":2.3,"petal_length":1.3,"petal_width":0.3,"species":"setosa"}, {"sepal_length":4.4,"sepal_width":3.2,"petal_length":1.3,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.5,"petal_length":1.6,"petal_width":0.6,"species":"setosa"}, {"sepal_length":4.8,"sepal_width":3,"petal_length":1.4,"petal_width":0.3,"species":"setosa"}, {"sepal_length":5.1,"sepal_width":3.8,"petal_length":1.6,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5.3,"sepal_width":3.7,"petal_length":1.5,"petal_width":0.2,"species":"setosa"}, {"sepal_length":5,"sepal_width":3.3,"petal_length":1.4,"petal_width":0.2,"species":"setosa"}, {"sepal_length":6.4,"sepal_width":3.2,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":5.5,"sepal_width":2.3,"petal_length":4,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":6.5,"sepal_width":2.8,"petal_length":4.6,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":6.3,"sepal_width":3.3,"petal_length":4.7,"petal_width":1.6,"species":"versicolor"}, {"sepal_length":6.6,"sepal_width":2.9,"petal_length":4.6,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.2,"sepal_width":2.7,"petal_length":3.9,"petal_width":1.4,"species":"versicolor"}, {"sepal_length":5,"sepal_width":2,"petal_length":3.5,"petal_width":1,"species":"versicolor"}, {"sepal_length":5.9,"sepal_width":3,"petal_length":4.2,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":6,"sepal_width":2.2,"petal_length":4,"petal_width":1,"species":"versicolor"}, {"sepal_length":6.1,"sepal_width":2.9,"petal_length":4.7,"petal_width":1.4,"species":"versicolor"}, {"sepal_length":5.6,"sepal_width":2.9,"petal_length":3.6,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":6.7,"sepal_width":3.1,"petal_length":4.4,"petal_width":1.4,"species":"versicolor"}, {"sepal_length":5.8,"sepal_width":2.7,"petal_length":4.1,"petal_width":1,"species":"versicolor"}, {"sepal_length":6.2,"sepal_width":2.2,"petal_length":4.5,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":5.6,"sepal_width":2.5,"petal_length":3.9,"petal_width":1.1,"species":"versicolor"}, {"sepal_length":6.1,"sepal_width":2.8,"petal_length":4,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":6.3,"sepal_width":2.5,"petal_length":4.9,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":6.1,"sepal_width":2.8,"petal_length":4.7,"petal_width":1.2,"species":"versicolor"}, {"sepal_length":6.4,"sepal_width":2.9,"petal_length":4.3,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":6.6,"sepal_width":3,"petal_length":4.4,"petal_width":1.4,"species":"versicolor"}, {"sepal_length":6.8,"sepal_width":2.8,"petal_length":4.8,"petal_width":1.4,"species":"versicolor"}, {"sepal_length":6.7,"sepal_width":3,"petal_length":5,"petal_width":1.7,"species":"versicolor"}, {"sepal_length":5.7,"sepal_width":2.6,"petal_length":3.5,"petal_width":1,"species":"versicolor"}, {"sepal_length":5.5,"sepal_width":2.4,"petal_length":3.8,"petal_width":1.1,"species":"versicolor"}, {"sepal_length":5.5,"sepal_width":2.4,"petal_length":3.7,"petal_width":1,"species":"versicolor"}, {"sepal_length":5.8,"sepal_width":2.7,"petal_length":3.9,"petal_width":1.2,"species":"versicolor"}, {"sepal_length":6,"sepal_width":2.7,"petal_length":5.1,"petal_width":1.6,"species":"versicolor"}, {"sepal_length":6,"sepal_width":3.4,"petal_length":4.5,"petal_width":1.6,"species":"versicolor"}, {"sepal_length":6.7,"sepal_width":3.1,"petal_length":4.7,"petal_width":1.5,"species":"versicolor"}, {"sepal_length":6.3,"sepal_width":2.3,"petal_length":4.4,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.6,"sepal_width":3,"petal_length":4.1,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.5,"sepal_width":2.5,"petal_length":4,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.5,"sepal_width":2.6,"petal_length":4.4,"petal_width":1.2,"species":"versicolor"}, {"sepal_length":5.8,"sepal_width":2.6,"petal_length":4,"petal_width":1.2,"species":"versicolor"}, {"sepal_length":5,"sepal_width":2.3,"petal_length":3.3,"petal_width":1,"species":"versicolor"}, {"sepal_length":5.6,"sepal_width":2.7,"petal_length":4.2,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":5.7,"sepal_width":3,"petal_length":4.2,"petal_width":1.2,"species":"versicolor"}, {"sepal_length":6.2,"sepal_width":2.9,"petal_length":4.3,"petal_width":1.3,"species":"versicolor"}, {"sepal_length":6.3,"sepal_width":3.3,"petal_length":6,"petal_width":2.5,"species":"virginica"}, {"sepal_length":5.8,"sepal_width":2.7,"petal_length":5.1,"petal_width":1.9,"species":"virginica"}, {"sepal_length":7.1,"sepal_width":3,"petal_length":5.9,"petal_width":2.1,"species":"virginica"}, {"sepal_length":6.3,"sepal_width":2.9,"petal_length":5.6,"petal_width":1.8,"species":"virginica"}, {"sepal_length":7.6,"sepal_width":3,"petal_length":6.6,"petal_width":2.1,"species":"virginica"}, {"sepal_length":4.9,"sepal_width":2.5,"petal_length":4.5,"petal_width":1.7,"species":"virginica"}, {"sepal_length":7.3,"sepal_width":2.9,"petal_length":6.3,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6.7,"sepal_width":2.5,"petal_length":5.8,"petal_width":1.8,"species":"virginica"}, {"sepal_length":7.2,"sepal_width":3.6,"petal_length":6.1,"petal_width":2.5,"species":"virginica"}, {"sepal_length":6.5,"sepal_width":3.2,"petal_length":5.1,"petal_width":2,"species":"virginica"}, {"sepal_length":6.4,"sepal_width":2.7,"petal_length":5.3,"petal_width":1.9,"species":"virginica"}, {"sepal_length":6.8,"sepal_width":3,"petal_length":5.5,"petal_width":2.1,"species":"virginica"}, {"sepal_length":5.7,"sepal_width":2.5,"petal_length":5,"petal_width":2,"species":"virginica"}, {"sepal_length":5.8,"sepal_width":2.8,"petal_length":5.1,"petal_width":2.4,"species":"virginica"}, {"sepal_length":6.4,"sepal_width":3.2,"petal_length":5.3,"petal_width":2.3,"species":"virginica"}, {"sepal_length":6.5,"sepal_width":3,"petal_length":5.5,"petal_width":1.8,"species":"virginica"}, {"sepal_length":7.7,"sepal_width":3.8,"petal_length":6.7,"petal_width":2.2,"species":"virginica"}, {"sepal_length":7.7,"sepal_width":2.6,"petal_length":6.9,"petal_width":2.3,"species":"virginica"}, {"sepal_length":6,"sepal_width":2.2,"petal_length":5,"petal_width":1.5,"species":"virginica"}, {"sepal_length":6.9,"sepal_width":3.2,"petal_length":5.7,"petal_width":2.3,"species":"virginica"}, {"sepal_length":5.6,"sepal_width":2.8,"petal_length":4.9,"petal_width":2,"species":"virginica"}, {"sepal_length":7.7,"sepal_width":2.8,"petal_length":6.7,"petal_width":2,"species":"virginica"}, {"sepal_length":6.3,"sepal_width":2.7,"petal_length":4.9,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6.7,"sepal_width":3.3,"petal_length":5.7,"petal_width":2.1,"species":"virginica"}, {"sepal_length":7.2,"sepal_width":3.2,"petal_length":6,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6.2,"sepal_width":2.8,"petal_length":4.8,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6.1,"sepal_width":3,"petal_length":4.9,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6.4,"sepal_width":2.8,"petal_length":5.6,"petal_width":2.1,"species":"virginica"}, {"sepal_length":7.2,"sepal_width":3,"petal_length":5.8,"petal_width":1.6,"species":"virginica"}, {"sepal_length":7.9,"sepal_width":3.8,"petal_length":6.4,"petal_width":2,"species":"virginica"}, {"sepal_length":6.4,"sepal_width":2.8,"petal_length":5.6,"petal_width":2.2,"species":"virginica"}, {"sepal_length":6.3,"sepal_width":2.8,"petal_length":5.1,"petal_width":1.5,"species":"virginica"}, {"sepal_length":6.1,"sepal_width":2.6,"petal_length":5.6,"petal_width":1.4,"species":"virginica"}, {"sepal_length":7.7,"sepal_width":3,"petal_length":6.1,"petal_width":2.3,"species":"virginica"}, {"sepal_length":6.3,"sepal_width":3.4,"petal_length":5.6,"petal_width":2.4,"species":"virginica"}, {"sepal_length":6.4,"sepal_width":3.1,"petal_length":5.5,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6,"sepal_width":3,"petal_length":4.8,"petal_width":1.8,"species":"virginica"}, {"sepal_length":6.9,"sepal_width":3.1,"petal_length":5.4,"petal_width":2.1,"species":"virginica"}, {"sepal_length":6.7,"sepal_width":3.1,"petal_length":5.6,"petal_width":2.4,"species":"virginica"}, {"sepal_length":6.9,"sepal_width":3.1,"petal_length":5.1,"petal_width":2.3,"species":"virginica"}, {"sepal_length":5.8,"sepal_width":2.7,"petal_length":5.1,"petal_width":1.9,"species":"virginica"}, {"sepal_length":6.8,"sepal_width":3.2,"petal_length":5.9,"petal_width":2.3,"species":"virginica"}, {"sepal_length":6.7,"sepal_width":3.3,"petal_length":5.7,"petal_width":2.5,"species":"virginica"}, {"sepal_length":6.7,"sepal_width":3,"petal_length":5.2,"petal_width":2.3,"species":"virginica"}, {"sepal_length":6.3,"sepal_width":2.5,"petal_length":5,"petal_width":1.9,"species":"virginica"}, {"sepal_length":6.5,"sepal_width":3,"petal_length":5.2,"petal_width":2,"species":"virginica"}, {"sepal_length":6.2,"sepal_width":3.4,"petal_length":5.4,"petal_width":2.3,"species":"virginica"}]
其中,训练集包含 130 个项目,测试集包含 14 个。如果你看看这些数据是什么样子,你会看到
如下内容:
{ "sepal_length": 5.1, "sepal_width": 3.5, "petal_length": 1.4, "petal_width": 0.2, "species": "setosa" }
我们可以看到萼片和花瓣的长度和宽度的四个不同特征,以及物种的标签。
为了能够将它与 Tensorflow.js 一起使用,我们需要将这些数据塑造成框架能够理解的格式,在这种情况下,对于训练数据,它将是 [130, 4] 的 130 个样本,每个样本有四个特征。
import * as trainingSet from "training.json"; import * as testSet from "testing.json"; const trainingData = tf.tensor2d( trainingSet.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [130, 4] ); const testData = tf.tensor2d( testSet.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [14, 4] );
接下来,我们还需要对输出数据进行整形:
const output = tf.tensor2d(trainingSet.map(item => [ item.species === 'setosa' ? 1 : 0, item.species === 'virginica' ? 1 : 0, item.species === 'versicolor' ? 1 : 0 ]), [130,3])
然后,一旦我们的数据准备就绪,我们就可以继续创建模型:
const model = tf.sequential(); model.add(tf.layers.dense( { inputShape: 4, activation: 'sigmoid', units: 10 } )); model.add(tf.layers.dense( { inputShape: 10, units: 3, activation: 'softmax' } ));
在上面的代码示例中,我们首先实例化一个顺序模型,添加一个输入和输出层。
你可以看到内部使用的参数(inputShape, activation, and units
)超出了本文的范围,因为它们可能会根据你创建的模型、使用的数据类型等而有所不同。
一旦我们的模型准备就绪,我们就可以使用我们的数据对其进行训练:
async function train_data(){ for(let i=0;i<15;i++){ const res = await model.fit(trainingData, outputData,{epochs: 40}); } } async function main() { await train_data(); model.predict(testSet).print(); }
如果这运作良好,你可以开始用自定义用户输入替换测试数据。
一旦我们调用我们的 main
函数,预测的输出将看起来像以下三个选项之一:
[1,0,0] // Setosa[0,1,0] // Virginica[0,0,1] // Versicolor
预测返回一个由三个数字组成的数组,表示数据属于三个类别之一的概率。 最接近 1 的数字是最高预测值。
例如,如果分类的输出为 [0.0002, 0.9494, 0.0503]
,则数组的第二个元素最高,因此模型预测新的输入很可能是 Virginica。
这就是 Tensorflow.js 中的简单神经网络!
我们只讨论了 Irises 的一个小数据集,但如果您想继续使用更大的数据集或处理图像,步骤将是相同的:
- 收集数据;
- 在训练集和测试集之间拆分;
- 重新格式化数据以便 Tensorflow.js 可以理解它;
- 选择你的算法;
- 拟合数据;
- 预测。
如果你想保存创建的模型以便能够在另一个应用程序中加载它并预测新数据,你可以使用以下行来执行此操作:
await model.save('file:///path/to/my-model'); // in Node.js
完整代码
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Tensorflow.js</title> <link rel="stylesheet" href="https://www.atool.online/article/src/styles.css" rel="external nofollow" > </head> <body> <h1>使用 Tensorflow.js 在 JavaScript 中定义、训练和运行机器学习模型</h1> <section class="data-inputs"> <h3>鸢尾花分类</h3> <p>正在训练中...</p> <p class="training-steps"></p> <div class="input-block"> <label for="sepal-length">Sepal lenth:</label> <input name="sepal-length" type="number" min="0" max="100" placeholder="1.5"> </div> <div class="input-block"> <label for="sepal-width">Sepal width:</label> <input name="sepal-width" type="number" min="0" max="100" placeholder="0.4"> </div> <div class="input-block"> <label for="petal-length">Petal length:</label> <input name="petal-length" type="number" min="0" max="100" placeholder="1.0"> </div> <div class="input-block"> <label for="petal-width">Petal width:</label> <input name="petal-width" type="number" min="0" max="100" placeholder="0.7"> </div> <button class="predict" disabled>预测</button> </section> <section class="prediction-block"> <p>鸢尾花 预测:</p> <p class="prediction"></p> </section> <script src="https://www.atool.online/article/src/index.js"></script> </body> </html>
index.js
import * as tf from "@tensorflow/tfjs"; import trainingSet from "./training.json"; import testSet from "./testing.json"; let trainingData, testingData, outputData, model; let training = true; let predictButton = document.getElementsByClassName("predict")[0]; const init = async () => { splitData(); createModel(); await trainData(); if (!training) { predictButton.disabled = false; predictButton.onclick = () => { const inputData = getInputData(); predict(inputData); }; } }; const splitData = () => { trainingData = tf.tensor2d( trainingSet.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [130, 4] ); testingData = tf.tensor2d( testSet.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [14, 4] ); outputData = tf.tensor2d( trainingSet.map(item => [ item.species === "setosa" ? 1 : 0, item.species === "virginica" ? 1 : 0, item.species === "versicolor" ? 1 : 0 ]), [130, 3] ); }; const createModel = () => { model = tf.sequential(); model.add( tf.layers.dense({ inputShape: 4, activation: "sigmoid", units: 10 }) ); model.add( tf.layers.dense({ inputShape: 10, units: 3, activation: "softmax" }) ); model.compile({ loss: "categoricalCrossentropy", optimizer: tf.train.adam() }); }; const trainData = async () => { let numSteps = 15; let trainingStepsDiv = document.getElementsByClassName("training-steps")[0]; for (let i = 0; i < numSteps; i++) { let res = await model.fit(trainingData, outputData, { epochs: 40 }); trainingStepsDiv.innerHTML = `Training step: ${i}/${numSteps - 1}, loss: ${ res.history.loss[0] }`; if (i === numSteps - 1) { training = false; } } }; const predict = async inputData => { for (let [key, value] of Object.entries(inputData)) { inputData[key] = parseFloat(value); } inputData = [inputData]; let newDataTensor = tf.tensor2d( inputData.map(item => [ item.sepal_length, item.sepal_width, item.petal_length, item.petal_width ]), [1, 4] ); let prediction = model.predict(newDataTensor); displayPrediction(prediction); }; const getInputData = () => { let sepalLength = document.getElementsByName("sepal-length")[0].value; let sepalWidth = document.getElementsByName("sepal-width")[0].value; let petalLength = document.getElementsByName("petal-length")[0].value; let petalWidth = document.getElementsByName("petal-width")[0].value; return { sepal_length: sepalLength, sepal_width: sepalWidth, petal_length: petalLength, petal_width: petalWidth }; }; const displayPrediction = prediction => { let predictionDiv = document.getElementsByClassName("prediction")[0]; let predictionSection = document.getElementsByClassName( "prediction-block" )[0]; let maxProbability = Math.max(...prediction.dataSync()); let predictionIndex = prediction.dataSync().indexOf(maxProbability); let irisPrediction; switch (predictionIndex) { case 0: irisPrediction = "Setosa"; break; case 1: irisPrediction = "Virginica"; break; case 2: irisPrediction = "Versicolor"; break; default: irisPrediction = ""; break; } predictionDiv.innerHTML = irisPrediction; predictionSection.style.display = "block"; }; init();
styles.css
body { font-family: "Avenir"; } h1 { text-align: center; width: 80%; margin: 0 auto; } .data-inputs { display: block; width: 80%; margin: 0 auto; } .input-block { display: inline-block; width: fit-content; margin: 1em 0.5em 2em 0.5em; } .input-block:first-of-type { margin-left: 0; } .input-block input { width: 7em; height: 2em; } .input-block input::placeholder { color: rgba(0, 0, 0, 0.3); } button { display: block; padding: 0.5em 1em; border-radius: 5px; font-size: 14px; } .prediction-block { display: none; width: 80%; margin: 0 auto; }
package.json
{ "name": "Irises Classficaton", "version": "1.0.0", "description": "", "main": "index.html", "scripts": { "start": "parcel index.html --open", "build": "parcel build index.html" }, "dependencies": { "@tensorflow/tfjs": "1.1.2" }, "devDependencies": { "@babel/core": "7.2.0", "parcel-bundler": "^1.6.1" }, "keywords": [] }
效果如下:
以上就是前端AI机器学习在浏览器中训练模型的详细内容,更多关于前端AI浏览器训练模型的资料请关注阿兔在线工具其它相关文章!