教程｜如何利用TensorFlow.js部署簡單的AI版「你畫我猜」圖像識別應用技术頭條網

教程｜如何利用TensorFlow.js部署簡單的AI版「你畫我猜」圖像識別應用

你的本地機器上需要有一臺運行中的服務器來託管權重文件。你可以在 GitHub 上創建一個 apache 服務器或者託管網頁，就像我在我的項目中所做的那樣（https://github.com/zaidalyafeai/zaidalyafeai.github.io/tree/master/sketcher）。

接著，通過下面的代碼將模型加載到瀏覽器：

model = await tf.loadModel('model/model.json')

關鍵字 await 的意思是等待模型被瀏覽器加載。

預處理

在進行預測前，我們需要對數據進行預處理。首先從畫布中獲取圖像數據：

//the minimum boudning box around the current drawing
const mbb = getMinBox
//cacluate the dpi of the current window
const dpi = window.devicePixelRatio
//extract the image data
const imgData = canvas.contextContainer.getImageData(mbb.min.x * dpi, mbb.min.y * dpi,
(mbb.max.x - mbb.min.x) * dpi, (mbb.max.y - mbb.min.y) * dpi);

文章稍後將介紹 getMinBox。dpi 變量被用於根據屏幕像素的密度對裁剪出的畫布進行拉伸。

我們將畫布當前的圖像數據轉化為一個張量，調整大小並進行歸一化處理：

function preprocess(imgData)
{
return tf.tidy(=>{
//convert the image data to a tensor 

let tensor = tf.fromPixels(imgData, numChannels= 1)
//resize to 28 x 28
const resized = tf.image.resizeBilinear(tensor, [28, 28]).toFloat
// Normalize the image
const offset = tf.scalar(255.0);
const normalized = tf.scalar(1.0).sub(resized.div(offset));
//We add a dimension to get a batch shape
const batched = normalized.expandDims(0)
return batched
})
}

我們使用 model.predict 進行預測，這將返回一個規模為「N, 100」的概率。

const pred = model.predict(preprocess(imgData)).dataSync

我們可以使用簡單的函數找到 top 5 概率。

提升準確率

請記住，我們的模型接受的輸入數據是規模為 [N, 28, 28, 1] 的張量。我們繪圖畫布的尺寸為 300*300，這可能是兩個手繪圖像的大小，或者用戶可以在上面繪製一個小圖像。最好只裁剪包含當前手繪圖像的方框。為了做到這一點，我們通過找到左上方和右下方的點來提取圍繞圖像的最小邊界框。

//record the current drawing coordinates 
function recordCoor(event)
{
//get current mouse coordinate 

var pointer = canvas.getPointer(event.e);
var posX = pointer.x;
var posY = pointer.y;

//record the point if withing the canvas and the mouse is pressed
if(posX >=0 && posY >= 0 && mousePressed)
{
coords.push(pointer)
}
}

//get the best bounding box by finding the top left and bottom right cornders
function getMinBox{

var coorX = coords.map(function(p) {return p.x});
var coorY = coords.map(function(p) {return p.y});
//find top left corner
var min_coords = {
x : Math.min.apply(, coorX),
y : Math.min.apply(, coorY)
}
//find right bottom corner
var max_coords = {
x : Math.max.apply(, coorX),
y : Math.max.apply(, coorY)
}
return {
min : min_coords,
max : max_coords
}
}