通过机器学习识别“迪士尼在逃公主”,程序员宠女的正确打开方式!

本文转自雷锋网,如需转载请至雷锋网官网申请授权。

到了庆祝的时候了!我们刚刚送走了圣诞老人。现在正等待新年的钟声敲响。所以我想到建立一个很酷的东西(至少我的七岁小公主会觉得)同时学一点机器学习。所以我们要做一个什么?

我借用的我女儿所有迪士尼公主人偶来建立一个机器学习模型,这个应用取名为“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依赖项

 
 
 
  1. # Or, npm install ml5  
  2. yarn add ml5 

将模型解压缩public到项目文件夹下。我们可以model在公共目录下创建一个名为的文件夹,然后提取文件。

使用ml5.js库来加载模型。我们将使用该imageClassifier方法来传递模型文件。此方法调用返回一个分类器对象,我们将在一段时间内使用该对象对实时图像进行分类。还要注意,一旦成功加载模型,我们将初始化网络摄像头设备,以便我们可以从实时流中收集图像。

 
 
 
  1. useEffect(() => {     
  2.    classifier = ml5.imageClassifier("./model/model.json", () => {       
  3.        navigator.mediaDevices         
  4.            .getUserMedia({ video: true, audio: false })         
  5.            .then((stream) => {           
  6.                videoRef.current.srcObject = stream;           
  7.                videoRef.current.play();           
  8.                setLoaded(true);         
  9.             });     
  10.        });   
  11.     }, []); 

我们还需要在render函数中定义一个视频组件

 
 
 
  1.     ref={videoRef}       
  2.     style={{ transform: "scale(-1, 1)" }}       
  3.     width="200"       
  4.     height="150" /> 

接下来,我们在分类器上调用classify()方法以获取结果。该results是所有比赛的目标参数标签的数组。

 
 
 
  1. classifier.classify(videoRef.current, (error, results) => {    
  2.     if (error) {       
  3.         console.error(error);       
  4.         return;    
  5.     }    
  6.     setResult(results);  
  7. }); 

我们应该classify在指定的时间间隔内使用方法调用。您可以使用一个称为React的React Hook,useInterval进行相同操作。结果数组可能看起来像这样,

请从此处找到App.js文件的完整代码。就是这样,您现在可以使用此result数组提供您想要的任何UI表示形式。在我们的例子中,我们在两个React组件中使用了这个结果数组,

1.列出公主并突出显示最匹配的那个

 
 
 

2.显示仪表图以指示匹配的置信度。

 
 
 

 

Princess组件循环遍历结果数组,并使用一些CSS样式突出显示它们,并呈现它们。

 
 
 
  1. import React from "react"; 
  2. const Princess = (props) => {   
  3.    const mostMatched = props.data[0];   
  4.    const allLabels = props.data.map((elem) => elem.label);   
  5.    const sortedLabels = allLabels.sort((a, b) => a.localeCompare(b));   
  6.        return (     
  7.            <>       
  8.                         
  9.                    {sortedLabels.map((label) => (           
  10.                                     
  11.                                       
  12.                        
  13.                            className={`img ${                   
  14.                                label === mostMatched.label ? "selected" : null                 
  15.                        }`}                 
  16.                    src={                   
  17.                        label === "No Dolls"                     
  18.                            ? "./images/No.png"                     
  19.                            : `./images/${label}.png`                 
  20.                    }                 
  21.                    alt={label}               
  22.                    />               
  23.                    {label}

                 
  24.                            
  25.               
  26.          
  27.             ))}       
  28.               
  29.           
  30.       ); 
  31.    }; 
  32. export default Princess; 

图表组件就是这样

 
 
 
  1. import React from "react"; 
  2. import GaugeChart from "react-gauge-chart"; 
  3. const Chart = (props) => {   
  4.    const data = props.data;   
  5.    const label = data.label;   
  6.    const confidence = parseFloat(data.confidence.toFixed(2));   
  7.    return (     
  8.        
           
  9.            

    Classification Confidence: {label}

             
  10.            
  11.                id="gauge-chart3"         
  12.                nrOfLevels={3}         
  13.                colors={["#FF5F6D", "#FFC371", "rgb(26 202 26)"]}         
  14.                arcWidth={0.3}         
  15.                percent={confidence}       
  16.            />     
  17.        
   
  •    ); 
  • }; 
  • export default Chart; 
  • 就是这样。请从GitHub存储库中找到完整的源代码。如果您喜欢这项工作,请随时给项目加星号(⭐)。

    https://github.com/atapas/princess-finder

    当前名称:通过机器学习识别“迪士尼在逃公主”,程序员宠女的正确打开方式!
    标题URL:http://www.shufengxianlan.com/qtweb/news45/368995.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    python知识

    行业网站建设