warren/momentry_core
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

feat: add migrations, test scripts, and utility tools

Browse Source 
- Add database migrations (006-028) for face recognition, identity, file_uuid
- Add test scripts for ASR, face, search, processing
- Add portal frontend (Tauri)
- Add config, benchmark, and monitoring utilities
- Add model checkpoints and pretrained model references
This commit is contained in:
Warren
2026-04-30 15:11:53 +08:00
parent 4d75b2e251
commit b54c2def30
192 changed files with 46721 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
portal/src/views/VideoDetailView.vue
+353
View File
@@ -0,0 +1,353 @@
<template>
<div class="space-y-6">
<!-- Header with Actions -->
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<button @click="goBack" class="flex items-center space-x-2 px-4 py-2 bg-gray-800 hover:bg-gray-700 rounded-lg transition">
<span class="text-xl">←</span>
<span>返回納管檔案列表</span>
</button>
<h2 class="text-2xl font-bold">
{{ video?.file_name || '檔案詳情' }}
<span v-if="video?.file_type" class="ml-2 text-sm px-2 py-1 bg-blue-900 text-blue-200 rounded uppercase">
{{ video.file_type }}
</span>
</h2>
</div>
<div class="flex items-center space-x-3">
<button
v-if="video && !video.registration_time"
@click="handleRegister"
:disabled="actionLoading"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded transition"
>
{{ actionLoading ? '處理中...' : '立即註冊' }}
</button>
<button
v-if="video && video.registration_time"
@click="handleUnregister"
:disabled="actionLoading"
class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded transition"
>
{{ actionLoading ? '處理中...' : '取消註冊' }}
</button>
<button
v-if="video && video.registration_time"
@click="handleProcess"
:disabled="actionLoading || video.status === 'processing'"
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded transition disabled:opacity-50"
>
{{ actionLoading ? '處理中...' : '分析處理' }}
</button>
</div>
</div>
<!-- Loading -->
<div v-if="loading" class="flex justify-center py-12">
<div class="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500"></div>
</div>
<!-- Main Content -->
<div v-else-if="video" class="space-y-6">
<!-- 1. Common Info Card -->
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 class="text-lg font-semibold mb-4 text-blue-400">基本檔案資訊</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<span class="text-xs text-gray-500 uppercase">File UUID</span>
<p class="text-sm font-mono text-gray-300 truncate">{{ video.file_uuid }}</p>
</div>
<div>
<span class="text-xs text-gray-500 uppercase">狀態</span>
<p class="text-white">
<span :class="getStatusColor(video.status)" class="px-2 py-1 rounded text-sm">
{{ video.status }}
</span>
</p>
</div>
<div>
<span class="text-xs text-gray-500 uppercase">註冊時間</span>
<p class="text-sm text-gray-300">{{ formatTimestamp(video.registration_time) || '-' }}</p>
</div>
<div>
<span class="text-xs text-gray-500 uppercase">檔案大小</span>
<p class="text-sm text-gray-300">{{ formatFileSize(probeInfo?.format?.size) }}</p>
</div>
</div>
</div>
<!-- 2. Video Specific Sections -->
<template v-if="video.file_type === 'video'">
<!-- Processing Status -->
<div v-if="video.processing_status" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 class="text-lg font-semibold mb-4 text-blue-400">處理狀態 (Processing Status)</h3>
<div class="bg-gray-900 p-4 rounded space-y-3">
<!-- Phase -->
<div class="flex items-center space-x-3">
<span class="text-gray-500 w-20">階段:</span>
<span class="text-white font-semibold">{{ video.processing_status.phase || '-' }}</span>
</div>
<!-- Active Processors -->
<div v-if="video.processing_status.active_processors?.length && video.processing_status.phase !== 'COMPLETED'" class="flex items-start space-x-3">
<span class="text-gray-500 w-20">處理器:</span>
<div class="flex flex-wrap gap-2">
<span v-for="p in video.processing_status.active_processors" :key="p"
class="px-2 py-1 bg-blue-900 text-blue-300 rounded text-xs">
{{ p }}
</span>
</div>
</div>
<!-- Progress by Processor -->
<div v-if="video.processing_status.progress && video.processing_status.phase !== 'COMPLETED'" class="space-y-2">
<span class="text-gray-500">進度:</span>
<div v-for="(progress, processor) in video.processing_status.progress" :key="processor"
class="flex items-center space-x-3 bg-gray-800 p-2 rounded">
<span class="text-gray-400 w-16">{{ processor }}</span>
<div class="flex-1">
<div class="flex items-center space-x-2">
<div class="flex-1 bg-gray-700 rounded-full h-2">
<div :class="getProgressColor(progress.status)"
class="h-2 rounded-full transition-all"
:style="{ width: `${progress.percentage || 0}%` }">
</div>
</div>
<span class="text-xs text-gray-400">{{ (progress.percentage || 0).toFixed(1) }}%</span>
</div>
<div class="text-xs text-gray-500 mt-1">
{{ progress.current_frame || 0 }} / {{ progress.total_frames || 0 }} frames
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Face Clusters -->
<div v-if="clusters.length > 0" class="space-y-4">
<h3 class="text-xl font-semibold">臉部群組 ({{ clusters.length }})</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div v-for="cluster in clusters" :key="cluster.cluster_id"
class="bg-gray-800 rounded-lg p-4 border border-gray-700">
<div class="flex justify-between items-start mb-3">
<h4 class="font-semibold">{{ cluster.cluster_id }}</h4>
<span :class="cluster.status === 'registered' ? 'bg-green-900 text-green-300' : 'bg-yellow-900 text-yellow-300'"
class="px-2 py-1 rounded text-xs">
{{ cluster.status === 'registered' ? '已註冊' : '未註冊' }}
</span>
</div>
<div class="space-y-2 text-sm text-gray-400 mb-3">
<div>臉孔數: {{ cluster.face_count }}</div>
<div v-if="cluster.identity?.name">姓名: {{ cluster.identity.name }}</div>
</div>
</div>
</div>
</div>
</template>
<!-- 3. Generic Probe Info -->
<div v-if="probeInfo" class="bg-gray-800 rounded-lg p-6 border border-gray-700">
<h3 class="text-lg font-semibold mb-4 text-blue-400">Probe 訊息 (ffprobe)</h3>
<!-- Basic Info Grid -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
<div>
<span class="text-xs text-gray-500 uppercase">Duration</span>
<p class="text-white">{{ formatDuration(probeInfo.format?.duration) }}</p>
</div>
<div>
<span class="text-xs text-gray-500 uppercase">Bitrate</span>
<p class="text-white">{{ (probeInfo.format?.bit_rate / 1000).toFixed(0) }} kbps</p>
</div>
<div>
<span class="text-xs text-gray-500 uppercase">Format</span>
<p class="text-white">{{ probeInfo.format?.format_long_name || '-' }}</p>
</div>
<div>
<span class="text-xs text-gray-500 uppercase">Size</span>
<p class="text-white">{{ formatFileSize(probeInfo.format?.size) }}</p>
</div>
</div>
<!-- Full Probe JSON (Lazy Loaded via Computed) -->
<details class="mt-4">
<summary class="text-sm text-gray-400 cursor-pointer hover:text-white flex items-center space-x-2">
<span>完整 Probe JSON</span>
<span class="text-xs bg-blue-900 text-blue-300 px-2 py-1 rounded">詳細</span>
</summary>
<div class="bg-gray-900 p-3 rounded text-xs font-mono text-gray-300 overflow-x-auto max-h-96 mt-2">
<pre>{{ probeJsonString }}</pre>
</div>
</details>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getVideos, registerVideo, unregisterVideo, processVideo } from '@/api/client'
const route = useRoute()
const router = useRouter()
const uuid = route.params.uuid as string
const video = ref<any>(null)
const probeInfo = ref<any>(null)
const clusters = ref<any[]>([])
const loading = ref(false)
const actionLoading = ref(false)
// Computed for safe JSON string rendering
const probeJsonString = computed(() => {
if (!probeInfo.value) return ''
try {
return JSON.stringify(probeInfo.value, null, 2)
} catch {
return 'Error parsing JSON'
}
})
function goBack() {
router.push('/files')
}
function formatDuration(seconds: number | undefined): string {
if (!seconds) return '-'
const m = Math.floor(seconds / 60)
const s = Math.floor(seconds % 60)
if (m > 60) {
const h = Math.floor(m / 60)
return `${h}h ${m % 60}m ${s}s`
}
return `${m}m ${s}s`
}
function formatFileSize(bytes: number | undefined): string {
if (!bytes) return '-'
if (bytes < 1024) return `${bytes} B`
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
return `${(bytes / 1024 / 1024).toFixed(1)} MB`
}
function getStatusColor(status: string): string {
switch (status) {
case 'completed': return 'bg-green-500'
case 'processing': return 'bg-yellow-500'
case 'pending': return 'bg-gray-500'
case 'failed': return 'bg-red-500'
default: return 'bg-gray-500'
}
}
function formatTimestamp(timestamp: string | undefined): string {
if (!timestamp) return '-'
try {
const date = new Date(timestamp)
return date.toLocaleString('zh-TW', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
})
} catch {
return timestamp
}
}
function getProgressColor(status: string): string {
switch (status) {
case 'completed': return 'bg-green-500'
case 'running': return 'bg-blue-500'
case 'pending': return 'bg-gray-500'
case 'failed': return 'bg-red-500'
default: return 'bg-gray-500'
}
}
async function handleRegister() {
actionLoading.value = true
try {
if (!video.value?.file_path) return
await registerVideo(video.value.file_path)
await loadVideoDetail()
} catch (e) {
console.error('Registration failed:', e)
} finally {
actionLoading.value = false
}
}
async function handleUnregister() {
if (!confirm('確定要取消註冊嗎？這將刪除相關數據。')) return
actionLoading.value = true
try {
if (!video.value?.file_uuid) return
await unregisterVideo(video.value.file_uuid)
await loadVideoDetail()
} catch (e) {
console.error('Unregistration failed:', e)
} finally {
actionLoading.value = false
}
}
async function handleProcess() {
actionLoading.value = true
try {
if (!video.value?.file_uuid) return
await processVideo(video.value.file_uuid)
await loadVideoDetail()
} catch (e) {
console.error('Processing failed:', e)
} finally {
actionLoading.value = false
}
}
async function loadVideoDetail() {
loading.value = true
try {
// Use getVideos and extract from files array
const result = await getVideos(undefined, undefined, 1, 1, uuid)
if (result.files?.[0]) {
const v = result.files[0]
video.value = v
// Parse processing_status
if (v.processing_status) {
try {
video.value.processing_status = typeof v.processing_status === 'string'
? JSON.parse(v.processing_status)
: v.processing_status
} catch (e) {
console.error('Failed to parse processing_status:', e)
}
}
// Parse probe_json
if (v.probe_json) {
try {
probeInfo.value = JSON.parse(v.probe_json)
} catch (e) {
console.error('Failed to parse probe_json:', e)
}
}
}
} catch (e) {
console.error('Failed to load detail:', e)
} finally {
loading.value = false
}
}
onMounted(() => {
loadVideoDetail()
})
</script>