狗和披萨:使用TensorFlow.js在浏览器中实现计算机视觉

目录

起点

托管说明

MobileNet v1

运行物体识别

终点线

下一步是什么?绒毛动物?


TensorFlow + JavaScript。现在,最流行,最先进的AI框架支持地球上使用最广泛的编程语言,因此,让我们在我们的web浏览器中通过深度学习实现奇迹,通过TensorFlow.jsWebGL GPU加速!

这是我们六个系列的第二篇文章:

  1. 使用TensorFlow.js在浏览器中进行深度学习入门
  2. 狗和披萨:使用TensorFlow.js在浏览器中实现计算机视觉
  3. 绒毛动物探测器:通过TensorFlow.js中的迁移学习识别浏览器中的自定义对象
  4. 使用TensorFlow.js进行人脸触摸检测第1部分:将实时网络摄像头数据与深度学习配合使用
  5. 使用TensorFlow.js进行人脸触摸检测第2部分:使用BodyPix
  6. 使用TensorFlow.js进行AI在网络摄像头中翻译手势和手语

在本文中,我们将深入探讨在Web浏览器中运行的计算机视觉。我将向您展示如何使用TensorFlow.js中经过预训练的MobileNet模型轻松快速地开始检测和识别图像中的对象。

起点

要使用TensorFlow.js分析图像,我们首先需要:

  • 收集狗、食物等的测试图像(此项目中使用的图像来自pexels.com
  • 导入TensorFlow.js
  • 添加代码以随机选择并加载其中一张图像
  • 添加代码以文本形式显示预测结果

这是我们的起点:

<html>
    <head>
        <title>Dogs and Pizza: Computer Vision in the Browser with TensorFlow.js</title>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
        <style>
            img {
                object-fit: cover;
            }
        </style>
    </head>
    <body>
        <img id="image" src="" width="224" height="224" />
        <h1 id="status">Loading...</h1>
        <script>
        const images = [
            "web/dalmation.jpg", // https://www.pexels.com/photo/selective-focus-photography-of-woman-holding-adult-dalmatian-dog-1852225/
            "web/maltese.jpg", // https://www.pexels.com/photo/white-long-cot-puppy-on-lap-167085/
            "web/pug.jpg", // https://www.pexels.com/photo/a-wrinkly-pug-sitting-in-a-wooden-table-3475680/
            "web/pomeranians.jpg", // https://www.pexels.com/photo/photo-of-pomeranian-puppies-4065609/
            "web/pizzaslice.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/
            "web/pizzaboard.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/
            "web/squarepizza.jpg", // https://www.pexels.com/photo/pizza-with-bacon-toppings-1435900/
            "web/pizza.jpg", // https://www.pexels.com/photo/pizza-on-plate-with-slicer-and-fork-2260200/
            "web/salad.jpg", // https://www.pexels.com/photo/vegetable-salad-on-plate-1059905/
            "web/salad2.jpg", // https://www.pexels.com/photo/vegetable-salad-with-wheat-bread-on-the-side-1213710/
            "web/kitty.jpg", // https://www.pexels.com/photo/eyes-cat-coach-sofa-96938/
            "web/upsidedowncat.jpg", // https://www.pexels.com/photo/silver-tabby-cat-1276553/
        ];

        function pickImage() {
            document.getElementById( "image" ).src = images[ Math.floor( Math.random() * images.length ) ];
        }

        function setText( text ) {
            document.getElementById( "status" ).innerText = text;
        }

        (async () => {
            // Your Code Goes Here
            setInterval( pickImage, 5000 );
        })();
        </script>
    </body>
</html>

Web代码导入TensorFlow.js和示例图像的集合,添加图像元素(设置为224px),然后添加具有设置图像功能的状态文本元素。您可以更新图像数组以匹配您下载的其他测试图像的文件名。

在浏览器中打开包含以上代码的页面。您应该看到图像每五秒钟更新一次,以随机选择。

托管说明

在继续进行之前,我想指出,为了使此项目正常运行,必须从Web服务器提供网页和图像(由于HTML5画布限制)。

否则,当TensorFlow.js尝试读取图像像素时,您可能会遇到此错误:

DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': Tainted canvases may not be loaded.

如果您没有运行像ApacheIIS这样的服务器,则可以使用WebWebWeb轻松在NodeJS运行一个服务器,WebWebWeb是我为此目的而构建的NPM模块。

MobileNet v1

来自GitHubMobileNets是小型、低延迟、低功耗的模型,其参数化可以满足各种用例的资源约束。

对于该项目,我们将使用MobileNet v1,该软件已经过数百万张图像的训练,可以识别1000种不同类别的物体,从不同的犬种到各种食物。该模型有多种变体,允许开发人员在复杂度/大小和预测准确性之间进行权衡。

幸运的是,Google将模型托管在其服务器上,因此我们可以在项目中直接使用它。对于224x224像素的图像输入,我们将使用最小的0.25色块变化。

让我们将其添加到脚本中,并使用TensorFlow.js加载模型。

// Mobilenet v1 0.25 224x224 model
const mobilenet = "https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json";

let model = null;

(async () => {
    // Load the model
    model = await tf.loadLayersModel( mobilenet );
    setInterval( pickImage, 5000 );
})();

运行物体识别

在将图像传递到TensorFlow模型之前,我们需要将其从像素转换为张量。我们还必须将每个RGB像素颜色转换为-1.01.0之间的浮点值,因为这是MobileNet模型所训练的值范围。

TensorFlow.js具有内置功能,可帮助我们轻松执行这些操作。牢记内存管理,我们可以编写一个函数来运行模型并获取预测的对象标识符,如下所示:

async function predictImage() {
    let result = tf.tidy( () => {
        const img = tf.browser.fromPixels( document.getElementById( "image" ) ).toFloat();
        const normalized = img.div( 127 ).sub( 1 ); // Normalize from [0,255] to [-1,1]
        const input = normalized.reshape( [ 1, 224, 224, 3 ] );
        return model.predict( input );
    });
    let prediction = await result.data();
    result.dispose();
    // Get the index of the highest value in the prediction
    let id = prediction.indexOf( Math.max( ...prediction ) );
    setText( labels[ id ] );
}

您会注意到,上面的函数引用labels数组以显示带有setText()的预测文本。该数组是ImageNet类别标签的预定义列表,这些列表与MobileNet所接受的预测相匹配。

如果您下载了它,请记住将它作为脚本包含在页面中的<head>标记中,如下所示:

<script src="web/labels.js"></script>

最后,通过在代码底部设置其onload处理程序,让图像元素调用在每次加载新图像时运行此预测函数:

(async () => {
    // Load the model
    model = await tf.loadLayersModel( mobilenet );
    setInterval( pickImage, 5000 );
    document.getElementById( "image" ).onload = predictImage;
})();

完成后,您的模型应该开始预测图像中的内容。

终点线

现在,您已经将所有部分组合在一起。这样,您就有了一个使用计算机视觉并可以识别对象的网页。还不错吧?

<html>
    <head>
        <title>Dogs and Pizza: Computer Vision in the Browser with TensorFlow.js</title>
        <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.0.0/dist/tf.min.js"></script>
        <style>
            img {
                object-fit: cover;
            }
        </style>
        <script src="web/labels.js"></script>
    </head>
    <body>
        <img id="image" src="" width="224" height="224" />
        <h1 id="status">Loading...</h1>
        <script>
        const images = [
            "web/dalmation.jpg", // https://www.pexels.com/photo/selective-focus-photography-of-woman-holding-adult-dalmatian-dog-1852225/
            "web/maltese.jpg", // https://www.pexels.com/photo/white-long-cot-puppy-on-lap-167085/
            "web/pug.jpg", // https://www.pexels.com/photo/a-wrinkly-pug-sitting-in-a-wooden-table-3475680/
            "web/pomeranians.jpg", // https://www.pexels.com/photo/photo-of-pomeranian-puppies-4065609/
            "web/pizzaslice.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/
            "web/pizzaboard.jpg", // https://www.pexels.com/photo/pizza-on-brown-wooden-board-825661/
            "web/squarepizza.jpg", // https://www.pexels.com/photo/pizza-with-bacon-toppings-1435900/
            "web/pizza.jpg", // https://www.pexels.com/photo/pizza-on-plate-with-slicer-and-fork-2260200/
            "web/salad.jpg", // https://www.pexels.com/photo/vegetable-salad-on-plate-1059905/
            "web/salad2.jpg", // https://www.pexels.com/photo/vegetable-salad-with-wheat-bread-on-the-side-1213710/
            "web/kitty.jpg", // https://www.pexels.com/photo/eyes-cat-coach-sofa-96938/
            "web/upsidedowncat.jpg", // https://www.pexels.com/photo/silver-tabby-cat-1276553/
        ];

        function pickImage() {
            document.getElementById( "image" ).src = images[ Math.floor( Math.random() * images.length ) ];
        }

        function setText( text ) {
            document.getElementById( "status" ).innerText = text;
        }

        async function predictImage() {
            let result = tf.tidy( () => {
                const img = tf.browser.fromPixels( document.getElementById( "image" ) ).toFloat();
                const normalized = img.div( 127 ).sub( 1 ); // Normalize from [0,255] to [-1,1]
                const input = normalized.reshape( [ 1, 224, 224, 3 ] );
                return model.predict( input );
            });
            let prediction = await result.data();
            result.dispose();
            // Get the index of the highest value in the prediction
            let id = prediction.indexOf( Math.max( ...prediction ) );
            setText( labels[ id ] );
        }

        // Mobilenet v1 0.25 224x224 model
        const mobilenet = "https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json";

        let model = null;

        (async () => {
            // Load the model
            model = await tf.loadLayersModel( mobilenet );
            setInterval( pickImage, 5000 );
            document.getElementById( "image" ).onload = predictImage;
        })();
        </script>
    </body>
</html>

下一步是什么?绒毛动物?

只需少量代码,我们就使用TensorFlow.js加载了预训练的模型,以在Web浏览器中识别列表中的对象。想象一下您可以做什么。也许创建一个可自动对成千上万张照片进行分类和分类的网络应用。

现在,如果我们想识别不在1000个类别列表中的其他对象怎么办?

请跟随本系列的下一篇文章一起学习如何扩展该项目,以快速训练卷积神经网络来识别...几乎任何您想要的东西。

https://www.codeproject.com/Articles/5272771/Dogs-and-Pizza-Computer-Vision-in-the-Browser-With

  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值