@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813021342.0

package/dist/es/component/playground/playground-constants.js

@@ -1,39 +0,0 @@
-import Buffer from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer
-};
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert } from "antd";
-import ShinyText from "../shiny-text";
-import "./index.css";
-const errorMessageServerNotReady = /* @__PURE__ */ jsxs("span", { children: [
-  "Don't worry, just one more step to launch the playground server.",
-  /* @__PURE__ */ jsx("br", {}),
-  "Please run one of the commands under the midscene project directory:",
-  /* @__PURE__ */ jsx("br", {}),
-  "a. ",
-  /* @__PURE__ */ jsx("strong", { children: "npx midscene-playground" }),
-  /* @__PURE__ */ jsx("br", {}),
-  "b. ",
-  /* @__PURE__ */ jsx("strong", { children: "npx --yes @midscene/web" })
-] });
-const serverLaunchTip = (notReadyMessage = errorMessageServerNotReady) => /* @__PURE__ */ jsx("div", { className: "server-tip", children: /* @__PURE__ */ jsx(
-  Alert,
-  {
-    message: "Playground Server Not Ready",
-    description: notReadyMessage,
-    type: "warning"
-  }
-) });
-const emptyResultTip = /* @__PURE__ */ jsx("div", { className: "result-empty-tip", style: { textAlign: "center" }, children: /* @__PURE__ */ jsx(ShinyText, { disabled: true, text: "The result will be shown here" }) });
-const trackingTip = "limit popup to current tab";
-const deepThinkTip = "deep think";
-export {
-  deepThinkTip,
-  emptyResultTip,
-  errorMessageServerNotReady,
-  serverLaunchTip,
-  trackingTip
-};

package/dist/es/component/playground/playground-types.js

@@ -1,6 +0,0 @@
-import Buffer from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer
-};

package/dist/es/component/playground/playground-utils.js

@@ -1,141 +0,0 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import Buffer2 from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer: Buffer2
-};
-import { PLAYGROUND_SERVER_PORT } from "@midscene/shared/constants";
-import {
-  ERROR_CODE_NOT_IMPLEMENTED_AS_DESIGNED,
-  StaticPage,
-  StaticPageAgent
-} from "@midscene/web/playground";
-const serverBase = `http://localhost:${PLAYGROUND_SERVER_PORT}`;
-const checkServerStatus = () => __async(void 0, null, function* () {
-  try {
-    const res = yield fetch(`${serverBase}/status`);
-    return res.status === 200;
-  } catch (e) {
-    return false;
-  }
-});
-const requestPlaygroundServer = (_0, _1, _2, ..._3) => __async(void 0, [_0, _1, _2, ..._3], function* (context, type, prompt, {
-  requestId,
-  deepThink
-} = {}) {
-  const payload = { context, type, prompt };
-  if (requestId) {
-    payload.requestId = requestId;
-  }
-  if (deepThink) {
-    payload.deepThink = deepThink;
-  }
-  const res = yield fetch(`${serverBase}/execute`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify(payload)
-  });
-  return res.json();
-});
-const overrideServerConfig = (aiConfig) => __async(void 0, null, function* () {
-  return fetch(`${serverBase}/config`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json"
-    },
-    body: JSON.stringify({ aiConfig })
-  });
-});
-const cancelTask = (requestId) => __async(void 0, null, function* () {
-  try {
-    const res = yield fetch(`${serverBase}/cancel/${requestId}`);
-    return res.json();
-  } catch (error) {
-    console.error("Failed to cancel task:", error);
-    return { error: "Failed to cancel task" };
-  }
-});
-const getTaskProgress = (requestId) => __async(void 0, null, function* () {
-  try {
-    const response = yield fetch(`${serverBase}/task-progress/${requestId}`);
-    return yield response.json();
-  } catch (error) {
-    console.error("Failed to poll task progress:", error);
-    return { tip: null };
-  }
-});
-const actionNameForType = (type) => {
-  if (type === "aiAction")
-    return "Action";
-  if (type === "aiQuery")
-    return "Query";
-  if (type === "aiAssert")
-    return "Assert";
-  if (type === "aiTap")
-    return "Tap";
-  return type;
-};
-const staticAgentFromContext = (context) => {
-  const page = new StaticPage(context);
-  return new StaticPageAgent(page);
-};
-const formatErrorMessage = (e) => {
-  const errorMessage = (e == null ? void 0 : e.message) || "";
-  if (errorMessage.includes("of different extension")) {
-    return "Conflicting extension detected. Please disable the suspicious plugins and refresh the page. Guide: https://midscenejs.com/quick-experience.html#faq";
-  }
-  if (!(errorMessage == null ? void 0 : errorMessage.includes(ERROR_CODE_NOT_IMPLEMENTED_AS_DESIGNED))) {
-    return errorMessage;
-  }
-  return "Unknown error";
-};
-const getPlaceholderForType = (type) => {
-  if (type === "aiQuery") {
-    return "What do you want to query?";
-  }
-  if (type === "aiAssert") {
-    return "What do you want to assert?";
-  }
-  return "What do you want to do?";
-};
-const blankResult = {
-  result: null,
-  dump: null,
-  reportHTML: null,
-  error: null
-};
-export {
-  actionNameForType,
-  blankResult,
-  cancelTask,
-  checkServerStatus,
-  formatErrorMessage,
-  getPlaceholderForType,
-  getTaskProgress,
-  overrideServerConfig,
-  requestPlaygroundServer,
-  serverBase,
-  staticAgentFromContext
-};

package/dist/es/component/playground/useServerValid.js

@@ -1,58 +0,0 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import Buffer2 from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer: Buffer2
-};
-import { useEffect, useState } from "react";
-import { useEnvConfig } from "../store/store";
-import { checkServerStatus } from "./playground-utils";
-const useServerValid = (shouldRun = true) => {
-  const [serverValid, setServerValid] = useState(true);
-  const { serviceMode } = useEnvConfig();
-  useEffect(() => {
-    let interruptFlag = false;
-    if (!shouldRun)
-      return;
-    Promise.resolve(
-      (() => __async(void 0, null, function* () {
-        while (!interruptFlag) {
-          const status = yield checkServerStatus();
-          if (status) {
-            setServerValid(true);
-          } else {
-            setServerValid(false);
-          }
-          yield new Promise((resolve) => setTimeout(resolve, 1e3));
-        }
-      }))()
-    );
-    return () => {
-      interruptFlag = true;
-    };
-  }, [serviceMode, shouldRun]);
-  return serverValid;
-};
-export {
-  useServerValid
-};

package/dist/es/component/playground/useStaticPageAgent.js

@@ -1,20 +0,0 @@
-import Buffer from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer
-};
-import { useMemo } from "react";
-import { staticAgentFromContext } from "./playground-utils";
-const useStaticPageAgent = (context) => {
-  const agent = useMemo(() => {
-    if (!context)
-      return null;
-    return staticAgentFromContext(context);
-  }, [context]);
-  return agent;
-};
-export {
-  staticAgentFromContext,
-  useStaticPageAgent
-};

package/dist/es/component/replay-scripts.js

@@ -1,361 +0,0 @@
-"use client";
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import Buffer2 from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer: Buffer2
-};
-import "./player.css";
-import { mousePointer } from "../utils";
-import { paramStr, typeStr } from "@midscene/web/ui-utils";
-import { treeToList } from "@midscene/shared/extractor";
-const stillDuration = 900;
-const actionSpinningPointerDuration = 300;
-const stillAfterInsightDuration = 300;
-const locateDuration = 800;
-const actionDuration = 1e3;
-const clearInsightDuration = 200;
-const cameraStateForRect = (rect, imageWidth, imageHeight) => {
-  const canvasRatio = imageWidth / imageHeight;
-  const rectRatio = rect.width / rect.height;
-  let rectWidthOnPage;
-  if (rectRatio >= canvasRatio) {
-    rectWidthOnPage = rect.width;
-  } else {
-    rectWidthOnPage = rect.height / imageHeight * imageWidth;
-  }
-  const cameraPaddingRatio = rectWidthOnPage > 400 ? 0.1 : rectWidthOnPage > 50 ? 0.2 : 0.3;
-  const cameraWidth = Math.min(
-    imageWidth,
-    rectWidthOnPage + imageWidth * cameraPaddingRatio * 2
-  );
-  const cameraHeight = cameraWidth * (imageHeight / imageWidth);
-  let left = Math.min(
-    rect.left - imageWidth * cameraPaddingRatio,
-    imageWidth - cameraWidth
-  );
-  left = Math.max(left, 0);
-  let top = Math.min(
-    rect.top - imageHeight * cameraPaddingRatio,
-    imageHeight - cameraHeight
-  );
-  top = Math.max(top, 0);
-  return {
-    left: Math.round(left),
-    top: Math.round(top),
-    width: Math.round(cameraWidth)
-  };
-};
-const mergeTwoCameraState = (cameraState1, cameraState2) => {
-  const newLeft = Math.min(cameraState1.left, cameraState2.left);
-  const newTop = Math.min(cameraState1.top, cameraState2.top);
-  const newRight = Math.max(
-    cameraState1.left + cameraState1.width,
-    cameraState2.left + cameraState2.width
-  );
-  const newWidth = newRight - newLeft;
-  return {
-    left: newLeft,
-    top: newTop,
-    width: newWidth
-  };
-};
-const allScriptsFromDump = (dump) => {
-  let width = void 0;
-  let height = void 0;
-  let sdkVersion = void 0;
-  let modelName = void 0;
-  let modelDescription = void 0;
-  dump.executions.forEach((execution) => {
-    if (execution.sdkVersion) {
-      sdkVersion = execution.sdkVersion;
-    }
-    if (execution.model_name) {
-      modelName = execution.model_name;
-    }
-    if (execution.model_description) {
-      modelDescription = execution.model_description;
-    }
-    execution.tasks.forEach((task) => {
-      var _a, _b;
-      const insightTask = task;
-      if ((_b = (_a = insightTask.pageContext) == null ? void 0 : _a.size) == null ? void 0 : _b.width) {
-        width = insightTask.pageContext.size.width;
-        height = insightTask.pageContext.size.height;
-      }
-    });
-  });
-  if (!width || !height) {
-    console.warn("width or height is missing in dump file");
-    return {
-      scripts: [],
-      sdkVersion,
-      modelName,
-      modelDescription
-    };
-  }
-  const allScripts = [];
-  dump.executions.forEach((execution) => {
-    const scripts = generateAnimationScripts(execution, -1, width, height);
-    if (scripts) {
-      allScripts.push(...scripts);
-    }
-  });
-  const allScriptsWithoutIntermediateDoneFrame = allScripts.filter(
-    (script, index) => {
-      if (index !== allScripts.length - 1 && script.title === "Done") {
-        return false;
-      }
-      return true;
-    }
-  );
-  return {
-    scripts: allScriptsWithoutIntermediateDoneFrame,
-    width,
-    height,
-    sdkVersion,
-    modelName,
-    modelDescription
-  };
-};
-const generateAnimationScripts = (execution, task, imageWidth, imageHeight) => {
-  if (!execution || !execution.tasks.length)
-    return null;
-  if (imageWidth === 0 || imageHeight === 0) {
-    return null;
-  }
-  let tasksIncluded = [];
-  if (task === -1) {
-    tasksIncluded = execution.tasks;
-  } else {
-    const startIndex = execution.tasks.findIndex((t) => t === task);
-    if (startIndex === -1) {
-      console.error("task not found, cannot generate animation scripts");
-      return null;
-    }
-    if (startIndex === execution.tasks.length - 1) {
-      return null;
-    }
-    for (let i = startIndex; i < execution.tasks.length; i++) {
-      if (i > startIndex && execution.tasks[i].type === "Planning") {
-        break;
-      }
-      tasksIncluded.push(execution.tasks[i]);
-    }
-  }
-  if (tasksIncluded.length === 0) {
-    return null;
-  }
-  const fullPageCameraState = cameraStateForRect(
-    {
-      left: 0,
-      top: 0,
-      width: imageWidth,
-      height: imageHeight
-    },
-    imageWidth,
-    imageHeight
-  );
-  const pointerScript = (img, title, subTitle) => {
-    return {
-      type: "pointer",
-      img,
-      duration: 0,
-      title,
-      subTitle
-    };
-  };
-  const scripts = [];
-  let insightCameraState = void 0;
-  let currentCameraState = fullPageCameraState;
-  let insightOnTop = false;
-  const taskCount = tasksIncluded.length;
-  let initSubTitle = "";
-  let errorStateFlag = false;
-  tasksIncluded.forEach((task2, index) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
-    if (errorStateFlag)
-      return;
-    if (index === 0) {
-      initSubTitle = paramStr(task2);
-    }
-    if (task2.type === "Planning") {
-      const planningTask = task2;
-      if (planningTask.recorder && planningTask.recorder.length > 0) {
-        scripts.push({
-          type: "img",
-          img: (_b = (_a = planningTask.recorder) == null ? void 0 : _a[0]) == null ? void 0 : _b.screenshot,
-          camera: index === 0 ? fullPageCameraState : void 0,
-          duration: stillDuration,
-          title: typeStr(task2),
-          subTitle: paramStr(task2)
-        });
-      }
-    } else if (task2.type === "Insight" && task2.subType === "Locate") {
-      const insightTask = task2;
-      const resultElement = (_c = insightTask.output) == null ? void 0 : _c.element;
-      const title = typeStr(task2);
-      const subTitle = paramStr(task2);
-      if (resultElement == null ? void 0 : resultElement.rect) {
-        insightCameraState = __spreadProps(__spreadValues({}, cameraStateForRect(resultElement.rect, imageWidth, imageHeight)), {
-          pointerLeft: resultElement.center[0],
-          pointerTop: resultElement.center[1]
-        });
-      }
-      const context = insightTask.pageContext;
-      if (context == null ? void 0 : context.screenshotBase64) {
-        const insightDump = (_d = insightTask.log) == null ? void 0 : _d.dump;
-        const insightContentLength = context.tree ? treeToList(context.tree).length : 0;
-        if (context.screenshotBase64) {
-          scripts.push({
-            type: "img",
-            img: context.screenshotBase64,
-            duration: stillAfterInsightDuration,
-            title,
-            subTitle
-          });
-        }
-        let cameraState = void 0;
-        if (currentCameraState === fullPageCameraState) {
-          cameraState = void 0;
-        } else if (!insightCameraState) {
-          cameraState = void 0;
-        } else {
-          cameraState = mergeTwoCameraState(
-            currentCameraState,
-            insightCameraState
-          );
-        }
-        scripts.push({
-          type: "insight",
-          img: context.screenshotBase64,
-          context,
-          camera: cameraState,
-          highlightElement: ((_e = insightTask.output) == null ? void 0 : _e.element) || void 0,
-          searchArea: (_f = insightDump == null ? void 0 : insightDump.taskInfo) == null ? void 0 : _f.searchArea,
-          duration: insightContentLength > 20 ? locateDuration : locateDuration * 0.5,
-          insightCameraDuration: locateDuration,
-          title,
-          subTitle
-        });
-        scripts.push({
-          type: "sleep",
-          duration: stillAfterInsightDuration,
-          title,
-          subTitle
-        });
-        insightOnTop = true;
-      }
-    } else if (task2.type === "Action" && task2.subType !== "FalsyConditionStatement") {
-      const title = typeStr(task2);
-      const subTitle = paramStr(task2);
-      scripts.push(pointerScript(mousePointer, title, subTitle));
-      currentCameraState = insightCameraState != null ? insightCameraState : fullPageCameraState;
-      scripts.push({
-        type: "img",
-        img: (_h = (_g = task2.recorder) == null ? void 0 : _g[0]) == null ? void 0 : _h.screenshot,
-        duration: actionDuration,
-        camera: task2.subType === "Sleep" ? fullPageCameraState : insightCameraState,
-        title,
-        subTitle
-      });
-      if (insightOnTop) {
-        scripts.push({
-          type: "clear-insight",
-          duration: clearInsightDuration,
-          title,
-          subTitle
-        });
-        insightOnTop = false;
-      }
-      const imgStillDuration = index < taskCount - 1 ? stillDuration : 0;
-      if ((_j = (_i = task2.recorder) == null ? void 0 : _i[1]) == null ? void 0 : _j.screenshot) {
-        scripts.push({
-          type: "spinning-pointer",
-          duration: actionSpinningPointerDuration,
-          title,
-          subTitle
-        });
-        scripts.push(pointerScript(mousePointer, title, subTitle));
-        scripts.push({
-          type: "img",
-          img: (_l = (_k = task2.recorder) == null ? void 0 : _k[1]) == null ? void 0 : _l.screenshot,
-          duration: imgStillDuration,
-          title,
-          subTitle
-        });
-      } else {
-        scripts.push({
-          type: "sleep",
-          duration: imgStillDuration,
-          title,
-          subTitle
-        });
-      }
-    } else {
-      const title = typeStr(task2);
-      const subTitle = paramStr(task2);
-      const screenshot = (_n = (_m = task2.recorder) == null ? void 0 : _m[task2.recorder.length - 1]) == null ? void 0 : _n.screenshot;
-      if (screenshot) {
-        scripts.push({
-          type: "img",
-          img: screenshot,
-          duration: stillDuration,
-          camera: fullPageCameraState,
-          title,
-          subTitle
-        });
-      }
-    }
-    if (task2.status !== "finished") {
-      errorStateFlag = true;
-      const errorTitle = typeStr(task2);
-      const errorMsg = task2.errorMessage || "unknown error";
-      const errorSubTitle = errorMsg.indexOf("NOT_IMPLEMENTED_AS_DESIGNED") > 0 ? "Further actions cannot be performed in the current environment" : errorMsg;
-      scripts.push({
-        type: "img",
-        img: task2.recorder && task2.recorder.length > 0 ? task2.recorder[task2.recorder.length - 1].screenshot : "",
-        camera: fullPageCameraState,
-        duration: stillDuration,
-        title: errorTitle,
-        subTitle: errorSubTitle
-      });
-      return;
-    }
-  });
-  if (!errorStateFlag) {
-    scripts.push({
-      title: "Done",
-      subTitle: initSubTitle,
-      type: "img",
-      duration: stillDuration,
-      camera: fullPageCameraState
-    });
-  }
-  return scripts;
-};
-export {
-  allScriptsFromDump,
-  cameraStateForRect,
-  generateAnimationScripts,
-  mergeTwoCameraState
-};

package/dist/es/component/shiny-text.js

@@ -1,30 +0,0 @@
-import Buffer from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer
-};
-import { jsx } from "react/jsx-runtime";
-import "./shiny-text.css";
-const ShinyText = ({
-  text,
-  disabled = false,
-  speed = 5,
-  className = ""
-}) => {
-  const style = {
-    "--animation-duration": `${speed}s`
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: `shiny-text ${disabled ? "disabled" : ""} ${className}`,
-      style,
-      children: text
-    }
-  );
-};
-var shiny_text_default = ShinyText;
-export {
-  shiny_text_default as default
-};

package/dist/es/component/store/history.js

@@ -1,34 +0,0 @@
-import Buffer from "buffer";
-import processBrowser from "process/browser";
-import console from "console-browserify";
-var buffer = {
-  Buffer
-};
-import * as Z from "zustand";
-const { create } = Z;
-const HISTORY_KEY = "midscene-prompt-history";
-const getHistoryFromLocalStorage = () => {
-  const historyString = localStorage.getItem(HISTORY_KEY);
-  return historyString ? JSON.parse(historyString) : [];
-};
-const useHistoryStore = create((set, get) => ({
-  history: getHistoryFromLocalStorage(),
-  clearHistory: () => {
-    set({ history: [] });
-    localStorage.removeItem(HISTORY_KEY);
-  },
-  addHistory: (historyItem) => {
-    const newHistory = [
-      historyItem,
-      ...get().history.filter((h) => h.prompt !== historyItem.prompt)
-    ];
-    while (newHistory.length > 10) {
-      newHistory.pop();
-    }
-    set({ history: newHistory });
-    localStorage.setItem(HISTORY_KEY, JSON.stringify(newHistory));
-  }
-}));
-export {
-  useHistoryStore
-};