@midscene/visualizer 1.5.2 → 1.5.3-beta-20260305031416.0

package/dist/es/component/player/remotion/frame-calculator.mjs

@@ -0,0 +1,149 @@
+const FPS = 30;
+function calculateFrameMap(scripts) {
+    let baseImageWidth = 1920;
+    let baseImageHeight = 1080;
+    for (const s of scripts)if (('img' === s.type || 'insight' === s.type) && s.img) {
+        baseImageWidth = s.imageWidth || 1920;
+        baseImageHeight = s.imageHeight || 1080;
+        break;
+    }
+    const scriptFrames = [];
+    let currentFrame = 0;
+    for (const script of scripts){
+        const durationMs = script.duration;
+        switch(script.type){
+            case 'sleep':
+                {
+                    const frames = Math.ceil(durationMs / 1000 * FPS);
+                    scriptFrames.push({
+                        type: 'sleep',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'img':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    const camera = script.camera;
+                    const iw = script.imageWidth || baseImageWidth;
+                    const ih = script.imageHeight || baseImageHeight;
+                    const sf = {
+                        type: 'img',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        img: script.img,
+                        imageWidth: iw,
+                        imageHeight: ih,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    };
+                    if (camera) {
+                        var _camera_pointerLeft, _camera_pointerTop;
+                        sf.cameraTarget = {
+                            left: camera.left,
+                            top: camera.top,
+                            width: camera.width,
+                            pointerLeft: null != (_camera_pointerLeft = camera.pointerLeft) ? _camera_pointerLeft : Math.round(iw / 2),
+                            pointerTop: null != (_camera_pointerTop = camera.pointerTop) ? _camera_pointerTop : Math.round(ih / 2)
+                        };
+                    }
+                    scriptFrames.push(sf);
+                    currentFrame += frames;
+                    break;
+                }
+            case 'insight':
+                {
+                    const insightPhaseFrames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    const cameraDurationMs = script.insightCameraDuration || 0;
+                    const cameraPhaseFrames = Math.ceil(cameraDurationMs / 1000 * FPS);
+                    const totalFrames = insightPhaseFrames + cameraPhaseFrames;
+                    const iw = script.imageWidth || baseImageWidth;
+                    const ih = script.imageHeight || baseImageHeight;
+                    const camera = script.camera;
+                    const sf = {
+                        type: 'insight',
+                        startFrame: currentFrame,
+                        durationInFrames: totalFrames,
+                        img: script.img,
+                        imageWidth: iw,
+                        imageHeight: ih,
+                        insightPhaseFrames,
+                        cameraPhaseFrames,
+                        highlightElement: script.highlightElement,
+                        searchArea: script.searchArea,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    };
+                    if (camera) {
+                        var _camera_pointerLeft1, _camera_pointerTop1;
+                        sf.cameraTarget = {
+                            left: camera.left,
+                            top: camera.top,
+                            width: camera.width,
+                            pointerLeft: null != (_camera_pointerLeft1 = camera.pointerLeft) ? _camera_pointerLeft1 : Math.round(iw / 2),
+                            pointerTop: null != (_camera_pointerTop1 = camera.pointerTop) ? _camera_pointerTop1 : Math.round(ih / 2)
+                        };
+                    }
+                    scriptFrames.push(sf);
+                    currentFrame += totalFrames;
+                    break;
+                }
+            case 'clear-insight':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    scriptFrames.push({
+                        type: 'clear-insight',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'spinning-pointer':
+                {
+                    const frames = Math.max(Math.ceil(durationMs / 1000 * FPS), 1);
+                    scriptFrames.push({
+                        type: 'spinning-pointer',
+                        startFrame: currentFrame,
+                        durationInFrames: frames,
+                        title: script.title,
+                        subTitle: script.subTitle,
+                        taskId: script.taskId
+                    });
+                    currentFrame += frames;
+                    break;
+                }
+            case 'pointer':
+                scriptFrames.push({
+                    type: 'pointer',
+                    startFrame: currentFrame,
+                    durationInFrames: 0,
+                    pointerImg: script.img,
+                    title: script.title,
+                    subTitle: script.subTitle,
+                    taskId: script.taskId
+                });
+                break;
+        }
+    }
+    const stepsDurationInFrames = Math.max(currentFrame, 1);
+    return {
+        scriptFrames,
+        totalDurationInFrames: stepsDurationInFrames,
+        fps: FPS,
+        stepsDurationInFrames,
+        imageWidth: baseImageWidth,
+        imageHeight: baseImageHeight
+    };
+}
+export { FPS, calculateFrameMap };

package/dist/es/component/player/use-frame-player.mjs

@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+function useFramePlayer(options) {
+    const { durationInFrames, fps, autoPlay = false, loop = false } = options;
+    const [currentFrame, setCurrentFrame] = useState(0);
+    const [playing, setPlaying] = useState(autoPlay);
+    const playingRef = useRef(playing);
+    const frameRef = useRef(currentFrame);
+    var _options_playbackRate;
+    const rateRef = useRef(null != (_options_playbackRate = options.playbackRate) ? _options_playbackRate : 1);
+    const durationRef = useRef(durationInFrames);
+    const fpsRef = useRef(fps);
+    const loopRef = useRef(loop);
+    playingRef.current = playing;
+    frameRef.current = currentFrame;
+    var _options_playbackRate1;
+    rateRef.current = null != (_options_playbackRate1 = options.playbackRate) ? _options_playbackRate1 : 1;
+    durationRef.current = durationInFrames;
+    fpsRef.current = fps;
+    loopRef.current = loop;
+    useEffect(()=>{
+        if (!playing) return;
+        let rafId;
+        let lastTime = null;
+        let accumulated = 0;
+        const tick = (now)=>{
+            if (null !== lastTime) {
+                const delta = (now - lastTime) * rateRef.current;
+                accumulated += delta;
+                const frameDuration = 1000 / fpsRef.current;
+                while(accumulated >= frameDuration){
+                    accumulated -= frameDuration;
+                    const next = frameRef.current + 1;
+                    if (next >= durationRef.current) if (loopRef.current) {
+                        frameRef.current = 0;
+                        setCurrentFrame(0);
+                    } else {
+                        frameRef.current = durationRef.current - 1;
+                        setCurrentFrame(durationRef.current - 1);
+                        setPlaying(false);
+                        return;
+                    }
+                    else {
+                        frameRef.current = next;
+                        setCurrentFrame(next);
+                    }
+                }
+            }
+            lastTime = now;
+            rafId = requestAnimationFrame(tick);
+        };
+        rafId = requestAnimationFrame(tick);
+        return ()=>cancelAnimationFrame(rafId);
+    }, [
+        playing
+    ]);
+    const play = useCallback(()=>{
+        if (frameRef.current >= durationRef.current - 1) {
+            frameRef.current = 0;
+            setCurrentFrame(0);
+        }
+        setPlaying(true);
+    }, []);
+    const pause = useCallback(()=>setPlaying(false), []);
+    const toggle = useCallback(()=>{
+        if (playingRef.current) setPlaying(false);
+        else {
+            if (frameRef.current >= durationRef.current - 1) {
+                frameRef.current = 0;
+                setCurrentFrame(0);
+            }
+            setPlaying(true);
+        }
+    }, []);
+    const seekTo = useCallback((frame)=>{
+        const clamped = Math.max(0, Math.min(frame, durationRef.current - 1));
+        frameRef.current = clamped;
+        setCurrentFrame(clamped);
+    }, []);
+    return {
+        currentFrame,
+        playing,
+        play,
+        pause,
+        toggle,
+        seekTo
+    };
+}
+export { useFramePlayer };

package/dist/es/component/universal-playground/index.mjs

@@ -100,7 +100,20 @@ function UniversalPlayground({ playgroundSDK, storage, contextProvider, config:
         playgroundSDK
     ]);
     const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider, branding.targetName);
-    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
+    const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution({
+        playgroundSDK,
+        storage: effectiveStorage,
+        actionSpace,
+        loading,
+        setLoading,
+        setInfoList,
+        replayCounter,
+        setReplayCounter,
+        verticalMode,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        deviceType: componentConfig.deviceType
+    });
     useEffect(()=>{
         if ((null == playgroundSDK ? void 0 : playgroundSDK.overrideConfig) && config) playgroundSDK.overrideConfig(config).catch((error)=>{
             console.error('Failed to override SDK config:', error);

package/dist/es/hooks/usePlaygroundExecution.mjs

@@ -88,7 +88,7 @@ function buildProgressContent(task) {
     const description = paramStr(task);
     return description ? `${action} - ${description}` : action;
 }
-function wrapExecutionDumpForReplay(dump) {
+function wrapExecutionDumpForReplay(dump, deviceType) {
     const modelBriefsSet = new Set();
     if ((null == dump ? void 0 : dump.tasks) && Array.isArray(dump.tasks)) dump.tasks.forEach((task)=>{
         if (task.usage) {
@@ -106,10 +106,12 @@ function wrapExecutionDumpForReplay(dump) {
         modelBriefs,
         executions: [
             dump
-        ]
+        ],
+        deviceType
     };
 }
-function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
+function usePlaygroundExecution(options) {
+    const { playgroundSDK, storage, actionSpace, loading, setLoading, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef, deviceType } = options;
     const { deepLocate, deepThink, screenshotIncluded, domIncluded } = useEnvConfig();
     const handleRun = useCallback((value)=>_async_to_generator(function*() {
             if (!playgroundSDK) return void console.warn('PlaygroundSDK is not available');
@@ -206,7 +208,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
             let counter = replayCounter;
             if (null == result ? void 0 : result.dump) {
                 if (result.dump.tasks && Array.isArray(result.dump.tasks)) {
-                    const groupedDump = wrapExecutionDumpForReplay(result.dump);
+                    const groupedDump = wrapExecutionDumpForReplay(result.dump, deviceType);
                     const info = allScriptsFromDump(groupedDump);
                     setReplayCounter((c)=>c + 1);
                     replayInfo = info;
@@ -264,7 +266,8 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         deepLocate,
         deepThink,
         screenshotIncluded,
-        domIncluded
+        domIncluded,
+        deviceType
     ]);
     const handleStop = useCallback(()=>_async_to_generator(function*() {
             const thisRunningId = currentRunningIdRef.current;
@@ -291,7 +294,7 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
                     let replayInfo = null;
                     let counter = replayCounter;
                     if ((null == (_executionData_dump = executionData.dump) ? void 0 : _executionData_dump.tasks) && Array.isArray(executionData.dump.tasks)) {
-                        const groupedDump = wrapExecutionDumpForReplay(executionData.dump);
+                        const groupedDump = wrapExecutionDumpForReplay(executionData.dump, deviceType);
                         replayInfo = allScriptsFromDump(groupedDump);
                         setReplayCounter((c)=>c + 1);
                         counter = replayCounter + 1;
@@ -349,7 +352,8 @@ function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, se
         setLoading,
         setInfoList,
         verticalMode,
-        replayCounter
+        replayCounter,
+        deviceType
     ]);
     const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK && !!playgroundSDK.cancelExecution;
     return {

package/dist/es/index.mjs

@@ -1,4 +1,4 @@
-import { allScriptsFromDump, generateAnimationScripts } from "./utils/replay-scripts.mjs";
+import { allScriptsFromDump, extractDumpMetaInfo, generateAnimationScripts } from "./utils/replay-scripts.mjs";
 import { useEnvConfig, useGlobalPreference } from "./store/store.mjs";
 import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
 import { EnvConfig } from "./component/env-config/index.mjs";
@@ -22,4 +22,4 @@ import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
 import { IndexedDBStorageProvider, LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, StorageType, createStorageProvider, detectBestStorageType } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, screenshot_viewer as ScreenshotViewer, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useGlobalPreference, useSafeOverrideAIConfig, useServerValid, useTheme };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, screenshot_viewer as ScreenshotViewer, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, extractDumpMetaInfo, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useGlobalPreference, useSafeOverrideAIConfig, useServerValid, useTheme };

package/dist/es/store/store.mjs

@@ -33,6 +33,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();
@@ -62,6 +63,7 @@ const useGlobalPreference = store_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');
@@ -114,6 +116,13 @@ const useGlobalPreference = store_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/es/utils/replay-scripts.mjs

@@ -79,16 +79,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: [],
@@ -96,7 +89,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;
@@ -111,35 +108,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_;
@@ -154,11 +133,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)=>{
@@ -197,6 +213,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;
@@ -240,17 +269,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)), {
@@ -258,9 +286,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,
@@ -272,7 +299,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;
                 });
             }
@@ -280,17 +307,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: typeStr(task),
                     subTitle: 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;
@@ -315,10 +340,8 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
             }
             scripts.push(setPointerScript(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,
@@ -326,7 +349,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 = typeStr(task);
@@ -334,10 +357,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,
@@ -345,7 +366,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) {
@@ -354,10 +375,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,
@@ -365,7 +384,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({
@@ -378,4 +397,4 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight, exec
     });
     return scripts;
 };
-export { allScriptsFromDump, cameraStateForRect, generateAnimationScripts, mergeTwoCameraState };
+export { allScriptsFromDump, cameraStateForRect, extractDumpMetaInfo, generateAnimationScripts, mergeTwoCameraState };