transformer介绍
请打开魔法再运行
<!DOCTYPE html>
<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 class="container">
<label for="file-upload" class="custom-file-upload">
<!-- input#file-upload -->
<!-- <input type="text" id="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 nlp 任务
import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0";
env.allowLocalModels = false;
const fileUplod = document.getElementById('file-upload');
const imageContainer = document.getElementById('image-container');
fileUplod.addEventListener('change', (e) => {
// console.log(e.target.files[0]);
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);
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 图片对象检测
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: '#FF0000',
borderWidth: '1px',
borderStyle: 'solid',
left: 100 * xmin + '%',
top: 100 * ymin + '%',
width: 100 * (xmax - xmin) + '%',
height: 100 * (ymax - ymin) + '%'
})
imageContainer.appendChild(boxElement);
const labelElement = document.createElement('span');
labelElement.textContent = label;
labelElement.className = 'bounding-box-label';
labelElement.style.backgroundColor = '#FF0000';
boxElement.appendChild(labelElement);
imageContainer.appendChild(boxElement);
}
</script>
</body>
</html>