教程 | 用攝像頭和Tensorflow.js在瀏覽器上實現(xiàn)目標(biāo)檢測

taotao_2016 2018-05-02

展開全文

作者：Mike Shi

Tensorflow.js 是一個能在你的瀏覽器里運行的全新深度學(xué)習(xí)庫。本文將會介紹從原生 Tiny YOLO Darknet 模型到 Keras 的轉(zhuǎn)換，再到 Tensorflow.js 的轉(zhuǎn)換，如何利用其作一些預(yù)測，在編寫 Tensorflow.js 遇到的一些問題，以及介紹使用聯(lián)網(wǎng)攝像頭/圖像輕松地進行預(yù)測檢測。

項目地址：https://github.com/ModelDepot/tfjs-yolo-tiny

YOLO9000：更好，更快，更強

嚴(yán)格意義上來講這才是原文的標(biāo)題。我們將會使用 Tiny YOLO，一個快速的、能在 200 FPS 下運行的目標(biāo)檢測模型。我們將會使用 Tiny YOLO 而非完整的 YOLOv2。為什么？首先，YOLOv2 只在功能強大的桌面級設(shè)備上以 40 幀每秒的速度運行，而這個條件大多數(shù)用戶都達不到。同時，YOLOv2 的模型文件是 Tiny YOLO 的五倍大，這將會導(dǎo)致網(wǎng)絡(luò)卡死。最后，YOLOv2 有一個暫時不被原生 Tensorflow.js 支持的重組層（reorg layer）。下一步，我們將重點放在 Tiny YOLO 的網(wǎng)絡(luò)配置（神經(jīng)網(wǎng)絡(luò)結(jié)構(gòu)）以及權(quán)重上。

YAD2K：又一個 DARKNET 2 KERAS（轉(zhuǎn)換器）

你可能已經(jīng)注意到 YOLO 是用 Darknet 編寫的，而 Darknet 聽起來和 Tensorflow 沒什么關(guān)系。所以我們的第一步就是將 YOLO 模型轉(zhuǎn)換為更加 Tensorflow 式的東西，在我們的例子中，這個東西是 Keras。Keras 是一個更高級的深度學(xué)習(xí)框架。我們推薦使用此種方式（https://js./tutorials/import-keras.html）將你的權(quán)重轉(zhuǎn)換為 Tensorflow.js 的格式。

我們將會使用 YAD2K 來將 Darknet 模型轉(zhuǎn)換為 Keras 模型。請按照此處的教程來安裝 YAD2K（https://github.com/allanzelener/YAD2K#installation）。

當(dāng)然了，你也可以假裝你已經(jīng)安裝好了然后使用我已經(jīng)給出的最終權(quán)重文件（https:///mikeshi/tiny-yolo-in-javascript），但是這樣的話你會失去不少樂趣！

現(xiàn)在，我們將要修復(fù) YAD2K 里的一個 Bug 來正確加載 Tiny YOLO。

用你最喜歡的文本編輯器打開 yad2k.py，在第 83 行，將 buffer=weights_file.read(16) 改為 buffer=weights_file.read(20)。為什么？現(xiàn)在毫無頭緒。

現(xiàn)在在你的電腦終端運行下列指令。這些指令會下載 Tiny YOLO 權(quán)重以及配置文件同時會將轉(zhuǎn)換后的模型文件輸出到 model_data/yolov2-tiny.h5。

wget https://pjreddie.com/media/files/yolov2-tiny.weights
wget https://raw./pjreddie/darknet/master/cfg/yolov2-tiny.cfg
./yad2k.py yolov2-tiny.cfg yolov2-tiny.weights model_data/yolov2-tiny.h5

之后，我們要保證新模型能運轉(zhuǎn)起來。一個有趣的事實是：之前我忘了做這一步然后我花了一整天糾結(jié)為什么 Tensorflow.js 不工作。

./test_yolo.py model_data/yolov2-tiny.h5

這個模型會輸出一些預(yù)測。

TENSORFLOW.JS 轉(zhuǎn)換器：我們最后的權(quán)重轉(zhuǎn)換方式

這一步更加簡單，我保證！查看此處的官方指導(dǎo)（https://js./tutorials/import-keras.html）。我已經(jīng)把所有的難題解決了，所以如果你還覺得這些看起來太多了的話，你可以直接跳過這一步。

我們將要安裝官方轉(zhuǎn)換工具。在終端運行 pip install tensorflowjs 指令來安裝轉(zhuǎn)換器。

現(xiàn)在要轉(zhuǎn)換我們的模型，再次使用終端！

tensorflowjs_converter --input_format keras \
model_data/yolov2-tiny.h5 \
tfjs_model_data

現(xiàn)在我們終于將模型文件轉(zhuǎn)移到 tfjs_model_data 中去了！注意，那個文件夾還包含了 model.json 以及一些其他的碎片文件。model.json 告訴 Tensorflow.js 神經(jīng)網(wǎng)絡(luò)的結(jié)構(gòu)是怎樣的以及哪些碎片文件與哪些權(quán)重相對應(yīng)。這些碎片文件包含了模型的權(quán)重。要保證這些碎片文件和 model.json 在同一個目錄下，不然你的模型將會無法正確加載。

Tensorflow.js

現(xiàn)在，我們到了有趣的部分。我們將同時處理 ML 和 JS 代碼！

首先，我們導(dǎo)入 Tensorflow 然后加載模型。

import * as tf from ‘@tensorflow/tfjs’;
const model = await tf.loadModel(url);

等等，什么是'url'？你可以使用此處的托管模型文件（https://raw./MikeShi42/yolo-tiny-tfjs/master/model2.json）或者把路徑加到你轉(zhuǎn)換后的文件中去。

完美，現(xiàn)在我們做些真正的深度學(xué)習(xí)了：

function yolo (input) {
return model.predict(input);
}

啊哈。這看起來好像也沒什么特別的，等等。我們忘了將輸出轉(zhuǎn)換成邊框、分類標(biāo)簽以及概率！

將數(shù)字轉(zhuǎn)換為邊框以及數(shù)字

我不準(zhǔn)備深入探討這個話題，因為對 YOLO 的后處理可以拿來單獨寫幾篇博客了。相反，我會專注于我在將 Python 版本轉(zhuǎn)換到 Javascript 時遇到的難題。

1. 一部分張量操作不可行。

Tensorflow.js 還很年輕，因此有一些功能暫時不可用，例如 boolean mask 以及 NMS。你可能也會遇到這樣的問題，不過幸運的是你可以繞過它，通過下列方式：

const expected_shape = tensor.shape;
const data = await tensor.data(); // Async transfer from GPU to CPU
// Note: data is a flattened TypedArray of the original tensor
//... data manipulation in JS on CPU
tf.tensor1d(data).reshape(expected_shape); // Shape it back into where we were before

2. 你不能像 Python 那樣使用 -1 索引

在 python 中，你可以使用 -1 作為「最后一個元素」。不幸的是，在 Tensorflow.js 中，如果你在 tf.slice 上嘗試這樣操作，它只會默默地失敗。

3. 你不能使用 5d 張量

注意，Tensorflow,js 的 WebGL 后端不支持 5d 張量。既然無法想象五維的樣子，為什么還要使用它們？在 YOLO 中我們將輸出重塑為 [batch_size，xy，wh，box_confidence，box_class_pred]。這個很顯然是五維的。幸運的是，為了避免這些麻煩，我刪除了 batch_size。另一種做法是不將輸出重塑為 5d 張量。但是有些細節(jié)還需要謹(jǐn)慎處理。

除此之外，我的使用體驗是連貫的。我只需要重新實現(xiàn)兩個通常情況下 Tensorflow 不使用的 CPU 算法（傳統(tǒng) JS）。

NPM 安裝

現(xiàn)在把我們的深度學(xué)習(xí)應(yīng)用到程序中去吧！

幸運的是，有人已經(jīng)寫好了代碼，所以只需在終端安裝 NPM 即可：

npm i tfjs-yolo-tiny

然后我們再稍微利用一下 Javascript：

import yolo, { downloadModel } from ‘tfjs-yolo-tiny’;
const model = await downloadModel();
const inputImage = webcam.capture();
const boxes = await yolo(inputImage, model);

哇，你說的這個 webcam.capture() 是什么？

除了 NPM 的安裝之外...

你可能已經(jīng)注意到我們還沒有關(guān)注過輸入到我們的 YOLO 中的到底是什么。這也是 Tensorflow.js 最棒的部分之一。

我們可以從文件（DOM）中取出視頻或者圖像然后將其轉(zhuǎn)換為一個張量！

我們可以用 Javascript 寫下這些：

import yolo, { downloadModel } from ‘tfjs-yolo-tiny’;
const model = await downloadModel();
const inputImage = webcam.capture();
const boxes = await yolo(inputImage, model);

棒！現(xiàn)在可以將圖像作為張量輸入！之后，從圖像切換到網(wǎng)絡(luò)攝像頭，你只需將其指向正確的元素即可。這對我來說很神奇。

在這之后，我們要做一些預(yù)處理。在這種情況下，將其裁剪為正方形，調(diào)整大小為 416x416，然后除以 255 得到大小范圍從 0 到 1 的像素值。

最后的一些想法

我們已經(jīng)介紹了如何將模型轉(zhuǎn)換為 Tensorflow.js 格式，加載模型并用它進行預(yù)測。然后，我們探討了在 Tensorflow.js 中編寫后處理代碼的一些難題，但我們解決了這些問題?，F(xiàn)在我們知道如何通過靜態(tài)圖像或網(wǎng)絡(luò)攝像頭抓取數(shù)據(jù)，可以將大多數(shù) ML 模型從 Python 轉(zhuǎn)換為 Tensorflow.js 并在瀏覽器中運行它們。