1. 前言

"探索图像识别的未来，我们时常被人工智能所惊艳。但是，你曾想过将自然语言处理（NLP）与图像识别相结合，会擦出怎样的火花吗？让我们一起来揭开这个令人振奋的未来！本文将带你深入探讨如何通过融合NLP技术，实现多语言环境下的图像识别，以及如何在CSS和HTML中提高编程效率。让我们一同启航，探寻编程的新领域！"

今天我们来聊聊如何用AI识别图片上的物品

正文

• 首先我们去构建一个简单的文件上传界面，用户可以通过点击"上传图片"按钮选择并上传图片文件

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

在这个代码块中我们用了<label>元素包裹一个文件上传的输入框，它具有custom-file-upload类，这个类可能用于自定义文件上传样式。标签的for属性指向了一个ID为file-upload的输入框，表示这个标签是与该输入框关联的。文本内容为"上传图片"。 在这段代码的下半部分，我们可以看见<div>元素：具有ID为image-container，其用于显示上传的图片。最下面的<p>元素：具有ID为status，用于显示状态信息，如上传进度或错误信息等

• 在完成上一步后，我们需要在用户选择文件后，准备将选中的文件读取到内存中，以便后续的处理，比如文件预览或上传等。

       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];
            
            const reader = new FileReader();

在这段代码中 我们通过import 语法导入了来自指定URL的 pipeline 和 env 两个函数，这可能是某个模块或库提供的功能，用于文件处理或其他操作。

通过 document.getElementById 方法获取了ID为 file-upload 和 image-container 的两个DOM元素，并将它们分别赋值给了 fileUpload 和 imageContainer 这两个变量。

为 fileUpload 元素添加了 change 事件的监听器。当用户选择文件后，这个监听器会触发，执行后续的文件处理逻辑。

在 change 事件的回调函数中，通过 e.target.files[0] 获取用户选择的文件对象，并将其赋值给 file 变量。然后创建了一个 FileReader 对象，准备对选中的文件进行读取。

• [ ]在实现了在文件读取完成后，我们要将读取的图片内容显示在页面上

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

在前面的代码中已经创建了一个 FileReader 对象，并在文件选择事件的回调函数中准备对文件进行读取。读取完成回调函数：通过给 reader.onload 赋值一个函数，定义了文件读取完成后的回调逻辑。这个回调函数会在文件读取完成后执行。在回调函数中，通过 document.createElement('img') 创建了一个 img 元素，用于显示用户上传的图片。将读取的文件内容赋值给图片的 src 属性，以便显示图片内容。e2.target.result 包含了读取的文件内容，这里假设它是一个图片的数据URL。通过 imageContainer.appendChild(image) 将图片元素添加到页面中，显示出用户上传的图片。

• 完成内容显示后，我们要创建并渲染图像中的边界框

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

1. 参数解构：函数的参数使用了解构赋值，从传入的对象中提取了 box 和 label 两个属性。
2. 创建边界框元素：在函数内部，通过 document.createElement("div") 创建了一个 div 元素，用于表示图像中的边界框。
3. 设置边界框样式：通过给 boxElement.style 对象赋值，设置了边界框的样式。这里设置了边框的颜色、宽度、样式以及位置和大小，根据传入的 box 对象的属性进行计算。
4. 计算边界框位置和大小：从传入的 box 对象中获取了 xmin、xmax、ymin、ymax 四个属性，这些属性表示边界框的左上角和右下角的坐标。根据这些坐标计算了边界框的位置和大小，并应用到了 boxElement 元素的样式中。
5. 添加类名：为 boxElement 元素添加了一个类名 bounding-box，这可能用于定义边界框的其他样式或行为。

• 在完成以上步骤后我们创建并渲染边界框元素及其标签，并将它们添加到图像容器中，用于显示在上传的图片上

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

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

        }

1. 创建标签元素：通过 document.createElement('span') 创建了一个 span 元素，用于显示边界框的标签内容。
2. 设置标签内容：将传入的 label 参数赋值给 textContent 属性，这样标签元素就显示了边界框的标签内容。
3. 设置标签样式：设置了标签元素的样式，包括背景颜色为黑色。
4. 添加类名：为标签元素添加了一个类名 bounding-box-label，这可能用于定义标签的其他样式或行为。
5. 将标签添加到边界框元素中：通过 boxElement.appendChild(labelElement) 将标签元素添加到边界框元素中，使得标签和边界框关联在一起。
6. 将边界框元素添加到图像容器中：通过 imageContainer.appendChild(boxElement) 将边界框元素添加到图像容器中，使得整个边界框及其标签显示在图像容器中。

• 最后完成以上所有步骤看看我们的效果图吧

代码遍历了模型的每个预测，为每个检测到的对象绘制了带有标签和置信度的红色边框。最后，显示了带有标注的图像

今天的内容就到这啦，如果你觉得小编写的还不错的话，或者对你有所启发，请给小编一个辛苦的赞吧