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 +- public/SomhairlesDream.Shared/Artifact.js | 5 +- public/index.html | 12 +- public/vendor/addons/loaders/GLTFLoader.js | 4663 ++ public/vendor/addons/utils/BufferGeometryUtils.js | 1375 + public/vendor/three-setup.js | 5 + public/vendor/three.module.js | 53044 +++++++++++++++++++ src/SomhairlesDream.Frontend/App.fs | 50 +- src/SomhairlesDream.Frontend/Bindings.fs | 13 + src/SomhairlesDream.Server/ArtifactRunApi.fs | 16 + .../ArtifactRunCoordinator.fs | 15 + src/SomhairlesDream.Server/Store.fs | 3 + src/SomhairlesDream.Shared/Artifact.fs | 1 + tests/SomhairlesDream.Server.Tests/ApiTests.fs | 63 + tests/SomhairlesDream.Server.Tests/StoreTests.fs | 32 + 15 files changed, 59349 insertions(+), 11 deletions(-) create mode 100644 public/vendor/addons/loaders/GLTFLoader.js create mode 100644 public/vendor/addons/utils/BufferGeometryUtils.js create mode 100644 public/vendor/three-setup.js create mode 100644 public/vendor/three.module.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) { diff --git a/public/SomhairlesDream.Shared/Artifact.js b/public/SomhairlesDream.Shared/Artifact.js index 389d39c..6668abd 100644 --- a/public/SomhairlesDream.Shared/Artifact.js +++ b/public/SomhairlesDream.Shared/Artifact.js @@ -251,7 +251,7 @@ export function ArtifactManifest_$reflection() { } export class RunSnapshot extends Record { - constructor(ProjectId, RunId, BaseId, TargetId, Status, CurrentStepId, CurrentStepIndex, TotalSteps, LastHeartbeatAt, UpdatedAt, Message, ManifestPath, ManifestUrl, Error$, IsStale) { + constructor(ProjectId, RunId, BaseId, TargetId, Status, CurrentStepId, CurrentStepIndex, TotalSteps, CompletedSteps, LastHeartbeatAt, UpdatedAt, Message, ManifestPath, ManifestUrl, Error$, IsStale) { super(); this.ProjectId = ProjectId; this.RunId = RunId; @@ -261,6 +261,7 @@ export class RunSnapshot extends Record { this.CurrentStepId = CurrentStepId; this.CurrentStepIndex = (CurrentStepIndex | 0); this.TotalSteps = (TotalSteps | 0); + this.CompletedSteps = CompletedSteps; this.LastHeartbeatAt = LastHeartbeatAt; this.UpdatedAt = UpdatedAt; this.Message = Message; @@ -272,6 +273,6 @@ export class RunSnapshot extends Record { } export function RunSnapshot_$reflection() { - return record_type("SomhairlesDream.Shared.RunSnapshot", [], RunSnapshot, () => [["ProjectId", string_type], ["RunId", string_type], ["BaseId", string_type], ["TargetId", string_type], ["Status", string_type], ["CurrentStepId", option_type(string_type)], ["CurrentStepIndex", int32_type], ["TotalSteps", int32_type], ["LastHeartbeatAt", option_type(class_type("System.DateTimeOffset"))], ["UpdatedAt", class_type("System.DateTimeOffset")], ["Message", string_type], ["ManifestPath", option_type(string_type)], ["ManifestUrl", option_type(string_type)], ["Error", option_type(string_type)], ["IsStale", bool_type]]); + return record_type("SomhairlesDream.Shared.RunSnapshot", [], RunSnapshot, () => [["ProjectId", string_type], ["RunId", string_type], ["BaseId", string_type], ["TargetId", string_type], ["Status", string_type], ["CurrentStepId", option_type(string_type)], ["CurrentStepIndex", int32_type], ["TotalSteps", int32_type], ["CompletedSteps", array_type(string_type)], ["LastHeartbeatAt", option_type(class_type("System.DateTimeOffset"))], ["UpdatedAt", class_type("System.DateTimeOffset")], ["Message", string_type], ["ManifestPath", option_type(string_type)], ["ManifestUrl", option_type(string_type)], ["Error", option_type(string_type)], ["IsStale", bool_type]]); } diff --git a/public/index.html b/public/index.html index 47b6245..2acf08e 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,15 @@ Somhairle's Dream · 实时重建台 - + +
@@ -45,7 +53,7 @@ 待机 -

等待下一个设计运行

+

当前没有下一版正在开发