AI赋能NLP:图片识别新境界

前言

在数字时代，图像识别与处理技术得到了飞速的发展，其中对象检测是图像处理领域中的一项重要技术。通过对象检测，我们可以识别出图片中的物体，为图像分析、智能安防、自动驾驶等领域提供有力支持。本文将介绍如何利用JavaScript执行AI模型，简单实现图片对象检测，帮助读者了解该技术的实现原理和应用场景。

技术原理

对象检测是计算机视觉领域的一个重要分支，它利用深度学习算法对图像中的物体进行识别和定位。具体来说，对象检测模型会通过分析图像中的特征，判断是否存在特定类型的物体，并给出物体的位置信息。在Web应用中，我们可以通过调用AI模型，实现对用户上传的图片进行对象检测的功能。

代码实现解析

1. HTML部分：

<label> 和 <input type="file"> 用于创建一个文件上传按钮，用户可以通过这个按钮上传图片。 <div id="image-container"> 用于显示上传的图片。 <p id="status"> 用于显示处理图片的状态`。

HTML 复制代码

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

2. JavaScript部分：

引入AI库并设置环境

首先，通过CDN引入@xenova/transformers AI库，并在代码中设置环境以限制本地模型的使用。

js 复制代码

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

准备DOM元素

获取页面中的上传按钮和图片容器，以便后续操作。

js 复制代码

	const uploadButton = document.getElementById('upload-button');  
	const imageContainer = document.getElementById('image-container');

添加文件上传事件监听器

为上传按钮添加change事件监听器，以便在用户选择文件时执行相应操作。

js 复制代码

	uploadButton.addEventListener('change', async function(event) {  
	    // 处理文件上传逻辑 
	});

处理文件上传并显示图片

在事件监听器中，使用FileReader读取用户选择的文件，并转换为DataURL格式。然后，创建新的<img>元素，设置其src属性为图片的DataURL，并将其添加到图片容器中。

js 复制代码

	const file = event.target.files[0];  
	const reader = new FileReader();    
	reader.onload = function(e) {  
	    const img = document.createElement('img');  
	    img.src = e.target.result;  
	    imageContainer.appendChild(img);  	     
	    // 分析图片  
	    await analyzeImage(img);  
	};  	  
	reader.readAsDataURL(file);

分析图片

定义了一个名为detect的异步函数，它用于执行一个AI任务来检测图片中的对象。并使用了pipeline函数来创建一个检测器对象detector。

pipeline函数接受两个参数：
- 第一个参数是任务类型，这里是"object-detection"，表示进行对象检测。
- 第二个参数是模型名称，"Xenova/detr-resnet-50"，这指定了使用哪个预训练模型来进行对象检测。
由于pipeline函数可能是异步的，这里使用了await关键字来等待其完成，并返回检测器对象。

js 复制代码

	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//检测结果的置信度会以百分比的形式返回
        })
        output.forEach(renderBox)
    } 
	}

渲染边界框

定义renderBox函数，该函数负责根据AI分析的结果在图片上渲染边界框。

js 复制代码

 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) + "%"
        })

3. 完整代码：

复制代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nlp之图片识别，两种语言</title>
    <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;
    }

    </style>
</head>
<body>
    <main class="container">
        <label for="file-upload" class="custom-file-upload">
            <input type="file" accept="image/*" id="file-upload">
            上传图片
        </label>
        <div id="image-container"> </div>
        <p id="status"></p >
    </main>
     
    <script type="module">
    // transformers npl 任务 
    import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"
    env.allowLocalModels = false;

    const fileUpload = document.getElementById('file-upload');
    const imageContainer = document.getElementById('image-container')
    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;
            imageContainer.appendChild(image)
            detect(image) // 启动ai任务  功能模块化，封装出去
        }
        reader.readAsDataURL(file)
    })
    const status = document.getElementById('status');
    // 检测图片的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);
        
    }
    </script>
</body>
</html>

结果展示

应用场景

图片对象检测技术在Web应用中有着广泛的应用场景。例如，在电商平台上，可以利用对象检测技术实现商品的自动识别和分类；在安防监控领域，可以通过对象检测技术实现人脸识别、车辆检测等功能；在自动驾驶领域，图片对象检测技术可以帮助车辆识别道路上的行人、车辆等障碍物，提高行驶安全性。

总结

通过本文的介绍，我们了解利用JavaScript执行AI模型，实现图片对象检测的基本原理和实现步骤。对象检测技术作为计算机视觉领域的重要分支，具有广泛的应用前景。需要注意的是，图片识别的准确性和效率与所使用的AI模型、训练数据的质量和数量以及识别任务的复杂性密切相关。因此，在实际应用中，需要不断优化模型结构、调整参数设置，并增加训练数据的多样性，以提高图片识别的性能和效果。