-
-
-
-
-
-
-
+
+
+
+ 推理配置
+
+
+
+
+
- {{ model.display_name || model.name }}
- {{ formatFileSize(model.size) }}
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 检测统计
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ 检测统计
+
+
+
-
+
+
-
-
-
-
-
- 刷新模型列表
-
-
-
-
-
- {{ model.display_name }}
-
- 最新
-
-
-
-
+
+
+
+
-
+
+
{{ formatFileSize(model.size) }}
-
+ {{ model.display_name }}
+
+ 最新
+
+
+
+
- 已处理图片:
- {{ processedCount }}
-
-
- 总检测数:
- {{ totalDetections }}
-
-
- 平均置信度:
- {{ averageConfidence }}
-
-
- 处理时间:
- {{ processingTime }}ms
-
-
- 推理结果
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
-
+
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+ 已处理图片:
+ {{ processedCount }}
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ 总检测数:
+ {{ totalDetections }}
-
-
-
-
+
-
- ![]()
-
-
- 已标注
+
+
+
+
-
-
+
+
+
+
+
+
+ 平均置信度:
+ {{ averageConfidence }}
+
+
+ 处理时间:
+ {{ processingTime }}ms
+
+
+
+
+
+
+ 推理结果
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+
+
+
+
-
+ ![]()
+
+
-
+ 已标注
+
-
- {{ result.fileName }}
-
-
- {{ detection.class }} ({{ (detection.confidence * 100).toFixed(1) }}%)
-
-
+
-
+
{{ result.fileName }}
+
+
+ {{ detection.class }} ({{ (detection.confidence * 100).toFixed(1) }}%)
+
+
+{{ result.detections.length - 3 }} 更多
+
-
-
-
- ![]()
-
-
-
-
- {{ row.detections.length }}
-
-
-
-
-
- {{ detection.class }}
-
-
-
-
-
- {{ row.processingTime }}ms
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ ![]()
+
+
+
+
+ {{ row.detections.length }}
+
+
+
+
+
+ {{ detection.class }}
+
+
+
+
+
+ {{ row.processingTime }}ms
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- ![]()
-
-
- ![]()
-
-
-
-
+
+
+
+
+
+
+
+
+
+ 点击图片可放大查看
+ 点击图片可放大查看
+ 检测详情
-
{{ detection.class }}
@@ -414,13 +430,13 @@ const isLoadingModels = ref(false)
// 计算属性
const processedCount = computed(() => results.value.length)
-const totalDetections = computed(() =>
- results.value.reduce((sum, result) => sum + result.detections.length, 0)
+const totalDetections = computed(() =>
+ results.value.reduce((sum, result) => sum + result.detections.length, 0)
)
const averageConfidence = computed(() => {
const allDetections = results.value.flatMap(result => result.detections)
if (allDetections.length === 0) return '0.0%'
-
+
const avgConf = allDetections.reduce((sum, det) => sum + det.confidence, 0) / allDetections.length
return (avgConf * 100).toFixed(1) + '%'
})
@@ -439,10 +455,10 @@ const handleImageUpload = (file) => {
url: e.target.result,
name: file.name
})
-
+
// 自动进行单张推理
runSingleInference(file, e.target.result)
-
+
resolve(false) // 阻止默认上传
}
reader.readAsDataURL(file)
@@ -451,29 +467,35 @@ const handleImageUpload = (file) => {
const runSingleInference = async (file, imageUrl) => {
if (isProcessing.value) return
-
+
isProcessing.value = true
const startTime = Date.now()
-
+
try {
const config = {
confidence: inferenceConfig.confidence,
iou_threshold: inferenceConfig.iouThreshold,
save_results: true
}
-
+
const result = await predictImage(file, inferenceConfig.modelPath, config)
const endTime = Date.now()
-
+
// 处理真实检测结果
const detections = result.results.detections || []
-
+
// 获取标注图片URL
let annotatedImageUrl = null
if (result.results.annotated_images && result.results.annotated_images.length > 0) {
annotatedImageUrl = `http://localhost:8000${result.results.annotated_images[0].url}`
+ } else if (detections.length > 0) {
+ try {
+ annotatedImageUrl = await drawDetectionBoxes(imageUrl, detections)
+ } catch (e) {
+ console.warn('前端绘制检测框失败:', e)
+ }
}
-
+
const inferenceResult = {
id: result.prediction_id,
fileName: file.name,
@@ -484,11 +506,11 @@ const runSingleInference = async (file, imageUrl) => {
timestamp: new Date(),
modelUsed: result.results.model_used
}
-
+
results.value.unshift(inferenceResult)
-
+
ElMessage.success(`推理完成，检测到 ${detections.length} 个目标`)
-
+
} catch (error) {
ElMessage.error('推理失败')
console.error('推理错误:', error)
@@ -499,10 +521,10 @@ const runSingleInference = async (file, imageUrl) => {
const runBatchInference = async () => {
if (isProcessing.value || uploadedImages.value.length === 0) return
-
+
isProcessing.value = true
const startTime = Date.now()
-
+
try {
const files = uploadedImages.value.map(img => img.file)
const config = {
@@ -510,12 +532,12 @@ const runBatchInference = async () => {
iou_threshold: inferenceConfig.iouThreshold,
save_results: true
}
-
+
const result = await predictBatch(files, inferenceConfig.modelPath, config)
const endTime = Date.now()
-
+
ElMessage.success(`批量推理完成，处理了 ${result.results.processed_images} 张图片`)
-
+
} catch (error) {
ElMessage.error('批量推理失败')
} finally {
@@ -533,20 +555,126 @@ const showResultDetail = (result) => {
showDetailDialog.value = true
}
+let drawCanvas = null;
+let canvasCtx = null;
+
+// 初始化隐藏的绘制画布（不影响页面）
+const initDrawCanvas = () => {
+ if (drawCanvas) {
+ try { document.body.removeChild(drawCanvas); } catch (e) {}
+ drawCanvas = null;
+ canvasCtx = null;
+ }
+
+ drawCanvas = document.createElement('canvas');
+ drawCanvas.style.display = 'none'; // 完全隐藏
+ drawCanvas.style.position = 'absolute';
+ drawCanvas.style.top = '-9999px';
+ drawCanvas.style.left = '-9999px';
+ document.body.appendChild(drawCanvas);
+
+ try {
+ canvasCtx = drawCanvas.getContext('2d');
+ if (!canvasCtx) throw new Error('Canvas上下文获取失败');
+ } catch (err) {
+ console.error('Canvas初始化失败:', err);
+ canvasCtx = null;
+ throw err;
+ }
+};
+
+/**
+ * 在结果图上根据算法返回的 detections 绘制检测框（支持 bbox: x1, y1, x2, y2）
+ * @param {string} imageUrl - Base64 或可访问的图片 URL
+ * @param {Array} detections - 检测结果数组，每项含 class, confidence, bbox: { x1, y1, x2, y2 }
+ * @returns {Promise} 绘制后的 Base64 图片 URL
+ */
+const drawDetectionBoxes = (imageUrl, detections) => {
+ return new Promise((resolve, reject) => {
+ if (!detections || detections.length === 0) {
+ reject(new Error('检测框数组为空'))
+ return
+ }
+
+ try {
+ initDrawCanvas()
+ } catch (err) {
+ reject(err)
+ return
+ }
+ if (!canvasCtx) {
+ reject(new Error('Canvas 上下文失效'))
+ return
+ }
+
+ const img = new Image()
+ img.crossOrigin = 'anonymous'
+
+ img.onload = () => {
+ try {
+ drawCanvas.width = img.naturalWidth
+ drawCanvas.height = img.naturalHeight
+
+ canvasCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height)
+ canvasCtx.drawImage(img, 0, 0)
+
+ const lineWidth = Math.max(2, Math.min(4, img.naturalWidth / 400))
+ const fontSize = Math.max(12, Math.min(18, img.naturalWidth / 50))
+
+ detections.forEach((det) => {
+ const bbox = det.bbox || {}
+ const x1 = Number(bbox.x1) ?? 0
+ const y1 = Number(bbox.y1) ?? 0
+ const x2 = Number(bbox.x2) ?? 0
+ const y2 = Number(bbox.y2) ?? 0
+ const w = x2 - x1
+ const h = y2 - y1
+
+ const label = `${det.class || 'object'} ${((det.confidence ?? 0) * 100).toFixed(1)}%`
+
+ // 边框
+ canvasCtx.strokeStyle = '#00ff00'
+ canvasCtx.lineWidth = lineWidth
+ canvasCtx.strokeRect(x1, y1, w, h)
+
+ // 标签背景与文字
+ canvasCtx.font = `bold ${fontSize}px sans-serif`
+ const textMetrics = canvasCtx.measureText(label)
+ const textW = textMetrics.width
+ const textH = fontSize + 4
+ canvasCtx.fillStyle = 'rgba(0, 255, 0, 0.8)'
+ canvasCtx.fillRect(x1, y1 - textH - 2, textW + 8, textH + 4)
+ canvasCtx.fillStyle = '#000'
+ canvasCtx.fillText(label, x1 + 4, y1 - 4)
+ })
+
+ const annotatedUrl = drawCanvas.toDataURL('image/png', 0.95)
+ resolve(annotatedUrl)
+ } catch (err) {
+ console.error('绘制检测框失败:', err)
+ reject(err)
+ }
+ }
+
+ img.onerror = () => reject(new Error('图片加载失败'))
+ img.src = imageUrl
+ })
+}
+
const downloadResults = () => {
if (results.value.length === 0) return
-
+
// 生成检测结果CSV
const csvHeader = 'fileName,detectionCount,averageConfidence,processingTime\n'
const csvData = results.value.map(result => {
const avgConf = result.detections.reduce((sum, det) => sum + det.confidence, 0) / result.detections.length
return `${result.fileName},${result.detections.length},${avgConf.toFixed(3)},${result.processingTime}`
}).join('\n')
-
+
const csvContent = csvHeader + csvData
- const blob = new Blob([csvContent], { type: 'text/csv' })
+ const blob = new Blob([csvContent], {type: 'text/csv'})
saveAs(blob, `inference_results_${new Date().toISOString().split('T')[0]}.csv`)
-
+
ElMessage.success('结果已下载')
}
@@ -554,49 +682,49 @@ const loadAvailableModels = async () => {
try {
isLoadingModels.value = true
const modelsData = await getModels()
-
+
// 分离不同类型的模型
pretrainedModels.value = modelsData.models
- .filter(model => model.type === 'pretrained')
- .map(model => ({
- name: model.name,
- path: model.path,
- size: model.size,
- display_name: model.display_name
- }))
-
+ .filter(model => model.type === 'pretrained')
+ .map(model => ({
+ name: model.name,
+ path: model.path,
+ size: model.size,
+ display_name: model.display_name
+ }))
+
trainedModels.value = modelsData.models
- .filter(model => model.type === 'trained')
- .map(model => ({
- name: model.name,
- path: model.path,
- size: model.size,
- display_name: model.display_name,
- experiment_name: model.experiment_name,
- weight_type: model.weight_type,
- dataset: model.dataset,
- epochs: model.epochs,
- is_latest: model.is_latest,
- modified_time: model.modified_time
- }))
-
+ .filter(model => model.type === 'trained')
+ .map(model => ({
+ name: model.name,
+ path: model.path,
+ size: model.size,
+ display_name: model.display_name,
+ experiment_name: model.experiment_name,
+ weight_type: model.weight_type,
+ dataset: model.dataset,
+ epochs: model.epochs,
+ is_latest: model.is_latest,
+ modified_time: model.modified_time
+ }))
+
// 上传的自定义模型
customModels.value = modelsData.models
- .filter(model => model.type === 'uploaded')
- .map(model => ({
- name: model.name,
- path: model.path,
- size: model.size,
- display_name: model.display_name,
- modified_time: model.modified_time
- }))
-
+ .filter(model => model.type === 'uploaded')
+ .map(model => ({
+ name: model.name,
+ path: model.path,
+ size: model.size,
+ display_name: model.display_name,
+ modified_time: model.modified_time
+ }))
+
// 自动选择最新训练的模型（如果有的话）
if (trainedModels.value.length > 0 && trainedModels.value[0].is_latest) {
inferenceConfig.modelPath = trainedModels.value[0].path
ElMessage.success(`已自动选择最新训练的模型: ${trainedModels.value[0].display_name}`)
}
-
+
} catch (error) {
console.error('加载模型列表失败:', error)
ElMessage.error('加载模型列表失败')
@@ -620,7 +748,7 @@ const formatTime = (timestamp) => {
const diffMins = Math.floor(diffMs / 60000)
const diffHours = Math.floor(diffMs / 3600000)
const diffDays = Math.floor(diffMs / 86400000)
-
+
if (diffMins < 60) {
return `${diffMins}分钟前`
} else if (diffHours < 24) {
@@ -642,14 +770,14 @@ const showRealtimeSourceDialog = () => {
// 训练完成事件监听
const handleModelTrainingCompleted = (event) => {
- const { projectName } = event.detail
+ const {projectName} = event.detail
ElNotification({
title: '新模型可用',
message: `训练完成！模型 "${projectName}" 已添加到可选列表`,
type: 'success',
duration: 5000
})
-
+
// 自动刷新模型列表
loadAvailableModels()
}
@@ -657,7 +785,7 @@ const handleModelTrainingCompleted = (event) => {
// 生命周期
onMounted(() => {
loadAvailableModels()
-
+
// 监听训练完成事件
window.addEventListener('modelTrainingCompleted', handleModelTrainingCompleted)
})
@@ -761,7 +889,7 @@ onUnmounted(() => {
.result-card:hover {
transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.result-image {
@@ -780,7 +908,7 @@ onUnmounted(() => {
position: absolute;
top: 10px;
right: 10px;
- background: rgba(0,0,0,0.7);
+ background: rgba(0, 0, 0, 0.7);
color: white;
padding: 4px 8px;
border-radius: 4px;
@@ -857,7 +985,7 @@ onUnmounted(() => {
max-width: 100%;
max-height: 400px;
border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.detail-info h4 {
@@ -904,21 +1032,21 @@ onUnmounted(() => {
.inference-page {
padding: 10px;
}
-
+
.results-header {
flex-direction: column;
gap: 10px;
align-items: stretch;
}
-
+
.header-actions {
justify-content: space-between;
}
-
+
.result-card {
margin-bottom: 10px;
}
-
+
.result-image {
height: 150px;
}