Tangledup-ai/sam3_local
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

通用分割

Browse Source
This commit is contained in:
quant
2026-02-18 16:54:52 +08:00
parent bad6bfa34b
commit f7c73fa57e
5 changed files with 75 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
static/admin.html
View File

@@ -653,22 +653,87 @@
<i :class="segmentResult.status === 'success' ? 'fas fa-check-circle' : 'fas fa-exclamation-circle'" class="text-xl"></i>
<div>
<h4 class="font-bold">{{ segmentResult.status === 'success' ? '分割成功' : '分割失败' }}</h4>
<p class="text-sm opacity-90">{{ segmentResult.message }}</p>
<p class="text-sm opacity-90">{{ segmentResult.message || (segmentResult.status === 'success' ? '图像分割任务已完成' : '发生未知错误') }}</p>
</div>
</div>
<!-- Summary Stats Card -->
<div v-if="segmentResult.status === 'success'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex items-center gap-4">
<div class="w-12 h-12 bg-blue-50 text-blue-600 rounded-xl flex items-center justify-center text-xl">
<i class="fas fa-bullseye"></i>
</div>
<div>
<p class="text-sm text-slate-500 font-medium">检测数量 (Count)</p>
<h3 class="text-2xl font-bold text-slate-800">{{ segmentResult.detected_count || 0 }}</h3>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex items-center gap-4">
<div class="w-12 h-12 bg-purple-50 text-purple-600 rounded-xl flex items-center justify-center text-xl">
<i class="fas fa-chart-line"></i>
</div>
<div>
<p class="text-sm text-slate-500 font-medium">最高置信度 (Max Score)</p>
<h3 class="text-2xl font-bold text-slate-800">
{{ segmentResult.scores && segmentResult.scores.length > 0 ? (Math.max(...segmentResult.scores) * 100).toFixed(1) + '%' : '-' }}
</h3>
</div>
</div>
<div class="bg-white rounded-2xl p-6 shadow-sm border border-slate-100 flex items-center gap-4">
<div class="w-12 h-12 bg-orange-50 text-orange-600 rounded-xl flex items-center justify-center text-xl">
<i class="fas fa-layer-group"></i>
</div>
<div>
<p class="text-sm text-slate-500 font-medium">平均置信度 (Avg)</p>
<h3 class="text-2xl font-bold text-slate-800">
{{ segmentResult.scores && segmentResult.scores.length > 0 ? ((segmentResult.scores.reduce((a,b)=>a+b,0) / segmentResult.scores.length) * 100).toFixed(1) + '%' : '-' }}
</h3>
</div>
</div>
</div>
<!-- Result Visualization -->
<div v-if="segmentResult.visualization_url" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<div v-if="segmentResult.result_image_url || segmentResult.visualization_url" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
<i class="fas fa-image text-blue-500"></i>
可视化结果
</h3>
<div class="rounded-xl overflow-hidden border border-slate-200 cursor-pointer" @click="previewImage(segmentResult.visualization_url)">
<img :src="segmentResult.visualization_url" class="w-full h-auto">
<div class="rounded-xl overflow-hidden border border-slate-200 bg-slate-50 cursor-pointer relative group"
@click="previewImage(segmentResult.result_image_url || segmentResult.visualization_url)">
<img :src="segmentResult.result_image_url || segmentResult.visualization_url" class="w-full h-auto object-contain max-h-[600px] mx-auto">
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
<span class="bg-black/60 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm">
<i class="fas fa-search-plus mr-2"></i>点击预览大图
</span>
</div>
</div>
<div v-if="segmentResult.detected_count === 0" class="mt-4 p-4 bg-yellow-50 text-yellow-700 rounded-xl text-sm border border-yellow-100 flex items-start gap-3">
<i class="fas fa-info-circle mt-0.5"></i>
<div>
<p class="font-bold">未检测到目标</p>
<p class="opacity-90 mt-1">当前 Prompt 可能未匹配到图像中的任何物体，或者置信度阈值 ({{ segmentConfidence }}) 设置过高。建议尝试降低阈值或更换 Prompt。</p>
</div>
</div>
</div>
<!-- Segmented Objects Grid -->
<!-- Scores List -->
<div v-if="segmentResult.scores && segmentResult.scores.length > 0" class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
<i class="fas fa-list-ol text-green-500"></i>
检测详情 (Scores)
</h3>
<div class="flex flex-wrap gap-3">
<div v-for="(score, index) in segmentResult.scores" :key="index"
class="bg-slate-50 border border-slate-200 rounded-lg px-3 py-2 flex flex-col items-center min-w-[80px]">
<span class="text-xs text-slate-400 font-mono mb-1">#{{ index + 1 }}</span>
<span class="text-lg font-bold text-slate-800 font-mono" :class="score > 0.8 ? 'text-green-600' : (score > 0.5 ? 'text-blue-600' : 'text-slate-600')">
{{ (score * 100).toFixed(1) }}%
</span>
</div>
</div>
</div>
<!-- Segmented Objects Grid (Optional) -->
<div v-if="segmentResult.segments && segmentResult.segments.length > 0" class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
<div v-for="(seg, index) in segmentResult.segments" :key="index" class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-md transition-all group">
<div class="relative aspect-square bg-slate-100 overflow-hidden cursor-pointer" @click="seg.image_url ? previewImage(seg.image_url) : null">
@@ -690,9 +755,9 @@
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
<h3 class="font-bold text-slate-800 mb-4 flex items-center gap-2">
<i class="fas fa-code text-slate-500"></i>
JSON 结果
JSON 原始数据
</h3>
<pre class="bg-slate-50 text-slate-700 p-4 rounded-xl text-xs font-mono overflow-x-auto border border-slate-200">{{ JSON.stringify(segmentResult, null, 2) }}</pre>
<pre class="bg-slate-50 text-slate-700 p-4 rounded-xl text-xs font-mono overflow-x-auto border border-slate-200 max-h-[300px]">{{ JSON.stringify(segmentResult, null, 2) }}</pre>
</div>
</div>
</div>