前言
在当今的技术环境中,人工智能(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(内容传送网络)中导入必要的模块。
pipeline
和env
是从@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上创建智能和交互式用户体验开启了广阔的可能性。