627 lines
22 KiB
HTML
627 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>人工标注</title>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
margin: 20px;
|
|||
|
|
background-color: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background-color: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
padding-bottom: 15px;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-container {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.canvas-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#canvas {
|
|||
|
|
border: none;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.controls {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
padding: 15px;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-buttons {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-btn {
|
|||
|
|
padding: 10px 15px;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: bold;
|
|||
|
|
transition: all 0.2s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-btn:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label-btn.active {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-positive {
|
|||
|
|
background-color: #28a745;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-negative {
|
|||
|
|
background-color: #dc3545;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-neutral {
|
|||
|
|
background-color: #6c757d;
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-unclear {
|
|||
|
|
background-color: #ffc107;
|
|||
|
|
color: black;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #007bff;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-primary:hover {
|
|||
|
|
background-color: #0056b3;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #6c757d;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-size: 16px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
display: inline-block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn-secondary:hover {
|
|||
|
|
background-color: #545b62;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detection-list {
|
|||
|
|
margin-top: 20px;
|
|||
|
|
max-height: 300px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detection-item {
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.detection-item.active {
|
|||
|
|
background-color: #e9f7ef;
|
|||
|
|
border-color: #28a745;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-panel {
|
|||
|
|
background-color: #e9f7ef;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.instructions {
|
|||
|
|
background-color: #fff3cd;
|
|||
|
|
padding: 15px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status {
|
|||
|
|
padding: 10px;
|
|||
|
|
background-color: #d1ecf1;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="header">
|
|||
|
|
<h1>人工标注</h1>
|
|||
|
|
<a href="/list" class="btn-secondary">返回图片列表</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-panel">
|
|||
|
|
<h3>图像信息</h3>
|
|||
|
|
<p><strong>图像ID:</strong> <span id="image-id"></span></p>
|
|||
|
|
<p><strong>时间戳:</strong> <span id="image-timestamp"></span></p>
|
|||
|
|
<p><strong>备注:</strong> <span id="image-comment"></span></p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- <div class="instructions">
|
|||
|
|
<h3>操作说明</h3>
|
|||
|
|
<ul>
|
|||
|
|
<li>选择一个目标类别</li>
|
|||
|
|
<li>在图像上按住鼠标左键拖拽绘制矩形框</li>
|
|||
|
|
<li>点击已绘制的框可选中并编辑</li>
|
|||
|
|
<li>按 Delete 键删除选中的框</li>
|
|||
|
|
<li>完成标注后点击"保存标注结果"</li>
|
|||
|
|
</ul>
|
|||
|
|
</div> -->
|
|||
|
|
|
|||
|
|
<div class="image-container">
|
|||
|
|
<div class="canvas-wrapper">
|
|||
|
|
<canvas id="canvas"></canvas>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="controls">
|
|||
|
|
<h3>目标类别</h3>
|
|||
|
|
<div class="label-buttons">
|
|||
|
|
<button class="label-btn btn-positive" data-id="1" data-label="caisson">弹药箱 (1)</button>
|
|||
|
|
<button class="label-btn btn-negative" data-id="2" data-label="soldier">士兵 (2)</button>
|
|||
|
|
<button class="label-btn btn-neutral" data-id="3" data-label="gun">枪支 (3)</button>
|
|||
|
|
<button class="label-btn btn-unclear" data-id="4" data-label="number">数字牌 (4)</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="status">
|
|||
|
|
<p>当前状态: <span id="status-text">请选择一个目标类别开始标注</span></p>
|
|||
|
|
<p>当前选中类别: <span id="selected-label">无</span></p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button class="btn-primary" id="save-btn">保存标注结果</button>
|
|||
|
|
<button class="btn-primary" id="clear-btn">清空所有标注</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="detection-list">
|
|||
|
|
<h3>已标注目标 (<span id="detection-count">0</span>)</h3>
|
|||
|
|
<div id="detections-container"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 从URL参数获取图像ID
|
|||
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|||
|
|
const imageId = urlParams.get('id');
|
|||
|
|
const side = urlParams.get('side') || 'left';
|
|||
|
|
|
|||
|
|
// 全局变量
|
|||
|
|
let canvas = null;
|
|||
|
|
let currentImageData = null;
|
|||
|
|
let selectedLabel = null;
|
|||
|
|
let detections = []; // 存储所有检测框
|
|||
|
|
let isDrawing = false;
|
|||
|
|
let startX, startY;
|
|||
|
|
let rect = null;
|
|||
|
|
|
|||
|
|
// 页面加载时初始化
|
|||
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|||
|
|
if (!imageId) {
|
|||
|
|
alert('缺少图像ID参数');
|
|||
|
|
window.location.href = '/list';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.currentSide = side;
|
|||
|
|
document.querySelector('h1').textContent = `人工标注 (${side === 'left' ? '左侧' : '右侧'}图像)`;
|
|||
|
|
|
|||
|
|
// 初始化Fabric.js画布
|
|||
|
|
canvas = new fabric.Canvas('canvas', {
|
|||
|
|
selection: false,
|
|||
|
|
preserveObjectStacking: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 设置画布事件
|
|||
|
|
setupCanvasEvents();
|
|||
|
|
|
|||
|
|
// 加载图像数据
|
|||
|
|
loadImageData(imageId, side);
|
|||
|
|
|
|||
|
|
// 绑定按钮事件
|
|||
|
|
document.getElementById('save-btn').addEventListener('click', saveManualAnnotations);
|
|||
|
|
document.getElementById('clear-btn').addEventListener('click', clearAllAnnotations);
|
|||
|
|
|
|||
|
|
// 绑定标签按钮事件
|
|||
|
|
document.querySelectorAll('.label-btn').forEach(button => {
|
|||
|
|
button.addEventListener('click', function () {
|
|||
|
|
// 移除其他按钮的激活状态
|
|||
|
|
document.querySelectorAll('.label-btn').forEach(btn => {
|
|||
|
|
btn.classList.remove('active');
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 添加当前按钮的激活状态
|
|||
|
|
this.classList.add('active');
|
|||
|
|
|
|||
|
|
// 记录选中的标签
|
|||
|
|
selectedLabel = {
|
|||
|
|
id: parseInt(this.getAttribute('data-id')),
|
|||
|
|
label: this.getAttribute('data-label')
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 更新显示
|
|||
|
|
document.getElementById('selected-label').textContent =
|
|||
|
|
`${selectedLabel.label} (${selectedLabel.id})`;
|
|||
|
|
document.getElementById('status-text').textContent =
|
|||
|
|
`已选择 ${selectedLabel.label}，现在可以在图像上绘制标注框`;
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 键盘事件处理
|
|||
|
|
document.addEventListener('keydown', function (e) {
|
|||
|
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|||
|
|
const activeObject = canvas.getActiveObject();
|
|||
|
|
if (activeObject && activeObject.detectionId !== undefined) {
|
|||
|
|
// 删除检测框
|
|||
|
|
const detectionId = activeObject.detectionId;
|
|||
|
|
detections = detections.filter(d => d.id !== detectionId);
|
|||
|
|
canvas.remove(activeObject);
|
|||
|
|
updateDetectionsList();
|
|||
|
|
document.getElementById('detection-count').textContent = detections.length;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 设置画布事件
|
|||
|
|
function setupCanvasEvents() {
|
|||
|
|
canvas.on('mouse:down', function (options) {
|
|||
|
|
if (!selectedLabel) {
|
|||
|
|
alert('请先选择一个目标类别');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const pointer = canvas.getPointer(options.e);
|
|||
|
|
startX = pointer.x;
|
|||
|
|
startY = pointer.y;
|
|||
|
|
isDrawing = true;
|
|||
|
|
|
|||
|
|
// 创建矩形对象
|
|||
|
|
rect = new fabric.Rect({
|
|||
|
|
left: startX,
|
|||
|
|
top: startY,
|
|||
|
|
width: 0,
|
|||
|
|
height: 0,
|
|||
|
|
fill: 'rgba(0,0,0,0)',
|
|||
|
|
stroke: getColorForLabel(selectedLabel.id),
|
|||
|
|
strokeWidth: 2,
|
|||
|
|
selectable: true,
|
|||
|
|
hasControls: true,
|
|||
|
|
hasBorders: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
canvas.add(rect);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
canvas.on('mouse:move', function (options) {
|
|||
|
|
if (!isDrawing) return;
|
|||
|
|
|
|||
|
|
const pointer = canvas.getPointer(options.e);
|
|||
|
|
const width = pointer.x - startX;
|
|||
|
|
const height = pointer.y - startY;
|
|||
|
|
|
|||
|
|
rect.set({
|
|||
|
|
width: width,
|
|||
|
|
height: height
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
canvas.renderAll();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
canvas.on('mouse:up', function () {
|
|||
|
|
if (!isDrawing) return;
|
|||
|
|
isDrawing = false;
|
|||
|
|
|
|||
|
|
// 确保矩形有最小尺寸
|
|||
|
|
if (Math.abs(rect.width) < 5 || Math.abs(rect.height) < 5) {
|
|||
|
|
canvas.remove(rect);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 标准化矩形（确保宽度和高度为正）
|
|||
|
|
if (rect.width < 0) {
|
|||
|
|
rect.set({ left: rect.left + rect.width, width: Math.abs(rect.width) });
|
|||
|
|
}
|
|||
|
|
if (rect.height < 0) {
|
|||
|
|
rect.set({ top: rect.top + rect.height, height: Math.abs(rect.height) });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 添加标签文本
|
|||
|
|
const text = new fabric.Text(`${selectedLabel.label} (${selectedLabel.id})`, {
|
|||
|
|
left: rect.left,
|
|||
|
|
top: rect.top - 15,
|
|||
|
|
fontSize: 14,
|
|||
|
|
fill: getColorForLabel(selectedLabel.id),
|
|||
|
|
selectable: false
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
canvas.add(text);
|
|||
|
|
|
|||
|
|
// 为矩形添加唯一ID并关联文本
|
|||
|
|
const detectionId = Date.now(); // 简单的唯一ID生成
|
|||
|
|
rect.set({
|
|||
|
|
detectionId: detectionId,
|
|||
|
|
labelText: text
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 保存检测信息
|
|||
|
|
const detection = {
|
|||
|
|
id: detectionId,
|
|||
|
|
categoryId: selectedLabel.id,
|
|||
|
|
label: selectedLabel.label,
|
|||
|
|
bbox: [
|
|||
|
|
Math.round(rect.left * 999 / canvas.width),
|
|||
|
|
Math.round(rect.top * 999 / canvas.height),
|
|||
|
|
Math.round((rect.left + rect.width) * 999 / canvas.width),
|
|||
|
|
Math.round((rect.top + rect.height) * 999 / canvas.height)
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
detections.push(detection);
|
|||
|
|
updateDetectionsList();
|
|||
|
|
document.getElementById('detection-count').textContent = detections.length;
|
|||
|
|
|
|||
|
|
// 选中新创建的矩形
|
|||
|
|
canvas.setActiveObject(rect);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 对象修改事件
|
|||
|
|
canvas.on('object:modified', function (options) {
|
|||
|
|
const modifiedObject = options.target;
|
|||
|
|
if (modifiedObject.detectionId !== undefined) {
|
|||
|
|
// 更新对应的检测信息
|
|||
|
|
const detection = detections.find(d => d.id === modifiedObject.detectionId);
|
|||
|
|
if (detection) {
|
|||
|
|
detection.bbox = [
|
|||
|
|
Math.round(modifiedObject.left * 999 / canvas.width),
|
|||
|
|
Math.round(modifiedObject.top * 999 / canvas.height),
|
|||
|
|
Math.round((modifiedObject.left + modifiedObject.width) * 999 / canvas.width),
|
|||
|
|
Math.round((modifiedObject.top + modifiedObject.height) * 999 / canvas.height)
|
|||
|
|
];
|
|||
|
|
updateDetectionsList();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新标签文本位置
|
|||
|
|
if (modifiedObject.labelText) {
|
|||
|
|
modifiedObject.labelText.set({
|
|||
|
|
left: modifiedObject.left,
|
|||
|
|
top: modifiedObject.top - 15
|
|||
|
|
});
|
|||
|
|
canvas.renderAll();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 根据标签ID获取颜色
|
|||
|
|
function getColorForLabel(id) {
|
|||
|
|
const colorMap = {
|
|||
|
|
1: '#28a745', // 绿色 - 弹药箱
|
|||
|
|
2: '#dc3545', // 红色 - 士兵
|
|||
|
|
3: '#6c757d', // 灰色 - 枪支
|
|||
|
|
4: '#ffc107' // 黄色 - 数字牌
|
|||
|
|
};
|
|||
|
|
return colorMap[id] || '#000000';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载图像数据
|
|||
|
|
async function loadImageData(id, side) {
|
|||
|
|
try {
|
|||
|
|
const response = await fetch('/api/images');
|
|||
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|||
|
|
const images = await response.json();
|
|||
|
|
|
|||
|
|
// 查找指定ID的图像
|
|||
|
|
const image = images.find(img => img.id == id);
|
|||
|
|
if (!image) {
|
|||
|
|
throw new Error('未找到指定的图像');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
currentImageData = image;
|
|||
|
|
|
|||
|
|
// 显示图像信息
|
|||
|
|
document.getElementById('image-id').textContent = image.id;
|
|||
|
|
document.getElementById('image-timestamp').textContent = new Date(image.timestamp * 1000).toISOString();
|
|||
|
|
document.getElementById('image-comment').textContent = image.comment || '无';
|
|||
|
|
|
|||
|
|
// 根据side参数决定加载哪一侧的图像
|
|||
|
|
const imagePath = side === 'left'
|
|||
|
|
? `/static/received/left/${image.left_filename}`
|
|||
|
|
: `/static/received/right/${image.right_filename}`;
|
|||
|
|
|
|||
|
|
const imageInfo = side === 'left'
|
|||
|
|
? `左摄像头图像: ${image.left_filename}`
|
|||
|
|
: `右摄像头图像: ${image.right_filename}`;
|
|||
|
|
|
|||
|
|
// 更新图像信息显示
|
|||
|
|
document.querySelector('.info-panel h3').textContent = imageInfo;
|
|||
|
|
|
|||
|
|
// 加载图像到画布
|
|||
|
|
fabric.Image.fromURL(imagePath, function (img) {
|
|||
|
|
// 设置画布尺寸
|
|||
|
|
const maxWidth = 800;
|
|||
|
|
const maxHeight = 600;
|
|||
|
|
let width = img.width;
|
|||
|
|
let height = img.height;
|
|||
|
|
|
|||
|
|
// 按比例缩放
|
|||
|
|
if (width > maxWidth || height > maxHeight) {
|
|||
|
|
const ratio = Math.min(maxWidth / width, maxHeight / height);
|
|||
|
|
width = width * ratio;
|
|||
|
|
height = height * ratio;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
canvas.setDimensions({ width: width, height: height });
|
|||
|
|
img.set({ selectable: false, evented: false });
|
|||
|
|
img.scaleToWidth(width);
|
|||
|
|
img.scaleToHeight(height);
|
|||
|
|
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
|
|||
|
|
|
|||
|
|
// 如果已有机器标注结果，则加载显示
|
|||
|
|
// loadMachineDetections(image, side);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error loading image data:', error);
|
|||
|
|
alert('加载图像数据失败: ' + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 加载机器标注结果
|
|||
|
|
function loadMachineDetections(image, side) {
|
|||
|
|
// if (image.manual_detections && image.manual_detections !== "[]") {
|
|||
|
|
// try {
|
|||
|
|
// const manualDetections = JSON.parse(image.manual_detections);
|
|||
|
|
// if (Array.isArray(manualDetections) && manualDetections.length > 0) {
|
|||
|
|
// // 加载人工标注结果到画布
|
|||
|
|
// loadDetectionsToCanvas(manualDetections);
|
|||
|
|
// document.getElementById('status-text').textContent =
|
|||
|
|
// '已加载人工标注结果，可继续编辑';
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
// } catch (e) {
|
|||
|
|
// console.error('Error parsing manual detections:', e);
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新检测列表显示
|
|||
|
|
function updateDetectionsList() {
|
|||
|
|
const container = document.getElementById('detections-container');
|
|||
|
|
container.innerHTML = '';
|
|||
|
|
|
|||
|
|
if (detections.length === 0) {
|
|||
|
|
container.innerHTML = '<p>暂无标注目标</p>';
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
detections.forEach(detection => {
|
|||
|
|
const item = document.createElement('div');
|
|||
|
|
item.className = 'detection-item';
|
|||
|
|
item.innerHTML = `
|
|||
|
|
<strong>${detection.label} (${detection.categoryId})</strong><br>
|
|||
|
|
边界框: [${detection.bbox.join(', ')}]
|
|||
|
|
`;
|
|||
|
|
container.appendChild(item);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 清空所有标注
|
|||
|
|
function clearAllAnnotations() {
|
|||
|
|
if (confirm('确定要清空所有标注吗？')) {
|
|||
|
|
// 删除画布上的所有对象（除了背景图像）
|
|||
|
|
const objects = canvas.getObjects();
|
|||
|
|
objects.forEach(obj => {
|
|||
|
|
if (obj !== canvas.backgroundImage) {
|
|||
|
|
canvas.remove(obj);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 清空检测数据
|
|||
|
|
detections = [];
|
|||
|
|
updateDetectionsList();
|
|||
|
|
document.getElementById('detection-count').textContent = '0';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存人工标注结果
|
|||
|
|
async function saveManualAnnotations() {
|
|||
|
|
if (!currentImageData) {
|
|||
|
|
alert('图像数据未加载完成');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 构造与机器标注格式一致的JSON数据
|
|||
|
|
const annotationData = {
|
|||
|
|
detections: detections.map(d => ({
|
|||
|
|
id: d.categoryId,
|
|||
|
|
label: d.label,
|
|||
|
|
bbox: d.bbox
|
|||
|
|
}))
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 发送请求更新标注结果，包含side参数
|
|||
|
|
const response = await fetch('/api/images/manual-detections', {
|
|||
|
|
method: 'PUT',
|
|||
|
|
headers: {
|
|||
|
|
'Content-Type': 'application/json'
|
|||
|
|
},
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
id: currentImageData.id,
|
|||
|
|
side: window.currentSide, // 添加side参数
|
|||
|
|
detections: annotationData.detections
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!response.ok) {
|
|||
|
|
const errorData = await response.json().catch(() => ({ error: response.statusText }));
|
|||
|
|
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const result = await response.json();
|
|||
|
|
alert('人工标注结果已保存');
|
|||
|
|
|
|||
|
|
// 返回图片列表页面
|
|||
|
|
window.location.href = '/list';
|
|||
|
|
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('Error saving manual annotations:', error);
|
|||
|
|
alert('保存失败: ' + error.message);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|