英文:
How to interpret the output of object detection model in tensorflow.js
问题
我正在尝试在浏览器中运行自定义目标检测 TensorFlow.js 模型。我已经能够使用以下命令将 TensorFlow 模型转换为 TensorFlow.js 模型（在 Google Colab 中）：
!tensorflowjs_converter \
--input_format=tf_frozen_model \
--output_node_names='detection_boxes,detection_scores,detection_classes,num_detections' \
/content/frozen_inference_graph.pb \
/content/web_model
我分享了 inference.html 文件的代码片段：
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
<script src="webcam.js"></script>
</head>
<body>
<div>
<div>
<video autoplay playsinline muted id="wc" width="224" height="224"></video>
</div>
</div>
<button type="button" id="startPredicting" onclick="startPredicting()">Start Predicting</button>
<button type="button" id="stopPredicting" onclick="stopPredicting()">Stop Predicting</button>
<div id="prediction"></div>
</body>
<script src="index.js"></script>
</html>
index.js 文件的代码片段如下：
let model;
const webcam = new Webcam(document.getElementById('wc'));
let isPredicting = false;
async function init(){
try {
await webcam.setup();
model = await tf.loadGraphModel('http://127.0.0.1:8887/model/model.json');
} catch (err) {
console.log(err);
}
}
async function predict() {
const img = webcam.capture();
console.log("executing model");
const cat = document.getElementById('image');
output = await model.executeAsync(img);
output.forEach(t => t.print); // log out the data of all tensors
const data = []
for (let i = 0; i < output.length; i++){
data.push(output.dataSync())
}
console.log(data);
}
init()
function startPredicting(){
isPredicting = true;
predict();
}
function stopPredicting(){
isPredicting = false;
predict();
}
当我使用 Web 服务器运行上面的 inference.html 文件时，它返回以下输出：
(4) [t, t, t, t]
0: t {kept: false, isDisposedInternal: false, shape: Array(3), dtype: "float32", size: 400, …}
1: t {kept: false, isDisposedInternal: false, shape: Array(2), dtype: "float32", size: 100, …}
2: t {kept: false, isDisposedInternal: false, shape: Array(2), dtype: "float32", size: 100, …}
3: t {kept: false, isDisposedInternal: false, shape: Array(1), dtype: "float32", size: 1, …}
length: 4
__proto__: Array(0)
问题在于输出似乎与目标检测结果无关，或者我无法理解它。我是否漏掉了什么？请提供您的建议。对于这个长篇帖子，我感到抱歉，但我是 TensorFlow.js 的初学者。
英文:
I am trying to run custom object detection tensorflow.js model in a browser. I could able to convert tensorflow model to tensorflow.js model (in google colab) using the following command:
!tensorflowjs_converter \
--input_format=tf_frozen_model \
--output_node_names='detection_boxes,detection_scores,detection_classes,num_detections' \
/content/frozen_inference_graph.pb \
/content/web_model
I am sharing the code snippet of inference.html file:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>
<script src="webcam.js"></script>
</head>
<body>
<div>
<div>
<video autoplay playsinline muted id="wc" width="224" height="224"></video>
</div>
</div>
<button type="button" id="startPredicting" onclick="startPredicting()" >Start Predicting</button>
<button type="button" id="stopPredicting" onclick="stopPredicting()" >Stop Predicting</button>
<div id="prediction"></div>
</body>
<script src="index.js"></script>
</html>
The code snippet of index.js file is as follow:
let model;
const webcam = new Webcam(document.getElementById('wc'));
let isPredicting = false;
async function init(){
try {
await webcam.setup();
model = await tf.loadGraphModel('http://127.0.0.1:8887/model/model.json');
} catch (err) {
console.log(err);
}
}
async function predict() {
const img = webcam.capture();
console.log("executing model");
const cat = document.getElementById('image');
output = await model.executeAsync(img);
output.forEach(t => t.print) // log out the data of all tensors
const data = []
for (let i = 0; i < output.length; i++){
data.push(output.dataSync())
}
console.log(data);
}
init()
function startPredicting(){
isPredicting = true;
predict();
}
function stopPredicting(){
isPredicting = false;
predict();
}
When I run above inference.html file using web server, it returns the following output:
(4) [t, t, t, t]
0: t {kept: false, isDisposedInternal: false, shape: Array(3), dtype: "float32", size: 400, …}
1: t {kept: false, isDisposedInternal: false, shape: Array(2), dtype: "float32", size: 100, …}
2: t {kept: false, isDisposedInternal: false, shape: Array(2), dtype: "float32", size: 100, …}
3: t {kept: false, isDisposedInternal: false, shape: Array(1), dtype: "float32", size: 1, …}
length: 4
__proto__: Array(0)
The problem is output seems to be irrelevant or I can't understand it. Am I missing something? Please provide me your suggestions. I am sorry for the long post but I am beginner in tensorflow.js.
答案1
得分: 3
output 是一个 tf.Tensor。当你调用 console.log(output) 时，它会尝试将对象转换为字符串并打印出其属性。
这个张量还具有方法 print，可以用来记录其数据。
要将张量中的数据作为 JavaScript 数组获取，可以调用诸如 data（或 dataSync）和 dataArray（或 dataArraySync）等方法以异步（或同步）方式检索数据。数据以 typedArray 的形式获取。
output = await model.executeAsync(img);
// output 是一个 tf.tensor 数组。
output.forEach(t => t.print()) // 记录所有张量的数据
const data = []
for (let i = 0; i < output.length; i++)
data.push(output[i].dataSync()) // 获取数据
英文:
output is a tf.Tensor. When you called console.log(output), it tries to stringify the object and prints out its properties.
The tensor also has the method, print to log out its data.
To get the data out of the tensor as a javaScript array, method such as data (respectively dataSync) and dataArray (respectively dataArraySync) can be called to retrieve the data aynchronously (respectively synchronously). The data is retrieved as a typedArray.
<!-- language: lang-js -->
output = await model.executeAsync(img);
// output is an array of tf.tensor.
output.forEach(t => t.print()) // log out the data of all tensors
const data = []
for (let i = 0; i < output.length; i++)
data.push(output[i].dataSync()) // get the data
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论