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

前言

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

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

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

Step1:导入必要的模块

js 复制代码
import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"
env.allowLocalModels = false;
  • 此代码从CDN(内容传送网络)中导入必要的模块。pipelineenv 是从 @xenova/transformers 包中导入的。
  • env.allowLocalModels = false; 将环境变量 allowLocalModels 设置为 false,表示不允许使用本地模型。

Step2:文件上传事件监听器

js 复制代码
const fileUpload = document.getElementById('file-upload');
const imageContainer = document.getElementById('image-container')
fileUpload.addEventListener('change', function (e) {
    // 当选择文件时触发的事件监听器
});
  • 此部分代码从HTML文档中选择文件上传输入框和图像容器。
  • 它向文件上传输入框添加了一个事件监听器,当选择文件时触发一个函数。

Step3:FileReader 读取上传的图像

js 复制代码
const reader = new FileReader();
reader.onload = function (e2) {
    // 文件读取完成时执行的函数
};
reader.readAsDataURL(file)
  • 当选择文件时,创建了一个 FileReader 对象。
  • 一个 onload 事件监听器被附加到读取器上,当文件读取完成时执行一个函数。
  • readAsDataURL 方法在读取器上被调用,将所选文件的内容读取为数据URL。

Step4:显示上传的图像

js 复制代码
javascriptCopy code
const image = document.createElement('img');
image.src = e2.target.result;
imageContainer.appendChild(image)
  • onload 函数内部,创建了一个 <img> 元素。
  • 图像的 src 属性设置为读取文件作为数据URL的结果。
  • 图像元素被追加到HTML文档中的图像容器中。

Step5:启动AI检测

js 复制代码
detect(image)
  • 在显示上传的图像后,使用上传的图像作为参数调用 detect 函数。

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

js 复制代码
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:渲染检测到的框

js 复制代码
output.forEach(renderBox)
  • 对输出中检测到的每个对象,调用 renderBox 函数以渲染边界框。

Step8:渲染边界框

js 复制代码
function renderBox({ box, label }) {
    // 渲染边界框的函数
}
  • renderBox 函数接受一个具有 box(边界框的坐标)和 label(检测到的对象的标签)的对象。
  • 在函数内部,创建一个 <div> 元素来表示边界框。
  • 应用 CSS 样式来根据检测到的对象的坐标来定位和样式化边界框。
  • 创建一个 <span> 元素来在边界框内显示检测到的对象的标签。

完整代码

js 复制代码
<!--
    * @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>

效果图

还需要调整参数,加强精确度

总结

这篇文章,我们探讨了将AI对象检测与前端Web开发无缝集成的方法。通过按照所述步骤并利用现成的AI库,开发人员可以为其Web应用程序增加强大的图像识别功能。这种AI和前端技术的融合为在Web上创建智能和交互式用户体验开启了广阔的可能性。

相关推荐
cs_dn_Jie29 分钟前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic1 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿1 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161772 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test3 小时前
js下载excel示例demo
前端·javascript·excel
Yaml43 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事3 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶3 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo3 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx