【原】比 Tesorflow 還強(qiáng)！？

ml_Py 2022-03-30

展開全文

大家好，我是章北海

Python是機(jī)器學(xué)習(xí)和深度學(xué)習(xí)的首選編程語言，但絕不是唯一。訓(xùn)練機(jī)器學(xué)習(xí)/深度學(xué)習(xí)模型并部署對(duì)外提供服務(wù)（尤其是通過瀏覽器）JavaScript 是一個(gè)不錯(cuò)的選擇，市面上也出現(xiàn)了很多機(jī)器學(xué)習(xí)庫，比較著名的就是谷歌的 TensorFlow.js。我在《用瀏覽器玩機(jī)器學(xué)習(xí)，贊！》一文中已詳細(xì)介紹它的用法，感興趣的同學(xué)可以去看看。

今天要向大家介紹一個(gè)功能更加強(qiáng)大的機(jī)器學(xué)習(xí)庫——ML5.js。它構(gòu)建在 Tensorflow 之上，可進(jìn)一步簡化直接從 JavaScript訪問機(jī)器學(xué)習(xí)模型的過程。

ml5.js

ml5.js是一個(gè)javascript實(shí)現(xiàn)的，能在瀏覽器里面運(yùn)行的機(jī)器學(xué)習(xí)框架，它封裝了tensorflow.js的API，給開發(fā)者提供一個(gè)更簡單的使用環(huán)境，降低了機(jī)器學(xué)習(xí)編碼的成本。

ml5js官方提供的機(jī)器學(xué)習(xí)案例類型有圖像、聲音和文本等類別.

每個(gè)模型都有初始化，參數(shù)，屬性，方法的詳細(xì)介紹，以ml5.imageClassifier() 為例，大家去對(duì)應(yīng)目錄查看即可：

https://learn./#/reference/image-classifier

其實(shí)大家完全不用擔(dān)心難以使用，因?yàn)閙l5.js，太簡單了。有多簡化？我們看一下核心代碼：

// Step 1: 使用MobileNet創(chuàng)建圖像分類模型
const classifier = ml5.imageClassifier('MobileNet', onModelReady);

// Step 2: 選擇一張圖片
const img = document.querySelector("#myImage")

// Step 3: 預(yù)測圖片分類結(jié)果
let prediction = classifier.predict(img, gotResults);

// Step 4: 對(duì)結(jié)果進(jìn)行操作
function gotResults(err, results) {
  console.log(results);

}

html中使用ml5.js更簡單了，只需一行：

<script src="https:///ml5@0.10.5/dist/ml5.min.js" type="text/javascript"></script>

是不是及其簡單？

ml5js 如何入門

學(xué)習(xí)ml5.js最佳方式是從官方實(shí)例入手：examples.

大家可以通過 p5.js web editor查看案例，不但可以實(shí)時(shí)看到效果，還有具體代碼：

p5.js 是一個(gè)JavaScript的函數(shù)庫，是一個(gè)對(duì)初學(xué)者非常友好的編程環(huán)境，能夠?qū)⒅谱鞒鰜淼挠袆?chuàng)意，有趣的東西呈現(xiàn)在任何的瀏覽器上。

不過我更推薦克隆整個(gè)項(xiàng)目，然后在本地運(yùn)行這些案例，步驟如下：

# 1:克隆項(xiàng)目
git clone https://github.com/ml5js/ml5-library.git
cd ml5-library

# 2:安裝依賴
npm install

# 3:運(yùn)行本地服務(wù)
npm run develop

# 4:瀏覽器訪問  localhost:8081

ml5js 實(shí)例

以圖形識(shí)別為例，一個(gè)項(xiàng)目必須包含一個(gè)html頁面，代碼如下：

<html>

<head>
  <meta charset="UTF-8">
  <title>Image Classification Example</title>
  <script src="https:///ml5@0.10.5/dist/ml5.min.js" type="text/javascript"></script>
</head>

<body>
  <h1>Image classification using MobileNet</h1>
  <p>The MobileNet model labeled this as <span id="result">...</span> with a confidence of <span id="probability">...</span>.</p>
  <img src="images/dog.jpeg" id="image" width="400"                    />
  <script src="sketch.js"></script>
</body>

</html>

模型實(shí)現(xiàn)在 sketch.js，代碼如下：

const image = document.getElementById('image'); // 需要識(shí)別的圖片
const result = document.getElementById('result'); // html中的結(jié)果標(biāo)簽
const probability = document.getElementById('probability'); // 識(shí)別概率標(biāo)簽

// 用MobileNet初始化imageClassifier
ml5.imageClassifier('MobileNet')
  .then(classifier => classifier.classify(image))
  .then(results => {
    result.innerText = results[0].label;
    probability.innerText = results[0].confidence.toFixed(4);
  });