如何修改TensorFlow.js文本检测代码以支持多图上传及批量预测

你需要分别调整HTML和JS的逻辑，实现多图上传、批量预测能力，具体修改如下：

一、HTML修改 #

替换原有单图展示的模块，改为多图容器：

<!-- 替换原有单图展示的代码块 -->
<div class="row">
    <div class="col-12">
        <h2 class="ml-3">上传图片</h2>
        <div id="image-container" class="d-flex flex-wrap gap-3 ml-3"></div>
    </div>
</div>

你原有文件选择input已经加了multiple属性，这部分不需要调整。

二、JS代码修改 #

完整修改后的JS代码如下，核心调整点包括：

1. 新增全局变量存储所有选中的文件
2. 重写文件选择事件，批量渲染所有上传的图片
3. 重写预测逻辑，支持批量转张量、同步预测，结果按图片顺序输出

// 新增全局变量存储选中的文件与模型
let selectedFiles = [];
let model;

$("#image-selector").change(function () {
    // 清空原有内容
    $("#image-container").empty();
    $("#prediction-list").empty();
    selectedFiles = Array.from($("#image-selector").prop("files"));

    // 批量渲染所有上传图片
    selectedFiles.forEach((file, index) => {
        let reader = new FileReader();
        reader.onload = function () {
            let dataURL = reader.result;
            // 创建img元素加入容器
            let img = $('<img>').attr({
                'src': dataURL,
                'class': 'border',
                'width': '200',
                'data-index': index
            });
            $("#image-container").append(img);
        }
        reader.readAsDataURL(file);
    });
});

async function loadModel() {
    class L2 {
        static className = 'L2';
        constructor(config) {
           return tf.regularizers.l1l2(config)
        }
    }
    tf.serialization.registerClass(L2);
    console.log("model loading..");
    model = await tf.loadGraphModel("http://localhost:81/tfjs-model/east_converted/model.json");   
    $(".progress-bar").hide();
    console.log("model loaded..");
}
loadModel();

// 批量预测逻辑
$("#predict-button").click(async function () {
    if (selectedFiles.length === 0) {
        alert("请先选择图片");
        return;
    }
    $("#prediction-list").empty();

    // 批量处理所有图片
    for (let i = 0; i < selectedFiles.length; i++) {
        // 加载图片转张量
        const img = await loadImage(selectedFiles[i]);
        const result = await tf.tidy(() => {
            let tensor = tf.browser.fromPixels(img)
                .resizeNearestNeighbor([640, 320])
                .expandDims(0);
            tensor = tf.cast(tensor, 'float32');
            return model.predict(tensor);
        });

        const [output1, output2] = result;
        const data2 = await output2.data();
        // 手动清理张量避免内存泄漏
        output1.dispose();
        output2.dispose();

        // 计算结果
        let hasText = false;
        for (var j = 0; j < 12800; j += 1) {
            if (data2[j] > 0.6) {
                hasText = true;
                break;
            }
        }

        // 输出对应结果
        const li = $('<li>').text(`第${i+1}张图片：${hasText ? '存在叠加文本，无法处理' : '无文本，处理成功'}`);
        $("#prediction-list").append(li);
    }
});

// 工具方法：把File对象转成可用的Image元素
function loadImage(file) {
    return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.src = URL.createObjectURL(file);
    });
}

优化说明 #

• 如果需要更高的预测效率，可以把所有图片的张量拼接成batch张量，一次性调用predict接口，减少模型调用开销
• 上传图片数量较多时，建议增加分批处理逻辑，避免一次性占用过多显存导致页面卡顿
• 代码中已经对TensorFlow.js创建的张量做了释放处理，可避免内存泄漏问题

内容的提问来源于stack exchange，提问作者Nimesh Kumar