当前位置: 首页 > 科技观察

通过机器学习识别《奔跑中的迪士尼公主》,程序员最爱的女孩正确打开方式!

时间:2023-03-21 11:58:45 科技观察

本文转载自雷锋网。如需转载,请在雷锋网官网申请授权。是时候庆祝了!我们刚刚送走了圣诞老人。现在等待新年的钟声敲响。所以我考虑构建一些很酷的东西(至少我七岁的公主会这么想),同时学习一点机器学习。那么我们要做什么呢?我借用了我女儿所有的迪士尼公主玩偶来构建机器学习模型。该应用程序名为“公主查找器”,可以通过摄像头识别这些人物的公主信息。在本文中,我们将了解这些背后的一些知识以及扩展它们的可能性。ThePrincessFinderPrincessFinder应用程序是使用以下内容构建的:TheTeachableMachine:如何轻松快速地创建可直接在应用程序或网站中使用的机器学习模型?可示教的机器让您可以通过图像、声音和手势来使用列车计算机。我们使用迪士尼公主创建了一个模型,以便我们可以使用它在我们的应用程序中执行图像分类。ml5.js:这是使用网络浏览器的网络机器学习。它使用网络浏览器的内置图形处理单元(GPU)进行快速计算。我们可以使用imageClassifier(model)、classify等API对图片进行分类。React:这是一个用于构建用户界面的JavaScript库。我们可以在我们的React应用程序中使用ml5.js,只需安装并将其作为依赖项导入即可。这是应用程序显示的屏幕截图,有93%的概率该娃娃是Jasmine(茉莉公主),上面清楚地标有金戒指。考虑到我看起来根本不像迪士尼公主(连洋娃娃都不像)。所以我自己的图像被正确分类为NoDolls。这是一个很棒的简单演示。一些术语如果您是机器学习的新手,您可能会发现其中一些术语有点让人不知所措。最好从更高维度的角度理解它们的含义来理解用法。您可以在此处阅读有关这些和其他机器学习术语的更多信息。我们的PrincessFinder应用程序使用监督式机器学习,我们已经训练过使用许多示例对公主照片进行建模。每个示例数据还包含一个标签,用于按名称标识特定公主。TeachableMachine我们可以使用TeachableMachine用户界面通过几个简单的步骤创建ML模型。首先,浏览到此链接。(需要VPN)您可以选择图像、声音或姿势项目。在我们的例子中,它将是一个图像项。接下来,我们需要通过选择示例(图像和标签)来定义分类。我们可以用网络摄像头拍照,也可以上传图片。加载示例后,我们开始训练。这将为我们创建一个模型。训练完成后,您可以在实时数据上测试模型。满意后,您可以导出模型以在您的应用程序中使用它。最后,我们可以下载模型以在我们的应用程序中使用它。您可以选择使用URL将模型上传到云端以供使用。您还可以将项目保存到Google云端硬盘。如果您对使用或扩展我创建的模型感兴趣,可以下载它并将其导入到TeachableMachine界面中。使用ml5.js和React的UI现在我们有了一个模型。我们将使用ml5.js库导入模型并使用实时流对图像进行分类。我最熟悉的是React。您可以使用任何UI库、框架或原始JavaScript。我使用create-react-app在不到一分钟的时间内启动并运行了应用程序的框架。安装ml5.js依赖#或者,npminstallml5yarnaddml5解压模型public到项目文件夹。我们可以在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);});});},[]);我们还需要在渲染函数中定义一个视频组件接下来,我们在分类器上调用classify()方法以获得结果。结果是所有匹配项的目标参数标签数组。classifier.classify(videoRef.current,(error,results)=>{if(error){console.error(error);return;}setResult(results);});我们应该在指定的时间间隔传输中使用分类方法。您可以使用名为useInterval的ReactHook执行相同的操作。生成的数组可能如下所示,从此处找到App.js文件的完整代码。就是这样,您现在可以使用此结果数组来提供您想要的任何UI表示。在我们的例子中,我们在两个React组件中使用了这个结果数组,1.列出公主并突出显示具有最佳匹配的公主{constmostMatched=props.data[0];constallLabels=props.data.map((elem)=>elem.label);constsortedLabels=allLabels.sort((a,b)=>a.localeCompare(b));return(<>{sortedLabels.map((label)=>({label}

))}/>);};exportdefaultPrincess;图表组件就是这样importReactfrom"react";importGaugeChartfrom"react-gauge-chart";constChart=(props)=>{constdata=props.data;constlabel=data.label;constconfidence=parseFloat(data.confidence.toFixed(2));返回(

分类置信度:{label}

);};exportdefaultChart;所以请从GitHub存储库中找到完整的源代码。如果您喜欢该作品,请随时为该项目加注星标(?)。https://github.com/atapas/princess-finder