哈喽,大家好,我是Fine。AI如今已经对我们影响越来越大了,也为我们带来了很多便利以及机会。今天为大家分享一篇前端如何和AI结合智能识别图片。
以下是正文:
当人工智能与前端技术融合时,可以创造出许多令人惊叹的应用和体验。在这样的融合中,前端技术负责用户界面的设计和交互,而人工智能则负责数据处理、分析和智能决策。以下是一些融合了AI和前端技术的介绍:
这些是AI与前端融合的一些常见应用,它们展示了人工智能和前端技术结合所带来的创新和便利。接下来让我们来一起去探索人工智能与前端技术结合的智能图像处理吧~
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选择器 -->
<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>
pipeline
是一个函数或对象,可用于执行数据处理管道或流水线的操作。env
是一个对象,可用于配置环境变量或其他相关的环境设置。import {pipeline,env} from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
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);
});
const status=document.getElementById('status');
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);
}
function renderBox({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);
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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: 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就比div更好 页面中都主体内容 -->
<!-- css选择器 -->
<!-- main.container>label.custom-file-upload>input#file-upload+#image-container+p#status -->
<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>
<script type="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);
}
function renderBox({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>
本文转自 https://juejin.cn/post/7359084920595480614
如有侵权,请联系删除。
还没有使用过我们刷题网站(https://fe.ecool.fun/)或者刷题小程序的同学,如果近期准备或者正在找工作,千万不要错过,题库主打题全和更新快哦~。
有会员购买、辅导咨询的小伙伴,可以通过下面的二维码,联系我们的小助手。