10 分钟入门 -- 基于浏览器与YOLO 的图像识别

文/镇圭


已过去的十年可以说是前端的“黄金十年”,乘着 Web 2.0 的东风各类前端工具与框架从百花齐放到逐渐稳定,我们是这个时代的见证者。但回顾 2019 年的前端却没有新“焦点”出现,那么站在 2020 年这个未来十年的起点上眺望,前端会往什么样的方向发展呢?可以预见的是在人工智能浪潮的裹挟下,智能化注定会与研发生产的各个领域碰撞出新的火花,前端一定也不会例外。

本文希望尽可能零门槛得通过一个最简单基于浏览器的图像识别 Demo,激起大家的兴趣,共同投身到“前端智能化”的时代成为时代的开垦者。



序言


全 Demo 代码共 100 行左右,完成了图片上传并分类的功能,完全运行在浏览器端,模型采用基于 tfjs 的 Tiny YOLO 模型(约 40M 大小)

YOLO 是什么?


YOLO 是用于(实时)目标检测的模型。 目标检测是很多计算机视觉任务的基础,用于在一张图中找到特定的物体,目标检测不仅要求我们识别分类这些物体,同时要求我们标记出物体的位置

YOLO 的全称是 you only look once,顾名思义只需要浏览一次就可以识别出图中的物体的类别和位置。

用官网原话讲,more than 1000x faster than R-CNN and 100x faster than Fast R-CNN,因此YOLO 非常适用于实时的目标检测。


功能拆解


问把大象装进冰箱需要几步?

1.加载模型


通过 downloadModel方法下载模型,即(tf.loadModel)[js.tensorflow.org/api/0.8.0/#…],默认模型

import yolo, { downloadModel } from 'tfjs-yolo-tiny';
const model = await downloadModel();

2.上传图像


通过 input 组件上传单张图片并展示,不赘述了

file.onchange = async function () {
    const fileData = this.files[0]
    const type = /^image/
    if (!type.test(fileData.type)) {
        //  省略
    }
    const reader = new FileReader()
    reader.readAsDataURL(fileData)
    reader.onload = async function (e) {
        image.setAttribute("src", this.result)
        image.onload = async function () {
            //  省略
        }
    }
}

3.通过 YOLO 识别


通过 Tiny YOLO 的 JS 库执行即可得到识别结果,执行获得的结果 boxes 为识别数据的数组,包含边界框(bounding box)的坐标,分类名称与置信度

const imageTensor = imageUtil.tensor(image)
// 将图片线性resize到模型所需的416X416
const boxes = await yolo(tf.image.resizeBilinear(imageTensor, [416, 416]), model)


其中imageUtil.tensor方法将 HTMLImageElement 变为模型所要求的 Tensor3D(即三阶的张量 —— Rank-3 tensor)

// 将HTMLImageElement变为tensor [height, width, channels]
const imageTensor = tf.fromPixels(this.imageElement);
// 根据图的最短边剧中裁剪,讲长方形变为正方形
const croppedImage = this.cropImage(imageTensor);
// 扩展现有三阶tensor变为4阶 [batch, height, width, channels]
const batchedImage = croppedImage.expandDims(0);
// 通过除以255做归一化
return batchedImage.toFloat().div(tf.scalar(255));


最后得到的结果

原文链接:juejin.im

上一篇:如何在 vue 中封装好用不上火的一个列表条件过滤组件
下一篇:(原创)vue-router的Import() 异步加载模块问题的解决方案

相关推荐

官方社区

扫码加入 JavaScript 社区