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. --- src/SomhairlesDream.Frontend/App.fs | 50 ++++++++++++++++++++++++++++++-- src/SomhairlesDream.Frontend/Bindings.fs | 13 +++++++++ 2 files changed, 60 insertions(+), 3 deletions(-) (limited to 'src/SomhairlesDream.Frontend') diff --git a/src/SomhairlesDream.Frontend/App.fs b/src/SomhairlesDream.Frontend/App.fs index 835dfa9..fa52a9f 100644 --- a/src/SomhairlesDream.Frontend/App.fs +++ b/src/SomhairlesDream.Frontend/App.fs @@ -15,6 +15,7 @@ type SnapshotPayload = abstract status: string with get abstract currentStepIndex: int with get abstract totalSteps: int with get + abstract completedSteps: string array with get abstract lastHeartbeatAt: string with get abstract updatedAt: string with get abstract message: string with get @@ -42,6 +43,10 @@ let mutable selectedFrame = frames[0] let mutable replayTimer: int option = None let mutable replayIndex = 0 let mutable eventSource: EventSource option = None +let mutable currentProjectId = "" +let mutable currentRunId = "" +let mutable loadedStepPath: string option = None +let mutable freezeRotation = false let element id = document.getElementById(id) @@ -155,11 +160,14 @@ let initializeView () = Canvas = canvas } viewState <- Some view + freezeRotation <- (queryParam "freeze") = "1" renderFrame selectedFrame window.addEventListener("resize", fun _ -> resizeView view) let rec animate (_: float) = - group.rotation.y <- group.rotation.y + 0.003 + if not freezeRotation then + group.rotation.y <- group.rotation.y + 0.003 + renderer.render(scene, camera) requestAnimationFrame animate |> ignore @@ -184,6 +192,21 @@ let setManifestLink (payload: SnapshotPayload) = link.setAttribute("href", value) link.classList.remove("is-hidden") +let loadStepArtifact (view: ViewState) (stepPath: string) = + loadedStepPath <- Some stepPath + let loader = createGLTFLoader () + let projectId = JS.encodeURIComponent currentProjectId + let runId = JS.encodeURIComponent currentRunId + let url = sprintf "/api/artifacts/steps?projectId=%s&runId=%s&path=%s" projectId runId (JS.encodeURIComponent stepPath) + setText "viewport-note" (sprintf "管线几何加载中 · %s" stepPath) + + loadGLTF loader url + (fun gltf -> + view.Group.clear() + view.Group.add gltf.scene + setText "viewport-note" (sprintf "管线几何 · %s" stepPath)) + (fun _ -> setText "viewport-note" (sprintf "管线几何加载失败 · %s" stepPath)) + let updateState (payload: SnapshotPayload) = let status = statusName payload setStatusClass status @@ -198,6 +221,8 @@ let updateState (payload: SnapshotPayload) = setText "run-message" message setText "project-id" payload.projectId setText "run-id" payload.runId + currentProjectId <- payload.projectId + currentRunId <- payload.runId let currentVersion = max 0 (payload.currentStepIndex + 1) setText "target-version" (sprintf "V%02d" payload.totalSteps) @@ -217,8 +242,27 @@ let updateState (payload: SnapshotPayload) = |> Option.defaultValue selectedFrame setManifestLink payload - showFrameMetadata frame - renderFrame frame + + let completedSteps = + if isNull (box payload.completedSteps) then [||] else payload.completedSteps + + match viewState, completedSteps with + | Some view, steps -> + if steps.Length = 0 then + showFrameMetadata frame + renderFrame frame + else + let latest = steps[steps.Length - 1] + + if loadedStepPath <> Some latest then + loadStepArtifact view latest + + setText "mesh-label" latest + | None, steps -> + if steps.Length > 0 then + setText "mesh-label" steps[steps.Length - 1] + else + showFrameMetadata frame let updateStreamState message = setText "stream-state" message diff --git a/src/SomhairlesDream.Frontend/Bindings.fs b/src/SomhairlesDream.Frontend/Bindings.fs index dc75d7d..9dbfa00 100644 --- a/src/SomhairlesDream.Frontend/Bindings.fs +++ b/src/SomhairlesDream.Frontend/Bindings.fs @@ -34,6 +34,19 @@ type ThreeGeometry = type ServerEvent = abstract data: string with get +[] +type GLTFScene = + abstract scene: ThreeNode with get + +[] +let createGLTFLoader () : obj = jsNative + +[] +let loadGLTF (loader: obj) (url: string) (onLoad: GLTFScene -> unit) (onError: obj -> unit) : unit = jsNative + +[] +let queryParam (name: string) : string = jsNative + [] type EventSource = abstract onerror: (obj -> unit) with get, set -- cgit v1.2.3