feat: ASRX hybrid pipeline, identity history, worker fixes, checkpoint system
This commit is contained in:
Accusys
354
portal/src/components/SpaceTimeCube.vue
Normal file
354
portal/src/components/SpaceTimeCube.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="bg-gray-800 rounded-lg p-6 border border-gray-700">
|
||||
<h3 class="text-lg font-semibold mb-4 text-blue-400">V5: 3D Space-Time Cube</h3>
|
||||
<div class="text-xs text-gray-500 mb-3 flex gap-2 items-center">
|
||||
<span>X/Y = 畫面位置</span>
|
||||
<span>Z = 深度（bbox 大小）</span>
|
||||
<span>T = 時間</span>
|
||||
</div>
|
||||
|
||||
<!-- Trace selector -->
|
||||
<div class="flex gap-2 mb-3">
|
||||
<select v-model="selectedTraceId"
|
||||
class="bg-gray-700 text-white px-3 py-1.5 rounded text-sm flex-1">
|
||||
<option :value="null" disabled>選擇 Trace</option>
|
||||
<option v-for="t in traceOptions" :key="t.id"
|
||||
:value="t.id">{{ t.label }}</option>
|
||||
</select>
|
||||
<button @click="loadData"
|
||||
class="bg-blue-600 hover:bg-blue-500 text-white px-4 py-1.5 rounded text-sm"
|
||||
:disabled="!selectedTraceId || loading">
|
||||
{{ loading ? '載入中...' : '載入' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div ref="container" class="w-full h-[400px] bg-gray-900 rounded-lg overflow-hidden"></div>
|
||||
|
||||
<div class="text-xs text-gray-500 mt-2 flex gap-4">
|
||||
<span>🖱 拖曳旋轉</span>
|
||||
<span>🔍 滾輪縮放</span>
|
||||
<span v-if="faceCount">{{ faceCount }} 個檢測點</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue'
|
||||
import * as THREE from 'three'
|
||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
||||
import { httpFetch, getCurrentConfig } from '@/api/client'
|
||||
|
||||
const props = defineProps<{
|
||||
fileUuid: string
|
||||
traces?: any[]
|
||||
frameWidth?: number
|
||||
frameHeight?: number
|
||||
}>()
|
||||
|
||||
const container = ref<HTMLElement>()
|
||||
const selectedTraceId = ref<number | null>(null)
|
||||
const loading = ref(false)
|
||||
const faceCount = ref(0)
|
||||
|
||||
const traceOptions = computed(() => {
|
||||
return (props.traces || []).map((t: any) => ({
|
||||
id: t.trace_id,
|
||||
label: `#${t.trace_id} (${t.face_count} faces, ${(t.duration_sec || 0).toFixed(1)}s)`
|
||||
}))
|
||||
})
|
||||
|
||||
let renderer: THREE.WebGLRenderer | null = null
|
||||
let scene: THREE.Scene | null = null
|
||||
let camera: THREE.PerspectiveCamera | null = null
|
||||
let controls: OrbitControls | null = null
|
||||
let animId: number
|
||||
let objects: THREE.Object3D[] = []
|
||||
|
||||
function disposeScene() {
|
||||
cancelAnimationFrame(animId)
|
||||
for (const obj of objects) {
|
||||
scene?.remove(obj)
|
||||
if (obj instanceof THREE.Mesh || obj instanceof THREE.Points || obj instanceof THREE.Line) {
|
||||
obj.geometry?.dispose()
|
||||
const mat = (obj as any).material
|
||||
if (mat) {
|
||||
if (Array.isArray(mat)) mat.forEach((m: any) => m.dispose())
|
||||
else mat.dispose()
|
||||
}
|
||||
}
|
||||
}
|
||||
objects = []
|
||||
controls?.dispose()
|
||||
controls = null
|
||||
if (renderer) {
|
||||
renderer.dispose()
|
||||
renderer = null
|
||||
}
|
||||
scene = null
|
||||
camera = null
|
||||
}
|
||||
|
||||
type FacePoint = {
|
||||
frame: number
|
||||
t: number
|
||||
x: number
|
||||
y: number
|
||||
w: number
|
||||
h: number
|
||||
z: number
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
if (!selectedTraceId.value) return
|
||||
loading.value = true
|
||||
|
||||
const config = getCurrentConfig()
|
||||
httpFetch(`${config.api_base_url}/api/v1/file/${props.fileUuid}/trace/${selectedTraceId.value}/faces?interpolate=true&limit=2000&dimension=3d`)
|
||||
.then((res: any) => {
|
||||
const faces = res?.faces || []
|
||||
const fw = props.frameWidth || 1920
|
||||
const fh = props.frameHeight || 1080
|
||||
|
||||
const points: FacePoint[] = faces.map((f: any) => {
|
||||
const w = f.width || 1
|
||||
const h = f.height || 1
|
||||
const areaPct = (w * h) / (fw * fh)
|
||||
const z = f.z_rel !== undefined && f.z_rel !== null
|
||||
? f.z_rel
|
||||
: 1.0 - Math.min(areaPct * 50, 1.0)
|
||||
return {
|
||||
frame: f.start_frame || 0,
|
||||
t: f.start_time || 0,
|
||||
x: f.x || 0,
|
||||
y: f.y || 0,
|
||||
w,
|
||||
h,
|
||||
z
|
||||
}
|
||||
})
|
||||
faceCount.value = points.length
|
||||
buildScene(points)
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.error('Failed to load trace faces:', err)
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function buildScene(points: FacePoint[]) {
|
||||
if (!container.value) return
|
||||
disposeScene()
|
||||
|
||||
// Normalize coordinates to [-1, 1] range
|
||||
const fw = props.frameWidth || 1920
|
||||
const fh = props.frameHeight || 1080
|
||||
const maxT = points.length > 0 ? points[points.length - 1].t : 100
|
||||
|
||||
const vertexData = points.map(p => ({
|
||||
x: (p.x / fw) * 2 - 1,
|
||||
y: -((p.y / fh) * 2 - 1),
|
||||
z: p.z * 2 - 1,
|
||||
t: (p.t / maxT) * 2 - 1
|
||||
}))
|
||||
|
||||
const rect = container.value.getBoundingClientRect()
|
||||
const w = rect.width || 600, h = rect.height || 400
|
||||
|
||||
scene = new THREE.Scene()
|
||||
scene.background = new THREE.Color(0x111827)
|
||||
|
||||
camera = new THREE.PerspectiveCamera(50, w / h, 0.1, 10)
|
||||
camera.position.set(2.5, 1.8, 3)
|
||||
camera.lookAt(0, 0, 0)
|
||||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true })
|
||||
renderer.setSize(w, h)
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
|
||||
container.value.appendChild(renderer.domElement)
|
||||
|
||||
controls = new OrbitControls(camera, renderer.domElement)
|
||||
controls.enableDamping = true
|
||||
controls.dampingFactor = 0.08
|
||||
controls.target.set(0, 0, 0)
|
||||
controls.update()
|
||||
|
||||
// ---- Axes helper with labels ----
|
||||
const axesLen = 1.2
|
||||
const axesMat = (color: number) => new THREE.LineBasicMaterial({ color })
|
||||
|
||||
// X axis (red) — screen x
|
||||
const xLine = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(-axesLen, -axesLen, -axesLen),
|
||||
new THREE.Vector3(axesLen, -axesLen, -axesLen)
|
||||
]),
|
||||
axesMat(0xff4444)
|
||||
)
|
||||
scene.add(xLine)
|
||||
objects.push(xLine)
|
||||
|
||||
// Y axis (green) — screen y
|
||||
const yLine = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(-axesLen, -axesLen, -axesLen),
|
||||
new THREE.Vector3(-axesLen, axesLen, -axesLen)
|
||||
]),
|
||||
axesMat(0x44ff44)
|
||||
)
|
||||
scene.add(yLine)
|
||||
objects.push(yLine)
|
||||
|
||||
// Z axis (blue) — depth
|
||||
const zLine = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(-axesLen, -axesLen, -axesLen),
|
||||
new THREE.Vector3(-axesLen, -axesLen, axesLen)
|
||||
]),
|
||||
axesMat(0x4488ff)
|
||||
)
|
||||
scene.add(zLine)
|
||||
objects.push(zLine)
|
||||
|
||||
// T axis (yellow) — time (at an angle for 3D effect)
|
||||
const tLine = new THREE.Line(
|
||||
new THREE.BufferGeometry().setFromPoints([
|
||||
new THREE.Vector3(-axesLen, -axesLen, -axesLen),
|
||||
new THREE.Vector3(axesLen, axesLen, axesLen)
|
||||
]),
|
||||
axesMat(0xffdd44)
|
||||
)
|
||||
scene.add(tLine)
|
||||
objects.push(tLine)
|
||||
|
||||
// ---- Cube wireframe ----
|
||||
const cubeSize = axesLen * 2
|
||||
const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize)
|
||||
const cubeWire = new THREE.LineSegments(
|
||||
new THREE.EdgesGeometry(cubeGeo),
|
||||
new THREE.LineBasicMaterial({ color: 0x444466, transparent: true, opacity: 0.3 })
|
||||
)
|
||||
cubeWire.position.set(0, 0, 0)
|
||||
scene.add(cubeWire)
|
||||
objects.push(cubeWire)
|
||||
|
||||
// ---- Points: color by time (t) ----
|
||||
if (vertexData.length > 0) {
|
||||
const positions = new Float32Array(vertexData.length * 3)
|
||||
const colors = new Float32Array(vertexData.length * 3)
|
||||
const color = new THREE.Color()
|
||||
|
||||
for (let i = 0; i < vertexData.length; i++) {
|
||||
const p = vertexData[i]
|
||||
// Position: (x, y, z) with time as movement along diagonal
|
||||
positions[i * 3] = p.x
|
||||
positions[i * 3 + 1] = p.y
|
||||
positions[i * 3 + 2] = p.t * 0.5 // compress time a bit
|
||||
|
||||
// Color gradient: blue (early) → cyan → yellow → red (late)
|
||||
const tNorm = (p.t + 1) / 2 // 0..1
|
||||
color.setHSL(0.6 - tNorm * 0.6, 0.9, 0.5)
|
||||
colors[i * 3] = color.r
|
||||
colors[i * 3 + 1] = color.g
|
||||
colors[i * 3 + 2] = color.b
|
||||
}
|
||||
|
||||
const ptGeo = new THREE.BufferGeometry()
|
||||
ptGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3))
|
||||
ptGeo.setAttribute('color', new THREE.BufferAttribute(colors, 3))
|
||||
|
||||
const ptMat = new THREE.PointsMaterial({
|
||||
size: 0.03,
|
||||
vertexColors: true,
|
||||
transparent: true,
|
||||
opacity: 0.8,
|
||||
sizeAttenuation: true
|
||||
})
|
||||
const pointsObj = new THREE.Points(ptGeo, ptMat)
|
||||
scene.add(pointsObj)
|
||||
objects.push(pointsObj)
|
||||
|
||||
// ---- Trajectory line ----
|
||||
const linePositions = new Float32Array(vertexData.length * 3)
|
||||
for (let i = 0; i < vertexData.length; i++) {
|
||||
const p = vertexData[i]
|
||||
linePositions[i * 3] = p.x
|
||||
linePositions[i * 3 + 1] = p.y
|
||||
linePositions[i * 3 + 2] = p.t * 0.5
|
||||
}
|
||||
const lineGeo = new THREE.BufferGeometry()
|
||||
lineGeo.setAttribute('position', new THREE.BufferAttribute(linePositions, 3))
|
||||
const lineMat = new THREE.LineBasicMaterial({
|
||||
color: 0x88ccff,
|
||||
transparent: true,
|
||||
opacity: 0.35
|
||||
})
|
||||
const line = new THREE.Line(lineGeo, lineMat)
|
||||
scene.add(line)
|
||||
objects.push(line)
|
||||
}
|
||||
|
||||
// ---- Lights ----
|
||||
const ambient = new THREE.AmbientLight(0x404060)
|
||||
scene.add(ambient)
|
||||
const dir = new THREE.DirectionalLight(0xffffff, 0.8)
|
||||
dir.position.set(1, 2, 1)
|
||||
scene.add(dir)
|
||||
|
||||
// ---- Grid helper (subtle) ----
|
||||
const gridHelper = new THREE.GridHelper(2.5, 10, 0x444466, 0x333355)
|
||||
gridHelper.position.y = -axesLen - 0.05
|
||||
scene.add(gridHelper)
|
||||
objects.push(gridHelper)
|
||||
|
||||
// Resize
|
||||
const resizeObserver = new ResizeObserver(() => {
|
||||
if (!container.value || !renderer || !camera) return
|
||||
const r = container.value.getBoundingClientRect()
|
||||
const rw = r.width || 600, rh = r.height || 400
|
||||
renderer.setSize(rw, rh)
|
||||
camera.aspect = rw / rh
|
||||
camera.updateProjectionMatrix()
|
||||
})
|
||||
resizeObserver.observe(container.value)
|
||||
;(container.value as any).__resizeObserver = resizeObserver
|
||||
|
||||
animate()
|
||||
|
||||
// Notify demo runner via callback URL if present
|
||||
const cb = new URLSearchParams(window.location.search).get("_callback")
|
||||
if (cb) {
|
||||
fetch(cb, { mode: "no-cors" }).catch(() => {})
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
animId = requestAnimationFrame(animate)
|
||||
controls?.update()
|
||||
if (renderer && scene && camera) renderer.render(scene, camera)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tryAutoLoad()
|
||||
})
|
||||
|
||||
watch(() => props.traces, () => {
|
||||
tryAutoLoad()
|
||||
}, { deep: false })
|
||||
|
||||
function tryAutoLoad() {
|
||||
if (props.traces?.length && !selectedTraceId.value && !loading.value) {
|
||||
selectedTraceId.value = props.traces[0].trace_id
|
||||
loadData()
|
||||
}
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cancelAnimationFrame(animId)
|
||||
if ((container.value as any)?.__resizeObserver) {
|
||||
(container.value as any).__resizeObserver.disconnect()
|
||||
}
|
||||
disposeScene()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user