当前端与人工智能（AI）相结合，可以实现一系列强大的图像处理和分析功能。通过利用现代浏览器的能力以及强大的AI模型，我们可以开发出能够识别图像中的物体、场景和特征的前端应用程序。

接下来呆同学将展示一个简单的示例，我将展示一个简单的前端页面，允许用户上传图像，并利用AI模型进行物体检测。一旦图像被上传，AI模型将对图像进行处理并识别其中的物体，并在页面上显示出来。用户可以通过这个应用程序来快速了解图像中包含的内容，从而帮助他们更好地理解图像或进行后续的处理和分析。

这个示例展示了前端技术与AI的强大结合，为用户提供了一种直观而高效的方式来处理图像数据，同时也展示了现代Web应用程序在图像处理领域的潜力和应用前景。话不多说，开干！

步骤一：HTML结构

<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> 

• HTML 文件定义了一个文件上传输入框和两个用于显示图像和状态消息的 <div> 元素。

步骤二：JavaScrip代码

1. 模块导入，禁用本地模型的使用

// transformers npl 任务 
import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"
env.allowLocalModels = false;

这里使用 JavaScript 中的模块导入语法，从指定的 CDN（Content Delivery Network）地址导入了名为 "@xenova/transformers" 的包的两个成员：pipeline 和 env。

• pipeline 是一个函数或对象，可用于执行数据处理管道或流水线的操作。
• env 是一个对象，可用于配置环境变量或其他相关的环境设置。

设置了 env 对象的 allowLocalModels 属性为 false。用于控制代码的行为，具体来说，它用于禁用本地模型的使用，而只允许使用远程托管的模型。

2. 文件上传事件处理函数和物体检测

const fileUpload = document.getElementById('file-upload'); 
const imageContainer = document.getElementById('image-container'); fileUpload.addEventListener('change', function(e) { 
    const file = e.target.files[0]; 
    const reader = new FileReader(); 
    reader.onload = function(e2) { 
        const image = document.createElement('img'); 
        image.src = e2.target.result; 
        imageContainer.appendChild(image); 
        detect(image); // 调用 detect 函数启动物体检测任务 
    } 
    reader.readAsDataURL(file); 
}); 
const status = document.getElementById('status'); 
const detect = async (image) => { 
    status.textContent = "分析中..."; 
    const detector = await pipeline("object-detection", "Xenova/detr-resnet-50"); 
    const output = await detector(image.src, { 
        threshold: 0.1, percentage: true 
    }); 
    output.forEach(renderBox); // 对检测结果调用 renderBox 函数进行渲染 }

• 文件上传事件处理函数监听了文件上传输入框的变化事件。当用户选择了要上传的文件后，触发该事件处理函数。
• 在事件处理函数内部，使用 FileReader 对象读取用户选择的文件，并在文件加载完成后创建图像对象，并将其添加到页面上。
• 调用 detect 函数启动物体检测任务。在这个函数中，首先设置状态消息为 "分析中..."，然后调用 pipeline 函数实例化一个对象检测器，并传入图像作为参数进行物体检测。
• 物体检测完成后，将检测结果传递给 renderBox 函数进行渲染。

3. 渲染边界框和标签

function renderBox({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); 
}

• renderBox 函数接收一个包含边界框和标签信息的对象作为参数。根据这些信息，创建一个带有边界框和标签的 <div> 元素，并设置其样式。
• 边界框的位置和大小通过计算得出，并设置为相对于图像容器的百分比值。
• 创建一个 `` 元素用于显示物体的标签，并将其添加到边界框元素中。
• 最后将边界框元素添加到图像容器中，完成了对检测到的物体的渲染。

涵盖了模块导入和环境设置、文件上传事件处理函数、物体检测函数以及渲染边界框和标签的过程。

步骤三：CSS样式

<style>
    .container {
        margin: 40px auto;
        width: max(50vw, 400px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .custom-file-upload {
        display: flex;
        align-items: center;
        cursor: pointer;
        gap:10px;
        border: 2px solid black;
        padding: 8px 16px;
        border-radius: 6px;
    }
    #file-upload {
        display: none;
    }
    #image-container {
        width: 100%;
        margin-top:20px;
        position: relative;
    }
    #image-container>img {
        width: 100%;
    }
    .bounding-box {
        position: absolute;
        box-sizing: border-box;
    }
    .bounding-box-label {
        position: absolute;
        color: white;
        font-size: 12px;
    }

这些样式用于美化页面元素，使其更具吸引力和易用性。

效果图

总结

今天的示例展示了如何将前端技术与人工智能相结合，实现了一个简单的图像上传和物体检测应用。主要知识点包括：

1. 前端技术： 使用 HTML、CSS 和 JavaScript 创建了一个用户友好的页面，实现了文件上传和图像显示功能。
2. 人工智能与物体检测： 利用第三方库调用了 AI 模型进行图像物体检测，并将检测结果可视化展示在页面上，帮助用户直观了解图像内容。
3. 技术细节与代码实现： 使用异步函数和 Promise 实现了对 AI 模型的调用和等待结果的过程，通过 CSS 实现了检测结果的可视化渲染。
4. 代码结构与模块化： 将代码分解为多个函数和模块，提高了代码的可读性和可维护性，使应用具备更好的扩展性和灵活性。

通过这个示例，我们探索了前端与人工智能的结合，展示了其在图像处理领域的应用潜力，为用户提供了一种直观、高效的图像处理方式

本文由微信公众号量子前端原创，哈喽比特收录。
文章来源：https://mp.weixin.qq.com/s/2yWWAv3U3iyZBCiEsfYCDQ