hexone2086/m20_core_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加标注相关功能

Browse Source
This commit is contained in:
CaoWangrenbo
2025-10-26 14:25:30 +08:00
parent c8dfec6cf4
commit 856669de69
4 changed files with 795 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
templates/list_images.html
View File

@@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>Saved Images List</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js "></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Saved Images</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.0/socket.io.js"></script>
<style>
body {
font-family: Arial, sans-serif;
@@ -15,11 +17,12 @@
}
button {
padding: 8px 16px;
padding: 10px 15px;
margin-right: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
@@ -97,6 +100,8 @@
<th>ID</th>
<th>Left Image</th>
<th>Right Image</th>
<th>Left Marked Image</th> <!-- 新增标注图片列 -->
<th>Right Marked Image</th> <!-- 新增标注图片列 -->
<th>Timestamp</th>
<th>Comment</th>
<th>Actions</th>
@@ -138,6 +143,7 @@
row.insertCell(0).innerHTML = `<input type="checkbox" class="selectCheckbox" data-id="${image.id}">`;
row.insertCell(1).textContent = image.id;
// 原图
const leftCell = row.insertCell(2);
const leftImg = document.createElement('img');
// 修改这里：使用 Flask 静态文件路径
@@ -156,10 +162,35 @@
rightImg.onerror = function () { this.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="75" viewBox="0 0 100 75"><rect width="100" height="75" fill="%23eee"/><text x="50" y="40" font-family="Arial" font-size="12" fill="%23999" text-anchor="middle">No Image</text></svg>'; };
rightCell.appendChild(rightImg);
row.insertCell(4).textContent = new Date(image.timestamp * 1000).toISOString();
// 标注图片
const leftMarkedCell = row.insertCell(4);
if (image.left_marked_filename) {
const leftMarkedImg = document.createElement('img');
leftMarkedImg.src = `/static/received/left_marked/${image.left_marked_filename}`;
leftMarkedImg.alt = "Left Marked Image";
leftMarkedImg.className = 'image-preview';
leftMarkedImg.onerror = function () { this.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="75" viewBox="0 0 100 75"><rect width="100" height="75" fill="%23eee"/><text x="50" y="40" font-family="Arial" font-size="12" fill="%23999" text-anchor="middle">No Image</text></svg>'; };
leftMarkedCell.appendChild(leftMarkedImg);
} else {
leftMarkedCell.textContent = "N/A";
}
// 添加可编辑的comment单元格
const commentCell = row.insertCell(5);
const rightMarkedCell = row.insertCell(5);
if (image.right_marked_filename) {
const rightMarkedImg = document.createElement('img');
rightMarkedImg.src = `/static/received/right_marked/${image.right_marked_filename}`;
rightMarkedImg.alt = "Right Marked Image";
rightMarkedImg.className = 'image-preview';
rightMarkedImg.onerror = function () { this.src = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="75" viewBox="0 0 100 75"><rect width="100" height="75" fill="%23eee"/><text x="50" y="40" font-family="Arial" font-size="12" fill="%23999" text-anchor="middle">No Image</text></svg>'; };
rightMarkedCell.appendChild(rightMarkedImg);
} else {
rightMarkedCell.textContent = "N/A";
}
row.insertCell(6).textContent = new Date(image.timestamp * 1000).toISOString();
// 添加可编辑的 comment 单元格
const commentCell = row.insertCell(7);
const commentInput = document.createElement('input');
commentInput.type = 'text';
commentInput.value = image.comment || '';
@@ -171,11 +202,11 @@
});
commentCell.appendChild(commentInput);
row.insertCell(6).innerHTML = `<button onclick="deleteImage(${image.id})">Delete</button>`;
row.insertCell(8).innerHTML = `<button onclick="deleteImage(${image.id})">Delete</button>`;
});
}
// 添加更新comment的函数
// 添加更新 comment 的函数
async function updateComment(id, comment) {
try {
const response = await fetch('/api/images/comment', {