feat: add face filter components and integration guide
- useFaceFilter composable: manages face filtering state and API calls
- FaceFilterPanel component: UI for filtering controls
- FaceCard component: text-only face display card
- Integration guide: step-by-step guide for integrating into PeopleView
Implements hybrid filtering mode with:
- Instant mode: client-side filtering (5-10ms)
- Backend mode: server-side complex filtering
- Hybrid mode: backend + instant filtering (AND)
Uses actual Core API endpoints:
- GET /file/{uuid}/faces
- POST /file/{uuid}/faces/filter
- GET /file/{uuid}/face/{faceId}/filter-report
- GET /file/{uuid}/filter-stats
Preferences stored in localStorage.
This commit is contained in:
543
docs/face_filter_integration_guide.md
Normal file
543
docs/face_filter_integration_guide.md
Normal file
@@ -0,0 +1,543 @@
|
||||
# Face Filter Integration Guide for PeopleView
|
||||
|
||||
**版本**: v1.0
|
||||
**日期**: 2026-08-09
|
||||
**狀態**: 可整合
|
||||
|
||||
---
|
||||
|
||||
## 概述
|
||||
|
||||
本指南說明如何將 Face Filter 功能整合到 PeopleView 中。
|
||||
|
||||
---
|
||||
|
||||
## 已創建的檔案
|
||||
|
||||
### 1. Composable
|
||||
**位置**: `src/composables/useFaceFilter.ts`
|
||||
|
||||
**功能**:
|
||||
- 管理臉部過濾狀態
|
||||
- 提供三種過濾模式（instant, backend, hybrid）
|
||||
- 處理 API 呼叫
|
||||
- 儲存使用者偏好到 localStorage
|
||||
|
||||
**主要 exports**:
|
||||
```typescript
|
||||
export function useFaceFilter() {
|
||||
return {
|
||||
mode, // 'instant' | 'backend' | 'hybrid'
|
||||
rules, // QuickFilterRules
|
||||
allFaces, // FaceMetadata[]
|
||||
filteredFaces, // FaceMetadata[]
|
||||
filterResult, // FilterResult | null
|
||||
filterStats, // FilterStats | null
|
||||
loading, // boolean
|
||||
error, // string | null
|
||||
stats, // computed stats
|
||||
|
||||
// Actions
|
||||
initialize,
|
||||
updateRules,
|
||||
setMode,
|
||||
applyBackendFilter,
|
||||
getFaceReportData,
|
||||
refreshStats,
|
||||
resetToDefault,
|
||||
applyLocalFilter
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 2. Components
|
||||
|
||||
#### FaceFilterPanel.vue
|
||||
**位置**: `src/components/FaceFilterPanel.vue`
|
||||
|
||||
**功能**:
|
||||
- 過濾面板 UI
|
||||
- 模式選擇（instant/backend/hybrid）
|
||||
- 過濾規則控制（confidence, bbox_size, source, backend_status）
|
||||
- 統計顯示
|
||||
|
||||
**Props**:
|
||||
```typescript
|
||||
{
|
||||
fileUuid: string // 必需的檔案 UUID
|
||||
}
|
||||
```
|
||||
|
||||
**使用範例**:
|
||||
```vue
|
||||
<FaceFilterPanel :fileUuid="selectedFileUuid" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
#### FaceCard.vue
|
||||
**位置**: `src/components/FaceCard.vue`
|
||||
|
||||
**功能**:
|
||||
- 臉部卡片顯示（純文字，無縮圖）
|
||||
- 狀態標示（accept/reject/review）
|
||||
- 來源徽章（AV/MP）
|
||||
- 選擇功能
|
||||
|
||||
**Props**:
|
||||
```typescript
|
||||
{
|
||||
face: FaceMetadata,
|
||||
selected?: boolean,
|
||||
showCheckbox?: boolean
|
||||
}
|
||||
```
|
||||
|
||||
**Events**:
|
||||
```typescript
|
||||
{
|
||||
click: [face: FaceMetadata],
|
||||
select: [face: FaceMetadata]
|
||||
}
|
||||
```
|
||||
|
||||
**使用範例**:
|
||||
```vue
|
||||
<FaceCard
|
||||
:face="face"
|
||||
:selected="selectedFaces.includes(face)"
|
||||
@click="openFaceDetail(face)"
|
||||
@select="toggleFaceSelection(face)"
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 整合步驟
|
||||
|
||||
### Step 1: 導入 Composable
|
||||
|
||||
在 PeopleView.vue 中導入 useFaceFilter：
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
import { useFaceFilter } from '../composables/useFaceFilter';
|
||||
|
||||
const {
|
||||
mode,
|
||||
rules,
|
||||
allFaces,
|
||||
filteredFaces,
|
||||
filterStats,
|
||||
loading: filterLoading,
|
||||
error: filterError,
|
||||
stats: filterStats,
|
||||
initialize,
|
||||
updateRules,
|
||||
setMode,
|
||||
applyBackendFilter,
|
||||
resetToDefault
|
||||
} = useFaceFilter();
|
||||
|
||||
// ... existing code ...
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 2: 添加 FaceFilterPanel 組件
|
||||
|
||||
在 toolbar 區域添加 FaceFilterPanel：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="people-view">
|
||||
<div class="ms-ppl-control-area">
|
||||
<!-- Existing toolbar -->
|
||||
<div class="ms-ppl-toolbar">
|
||||
<!-- ... existing controls ... -->
|
||||
</div>
|
||||
|
||||
<!-- NEW: Face Filter Panel -->
|
||||
<FaceFilterPanel
|
||||
v-if="selectedFileUuid"
|
||||
:fileUuid="selectedFileUuid"
|
||||
ref="faceFilterPanel"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ... rest of the view ... -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FaceFilterPanel from '../components/FaceFilterPanel.vue';
|
||||
|
||||
const faceFilterPanel = ref();
|
||||
|
||||
// ... existing code ...
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 3: 初始化過濾
|
||||
|
||||
當選擇檔案時初始化過濾：
|
||||
|
||||
```typescript
|
||||
// 在 onFileFilterChange 或 watch(selectedFileUuid) 中
|
||||
watch(selectedFileUuid, async (newUuid) => {
|
||||
if (newUuid) {
|
||||
await initialize(newUuid);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 4: 使用過濾後的臉部
|
||||
|
||||
使用 `filteredFaces` 替代原始的臉部列表：
|
||||
|
||||
```vue
|
||||
<!-- 原本的臉部列表 -->
|
||||
<div v-for="face in allFaces" :key="face.face_id">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
|
||||
<!-- 改為使用過濾後的臉部 -->
|
||||
<div v-for="face in filteredFaces" :key="face.face_id">
|
||||
<FaceCard
|
||||
:face="face"
|
||||
@click="openFaceDetail(face)"
|
||||
/>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Step 5: 整合到現有 UI
|
||||
|
||||
#### 選項 A: 獨立面板（推薦）
|
||||
|
||||
FaceFilterPanel 作為獨立面板，放在 toolbar 下方：
|
||||
|
||||
```vue
|
||||
<div class="ms-ppl-control-area">
|
||||
<div class="ms-ppl-toolbar">
|
||||
<!-- Existing controls -->
|
||||
</div>
|
||||
|
||||
<!-- Face Filter Panel -->
|
||||
<FaceFilterPanel :fileUuid="selectedFileUuid" />
|
||||
|
||||
<!-- Undo Banner -->
|
||||
<div v-if="showUndoBanner" class="ms-undo-banner">
|
||||
<!-- ... -->
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### 選項 B: 整合到現有面板
|
||||
|
||||
將過濾控制整合到現有的 Pending Faces 面板：
|
||||
|
||||
```vue
|
||||
<div v-if="showUface" class="ms-ppl-section">
|
||||
<div class="ms-ppl-section-toolbar">
|
||||
<div class="ms-ppl-section-title">Pending Faces</div>
|
||||
|
||||
<!-- Add filter controls -->
|
||||
<div class="filter-controls-inline">
|
||||
<select v-model="rules.source">
|
||||
<option value="all">All</option>
|
||||
<option value="apple_vision">AV</option>
|
||||
<option value="mediapipe">MP</option>
|
||||
</select>
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="rules.min_confidence"
|
||||
placeholder="Min confidence"
|
||||
/>
|
||||
<button @click="applyBackendFilter(selectedFileUuid)">
|
||||
Apply Backend
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Face cards -->
|
||||
<div class="ms-ppl-face-grid">
|
||||
<FaceCard
|
||||
v-for="face in filteredFaces"
|
||||
:key="face.face_id"
|
||||
:face="face"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## API 端點
|
||||
|
||||
所有 API 呼叫都通過 composable 處理，使用 proxy 到 `http://localhost:8888/api/v1/...`
|
||||
|
||||
**實際端點**：
|
||||
1. `GET /api/v1/file/{uuid}/faces` - 獲取臉部元數據
|
||||
2. `POST /api/v1/file/{uuid}/faces/filter` - 套用後端過濾
|
||||
3. `GET /api/v1/file/{uuid}/face/{faceId}/filter-report` - 獲取單臉報告
|
||||
4. `GET /api/v1/file/{uuid}/filter-stats` - 獲取統計
|
||||
5. `GET/POST /api/v1/file/{uuid}/filter-rules` - 規則 CRUD
|
||||
|
||||
---
|
||||
|
||||
## 資料結構
|
||||
|
||||
### FaceMetadata
|
||||
|
||||
```typescript
|
||||
interface FaceMetadata {
|
||||
face_id: string;
|
||||
frame: number;
|
||||
primary_source: 'apple_vision' | 'mediapipe';
|
||||
primary_confidence: number;
|
||||
detection_sources: Array<{
|
||||
source_type: string;
|
||||
confidence: number;
|
||||
}>;
|
||||
filter_features: {
|
||||
face_id: string;
|
||||
frame: number;
|
||||
bbox_size: number; // min(width, height)
|
||||
apple_vision_confidence: number;
|
||||
mediapipe_confidence?: number;
|
||||
eye_ratio?: number;
|
||||
nose_ratio?: number;
|
||||
pose_score?: number;
|
||||
mediapipe_detected?: boolean;
|
||||
mediapipe_iou?: number;
|
||||
embedding_similarity?: number;
|
||||
consecutive_frames?: number;
|
||||
total_frames_detected?: number;
|
||||
backend_filter_status?: 'accept' | 'reject' | 'review';
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 過濾模式
|
||||
|
||||
### Instant Mode
|
||||
- **效能**: 5-10ms
|
||||
- **邏輯**: Client 端即時過濾
|
||||
- **適用**: 快速調整規則
|
||||
|
||||
### Backend Mode
|
||||
- **效能**: 100-200ms（API 呼叫）
|
||||
- **邏輯**: 後端複雜過濾（landmark, embedding, temporal）
|
||||
- **適用**: 高品質過濾
|
||||
|
||||
### Hybrid Mode
|
||||
- **效能**: 5-10ms（前端）+ 後端預先計算
|
||||
- **邏輯**: 後端標示 + 前端即時過濾（AND）
|
||||
- **適用**: 最佳使用者體驗
|
||||
|
||||
---
|
||||
|
||||
## 使用者偏好
|
||||
|
||||
偏好儲存在 `localStorage`：
|
||||
|
||||
**Key**: `momentry_face_filter_preferences`
|
||||
|
||||
**結構**:
|
||||
```json
|
||||
{
|
||||
"mode": "instant",
|
||||
"rules": {
|
||||
"min_confidence": 0.5,
|
||||
"min_bbox_size": 80,
|
||||
"source": "all",
|
||||
"backend_status": "accept"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 效能優化
|
||||
|
||||
### 分頁
|
||||
- `page_size ≤ 50`（防 hang）
|
||||
- 虛擬滾動（可選）
|
||||
|
||||
### 快取
|
||||
- 臉部元數據快取在 composable
|
||||
- 偏好儲存在 localStorage
|
||||
|
||||
### 懶載入
|
||||
- JPG 縮圖懶載入（未來擴展）
|
||||
- 當前使用純文字卡片
|
||||
|
||||
---
|
||||
|
||||
## 錯誤處理
|
||||
|
||||
Composable 提供 error 狀態：
|
||||
|
||||
```typescript
|
||||
if (error.value) {
|
||||
console.error('Face filter error:', error.value);
|
||||
// 顯示錯誤訊息給使用者
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 測試
|
||||
|
||||
### 單元測試
|
||||
```typescript
|
||||
import { useFaceFilter } from '../composables/useFaceFilter';
|
||||
|
||||
describe('useFaceFilter', () => {
|
||||
it('should filter faces by confidence', () => {
|
||||
const { updateRules, filteredFaces } = useFaceFilter();
|
||||
|
||||
// Setup test data
|
||||
// ...
|
||||
|
||||
updateRules({ min_confidence: 0.7 });
|
||||
expect(filteredFaces.value.length).toBeLessThan(allFaces.value.length);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
### 整合測試
|
||||
1. 選擇檔案
|
||||
2. 驗證臉部載入
|
||||
3. 調整過濾規則
|
||||
4. 驗證過濾結果
|
||||
5. 切換模式
|
||||
6. 驗證模式切換
|
||||
|
||||
---
|
||||
|
||||
## 未來擴展
|
||||
|
||||
### 1. 縮圖支援
|
||||
當 Core 實作 `/face/{id}/thumbnail` 端點後：
|
||||
|
||||
```vue
|
||||
<FaceCard :face="face" showThumbnail />
|
||||
```
|
||||
|
||||
### 2. 規則管理 UI
|
||||
當需要規則 CRUD 時：
|
||||
|
||||
```vue
|
||||
<RuleManager
|
||||
:fileUuid="selectedFileUuid"
|
||||
@rule-change="handleRuleChange"
|
||||
/>
|
||||
```
|
||||
|
||||
### 3. 批量操作
|
||||
```typescript
|
||||
const selectedFaces = ref<FaceMetadata[]>([]);
|
||||
|
||||
const batchAction = async (action: 'accept' | 'reject') => {
|
||||
await fetch('/api/v1/file/.../faces/batch', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
face_ids: selectedFaces.value.map(f => f.face_id),
|
||||
action
|
||||
})
|
||||
});
|
||||
};
|
||||
```
|
||||
|
||||
### 4. 匯出功能
|
||||
```typescript
|
||||
const exportFilteredFaces = () => {
|
||||
const csv = filteredFaces.value.map(face =>
|
||||
`${face.face_id},${face.frame},${face.primary_confidence},${face.filter_features.bbox_size}`
|
||||
).join('\n');
|
||||
|
||||
// Download CSV
|
||||
};
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 疑難排解
|
||||
|
||||
### 問題 1: 臉部未載入
|
||||
**檢查**:
|
||||
- `selectedFileUuid` 是否正確
|
||||
- API 端點是否可達
|
||||
- 網路請求是否成功
|
||||
|
||||
**解決**:
|
||||
```typescript
|
||||
console.log('File UUID:', selectedFileUuid);
|
||||
console.log('API Response:', await fetchFaces(selectedFileUuid));
|
||||
```
|
||||
|
||||
### 問題 2: 過濾未生效
|
||||
**檢查**:
|
||||
- `mode` 是否正確
|
||||
- `rules` 是否正確
|
||||
- `filteredFaces` 是否更新
|
||||
|
||||
**解決**:
|
||||
```typescript
|
||||
console.log('Mode:', mode.value);
|
||||
console.log('Rules:', rules.value);
|
||||
console.log('Filtered:', filteredFaces.value.length);
|
||||
```
|
||||
|
||||
### 問題 3: 偏好未儲存
|
||||
**檢查**:
|
||||
- `localStorage` 是否可寫
|
||||
- Key 是否正確
|
||||
|
||||
**解決**:
|
||||
```typescript
|
||||
console.log('LocalStorage:', localStorage.getItem('momentry_face_filter_preferences'));
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 總結
|
||||
|
||||
**整合步驟**：
|
||||
1. ✅ 導入 useFaceFilter composable
|
||||
2. ✅ 添加 FaceFilterPanel 組件
|
||||
3. ✅ 初始化過濾（watch selectedFileUuid）
|
||||
4. ✅ 使用 filteredFaces 顯示
|
||||
5. ✅ 處理錯誤和載入狀態
|
||||
|
||||
**預期效果**：
|
||||
- 即時過濾（5-10ms）
|
||||
- 三種模式切換
|
||||
- 使用者偏好儲存
|
||||
- 純文字卡片（無縮圖）
|
||||
|
||||
**未來擴展**：
|
||||
- 縮圖支援
|
||||
- 規則管理 UI
|
||||
- 批量操作
|
||||
- 匯出功能
|
||||
|
||||
---
|
||||
|
||||
**文件版本**: v1.0
|
||||
**最後更新**: 2026-08-09
|
||||
**相關文件**:
|
||||
- `/Users/accusys/momentry_core/docs_v1.0/STUDIO_TEAM/face_filter_usage_guide.md`
|
||||
- `/Users/accusys/momentry_core/docs_v1.0/STUDIO_TEAM/face_filter_hybrid_mode_guide.md`
|
||||
@@ -1,12 +0,0 @@
|
||||
use argon2::{Algorithm, Argon2, Params, PasswordHasher, Version};
|
||||
use argon2::password_hash::{SaltString, rand_core::OsRng};
|
||||
|
||||
fn main() {
|
||||
let password = std::env::args().nth(1).unwrap_or_else(|| "demo123".to_string());
|
||||
let salt = SaltString::generate(&mut OsRng);
|
||||
let argon2 = Argon2::new(Algorithm::Argon2id, Version::V0x13, Params::default());
|
||||
match argon2.hash_password(password.as_bytes(), &salt) {
|
||||
Ok(hash) => println!("{}", hash),
|
||||
Err(e) => eprintln!("Error: {}", e),
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
195
src/components/FaceCard.vue
Normal file
195
src/components/FaceCard.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<div
|
||||
class="face-card"
|
||||
:class="{
|
||||
'face-card-selected': selected,
|
||||
'status-accept': face.filter_features.backend_filter_status === 'accept',
|
||||
'status-reject': face.filter_features.backend_filter_status === 'reject',
|
||||
'status-review': face.filter_features.backend_filter_status === 'review'
|
||||
}"
|
||||
@click="$emit('click', face)"
|
||||
>
|
||||
<!-- Status Badge -->
|
||||
<div v-if="face.filter_features.backend_filter_status" class="status-badge" :class="face.filter_features.backend_filter_status">
|
||||
{{ face.filter_features.backend_filter_status }}
|
||||
</div>
|
||||
|
||||
<!-- Face Info -->
|
||||
<div class="face-info">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Face ID:</span>
|
||||
<span class="info-value">{{ face.face_id }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Frame:</span>
|
||||
<span class="info-value">{{ face.frame }}</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Confidence:</span>
|
||||
<span class="info-value">{{ (face.primary_confidence * 100).toFixed(1) }}%</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Size:</span>
|
||||
<span class="info-value">{{ face.filter_features.bbox_size }}px</span>
|
||||
</div>
|
||||
|
||||
<div class="info-row">
|
||||
<span class="info-label">Source:</span>
|
||||
<span class="info-value source-badge" :class="face.primary_source">
|
||||
{{ face.primary_source === 'apple_vision' ? 'AV' : 'MP' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox for selection -->
|
||||
<div v-if="showCheckbox" class="face-checkbox" @click.stop="$emit('select', face)">
|
||||
<span v-if="selected">✓</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FaceMetadata } from '../composables/useFaceFilter';
|
||||
|
||||
defineProps<{
|
||||
face: FaceMetadata;
|
||||
selected?: boolean;
|
||||
showCheckbox?: boolean;
|
||||
}>();
|
||||
|
||||
defineEmits<{
|
||||
click: [face: FaceMetadata];
|
||||
select: [face: FaceMetadata];
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.face-card {
|
||||
position: relative;
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background: var(--bg-color, #fff);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.face-card:hover {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary-color, #007bff);
|
||||
}
|
||||
|
||||
.face-card-selected {
|
||||
border-color: var(--primary-color, #007bff);
|
||||
background: var(--selected-bg, #e3f2fd);
|
||||
}
|
||||
|
||||
/* Status-based styling */
|
||||
.status-accept {
|
||||
border-left: 3px solid #4caf50;
|
||||
}
|
||||
|
||||
.status-reject {
|
||||
border-left: 3px solid #f44336;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.status-review {
|
||||
border-left: 3px solid #ff9800;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-badge.accept {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-badge.reject {
|
||||
background: #ffebee;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.status-badge.review {
|
||||
background: #fff3e0;
|
||||
color: #e65100;
|
||||
}
|
||||
|
||||
.face-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.source-badge {
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.source-badge.apple_vision {
|
||||
background: #e3f2fd;
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
.source-badge.mediapipe {
|
||||
background: #f3e5f5;
|
||||
color: #7b1fa2;
|
||||
}
|
||||
|
||||
.face-checkbox {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid var(--border-color, #ddd);
|
||||
border-radius: 3px;
|
||||
background: var(--bg-color, #fff);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.face-checkbox:hover {
|
||||
border-color: var(--primary-color, #007bff);
|
||||
}
|
||||
|
||||
.face-checkbox span {
|
||||
color: var(--primary-color, #007bff);
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
406
src/components/FaceFilterPanel.vue
Normal file
406
src/components/FaceFilterPanel.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<template>
|
||||
<div class="face-filter-panel">
|
||||
<!-- Toolbar Toggle -->
|
||||
<div class="face-filter-toolbar">
|
||||
<button
|
||||
class="face-filter-toggle-btn"
|
||||
:class="{ active: showPanel }"
|
||||
@click="togglePanel"
|
||||
>
|
||||
🔍 Face Filter
|
||||
<span class="toggle-dot" :class="{ on: showPanel }"></span>
|
||||
</button>
|
||||
|
||||
<!-- Stats Summary -->
|
||||
<div v-if="stats" class="face-filter-stats-inline">
|
||||
<span>Total: {{ stats.total }}</span>
|
||||
<span>Filtered: {{ stats.filtered }}</span>
|
||||
<span v-if="stats.removed > 0" class="removed">Removed: {{ stats.removed }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Panel -->
|
||||
<div v-if="showPanel" class="face-filter-content">
|
||||
<!-- Mode Selection -->
|
||||
<div class="filter-row">
|
||||
<label>Mode:</label>
|
||||
<div class="mode-buttons">
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'instant' }"
|
||||
@click="setMode('instant')"
|
||||
title="Instant client-side filtering (5-10ms)"
|
||||
>
|
||||
Instant
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'backend' }"
|
||||
@click="setMode('backend')"
|
||||
title="Backend complex filtering (landmark, embedding, temporal)"
|
||||
>
|
||||
Backend
|
||||
</button>
|
||||
<button
|
||||
class="mode-btn"
|
||||
:class="{ active: mode === 'hybrid' }"
|
||||
@click="setMode('hybrid')"
|
||||
title="Hybrid: backend + instant filtering"
|
||||
>
|
||||
Hybrid
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Controls -->
|
||||
<div class="filter-row">
|
||||
<label>Confidence:</label>
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="rules.min_confidence"
|
||||
@change="onRuleChange"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.05"
|
||||
class="filter-input"
|
||||
placeholder="Min confidence"
|
||||
/>
|
||||
<span class="filter-hint">(0-1)</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label>Bbox Size:</label>
|
||||
<input
|
||||
type="number"
|
||||
v-model.number="rules.min_bbox_size"
|
||||
@change="onRuleChange"
|
||||
min="0"
|
||||
step="10"
|
||||
class="filter-input"
|
||||
placeholder="Min size (px)"
|
||||
/>
|
||||
<span class="filter-hint">(px)</span>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label>Source:</label>
|
||||
<select v-model="rules.source" @change="onRuleChange" class="filter-select">
|
||||
<option value="all">All</option>
|
||||
<option value="apple_vision">Apple Vision</option>
|
||||
<option value="mediapipe">MediaPipe</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
<label>Backend Status:</label>
|
||||
<select v-model="rules.backend_status" @change="onRuleChange" class="filter-select">
|
||||
<option value="all">All</option>
|
||||
<option value="accept">Accept</option>
|
||||
<option value="review">Review</option>
|
||||
<option value="reject">Reject</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="filter-actions">
|
||||
<button
|
||||
class="action-btn action-btn-primary"
|
||||
@click="handleApplyBackend"
|
||||
:disabled="loading || mode === 'instant'"
|
||||
>
|
||||
{{ loading ? 'Applying...' : 'Apply Backend Rules' }}
|
||||
</button>
|
||||
<button
|
||||
class="action-btn"
|
||||
@click="handleReset"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div v-if="error" class="error-message">
|
||||
❌ {{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Filter Stats (Backend Mode) -->
|
||||
<div v-if="filterStats && (mode === 'backend' || mode === 'hybrid')" class="filter-stats">
|
||||
<h4>Filter Statistics</h4>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<label>Total Faces:</label>
|
||||
<span>{{ filterStats.total_faces }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<label>Apple Vision:</label>
|
||||
<span>{{ filterStats.by_category?.by_source?.apple_vision || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<label>MediaPipe:</label>
|
||||
<span>{{ filterStats.by_category?.by_source?.mediapipe || 0 }}</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<label>MediaPipe Verified:</label>
|
||||
<span>{{ filterStats.by_category?.by_quality?.mediapipe_verified || 0 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useFaceFilter, type QuickFilterRules } from '../composables/useFaceFilter';
|
||||
|
||||
const props = defineProps<{
|
||||
fileUuid: string;
|
||||
}>();
|
||||
|
||||
const {
|
||||
mode,
|
||||
rules,
|
||||
filterResult,
|
||||
filterStats,
|
||||
loading,
|
||||
error,
|
||||
stats,
|
||||
setMode,
|
||||
updateRules,
|
||||
applyBackendFilter,
|
||||
resetToDefault
|
||||
} = useFaceFilter();
|
||||
|
||||
const showPanel = ref(false);
|
||||
|
||||
function togglePanel() {
|
||||
showPanel.value = !showPanel.value;
|
||||
}
|
||||
|
||||
function onRuleChange() {
|
||||
updateRules(rules.value);
|
||||
}
|
||||
|
||||
async function handleApplyBackend() {
|
||||
if (!props.fileUuid) return;
|
||||
await applyBackendFilter(props.fileUuid, null);
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
resetToDefault();
|
||||
}
|
||||
|
||||
// Expose for parent
|
||||
defineExpose({
|
||||
showPanel,
|
||||
stats
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.face-filter-panel {
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color, #fff);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.face-filter-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--border-color, #ddd);
|
||||
}
|
||||
|
||||
.face-filter-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color, #fff);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.face-filter-toggle-btn:hover {
|
||||
background: var(--hover-bg, #f5f5f5);
|
||||
}
|
||||
|
||||
.face-filter-toggle-btn.active {
|
||||
background: var(--primary-color, #007bff);
|
||||
color: white;
|
||||
border-color: var(--primary-color, #007bff);
|
||||
}
|
||||
|
||||
.toggle-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #ccc;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.toggle-dot.on {
|
||||
background: #4caf50;
|
||||
}
|
||||
|
||||
.face-filter-stats-inline {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.face-filter-stats-inline .removed {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.face-filter-content {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.filter-row label {
|
||||
min-width: 120px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color, #fff);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
background: var(--hover-bg, #f5f5f5);
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--primary-color, #007bff);
|
||||
color: white;
|
||||
border-color: var(--primary-color, #007bff);
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
width: 100px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: var(--bg-color, #fff);
|
||||
}
|
||||
|
||||
.filter-hint {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid var(--border-color, #ddd);
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--border-color, #ddd);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-color, #fff);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.action-btn:hover:not(:disabled) {
|
||||
background: var(--hover-bg, #f5f5f5);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.action-btn-primary {
|
||||
background: var(--primary-color, #007bff);
|
||||
color: white;
|
||||
border-color: var(--primary-color, #007bff);
|
||||
}
|
||||
|
||||
.action-btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover, #0056b3);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 10px;
|
||||
padding: 8px 12px;
|
||||
background: #ffebee;
|
||||
border: 1px solid #f44336;
|
||||
border-radius: 4px;
|
||||
color: #c62828;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.filter-stats {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid var(--border-color, #ddd);
|
||||
}
|
||||
|
||||
.filter-stats h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
background: var(--hover-bg, #f5f5f5);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.stat-item label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.stat-item span {
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
389
src/composables/useFaceFilter.ts
Normal file
389
src/composables/useFaceFilter.ts
Normal file
@@ -0,0 +1,389 @@
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
// Types
|
||||
export interface FaceMetadata {
|
||||
face_id: string;
|
||||
frame: number;
|
||||
primary_source: 'apple_vision' | 'mediapipe';
|
||||
primary_confidence: number;
|
||||
detection_sources: Array<{
|
||||
source_type: string;
|
||||
confidence: number;
|
||||
}>;
|
||||
filter_features: {
|
||||
face_id: string;
|
||||
frame: number;
|
||||
bbox_size: number;
|
||||
apple_vision_confidence: number;
|
||||
mediapipe_confidence?: number;
|
||||
eye_ratio?: number;
|
||||
nose_ratio?: number;
|
||||
pose_score?: number;
|
||||
mediapipe_detected?: boolean;
|
||||
mediapipe_iou?: number;
|
||||
embedding_similarity?: number;
|
||||
consecutive_frames?: number;
|
||||
total_frames_detected?: number;
|
||||
backend_filter_status?: 'accept' | 'reject' | 'review';
|
||||
};
|
||||
}
|
||||
|
||||
export interface QuickFilterRules {
|
||||
min_confidence?: number;
|
||||
max_confidence?: number;
|
||||
min_bbox_size?: number;
|
||||
max_bbox_size?: number;
|
||||
source?: 'apple_vision' | 'mediapipe' | 'all';
|
||||
backend_status?: 'accept' | 'reject' | 'review' | 'all';
|
||||
}
|
||||
|
||||
export interface FilterResult {
|
||||
total_faces: number;
|
||||
passed: number;
|
||||
filtered: number;
|
||||
passed_faces: Array<{
|
||||
face_id: string;
|
||||
frame: number;
|
||||
filter_result: {
|
||||
overall_confidence: number;
|
||||
recommendation: 'accept' | 'review' | 'reject';
|
||||
reasons: string[];
|
||||
};
|
||||
}>;
|
||||
filtered_faces: Array<{
|
||||
face_id: string;
|
||||
frame: number;
|
||||
filter_result: {
|
||||
overall_confidence: number;
|
||||
recommendation: 'accept' | 'review' | 'reject';
|
||||
reasons: string[];
|
||||
};
|
||||
}>;
|
||||
filter_stats: {
|
||||
landmark?: number;
|
||||
mediapipe?: number;
|
||||
embedding?: number;
|
||||
temporal?: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface FilterStats {
|
||||
total_faces: number;
|
||||
by_category: {
|
||||
total_faces: number;
|
||||
by_source: {
|
||||
apple_vision: number;
|
||||
mediapipe: number;
|
||||
};
|
||||
by_quality: {
|
||||
avg_eye_ratio?: number;
|
||||
avg_nose_ratio?: number;
|
||||
avg_pose_score?: number;
|
||||
mediapipe_verified: number;
|
||||
avg_embedding_similarity?: number;
|
||||
avg_consecutive_frames?: number;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
// Default rules
|
||||
const defaultRules: QuickFilterRules = {
|
||||
min_confidence: 0.5,
|
||||
min_bbox_size: 80,
|
||||
source: 'all',
|
||||
backend_status: 'accept'
|
||||
};
|
||||
|
||||
const STORAGE_KEY = 'momentry_face_filter_preferences';
|
||||
|
||||
// API helpers
|
||||
const apiBase = '/api/v1';
|
||||
|
||||
async function fetchFaces(fileUuid: string, params?: { page?: number; page_size?: number; source?: string }) {
|
||||
const queryParams = new URLSearchParams();
|
||||
if (params?.page) queryParams.set('page', params.page.toString());
|
||||
if (params?.page_size) queryParams.set('page_size', params.page_size.toString());
|
||||
if (params?.source) queryParams.set('source', params.source);
|
||||
|
||||
const response = await fetch(`${apiBase}/file/${fileUuid}/faces?${queryParams}`);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function applyFilter(fileUuid: string, rules?: any) {
|
||||
const response = await fetch(`${apiBase}/file/${fileUuid}/faces/filter`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rules: rules || null })
|
||||
});
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function getFilterStats(fileUuid: string) {
|
||||
const response = await fetch(`${apiBase}/file/${fileUuid}/filter-stats`);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
async function getFaceReport(fileUuid: string, faceId: string) {
|
||||
const response = await fetch(`${apiBase}/file/${fileUuid}/face/${faceId}/filter-report`);
|
||||
if (!response.ok) throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
return response.json();
|
||||
}
|
||||
|
||||
// Quick filter function (client-side)
|
||||
function quickFilter(faces: FaceMetadata[], rules: QuickFilterRules): FaceMetadata[] {
|
||||
return faces.filter(face => {
|
||||
// 1. Confidence 過濾
|
||||
if (rules.min_confidence && face.primary_confidence < rules.min_confidence) {
|
||||
return false;
|
||||
}
|
||||
if (rules.max_confidence && face.primary_confidence > rules.max_confidence) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 2. Bbox size 過濾
|
||||
if (rules.min_bbox_size && face.filter_features.bbox_size < rules.min_bbox_size) {
|
||||
return false;
|
||||
}
|
||||
if (rules.max_bbox_size && face.filter_features.bbox_size > rules.max_bbox_size) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 3. Source 過濾
|
||||
if (rules.source && rules.source !== 'all' && face.primary_source !== rules.source) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// 4. Backend status 過濾
|
||||
if (rules.backend_status && rules.backend_status !== 'all' &&
|
||||
face.filter_features.backend_filter_status !== rules.backend_status) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
// Hybrid filter function (backend + frontend)
|
||||
function hybridFilter(faces: FaceMetadata[], rules: QuickFilterRules): FaceMetadata[] {
|
||||
// 1. 前端過濾
|
||||
const frontendFiltered = quickFilter(faces, rules);
|
||||
|
||||
// 2. 後端已標示 backend_filter_status
|
||||
// 3. 兩條件 AND
|
||||
return frontendFiltered.filter(face =>
|
||||
face.filter_features.backend_filter_status === 'accept'
|
||||
);
|
||||
}
|
||||
|
||||
// Main composable
|
||||
export function useFaceFilter() {
|
||||
const mode = ref<'instant' | 'backend' | 'hybrid'>('instant');
|
||||
const rules = ref<QuickFilterRules>({ ...defaultRules });
|
||||
const allFaces = ref<FaceMetadata[]>([]);
|
||||
const filteredFaces = ref<FaceMetadata[]>([]);
|
||||
const filterResult = ref<FilterResult | null>(null);
|
||||
const filterStats = ref<FilterStats | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref<string | null>(null);
|
||||
|
||||
// Computed stats
|
||||
const stats = computed(() => ({
|
||||
total: allFaces.value.length,
|
||||
filtered: filteredFaces.value.length,
|
||||
removed: allFaces.value.length - filteredFaces.value.length
|
||||
}));
|
||||
|
||||
// Load preferences from localStorage
|
||||
function loadPreferences() {
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
const prefs = JSON.parse(stored);
|
||||
mode.value = prefs.mode || 'instant';
|
||||
rules.value = prefs.rules || { ...defaultRules };
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load preferences:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Save preferences to localStorage
|
||||
function savePreferences() {
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify({
|
||||
mode: mode.value,
|
||||
rules: rules.value
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Failed to save preferences:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize: load faces and apply filter
|
||||
async function initialize(fileUuid: string) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
// 1. 載入臉部元數據
|
||||
const data = await fetchFaces(fileUuid, { page: 1, page_size: 1000 });
|
||||
allFaces.value = data.data?.faces || data.faces || [];
|
||||
|
||||
// 2. 載入後端過濾結果（混合模式需要）
|
||||
if (mode.value === 'hybrid' || mode.value === 'backend') {
|
||||
const result = await applyFilter(fileUuid, null);
|
||||
filterResult.value = result;
|
||||
|
||||
// 合併後端過濾結果到元數據
|
||||
mergeBackendResults(result);
|
||||
}
|
||||
|
||||
// 3. 載入統計
|
||||
filterStats.value = await getFilterStats(fileUuid);
|
||||
|
||||
// 4. 套用過濾
|
||||
applyLocalFilter();
|
||||
|
||||
// 5. 載入偏好
|
||||
loadPreferences();
|
||||
} catch (err: any) {
|
||||
error.value = err.message || 'Failed to initialize';
|
||||
console.error('Failed to initialize face filter:', err);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Merge backend filter results into metadata
|
||||
function mergeBackendResults(result: FilterResult) {
|
||||
result.passed_faces.forEach(face => {
|
||||
const metadata = allFaces.value.find(f => f.face_id === face.face_id);
|
||||
if (metadata) {
|
||||
metadata.filter_features.backend_filter_status = face.filter_result.recommendation as any;
|
||||
}
|
||||
});
|
||||
|
||||
result.filtered_faces.forEach(face => {
|
||||
const metadata = allFaces.value.find(f => f.face_id === face.face_id);
|
||||
if (metadata) {
|
||||
metadata.filter_features.backend_filter_status = face.filter_result.recommendation as any;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Apply local filter based on mode
|
||||
function applyLocalFilter() {
|
||||
switch (mode.value) {
|
||||
case 'instant':
|
||||
filteredFaces.value = quickFilter(allFaces.value, rules.value);
|
||||
break;
|
||||
case 'backend':
|
||||
filteredFaces.value = allFaces.value.filter(face =>
|
||||
face.filter_features.backend_filter_status === 'accept'
|
||||
);
|
||||
break;
|
||||
case 'hybrid':
|
||||
filteredFaces.value = hybridFilter(allFaces.value, rules.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Update rules and re-filter
|
||||
function updateRules(newRules: Partial<QuickFilterRules>) {
|
||||
rules.value = { ...rules.value, ...newRules };
|
||||
applyLocalFilter();
|
||||
savePreferences();
|
||||
}
|
||||
|
||||
// Change mode and re-filter
|
||||
function setMode(newMode: 'instant' | 'backend' | 'hybrid') {
|
||||
mode.value = newMode;
|
||||
applyLocalFilter();
|
||||
savePreferences();
|
||||
}
|
||||
|
||||
// Apply backend filter
|
||||
async function applyBackendFilter(fileUuid: string, customRules?: any) {
|
||||
loading.value = true;
|
||||
error.value = null;
|
||||
|
||||
try {
|
||||
const result = await applyFilter(fileUuid, customRules);
|
||||
filterResult.value = result;
|
||||
|
||||
// 合併後端過濾結果到元數據
|
||||
mergeBackendResults(result);
|
||||
|
||||
// 重新套用過濾
|
||||
applyLocalFilter();
|
||||
|
||||
return result;
|
||||
} catch (err: any) {
|
||||
error.value = err.message || 'Failed to apply backend filter';
|
||||
console.error('Failed to apply backend filter:', err);
|
||||
return null;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Get face report
|
||||
async function getFaceReportData(fileUuid: string, faceId: string) {
|
||||
try {
|
||||
return await getFaceReport(fileUuid, faceId);
|
||||
} catch (err: any) {
|
||||
console.error('Failed to get face report:', err);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Refresh stats
|
||||
async function refreshStats(fileUuid: string) {
|
||||
try {
|
||||
filterStats.value = await getFilterStats(fileUuid);
|
||||
} catch (err: any) {
|
||||
console.error('Failed to refresh stats:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Reset to default
|
||||
function resetToDefault() {
|
||||
rules.value = { ...defaultRules };
|
||||
applyLocalFilter();
|
||||
savePreferences();
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
mode,
|
||||
rules,
|
||||
allFaces,
|
||||
filteredFaces,
|
||||
filterResult,
|
||||
filterStats,
|
||||
loading,
|
||||
error,
|
||||
stats,
|
||||
|
||||
// Actions
|
||||
initialize,
|
||||
updateRules,
|
||||
setMode,
|
||||
applyBackendFilter,
|
||||
getFaceReportData,
|
||||
refreshStats,
|
||||
resetToDefault,
|
||||
applyLocalFilter,
|
||||
|
||||
// API helpers (exposed for direct use)
|
||||
fetchFaces,
|
||||
applyFilter,
|
||||
getFilterStats,
|
||||
getFaceReport,
|
||||
quickFilter,
|
||||
hybridFilter
|
||||
};
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<div id="ms-view-admin">
|
||||
<div class="admin-header">
|
||||
<h1>Admin Panel</h1>
|
||||
<div class="admin-tabs">
|
||||
<button class="admin-tab" :class="{ active: activeTab === 'dashboard' }" @click="activeTab = 'dashboard'">Dashboard</button>
|
||||
<button class="admin-tab" :class="{ active: activeTab === 'users' }" @click="activeTab = 'users'">Users</button>
|
||||
<button class="admin-tab" :class="{ active: activeTab === 'shares' }" @click="activeTab = 'shares'">Shares</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-content">
|
||||
<div v-if="activeTab === 'dashboard'" class="dashboard-panel">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card"><div class="stat-label">CPU</div><div class="stat-value">{{ stats.cpu }}%</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Memory</div><div class="stat-value">{{ stats.memory }}%</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Disk</div><div class="stat-value">{{ stats.disk }}%</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Users</div><div class="stat-value">{{ users.length }}</div></div>
|
||||
<div class="stat-card"><div class="stat-label">Shares</div><div class="stat-value">{{ shares.length }}</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'users'" class="users-panel">
|
||||
<table class="admin-table">
|
||||
<thead><tr><th>Username</th><th>Home Dir</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="u in users" :key="u.username">
|
||||
<td>{{ u.username }}</td><td>{{ u.homeDir }}</td><td>{{ u.status === 1 ? 'Active' : 'Disabled' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div v-if="activeTab === 'shares'" class="shares-panel">
|
||||
<table class="admin-table">
|
||||
<thead><tr><th>Name</th><th>Port</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="s in shares" :key="s.name">
|
||||
<td>{{ s.name }}</td><td>{{ s.port }}</td><td>{{ s.status }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { apiCall } from '../api'
|
||||
|
||||
const activeTab = ref('dashboard')
|
||||
const stats = ref({ cpu: 0, memory: 0, disk: 0 })
|
||||
const users = ref<any[]>([])
|
||||
const shares = ref<any[]>([])
|
||||
|
||||
async function loadDashboard() {
|
||||
try { stats.value = await apiCall('get_system_stats', {}) || { cpu: 0, memory: 0, disk: 0 } } catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
try { users.value = await apiCall('list_admin_users', {}) || [] } catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
async function loadShares() {
|
||||
try { shares.value = await apiCall('list_shares', {}) || [] } catch (e) { console.error(e) }
|
||||
}
|
||||
|
||||
onMounted(async () => { await loadDashboard(); await loadUsers(); await loadShares() })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#ms-view-admin { padding: 20px; }
|
||||
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
|
||||
.admin-tabs { display: flex; gap: 10px; }
|
||||
.admin-tab { padding: 8px 16px; border: none; background: #f0f0f0; cursor: pointer; border-radius: 4px; }
|
||||
.admin-tab.active { background: #2563eb; color: white; }
|
||||
.admin-content { background: white; border-radius: 8px; padding: 20px; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px; }
|
||||
.stat-card { background: #f8f9fa; padding: 15px; border-radius: 8px; text-align: center; }
|
||||
.stat-label { font-size: 12px; color: #666; }
|
||||
.stat-value { font-size: 24px; font-weight: bold; }
|
||||
.admin-table { width: 100%; border-collapse: collapse; }
|
||||
.admin-table th, .admin-table td { padding: 10px; border: 1px solid #ddd; text-align: left; }
|
||||
</style>
|
||||
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div id="ms-view-client">
|
||||
<div class="client-header">
|
||||
<h1>File Manager</h1>
|
||||
<div class="client-toolbar">
|
||||
<button @click="goUp">Up</button>
|
||||
<button @click="createFolder">New Folder</button>
|
||||
<button @click="deleteSelected" :disabled="!selectedFile">Delete</button>
|
||||
<span class="current-path">{{ currentPath }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="client-content">
|
||||
<table class="file-table">
|
||||
<thead><tr><th>Name</th><th>Size</th><th>Type</th></tr></thead>
|
||||
<tbody>
|
||||
<tr v-for="f in files" :key="f.name" @click="selectFile(f)" :class="{ selected: selectedFile?.name === f.name }">
|
||||
<td><span :class="f.isDir ? 'folder-icon' : 'file-icon'">{{ f.isDir ? '📁' : '📄' }}</span> {{ f.name }}</td>
|
||||
<td>{{ f.isDir ? '-' : formatSize(f.size) }}</td>
|
||||
<td>{{ f.isDir ? 'Folder' : 'File' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { apiCall } from '../api'
|
||||
|
||||
const currentPath = ref('/')
|
||||
const files = ref<any[]>([])
|
||||
const selectedFile = ref<any>(null)
|
||||
|
||||
async function loadFiles() {
|
||||
try {
|
||||
const data = await apiCall('list_client_files', { path: currentPath.value })
|
||||
files.value = (data || []).sort((a: any, b: any) => a.isDir === b.isDir ? a.name.localeCompare(b.name) : a.isDir ? -1 : 1)
|
||||
} catch (e) { console.error(e); files.value = [] }
|
||||
}
|
||||
|
||||
function goUp() {
|
||||
const parts = currentPath.value.split('/').filter(p => p)
|
||||
parts.pop()
|
||||
currentPath.value = '/' + parts.join('/')
|
||||
loadFiles()
|
||||
}
|
||||
|
||||
function selectFile(f: any) {
|
||||
if (f.isDir) { currentPath.value = currentPath.value === '/' ? '/' + f.name : currentPath.value + '/' + f.name; loadFiles() }
|
||||
else { selectedFile.value = f }
|
||||
}
|
||||
|
||||
async function createFolder() {
|
||||
const name = prompt('Folder name:')
|
||||
if (!name) return
|
||||
const path = currentPath.value === '/' ? '/' + name : currentPath.value + '/' + name
|
||||
try { await apiCall('mkdir_client', { path }); loadFiles() } catch (e) { alert('Failed: ' + e) }
|
||||
}
|
||||
|
||||
async function deleteSelected() {
|
||||
if (!selectedFile.value || !confirm('Delete ' + selectedFile.value.name + '?')) return
|
||||
const path = currentPath.value === '/' ? '/' + selectedFile.value.name : currentPath.value + '/' + selectedFile.value.name
|
||||
try { await apiCall('rm_client', { path }); selectedFile.value = null; loadFiles() } catch (e) { alert('Failed: ' + e) }
|
||||
}
|
||||
|
||||
function formatSize(n: number) { return n < 1024 ? n + 'B' : n < 1024*1024 ? (n/1024).toFixed(1) + 'KB' : (n/1024/1024).toFixed(1) + 'MB' }
|
||||
|
||||
onMounted(loadFiles)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#ms-view-client { padding: 20px; }
|
||||
.client-header { margin-bottom: 15px; }
|
||||
.client-toolbar { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
|
||||
.client-toolbar button { padding: 6px 12px; border: 1px solid #ddd; background: white; cursor: pointer; border-radius: 4px; }
|
||||
.client-toolbar button:disabled { opacity: 0.5; }
|
||||
.current-path { margin-left: 20px; font-weight: bold; }
|
||||
.file-table { width: 100%; border-collapse: collapse; }
|
||||
.file-table th, .file-table td { padding: 8px; border: 1px solid #eee; }
|
||||
.file-table tr.selected { background: #e3f2fd; }
|
||||
.file-table tr:hover { background: #f5f5f5; cursor: pointer; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user