@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031416.0

package/dist/lib/store/store.js

@@ -35,6 +35,7 @@ const ELEMENTS_VISIBLE_KEY = 'midscene-elements-visible';
 const MODEL_CALL_DETAILS_KEY = 'midscene-model-call-details';
 const DARK_MODE_KEY = 'midscene-dark-mode';
 const PLAYBACK_SPEED_KEY = 'midscene-playback-speed';
+const SUBTITLE_ENABLED_KEY = 'midscene-subtitle-enabled';
 const parseBooleanParam = (value)=>{
     if (null === value) return;
     const normalized = value.trim().toLowerCase();
@@ -64,6 +65,7 @@ const useGlobalPreference = create((set)=>{
     const savedDarkMode = 'true' === localStorage.getItem(DARK_MODE_KEY);
     const parsedPlaybackSpeed = Number.parseFloat(localStorage.getItem(PLAYBACK_SPEED_KEY) || '1');
     const savedPlaybackSpeed = Number.isNaN(parsedPlaybackSpeed) ? 1 : parsedPlaybackSpeed;
+    const savedSubtitleEnabled = 'false' !== localStorage.getItem(SUBTITLE_ENABLED_KEY);
     const autoZoomFromQuery = getQueryPreference('focusOnCursor');
     const elementsVisibleFromQuery = getQueryPreference('showElementMarkers');
     const darkModeFromQuery = getQueryPreference('darkMode');
@@ -116,6 +118,13 @@ const useGlobalPreference = create((set)=>{
                 playbackSpeed: speed
             });
             localStorage.setItem(PLAYBACK_SPEED_KEY, speed.toString());
+        },
+        subtitleEnabled: savedSubtitleEnabled,
+        setSubtitleEnabled: (enabled)=>{
+            set({
+                subtitleEnabled: enabled
+            });
+            localStorage.setItem(SUBTITLE_ENABLED_KEY, enabled.toString());
         }
     };
 });

package/dist/lib/utils/replay-scripts.js

@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
     generateAnimationScripts: ()=>generateAnimationScripts,
     mergeTwoCameraState: ()=>mergeTwoCameraState,
     cameraStateForRect: ()=>cameraStateForRect,
+    extractDumpMetaInfo: ()=>extractDumpMetaInfo,
     allScriptsFromDump: ()=>allScriptsFromDump
 });
 const external_index_js_namespaceObject = require("./index.js");
@@ -110,16 +111,9 @@ const mergeTwoCameraState = (cameraState1, cameraState2)=>{
         width: newWidth
     };
 };
-const allScriptsFromDump = (dump)=>{
-    var _normalizedDump_executions, _normalizedDump_executions1, _normalizedDump_modelBriefs;
-    if (!dump) {
-        console.warn('[allScriptsFromDump] dump is empty');
-        return {
-            scripts: [],
-            modelBriefs: []
-        };
-    }
-    const normalizedDump = Array.isArray(dump.executions) ? dump : {
+const normalizeDump = (dump)=>{
+    if (!dump) return null;
+    return Array.isArray(dump.executions) ? dump : {
         sdkVersion: '',
         groupName: 'Execution',
         modelBriefs: [],
@@ -127,7 +121,11 @@ const allScriptsFromDump = (dump)=>{
             dump
         ]
     };
-    const dimensionsSet = new Set();
+};
+const extractDumpMetaInfo = (dump)=>{
+    var _normalizedDump_executions, _normalizedDump_modelBriefs;
+    const normalizedDump = normalizeDump(dump);
+    if (!normalizedDump) return null;
     let firstWidth;
     let firstHeight;
     const sdkVersion = normalizedDump.sdkVersion;
@@ -142,35 +140,17 @@ const allScriptsFromDump = (dump)=>{
                     firstWidth = w;
                     firstHeight = h;
                 }
-                dimensionsSet.add(`${w}x${h}`);
             }
-        });
-    });
-    if (!firstWidth || !firstHeight) {
-        console.warn('width or height is missing in dump file');
-        return {
-            scripts: [],
-            sdkVersion,
-            modelBriefs: []
-        };
-    }
-    const allScripts = [];
-    const executions = (null == (_normalizedDump_executions1 = normalizedDump.executions) ? void 0 : _normalizedDump_executions1.filter(Boolean)) || [];
-    for(let execIndex = 0; execIndex < executions.length; execIndex++){
-        const execution = executions[execIndex];
-        const scripts = generateAnimationScripts(execution, -1, firstWidth, firstHeight, execIndex);
-        if (scripts) allScripts.push(...scripts);
-        execution.tasks.forEach((task)=>{
             if (task.usage) {
                 const { model_name, model_description, intent } = task.usage;
                 if (intent && model_name) modelBriefsSet.add(model_description ? `${intent}/${model_name}(${model_description})` : `${intent}/${model_name}`);
             }
         });
-    }
-    const allScriptsWithoutIntermediateDoneFrame = allScripts.filter((script, index)=>{
-        if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
-        return true;
     });
+    if (!firstWidth || !firstHeight) {
+        console.warn('width or height is missing in dump file');
+        return null;
+    }
     const normalizedModelBriefs = (null == (_normalizedDump_modelBriefs = normalizedDump.modelBriefs) ? void 0 : _normalizedDump_modelBriefs.length) ? normalizedDump.modelBriefs : [];
     const modelBriefs = (()=>{
         var _list_;
@@ -185,11 +165,48 @@ const allScriptsFromDump = (dump)=>{
         return list;
     })();
     return {
-        scripts: allScriptsWithoutIntermediateDoneFrame,
         width: firstWidth,
         height: firstHeight,
         sdkVersion,
-        modelBriefs
+        modelBriefs,
+        deviceType: normalizedDump.deviceType
+    };
+};
+const allScriptsFromDump = (dump)=>{
+    var _normalizedDump_executions;
+    const normalizedDump = normalizeDump(dump);
+    if (!normalizedDump) {
+        console.warn('[allScriptsFromDump] dump is empty');
+        return {
+            scripts: [],
+            modelBriefs: []
+        };
+    }
+    const metaInfo = extractDumpMetaInfo(dump);
+    if (!metaInfo) return {
+        scripts: [],
+        sdkVersion: normalizedDump.sdkVersion,
+        modelBriefs: []
+    };
+    const { width: firstWidth, height: firstHeight } = metaInfo;
+    const allScripts = [];
+    const executions = (null == (_normalizedDump_executions = normalizedDump.executions) ? void 0 : _normalizedDump_executions.filter(Boolean)) || [];
+    for(let execIndex = 0; execIndex < executions.length; execIndex++){
+        const execution = executions[execIndex];
+        const scripts = generateAnimationScripts(execution, -1, firstWidth, firstHeight, execIndex);
+        if (scripts) allScripts.push(...scripts);
+    }
+    const allScriptsWithoutIntermediateDoneFrame = allScripts.filter((script, index)=>{
+        if (index !== allScripts.length - 1 && 'Done' === script.title) return false;
+        return true;
+    });
+    return {
+        scripts: allScriptsWithoutIntermediateDoneFrame,
+        width: firstWidth,
+        height: firstHeight,
+        sdkVersion: metaInfo.sdkVersion,
+        modelBriefs: metaInfo.modelBriefs,
+        deviceType: metaInfo.deviceType
     };
 };
 const generateAnimationScripts = (execution, task, imageWidth, imageHeight, executionIndex = 0)=>{
@@ -228,6 +245,19 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             subTitle,
             taskId
         });
+    const createScript = (base, screenshot)=>{
+        if (!screenshot) return base;
+        const script = _object_spread({}, base);
+        let cachedImg;
+        Object.defineProperty(script, 'img', {
+            get () {
+                if (void 0 === cachedImg) cachedImg = screenshot.base64;
+                return cachedImg;
+            },
+            enumerable: true
+        });
+        return script;
+    };
     const scripts = [];
     let insightCameraState;
     let insightOnTop = false;
@@ -271,17 +301,16 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                 var _context_shotSize, _context_shotSize1;
                 const width = (null == (_context_shotSize = context.shotSize) ? void 0 : _context_shotSize.width) || imageWidth;
                 const height = (null == (_context_shotSize1 = context.shotSize) ? void 0 : _context_shotSize1.height) || imageHeight;
-                const screenshotData = context.screenshot.base64;
-                scripts.push({
+                const contextScreenshot = context.screenshot;
+                scripts.push(createScript({
                     type: 'img',
-                    img: screenshotData,
                     duration: stillAfterInsightDuration,
                     title,
                     subTitle,
                     imageWidth: width,
                     imageHeight: height,
                     taskId: currentTaskId
-                });
+                }, contextScreenshot));
                 locateElements.forEach((element)=>{
                     var _task_log_taskInfo, _task_log, _context_shotSize, _context_shotSize1;
                     insightCameraState = _object_spread_props(_object_spread({}, cameraStateForRect(element.rect, width, height)), {
@@ -289,9 +318,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                         pointerTop: element.center[1]
                     });
                     const newCameraState = insightCameraState;
-                    scripts.push({
+                    scripts.push(createScript({
                         type: 'insight',
-                        img: screenshotData,
                         context: context,
                         camera: newCameraState,
                         highlightElement: element,
@@ -303,7 +331,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                         imageWidth: (null == (_context_shotSize = context.shotSize) ? void 0 : _context_shotSize.width) || imageWidth,
                         imageHeight: (null == (_context_shotSize1 = context.shotSize) ? void 0 : _context_shotSize1.height) || imageHeight,
                         taskId: currentTaskId
-                    });
+                    }, contextScreenshot));
                     insightOnTop = true;
                 });
             }
@@ -311,17 +339,15 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             if (planningTask.recorder && planningTask.recorder.length > 0) {
                 var _planningTask_recorder_, _task_uiContext_shotSize, _task_uiContext, _task_uiContext_shotSize1, _task_uiContext1;
                 const screenshot = null == (_planningTask_recorder_ = planningTask.recorder[0]) ? void 0 : _planningTask_recorder_.screenshot;
-                const screenshotData = (null == screenshot ? void 0 : screenshot.base64) || '';
-                scripts.push({
+                scripts.push(createScript({
                     type: 'img',
-                    img: screenshotData,
                     duration: stillDuration,
                     title: (0, agent_namespaceObject.typeStr)(task),
                     subTitle: (0, agent_namespaceObject.paramStr)(task),
                     imageWidth: (null == (_task_uiContext = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize = _task_uiContext.shotSize) ? void 0 : _task_uiContext_shotSize.width) || imageWidth,
                     imageHeight: (null == (_task_uiContext1 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize1 = _task_uiContext1.shotSize) ? void 0 : _task_uiContext_shotSize1.height) || imageHeight,
                     taskId: currentTaskId
-                });
+                }, screenshot));
             }
         } else if ('Action Space' === task.type) {
             var _task_recorder_, _task_recorder, _task_uiContext_shotSize2, _task_uiContext2, _task_uiContext_shotSize3, _task_uiContext3;
@@ -346,10 +372,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             }
             scripts.push(setPointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle, currentTaskId));
             const screenshot = null == (_task_recorder = task.recorder) ? void 0 : null == (_task_recorder_ = _task_recorder[0]) ? void 0 : _task_recorder_.screenshot;
-            const actionScreenshotData = (null == screenshot ? void 0 : screenshot.base64) || '';
-            scripts.push({
+            scripts.push(createScript({
                 type: 'img',
-                img: actionScreenshotData,
                 duration: actionDuration,
                 camera: 'Sleep' === task.subType ? fullPageCameraState : void 0,
                 title,
@@ -357,7 +381,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                 imageWidth: (null == (_task_uiContext2 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize2 = _task_uiContext2.shotSize) ? void 0 : _task_uiContext_shotSize2.width) || imageWidth,
                 imageHeight: (null == (_task_uiContext3 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize3 = _task_uiContext3.shotSize) ? void 0 : _task_uiContext_shotSize3.height) || imageHeight,
                 taskId: currentTaskId
-            });
+            }, screenshot));
         } else {
             var _task_recorder_1, _task_recorder1;
             const title = (0, agent_namespaceObject.typeStr)(task);
@@ -365,10 +389,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             const screenshot = null == (_task_recorder1 = task.recorder) ? void 0 : null == (_task_recorder_1 = _task_recorder1[task.recorder.length - 1]) ? void 0 : _task_recorder_1.screenshot;
             if (screenshot) {
                 var _task_uiContext_shotSize4, _task_uiContext4, _task_uiContext_shotSize5, _task_uiContext5;
-                const screenshotData = screenshot.base64;
-                scripts.push({
+                scripts.push(createScript({
                     type: 'img',
-                    img: screenshotData,
                     duration: stillDuration,
                     camera: fullPageCameraState,
                     title,
@@ -376,7 +398,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                     imageWidth: (null == (_task_uiContext4 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize4 = _task_uiContext4.shotSize) ? void 0 : _task_uiContext_shotSize4.width) || imageWidth,
                     imageHeight: (null == (_task_uiContext5 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize5 = _task_uiContext5.shotSize) ? void 0 : _task_uiContext_shotSize5.height) || imageHeight,
                     taskId: currentTaskId
-                });
+                }, screenshot));
             }
         }
         if ('finished' !== task.status) {
@@ -385,10 +407,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             const errorMsg = task.errorMessage || 'unknown error';
             const errorSubTitle = errorMsg.indexOf('NOT_IMPLEMENTED_AS_DESIGNED') > 0 ? 'Further actions cannot be performed in the current environment' : errorMsg;
             const screenshot = null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[task.recorder.length - 1]) ? void 0 : _task_recorder_2.screenshot;
-            const errorScreenshotData = (null == screenshot ? void 0 : screenshot.base64) || '';
-            scripts.push({
+            scripts.push(createScript({
                 type: 'img',
-                img: errorScreenshotData,
                 camera: fullPageCameraState,
                 duration: stillDuration,
                 title: errorTitle,
@@ -396,7 +416,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
                 imageWidth: (null == (_task_uiContext6 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize6 = _task_uiContext6.shotSize) ? void 0 : _task_uiContext_shotSize6.width) || imageWidth,
                 imageHeight: (null == (_task_uiContext7 = task.uiContext) ? void 0 : null == (_task_uiContext_shotSize7 = _task_uiContext7.shotSize) ? void 0 : _task_uiContext_shotSize7.height) || imageHeight,
                 taskId: currentTaskId
-            });
+            }, screenshot));
         }
     });
     scripts.push({
@@ -411,11 +431,13 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
 };
 exports.allScriptsFromDump = __webpack_exports__.allScriptsFromDump;
 exports.cameraStateForRect = __webpack_exports__.cameraStateForRect;
+exports.extractDumpMetaInfo = __webpack_exports__.extractDumpMetaInfo;
 exports.generateAnimationScripts = __webpack_exports__.generateAnimationScripts;
 exports.mergeTwoCameraState = __webpack_exports__.mergeTwoCameraState;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "allScriptsFromDump",
     "cameraStateForRect",
+    "extractDumpMetaInfo",
     "generateAnimationScripts",
     "mergeTwoCameraState"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];

package/dist/types/component/blackboard/index.d.ts

@@ -1,9 +1,5 @@
-import 'pixi.js/unsafe-eval';
 import type { BaseElement, Rect, UIContext } from '@midscene/core';
-import * as PIXI from 'pixi.js';
 import './index.less';
-export declare const pointMarkForItem: (point: [number, number], type: "highlightPoint") => PIXI.Graphics;
-export declare const rectMarkForItem: (rect: Rect, name: string, type: "element" | "searchArea" | "highlight") => (PIXI.Graphics | PIXI.Text)[];
 export declare const Blackboard: (props: {
     uiContext: UIContext | undefined | null;
     highlightElements?: BaseElement[];

package/dist/types/component/player/index.d.ts

@@ -1,4 +1,3 @@
-import 'pixi.js/unsafe-eval';
 import './index.less';
 import type { AnimationScript } from '../../utils/replay-scripts';
 export declare function Player(props?: {

package/dist/types/component/player/remotion/StepScene.d.ts

@@ -0,0 +1,9 @@
+import type { FrameMap } from './frame-calculator';
+export declare const StepsTimeline: React.FC<{
+    frameMap: FrameMap;
+    autoZoom: boolean;
+    frame: number;
+    width: number;
+    height: number;
+    fps: number;
+}>;

package/dist/types/component/player/remotion/derive-frame-state.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Shared frame state derivation from ScriptFrame timeline.
+ * Used by both Remotion preview (StepScene.tsx) and Canvas export (export-branded-video.ts).
+ */
+import type { ScriptFrame } from './frame-calculator';
+export interface CameraState {
+    left: number;
+    top: number;
+    width: number;
+    pointerLeft: number;
+    pointerTop: number;
+}
+export interface InsightOverlay {
+    highlightElement?: ScriptFrame['highlightElement'];
+    searchArea?: ScriptFrame['searchArea'];
+    alpha: number;
+}
+export interface FrameState {
+    img: string;
+    imageWidth: number;
+    imageHeight: number;
+    prevImg: string | null;
+    camera: CameraState;
+    prevCamera: CameraState;
+    insights: InsightOverlay[];
+    spinning: boolean;
+    spinningElapsedMs: number;
+    currentPointerImg: string;
+    title: string;
+    subTitle: string;
+    taskId: string | undefined;
+    frameInScript: number;
+    scriptIndex: number;
+    imageChanged: boolean;
+    pointerMoved: boolean;
+    rawProgress: number;
+}
+export declare function deriveFrameState(scriptFrames: ScriptFrame[], frame: number, baseW: number, baseH: number, fps: number): FrameState;

package/dist/types/component/player/remotion/export-branded-video.d.ts

@@ -0,0 +1,2 @@
+import type { FrameMap } from './frame-calculator';
+export declare function exportBrandedVideo(frameMap: FrameMap, onProgress?: (pct: number) => void): Promise<void>;

package/dist/types/component/player/remotion/frame-calculator.d.ts

@@ -0,0 +1,35 @@
+import type { LocateResultElement, Rect } from '@midscene/core';
+import type { AnimationScript } from '../../../utils/replay-scripts';
+export declare const FPS = 30;
+export interface ScriptFrame {
+    type: 'img' | 'insight' | 'clear-insight' | 'pointer' | 'spinning-pointer' | 'sleep';
+    startFrame: number;
+    durationInFrames: number;
+    img?: string;
+    imageWidth?: number;
+    imageHeight?: number;
+    cameraTarget?: {
+        left: number;
+        top: number;
+        width: number;
+        pointerLeft: number;
+        pointerTop: number;
+    };
+    insightPhaseFrames?: number;
+    cameraPhaseFrames?: number;
+    highlightElement?: LocateResultElement;
+    searchArea?: Rect;
+    pointerImg?: string;
+    title?: string;
+    subTitle?: string;
+    taskId?: string;
+}
+export interface FrameMap {
+    scriptFrames: ScriptFrame[];
+    totalDurationInFrames: number;
+    fps: number;
+    stepsDurationInFrames: number;
+    imageWidth: number;
+    imageHeight: number;
+}
+export declare function calculateFrameMap(scripts: AnimationScript[]): FrameMap;

package/dist/types/component/player/use-frame-player.d.ts

@@ -0,0 +1,17 @@
+interface UseFramePlayerOptions {
+    durationInFrames: number;
+    fps: number;
+    autoPlay?: boolean;
+    loop?: boolean;
+    playbackRate?: number;
+}
+interface FramePlayer {
+    currentFrame: number;
+    playing: boolean;
+    play: () => void;
+    pause: () => void;
+    toggle: () => void;
+    seekTo: (frame: number) => void;
+}
+export declare function useFramePlayer(options: UseFramePlayerOptions): FramePlayer;
+export {};

package/dist/types/hooks/usePlaygroundExecution.d.ts

@@ -1,9 +1,23 @@
 import type { DeviceAction } from '@midscene/core';
 import type { FormValue, InfoListItem, PlaygroundSDKLike, StorageProvider } from '../types';
+export interface UsePlaygroundExecutionOptions {
+    playgroundSDK: PlaygroundSDKLike | null;
+    storage: StorageProvider | undefined | null;
+    actionSpace: DeviceAction<unknown>[];
+    loading: boolean;
+    setLoading: (loading: boolean) => void;
+    setInfoList: React.Dispatch<React.SetStateAction<InfoListItem[]>>;
+    replayCounter: number;
+    setReplayCounter: React.Dispatch<React.SetStateAction<number>>;
+    verticalMode: boolean;
+    currentRunningIdRef: React.MutableRefObject<number | null>;
+    interruptedFlagRef: React.MutableRefObject<Record<number, boolean>>;
+    deviceType?: string;
+}
 /**
  * Hook for handling playground execution logic
  */
-export declare function usePlaygroundExecution(playgroundSDK: PlaygroundSDKLike | null, storage: StorageProvider | undefined | null, actionSpace: DeviceAction<unknown>[], loading: boolean, setLoading: (loading: boolean) => void, setInfoList: React.Dispatch<React.SetStateAction<InfoListItem[]>>, replayCounter: number, setReplayCounter: React.Dispatch<React.SetStateAction<number>>, verticalMode: boolean, currentRunningIdRef: React.MutableRefObject<number | null>, interruptedFlagRef: React.MutableRefObject<Record<number, boolean>>): {
+export declare function usePlaygroundExecution(options: UsePlaygroundExecutionOptions): {
     handleRun: (value: FormValue) => Promise<void>;
     handleStop: () => Promise<void>;
     canStop: boolean;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, generateAnimationScripts, } from './utils/replay-scripts';
+export { type AnimationScript, type DumpMetaInfo, type ReplayScriptsInfo, allScriptsFromDump, extractDumpMetaInfo, generateAnimationScripts, } from './utils/replay-scripts';
 export { useEnvConfig, useGlobalPreference } from './store/store';
 export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';

package/dist/types/store/store.d.ts

@@ -7,12 +7,14 @@ export declare const useGlobalPreference: Z.UseBoundStore<Z.StoreApi<{
     modelCallDetailsEnabled: boolean;
     darkModeEnabled: boolean;
     playbackSpeed: PlaybackSpeedType;
+    subtitleEnabled: boolean;
     setBackgroundVisible: (visible: boolean) => void;
     setElementsVisible: (visible: boolean) => void;
     setAutoZoom: (enabled: boolean) => void;
     setModelCallDetailsEnabled: (enabled: boolean) => void;
     setDarkModeEnabled: (enabled: boolean) => void;
     setPlaybackSpeed: (speed: PlaybackSpeedType) => void;
+    setSubtitleEnabled: (enabled: boolean) => void;
 }>>;
 /**
  * Service Mode

package/dist/types/utils/replay-scripts.d.ts

@@ -30,6 +30,21 @@ export interface ReplayScriptsInfo {
     height?: number;
     sdkVersion?: string;
     modelBriefs: string[];
+    deviceType?: string;
 }
-export declare const allScriptsFromDump: (dump: GroupedActionDump | IGroupedActionDump | ExecutionDump | null | undefined) => ReplayScriptsInfo | null;
+type DumpInput = GroupedActionDump | IGroupedActionDump | ExecutionDump | null | undefined;
+export interface DumpMetaInfo {
+    width: number;
+    height: number;
+    sdkVersion?: string;
+    modelBriefs: string[];
+    deviceType?: string;
+}
+/**
+ * Extract lightweight metadata from dump without reading any .base64 fields.
+ * Used to set up the UI (dimensions, version, model info) before replay.
+ */
+export declare const extractDumpMetaInfo: (dump: DumpInput) => DumpMetaInfo | null;
+export declare const allScriptsFromDump: (dump: DumpInput) => ReplayScriptsInfo | null;
 export declare const generateAnimationScripts: (execution: ExecutionDump | IExecutionDump | null, task: ExecutionTask | number, imageWidth: number, imageHeight: number, executionIndex?: number) => AnimationScript[] | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.5.2",
+  "version": "1.5.3-beta-20260305031416.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -23,7 +23,6 @@
     "react-dom": ">=19.1.0"
   },
   "devDependencies": {
-    "@pixi/unsafe-eval": "7.4.2",
     "@rsbuild/plugin-less": "^1.5.0",
     "@rsbuild/plugin-node-polyfill": "1.4.2",
     "@rsbuild/plugin-react": "^1.4.1",
@@ -35,8 +34,6 @@
     "@types/react-dom": "^18.3.1",
     "execa": "9.3.0",
     "http-server": "14.1.1",
-    "pixi-filters": "6.0.5",
-    "pixi.js": "8.1.1",
     "query-string": "9.1.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -60,10 +57,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/playground": "1.5.2",
-    "@midscene/core": "1.5.2",
-    "@midscene/shared": "1.5.2",
-    "@midscene/web": "1.5.2"
+    "@midscene/core": "1.5.3-beta-20260305031416.0",
+    "@midscene/playground": "1.5.3-beta-20260305031416.0",
+    "@midscene/shared": "1.5.3-beta-20260305031416.0",
+    "@midscene/web": "1.5.3-beta-20260305031416.0"
   },
   "license": "MIT",
   "scripts": {

package/dist/es/utils/pixi-loader.mjs

@@ -1,42 +0,0 @@
-import "pixi.js/unsafe-eval";
-import { Assets } from "pixi.js";
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
-    try {
-        var info = gen[key](arg);
-        var value = info.value;
-    } catch (error) {
-        reject(error);
-        return;
-    }
-    if (info.done) resolve(value);
-    else Promise.resolve(value).then(_next, _throw);
-}
-function _async_to_generator(fn) {
-    return function() {
-        var self = this, args = arguments;
-        return new Promise(function(resolve, reject) {
-            var gen = fn.apply(self, args);
-            function _next(value) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
-            }
-            function _throw(err) {
-                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
-            }
-            _next(void 0);
-        });
-    };
-}
-const globalTextureMap = new Map();
-const loadTexture = (img)=>_async_to_generator(function*() {
-        if (globalTextureMap.has(img)) return;
-        return Assets.load(img).then((texture)=>{
-            globalTextureMap.set(img, texture);
-        });
-    })();
-const getTextureFromCache = (name)=>globalTextureMap.get(name);
-const getTexture = (name)=>_async_to_generator(function*() {
-        if (globalTextureMap.has(name)) return globalTextureMap.get(name);
-        yield loadTexture(name);
-        return globalTextureMap.get(name);
-    })();
-export { getTexture, getTextureFromCache, loadTexture };