0
| 本文作者： AI研習(xí)社-譯站 | 2021-01-18 16:39 |
譯者：AI研習(xí)社（FIONAbiubiu、成語(yǔ)風(fēng)）
雙語(yǔ)原文鏈接：Princess Finder using React, ml5.js, and Teachable Machine Learning
到了慶祝的時(shí)候了！我們剛剛送走了圣誕老人?，F(xiàn)在正等待新年的鐘聲敲響。所以我想到建立一個(gè)很酷的東西（至少我的七歲小公主會(huì)覺(jué)得）同時(shí)學(xué)一點(diǎn)機(jī)器學(xué)習(xí)。所以我們要做一個(gè)什么？
我借用的我女兒所有迪士尼公主人偶來(lái)建立一個(gè)機(jī)器學(xué)習(xí)模型，這個(gè)應(yīng)用取名為“Princess Finder”，可以通過(guò)攝像頭將這些人偶的公主信息都識(shí)別出來(lái)。本文中我們將會(huì)學(xué)到這背后的一些知識(shí)以及擴(kuò)展它們的可能性。
該 Princess Finder 應(yīng)用是使用以下內(nèi)容構(gòu)建的：
The Teachable Machine：如何簡(jiǎn)單，快速地創(chuàng)建models可直接在應(yīng)用程序或網(wǎng)站中使用的機(jī)器學(xué)習(xí)？可教學(xué)機(jī)器允許您將train計(jì)算機(jī)與圖像，聲音和姿勢(shì)一起使用。我們使用迪士尼公主創(chuàng)建了一個(gè)模型，以便我們可以Image Classification在應(yīng)用程序中使用它來(lái)執(zhí)行。
ml5.js：這是使用您的Web瀏覽器進(jìn)行的Web機(jī)器學(xué)習(xí)。它使用Web瀏覽器的內(nèi)置圖形處理單元（GPU）進(jìn)行快速計(jì)算。我們可以像使用，可以用API如imageClassifier(model)，classify等來(lái)進(jìn)行圖像分類。
React：這是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)。我們可以ml5.js在React應(yīng)用程序中使用它，只需安裝并將其作為依賴項(xiàng)導(dǎo)入即可。
這是應(yīng)用程序顯示的截圖，有93％的概率表明，這個(gè)娃娃是Jasmine（茉莉公主），它有明顯的金戒指標(biāo)記。
鑒于我根本不像迪士尼公主（甚至沒(méi)有洋娃娃）。因此，我自己的圖像已正確分類，說(shuō)No Dolls。
這是一個(gè)很棒的簡(jiǎn)單演示。
如果您是機(jī)器學(xué)習(xí)的新手，您可能會(huì)發(fā)現(xiàn)其中一些術(shù)語(yǔ)有些不知所措。最好是從更高維的角度了解它們的含義以了解用法。
您可以從此處閱讀有關(guān)這些和其他機(jī)器學(xué)習(xí)術(shù)語(yǔ)的更多信息。
我們的Princess Finder應(yīng)用程序使用Supervised Machine learning，我們有trained將model有很多examples的公主的照片。每個(gè)示例數(shù)據(jù)還包含一個(gè)label，用于通過(guò)名稱標(biāo)識(shí)特定的公主。
我們可以使用Teachable Machine用戶界面通過(guò)幾個(gè)簡(jiǎn)單的步驟來(lái)創(chuàng)建ML模型。首先，瀏覽到此鏈接。（需要VPN）您可以選擇圖像，聲音或姿勢(shì)項(xiàng)目。在我們的例子中，它將是一個(gè)圖像項(xiàng)目。
接下來(lái)，我們需要通過(guò)選擇示例（圖像和標(biāo)簽）來(lái)定義分類。我們可以使用網(wǎng)絡(luò)攝像頭拍攝照片，也可以上傳圖像。
加載示例后，我們便開(kāi)始培訓(xùn)。這將為我們創(chuàng)建一個(gè)模型。
訓(xùn)練完成后，您可以使用實(shí)時(shí)數(shù)據(jù)測(cè)試模型。滿意后，您可以導(dǎo)出模型以在應(yīng)用程序中使用它。
最后，我們可以下載模型以在我們的應(yīng)用程序中使用它。您可以選擇將模型上傳到云中，以使用URL進(jìn)行使用。您也可以將項(xiàng)目保存到Google Drive。
如果您有興趣使用或擴(kuò)展我創(chuàng)建的模型，則可以下載并將其導(dǎo)入“可教機(jī)器”界面。
現(xiàn)在我們有了一個(gè)模型。我們將使用該ml5.js庫(kù)導(dǎo)入模型，并使用實(shí)時(shí)流對(duì)圖像進(jìn)行分類。我最熟悉的是React。您可以使用任何UI庫(kù)，框架或原始JavaScript。我已經(jīng)使用create-react-app啟動(dòng)應(yīng)用程序的骨架并在一分鐘內(nèi)運(yùn)行。
安裝ml5.js依賴項(xiàng)
| # Or, npm install ml5 yarn add ml5 |
將模型解壓縮public到項(xiàng)目文件夾下。我們可以model在公共目錄下創(chuàng)建一個(gè)名為的文件夾，然后提取文件。
使用ml5.js庫(kù)來(lái)加載模型。我們將使用該imageClassifier方法來(lái)傳遞模型文件。此方法調(diào)用返回一個(gè)分類器對(duì)象，我們將在一段時(shí)間內(nèi)使用該對(duì)象對(duì)實(shí)時(shí)圖像進(jìn)行分類。還要注意，一旦成功加載模型，我們將初始化網(wǎng)絡(luò)攝像頭設(shè)備，以便我們可以從實(shí)時(shí)流中收集圖像。
| useEffect(() => { classifier = ml5.imageClassifier("./model/model.json", () => { navigator.mediaDevices .getUserMedia({ video: true, audio: false }) .then((stream) => { videoRef.current.srcObject = stream; videoRef.current.play(); setLoaded(true); }); }); }, []); |
我們還需要在render函數(shù)中定義一個(gè)視頻組件
| <video ref={videoRef} style={{ transform: "scale(-1, 1)" }} width="200" height="150" /> |
接下來(lái)，我們?cè)诜诸惼魃险{(diào)用classify()方法以獲取結(jié)果。該results是所有比賽的目標(biāo)參數(shù)標(biāo)簽的數(shù)組。
| classifier.classify(videoRef.current, (error, results) => { if (error) { console.error(error); return; } setResult(results); }); |
我們應(yīng)該classify在指定的時(shí)間間隔內(nèi)使用方法調(diào)用。您可以使用一個(gè)稱為React的React Hook，useInterval進(jìn)行相同操作。結(jié)果數(shù)組可能看起來(lái)像這樣，
請(qǐng)從此處找到App.js文件的完整代碼。就是這樣，您現(xiàn)在可以使用此result數(shù)組提供您想要的任何UI表示形式。在我們的例子中，我們?cè)趦蓚€(gè)React組件中使用了這個(gè)結(jié)果數(shù)組，
1.列出公主并突出顯示最匹配的那個(gè)
| <Princess data={result} / |
2.顯示儀表圖以指示匹配的置信度。
| <Chart data={result[0]} / |
Princess組件循環(huán)遍歷結(jié)果數(shù)組，并使用一些CSS樣式突出顯示它們，并呈現(xiàn)它們。
| import React from "react"; const Princess = (props) => { const mostMatched = props.data[0]; const allLabels = props.data.map((elem) => elem.label); const sortedLabels = allLabels.sort((a, b) => a.localeCompare(b)); return ( <> <ul className="princes"> {sortedLabels.map((label) => ( <li key={label}> <span> <img className={`img ${ label === mostMatched.label ? "selected" : null }`} src={ label === "No Dolls" ? "./images/No.png" : `./images/${label}.png` } alt={label} /> <p className="name">{label}</p> </span> </li> ))} </ul> </> ); }; export default Princess; |
圖表組件就是這樣
| import React from "react"; import GaugeChart from "react-gauge-chart"; const Chart = (props) => { const data = props.data; const label = data.label; const confidence = parseFloat(data.confidence.toFixed(2)); return ( <div> <h3>Classification Confidence: {label}</h3> <GaugeChart id="gauge-chart3" nrOfLevels={3} colors={["#FF5F6D", "#FFC371", "rgb(26 202 26)"]} arcWidth={0.3} percent={confidence} /> </div> ); }; export default Chart; |
就是這樣。請(qǐng)從GitHub存儲(chǔ)庫(kù)中找到完整的源代碼。如果您喜歡這項(xiàng)工作，請(qǐng)隨時(shí)給項(xiàng)目加星號(hào)（?）。
https://github.com/atapas/princess-finder
AI研習(xí)社是AI學(xué)術(shù)青年和AI開(kāi)發(fā)者技術(shù)交流的在線社區(qū)。我們與高校、學(xué)術(shù)機(jī)構(gòu)和產(chǎn)業(yè)界合作，通過(guò)提供學(xué)習(xí)、實(shí)戰(zhàn)和求職服務(wù)，為AI學(xué)術(shù)青年和開(kāi)發(fā)者的交流互助和職業(yè)發(fā)展打造一站式平臺(tái)，致力成為中國(guó)最大的科技創(chuàng)新人才聚集地。
如果，你也是位熱愛(ài)分享的AI愛(ài)好者。歡迎與譯站一起，學(xué)習(xí)新知，分享成長(zhǎng)。
雷峰網(wǎng)版權(quán)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。
