前言
在信息时代，Web 页面成为我们与世界交互的重要窗口。AI 技术的迅猛发展，特别是图像识别技术，为 Web 页面带来了革命性的变化。通过在 Web 页面上实现图像识别，我们即将迈入一个更加智能与便捷的时代。这种技术不仅使网页能够理解图像内容，还为用户提供了前所未有的互动体验。本文将带你一步步实现这一功能，揭开 AI 赋能 Web 页面的神秘面纱。
具体步骤
HTML 部分
首先，我们需要创建一个简单的 HTML 框架来实现文件上传和显示图片。我们可以通过 Emmet 语法快速生成以下代码：
main.container>label.custom-file-upload>input#file-upload+div#image-container+p#status
生成的 HTML 代码如下：
<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>
在这段代码中，我们使用了 main 标签而不是 div，因为 main 更具语义化，表示页面的主体内容。label 标签用于关联文件上传输入框，input 标签的 type 属性为 file，并且通过 accept 属性限制只接收图像文件。
JavaScript 部分
JavaScript 部分是实现图像识别功能的核心。我们将分三步来实现这一功能。
第一步：引入库并处理文件输入
我们首先需要引入远程的 transformers 库，并禁止使用本地模型：
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);
});
在这段代码中，当用户选择文件时，会触发 change 事件，通过 FileReader 对象读取文件，并在页面上显示图片。
第二步：AI 对象检测
为了实现对象检测，我们需要创建一个检测器并处理图像：
const status = document.getElementById('status');
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);
}
在这段代码中，我们通过异步函数 detect 调用对象检测模型，并在页面上显示“分析中”的提示信息。
第三步：渲染检测结果
最后，我们需要在图像上绘制检测到的对象边界框并显示标签：
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);
}
在这段代码中，我们创建了一个 div 元素作为边界框，并将其添加到图像上。同时，我们还创建了一个 span 元素用于显示检测到的对象标签。
CSS 部分
为了使页面更美观，我们需要添加一些基本的 CSS 样式：
.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;
}
我们详细介绍了如何使用 HTML、JavaScript 和 CSS 实现在 Web 页面上进行 AI 图像识别。我们分步骤实现了文件读取、AI 分析和结果渲染。希望这些内容能为你的项目提供帮助，助你迈向更加智能化的未来。通过灵活的封装和模块化思想，我们可以轻松实现复杂的功能，并提升 Web 页面的互动性和智能化水平。
插入 PlugLink 的巧妙之处
在实现上述功能时，我们可以利用 PlugLink 来管理和部署我们的 AI 插件。PlugLink 作为一个开放的插件平台，能够让开发者轻松创建、管理和共享插件，从而提升开发效率和代码复用性。例如，我们可以将上面的图像识别功能打包成一个 PlugLink 插件，通过 PlugLink 平台进行分发和管理。
PlugLink 的插件开发标准方法非常简单，按照 PlugLink 提供的示例代码和开发文档，可以快速将现有的功能打包成插件。并且，PlugLink 支持多种插件的无缝集成和自动化工作流，让你的 Web 应用更具灵活性和扩展性。
目前发布了开源版和应用版，开源版下载地址：
Github地址：https://github.com/zhengqia/PlugLink
Gitcode地址：https://gitcode.com/zhengiqa8/PlugLink/overview
Gitee地址：https://gitee.com/xinyizq/PlugLink
应用版下载地址：
链接：https://pan.baidu.com/s/19tinAQNFDxs-041Zn7YwcQ?pwd=PLUG
提取码：PLUG