优化手机端
This commit is contained in:
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user