AI+前端-实现图片识别功能

前言

在当今的技术环境中，人工智能（AI）与前端开发的融合越来越普遍。其中一个显著的应用是在图像识别中，AI算法可以检测和标记图像中的对象，增强用户体验，并在网站或应用程序上实现创新功能。

下面将给出完成图片识别功能简易代码示例与讲解：

先决条件： 在继续之前，请确保您对HTML、CSS和JavaScript有基本的了解。另外，熟悉与AI和图像处理相关的概念将会有所帮助。

Step1：导入必要的模块

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

env.allowLocalModels = false;

此代码从CDN（内容传送网络）中导入必要的模块。pipeline 和 env 是从 @xenova/transformers 包中导入的。
env.allowLocalModels = false; 将环境变量 allowLocalModels 设置为 false，表示不允许使用本地模型。

Step2：文件上传事件监听器

const fileUpload = document.getElementById('file-upload');

const imageContainer = document.getElementById('image-container')

fileUpload.addEventListener('change', function (e) {

    // 当选择文件时触发的事件监听器

});

此部分代码从HTML文档中选择文件上传输入框和图像容器。
它向文件上传输入框添加了一个事件监听器，当选择文件时触发一个函数。

Step3：FileReader 读取上传的图像

const reader = new FileReader();

reader.onload = function (e2) {

    // 文件读取完成时执行的函数

};

reader.readAsDataURL(file)

当选择文件时，创建了一个 FileReader 对象。
一个 onload 事件监听器被附加到读取器上，当文件读取完成时执行一个函数。
readAsDataURL 方法在读取器上被调用，将所选文件的内容读取为数据URL。

Step4：显示上传的图像

javascriptCopy code

const image = document.createElement('img');

image.src = e2.target.result;

imageContainer.appendChild(image)

在 onload 函数内部，创建了一个 <img> 元素。
图像的 src 属性设置为读取文件作为数据URL的结果。
图像元素被追加到HTML文档中的图像容器中。

Step5：启动AI检测

detect(image)

在显示上传的图像后，使用上传的图像作为参数调用 detect 函数。

Step6：使用AI模型进行对象检测

const detector = await pipeline("object-detection", "Xenova/detr-resnet-50")

const output = await detector(image.src, {

    threshold: 0.1,

    percentage: true

})

使用 pipeline 函数从指定的模型（"Xenova/detr-resnet-50"）实例化一个对象检测模型（"object-detection"）。
使用 await 等待 detector 对象，确保模型完全加载后再继续。
然后使用 detector 对象在上传的图像上执行对象检测。
output 包含对象检测任务的结果。

Step7：渲染检测到的框

output.forEach(renderBox)

对输出中检测到的每个对象，调用 renderBox 函数以渲染边界框。

Step8：渲染边界框

function renderBox({ box, label }) {

    // 渲染边界框的函数

}

renderBox 函数接受一个具有 box（边界框的坐标）和 label（检测到的对象的标签）的对象。
在函数内部，创建一个 <div> 元素来表示边界框。
应用 CSS 样式来根据检测到的对象的坐标来定位和样式化边界框。
创建一个 <span> 元素来在边界框内显示检测到的对象的标签。

完整代码

<!--

    * @func 文件上传和对象检测功能

    * @desc 实现了图片上传功能，并利用Transformer模型进行对象检测，并在图片上标记检测到的对象

    * @author [Your Name]

    * @data 2024-04-17

-->

<!DOCTYPE html>

<html lang="en">



<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>nlp之图片识别，两种语言</title>

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

    }

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



  <!-- JavaScript 代码 -->

  <script type="module">

    // 导入transformers nlp任务的pipeline和env对象

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

      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)

      }

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

      const output = await detector(image.src, {

        threshold: 0.1,

        percentage: true

      })

      output.forEach(renderBox)

    }



    // 渲染检测框函数

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

    }

</script>

</body>



</html>