282 lines
7.1 KiB
Vue
282 lines
7.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue'
|
|
import { Panel } from 'mpr-ui-framework'
|
|
import FrameRenderer from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
|
|
import type { FrameBBox, FrameOverlay } from 'mpr-ui-framework/src/renderers/FrameRenderer.vue'
|
|
import type { DataSource } from 'mpr-ui-framework'
|
|
|
|
const props = defineProps<{
|
|
source: DataSource
|
|
status?: 'idle' | 'live' | 'processing' | 'error'
|
|
/** Debug overlay layers passed from parent (editor mode) */
|
|
overlays?: FrameOverlay[]
|
|
/** Frame image from checkpoint (scenario mode) — overrides SSE */
|
|
frameImage?: string | null
|
|
/** Boxes from editor (local CV or server) — merged with SSE boxes */
|
|
editorBoxes?: import('mpr-ui-framework/src/renderers/FrameRenderer.vue').FrameBBox[]
|
|
}>()
|
|
|
|
const imageSrc = ref(props.frameImage ?? '')
|
|
|
|
// Sync prop → internal ref when checkpoint frame changes
|
|
watch(() => props.frameImage, (v) => {
|
|
if (v) imageSrc.value = v
|
|
})
|
|
|
|
// 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_edges', label: 'Edges', color: '#00bcd4' },
|
|
{ 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
|
|
jpeg_b64: string
|
|
boxes: FrameBBox[]
|
|
}>('frame_update', (e) => {
|
|
imageSrc.value = e.jpeg_b64
|
|
|
|
// 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 + editor boxes
|
|
const visibleBoxes = computed<FrameBBox[]>(() => {
|
|
const result: FrameBBox[] = []
|
|
// SSE boxes filtered by toggles
|
|
for (const [stage, boxes] of Object.entries(stageBoxes.value)) {
|
|
if (activeToggles.value.has(stage)) {
|
|
result.push(...boxes)
|
|
}
|
|
}
|
|
// Editor boxes (from local CV or server) — always shown
|
|
if (props.editorBoxes?.length) {
|
|
result.push(...props.editorBoxes)
|
|
}
|
|
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">
|
|
<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" :overlays="overlays" />
|
|
</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>
|