• AI+前端技术的结合（实现图片识别功能）

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

    技术原理

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

    2. html>
    3. <html lang="en">
    4.  
    5. <head>
    6.   <meta charset="UTF-8">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>图片识别title>
    9.   
    10.   <style>
    11.     .container {
    12.       margin: 40px auto;
    13.       width: max(50vw, 400px);
    14.       display: flex;
    15.       flex-direction: column;
    16.       align-items: center;
    17.     }
    18.  
    19.     .custom-file-upload {
    20.       display: flex;
    21.       align-items: center;
    22.       cursor: pointer;
    23.       gap: 10px;
    24.       border: 2px solid black;
    25.       padding: 8px 16px;
    26.       border-radius: 6px;
    27.     }
    28.  
    29.     #file-upload {
    30.       display: none;
    31.     }
    32.  
    33.     #image-container {
    34.       width: 100%;
    35.       margin-top: 20px;
    36.       position: relative;
    37.     }
    38.  
    39.     #image-container>img {
    40.       width: 100%;
    41.     }
    42.  
    43.     .bounding-box {
    44.       position: absolute;
    45.       box-sizing: border-box;
    46.     }
    47.  
    48.     .bounding-box-label {
    49.       position: absolute;
    50.       color: white;
    51.       font-size: 12px;
    52.     }
    53.   style>
    54. head>
    55.  
    56. <body>
    57.   
    58.   <main class="container">
    59.     <label for="file-upload" class="custom-file-upload">
    60.       <input type="file" accept="image/*" id="file-upload">
    61.       上传图片
    62.     label>
    63.     <div id="image-container">div>
    64.     <p id="status">p>
    65.   main>
    66.  
    67.   
    68.   <script type="module">
    69.     // 导入transformers nlp任务的pipeline和env对象
    70.     import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"
    71.     // 是否允许本地模型
    72.     env.allowLocalModels = false;
    73.  
    74.     // 获取文件上传和图片容器元素
    75.     const fileUpload = document.getElementById('file-upload');
    76.     const imageContainer = document.getElementById('image-container')
    77.  
    78.     // 监听文件上传事件
    79.     fileUpload.addEventListener('change', function (e) {
    80.       // FileReader 读取上传的图像
    81.       const file = e.target.files[0];
    82.       const reader = new FileReader();
    83.       reader.onload = function (e2) {
    84.         // 显示上传的图像
    85.         const image = document.createElement('img');
    86.         image.src = e2.target.result;
    87.         imageContainer.appendChild(image)
    88.         // 启动AI检测
    89.         detect(image)
    90.       }
    91.       reader.readAsDataURL(file)
    92.     })
    93.  
    94.     // 获取状态信息元素
    95.     const status = document.getElementById('status');
    96.  
    97.     // 检测图片的AI任务
    98.     const detect = async (image) => {
    99.       status.textContent = "分析中..."
    100.       const detector = await pipeline("object-detection", "Xenova/detr-resnet-50")
    101.       const output = await detector(image.src, {
    102.         threshold: 0.1, //设置了一个阈值,用于决定何时将检测结果识别为一个对象
    103.         percentage: true //检测结果的置信度会以百分比的形式返回
    104.       })
    105.       // 渲染检测到的框
    106.       output.forEach(renderBox)
    107.     }
    108.  
    109.     // 渲染检测框函数
    110.     function renderBox({ box, label }) {
    111.       const { xmax, xmin, ymax, ymin } = box
    112.       const boxElement = document.createElement("div");
    113.       boxElement.className = "bounding-box"
    114.       Object.assign(boxElement.style, {
    115.         borderColor: '#123123',
    116.         borderWidth: '1px',
    117.         borderStyle: 'solid',
    118.         left: 100 * xmin + '%',
    119.         top: 100 * ymin + '%',
    120.         width: 100 * (xmax - xmin) + "%",
    121.         height: 100 * (ymax - ymin) + "%"
    122.       })
    123.  
    124.       const labelElement = document.createElement('span');
    125.       labelElement.textContent = label;
    126.       labelElement.className = "bounding-box-label"
    127.       labelElement.style.backgroundColor = '#000000'
    128.  
    129.       boxElement.appendChild(labelElement);
    130.       imageContainer.appendChild(boxElement);
    131.     }
    132.   script>
    133. body>
    134.  
    135. html>

    效果图

  • 相关阅读:
    【Java第31期】：Spring中存储Bean的注解以及用法
    【21天算法学习】索引查找
    vue3 项目搭建教程整理
    微服务系列开端-简述
    看完通辽可汗小约翰之后应该掌握的英语词汇 01 外交类
    使用非递归的方式实现归并排序
    序列化工具Protobuf在Idea中的配置和在java中的使用实例
    Keithley2420吉时利2420数字源表
    ElasticSearch导入PDF，WORD到ES进行全文检索，全文高亮等操作。
    JVM完整图文学习笔记 (含拓展知识广度学习) 第三章: 类加载与字节码技术
  • 原文地址：https://blog.csdn.net/xiaoxiaoxiao_lu/article/details/139767187