diff options
| author | Somhairle H. Marisol <[email protected]> | 2026-09-21 01:18:53 +0800 |
|---|---|---|
| committer | Somhairle H. Marisol <[email protected]> | 2026-09-21 01:18:53 +0800 |
| commit | 0397c375acea763d3110163b045d259155ba2341 (patch) | |
| tree | 3873b99b5829b12ffc49a5ba10ed5fbaeb48a53b /src/SomhairlesDream.Frontend | |
| parent | 7b29dbff7e43e87741476f47df17ad1582b16546 (diff) | |
| download | somhairles-dream-fsharp-0397c375acea763d3110163b045d259155ba2341.tar.gz | |
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.
Diffstat (limited to 'src/SomhairlesDream.Frontend')
| -rw-r--r-- | src/SomhairlesDream.Frontend/App.fs | 50 | ||||
| -rw-r--r-- | src/SomhairlesDream.Frontend/Bindings.fs | 13 |
2 files changed, 60 insertions, 3 deletions
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 @@ -35,6 +35,19 @@ type ServerEvent = abstract data: string with get [<Erase>] +type GLTFScene = + abstract scene: ThreeNode with get + +[<Emit("new GLTFLoader()")>] +let createGLTFLoader () : obj = jsNative + +[<Emit("$0.load($1, $2, null, $3)")>] +let loadGLTF (loader: obj) (url: string) (onLoad: GLTFScene -> unit) (onError: obj -> unit) : unit = jsNative + +[<Emit("new URLSearchParams(window.location.search).get($0)")>] +let queryParam (name: string) : string = jsNative + +[<Erase>] type EventSource = abstract onerror: (obj -> unit) with get, set abstract onmessage: (ServerEvent -> unit) with get, set |
