前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型
更新時(shí)間：2022年07月09日 16:34:21 作者：前端修羅場
這篇文章主要為大家介紹了前端AI機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
識別鳶尾花
本文將在瀏覽器中定義、訓(xùn)練和運(yùn)行模型。 為了實(shí)現(xiàn)這一功能，我將構(gòu)建一個(gè)識別鳶尾花的案例。
接下來，我們將創(chuàng)建一個(gè)神經(jīng)網(wǎng)絡(luò)。同時(shí)，根據(jù)開源數(shù)據(jù)集我們將鳶尾花分為三類：Setosa、Virginica 和 Versicolor。
每個(gè)機(jī)器學(xué)習(xí)項(xiàng)目的核心都是數(shù)據(jù)集。 我們需要采取的第一步是將這個(gè)數(shù)據(jù)集拆分為訓(xùn)練集和測試集。
這樣做的原因是我們將使用我們的訓(xùn)練集來訓(xùn)練我們的算法和我們的測試集來檢查我們的預(yù)測的準(zhǔn)確性，以驗(yàn)證我們的模型是否可以使用或需要調(diào)整。
為了方便起見，我已經(jīng)將訓(xùn)練集和測試集拆分為兩個(gè) 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"}]訓(xùn)練集: 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"}]其中，訓(xùn)練集包含 130 個(gè)項(xiàng)目，測試集包含 14 個(gè)。如果你看看這些數(shù)據(jù)是什么樣子，你會看到
如下內(nèi)容：
{
"sepal_length": 5.1,
"sepal_width": 3.5,
"petal_length": 1.4,
"petal_width": 0.2,
"species": "setosa"
}
我們可以看到萼片和花瓣的長度和寬度的四個(gè)不同特征，以及物種的標(biāo)簽。
為了能夠?qū)⑺c Tensorflow.js 一起使用，我們需要將這些數(shù)據(jù)塑造成框架能夠理解的格式，在這種情況下，對于訓(xùn)練數(shù)據(jù)，它將是 [130, 4] 的 130 個(gè)樣本，每個(gè)樣本有四個(gè)特征。
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]
);
接下來，我們還需要對輸出數(shù)據(jù)進(jìn)行整形：
const output = tf.tensor2d(trainingSet.map(item => [
item.species === 'setosa' ? 1 : 0,
item.species === 'virginica' ? 1 : 0,
item.species === 'versicolor' ? 1 : 0
]), [130,3])
然后，一旦我們的數(shù)據(jù)準(zhǔn)備就緒，我們就可以繼續(xù)創(chuàng)建模型：
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'
}
));
在上面的代碼示例中，我們首先實(shí)例化一個(gè)順序模型，添加一個(gè)輸入和輸出層。
你可以看到內(nèi)部使用的參數(shù)（inputShape, activation, and units）超出了本文的范圍，因?yàn)樗鼈兛赡軙鶕?jù)你創(chuàng)建的模型、使用的數(shù)據(jù)類型等而有所不同。
一旦我們的模型準(zhǔn)備就緒，我們就可以使用我們的數(shù)據(jù)對其進(jìn)行訓(xùn)練：
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();
}
如果這運(yùn)作良好，你可以開始用自定義用戶輸入替換測試數(shù)據(jù)。
一旦我們調(diào)用我們的 main 函數(shù)，預(yù)測的輸出將看起來像以下三個(gè)選項(xiàng)之一：
[1,0,0] // Setosa[0,1,0] // Virginica[0,0,1] // Versicolor
預(yù)測返回一個(gè)由三個(gè)數(shù)字組成的數(shù)組，表示數(shù)據(jù)屬于三個(gè)類別之一的概率。 最接近 1 的數(shù)字是最高預(yù)測值。
例如，如果分類的輸出為 [0.0002, 0.9494, 0.0503]，則數(shù)組的第二個(gè)元素最高，因此模型預(yù)測新的輸入很可能是 Virginica。
這就是 Tensorflow.js 中的簡單神經(jīng)網(wǎng)絡(luò)！
我們只討論了 Irises 的一個(gè)小數(shù)據(jù)集，但如果您想繼續(xù)使用更大的數(shù)據(jù)集或處理圖像，步驟將是相同的：
- 收集數(shù)據(jù)；
- 在訓(xùn)練集和測試集之間拆分；
- 重新格式化數(shù)據(jù)以便 Tensorflow.js 可以理解它；
- 選擇你的算法；
- 擬合數(shù)據(jù)；
- 預(yù)測。
如果你想保存創(chuàng)建的模型以便能夠在另一個(gè)應(yīng)用程序中加載它并預(yù)測新數(shù)據(jù)，你可以使用以下行來執(zhí)行此操作：
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 中定義、訓(xùn)練和運(yùn)行機(jī)器學(xué)習(xí)模型</h1> <section class="data-inputs"> <h3>鳶尾花分類</h3> <p>正在訓(xùn)練中...</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>預(yù)測</button> </section> <section class="prediction-block"> <p>鳶尾花 預(yù)測:</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機(jī)器學(xué)習(xí)在瀏覽器中訓(xùn)練模型的詳細(xì)內(nèi)容，更多關(guān)于前端AI瀏覽器訓(xùn)練模型的資料請關(guān)注腳本之家其它相關(guān)文章！
您可能感興趣的文章:
- ollama搭建本地ai大模型并應(yīng)用調(diào)用的操作方法
- 大語言模型的開發(fā)利器langchainan安裝使用快速入門學(xué)習(xí)
- langchain Prompt大語言模型使用技巧詳解
- Docker?AIGC等大模型深度學(xué)習(xí)環(huán)境搭建步驟最新詳細(xì)版
- AI:如何訓(xùn)練機(jī)器學(xué)習(xí)的模型
- django數(shù)據(jù)模型on_delete, db_constraint的使用詳解
- TensorFlow入門使用 tf.train.Saver()保存模型
- Python從零開始訓(xùn)練AI模型的實(shí)用教程
相關(guān)文章
這篇文章主要介紹了微信小程序 網(wǎng)絡(luò)請求API詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
微信小程序 數(shù)組中的push與concat的區(qū)別
這篇文章主要介紹了微信小程序 數(shù)組中的push與concat的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-01-01
Servlet3.0與純javascript通過Ajax交互的實(shí)例詳解
Servlet與純javascript通過Ajax交互,對于很多人來說應(yīng)該很簡單。不過還是寫寫，方便Ajax學(xué)習(xí)的后來者2018-03-03
微信小程序 wx.request方法的異步封裝實(shí)例詳解
這篇文章主要介紹了微信小程序 wx.request方法的異步封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 共用變量值的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-07-07
微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序中頂部導(dǎo)航欄的實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-03-03
JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas
這篇文章主要為大家介紹了JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas可視化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了微信小程序 下拉菜單簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04
JS實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64示例詳解
這篇文章主要為大家介紹了JS實(shí)現(xiàn)將圖片URL轉(zhuǎn)base64示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
autojs寫一個(gè)畫板實(shí)現(xiàn)AI換頭狗頭蛇
這篇文章主要為大家介紹了autojs寫一個(gè)畫板實(shí)現(xiàn)AI換頭狗頭蛇過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01