AI技术+前端的结合(实现图片识别功能)

     随着人工智能技术的不断发展,AI在前端设计页面中的应用变得越来越普遍。比如:在电商平台上,可以利用对象检测技术实现商品的自动识别和分类;人脸识别;车辆检测;图片识别等等......其中一个显著的应用是在图像识别中,AI算法可以检测和标记图像中的对象,增强用户体验,并在网站或应用程序上实现创新功能。

技术原理

     在demo中,我们将使用 JavaScript 和 Transformers 库来实现图像对象检测的功能。图像对象检测是计算机视觉领域中的重要任务,它可以识别图像中的不同对象并标注它们的位置。我们将使用一个预训练的对象检测模型,将其集成到网页中,通过上传图片来进行对象检测,并在图片上绘制边界框以标识检测到的对象。

<!--
    * 本demo实现的功能:
    * 实现了图片上传功能,利用Transformer模型进行对象检测,并在图片上标记检测到的对象
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片识别</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) {
      // FileReader 读取上传的图像
      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)
        // 启动AI检测
        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>

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/729136.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python-面向对象编程(超详细易懂)

面向对象编程&#xff08;oop&#xff09; 面向对象是Python最重要的特性&#xff0c;在Python中一切数据类型都是面向对象的。 面向对象的编程思想&#xff1a;按照真实世界客观事物的自然规律进行分析&#xff0c;客观世界中存在什么样的实体&#xff0c;构建的软件系统就存在…

Spring自定义标签体系和应用

我们知道&#xff0c;在使用Dubbo框架时&#xff0c;需要指定配置文件中的application、protocol、registry、provider、service等服务器端和客户端的配置项&#xff0c;典型的配置方法如下所示。通过这些配置项&#xff0c;我们可以基于Spring容器来启动Dubbo服务。 <!-- …

Docker Desktop进入界面时一直转圈的解决办法记录

我的win10版本如下&#xff0c;是支持安装的&#xff0c;不支持安装的&#xff0c;可以先升级系统版本&#xff1a; 起初是因为运行Docker Desktop时一直转圈&#xff0c;无法进入主面板&#xff0c;百度之&#xff0c;需要安装hype-v环境&#xff0c;找到以下 勾选Hyper-V下的…

怎么学习PMP才是最正确的?

每个人的学习方式各不相同&#xff0c;不能一概而论说某种学习方式就是错误的。学习方式并没有绝对的对错之分&#xff0c;只能说是否适合自己&#xff0c;是否能够达到预期的学习效果。并不是别人的学习方式就一定适合自己&#xff0c;也不是不适合自己的学习方式就一定是错误…

嵌入式系统基础

嵌入式系统基础主要包括以下几个方面&#xff1a; 1、定义&#xff1a; 嵌入式系统是以应用为中心&#xff0c;以计算机技术为基础&#xff0c;软硬件可裁剪&#xff0c;适应应用系统对功能、可靠性、成本、体积、功耗严格要求的专用计算机系统。它由硬件和软件组成&#xff0…

YOLOv8模型代码学习

1.参考文献 链接1 2.网络模型解析 2.1卷积神经单元&#xff08;conv.py&#xff09; 在该文件中定义了yolov8网络中的卷积神经单元&#xff0c;位置如图所示。 def autopad(k, pNone, d1): # kernel(卷积核), padding(填充), dilation(扩张)"""Pad to same…

数据中心技术:大数据时代的机遇与挑战

在大数据时代&#xff0c;数据中心网络对于存储和处理大量信息至关重要。随着云计算的出现&#xff0c;数据中心已成为现代技术的支柱&#xff0c;支持社交媒体、金融服务等众多行业。然而&#xff0c;生成和处理的大量数据带来了一些挑战&#xff0c;需要创新的解决方案。在这…

不同版本的 Rocky Linux 快速更换阿里镜像源

环境&#xff1a;兼容 Rocky Linux 任意版本。 搞服务器系统从 CentOS 折腾到 Rocky Linux&#xff0c;然后又折腾到 Alma Linux&#xff1b;最近因为 RKE2 没有做 Alma Linux 的兼容性&#xff0c;又折腾到了 Rocky Linux &#xff0c;真的是一把鼻涕一把泪呀。但是实在是不理…

深入理解和实现Windows进程间通信(共享内存)

常见的进程间通信方法 常见的进程间通信方法有&#xff1a; 管道&#xff08;Pipe&#xff09;消息队列共享内存信号量套接字 下面&#xff0c;我们将详细介绍共享内存的原理以及具体实现。 什么是共享内存&#xff1f; Windows共享内存&#xff08;Shared Memory in Windo…

【linux】内核源码TCP->IP->L2层函数调用继续摸索中

日志打印的时候&#xff0c;把行数也打印了&#xff1a; 登录 - Gitee.comhttps://gitee.com/r77683962/linux-6.9.0/commit/b847489a9910f68b9581fd8788807c697c82cdbd 上回基于应用层wget操作找到TCP调用的一些接口&#xff0c;并且已经到IP层的一些接口&#xff0c;当前基…

Windows系统Maven下载安装

下载&#xff1a; 官网地址&#xff1a;https://maven.apache.org/download.cgi 安装&#xff1a; 下载下来的是一个压缩包&#xff0c;首先将其解压到你的Maven目标安装位置 接下来为其配置其环境变量 &#xff08;Maven的基础是Java&#xff0c;因此要首先确认已为你的电…

求求你别学了:从 Prompt 到 RAG,从 RAG 到 DSPy

如本瓜在此前的文章中提到过&#xff0c;Prompt 工程已经不中用了&#xff0c;没有人愿意废那么大的劲来学习如何结构化提问&#xff0c;大家想要的就是傻瓜式提问&#xff0c;但是大模型的回答还是精准的、合意的&#xff1b; 后来&#xff0c;大兴 RAG 技术&#xff0c;做专…

Nuxt快速学习开发 - Nuxt3静态资源Assets

Nuxt 使用两个目录来处理样式表、字体或图像等资产。 public/目录内容按原样在服务器根目录中提供。 assets/目录包含您希望构建工具&#xff08;Vite 或 webpack&#xff09;处理的所有资产。 public/目录 public目录用作静态资产的公共服务器&#xff0c;可在您的应用程序定…

景联文科技构建高质量多轮对话数据库,赋能AI交互新飞跃

近年来&#xff0c;大语言模型的发展极大推动了自然语言处理领域的进步&#xff0c;大语言模型正引领智能对话领域进入一个全新时代&#xff0c;不仅提升了对话体验的自然度和效率&#xff0c;也为探索更加人性化、智能化的交互方式开辟了道路。 景联文科技作为大语言模型数据服…

文心一言 VS 讯飞星火 VS chatgpt (285)-- 算法导论21.2 4题

四、请给出图 21-3 所示操作序列的一个运行时间的渐近紧确界&#xff0c;假定使用链表表示和加权合并启发式策略。如果要写代码&#xff0c;请用go语言。 文心一言&#xff1a; 图 21-3 没有直接给出&#xff0c;但通常这种操作序列可能与某种数据结构&#xff08;如并查集或…

算法:分治(归并)题目练习

目录 题目一&#xff1a;排序数组 题目二&#xff1a;数组中的逆序对 题目三&#xff1a;计算右侧小于当前元素的个数 题目四&#xff1a;翻转对 题目一&#xff1a;排序数组 给你一个整数数组 nums&#xff0c;请你将该数组升序排列。 示例 1&#xff1a; 输入&#xf…

收银系统源码推荐收银系统二次开发

千呼新零售收银系统是一套线下线上一体化的收银系统&#xff0c;给商户提供了含有线下收银/称重、线上小程序商城、精细化会员管理、ERP进销存、营销活动、移动店务管理等一体化解决方案&#xff01; 1. 多样化线下收银 线下收银支持Windows收银、安卓收银、智能称重收银、无人…

BFS:FloodFill算法

文章目录 FloodFill算法简介1.图像渲染2.岛屿数量3.岛屿的最大面积4.被围绕的区域总结 FloodFill算法简介 Flood Fill算法是一种用于确定与某个给定节点相连的区域的算法&#xff0c;常用于计算机图形学和图像处理。该算法可以用于诸如填充多边形、检测连通区域等任务。Flood …

Linux 一键部署 Nginx1.26.1 + ModSecurity3

前言 ModSecurity 是 Apache 基金会的一个开源、高性能的 Web 应用程序防火墙(WAF),它提供了强大的安全规则引擎,用于检测和阻止各种攻击行为,如 SQL 注入、XSS 跨站点脚本攻击等。而 nginx 是一个高性能的 Web 服务器,常用于处理大量的并发请求,具有很高的负载均衡能力…

蓝牙数传芯片TD5325A,蓝牙5.1—拓达半导体

拓达TD5325A芯片是一款支持蓝牙BLE&SPP的纯数传芯片&#xff0c;蓝牙5.1版本。芯片的亮点在于性能强&#xff0c;支持APP端直接对芯片做设置与查询操作&#xff0c;包括修改蓝牙名、UUID、MAC地址&#xff0c;以及直接操作蓝牙芯片自身的IO与PWM口&#xff0c;还包括支持简…