在浏览器中用KerasTensorflow.js进行图片分类( 二 ) 来源:微信公众号:跨端与全栈作

请确保你更改了第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_dir2、集成到python脚本中
import tensorflowjs as tfjsdef 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()下的整个文件夹。
这对于我们的应用程序的工作是至关重要的，因为如果您将这些模型文件托管在不同的服务器上，您的web应用程序可能会面临CORS问题() 。将模型文件存储在与web应用程序相同的域中是更安全和首选的方法。
让我们开始怡人的Tensorflow.js的部分吧~
您需要在网站中加载这三个javascript库。
1. IMAGENET_CLASSES变量，该变量索引了所有IMAGENET类别，可以轻松地从这里()加载。2. TensorFlow.js最新的资源。3. 让js变得简单的jQuery 。
index.html
一旦加载了以上三个脚本，就可以打开一个名为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 boxloader = document.getElementById("progress-box");load_button = document.getElementById("load-button");loader.style.display = "block";// model name is "mobilenet"modelName = "mobilenet";// clear the model variablemodel = undefined;// load the model using a HTTPS request (where you have stored your model files)model = await tf.loadLayersModel('');// hide model loading progress boxloader.style.display = "none";load_button.disabled = true;load_button.innerHTML = "Loaded Model";console.log("model loaded..");}2、从磁盘上传图片要从磁盘上载图像，可以使用下面的代码片段，该代码片段使用HTML5文件API 。我使用了一个按钮来上传图像，它有一个与之相关联的change处理器。
index.html
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 = http://kandian.youth.cn/index/img_url;}reader.readAsDataURL(file);}3、使用MobileNet模型进行预测为了使用现在已经加载进Tf.js环境的mobilenet模型进行预测，我们需要执行两个操作步骤，
1. 对输入图像进行预处理，使其对mobilenet友好。2. 对输入图像进行预测。