优化手机端

static/admin.html

@@ -173,6 +173,11 @@
                             <i class="fas fa-star w-5 text-center transition-colors group-hover:text-blue-600" :class="currentTab === 'tarot' ? 'text-blue-600' : 'text-slate-400'"></i>
                             <span class="font-medium">塔罗牌识别</span>
                         </a>
+                        <a href="#" @click.prevent="switchTab('segment')" :class="{ 'active': currentTab === 'segment' }" 
+                           class="nav-link flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 hover:text-blue-600 rounded-xl transition-all duration-200 group">
+                            <i class="fas fa-crop-alt w-5 text-center transition-colors group-hover:text-blue-600" :class="currentTab === 'segment' ? 'text-blue-600' : 'text-slate-400'"></i>
+                            <span class="font-medium">通用分割</span>
+                        </a>
                         <a href="#" @click.prevent="switchTab('gpu')" :class="{ 'active': currentTab === 'gpu' }" 
                            class="nav-link flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-50 hover:text-blue-600 rounded-xl transition-all duration-200 group">
                             <i class="fas fa-microchip w-5 text-center transition-colors group-hover:text-blue-600" :class="currentTab === 'gpu' ? 'text-blue-600' : 'text-slate-400'"></i>
@@ -547,6 +552,151 @@
                             </div>
                         </div>
 
+                        <!-- Segment Tab -->
+                        <div v-if="currentTab === 'segment'" key="segment" class="space-y-6">
+                            <!-- Input Section -->
+                            <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
+                                <h3 class="font-bold text-slate-800 mb-6 flex items-center gap-2">
+                                    <span class="w-1 h-5 bg-blue-500 rounded-full"></span>
+                                    通用图像分割任务
+                                </h3>
+                                
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <!-- Image Upload -->
+                                    <div class="space-y-4">
+                                        <label class="block text-sm font-medium text-slate-700">上传图片</label>
+                                        <div class="flex items-center justify-center w-full">
+                                            <label for="dropzone-segment-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-slate-300 border-dashed rounded-xl cursor-pointer bg-slate-50 hover:bg-slate-100 transition-colors relative overflow-hidden">
+                                                <div v-if="!segmentFile && !segmentImageUrl" class="flex flex-col items-center justify-center pt-5 pb-6">
+                                                    <i class="fas fa-cloud-upload-alt text-4xl text-slate-400 mb-3"></i>
+                                                    <p class="mb-2 text-sm text-slate-500"><span class="font-semibold">点击上传</span> 或拖拽文件到此处</p>
+                                                    <p class="text-xs text-slate-400">支持 JPG, PNG (MAX. 10MB)</p>
+                                                </div>
+                                                <div v-else class="absolute inset-0 flex items-center justify-center bg-slate-100">
+                                                    <img v-if="segmentPreview" :src="segmentPreview" class="max-h-full max-w-full object-contain">
+                                                    <div v-else class="text-slate-500 flex flex-col items-center">
+                                                        <i class="fas fa-link text-2xl mb-2"></i>
+                                                        <span class="text-xs truncate max-w-[200px]">{{ segmentImageUrl }}</span>
+                                                    </div>
+                                                    <button @click.prevent="clearSegmentInput" class="absolute top-2 right-2 bg-white/80 p-2.5 rounded-full hover:bg-white text-slate-600 shadow-sm">
+                                                        <i class="fas fa-times"></i>
+                                                    </button>
+                                                </div>
+                                                <input id="dropzone-segment-file" type="file" class="hidden" accept="image/*" @change="handleSegmentFileChange" />
+                                            </label>
+                                        </div>
+                                        
+                                        <div class="relative">
+                                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                                                <i class="fas fa-link text-slate-400"></i>
+                                            </div>
+                                            <input type="text" v-model="segmentImageUrl" @input="handleSegmentUrlInput" 
+                                                class="bg-slate-50 border border-slate-200 text-slate-900 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 outline-none" 
+                                                placeholder="或者输入图片 URL...">
+                                        </div>
+                                    </div>
+
+                                    <!-- Settings -->
+                                    <div class="space-y-6">
+                                        <div>
+                                            <label class="block text-sm font-medium text-slate-700 mb-2">Prompt 提示词 <span class="text-red-500">*</span></label>
+                                            <input type="text" v-model="segmentPrompt" 
+                                                class="bg-slate-50 border border-slate-200 text-slate-900 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 outline-none" 
+                                                placeholder="例如: cat, person, red car...">
+                                            <p class="text-xs text-slate-400 mt-2">支持中英文，后端会自动翻译。多个对象可用逗号分隔。</p>
+                                        </div>
+
+                                        <div>
+                                            <label class="block text-sm font-medium text-slate-700 mb-2">置信度阈值 ({{ segmentConfidence }})</label>
+                                            <input type="range" v-model.number="segmentConfidence" min="0" max="1" step="0.05" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-blue-600">
+                                            <div class="flex justify-between text-xs text-slate-400 mt-1">
+                                                <span>0.0</span>
+                                                <span>1.0</span>
+                                            </div>
+                                        </div>
+
+                                        <div class="grid grid-cols-2 gap-4">
+                                            <label class="flex items-center space-x-2 cursor-pointer">
+                                                <input type="checkbox" v-model="segmentOptions.save_segment_images" class="rounded text-blue-600 focus:ring-blue-500 border-gray-300">
+                                                <span class="text-sm text-slate-700">保存分割对象</span>
+                                            </label>
+                                            <label class="flex items-center space-x-2 cursor-pointer">
+                                                <input type="checkbox" v-model="segmentOptions.cutout" class="rounded text-blue-600 focus:ring-blue-500 border-gray-300">
+                                                <span class="text-sm text-slate-700">透明背景裁剪</span>
+                                            </label>
+                                            <label class="flex items-center space-x-2 cursor-pointer">
+                                                <input type="checkbox" v-model="segmentOptions.perspective_correction" class="rounded text-blue-600 focus:ring-blue-500 border-gray-300">
+                                                <span class="text-sm text-slate-700">透视矫正</span>
+                                            </label>
+                                            <label class="flex items-center space-x-2 cursor-pointer">
+                                                <input type="checkbox" v-model="segmentOptions.highlight" class="rounded text-blue-600 focus:ring-blue-500 border-gray-300">
+                                                <span class="text-sm text-slate-700">高亮主体</span>
+                                            </label>
+                                        </div>
+
+                                        <div class="pt-4">
+                                            <button @click="performSegment" :disabled="isSegmenting || (!segmentFile && !segmentImageUrl) || !segmentPrompt" 
+                                                class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-bold py-3 px-4 rounded-xl shadow-lg shadow-blue-500/30 transition-all transform active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
+                                                <i class="fas fa-crop-alt" :class="{'fa-spin': isSegmenting}"></i>
+                                                {{ isSegmenting ? '正在分割中...' : '开始分割 (Segment)' }}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Results Section -->
+                            <div v-if="segmentResult" class="space-y-6 animate-fade-in">
+                                <!-- Status Banner -->
+                                <div :class="segmentResult.status === 'success' ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-red-700'" 
+                                    class="p-4 rounded-xl border flex items-center gap-3 shadow-sm">
+                                    <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>
+                                    </div>
+                                </div>
+
+                                <!-- Result Visualization -->
+                                <div v-if="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>
+                                </div>
+
+                                <!-- Segmented Objects Grid -->
+                                <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">
+                                            <img v-if="seg.image_url" :src="seg.image_url" class="w-full h-full object-contain p-2 group-hover:scale-110 transition-transform duration-500">
+                                            <div v-else class="w-full h-full flex items-center justify-center text-slate-300">
+                                                <i class="fas fa-image text-2xl"></i>
+                                            </div>
+                                            <div class="absolute top-1 right-1 bg-black/60 text-white text-[10px] font-bold px-1.5 py-0.5 rounded">
+                                                {{ (seg.score * 100).toFixed(0) }}%
+                                            </div>
+                                        </div>
+                                        <div class="p-2 text-center">
+                                            <p class="text-xs font-medium text-slate-700 truncate" :title="seg.label">{{ seg.label }}</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <!-- JSON Result -->
+                                <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 结果
+                                    </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>
+                                </div>
+                            </div>
+                        </div>
+
                         <!-- History Tab -->
                         <div v-if="currentTab === 'history'" key="history" class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
                              <div class="overflow-x-auto">
@@ -972,6 +1122,21 @@
                 const tarotResult = ref(null);
                 const isRecognizing = ref(false);
                 
+                // Segment State
+                const segmentFile = ref(null);
+                const segmentImageUrl = ref('');
+                const segmentPreview = ref(null);
+                const segmentPrompt = ref('');
+                const segmentConfidence = ref(0.7);
+                const segmentOptions = ref({
+                    save_segment_images: false,
+                    cutout: false,
+                    perspective_correction: false,
+                    highlight: false
+                });
+                const segmentResult = ref(null);
+                const isSegmenting = ref(false);
+
                 // Filters
                 const selectedTimeRange = ref('all');
                 const selectedType = ref('all');
@@ -1379,17 +1544,11 @@
                         }
                         formData.append('expected_count', tarotExpectedCount.value);
                         
-                        // Use axios directly or a helper. Need to handle API Key if required by backend, 
-                        // but admin usually has session. Wait, the backend endpoints like /recognize_tarot 
-                        // require X-API-Key header.
-                        // The admin page uses cookie for /admin/api/* but /recognize_tarot is a public API protected by Key.
-                        // We should add the key to the header.
-                        
                         const config = {
                             headers: {
-                                'X-API-Key': '123quant-speed' // Hardcoded as per fastAPI_tarot.py VALID_API_KEY
+                                'X-API-Key': '123quant-speed'
                             },
-                            timeout: 120000 // 2分钟超时，大模型响应较慢
+                            timeout: 120000 
                         };
                         
                         const res = await axios.post('/recognize_tarot', formData, config);
@@ -1399,7 +1558,6 @@
                         console.error(e);
                         let msg = e.response?.data?.detail || e.message || '识别请求失败';
                         
-                        // 针对 504 Gateway Timeout 或 请求超时做特殊提示
                         if (e.response && e.response.status === 504) {
                             msg = '请求超时 (504)：大模型处理时间较长。后台可能仍在运行，请稍后在“识别记录”中刷新查看结果。';
                         } else if (e.code === 'ECONNABORTED') {
@@ -1415,6 +1573,85 @@
                     }
                 };
 
+                // --- Segment Actions ---
+                const handleSegmentFileChange = (event) => {
+                    const file = event.target.files[0];
+                    if (file) {
+                        segmentFile.value = file;
+                        segmentImageUrl.value = '';
+                        segmentPreview.value = URL.createObjectURL(file);
+                        segmentResult.value = null;
+                    }
+                };
+
+                const handleSegmentUrlInput = () => {
+                    if (segmentImageUrl.value) {
+                        segmentFile.value = null;
+                        segmentPreview.value = segmentImageUrl.value;
+                        segmentResult.value = null;
+                    } else {
+                        segmentPreview.value = null;
+                    }
+                };
+
+                const clearSegmentInput = () => {
+                    segmentFile.value = null;
+                    segmentImageUrl.value = '';
+                    segmentPreview.value = null;
+                    segmentResult.value = null;
+                    const fileInput = document.getElementById('dropzone-segment-file');
+                    if (fileInput) fileInput.value = '';
+                };
+
+                const performSegment = async () => {
+                    if ((!segmentFile.value && !segmentImageUrl.value) || !segmentPrompt.value) return;
+
+                    isSegmenting.value = true;
+                    segmentResult.value = null;
+
+                    try {
+                        const formData = new FormData();
+                        if (segmentFile.value) {
+                            formData.append('file', segmentFile.value);
+                        } else {
+                            formData.append('image_url', segmentImageUrl.value);
+                        }
+                        formData.append('prompt', segmentPrompt.value);
+                        formData.append('confidence', segmentConfidence.value);
+                        formData.append('save_segment_images', segmentOptions.value.save_segment_images);
+                        formData.append('cutout', segmentOptions.value.cutout);
+                        formData.append('perspective_correction', segmentOptions.value.perspective_correction);
+                        formData.append('highlight', segmentOptions.value.highlight);
+
+                        const config = {
+                            headers: {
+                                'X-API-Key': '123quant-speed'
+                            },
+                            timeout: 120000
+                        };
+
+                        const res = await axios.post('/segment', formData, config);
+                        segmentResult.value = res.data;
+
+                    } catch (e) {
+                        console.error(e);
+                        let msg = e.response?.data?.detail || e.message || '分割请求失败';
+                        
+                        if (e.response && e.response.status === 504) {
+                            msg = '请求超时 (504)：处理时间较长。';
+                        } else if (e.code === 'ECONNABORTED') {
+                            msg = '请求超时：网络连接中断或服务器响应过慢。';
+                        }
+
+                        segmentResult.value = {
+                            status: 'failed',
+                            message: msg
+                        };
+                    } finally {
+                        isSegmenting.value = false;
+                    }
+                };
+
                 // --- Navigation & Helpers ---
                 const switchTab = (tab) => {
                     const prevTab = currentTab.value;
@@ -1506,6 +1743,7 @@
                     const map = {
                         'dashboard': '数据看板',
                         'tarot': '塔罗牌识别',
+                        'segment': '通用分割',
                         'history': '识别记录',
                         'files': '文件资源管理',
                         'prompts': '提示词工程',
@@ -1519,6 +1757,7 @@
                     const map = {
                         'dashboard': '系统运行状态与核心指标概览',
                         'tarot': 'SAM3 + Qwen-VL 联合识别与分割',
+                        'segment': '基于文本提示的通用图像分割 (Grounded SAM)',
                         'history': '所有视觉识别任务的历史流水',
                         'files': '查看和管理生成的图像及JSON结果',
                         'prompts': '调整各个识别场景的 System Prompt',
@@ -1734,7 +1973,10 @@
                     gpuUtilChartRef, gpuTempChartRef,
                     // Tarot
                     tarotFile, tarotImageUrl, tarotExpectedCount, tarotPreview, tarotResult, isRecognizing,
-                    handleTarotFileChange, handleUrlInput, clearTarotInput, recognizeTarot
+                    handleTarotFileChange, handleUrlInput, clearTarotInput, recognizeTarot,
+                    // Segment
+                    segmentFile, segmentImageUrl, segmentPreview, segmentPrompt, segmentConfidence, segmentOptions, segmentResult, isSegmenting,
+                    handleSegmentFileChange, handleSegmentUrlInput, clearSegmentInput, performSegment
                 };
             }
         }).mount('#app');