根據昨天的KNN配上MobileNet
今天加上讓他可以即時新增影像與分類
在之後只要是擷取到的影像
都會進行辨識回傳分類
首先要讓及時獲得影像的方式
是透過WebCam來取得影像,目前必須在筆電上使用
而且筆電要有攝影機
試過用PhoneGap,花了半個小時處理,編出來的APK被手機拒絕,因為APK版本太舊
試過用Visual Studio的Condova編,從架環境到編花了2個小時,編出來的無法安裝
試過架成網站用手機連,Chrome會以隱私為由拒絕
FireFox沒有隱私問題但會not allowed by platform
花了很久時間在跨平台超級不爽
尤其是前兩個
之後再想辦法解決
廢話不多說,直接看程式碼就懂了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mobilenet</title>
<!-- TensorFlow.js Core -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js">
</script>
<!-- TensorFlow.js mobilenet model -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet">
</script>
<!-- Load KNN Classifier -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier">
</script>
</head>
<body>
<p id="result">Target:</p>
<video autoplay playsinline muted id="webcam" width="224" height="224"></video>
<div>
<button id="sample_btn">Add Sample of</button><input type="text" id="sample_class">
<ul id="sample_list">
</ul>
</div>
<button id="clear_sample_btn">Clear All Sample</button>
<script>
async function app() {
const knn = knnClassifier.create();
const mobilenet_model = await mobilenet.load();
const webcamElement = document.getElementById('webcam');
let samplelist = {};
let addSample = function () {
let sample_class = document.getElementById('sample_class').value;
if (sample_class === "") return;
if (samplelist[sample_class] === undefined) {
let new_sample = document.createElement("li");
new_sample.innerHTML = sample_class;
document.getElementById("sample_list").appendChild(new_sample);
samplelist[sample_class]=sample_class;
}
const embedding = mobilenet_model.infer(webcamElement, true);
knn.addExample(embedding, sample_class);
}
let clearSample=function(){
for (const key in samplelist) {
knn.clearClass(key);
}
document.getElementById('result').innerHTML = "Target:" ;
let list=document.getElementById("sample_list");
while(list.firstElementChild!==null){
list.removeChild(list.firstElementChild);
}
samplelist={};
}
let showResult = async function () {
if (knn.getNumClasses() > 0) {
const embedding = mobilenet_model.infer(webcamElement, true);
const result = await knn.predictClass(embedding);
document.getElementById('result').innerHTML = "Target:" + result.label;
console.log(result.label);
}
await tf.nextFrame();
setTimeout(function () {
showResult();
}, 300);
}
let setupWebcam = function () {
return new Promise((resolve, reject) => {
const navigatorAny = navigator;
navigator.getUserMedia = navigator.getUserMedia ||
navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
navigatorAny.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({
video: true
},
(stream) => {
webcamElement.srcObject = stream;
webcamElement.addEventListener('loadeddata', () => resolve(),
false);
},
(err) => reject(err));
} else {
reject("getUserMedia failed");
}
});
}
document.getElementById("sample_btn").addEventListener('click', addSample);
document.getElementById("clear_sample_btn").addEventListener('click', clearSample);
setupWebcam().then(
() => {
showResult();
},
(err) => {
console.log(err);
}
)
}
app();
</script>
</body>
</html>