@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031559.0

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/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,7 @@ export interface ReplayScriptsInfo {
     height?: number;
     sdkVersion?: string;
     modelBriefs: string[];
+    deviceType?: string;
 }
 export declare const allScriptsFromDump: (dump: GroupedActionDump | IGroupedActionDump | ExecutionDump | null | undefined) => ReplayScriptsInfo | null;
 export declare const generateAnimationScripts: (execution: ExecutionDump | IExecutionDump | null, task: ExecutionTask | number, imageWidth: number, imageHeight: number, executionIndex?: number) => AnimationScript[] | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "1.5.2",
+  "version": "1.5.3-beta-20260305031559.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-20260305031559.0",
+    "@midscene/web": "1.5.3-beta-20260305031559.0",
+    "@midscene/playground": "1.5.3-beta-20260305031559.0",
+    "@midscene/shared": "1.5.3-beta-20260305031559.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 };

package/dist/lib/utils/pixi-loader.js

@@ -1,82 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    loadTexture: ()=>loadTexture,
-    getTexture: ()=>getTexture,
-    getTextureFromCache: ()=>getTextureFromCache
-});
-require("pixi.js/unsafe-eval");
-const external_pixi_js_namespaceObject = require("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 external_pixi_js_namespaceObject.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);
-    })();
-exports.getTexture = __webpack_exports__.getTexture;
-exports.getTextureFromCache = __webpack_exports__.getTextureFromCache;
-exports.loadTexture = __webpack_exports__.loadTexture;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "getTexture",
-    "getTextureFromCache",
-    "loadTexture"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/types/utils/pixi-loader.d.ts

@@ -1,5 +0,0 @@
-import 'pixi.js/unsafe-eval';
-import * as PIXI from 'pixi.js';
-export declare const loadTexture: (img: string) => Promise<void>;
-export declare const getTextureFromCache: (name: string) => PIXI.Texture | undefined;
-export declare const getTexture: (name: string) => Promise<PIXI.Texture | undefined>;