From 0397c375acea763d3110163b045d259155ba2341 Mon Sep 17 00:00:00 2001 From: "Somhairle H. Marisol" Date: Mon, 21 Sep 2026 01:18:53 +0800 Subject: feat(viewer): stream live pipeline GLBs into the browser viewport Protocol: RunSnapshot gains CompletedSteps (accumulated from checkpoint artifact paths, reset on start) so the frontend can tell when real pipeline geometry exists. New coordinator method StepArtifact plus GET /api/artifacts/steps serves steps/*.glb while a run is active (any lifecycle status), traversal-guarded and .glb-only, so stages appear without waiting for run completion. Frontend: GLTFLoader loads the latest completed step into the viewport group as soon as its checkpoint lands over SSE; replay placeholder frames render only while no step artifacts exist. ?freeze=1 query param stops rotation for deterministic screenshot verification. Three.js r160 and GLTFLoader (with BufferGeometryUtils) are vendored under public/ vendor with an import map and a window.THREE shim, replacing the CDN UMD script; the ~1.4MB vendored three.js files are third-party dependencies (MIT), not project assets. Tests: store accumulation of completed artifact paths; steps endpoint serves GLB during an active run, rejects traversal, 404s missing files. Verified: dotnet build Debug+Release clean, 42/42 tests pass, Fable compile clean, release server smoke serves index/vendor/steps endpoint. --- public/App.js | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 59 insertions(+), 4 deletions(-) (limited to 'public/App.js') diff --git a/public/App.js b/public/App.js index 262025a..c5a5418 100644 --- a/public/App.js +++ b/public/App.js @@ -1,7 +1,7 @@ import { Record } from "./fable_modules/fable-library-js.4.24.0/Types.js"; import { class_type, record_type, bool_type, string_type } from "./fable_modules/fable-library-js.4.24.0/Reflection.js"; import { Replay_frames } from "./SomhairlesDream.Shared/Replay.js"; -import { createAtom } from "./fable_modules/fable-library-js.4.24.0/Util.js"; +import { equals, createAtom } from "./fable_modules/fable-library-js.4.24.0/Util.js"; import { tryFind, item } from "./fable_modules/fable-library-js.4.24.0/Array.js"; import { isNullOrWhiteSpace, printf, toText } from "./fable_modules/fable-library-js.4.24.0/String.js"; import { MeshData_triangleIndices, MeshData_positionData } from "./SomhairlesDream.Shared/Domain.js"; @@ -52,6 +52,14 @@ export let replayIndex = createAtom(0); export let eventSource = createAtom(undefined); +export let currentProjectId = createAtom(""); + +export let currentRunId = createAtom(""); + +export let loadedStepPath = createAtom(undefined); + +export let freezeRotation = createAtom(false); + export function element(id) { return document.getElementById(id); } @@ -204,12 +212,15 @@ export function initializeView() { scene.add(keyLight); const view = new ViewState(renderer, scene, camera, group, canvas); viewState(view); + freezeRotation((new URLSearchParams(window.location.search).get("freeze")) === "1"); renderFrame(selectedFrame()); window.addEventListener("resize", (_arg) => { resizeView(view); }); const animate = (_arg_1) => { - group.rotation.y = (group.rotation.y + 0.003); + if (!freezeRotation()) { + group.rotation.y = (group.rotation.y + 0.003); + } renderer.render(scene, camera); requestAnimationFrame(animate); }; @@ -239,6 +250,24 @@ export function setManifestLink(payload) { } } +export function loadStepArtifact(view, stepPath) { + loadedStepPath(stepPath); + const loader = new GLTFLoader(); + const projectId = encodeURIComponent(currentProjectId()); + const runId = encodeURIComponent(currentRunId()); + let url; + const arg_2 = encodeURIComponent(stepPath); + url = toText(printf("/api/artifacts/steps?projectId=%s&runId=%s&path=%s"))(projectId)(runId)(arg_2); + setText("viewport-note", toText(printf("管线几何加载中 · %s"))(stepPath)); + loader.load(url, ((gltf) => { + view.Group.clear(); + view.Group.add(gltf.scene); + setText("viewport-note", toText(printf("管线几何 · %s"))(stepPath)); + }), null, ((_arg) => { + setText("viewport-note", toText(printf("管线几何加载失败 · %s"))(stepPath)); + })); +} + export function updateState(payload) { let arg, arg_3; setStatusClass(statusName(payload)); @@ -246,6 +275,8 @@ export function updateState(payload) { setText("run-message", ((payload.status === "failed") && !isNullOrWhiteSpace(payload.error)) ? payload.error : payload.message); setText("project-id", payload.projectId); setText("run-id", payload.runId); + currentProjectId(payload.projectId); + currentRunId(payload.runId); const currentVersion = max(0, payload.currentStepIndex + 1) | 0; setText("target-version", (arg = (payload.totalSteps | 0), toText(printf("V%02d"))(arg))); setText("current-version", toText(printf("V%02d"))(currentVersion)); @@ -255,8 +286,32 @@ export function updateState(payload) { setWidth("progress-fill", toText(printf("%.0f%%"))(progress)); const frame = defaultArg(tryFind((candidate) => (candidate.Version === currentVersion), frames), selectedFrame()); setManifestLink(payload); - showFrameMetadata(frame); - renderFrame(frame); + const completedSteps = (payload.completedSteps == null) ? [] : payload.completedSteps; + const matchValue = viewState(); + if (matchValue == null) { + const steps_1 = completedSteps; + if (steps_1.length > 0) { + setText("mesh-label", item(steps_1.length - 1, steps_1)); + } + else { + showFrameMetadata(frame); + } + } + else { + const view = matchValue; + const steps = completedSteps; + if (steps.length === 0) { + showFrameMetadata(frame); + renderFrame(frame); + } + else { + const latest = item(steps.length - 1, steps); + if (!equals(loadedStepPath(), latest)) { + loadStepArtifact(view, latest); + } + setText("mesh-label", latest); + } + } } export function updateStreamState(message) { -- cgit v1.2.3