phase 8
This commit is contained in:
@@ -7,6 +7,8 @@ import FunnelPanel from './panels/FunnelPanel.vue'
|
||||
import PipelineGraphPanel from './panels/PipelineGraphPanel.vue'
|
||||
import FramePanel from './panels/FramePanel.vue'
|
||||
import BrandTablePanel from './panels/BrandTablePanel.vue'
|
||||
import TimelinePanel from './panels/TimelinePanel.vue'
|
||||
import CostStatsPanel from './panels/CostStatsPanel.vue'
|
||||
import type { StatsUpdate } from './types/sse-contract'
|
||||
|
||||
const jobId = ref(new URLSearchParams(window.location.search).get('job') || 'test-job')
|
||||
@@ -69,6 +71,10 @@ source.connect()
|
||||
|
||||
<BrandTablePanel :source="source" :status="status" />
|
||||
|
||||
<TimelinePanel :source="source" :status="status" />
|
||||
|
||||
<CostStatsPanel :source="source" :status="status" />
|
||||
|
||||
<LogPanel :source="source" :status="status" />
|
||||
</LayoutGrid>
|
||||
</div>
|
||||
|
||||
123
ui/detection-app/src/panels/CostStatsPanel.vue
Normal file
123
ui/detection-app/src/panels/CostStatsPanel.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { Panel } from 'mpr-ui-framework'
|
||||
import type { DataSource } from 'mpr-ui-framework'
|
||||
import type { StatsUpdate, Detection } from '../types/sse-contract'
|
||||
|
||||
const props = defineProps<{
|
||||
source: DataSource
|
||||
status?: 'idle' | 'live' | 'processing' | 'error'
|
||||
}>()
|
||||
|
||||
const stats = ref<StatsUpdate | null>(null)
|
||||
const detectionCount = ref(0)
|
||||
const confidenceSum = ref(0)
|
||||
|
||||
props.source.on<StatsUpdate>('stats_update', (e) => {
|
||||
stats.value = e
|
||||
})
|
||||
|
||||
props.source.on<Detection>('detection', (e) => {
|
||||
detectionCount.value++
|
||||
confidenceSum.value += e.confidence
|
||||
})
|
||||
|
||||
const avgConfidence = computed(() => {
|
||||
if (detectionCount.value === 0) return 0
|
||||
return confidenceSum.value / detectionCount.value
|
||||
})
|
||||
|
||||
const escalationRatio = computed(() => {
|
||||
if (!stats.value || stats.value.regions_detected === 0) return 0
|
||||
return (stats.value.regions_escalated_to_local_vlm + stats.value.regions_escalated_to_cloud_llm)
|
||||
/ stats.value.regions_detected
|
||||
})
|
||||
|
||||
interface Metric {
|
||||
label: string
|
||||
value: string
|
||||
sub?: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
const metrics = computed<Metric[]>(() => {
|
||||
if (!stats.value) return []
|
||||
const s = stats.value
|
||||
return [
|
||||
{
|
||||
label: 'Cloud cost',
|
||||
value: `$${s.estimated_cloud_cost_usd.toFixed(4)}`,
|
||||
sub: `${s.cloud_llm_calls} calls`,
|
||||
color: s.estimated_cloud_cost_usd > 0.01 ? '#e05252' : '#3ecf8e',
|
||||
},
|
||||
{
|
||||
label: 'Escalation ratio',
|
||||
value: `${(escalationRatio.value * 100).toFixed(1)}%`,
|
||||
sub: `${s.regions_escalated_to_local_vlm + s.regions_escalated_to_cloud_llm} / ${s.regions_detected} regions`,
|
||||
color: escalationRatio.value > 0.3 ? '#f5a623' : '#3ecf8e',
|
||||
},
|
||||
{
|
||||
label: 'Avg confidence',
|
||||
value: `${(avgConfidence.value * 100).toFixed(1)}%`,
|
||||
sub: `${detectionCount.value} detections`,
|
||||
color: avgConfidence.value > 0.8 ? '#3ecf8e' : '#f5a623',
|
||||
},
|
||||
{
|
||||
label: 'Processing time',
|
||||
value: `${s.processing_time_seconds.toFixed(1)}s`,
|
||||
},
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Panel title="Cost & Stats" :status="status">
|
||||
<div class="cost-stats" v-if="stats">
|
||||
<div class="metric" v-for="m in metrics" :key="m.label">
|
||||
<span class="label">{{ m.label }}</span>
|
||||
<span class="value" :style="m.color ? { color: m.color } : {}">{{ m.value }}</span>
|
||||
<span class="sub" v-if="m.sub">{{ m.sub }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">Waiting for stats...</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cost-stats {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
}
|
||||
|
||||
.metric {
|
||||
background: var(--surface-2);
|
||||
border-radius: var(--panel-radius);
|
||||
padding: var(--space-3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-dim);
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
180
ui/detection-app/src/panels/TimelinePanel.vue
Normal file
180
ui/detection-app/src/panels/TimelinePanel.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue'
|
||||
import { Panel } from 'mpr-ui-framework'
|
||||
import type { DataSource } from 'mpr-ui-framework'
|
||||
import type { Detection } from '../types/sse-contract'
|
||||
|
||||
const props = defineProps<{
|
||||
source: DataSource
|
||||
status?: 'idle' | 'live' | 'processing' | 'error'
|
||||
}>()
|
||||
|
||||
interface TimelineEntry {
|
||||
brand: string
|
||||
timestamp: number
|
||||
duration: number
|
||||
confidence: number
|
||||
source: string
|
||||
}
|
||||
|
||||
const entries = ref<TimelineEntry[]>([])
|
||||
|
||||
props.source.on<Detection>('detection', (e) => {
|
||||
entries.value.push({
|
||||
brand: e.brand,
|
||||
timestamp: e.timestamp,
|
||||
duration: e.duration || 0.5,
|
||||
confidence: e.confidence,
|
||||
source: e.source,
|
||||
})
|
||||
})
|
||||
|
||||
// One row per unique brand, sorted by first appearance
|
||||
const brands = computed(() => {
|
||||
const seen = new Map<string, number>()
|
||||
for (const e of entries.value) {
|
||||
if (!seen.has(e.brand)) seen.set(e.brand, e.timestamp)
|
||||
}
|
||||
return [...seen.entries()]
|
||||
.sort((a, b) => a[1] - b[1])
|
||||
.map(([brand]) => brand)
|
||||
})
|
||||
|
||||
const maxTime = computed(() => {
|
||||
if (entries.value.length === 0) return 60
|
||||
return Math.max(...entries.value.map((e) => e.timestamp + e.duration)) * 1.1
|
||||
})
|
||||
|
||||
const sourceColor: Record<string, string> = {
|
||||
ocr: '#3ecf8e',
|
||||
local_vlm: '#f5a623',
|
||||
cloud_llm: '#e05252',
|
||||
logo_match: '#4f9cf9',
|
||||
}
|
||||
|
||||
function barStyle(entry: TimelineEntry) {
|
||||
const left = (entry.timestamp / maxTime.value) * 100
|
||||
const width = Math.max((entry.duration / maxTime.value) * 100, 1)
|
||||
const color = sourceColor[entry.source] || '#a78bfa'
|
||||
const opacity = 0.4 + entry.confidence * 0.6
|
||||
return {
|
||||
left: `${left}%`,
|
||||
width: `${width}%`,
|
||||
background: color,
|
||||
opacity,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Panel title="Detection Timeline" :status="status">
|
||||
<div class="timeline" v-if="brands.length > 0">
|
||||
<div class="row" v-for="brand in brands" :key="brand">
|
||||
<span class="brand-label">{{ brand }}</span>
|
||||
<div class="track">
|
||||
<div
|
||||
v-for="(entry, i) in entries.filter((e) => e.brand === brand)"
|
||||
:key="i"
|
||||
class="bar"
|
||||
:style="barStyle(entry)"
|
||||
:title="`${entry.brand} — ${entry.source} (${(entry.confidence * 100).toFixed(0)}%) @ ${entry.timestamp.toFixed(1)}s`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="time-axis">
|
||||
<span>0s</span>
|
||||
<span>{{ (maxTime / 2).toFixed(0) }}s</span>
|
||||
<span>{{ maxTime.toFixed(0) }}s</span>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span v-for="(color, source) in sourceColor" :key="source" class="legend-item">
|
||||
<span class="legend-dot" :style="{ background: color }" />
|
||||
{{ source }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">Waiting for detections...</div>
|
||||
</Panel>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.timeline {
|
||||
padding: var(--space-2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.brand-label {
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-secondary);
|
||||
text-align: right;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.track {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 16px;
|
||||
background: var(--surface-2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
min-width: 4px;
|
||||
}
|
||||
|
||||
.time-axis {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 108px;
|
||||
font-size: 10px;
|
||||
color: var(--text-dim);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
gap: var(--space-3);
|
||||
padding-left: 108px;
|
||||
margin-top: var(--space-2);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-dim);
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user