在浏览器中怎么实现训练模型

[{"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"}]

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' } ));

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(); }

<!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="src/styles.css" rel="external nofollow" > </head> <body> <h2>使用 Tensorflow.js 在 JavaScript 中定义、训练和运行机器学习模型</h2> <section class="data-inputs"> <h4>鸢尾花分类</h4> <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="src/index.js"></script> </body> </html>

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();

body { font-family: "Avenir"; } h2 { 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; }

{ "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": [] }

识别鸢尾花

测试集: testing.json

训练集: training.json

完整代码

index.html

index.js

styles.css

package.json

相关阅读