通過機器學習識別「迪士尼在逃公主」，程式設計師寵女的正確打開方式！

  • 2021 年 1 月 18 日
  • AI

譯者：AI研習社（FIONAbiubiu、成語風）

雙語原文鏈接：Princess Finder using React, ml5.js, and Teachable Machine Learning

到了慶祝的時候了！我們剛剛送走了聖誕老人。現在正等待新年的鐘聲敲響。所以我想到建立一個很酷的東西（至少我的七歲小公主會覺得）同時學一點機器學習。所以我們要做一個什麼？

我借用的我女兒所有迪士尼公主人偶來建立一個機器學習模型，這個應用取名為「Princess Finder」，可以通過攝影機將這些人偶的公主資訊都識別出來。本文中我們將會學到這背後的一些知識以及擴展它們的可能性。

The Princess Finder

該 Princess Finder 應用是使用以下內容構建的：

  • The Teachable Machine：如何簡單，快速地創建models可直接在應用程式或網站中使用的機器學習？可教學機器允許您將train電腦與影像，聲音和姿勢一起使用。我們使用迪士尼公主創建了一個模型，以便我們可以Image Classification在應用程式中使用它來執行。

  • ml5.js：這是使用您的Web瀏覽器進行的Web機器學習。它使用Web瀏覽器的內置圖形處理單元（GPU）進行快速計算。我們可以像使用，可以用API如imageClassifier(model)，classify等來進行影像分類。

  • React：這是一個用於構建用戶介面的JavaScript庫。我們可以ml5.js在React應用程式中使用它，只需安裝並將其作為依賴項導入即可。

這是應用程式顯示的截圖，有93％的概率表明，這個娃娃是Jasmine（茉莉公主），它有明顯的金戒指標記。

鑒於我根本不像迪士尼公主（甚至沒有洋娃娃）。因此，我自己的影像已正確分類，說No Dolls。

這是一個很棒的簡單演示。

幾個術語

如果您是機器學習的新手，您可能會發現其中一些術語有些不知所措。最好是從更高維的角度了解它們的含義以了解用法。

您可以從此處閱讀有關這些和其他機器學習術語的更多資訊。

我們的Princess Finder應用程式使用Supervised Machine learning，我們有trained將model有很多examples的公主的照片。每個示例數據還包含一個label，用於通過名稱標識特定的公主。

Teachable Machine

我們可以使用Teachable Machine用戶介面通過幾個簡單的步驟來創建ML模型。首先，瀏覽到此鏈接。（需要VPN）您可以選擇影像，聲音或姿勢項目。在我們的例子中，它將是一個影像項目。

接下來，我們需要通過選擇示例（影像和標籤）來定義分類。我們可以使用網路攝影機拍攝照片，也可以上傳影像。

載入示例後，我們便開始培訓。這將為我們創建一個模型。

訓練完成後，您可以使用實時數據測試模型。滿意後，您可以導出模型以在應用程式中使用它。

最後，我們可以下載模型以在我們的應用程式中使用它。您可以選擇將模型上傳到雲中，以使用URL進行使用。您也可以將項目保存到Google Drive。

如果您有興趣使用或擴展我創建的模型，則可以下載並將其導入「可教機器」介面。

使用ml5.js和React的用戶介面

現在我們有了一個模型。我們將使用該ml5.js庫導入模型，並使用實時流對影像進行分類。我最熟悉的是React。您可以使用任何UI庫，框架或原始JavaScript。我已經使用create-react-app啟動應用程式的骨架並在一分鐘內運行。

安裝ml5.js依賴項

# Or, npm install ml5 
yarn add ml5

將模型解壓縮public到項目文件夾下。我們可以model在公共目錄下創建一個名為的文件夾，然後提取文件。

使用ml5.js庫來載入模型。我們將使用該imageClassifier方法來傳遞模型文件。此方法調用返回一個分類器對象，我們將在一段時間內使用該對象對實時影像進行分類。還要注意，一旦成功載入模型，我們將初始化網路攝影機設備，以便我們可以從實時流中收集影像。

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函數中定義一個影片組件

<video      
    ref={videoRef}      
    style={{ transform: “scale(-1, 1)” }}      
    width=”200″      
    height=”150″ />

接下來，我們在分類器上調用classify()方法以獲取結果。該results是所有比賽的目標參數標籤的數組。

classifier.classify(videoRef.current, (error, results) => {   
    if (error) {      
        console.error(error);      
        return;   
    }   
    setResult(results); 
});

我們應該classify在指定的時間間隔內使用方法調用。您可以使用一個稱為React的React Hook，useInterval進行相同操作。結果數組可能看起來像這樣，

請從此處找到App.js文件的完整程式碼。就是這樣，您現在可以使用此result數組提供您想要的任何UI表示形式。在我們的例子中，我們在兩個React組件中使用了這個結果數組，

1.列出公主並突出顯示最匹配的那個

<Princess data={result} /

2.顯示儀錶圖以指示匹配的置信度。

<Chart data={result[0]} /

Princess組件循環遍歷結果數組，並使用一些CSS樣式突出顯示它們，並呈現它們。

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;

就是這樣。請從GitHub存儲庫中找到完整的源程式碼。如果您喜歡這項工作，請隨時給項目加星號（⭐）。

//github.com/atapas/princess-finder

AI研習社是AI學術青年和AI開發者技術交流的在線社區。我們與高校、學術機構和產業界合作，通過提供學習、實戰和求職服務，為AI學術青年和開發者的交流互助和職業發展打造一站式平台，致力成為中國最大的科技創新人才聚集地。

如果，你也是位熱愛分享的AI愛好者。歡迎與譯站一起，學習新知，分享成長。

VirMach 便宜 VPS

QNews

QNews