智能界面：前端与AI的融合之美---智能识别图片-优快云博客

前言

当人工智能与前端技术融合时，可以创造出许多令人惊叹的应用和体验。在这样的融合中，前端技术负责用户界面的设计和交互，而人工智能则负责数据处理、分析和智能决策。以下是一些融合了AI和前端技术的介绍：

智能推荐系统：利用前端技术构建用户友好的界面，与后端的智能推荐算法结合，为用户提供个性化的推荐内容，如商品、音乐、视频等。
语音助手：通过前端技术实现语音交互界面，与后端的自然语言处理和语音识别模型结合，使用户能够通过语音与应用程序进行交互，执行各种任务和查询。
智能聊天界面：将AI技术整合到前端的聊天界面中，使得用户可以与智能机器人进行对话，并且机器人能够理解用户的意图并做出相应的回应，提供帮助和信息。
情感分析应用：结合前端的界面设计和后端的情感分析模型，实现能够识别用户情绪和情感的应用，例如在社交媒体上分析用户发帖的情绪倾向。
智能图像处理：利用前端技术展示图像处理的结果，如图像识别、物体检测、图像风格转换等，让用户能够通过界面与AI模型互动并查看处理结果。

这些是AI与前端融合的一些常见应用，它们展示了人工智能和前端技术结合所带来的创新和便利。接下来让我们来一起去探索人工智能与前端技术结合的智能图像处理吧~

步骤

先介绍一下Emmet语法：Emmet语法是一种用于快速编写HTML和CSS代码的工具，它可以帮助开发者以更高效的方式创建和编辑代码。Emmet提供了一套简洁的语法规则，通过使用简短的缩写和表达式，可以快速生成复杂的HTML结构和CSS样式。例如，使用Emmet语法可以将简单的CSS选择器转换为HTML标记：

div#header 将生成 <div id="header"></div>
ul.nav>li*5 将生成 <ul class="nav"><li></li><li></li><li></li><li></li><li></li></ul>

此外，Emmet还支持更多高级功能，如嵌套、递增计数、文本节点插入等，使得编写和编辑HTML和CSS代码更加方便和高效。Emmet通常集成在许多流行的文本编辑器和集成开发环境中，如VS Code、Sublime Text等，使得开发者可以轻松地使用这一功能；

前端代码：此处可以直接输入 main.container>label.custom-file-upload>input#file-upload+#image-container+p#status，再按tab键；

<!-- 语义化 main就比div更好 页面中都主体内容 -->
    <!-- css选择器 -->
    <mainclass="container">
       <labelfor="file-upload"class="custom-file-upload">
        <inputtype="file"accept="image/*"id="file-upload">
        上传图片
       </label>
       <divid="image-container"></div>
       <pid="status"></p>
    </main>

导入pipeline和env：- pipeline 是一个函数或对象，可用于执行数据处理管道或流水线的操作。

env 是一个对象，可用于配置环境变量或其他相关的环境设置。
import {pipeline,env} from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";

通过id(document.getElementById('xxx' ))获取对应的HTML元素分别命名为为fileUpload(上传图片的输入框input)和imageContainer(显示图片的div容器);

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

``5. 给fileUpload加一个事件监听，触发的时候就调用一个函数：定义file用于获取上传的文件，新建一个FileReader对象reader,通过reader调用onload来读取并加载文件，再创建一个图片对象image(document.createElement('xxx') )来获取上传图片的路径，将image作为子元素节点添加到imageContainer父元素节点上(appendChild(xxx) )，通过detect(image)启动AI任务(功能模块化，封装出去) ，再通过reader调用 readAsDataURL(file) 方法，FileReader 对象开始读取 file 文件的内容，并在读取完成后将其以 Data URL 的形式传递给 onload 事件处理函数;

fileUpload.addEventListener('change',function(e){
           const file=e.target.files[0];
           //新建一个FileReader对象, 01 序列
           //图片比较大
           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);//用于向 DOM（文档对象模型）中的父元素节点添加子元素节点的方法
             detect(image);//启动AI任务 功能模块化，封装出去
           }
           reader.readAsDataURL(file);
        });

通过id获取status的HTML元素，命名为status

const status=document.getElementById('status');

定义detect，开启检测图片的AI任务；

const detect=async(image)=>{
             status.textContent='分析中...';
             const detector=await pipeline("object-detection",
             "Xenova/detr-resnet-50");// model 实例化了detector对象
             const output=await detector(image.src,{
                threshold:0.1,
                percentage:true
             });
            //  console.log(output);
            output.forEach(renderBox);
        }

定义函数renderBox用于框出识别的物品；

functionrenderBox({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)+'%'
        })

创建一个span对象labelElement，用于显示AI识别出来物品的label；

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

将labelElement(物品名字)作为子元素节点加入boxElement(识别物品框)父节点元素，再将boxElement作为子元素节点加入 imageContainer(图像容器)父节点元素

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

代码

<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>nlp之图片识别，两种语言</title>
    <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: 8px16px;
        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就比div更好 页面中都主体内容 -->
    <!-- css选择器 -->
    <!-- main.container>label.custom-file-upload>input#file-upload+#image-container+p#status -->
    <mainclass="container">
       <labelfor="file-upload"class="custom-file-upload">
        <inputtype="file"accept="image/*"id="file-upload">
        上传图片
       </label>
       <divid="image-container"></div>
       <pid="status"></p>
    </main>
    <scripttype="module">
        //transformers npl 任务
        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];
           //新建一个FileReader对象, 01 序列
           //图片比较大
           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);//用于向 DOM（文档对象模型）中的父元素节点添加子元素节点的方法
             detect(image);//启动AI任务 功能模块化，封装出去
           }
           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");// model 实例化了detector对象
             const output=await detector(image.src,{
                threshold:0.1,
                percentage:true
             });
            //  console.log(output);
            output.forEach(renderBox);
        }
    functionrenderBox({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)+'%'
        })
        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>

检测图片：

效果图(执行前记得开外网)：

总结

编程效率永远是大厂程序员的追求，html的时候emmet快速输入语法，刻意练习；
前端素养：有不同的标签构成语义化的html结构(页面的基础)，例如：main 比div 优秀， label +input=>文件输入框， p=>段落标签；
css选择器：label=>标签选择器， .container=>类名选择器， #file-upload=>ID选择器， > 子选择器， + 兄弟选择器。

觉得本文对你有帮助？请分享给更多人
关注「React中文社区」加星标，每天进步

“在看和转发”就是最大的支持