Press "Enter" to skip to content

在浏览器中使用Keras MobileNet模型以及Tensorflow.js进行图片分类

本站内容均来自兴趣收集,如不慎侵害的您的相关权益,请留言告知,我们将尽快删除.谢谢.

 

本文翻译自:Classifying images using Keras and in Google Chrome

 

在这篇文章中,我们将了解如何使用Keras的MobileNet模型进行图像分类,使用 TensorFlow.js
在Google Chrome浏览器中部署,并使用该模型在浏览器中进行实时的预测。

 

从长远来看,成为拥有Web开发知识的Python开发人员,对于您在人工智能领域肯定是有帮助的。因为我们现在有了具备强大能力的Keras以及在web浏览器中可以使用TensorFlow.js的TensorFlow机器学习框架。

 

文中放了一个可以在线演示的demo,因为无法嵌入过来,所以就不放过来了。具体的实现可以参见:https://github.com/Gogul09/mobile-net-projects

 

Python中的基础MobileNet神经网络模型

 

在Keras中,MobileNet存在applications模块中。如果要预测的类别在ImageNet类别中可用,Keras使用MobileNet提供现成的图像分类。如果ImageNet类别中不存在该类别,那幺有一种称为微调的方法可以为您的数据集和类调优MobileNet,我们将在另一篇教程中讨论。

 

与其他最先进的卷积神经网络,如:VGG16、vg19、ResNet50、InceptionV3和exception等相比,MobileNet具有许多优势。

 


MobileNets是最适合移动和嵌入式视觉应用的轻量级深层神经网络。


mobilenet基于一种流线型架构,使用深度方向的可分离卷积。


MobileNet使用两个简单的全局超参数,有效地在精确度和延迟之间进行权衡。


MobileNet可用于 目标检测
、 细粒度分类
、 人脸识别
、 大规模地理定位
等领域。

 

以下是使用MobileNet相对于其他最先进的深度学习模型的优势。

 


减少了网络大小—17MB。


减少了参数数量-420万。


性能更快,对移动应用非常有用。


小,低延迟卷积神经网络。

 

比较确定的是,除了MobileNet上述的优点外,它也有些缺点。尽管MobileNet具有更小的尺寸、更小的参数和更快的性能,但它比这篇文章中讨论的其他最先进的网络会更不精确。但别担心,与其他网络相比,准确度仅略有下降。

 

在本教程中,我们将按照图1中所示的步骤使用TensorFlow.js。

image.png

图1 在google chrome中使用TensorFlow.js接入Keras MobileNet模型

 

首先,我们将编写一个简单的python脚本,使用Keras MobileNet模型对测试图像进行预测。

 

在将图像传入到MobileNet之前,我们需要使用4个简单的步骤来处理图像。而要做到这一点,你并不需要OpenCV。Keras在eras.preprocessing模块,以及一些基本的numpy函数 提供了所有必要的功能。你可以直接开始了~

 

1.
使用load_img()函数加载图像并将其转换为MobileNet的输入大小:(224,224)

2.
使用 img_to_array() 函数将图片转化为一个numpy的数组

3.
使用 np.expand_dims() 函数展开numpy数组的维数

4.
通过使用 mobilenet.preprocess_input() 函数将所有值重新缩放到区间[-1,1]来预处理图像

 

python代码如下,位于basic-mobile-net.py文件:

 

# 组织引入模块

import numpy as np

from keras.models import Model

from keras.preprocessing import image

from keras.applications import imagenet_utils, mobilenet

import tensorflowjs as tfjs

# process an image to be mobilenet friendly 将一个图片处理为对mobilenet友好

def process_image(img_path):

img = image.load_img(img_path, target_size=(224, 224))

img_array = image.img_to_array(img)

img_array = np.expand_dims(img_array, axis=0)

pImg = mobilenet.preprocess_input(img_array)

return pImg

# main function

if __name__ == ‘__main__’:

# path to test image

test_img_path = “G:\\git-repos\\mobile-net-projects\\dataset\\test\\test_image_1.jpg”

# process the test image

pImg = process_image(test_img_path)

# define the mobilenet model

mobilenet = mobilenet.MobileNet()

# make predictions on test image using mobilenet

prediction = mobilenet.predict(pImg)

# obtain the top-5 predictions

results = imagenet_utils.decode_predictions(prediction)

print(results)

# convert the mobilenet model into tf.js model

save_path = “output\\mobilenet”

tfjs.converters.save_keras_model(mobilenet, save_path)

print(“[INFO] saved tf.js mobilenet model to disk..”)

 

输出为:

 

[[(‘n01806143’, ‘peacock’, 0.9998889),

(‘n01806567’, ‘quail’, 3.463593e-05),

(‘n02018795’, ‘bustard’, 2.7573227e-05),

(‘n01847000’, ‘drake’, 1.1352683e-05),

(‘n01795545’, ‘black_grouse’, 1.0532762e-05)]]

 

 

代码释义:

 


2-5行导入所有要使用到的函数


8-13行是我们用来处理图像的特殊定义,以便它变得对MobileNet友好


19行定义了测试图片的路径


22行对测试图片进行预处理


25行初始化MobileNet模型


28行使用MobileNet模型对测试图像进行预测


31行给出对测试图像的匹配度最高的前5个预测


32行打印出对测试图像的匹配最高的前5个预测


36-38行将Keras模型转换为Tf.js层的格式,并保存在了save_path变量指代的路径中

 

请确保你更改了第19行中的test_img_path的变量值以测试你自己磁盘中的映像。图2(如下所示)是我选择的测试图像,MobileNet模型以99.99%的概率准确地预测了它。很酷!:heart_eyes:

 

 

image.png

图2 输入给MobileNet模型的测试图片

 

酷!在我们的Python环境中,一切都能完美地工作!现在,我们将在web浏览器中使用这个经过预训练的移动网络模型。

 

将Keras模型转化Tf.js层的格式

 

在web中部署keras模型之前,我们需要将keras mobilenet python模型转换为tf.js layers的格式(我们已经在上面代码的第36-38行中做过了)。

 

为了在web中部署一个Keras模型,我们需要一个叫做 tensorflowjs. 的包。可以通过运行下面的命令行来安装它:

 

安装tensorflowjs

 

$ pip install tensorflowjs

 

安装后,您可以单独运行该命令,也可以将其集成到python脚本中,如下所示(我更推荐这种)。

 

1、keras 模型转化为 tf.js 层的格式:

 

$ tensorflowjs_converter –input_format keras \

path_to_keras_model.h5 \

path/to/tfjs_target_dir

 

 

2、集成到python脚本中

 

import tensorflowjs as tfjs

def train(…):

model = keras.models.Sequential() # for example

model.compile(…)

model.fit(…)

tfjs.converters.save_keras_model(model, tfjs_target_path)

 

我们例子中的  tfjs_target_path 或 save_path ,是一个包含model.json以及一组切分权重的二进制文件 的文件夹。如果我们去观察下model.json,你将看到模型结构或图(层及其连接的描述)以及权重文件的清单。

 

Keras模型转为TensorFlow JS

 

在本教程中,我使用GitHub pages repo保存keras mobilenet模型文件。我复制了save_path(https://gogul.dev/models/mobilenet/model.json)下的整个文件夹。

 

这对于我们的应用程序的工作是至关重要的,因为如果您将这些模型文件托管在不同的服务器上,您的web应用程序可能会面临CORS问题(https://enable-cors.org/)。将模型文件存储在与web应用程序相同的域中是更安全和首选的方法。

 

让我们开始怡人的Tensorflow.js的部分吧~

 

您需要在网站中加载这三个javascript库。

 

1.
IMAGENET_CLASSES变量,该变量索引了所有IMAGENET类别,可以轻松地从这里(https://github.com/tensorflow/tfjs-examples/blob/master/mobilenet/imagenet_classes.js)

2.
TensorFlow.js最新的资源。

3.
让js变得简单的jQuery。

 

index.html

 

<script type=”text/javascript” src=”/js/imagenet_classes.js”></script>

<script src=”https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]”></script>

<script type=”text/javascript” src=”https://code.jquery.com/jquery-2.1.1.min.js”></script>

 

 

一旦加载了以上三个脚本,就可以打开一个名为mobile-net.js 的文件,他将具备使得Keras MobileNet模型在web浏览器中工作所需的所有功能。

 

我在教程开始时制作的用户界面结合了HTML、CSS和JavaScript代码。我们将只研究模型的部分,而不是查看每一行代码。

 

1、加载Keras模型到tf.js

 

首先,需要加载存储在你的web服务器中的Keras预训练过的模型json。为此,可以使用下面的代码片段。

 

下面的代码片段是一个async函数,它使用 tf.loadModel() 来加载一个keras模型json。在第17行,await意味着在不干扰UI的情况下,要求JavaScript在后台加载模型。为了查看模型加载的状态,我们还使用了一个进度条以及console.log()。

 

mobile-net.js

 

let model;

async function loadModel() {

console.log(“model loading..”);

// display model loading progress box

loader = document.getElementById(“progress-box”);

load_button = document.getElementById(“load-button”);

loader.style.display = “block”;

// model name is “mobilenet”

modelName = “mobilenet”;

// clear the model variable

model = undefined;

// load the model using a HTTPS request (where you have stored your model files)

model = await tf.loadLayersModel(‘https://gogul09.github.io/models/mobilenet/model.json’);

// hide model loading progress box

loader.style.display = “none”;

load_button.disabled = true;

load_button.innerHTML = “Loaded Model”;

console.log(“model loaded..”);

}

 

2、从磁盘上传图片

 

要从磁盘上载图像,可以使用下面的代码片段,该代码片段使用HTML5文件API。我使用了一个按钮来上传图像,它有一个与之相关联的change处理器。

 

index.html

 

<!– used to get image from disk –>

<input type=”file”>

 

 

mobile-net.js

 

// if there is a change to “Upload Image” button,

// load and render the image

$(“#select-file-image”).change(function() {

renderImage(this.files[0]);

}

// renders the image which is loaded from disk to the img tag

function renderImage(file) {

var reader = new FileReader();

reader.onload = function(event) {

img_url = event.target.result;

document.getElementById(“test-image”).src = img_url;

}

reader.readAsDataURL(file);

}

 

3、使用MobileNet模型进行预测

 

为了使用现在已经加载进Tf.js环境的mobilenet模型进行预测,我们需要执行两个操作步骤,

 

1.
对输入图像进行预处理,使其对mobilenet友好。

2.
对输入图像进行预测。

 

3.1 对输入图像进行预处理

 

正如我已经提到的,输入到mobilenet的图像大小是[224, 224],并且特征在[-1,1]之间缩放。在使用模型进行预测之前,您需要执行这两个步骤(将输入图像的大小转化为[224, 224],并且将特征大小转为[-1, 1]之间)。为此,我们使用preprocessImage(),该函数接受image和modelName两个参数。

 

使用 tf.fromPixels() 可以很方便的将输入图片加载进来,使用 resizeNearestNeighbor()  调整大小,并使用toFloat()将图片中的所有值转化为浮点类型。

 

然后,我们使用127.5的标量值来缩放图像张量中的值,127.5是图像像素范围[0, 255]的中间值。对于图像中的每个像素值,我们减去该偏移值并除以该偏移值以达到在[-1,1]之间缩放的效果。然后使用expandDims()来扩展维度。

 

mobile-net.js

 

// 对图像做预处理,以使得其对mobilenet模型友好

function preprocessImage(image, modelName) {

// resize the input image to mobilenet’s target size of (224, 224)

let tensor = tf.browser.fromPixels(image)

.resizeNearestNeighbor([224, 224])

.toFloat();

// if model is not available, send the tensor with expanded dimensions

if (modelName === undefined) {

return tensor.expandDims();

}

// if model is mobilenet, feature scale tensor image to range [-1, 1]

else if (modelName === “mobilenet”) {

let offset = tf.scalar(127.5);

return tensor.sub(offset)

.div(offset)

.expandDims();

}

// else throw an error

else {

alert(“Unknown model name..”)

}

}

 

3.2 使用Tf.js模型进行预测

 

在对图像进行预处理后,我为Predict按钮做了一个处理程序。同样,这也是一个async函数,它使用await关键字,直到模型进行成功的预测。

 

使用Tf.js的模型(使用model.predict(tensor)方法)进行预测与Keras一样简单明了。为了得到预测结果,我们对model.predict(tensor)执行了data()方法。

 

预测的结果被映射到了一个名为results的数组中,这个数组使用了我们在本教程开始时加载的IMAGENET_CLASSES。我们还使用sort()根据概率从高到低对数组进行排序,并使用slice()只获取前5个概率。

 

mobile-net.js

 

// If “Predict Button” is clicked, preprocess the image and

// make predictions using mobilenet

$(“#predict-button”).click(async function () {

// check if model loaded

if (model == undefined) {

alert(“Please load the model first..”)

}

// check if image loaded

if (document.getElementById(“predict-box”).style.display == “none”) {

alert(“Please load an image using ‘Demo Image’ or ‘Upload Image’ button..”)

}

// html-image element can be given to tf.fromPixels

let image = document.getElementById(“test-image”);

let tensor = preprocessImage(image, modelName);

// make predictions on the preprocessed image tensor

let predictions = await model.predict(tensor).data();

// get the model’s prediction results

let results = Array.from(predictions)

.map(function (p, i) {

return {

probability: p,

className: IMAGENET_CLASSES[i]

};

}).sort(function (a, b) {

return b.probability – a.probability;

}).slice(0, 5);

// display the top-1 prediction of the model

document.getElementById(“results-box”).style.display = “block”;

document.getElementById(“prediction”).innerHTML = “MobileNet prediction – <b>” + results[0].className + “</b>”;

// display top-5 predictions of the model

var ul = document.getElementById(“predict-list”);

ul.innerHTML = “”;

results.forEach(function (p) {

console.log(p.className + ” ” + p.probability.toFixed(6));

var li = document.createElement(“LI”);

li.innerHTML = p.className + ” ” + p.probability.toFixed(6);

ul.appendChild(li);

});

});

 

至此,整个演示就结束了,你可以根据自己的情况操作起来了。我们现在在客户端浏览器中拥有了最先进的Keras预训练模型MobileNet的能力,它能够对属于ImageNet类别的图像进行预测。

 

请注意,mobilenet模型在浏览器中的加载速度非常快,预测速度也非常快。

 

参考文档

 

1.
TensorFlow.js – Official Documentation

2.
Keras – Official Documentation

3.
Importing a Keras model into TensorFlow.js

4.
Introduction to TensorFlow.js – Intelligence and Learning

5.
TensorFlow.js: Tensors – Intelligence and Learning

6.
TensorFlow.js Quick Start

7.
Session 6 – TensorFlow.js – Intelligence and Learning

8.
Session 7 – TensorFlow.js Color Classifier – Intelligence and Learning

9.
Tensorflow.js Explained

10.
Webcam Tracking with Tensorflow.js

11.
Try TensorFlow.js in your browser

Be First to Comment

发表评论

电子邮件地址不会被公开。 必填项已用*标注