在 tensorflowJS 中将多个图像作为输入答案

【问题标题】：Taking multiple image as input in tensorflowJS在 tensorflowJS 中将多个图像作为输入
【发布时间】：2021-10-12 09:40:39
【问题描述】：

我正在使用 tensorflow.js 进行文本检测，并且已经成功地用一张图片实现了它，现在我想上传多张图片，将它们转换为张量并同时预测

这就是我的 Html 文件的样子

<!DOCTYPE html>
<html>
    <head>
        <title>Text Detector</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
            integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <main>
            <div class="container mt-5">
                <div class="row">
                    <div class="col-12">
                        <div class = "progress progress-bar progress-bar-striped progress-bar-animated mb-2">Loading Model</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <input id="image-selector" class="form-control border-0" type="file", multiple="multiple">
                    </div>
                    <div class="col-6">
                        <button id="predict-button" class="btn btn-dark float-end">Predict</button>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col">
                        <h2 class="ml-3">Predictions</h2>
                        <ol id="prediction-list"></ol>
                    </div>
                </div>
                <hr>
                <div class="row">
                    <div class="col-12">
                        <h2 class="ml-3">Image</h2>
                        <img id="selected-image" class="ml-3" src="" />
                    </div>
                </div>
            </div>
        </main>
    </body>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
    <script src="predictEastNew.js"></script>
</html>

这是我的 JS 文件


$("#image-selector").change(function () {
    let reader = new FileReader();
    reader.onload = function () {
        let dataURL = reader.result;
        $("#selected-image").attr("src", dataURL);
        $("#prediction-list").empty();
    }
    let file = $("#image-selector").prop("files")[0];
    reader.readAsDataURL(file);
});

//let model;
//(async function () {
//    model = await tf.loadLayersModel("http://localhost:81/tfjs-model/mnist/model.json");
//    $(".progress-bar").hide();
    
//})();

async function loadModel() {

    class L2 {

        static className = 'L2';
    
        constructor(config) {
           return tf.regularizers.l1l2(config)
        }
    }
    tf.serialization.registerClass(L2);

    console.log("model loading..");
  
    // clear the model variable
    model = undefined;
    
    // load the model using a HTTPS request (where you have stored your model files)
    model = await tf.loadGraphModel("http://localhost:81/tfjs-model/east_converted/model.json");   

    $(".progress-bar").hide();
    console.log("model loaded..");
  }
  
  loadModel();

    // predict button operation
    $("#predict-button").click(async function () {
        let image = $("#selected-image").get(0);
        let tensor = tf.browser.fromPixels(image)
            .resizeNearestNeighbor([640, 320])
            .expandDims(0);
            

    tensor = tf.cast(tensor, 'float32')
    const [output1, output2] = await model.predict(tensor);
    const data1 = await output1.data();
    const data2 = await output2.data();
    //console.log(data1)
    //console.log(data2)
    arr = []
    for (var i = 0; i < 12800; i += 1) {
        if (data2[i] > 0.6) {
            arr.push(data2[i])
        } else {
            console.log("Less than 0.6")
        }
    }
    console.log(arr)
    if (arr.length == 0) {
        console.log("Text Not Present");
        res1 = "SUCCESSFUL";
        document.getElementById('prediction-list').innerHTML = res1;
    } else {
        console.log("Text Present");
        res = "This Image cannot be Processed Becasue of superimposed Text!!!!";
        document.getElementById('prediction-list').innerHTML = res;
    }
    
});

谁能建议我需要做哪些更改，而不是我可以将多个图像作为输入然后对其进行预测。

谢谢。

【问题讨论】：

标签： javascript tensorflow.js tensorflowjs-converter

【解决方案1】：

请注意，这只有在模型本身支持批处理操作时才有可能
可以看到如果看model.input.shape，第一个参数是1（固定）还是-1（变量）

无论如何，假设模型支持批处理操作...

在你的代码中

let tensor = tf.browser.fromPixels(image)
  .resizeNearestNeighbor([640, 320])
  .expandDims(0);

所以你的tensor.shape 是[1, 640, 320, 3]

第一部分创建 RGB 张量，第二行调整它的大小，第三行添加大小为 1 的批量维度

如果您有多个图像，该数字将是批量大小 - 例如图片数量

所以是这样的：

const tensor1 = tf.browser.fromPixels(image1).resizeNearestNeighbor([640, 320])
const tensor2 = tf.browser.fromPixels(image2).resizeNearestNeighbor([640, 320])
const tensor = tf.stack([tensor1, tensor2]); // stack images into single tensor

所以tensor.shape 现在是[2, 640, 320, 3]

【讨论】：

感谢@Vladimir 回答这个问题。而且，是的，第一个参数是固定的，即 1。我在想我是否有可能从前端拍摄多张图像并循环通过它并同时获得每张图像的预测。这样，我一次只会向我的模型发送一张图像。