通用分割

static/admin.html

@@ -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>