首頁 > 軟體

前端AI機器學習在瀏覽器中訓練模型

2022-07-09 22:00:22

識別鳶尾花

本文將在瀏覽器中定義、訓練和執行模型。 為了實現這一功能，我將構建一個識別鳶尾花的案例。

接下來，我們將建立一個神經網路。同時，根據開源資料集我們將鳶尾花分為三類：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="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="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瀏覽器訓練模型的資料請關注it145.com其它相關文章！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com