前端与 AI 融合：图片识别技术的创新之旅

前言

在信息技术飞速发展的时代，前端开发和 AI 技术正以令人惊叹的速度融合在一起。而图片识别作为两者结合的一个重要应用领域，正逐渐改变着我们的生活和工作方式。

话不多说，下面为大家展示(最后将附上完整代码，有需要的小伙伴自取学习)：

主体页面部分

• 有一个主要的容器 main，其中包含了图片上传的控件和图片显示区域。
• input type="file" id="file - upload"：创建一个文件上传输入框，用于用户选择要上传的图片。
• #image - {insert_element_2_Y29udGFpbmVy} 是图片显示的容器。div
• p#status 用于显示状态信息。p

<main class="container">
        <label for="file-upload" class="custom-file-upload">
            <!-- <input type="file" id="file-upload" accept="image/*"> -->
            <input type="file" accept="image/*" id="file-upload">
            上传图片
        </label>
        <div id="image-container"></div>
        <p id="status"></p>
    </main>

脚本部分

• 引入transformers库导入pipeline，env模块，用于执行nlp任务
• 设置当前环境对象，禁止加载本地模型，使用远程加载。
• cdn.jsdelivr.net 是一个内容分发网络（CDN），通过从 CDN 导入模块，可以提高模块的加载速度，特别是在网络延迟较高的情况下。
• from后边接的那一串是一个远程地址，从该地址导入pipeline 和 env 两个模块。

       // transformers库导入pipeline模块 npl 任务 
       import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"
       // 设置当前的环境对象 不要加载本地模型，使用远程加载 transformers库
       env.allowLocalModels = false;

• 为文件上传输入框添加 change 事件监听器。当用户选择文件时：
  • 获取上传的文件。
  • 创建一个 FileReader 对象。
  • 在 reader.onload 回调函数中，创建一个图片元素，并设置其 src 属性为读取到的图片数据。
  • 将图片添加到图片显示容器中。

        const fileUpload = document.getElementById('file-upload');
        const imageContainer = document.getElementById('image-container')
        // 文件输入框元素添加监听器 事件名称change 指定触发事件执行的函数
        fileUpload.addEventListener('change', function (e) {
            // 获取目标事件看看效果 只要获取的第第一张图片（只上传一张图片）
            // console.log(e.target.files[0]);

            const file = e.target.files[0];
            // 新建一个FileReader 对象， 文件的本质是 01 序列 
            // 图片比较大 
            const reader = new FileReader();
            reader.onload = function (e2) {
                // 读完了， 加载完成
                const image = document.createElement('img'); // 图片对象
                console.log(e2.target.result);
                image.src = e2.target.result;
                //添加图片src获取图片展示到div中
                imageContainer.appendChild(image)
                // 启动ai任务  功能模块化，封装出去
                detect(image)
            }
            reader.readAsDataURL(file)
        })

• 封装思想将detect函数封装到外面，将功能模块化
• detect 函数用于启动图片检测的 AI 任务。它在获取到上传的图片后，更新状态信息，并使用 pipeline 和指定的模型进行检测。
• renderBox 函数用于处理检测结果，根据边界框信息和标签创建相应的边界框元素和标签元素，并添加到图片显示容器中。
• 通过pipeline指定特定模型用于物体检测，并将其实例化
• 使用 await 等待 detector 对象，确保模型完全加载后再继续。
• output返回检测对象结果
• renderBox函数用于渲染边界框

const status = document.getElementById('status');
        // 通过pipeline启动一个检测图片的AI任务并选择合适的模型
        const detect = async (image) => {
            status.textContent = "分析中...";
            const detector = await pipeline("object-detection",
                "Xenova/detr-resnet-50") // 适合对象检测的模型 model 实例化了detector对象
            const output = await detector(image.src, {
                threshold: 0.1,
                percentage: true
            })
            // console.log(output);
            output.forEach(renderBox)
        }

        function renderBox({ box, label }) {
            console.log(box, label);
            const { xmax, xmin, ymax, ymin } = box
            const boxElement = document.createElement("div");
            boxElement.className = "bounding-box"
            Object.assign(boxElement.style, {
                borderColor: '#123123',
                borderWidth: '1px',
                borderStyle: 'solid',
                left: 100 * xmin + '%',
                top: 100 * ymin + '%',
                width: 100 * (xmax - xmin) + "%",
                height: 100 * (ymax - ymin) + "%"
            })

            const labelElement = document.createElement('span');
            labelElement.textContent = label;
            labelElement.className = "bounding-box-label"
            labelElement.style.backgroundColor = '#000000'

            boxElement.appendChild(labelElement);
            imageContainer.appendChild(boxElement);
        }

• 详细说明都在注释

效果

结语

AI与前端可以完美融合，让我们积极拥抱创新，迎接未来的无限可能！