phase 12
This commit is contained in:
@@ -7,6 +7,9 @@
|
||||
export type AssetStatus = "pending" | "ready" | "error";
|
||||
export type JobStatus = "pending" | "processing" | "completed" | "failed" | "cancelled";
|
||||
export type ChunkJobStatus = "pending" | "chunking" | "processing" | "collecting" | "completed" | "failed" | "cancelled";
|
||||
export type DetectJobStatus = "pending" | "running" | "paused" | "completed" | "failed" | "cancelled";
|
||||
export type RunType = "initial" | "replay" | "retry";
|
||||
export type BrandSource = "ocr" | "local_vlm" | "cloud_llm" | "manual";
|
||||
|
||||
export interface MediaAsset {
|
||||
id: string;
|
||||
@@ -97,6 +100,75 @@ export interface ChunkJob {
|
||||
completed_at: string | null;
|
||||
}
|
||||
|
||||
export interface DetectJob {
|
||||
id: string;
|
||||
source_asset_id: string;
|
||||
video_path: string;
|
||||
profile_name: string;
|
||||
parent_job_id: string | null;
|
||||
run_type: RunType;
|
||||
replay_from_stage: string | null;
|
||||
config_overrides: Record<string, unknown>;
|
||||
status: DetectJobStatus;
|
||||
current_stage: string | null;
|
||||
progress: number;
|
||||
error_message: string | null;
|
||||
total_detections: number;
|
||||
brands_found: number;
|
||||
cloud_llm_calls: number;
|
||||
estimated_cost_usd: number;
|
||||
celery_task_id: string | null;
|
||||
priority: number;
|
||||
created_at: string | null;
|
||||
started_at: string | null;
|
||||
completed_at: string | null;
|
||||
}
|
||||
|
||||
export interface StageCheckpoint {
|
||||
id: string;
|
||||
job_id: string;
|
||||
stage: string;
|
||||
stage_index: number;
|
||||
frames_prefix: string;
|
||||
frames_manifest: Record<string, unknown>;
|
||||
frames_meta: string[];
|
||||
filtered_frame_sequences: number[];
|
||||
boxes_by_frame: Record<string, unknown>;
|
||||
text_candidates: string[];
|
||||
unresolved_candidates: string[];
|
||||
detections: string[];
|
||||
stats: Record<string, unknown>;
|
||||
config_snapshot: Record<string, unknown>;
|
||||
config_overrides: Record<string, unknown>;
|
||||
video_path: string;
|
||||
profile_name: string;
|
||||
created_at: string | null;
|
||||
}
|
||||
|
||||
export interface KnownBrand {
|
||||
id: string;
|
||||
canonical_name: string;
|
||||
aliases: string[];
|
||||
first_source: BrandSource;
|
||||
total_occurrences: number;
|
||||
confirmed: boolean;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
export interface SourceBrandSighting {
|
||||
id: string;
|
||||
source_asset_id: string;
|
||||
brand_id: string;
|
||||
brand_name: string;
|
||||
first_seen_timestamp: number;
|
||||
last_seen_timestamp: number;
|
||||
occurrences: number;
|
||||
detection_source: BrandSource;
|
||||
avg_confidence: number;
|
||||
created_at: string | null;
|
||||
}
|
||||
|
||||
export interface CreateJobRequest {
|
||||
source_asset_id: string;
|
||||
preset_id: string | null;
|
||||
|
||||
@@ -10,6 +10,9 @@ import BrandTablePanel from './panels/BrandTablePanel.vue'
|
||||
import TimelinePanel from './panels/TimelinePanel.vue'
|
||||
import CostStatsPanel from './panels/CostStatsPanel.vue'
|
||||
import type { StatsUpdate, RunContext } from './types/sse-contract'
|
||||
import { usePipelineStore } from './stores/pipeline'
|
||||
|
||||
const pipeline = usePipelineStore()
|
||||
|
||||
const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
|
||||
const stats = ref<StatsUpdate | null>(null)
|
||||
@@ -89,56 +92,99 @@ source.connect()
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onPipelineResize" />
|
||||
|
||||
<!-- Right area: interactive panels -->
|
||||
<!-- Right area: mode-dependent content -->
|
||||
<div class="content-col">
|
||||
<!-- Row 1: Frame viewer + Funnel -->
|
||||
<div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
|
||||
<FramePanel :source="source" :status="status" />
|
||||
<FunnelPanel :source="source" :status="status" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onViewerResize" />
|
||||
|
||||
<!-- Row 2: Detections + Stats side by side -->
|
||||
<div class="detections-stats-row">
|
||||
<div class="detections-col" :style="{ flex: detectionsFlex }">
|
||||
<Panel title="Detections" :status="status">
|
||||
<div class="detections-stack">
|
||||
<div class="timeline-section" :style="{ flex: timelineFlex }">
|
||||
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onTimelineResize" />
|
||||
<div class="table-section" :style="{ flex: tableFlex }">
|
||||
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
<!-- === NORMAL MODE === -->
|
||||
<template v-if="pipeline.layoutMode === 'normal'">
|
||||
<div class="viewer-row" :style="{ height: viewerHeight + 'px' }">
|
||||
<FramePanel :source="source" :status="status" />
|
||||
<FunnelPanel :source="source" :status="status" />
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
|
||||
<div class="stats-col">
|
||||
<Panel title="Pipeline" :status="status">
|
||||
<div class="pipeline-stats">
|
||||
<div class="stat" v-for="s in [
|
||||
{ label: 'Frames', value: stats?.frames_extracted ?? '—' },
|
||||
{ label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
|
||||
{ label: 'Regions', value: stats?.regions_detected ?? '—' },
|
||||
{ label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
|
||||
{ label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
|
||||
{ label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
|
||||
]" :key="s.label">
|
||||
<span class="label">{{ s.label }}</span>
|
||||
<span class="value">{{ s.value }}</span>
|
||||
<ResizeHandle direction="vertical" @resize="onViewerResize" />
|
||||
|
||||
<div class="detections-stats-row">
|
||||
<div class="detections-col" :style="{ flex: detectionsFlex }">
|
||||
<Panel title="Detections" :status="status">
|
||||
<div class="detections-stack">
|
||||
<div class="timeline-section" :style="{ flex: timelineFlex }">
|
||||
<TimelinePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
<ResizeHandle direction="vertical" @resize="onTimelineResize" />
|
||||
<div class="table-section" :style="{ flex: tableFlex }">
|
||||
<BrandTablePanel :source="source" :status="status" :embedded="true" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
<CostStatsPanel :source="source" :status="status" />
|
||||
</Panel>
|
||||
</div>
|
||||
<ResizeHandle direction="horizontal" @resize="onDetectionsResize" />
|
||||
<div class="stats-col">
|
||||
<Panel title="Pipeline" :status="status">
|
||||
<div class="pipeline-stats">
|
||||
<div class="stat" v-for="s in [
|
||||
{ label: 'Frames', value: stats?.frames_extracted ?? '—' },
|
||||
{ label: 'After filter', value: stats?.frames_after_scene_filter ?? '—' },
|
||||
{ label: 'Regions', value: stats?.regions_detected ?? '—' },
|
||||
{ label: 'OCR resolved', value: stats?.regions_resolved_by_ocr ?? '—' },
|
||||
{ label: 'VLM escalated', value: stats?.regions_escalated_to_local_vlm ?? '—' },
|
||||
{ label: 'Cloud escalated', value: stats?.regions_escalated_to_cloud_llm ?? '—' },
|
||||
]" :key="s.label">
|
||||
<span class="label">{{ s.label }}</span>
|
||||
<span class="value">{{ s.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
<CostStatsPanel :source="source" :status="status" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- === BBOX EDITOR MODE === -->
|
||||
<template v-else-if="pipeline.layoutMode === 'bbox_editor'">
|
||||
<Panel :title="`Region Editor — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
||||
<div class="editor-placeholder">
|
||||
<div class="editor-frame">
|
||||
<FramePanel :source="source" :status="status" />
|
||||
</div>
|
||||
<div class="editor-tools">
|
||||
<p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
|
||||
<p>Draw polygons to define regions</p>
|
||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<!-- === STAGE EDITOR MODE === -->
|
||||
<template v-else-if="pipeline.layoutMode === 'stage_editor'">
|
||||
<Panel :title="`Stage Config — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
||||
<div class="editor-placeholder">
|
||||
<div class="editor-config">
|
||||
<p>Stage: <strong>{{ pipeline.editorStage }}</strong></p>
|
||||
<p>Config fields will be auto-generated from stage registry</p>
|
||||
<button class="editor-close" @click="pipeline.closeEditor()">✕ Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom: Log (full width) -->
|
||||
<!-- Bottom bar: Log or Blob viewer depending on mode -->
|
||||
<div class="log-row">
|
||||
<LogPanel :source="source" :status="status" />
|
||||
<template v-if="pipeline.layoutMode === 'bbox_editor'">
|
||||
<Panel :title="`Blobs — ${pipeline.editorStage?.replace(/_/g, ' ')}`" :status="status">
|
||||
<div class="blob-viewer">
|
||||
<div class="blob-placeholder">
|
||||
Blob viewer: crops, preprocessed images, OCR results for {{ pipeline.editorStage }}
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
<template v-else>
|
||||
<LogPanel :source="source" :status="status" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -290,4 +336,67 @@ header h1 { font-size: var(--font-size-lg); font-weight: 600; }
|
||||
}
|
||||
|
||||
.empty { color: var(--text-dim); padding: var(--space-6); text-align: center; }
|
||||
|
||||
/* Editor placeholders */
|
||||
.editor-placeholder {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.editor-frame {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.editor-tools {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
padding: var(--space-3);
|
||||
background: var(--surface-2);
|
||||
border-radius: var(--panel-radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.editor-config {
|
||||
padding: var(--space-4);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.editor-close {
|
||||
background: var(--surface-3);
|
||||
border: 1px solid var(--surface-3);
|
||||
border-radius: 4px;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
cursor: pointer;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.editor-close:hover {
|
||||
background: var(--status-error);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.blob-viewer {
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.blob-placeholder {
|
||||
padding: var(--space-4);
|
||||
color: var(--text-dim);
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,7 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
const app = createApp(App)
|
||||
app.use(createPinia())
|
||||
app.mount('#app')
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, computed } from 'vue'
|
||||
import { Panel } from 'mpr-ui-framework'
|
||||
import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
|
||||
import type { FrameBBox } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
|
||||
@@ -11,8 +11,23 @@ const props = defineProps<{
|
||||
}>()
|
||||
|
||||
const imageSrc = ref('')
|
||||
const boxes = ref<FrameBBox[]>([])
|
||||
|
||||
// Per-stage box accumulation
|
||||
const stageBoxes = ref<Record<string, FrameBBox[]>>({})
|
||||
const stageStatus = ref<Record<string, string>>({})
|
||||
// Toggles — multiple can be active at once, all start ON
|
||||
const activeToggles = ref<Set<string>>(new Set())
|
||||
|
||||
const STAGE_TABS = [
|
||||
{ key: 'detect_objects', label: 'YOLO', color: '#f5a623' },
|
||||
{ key: 'preprocess', label: 'Prep', color: '#e0e0e0' },
|
||||
{ key: 'run_ocr', label: 'OCR', color: '#ff8c42' },
|
||||
{ key: 'match_brands', label: 'Brands', color: '#3ecf8e' },
|
||||
{ key: 'escalate_vlm', label: 'VLM', color: '#4f9cf9' },
|
||||
{ key: 'escalate_cloud', label: 'Cloud', color: '#a78bfa' },
|
||||
]
|
||||
|
||||
// Frame updates — store image, replace (not accumulate) boxes per frame
|
||||
props.source.on<{
|
||||
frame_ref: number
|
||||
timestamp: number
|
||||
@@ -20,12 +35,230 @@ props.source.on<{
|
||||
boxes: FrameBBox[]
|
||||
}>('frame_update', (e) => {
|
||||
imageSrc.value = e.jpeg_b64
|
||||
boxes.value = e.boxes
|
||||
|
||||
// Group incoming boxes by stage, replace previous for that stage
|
||||
const incoming: Record<string, FrameBBox[]> = {}
|
||||
for (const box of e.boxes) {
|
||||
const stage = box.stage || 'detect_objects'
|
||||
if (!incoming[stage]) incoming[stage] = []
|
||||
incoming[stage].push(box)
|
||||
}
|
||||
|
||||
for (const [stage, boxes] of Object.entries(incoming)) {
|
||||
stageBoxes.value[stage] = boxes
|
||||
ensureToggleOn(stage)
|
||||
}
|
||||
})
|
||||
|
||||
// Track stage status from graph updates
|
||||
props.source.on<{ nodes: { id: string; status: string }[] }>('graph_update', (e) => {
|
||||
for (const node of e.nodes) {
|
||||
stageStatus.value[node.id] = node.status
|
||||
}
|
||||
})
|
||||
|
||||
// Detection events also produce boxes
|
||||
props.source.on<{
|
||||
brand: string
|
||||
confidence: number
|
||||
source: string
|
||||
timestamp: number
|
||||
frame_ref: number | null
|
||||
bbox?: { x: number; y: number; w: number; h: number } | null
|
||||
}>('detection', (e) => {
|
||||
if (!e.bbox) return
|
||||
|
||||
const stage = sourceToStage(e.source)
|
||||
const box: FrameBBox = {
|
||||
x: e.bbox.x,
|
||||
y: e.bbox.y,
|
||||
w: e.bbox.w,
|
||||
h: e.bbox.h,
|
||||
confidence: e.confidence,
|
||||
label: e.brand,
|
||||
resolved_brand: e.brand,
|
||||
source: e.source,
|
||||
stage: stage,
|
||||
}
|
||||
|
||||
if (!stageBoxes.value[stage]) {
|
||||
stageBoxes.value[stage] = []
|
||||
}
|
||||
stageBoxes.value[stage].push(box)
|
||||
ensureToggleOn(stage)
|
||||
})
|
||||
|
||||
function toggleStage(key: string) {
|
||||
if (activeToggles.value.has(key)) {
|
||||
activeToggles.value.delete(key)
|
||||
} else {
|
||||
activeToggles.value.add(key)
|
||||
}
|
||||
// Force reactivity
|
||||
activeToggles.value = new Set(activeToggles.value)
|
||||
}
|
||||
|
||||
function ensureToggleOn(stage: string) {
|
||||
if (!activeToggles.value.has(stage)) {
|
||||
activeToggles.value.add(stage)
|
||||
activeToggles.value = new Set(activeToggles.value)
|
||||
}
|
||||
}
|
||||
|
||||
function sourceToStage(source: string): string {
|
||||
const map: Record<string, string> = {
|
||||
ocr: 'match_brands',
|
||||
local_vlm: 'escalate_vlm',
|
||||
cloud_llm: 'escalate_cloud',
|
||||
}
|
||||
return map[source] || 'match_brands'
|
||||
}
|
||||
|
||||
// Filtered boxes — show all toggled-on stages
|
||||
const visibleBoxes = computed<FrameBBox[]>(() => {
|
||||
const result: FrameBBox[] = []
|
||||
for (const [stage, boxes] of Object.entries(stageBoxes.value)) {
|
||||
if (activeToggles.value.has(stage)) {
|
||||
result.push(...boxes)
|
||||
}
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
// Which toggles are visible (stage exists in pipeline)
|
||||
const visibleTabs = computed(() => {
|
||||
return STAGE_TABS.filter((tab) => {
|
||||
const status = stageStatus.value[tab.key]
|
||||
return status !== undefined
|
||||
})
|
||||
})
|
||||
|
||||
// Whether a toggle has data (boxes available)
|
||||
function hasData(key: string): boolean {
|
||||
return (stageBoxes.value[key]?.length || 0) > 0
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Panel title="Frame Viewer" :status="status">
|
||||
<FrameRenderer :image-src="imageSrc" :boxes="boxes" />
|
||||
<div class="frame-panel">
|
||||
<div class="stage-toggles" v-if="visibleTabs.length > 0">
|
||||
<button
|
||||
v-for="tab in visibleTabs"
|
||||
:key="tab.key"
|
||||
:class="['stage-toggle', {
|
||||
active: activeToggles.has(tab.key),
|
||||
running: stageStatus[tab.key] === 'running',
|
||||
done: stageStatus[tab.key] === 'done',
|
||||
disabled: !hasData(tab.key),
|
||||
}]"
|
||||
:style="{ '--toggle-color': tab.color }"
|
||||
:disabled="!hasData(tab.key)"
|
||||
@click="toggleStage(tab.key)"
|
||||
>
|
||||
<span class="toggle-dot" />
|
||||
{{ tab.label }}
|
||||
<span class="toggle-count" v-if="stageBoxes[tab.key]?.length">
|
||||
{{ stageBoxes[tab.key].length }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="frame-content">
|
||||
<FrameRenderer :image-src="imageSrc" :boxes="visibleBoxes" />
|
||||
</div>
|
||||
</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.frame-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-toggles {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
background: var(--surface-2);
|
||||
border-bottom: var(--panel-border);
|
||||
}
|
||||
|
||||
.stage-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 3px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.stage-toggle:hover {
|
||||
color: var(--text-secondary);
|
||||
background: var(--surface-3);
|
||||
}
|
||||
|
||||
.stage-toggle.active {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--toggle-color, var(--text-dim));
|
||||
background: var(--surface-3);
|
||||
}
|
||||
|
||||
.stage-toggle:not(.active) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.stage-toggle:not(.active) .toggle-dot {
|
||||
background: var(--text-dim);
|
||||
}
|
||||
|
||||
.stage-toggle.disabled {
|
||||
opacity: 0.3;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.stage-toggle.disabled:hover {
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.stage-toggle.running .toggle-dot {
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
.toggle-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--toggle-color, var(--text-dim));
|
||||
}
|
||||
|
||||
.toggle-count {
|
||||
background: var(--surface-1);
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
font-size: 9px;
|
||||
}
|
||||
|
||||
.frame-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,10 +4,11 @@ import { Panel } from 'mpr-ui-framework'
|
||||
import GraphRenderer from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
|
||||
import type { GraphNode } from 'mpr-ui-framework/src/renderers/GraphRenderer.vue'
|
||||
import type { DataSource } from 'mpr-ui-framework'
|
||||
import { usePipelineStore } from '../stores/pipeline'
|
||||
|
||||
const PIPELINE_NODES = [
|
||||
'extract_frames', 'filter_scenes', 'detect_objects', 'run_ocr',
|
||||
'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
|
||||
'extract_frames', 'filter_scenes', 'detect_objects', 'preprocess',
|
||||
'run_ocr', 'match_brands', 'escalate_vlm', 'escalate_cloud', 'compile_report',
|
||||
]
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -15,6 +16,8 @@ const props = defineProps<{
|
||||
status?: 'idle' | 'live' | 'processing' | 'error'
|
||||
}>()
|
||||
|
||||
const pipeline = usePipelineStore()
|
||||
|
||||
const nodes = ref<GraphNode[]>(
|
||||
PIPELINE_NODES.map((id) => ({ id, status: 'pending' }))
|
||||
)
|
||||
@@ -22,10 +25,22 @@ const nodes = ref<GraphNode[]>(
|
||||
props.source.on<{ nodes: GraphNode[] }>('graph_update', (e) => {
|
||||
nodes.value = e.nodes
|
||||
})
|
||||
|
||||
function onOpenRegionEditor(stage: string) {
|
||||
pipeline.openBBoxEditor(stage)
|
||||
}
|
||||
|
||||
function onOpenStageEditor(stage: string) {
|
||||
pipeline.openStageEditor(stage)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Panel title="Pipeline" :status="status">
|
||||
<GraphRenderer :nodes="nodes" />
|
||||
<GraphRenderer
|
||||
:nodes="nodes"
|
||||
@open-region-editor="onOpenRegionEditor"
|
||||
@open-stage-editor="onOpenStageEditor"
|
||||
/>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
47
ui/detection-app/src/stores/config.ts
Normal file
47
ui/detection-app/src/stores/config.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Config store — aggregated config from all panels.
|
||||
*
|
||||
* Panels write their own config slice (ocr, detection, etc.).
|
||||
* Pipeline panel reads the full config and triggers replay.
|
||||
* State shape defined in types/store-state.ts.
|
||||
*/
|
||||
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { ConfigState, ConfigOverrides } from '../types/store-state'
|
||||
|
||||
export const useConfigStore = defineStore('config', () => {
|
||||
const current = ref<ConfigOverrides>({})
|
||||
const pending = ref<ConfigOverrides>({})
|
||||
|
||||
const dirty = computed(() => JSON.stringify(pending.value) !== JSON.stringify(current.value))
|
||||
|
||||
function updatePending(section: keyof ConfigOverrides, values: Record<string, unknown>) {
|
||||
pending.value = {
|
||||
...pending.value,
|
||||
[section]: { ...(pending.value[section] as Record<string, unknown> || {}), ...values },
|
||||
}
|
||||
}
|
||||
|
||||
function apply() {
|
||||
current.value = JSON.parse(JSON.stringify(pending.value))
|
||||
}
|
||||
|
||||
function revert() {
|
||||
pending.value = JSON.parse(JSON.stringify(current.value))
|
||||
}
|
||||
|
||||
function loadFromServer(config: ConfigOverrides) {
|
||||
current.value = config
|
||||
pending.value = JSON.parse(JSON.stringify(config))
|
||||
}
|
||||
|
||||
function getOverrides(): ConfigOverrides {
|
||||
return JSON.parse(JSON.stringify(pending.value))
|
||||
}
|
||||
|
||||
return {
|
||||
current, pending, dirty,
|
||||
updatePending, apply, revert, loadFromServer, getOverrides,
|
||||
}
|
||||
})
|
||||
40
ui/detection-app/src/stores/data.ts
Normal file
40
ui/detection-app/src/stores/data.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
/**
|
||||
* Data store — latest SSE data, replaces inline refs in App.vue.
|
||||
*
|
||||
* The SSE DataSource writes here. Panels read from here.
|
||||
* State shape defined in types/store-state.ts.
|
||||
*/
|
||||
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import type { DataState } from '../types/store-state'
|
||||
import type { StatsUpdate, Detection } from '../types/sse-contract'
|
||||
|
||||
export const useDataStore = defineStore('data', () => {
|
||||
const stats = ref<StatsUpdate | null>(null)
|
||||
const detections = ref<Detection[]>([])
|
||||
const connectionStatus = ref<'idle' | 'connecting' | 'live' | 'error'>('idle')
|
||||
|
||||
function updateStats(s: StatsUpdate) {
|
||||
stats.value = s
|
||||
}
|
||||
|
||||
function addDetection(d: Detection) {
|
||||
detections.value.push(d)
|
||||
}
|
||||
|
||||
function setConnectionStatus(s: 'idle' | 'connecting' | 'live' | 'error') {
|
||||
connectionStatus.value = s
|
||||
}
|
||||
|
||||
function reset() {
|
||||
stats.value = null
|
||||
detections.value = []
|
||||
connectionStatus.value = 'idle'
|
||||
}
|
||||
|
||||
return {
|
||||
stats, detections, connectionStatus,
|
||||
updateStats, addDetection, setConnectionStatus, reset,
|
||||
}
|
||||
})
|
||||
13
ui/detection-app/src/stores/index.ts
Normal file
13
ui/detection-app/src/stores/index.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Store index — re-exports all stores.
|
||||
*
|
||||
* State shapes are in types/store-state.ts (the contract).
|
||||
* These files are the Pinia bindings (the implementation).
|
||||
* Swap Pinia for anything else by replacing these files,
|
||||
* keeping the same function signatures.
|
||||
*/
|
||||
|
||||
export { usePipelineStore } from './pipeline'
|
||||
export { useConfigStore } from './config'
|
||||
export { useSelectionStore } from './selection'
|
||||
export { useDataStore } from './data'
|
||||
96
ui/detection-app/src/stores/pipeline.ts
Normal file
96
ui/detection-app/src/stores/pipeline.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* Pipeline store — run state, transport controls, checkpoint status.
|
||||
*
|
||||
* State shape defined in types/store-state.ts.
|
||||
* This file is just the Pinia binding.
|
||||
*/
|
||||
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import type { NodeState } from '../types/store-state'
|
||||
import type { CheckpointInfo } from '../types/sse-contract'
|
||||
|
||||
export const usePipelineStore = defineStore('pipeline', () => {
|
||||
const jobId = ref('')
|
||||
const status = ref<string>('idle')
|
||||
const nodes = ref<NodeState[]>([])
|
||||
const currentStage = ref<string | null>(null)
|
||||
const runId = ref<string | null>(null)
|
||||
const parentJobId = ref<string | null>(null)
|
||||
const runType = ref<string>('initial')
|
||||
const checkpoints = ref<CheckpointInfo[]>([])
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
// Layout mode
|
||||
const layoutMode = ref<string>('normal') // normal | bbox_editor | stage_editor
|
||||
const editorStage = ref<string | null>(null) // which stage's editor is open
|
||||
|
||||
const isRunning = computed(() => status.value === 'running')
|
||||
const isPaused = computed(() => status.value === 'paused')
|
||||
const canReplay = computed(() => checkpoints.value.length > 0)
|
||||
const isEditing = computed(() => layoutMode.value !== 'normal')
|
||||
|
||||
function setJob(id: string) {
|
||||
jobId.value = id
|
||||
}
|
||||
|
||||
function setStatus(s: string) {
|
||||
status.value = s
|
||||
}
|
||||
|
||||
function updateNodes(nodeList: NodeState[]) {
|
||||
nodes.value = nodeList
|
||||
const running = nodeList.find((n) => n.status === 'running')
|
||||
currentStage.value = running?.id ?? null
|
||||
}
|
||||
|
||||
function setRunContext(rid: string, parentId: string, rtype: string) {
|
||||
runId.value = rid
|
||||
parentJobId.value = parentId
|
||||
runType.value = rtype
|
||||
}
|
||||
|
||||
function setCheckpoints(list: CheckpointInfo[]) {
|
||||
checkpoints.value = list
|
||||
}
|
||||
|
||||
function setError(msg: string | null) {
|
||||
error.value = msg
|
||||
if (msg) status.value = 'error'
|
||||
}
|
||||
|
||||
function openBBoxEditor(stage: string) {
|
||||
layoutMode.value = 'bbox_editor'
|
||||
editorStage.value = stage
|
||||
}
|
||||
|
||||
function openStageEditor(stage: string) {
|
||||
layoutMode.value = 'stage_editor'
|
||||
editorStage.value = stage
|
||||
}
|
||||
|
||||
function closeEditor() {
|
||||
layoutMode.value = 'normal'
|
||||
editorStage.value = null
|
||||
}
|
||||
|
||||
function reset() {
|
||||
status.value = 'idle'
|
||||
layoutMode.value = 'normal'
|
||||
editorStage.value = null
|
||||
nodes.value = []
|
||||
currentStage.value = null
|
||||
runId.value = null
|
||||
parentJobId.value = null
|
||||
runType.value = 'initial'
|
||||
error.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
jobId, status, nodes, currentStage, runId, parentJobId, runType,
|
||||
checkpoints, error, layoutMode, editorStage,
|
||||
isRunning, isPaused, canReplay, isEditing,
|
||||
setJob, setStatus, updateNodes, setRunContext, setCheckpoints, setError,
|
||||
openBBoxEditor, openStageEditor, closeEditor, reset,
|
||||
}
|
||||
})
|
||||
59
ui/detection-app/src/stores/selection.ts
Normal file
59
ui/detection-app/src/stores/selection.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
/**
|
||||
* Selection store — cross-panel selection state.
|
||||
*
|
||||
* When you click a detection in the table, the frame viewer highlights it.
|
||||
* When you hover on the timeline, the crosshair syncs across charts.
|
||||
* When you draw a bbox, it feeds into the config store.
|
||||
*
|
||||
* State shape defined in types/store-state.ts.
|
||||
*/
|
||||
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import type { SelectionState } from '../types/store-state'
|
||||
import type { Detection } from '../types/sse-contract'
|
||||
|
||||
export const useSelectionStore = defineStore('selection', () => {
|
||||
const selectedFrame = ref<number | null>(null)
|
||||
const selectedDetection = ref<Detection | null>(null)
|
||||
const selectedBrand = ref<string | null>(null)
|
||||
const hoveredTimestamp = ref<number | null>(null)
|
||||
const bboxRegion = ref<{ x: number; y: number; w: number; h: number } | null>(null)
|
||||
|
||||
function selectFrame(seq: number | null) {
|
||||
selectedFrame.value = seq
|
||||
}
|
||||
|
||||
function selectDetection(det: Detection | null) {
|
||||
selectedDetection.value = det
|
||||
if (det) {
|
||||
selectedBrand.value = det.brand
|
||||
selectedFrame.value = det.frame_ref
|
||||
}
|
||||
}
|
||||
|
||||
function selectBrand(brand: string | null) {
|
||||
selectedBrand.value = brand
|
||||
}
|
||||
|
||||
function hoverTimestamp(ts: number | null) {
|
||||
hoveredTimestamp.value = ts
|
||||
}
|
||||
|
||||
function setBbox(region: { x: number; y: number; w: number; h: number } | null) {
|
||||
bboxRegion.value = region
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
selectedFrame.value = null
|
||||
selectedDetection.value = null
|
||||
selectedBrand.value = null
|
||||
hoveredTimestamp.value = null
|
||||
bboxRegion.value = null
|
||||
}
|
||||
|
||||
return {
|
||||
selectedFrame, selectedDetection, selectedBrand, hoveredTimestamp, bboxRegion,
|
||||
selectFrame, selectDetection, selectBrand, hoverTimestamp, setBbox, clearAll,
|
||||
}
|
||||
})
|
||||
@@ -96,16 +96,12 @@ export interface JobComplete {
|
||||
report: DetectionReportSummary | null;
|
||||
}
|
||||
|
||||
// --- Run context (injected into all SSE events) ---
|
||||
|
||||
export interface RunContext {
|
||||
run_id: string;
|
||||
parent_job_id: string;
|
||||
run_type: 'initial' | 'replay' | 'retry';
|
||||
run_type: string;
|
||||
}
|
||||
|
||||
// --- Checkpoint API types ---
|
||||
|
||||
export interface CheckpointInfo {
|
||||
stage: string;
|
||||
}
|
||||
@@ -113,7 +109,7 @@ export interface CheckpointInfo {
|
||||
export interface ReplayRequest {
|
||||
job_id: string;
|
||||
start_stage: string;
|
||||
config_overrides?: Record<string, unknown>;
|
||||
config_overrides: Record<string, unknown> | null;
|
||||
}
|
||||
|
||||
export interface ReplayResponse {
|
||||
@@ -126,9 +122,9 @@ export interface ReplayResponse {
|
||||
|
||||
export interface RetryRequest {
|
||||
job_id: string;
|
||||
config_overrides?: Record<string, unknown>;
|
||||
start_stage?: string;
|
||||
schedule_seconds?: number;
|
||||
config_overrides: Record<string, unknown> | null;
|
||||
start_stage: string;
|
||||
schedule_seconds: number | null;
|
||||
}
|
||||
|
||||
export interface RetryResponse {
|
||||
|
||||
82
ui/detection-app/src/types/store-state.ts
Normal file
82
ui/detection-app/src/types/store-state.ts
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* TypeScript Types - GENERATED FILE
|
||||
*
|
||||
* Do not edit directly. Regenerate using modelgen.
|
||||
*/
|
||||
|
||||
|
||||
export interface NodeState {
|
||||
id: string;
|
||||
status: string;
|
||||
has_checkpoint: boolean;
|
||||
has_region_editor: boolean;
|
||||
has_config_editor: boolean;
|
||||
}
|
||||
|
||||
export interface PipelineState {
|
||||
job_id: string;
|
||||
status: string;
|
||||
layout_mode: string;
|
||||
editor_stage: string | null;
|
||||
nodes: NodeState[];
|
||||
current_stage: string | null;
|
||||
run_id: string | null;
|
||||
parent_job_id: string | null;
|
||||
run_type: string;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export interface DetectionConfigOverrides {
|
||||
model_name: string | null;
|
||||
confidence_threshold: number | null;
|
||||
target_classes: string[] | null;
|
||||
}
|
||||
|
||||
export interface OCRConfigOverrides {
|
||||
languages: string[] | null;
|
||||
min_confidence: number | null;
|
||||
}
|
||||
|
||||
export interface ResolverConfigOverrides {
|
||||
fuzzy_threshold: number | null;
|
||||
}
|
||||
|
||||
export interface EscalationConfigOverrides {
|
||||
vlm_min_confidence: number | null;
|
||||
cloud_min_confidence: number | null;
|
||||
cloud_provider: string | null;
|
||||
}
|
||||
|
||||
export interface PreprocessingConfigOverrides {
|
||||
binarize: boolean | null;
|
||||
deskew: boolean | null;
|
||||
contrast: boolean | null;
|
||||
}
|
||||
|
||||
export interface ConfigOverrides {
|
||||
detection: DetectionConfigOverrides | null;
|
||||
ocr: OCRConfigOverrides | null;
|
||||
resolver: ResolverConfigOverrides | null;
|
||||
escalation: EscalationConfigOverrides | null;
|
||||
preprocessing: PreprocessingConfigOverrides | null;
|
||||
}
|
||||
|
||||
export interface ConfigState {
|
||||
current: ConfigOverrides;
|
||||
pending: ConfigOverrides;
|
||||
dirty: boolean;
|
||||
}
|
||||
|
||||
export interface BboxRegion {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
export interface SelectionState {
|
||||
selected_frame: number | null;
|
||||
selected_brand: string | null;
|
||||
hovered_timestamp: number | null;
|
||||
bbox_region: BboxRegion | null;
|
||||
}
|
||||
@@ -15,3 +15,10 @@ export { default as TimeSeriesRenderer } from './renderers/TimeSeriesRenderer.vu
|
||||
export { default as GraphRenderer } from './renderers/GraphRenderer.vue'
|
||||
export { default as FrameRenderer } from './renderers/FrameRenderer.vue'
|
||||
export { default as TableRenderer } from './renderers/TableRenderer.vue'
|
||||
|
||||
// Interaction plugins
|
||||
export type { InteractionPlugin, PluginContext } from './plugins/InteractionPlugin'
|
||||
export { BBoxDrawPlugin } from './plugins/BBoxDrawPlugin'
|
||||
export type { BBoxResult, BBoxCallback } from './plugins/BBoxDrawPlugin'
|
||||
export { CrosshairPlugin } from './plugins/CrosshairPlugin'
|
||||
export type { CrosshairCallback } from './plugins/CrosshairPlugin'
|
||||
|
||||
88
ui/framework/src/plugins/BBoxDrawPlugin.ts
Normal file
88
ui/framework/src/plugins/BBoxDrawPlugin.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* BBoxDrawPlugin — draw bounding boxes on the frame viewer.
|
||||
*
|
||||
* User drags on the canvas to draw a rectangle.
|
||||
* On pointer up, emits the bbox coordinates via the callback.
|
||||
* The frame viewer panel feeds this into the selection store.
|
||||
*/
|
||||
|
||||
import type { InteractionPlugin, PluginContext } from './InteractionPlugin'
|
||||
|
||||
export interface BBoxResult {
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
}
|
||||
|
||||
export type BBoxCallback = (bbox: BBoxResult) => void
|
||||
|
||||
export class BBoxDrawPlugin implements InteractionPlugin {
|
||||
name = 'bbox-draw'
|
||||
|
||||
private ctx: CanvasRenderingContext2D | null = null
|
||||
private drawing = false
|
||||
private startX = 0
|
||||
private startY = 0
|
||||
private currentBox: BBoxResult | null = null
|
||||
private callback: BBoxCallback
|
||||
|
||||
constructor(callback: BBoxCallback) {
|
||||
this.callback = callback
|
||||
}
|
||||
|
||||
onMount(context: PluginContext): void {
|
||||
this.ctx = context.ctx
|
||||
}
|
||||
|
||||
onUnmount(): void {
|
||||
this.ctx = null
|
||||
this.drawing = false
|
||||
this.currentBox = null
|
||||
}
|
||||
|
||||
onPointerDown(e: PointerEvent): void {
|
||||
this.drawing = true
|
||||
this.startX = e.offsetX
|
||||
this.startY = e.offsetY
|
||||
this.currentBox = null
|
||||
}
|
||||
|
||||
onPointerMove(e: PointerEvent): void {
|
||||
if (!this.drawing) return
|
||||
|
||||
const x = Math.min(this.startX, e.offsetX)
|
||||
const y = Math.min(this.startY, e.offsetY)
|
||||
const w = Math.abs(e.offsetX - this.startX)
|
||||
const h = Math.abs(e.offsetY - this.startY)
|
||||
|
||||
this.currentBox = { x, y, w, h }
|
||||
}
|
||||
|
||||
onPointerUp(_e: PointerEvent): void {
|
||||
if (!this.drawing) return
|
||||
this.drawing = false
|
||||
|
||||
if (this.currentBox && this.currentBox.w > 5 && this.currentBox.h > 5) {
|
||||
this.callback(this.currentBox)
|
||||
}
|
||||
|
||||
this.currentBox = null
|
||||
}
|
||||
|
||||
render(ctx: CanvasRenderingContext2D): void {
|
||||
if (!this.currentBox) return
|
||||
|
||||
const box = this.currentBox
|
||||
|
||||
ctx.strokeStyle = '#4f9cf9'
|
||||
ctx.lineWidth = 2
|
||||
ctx.setLineDash([6, 3])
|
||||
ctx.strokeRect(box.x, box.y, box.w, box.h)
|
||||
ctx.setLineDash([])
|
||||
|
||||
// Semi-transparent fill
|
||||
ctx.fillStyle = 'rgba(79, 156, 249, 0.1)'
|
||||
ctx.fillRect(box.x, box.y, box.w, box.h)
|
||||
}
|
||||
}
|
||||
60
ui/framework/src/plugins/CrosshairPlugin.ts
Normal file
60
ui/framework/src/plugins/CrosshairPlugin.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* CrosshairPlugin — synchronized vertical crosshair across time-series panels.
|
||||
*
|
||||
* When the user hovers on any panel with this plugin, the crosshair
|
||||
* position (as a timestamp) is written to the selection store.
|
||||
* All panels with this plugin render a vertical line at that timestamp.
|
||||
*/
|
||||
|
||||
import type { InteractionPlugin, PluginContext } from './InteractionPlugin'
|
||||
|
||||
export type CrosshairCallback = (timestamp: number | null) => void
|
||||
|
||||
export class CrosshairPlugin implements InteractionPlugin {
|
||||
name = 'crosshair'
|
||||
|
||||
private width = 0
|
||||
private callback: CrosshairCallback
|
||||
|
||||
/** Current crosshair X position (pixels), set externally from store */
|
||||
public crosshairX: number | null = null
|
||||
|
||||
constructor(callback: CrosshairCallback) {
|
||||
this.callback = callback
|
||||
}
|
||||
|
||||
onMount(context: PluginContext): void {
|
||||
this.width = context.width
|
||||
}
|
||||
|
||||
onUnmount(): void {
|
||||
this.crosshairX = null
|
||||
}
|
||||
|
||||
onPointerMove(e: PointerEvent): void {
|
||||
// Convert pixel X to normalized position (0-1)
|
||||
const normalized = e.offsetX / this.width
|
||||
this.callback(normalized)
|
||||
}
|
||||
|
||||
onPointerDown(_e: PointerEvent): void {
|
||||
// no-op for crosshair
|
||||
}
|
||||
|
||||
onPointerUp(_e: PointerEvent): void {
|
||||
this.callback(null)
|
||||
}
|
||||
|
||||
render(ctx: CanvasRenderingContext2D): void {
|
||||
if (this.crosshairX === null) return
|
||||
|
||||
ctx.strokeStyle = '#a78bfa'
|
||||
ctx.lineWidth = 1
|
||||
ctx.setLineDash([4, 4])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(this.crosshairX, 0)
|
||||
ctx.lineTo(this.crosshairX, ctx.canvas.height)
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
}
|
||||
36
ui/framework/src/plugins/InteractionPlugin.ts
Normal file
36
ui/framework/src/plugins/InteractionPlugin.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* Interaction plugin interface.
|
||||
*
|
||||
* Plugins attach to a Panel's overlay canvas. They receive pointer events
|
||||
* and emit typed results via the callback. The panel handles rendering
|
||||
* the overlay and routing events to the active plugin.
|
||||
*/
|
||||
|
||||
export interface PluginContext {
|
||||
/** Canvas element for drawing overlays */
|
||||
canvas: HTMLCanvasElement
|
||||
/** 2D rendering context */
|
||||
ctx: CanvasRenderingContext2D
|
||||
/** Canvas dimensions (may differ from display size) */
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
|
||||
export interface InteractionPlugin {
|
||||
/** Unique plugin name */
|
||||
name: string
|
||||
|
||||
/** Called when the plugin is mounted on a panel */
|
||||
onMount(context: PluginContext): void
|
||||
|
||||
/** Called when the plugin is unmounted */
|
||||
onUnmount(): void
|
||||
|
||||
/** Pointer event handlers (optional) */
|
||||
onPointerDown?(e: PointerEvent): void
|
||||
onPointerMove?(e: PointerEvent): void
|
||||
onPointerUp?(e: PointerEvent): void
|
||||
|
||||
/** Called each animation frame to render the overlay */
|
||||
render(ctx: CanvasRenderingContext2D): void
|
||||
}
|
||||
@@ -8,6 +8,10 @@ export interface FrameBBox {
|
||||
h: number
|
||||
confidence: number
|
||||
label: string
|
||||
resolved_brand?: string | null
|
||||
source?: string | null
|
||||
stage?: string | null
|
||||
ocr_text?: string | null
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -46,27 +50,37 @@ function draw() {
|
||||
const bw = box.w * scale
|
||||
const bh = box.h * scale
|
||||
|
||||
// Box outline
|
||||
ctx.strokeStyle = confidenceColor(box.confidence)
|
||||
const color = sourceColor(box)
|
||||
const resolved = box.resolved_brand || box.ocr_text
|
||||
|
||||
// Box outline only — no labels, no percentages
|
||||
ctx.strokeStyle = color
|
||||
ctx.lineWidth = 2
|
||||
if (!resolved) {
|
||||
ctx.setLineDash([4, 3])
|
||||
}
|
||||
ctx.strokeRect(bx, by, bw, bh)
|
||||
|
||||
// Label background
|
||||
const label = `${box.label} ${(box.confidence * 100).toFixed(0)}%`
|
||||
ctx.font = '11px var(--font-mono)'
|
||||
const metrics = ctx.measureText(label)
|
||||
const labelH = 16
|
||||
ctx.fillStyle = confidenceColor(box.confidence)
|
||||
ctx.fillRect(bx, by - labelH, metrics.width + 8, labelH)
|
||||
|
||||
// Label text
|
||||
ctx.fillStyle = '#000'
|
||||
ctx.fillText(label, bx + 4, by - 4)
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
}
|
||||
img.src = `data:image/jpeg;base64,${props.imageSrc}`
|
||||
}
|
||||
|
||||
const SOURCE_COLORS: Record<string, string> = {
|
||||
yolo: '#f5a623', // yellow — raw detection
|
||||
ocr: '#ff8c42', // orange — text extracted
|
||||
ocr_matched: '#3ecf8e', // green — brand resolved
|
||||
local_vlm: '#4f9cf9', // blue — VLM resolved
|
||||
cloud_llm: '#a78bfa', // purple — cloud resolved
|
||||
unresolved: '#e05252', // red — nothing matched
|
||||
}
|
||||
|
||||
function sourceColor(box: FrameBBox): string {
|
||||
if (box.resolved_brand) return SOURCE_COLORS.ocr_matched
|
||||
if (box.source && box.source in SOURCE_COLORS) return SOURCE_COLORS[box.source]
|
||||
return confidenceColor(box.confidence)
|
||||
}
|
||||
|
||||
function confidenceColor(conf: number): string {
|
||||
if (conf >= 0.7) return 'var(--conf-high)'
|
||||
if (conf >= 0.4) return 'var(--conf-mid)'
|
||||
|
||||
@@ -11,8 +11,19 @@ export interface GraphNode {
|
||||
|
||||
const props = defineProps<{
|
||||
nodes: GraphNode[]
|
||||
/** Stages that have a region editor (bbox/polygon) */
|
||||
regionStages?: string[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'open-region-editor': [stage: string]
|
||||
'open-stage-editor': [stage: string]
|
||||
}>()
|
||||
|
||||
const regionStageSet = computed(() => new Set(props.regionStages ?? [
|
||||
'detect_objects', 'run_ocr', 'match_brands', 'escalate_vlm', 'escalate_cloud',
|
||||
]))
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
pending: 'var(--status-idle)',
|
||||
running: 'var(--status-processing)',
|
||||
@@ -23,17 +34,15 @@ const statusColors: Record<string, string> = {
|
||||
const flowNodes = computed(() =>
|
||||
props.nodes.map((n, i) => ({
|
||||
id: n.id,
|
||||
label: n.id.replace(/_/g, ' '),
|
||||
position: { x: 20, y: i * 70 },
|
||||
style: {
|
||||
background: statusColors[n.status] ?? statusColors.pending,
|
||||
color: n.status === 'pending' ? '#ccc' : '#000',
|
||||
border: 'none',
|
||||
borderRadius: 'var(--panel-radius)',
|
||||
fontFamily: 'var(--font-mono)',
|
||||
fontSize: 'var(--font-size-sm)',
|
||||
fontWeight: '600',
|
||||
padding: '8px 16px',
|
||||
type: 'stage',
|
||||
position: { x: 20, y: i * 80 },
|
||||
data: {
|
||||
label: n.id.replace(/_/g, ' '),
|
||||
status: n.status,
|
||||
color: statusColors[n.status] ?? statusColors.pending,
|
||||
textColor: n.status === 'pending' ? '#888' : '#000',
|
||||
hasRegionEditor: regionStageSet.value.has(n.id),
|
||||
isRunning: n.status === 'running',
|
||||
},
|
||||
}))
|
||||
)
|
||||
@@ -63,7 +72,38 @@ const flowEdges = computed(() => {
|
||||
:nodes-connectable="false"
|
||||
:zoom-on-scroll="false"
|
||||
:pan-on-scroll="false"
|
||||
/>
|
||||
>
|
||||
<template #node-stage="{ data, id }">
|
||||
<div
|
||||
class="stage-node"
|
||||
:class="{ running: data.isRunning }"
|
||||
:style="{ background: data.color, color: data.textColor }"
|
||||
>
|
||||
<span class="stage-label">{{ data.label }}</span>
|
||||
<span class="stage-actions">
|
||||
<button
|
||||
v-if="data.hasRegionEditor"
|
||||
class="stage-btn region-btn"
|
||||
title="Region editor"
|
||||
@click.stop="emit('open-region-editor', id)"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="5" cy="5" r="3.5"/><line x1="7.5" y1="7.5" x2="11" y2="11"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="stage-btn config-btn"
|
||||
title="Stage config"
|
||||
@click.stop="emit('open-stage-editor', id)"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="6" cy="6" r="2"/><path d="M6 1v2M6 9v2M1 6h2M9 6h2M2.5 2.5l1.4 1.4M8.1 8.1l1.4 1.4M2.5 9.5l1.4-1.4M8.1 3.9l1.4-1.4"/>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</VueFlow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -77,4 +117,66 @@ const flowEdges = computed(() => {
|
||||
.graph-renderer :deep(.vue-flow__background) {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Hide default node styling — we use custom template */
|
||||
.graph-renderer :deep(.vue-flow__node-stage) {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.stage-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 10px;
|
||||
border-radius: var(--panel-radius);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: 600;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.stage-node.running {
|
||||
animation: node-pulse 1.5s infinite;
|
||||
}
|
||||
|
||||
.stage-label {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stage-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.stage-node:hover .stage-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.stage-btn {
|
||||
background: rgba(0, 0, 0, 0.15);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.stage-btn:hover {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@keyframes node-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user