前言
在当今的技术环境中，人工智能（AI）与前端开发的融合越来越普遍。其中一个显著的应用是在图像识别中，AI算法可以检测和标记图像中的对象，增强用户体验，并在网站或应用程序上实现创新功能。
下面将给出完成图片识别功能简易代码示例与讲解：
先决条件： 在继续之前，请确保您对HTML、CSS和JavaScript有基本的了解。另外，熟悉与AI和图像处理相关的概念将会有所帮助。
Step1：导入必要的模块
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：文件上传事件监听器
const fileUpload = document.getElementById('file-upload');
const imageContainer = document.getElementById('image-container')
fileUpload.addEventListener('change', function (e) {
// 当选择文件时触发的事件监听器
});
- 此部分代码从HTML文档中选择文件上传输入框和图像容器。
- 它向文件上传输入框添加了一个事件监听器，当选择文件时触发一个函数。
Step3：FileReader 读取上传的图像
const reader = new FileReader();
reader.onload = function (e2) {
// 文件读取完成时执行的函数
};
reader.readAsDataURL(file)
- 当选择文件时，创建了一个
FileReader对象。 - 一个
onload事件监听器被附加到读取器上，当文件读取完成时执行一个函数。 readAsDataURL方法在读取器上被调用，将所选文件的内容读取为数据URL。
Step4：显示上传的图像
javascriptCopy code
const image = document.createElement('img');
image.src = e2.target.result;
imageContainer.appendChild(image)
- 在
onload函数内部，创建了一个<img>元素。 - 图像的
src属性设置为读取文件作为数据URL的结果。 - 图像元素被追加到HTML文档中的图像容器中。
Step5：启动AI检测
detect(image)
- 在显示上传的图像后，使用上传的图像作为参数调用
detect函数。
Step6：使用AI模型进行对象检测
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：渲染检测到的框
output.forEach(renderBox)
- 对输出中检测到的每个对象，调用
renderBox函数以渲染边界框。
Step8：渲染边界框
function renderBox({ box, label }) {
// 渲染边界框的函数
}
renderBox函数接受一个具有box（边界框的坐标）和label（检测到的对象的标签）的对象。- 在函数内部，创建一个
<div>元素来表示边界框。 - 应用 CSS 样式来根据检测到的对象的坐标来定位和样式化边界框。
- 创建一个
<span>元素来在边界框内显示检测到的对象的标签。
完整代码
<!--
* @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上创建智能和交互式用户体验开启了广阔的可能性。
如何学习AI大模型？
我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。
第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；
第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；
第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；
第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；
第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；
第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；
第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。
👉学会后的收获：👈
• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；
• 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；
• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；
• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。
1.AI大模型学习路线图
2.100套AI大模型商业化落地方案
3.100集大模型视频教程
4.200本大模型PDF书籍
5.LLM面试题合集
6.AI产品经理资源合集
👉获取方式：
😝有需要的小伙伴，可以保存图片到wx扫描二v码免费领取【保证100%免费】🆓
8481
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
