summaryrefslogtreecommitdiff
path: root/src/SomhairlesDream.Frontend
diff options
context:
space:
mode:
authorSomhairle H. Marisol <[email protected]>2026-09-21 01:18:53 +0800
committerSomhairle H. Marisol <[email protected]>2026-09-21 01:18:53 +0800
commit0397c375acea763d3110163b045d259155ba2341 (patch)
tree3873b99b5829b12ffc49a5ba10ed5fbaeb48a53b /src/SomhairlesDream.Frontend
parent7b29dbff7e43e87741476f47df17ad1582b16546 (diff)
downloadsomhairles-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.fs50
-rw-r--r--src/SomhairlesDream.Frontend/Bindings.fs13
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