@midscene/visualizer 0.26.2 → 0.26.3-beta-20250813021342.0

package/dist/lib/component/color.js

@@ -1,85 +1,75 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var color_exports = {};
-__export(color_exports, {
-  colorForName: () => colorForName,
-  globalThemeConfig: () => globalThemeConfig,
-  highlightColorForType: () => highlightColorForType
+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__, {
+    colorForName: ()=>colorForName,
+    globalThemeConfig: ()=>globalThemeConfig,
+    highlightColorForType: ()=>highlightColorForType
 });
-module.exports = __toCommonJS(color_exports);
-var import_buffer = __toESM(require("buffer"));
-var import_browser = __toESM(require("process/browser"));
-var import_console_browserify = __toESM(require("console-browserify"));
-var buffer = {
-  Buffer: import_buffer.default
-};
-const elementColor = ["#01204E"];
-const highlightColorForSearchArea = "#028391";
-const highlightColorForElement = "#fd5907";
+const elementColor = [
+    '#01204E'
+];
+const highlightColorForSearchArea = '#028391';
+const highlightColorForElement = '#fd5907';
 function djb2Hash(str) {
-  if (!str) {
-    str = "unnamed";
-  }
-  let hash = 5381;
-  for (let i = 0; i < str.length; i++) {
-    hash = (hash << 5) + hash + str.charCodeAt(i);
-  }
-  return hash >>> 0;
+    if (!str) str = 'unnamed';
+    let hash = 5381;
+    for(let i = 0; i < str.length; i++)hash = (hash << 5) + hash + str.charCodeAt(i);
+    return hash >>> 0;
 }
 function colorForName(name) {
-  const hashNumber = djb2Hash(name);
-  return elementColor[hashNumber % elementColor.length];
+    const hashNumber = djb2Hash(name);
+    return elementColor[hashNumber % elementColor.length];
 }
 function highlightColorForType(type) {
-  if (type === "searchArea") {
-    return highlightColorForSearchArea;
-  }
-  return highlightColorForElement;
+    if ('searchArea' === type) return highlightColorForSearchArea;
+    return highlightColorForElement;
 }
 function globalThemeConfig() {
-  return {
-    token: {
-      colorPrimary: "#2B83FF"
-    },
-    components: {
-      Layout: {
-        headerHeight: 60,
-        headerPadding: "0 30px",
-        headerBg: "#FFF",
-        bodyBg: "#FFF"
-      }
-    }
-  };
+    return {
+        token: {
+            colorPrimary: '#2B83FF'
+        },
+        components: {
+            Layout: {
+                headerHeight: 60,
+                headerPadding: '0 30px',
+                headerBg: '#FFF',
+                bodyBg: '#FFF'
+            }
+        }
+    };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  colorForName,
-  globalThemeConfig,
-  highlightColorForType
+exports.colorForName = __webpack_exports__.colorForName;
+exports.globalThemeConfig = __webpack_exports__.globalThemeConfig;
+exports.highlightColorForType = __webpack_exports__.highlightColorForType;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "colorForName",
+    "globalThemeConfig",
+    "highlightColorForType"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
 });

package/dist/lib/component/describer.css

@@ -1,21 +1,25 @@
 .image-describer {
   position: relative;
 }
+
 .image-describer .describe-text {
   box-sizing: border-box;
-  position: absolute;
+  color: #fff;
   background: #000;
   width: 100%;
   height: 30px;
-  left: 0;
-  bottom: 0;
-  color: #FFF;
-  font-size: 12px;
   padding: 10px;
+  font-size: 12px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
+
 .image-describer .describe-text.success {
   background: #047704;
 }
+
 .image-describer .describe-text.error {
   background: #870707;
 }
+

package/dist/lib/component/describer.js

@@ -1,205 +1,165 @@
+'use client';
 "use strict";
-"use client";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-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));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
+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]
+        });
     };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
+})();
+(()=>{
+    __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 step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-var describer_exports = {};
-__export(describer_exports, {
-  Describer: () => Describer,
-  default: () => describer_default
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    Describer: ()=>Describer,
+    default: ()=>describer
 });
-module.exports = __toCommonJS(describer_exports);
-var import_buffer = __toESM(require("buffer"));
-var import_browser = __toESM(require("process/browser"));
-var import_console_browserify = __toESM(require("console-browserify"));
-var buffer = {
-  Buffer: import_buffer.default
-};
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_useStaticPageAgent = require("./playground/useStaticPageAgent");
-var import_describer = require("./describer.css");
-var import_react_resizable_panels = require("react-resizable-panels");
-var import_blackboard = require("./blackboard");
-var import_PlaygroundResult = require("./playground/PlaygroundResult");
-const Describer = (props) => {
-  var _a;
-  const { uiContext } = props;
-  const image = uiContext.screenshotBase64;
-  const canvasRef = (0, import_react.useRef)(null);
-  const [highlightPoints, setHighlightPoints] = (0, import_react.useState)(
-    []
-  );
-  const [highlightRect, setHighlightRect] = (0, import_react.useState)();
-  const [error, setError] = (0, import_react.useState)();
-  const [loading, setLoading] = (0, import_react.useState)(false);
-  const [result, setResult] = (0, import_react.useState)();
-  const agent = (0, import_useStaticPageAgent.useStaticPageAgent)(uiContext);
-  (0, import_react.useEffect)(() => {
-    const canvas = canvasRef.current;
-    if (!canvas || !image)
-      return;
-    const ctx = canvas.getContext("2d");
-    if (!ctx)
-      return;
-    const img = new Image();
-    img.onload = () => {
-      canvas.width = img.width;
-      canvas.height = img.height;
-      ctx.drawImage(img, 0, 0);
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const useStaticPageAgent_js_namespaceObject = require("./playground/useStaticPageAgent.js");
+require("./describer.css");
+const external_react_resizable_panels_namespaceObject = require("react-resizable-panels");
+const external_blackboard_js_namespaceObject = require("./blackboard.js");
+const PlaygroundResult_js_namespaceObject = require("./playground/PlaygroundResult.js");
+const Describer = (props)=>{
+    var _result_verifyResult;
+    const { uiContext } = props;
+    const image = uiContext.screenshotBase64;
+    const canvasRef = (0, external_react_namespaceObject.useRef)(null);
+    const [highlightPoints, setHighlightPoints] = (0, external_react_namespaceObject.useState)([]);
+    const [highlightRect, setHighlightRect] = (0, external_react_namespaceObject.useState)();
+    const [error, setError] = (0, external_react_namespaceObject.useState)();
+    const [loading, setLoading] = (0, external_react_namespaceObject.useState)(false);
+    const [result, setResult] = (0, external_react_namespaceObject.useState)();
+    const agent = (0, useStaticPageAgent_js_namespaceObject.useStaticPageAgent)(uiContext);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const canvas = canvasRef.current;
+        if (!canvas || !image) return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+        const img = new Image();
+        img.onload = ()=>{
+            canvas.width = img.width;
+            canvas.height = img.height;
+            ctx.drawImage(img, 0, 0);
+        };
+        img.src = image;
+    }, [
+        image
+    ]);
+    const handleClick = async (position)=>{
+        if (!agent) return void console.error('agent is not initialized');
+        setLoading(true);
+        setError(void 0);
+        setResult(void 0);
+        setHighlightPoints([]);
+        setHighlightRect(void 0);
+        try {
+            var _result_verifyResult;
+            const userLocation = [
+                position[0],
+                position[1]
+            ];
+            setHighlightPoints([
+                userLocation
+            ]);
+            const result = await (null == agent ? void 0 : agent.describeElementAtPoint(userLocation));
+            console.log('describe result', result);
+            setResult(result);
+            if (null == (_result_verifyResult = result.verifyResult) ? void 0 : _result_verifyResult.rect) setHighlightRect(result.verifyResult.rect);
+        } catch (error) {
+            setError(error.message);
+        } finally{
+            setLoading(false);
+        }
     };
-    img.src = image;
-  }, [image]);
-  const handleClick = (position) => __async(void 0, null, function* () {
-    var _a2;
-    if (!agent) {
-      import_console_browserify.default.error("agent is not initialized");
-      return;
-    }
-    setLoading(true);
-    setError(void 0);
-    setResult(void 0);
-    setHighlightPoints([]);
-    setHighlightRect(void 0);
-    try {
-      const userLocation = [position[0], position[1]];
-      setHighlightPoints([userLocation]);
-      const result2 = yield agent == null ? void 0 : agent.describeElementAtPoint(userLocation);
-      import_console_browserify.default.log("describe result", result2);
-      setResult(result2);
-      if ((_a2 = result2.verifyResult) == null ? void 0 : _a2.rect) {
-        setHighlightRect(result2.verifyResult.rect);
-      }
-    } catch (error2) {
-      setError(error2.message);
-    } finally {
-      setLoading(false);
-    }
-  });
-  let resultText = "";
-  if (error) {
-    resultText = error;
-  } else if (result && !((_a = result.verifyResult) == null ? void 0 : _a.pass)) {
-    resultText = `Locate failed with prompt: ${result.prompt}`;
-  } else if (result) {
-    if (result.deepThink) {
-      resultText = `Deep think: ${result.prompt}`;
-    } else {
-      resultText = result.prompt;
-    }
-  } else if (loading) {
-    resultText = "Loading...";
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "image-describer", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_resizable_panels.PanelGroup, { autoSaveId: "describer-layout", direction: "horizontal", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_resizable_panels.Panel,
-      {
-        defaultSize: 32,
-        maxSize: 60,
-        minSize: 20,
-        style: { paddingRight: "24px" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "form-part context-panel", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { children: "Screenshot" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-sub-title", children: "Click on the screenshot, Midscene will help you describe the element at the clicked point." }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_blackboard.Blackboard,
-            {
-              uiContext: __spreadProps(__spreadValues({}, uiContext), {
-                tree: {
-                  node: null,
-                  children: []
-                }
-              }),
-              highlightPoints,
-              highlightRect,
-              onCanvasClick: handleClick,
-              hideController: true
-            }
-          )
-        ] })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.PanelResizeHandle, { className: "panel-resize-handle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_resizable_panels.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_PlaygroundResult.PlaygroundResultView,
-      {
-        result: {
-          result: resultText,
-          error: error || null
-        },
-        loading,
-        serverValid: true,
-        serviceMode: "In-Browser",
-        replayScriptsInfo: null,
-        replayCounter: 0,
-        loadingProgressText: ""
-      }
-    ) })
-  ] }) });
+    let resultText = '';
+    if (error) resultText = error;
+    else if (!result || (null == (_result_verifyResult = result.verifyResult) ? void 0 : _result_verifyResult.pass)) {
+        if (result) resultText = result.deepThink ? `Deep think: ${result.prompt}` : result.prompt;
+        else if (loading) resultText = 'Loading...';
+    } else resultText = `Locate failed with prompt: ${result.prompt}`;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "image-describer",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_react_resizable_panels_namespaceObject.PanelGroup, {
+            autoSaveId: "describer-layout",
+            direction: "horizontal",
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Panel, {
+                    defaultSize: 32,
+                    maxSize: 60,
+                    minSize: 20,
+                    style: {
+                        paddingRight: '24px'
+                    },
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                        className: "form-part context-panel",
+                        children: [
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h3", {
+                                children: "Screenshot"
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                className: "form-sub-title",
+                                children: "Click on the screenshot, Midscene will help you describe the element at the clicked point."
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_blackboard_js_namespaceObject.Blackboard, {
+                                uiContext: {
+                                    ...uiContext,
+                                    tree: {
+                                        node: null,
+                                        children: []
+                                    }
+                                },
+                                highlightPoints: highlightPoints,
+                                highlightRect: highlightRect,
+                                onCanvasClick: handleClick,
+                                hideController: true
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.PanelResizeHandle, {
+                    className: "panel-resize-handle"
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_resizable_panels_namespaceObject.Panel, {
+                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(PlaygroundResult_js_namespaceObject.PlaygroundResultView, {
+                        result: {
+                            result: resultText,
+                            error: error || null
+                        },
+                        loading: loading,
+                        serverValid: true,
+                        serviceMode: 'In-Browser',
+                        replayScriptsInfo: null,
+                        replayCounter: 0,
+                        loadingProgressText: ''
+                    })
+                })
+            ]
+        })
+    });
 };
-var describer_default = Describer;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Describer
+const describer = Describer;
+exports.Describer = __webpack_exports__.Describer;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "Describer",
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
 });