161 lines
5.1 KiB
HTML
161 lines
5.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
{% load static %}
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>AI图像检测</title>
|
||
|
|
<style>
|
||
|
|
img {
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
#imageModal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
background-color: rgba(0, 0, 0, 0.7);
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#modalContent {
|
||
|
|
max-width: 90%;
|
||
|
|
max-height: 90%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading img {
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>AI图像识别-对象检测</h1>
|
||
|
|
<label for="imageType">检测类型：</label>
|
||
|
|
<select id="imageType">
|
||
|
|
<option value="01">通用对象检测</option>
|
||
|
|
<option value="02">设备缺陷检测</option>
|
||
|
|
<option value="03">人员行为检测</option>
|
||
|
|
</select>
|
||
|
|
|
||
|
|
<input type="file" id="imageInput" accept="image/*">
|
||
|
|
<button onclick="detectImage()">检测图像</button>
|
||
|
|
<div id="result"></div>
|
||
|
|
|
||
|
|
<div id="imageModal">
|
||
|
|
<div id="modalContent">
|
||
|
|
<img id="modalImage" onclick="closeModal()" alt="Modal Image">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="loading" style="font-size: 30px; ">
|
||
|
|
<!-- <img src="{% static 'loading.gif' %}" alt="Loading...">-->
|
||
|
|
图像识别检测中...
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function detectImage() {
|
||
|
|
// 清除上次检测结果
|
||
|
|
const resultContainer = document.getElementById('result');
|
||
|
|
resultContainer.innerHTML = '';
|
||
|
|
|
||
|
|
const inputElement = document.getElementById('imageInput');
|
||
|
|
const file = inputElement.files[0];
|
||
|
|
|
||
|
|
if (!file) {
|
||
|
|
alert('请选择图像文件');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 获取选择的检测类型
|
||
|
|
const selectedType = document.getElementById('imageType').value;
|
||
|
|
|
||
|
|
// 显示加载动画
|
||
|
|
showLoading();
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append('image', file);
|
||
|
|
formData.append('type', selectedType);
|
||
|
|
|
||
|
|
fetch('http://192.168.1.13:8000/server/image_detect/', {
|
||
|
|
method: 'POST',
|
||
|
|
body: formData,
|
||
|
|
})
|
||
|
|
.then(response => response.json())
|
||
|
|
.then(data => {
|
||
|
|
// 隐藏加载动画
|
||
|
|
hideLoading();
|
||
|
|
|
||
|
|
// 显示检测结果
|
||
|
|
let data1 = JSON.parse(data);
|
||
|
|
|
||
|
|
// 显示时间戳信息
|
||
|
|
const timestampInfo = document.createElement('p');
|
||
|
|
timestampInfo.textContent = `检测的时间: ${data1.time}`;
|
||
|
|
resultContainer.appendChild(timestampInfo);
|
||
|
|
// 循环遍历每个检测到的对象
|
||
|
|
for (const obj of data1.obj_list) {
|
||
|
|
const objInfo = document.createElement('p');
|
||
|
|
objInfo.textContent = `检测出的对象: ${obj.code}[${obj.name}], 置信度: ${obj.score}, 区域坐标: (${obj.x1}, ${obj.y1}, ${obj.x2}, ${obj.y2})`;
|
||
|
|
resultContainer.appendChild(objInfo);
|
||
|
|
}
|
||
|
|
// 显示图像
|
||
|
|
const imageContainer = document.createElement('div');
|
||
|
|
imageContainer.innerHTML = `<img src="data:image/png;base64, ${data1.image}" style="width: auto; height: auto; max-width: 100%;
|
||
|
|
" alt="检测结果" onclick="openModal(this)">`;
|
||
|
|
resultContainer.appendChild(imageContainer);
|
||
|
|
|
||
|
|
|
||
|
|
})
|
||
|
|
.catch(error => {
|
||
|
|
console.error('错误:', error);
|
||
|
|
alert('图像检测过程中发生错误');
|
||
|
|
|
||
|
|
// 隐藏加载动画
|
||
|
|
hideLoading();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function showLoading() {
|
||
|
|
// 显示加载动画
|
||
|
|
const loadingElement = document.getElementById('loading');
|
||
|
|
loadingElement.style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function hideLoading() {
|
||
|
|
// 隐藏加载动画
|
||
|
|
const loadingElement = document.getElementById('loading');
|
||
|
|
loadingElement.style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
function openModal(imgElement) {
|
||
|
|
const modal = document.getElementById('imageModal');
|
||
|
|
const modalImage = document.getElementById('modalImage');
|
||
|
|
modalImage.src = imgElement.src;
|
||
|
|
modal.style.display = 'flex';
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
const modal = document.getElementById('imageModal');
|
||
|
|
modal.style.display = 'none';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|