@midscene/core 0.25.4-beta-20250808064529.0 → 0.25.4-beta-20250811113343.0

package/dist/es/{chunk-I5LBWOQA.js → chunk-5IZMFZPA.js}

@@ -30,7 +30,7 @@ import {
   getAIConfigInBoolean,
   getAIConfigInJson,
   uiTarsModelVersion,
-  vlLocateMode as vlLocateMode3
+  vlLocateMode as vlLocateMode2
 } from "@midscene/shared/env";
 import { enableDebug, getDebug as getDebug2 } from "@midscene/shared/logger";
 import { assert as assert3 } from "@midscene/shared/utils";
@@ -633,179 +633,80 @@ Here is the item user want to find:
 });
 
 // src/ai-model/prompt/llm-planning.ts
+import assert2 from "assert";
 import { PromptTemplate as PromptTemplate2 } from "@langchain/core/prompts";
-
-// src/image/index.ts
-import {
-  imageInfo,
-  imageInfoOfBase64,
-  localImg2Base64,
-  httpImg2Base64,
-  resizeImg,
-  saveBase64Image,
-  zoomForGPT4o
-} from "@midscene/shared/img";
-
-// src/ai-model/prompt/util.ts
-import { NodeType as NodeType2 } from "@midscene/shared/constants";
-import { vlLocateMode as vlLocateMode2 } from "@midscene/shared/env";
-import {
-  descriptionOfTree,
-  generateElementByPosition,
-  treeToList as treeToList2
-} from "@midscene/shared/extractor";
-import { assert as assert2 } from "@midscene/shared/utils";
-function describeSize(size) {
-  return `${size.width} x ${size.height}`;
-}
-var distanceThreshold = 16;
-function elementByPositionWithElementInfo(treeRoot, position, options) {
-  const requireStrictDistance = options?.requireStrictDistance ?? true;
-  const filterPositionElements = options?.filterPositionElements ?? false;
-  assert2(typeof position !== "undefined", "position is required for query");
-  const matchingElements = [];
-  function dfs(node) {
-    if (node?.node) {
-      const item = node.node;
-      if (item.rect.left <= position.x && position.x <= item.rect.left + item.rect.width && item.rect.top <= position.y && position.y <= item.rect.top + item.rect.height) {
-        if (!(filterPositionElements && item.attributes?.nodeType === NodeType2.POSITION) && item.isVisible) {
-          matchingElements.push(item);
-        }
-      }
-    }
-    for (const child of node.children) {
-      dfs(child);
-    }
-  }
-  dfs(treeRoot);
-  if (matchingElements.length === 0) {
-    return void 0;
-  }
-  const element = matchingElements.reduce((smallest, current) => {
-    const smallestArea = smallest.rect.width * smallest.rect.height;
-    const currentArea = current.rect.width * current.rect.height;
-    return currentArea < smallestArea ? current : smallest;
-  });
-  const distanceToCenter = distance(
-    { x: element.center[0], y: element.center[1] },
-    position
-  );
-  if (requireStrictDistance) {
-    return distanceToCenter <= distanceThreshold ? element : void 0;
-  }
-  return element;
-}
-function distance(point1, point2) {
-  return Math.sqrt((point1.x - point2.x) ** 2 + (point1.y - point2.y) ** 2);
-}
-var samplePageDescription = `
-And the page is described as follows:
-====================
-The size of the page: 1280 x 720
-Some of the elements are marked with a rectangle in the screenshot corresponding to the markerId, some are not.
-
-Description of all the elements in screenshot:
-<div id="969f1637" markerId="1" left="100" top="100" width="100" height="100"> // The markerId indicated by the rectangle label in the screenshot
-  <h4 id="b211ecb2" markerId="5" left="150" top="150" width="90" height="60">
-    The username is accepted
-  </h4>
-  ...many more
-</div>
-====================
-`;
-async function describeUserPage(context, opt) {
-  const { screenshotBase64 } = context;
-  let width;
-  let height;
-  if (context.size) {
-    ({ width, height } = context.size);
-  } else {
-    const imgSize = await imageInfoOfBase64(screenshotBase64);
-    ({ width, height } = imgSize);
-  }
-  const treeRoot = context.tree;
-  const idElementMap = {};
-  const flatElements = treeToList2(treeRoot);
-  if (opt?.domIncluded === true && flatElements.length >= 5e3) {
-    console.warn(
-      'The number of elements is too large, it may cause the prompt to be too long, please use domIncluded: "visible-only" to reduce the number of elements'
-    );
-  }
-  flatElements.forEach((element) => {
-    idElementMap[element.id] = element;
-    if (typeof element.indexId !== "undefined") {
-      idElementMap[`${element.indexId}`] = element;
-    }
-  });
-  let pageDescription = "";
-  const visibleOnly = opt?.visibleOnly ?? opt?.domIncluded === "visible-only";
-  if (opt?.domIncluded || !vlLocateMode2()) {
-    const contentTree = await descriptionOfTree(
-      treeRoot,
-      opt?.truncateTextLength,
-      opt?.filterNonTextContent,
-      visibleOnly
-    );
-    const sizeDescription = describeSize({ width, height });
-    pageDescription = `The size of the page: ${sizeDescription} 
- The page elements tree:
-${contentTree}`;
-  }
-  return {
-    description: pageDescription,
-    elementById(idOrIndexId) {
-      assert2(typeof idOrIndexId !== "undefined", "id is required for query");
-      const item = idElementMap[`${idOrIndexId}`];
-      return item;
-    },
-    elementByPosition(position, size) {
-      return elementByPositionWithElementInfo(treeRoot, position);
-    },
-    insertElementByPosition(position) {
-      const element = generateElementByPosition(position);
-      treeRoot.children.push({
-        node: element,
-        children: []
-      });
-      flatElements.push(element);
-      idElementMap[element.id] = element;
-      return element;
-    },
-    size: { width, height }
-  };
-}
-
-// src/ai-model/prompt/llm-planning.ts
 var vlCoTLog = `"what_the_user_wants_to_do_next_by_instruction": string, // What the user wants to do according to the instruction and previous logs. `;
-var vlCurrentLog = `"log": string, // Log what the next one action (ONLY ONE!) you can do according to the screenshot and the instruction. The typical log looks like "Now i want to use action '{{ action-type }}' to do .. first". If no action should be done, log the reason. ". Use the same language as the user's instruction.`;
-var llmCurrentLog = `"log": string, // Log what the next actions you can do according to the screenshot and the instruction. The typical log looks like "Now i want to use action '{{ action-type }}' to do ..". If no action should be done, log the reason. ". Use the same language as the user's instruction.`;
+var vlCurrentLog = `"log": string, // Log what the next one action (ONLY ONE!) you can do according to the screenshot and the instruction. The typical log looks like "Now i want to use action '{ action-type }' to do .. first". If no action should be done, log the reason. ". Use the same language as the user's instruction.`;
+var llmCurrentLog = `"log": string, // Log what the next actions you can do according to the screenshot and the instruction. The typical log looks like "Now i want to use action '{ action-type }' to do ..". If no action should be done, log the reason. ". Use the same language as the user's instruction.`;
 var commonOutputFields = `"error"?: string, // Error messages about unexpected situations, if any. Only think it is an error when the situation is not expected according to the instruction. Use the same language as the user's instruction.
   "more_actions_needed_by_instruction": boolean, // Consider if there is still more action(s) to do after the action in "Log" is done, according to the instruction. If so, set this field to true. Otherwise, set it to false.`;
 var vlLocateParam = "locate: {bbox: [number, number, number, number], prompt: string }";
+var llmLocateParam = `locate: {"id": string, "prompt": string}`;
+var descriptionForAction = (action, locatorScheme) => {
+  const tab = "  ";
+  let locateParam = "";
+  if (action.location === "required") {
+    locateParam = locatorScheme;
+  } else if (action.location === "optional") {
+    locateParam = `${locatorScheme} | null`;
+  } else if (action.location === false) {
+    locateParam = "";
+  }
+  const locatorParam = locateParam ? `${tab}- ${locateParam}` : "";
+  let whatToLocate = "";
+  if (action.whatToLocate) {
+    if (!locateParam) {
+      console.warn(
+        `whatToLocate is provided for action ${action.name}, but location is not required or optional. The whatToLocate will be ignored.`
+      );
+    } else {
+      whatToLocate = `${tab}- whatToLocate: ${action.whatToLocate}`;
+    }
+  }
+  let paramSchema = "";
+  if (action.paramSchema) {
+    paramSchema = `${tab}- paramSchema: ${action.paramSchema}`;
+  }
+  let paramDescription = "";
+  if (action.paramDescription) {
+    assert2(
+      paramSchema,
+      `paramSchema is required when paramDescription is provided for action ${action.name}, but got ${action.paramSchema}`
+    );
+    paramDescription = `${tab}- paramDescription: ${action.paramDescription}`;
+  }
+  const fields = [
+    paramSchema,
+    paramDescription,
+    locatorParam,
+    whatToLocate
+  ].filter(Boolean);
+  return `- ${action.name}
+  - type: "${action.name}"
+  - description: ${action.description}
+${fields.join("\n")}
+`.trim();
+};
 var systemTemplateOfVLPlanning = ({
-  pageType,
+  actionSpace,
   vlMode
-}) => `
+}) => {
+  const actionNameList = actionSpace.map((action) => action.name).join(", ");
+  const actionDescriptionList = actionSpace.map(
+    (action) => descriptionForAction(action, vlLocateParam)
+  );
+  const actionList = actionDescriptionList.join("\n");
+  return `
 Target: User will give you a screenshot, an instruction and some previous logs indicating what have been done. Please tell what the next one action is (or null if no action should be done) to do the tasks the instruction requires. 
 
 Restriction:
 - Don't give extra actions or plans beyond the instruction. ONLY plan for what the instruction requires. For example, don't try to submit the form if the instruction is only to fill something.
-- Always give ONLY ONE action in \`log\` field (or null if no action should be done), instead of multiple actions. Supported actions are Tap, Hover, Input, KeyboardPress, Scroll${pageType === "android" ? ", AndroidBackButton, AndroidHomeButton, AndroidRecentAppsButton, AndroidLongPress, AndroidPull." : "."}
+- Always give ONLY ONE action in \`log\` field (or null if no action should be done), instead of multiple actions. Supported actions are ${actionNameList}.
 - Don't repeat actions in the previous logs.
 - Bbox is the bounding box of the element to be located. It's an array of 4 numbers, representing ${bboxDescription(vlMode)}.
 
 Supporting actions:
-- Tap: { type: "Tap", ${vlLocateParam} }
-- RightClick: { type: "RightClick", ${vlLocateParam} }
-- Hover: { type: "Hover", ${vlLocateParam} }
-- Input: { type: "Input", ${vlLocateParam}, param: { value: string } } // Replace the input field with a new value. \`value\` is the final that should be filled in the input box. No matter what modifications are required, just provide the final value to replace the existing input value. Giving a blank string means clear the input field.
-- KeyboardPress: { type: "KeyboardPress", param: { value: string } }
-- Scroll: { type: "Scroll", ${vlLocateParam} | null, param: { direction: 'down'(default) | 'up' | 'right' | 'left', scrollType: 'once' (default) | 'untilBottom' | 'untilTop' | 'untilRight' | 'untilLeft', distance: null | number }} // locate is the element to scroll. If it's a page scroll, put \`null\` in the \`locate\` field.
-${pageType === "android" ? `- AndroidBackButton: { type: "AndroidBackButton", param: {} }
-- AndroidHomeButton: { type: "AndroidHomeButton", param: {} }
-- AndroidRecentAppsButton: { type: "AndroidRecentAppsButton", param: {} }
-- AndroidLongPress: { type: "AndroidLongPress", param: { x: number, y: number, duration?: number } }
-- AndroidPull: { type: "AndroidPull", param: { direction: 'up' | 'down', startPoint?: { x: number, y: number }, distance?: number, duration?: number } } // Pull down to refresh (direction: 'down') or pull up to load more (direction: 'up')` : ""}
+${actionList}
 
 Field description:
 * The \`prompt\` field inside the \`locate\` field is a short description that could be used to locate the element.
@@ -840,8 +741,16 @@ this and output the JSON:
   }
 }
 `;
-var llmLocateParam = `locate: {{"id": string, "prompt": string}} | null`;
-var systemTemplateOfLLM = ({ pageType }) => `
+};
+var systemTemplateOfLLM = ({
+  actionSpace
+}) => {
+  const actionNameList = actionSpace.map((action) => action.name).join(" / ");
+  const actionDescriptionList = actionSpace.map(
+    (action) => descriptionForAction(action, llmLocateParam)
+  );
+  const actionList = actionDescriptionList.join("\n");
+  return `
 ## Role
 
 You are a versatile professional in software UI automation. Your outstanding contributions will impact the user experience of billions of users.
@@ -855,7 +764,7 @@ You are a versatile professional in software UI automation. Your outstanding con
 ## Workflow
 
 1. Receive the screenshot, element description of screenshot(if any), user's instruction and previous logs.
-2. Decompose the user's task into a sequence of actions, and place it in the \`actions\` field. There are different types of actions (Tap / Hover / Input / KeyboardPress / Scroll / FalsyConditionStatement / Sleep ${pageType === "android" ? "/ AndroidBackButton / AndroidHomeButton / AndroidRecentAppsButton / AndroidLongPress / AndroidPull" : ""}). The "About the action" section below will give you more details.
+2. Decompose the user's task into a sequence of actions, and place it in the \`actions\` field. There are different types of actions (${actionNameList}). The "About the action" section below will give you more details.
 3. Precisely locate the target element if it's already shown in the screenshot, put the location info in the \`locate\` field of the action.
 4. If some target elements is not shown in the screenshot, consider the user's instruction is not feasible on this page. Follow the next steps.
 5. Consider whether the user's instruction will be accomplished after all the actions
@@ -873,65 +782,30 @@ You are a versatile professional in software UI automation. Your outstanding con
 
 The \`locate\` param is commonly used in the \`param\` field of the action, means to locate the target element to perform the action, it conforms to the following scheme:
 
-type LocateParam = {{
+type LocateParam = {
   "id": string, // the id of the element found. It should either be the id marked with a rectangle in the screenshot or the id described in the description.
   "prompt"?: string // the description of the element to find. It can only be omitted when locate is null.
-}} | null // If it's not on the page, the LocateParam should be null
+} | null // If it's not on the page, the LocateParam should be null
 
 ## Supported actions
 
 Each action has a \`type\` and corresponding \`param\`. To be detailed:
-- type: 'Tap'
-  * {{ ${llmLocateParam} }}
-- type: 'RightClick'
-  * {{ ${llmLocateParam} }}
-- type: 'Hover'
-  * {{ ${llmLocateParam} }}
-- type: 'Input', replace the value in the input field
-  * {{ ${llmLocateParam}, param: {{ value: string }} }}
-  * \`value\` is the final value that should be filled in the input field. No matter what modifications are required, just provide the final value user should see after the action is done. 
-- type: 'KeyboardPress', press a key
-  * {{ param: {{ value: string }} }}
-- type: 'Scroll', scroll up or down.
-  * {{ 
-      ${llmLocateParam}, 
-      param: {{ 
-        direction: 'down'(default) | 'up' | 'right' | 'left', 
-        scrollType: 'once' (default) | 'untilBottom' | 'untilTop' | 'untilRight' | 'untilLeft', 
-        distance: null | number 
-      }} 
-    }}
-    * To scroll some specific element, put the element at the center of the region in the \`locate\` field. If it's a page scroll, put \`null\` in the \`locate\` field. 
-    * \`param\` is required in this action. If some fields are not specified, use direction \`down\`, \`once\` scroll type, and \`null\` distance.
-  * {{ param: {{ button: 'Back' | 'Home' | 'RecentApp' }} }}
-- type: 'ExpectedFalsyCondition'
-  * {{ param: {{ reason: string }} }}
-  * use this action when the conditional statement talked about in the instruction is falsy.
-- type: 'Sleep'
-  * {{ param: {{ timeMs: number }} }}
-${pageType === "android" ? `- type: 'AndroidBackButton', trigger the system "back" operation on Android devices
-  * {{ param: {{}} }}
-- type: 'AndroidHomeButton', trigger the system "home" operation on Android devices
-  * {{ param: {{}} }}
-- type: 'AndroidRecentAppsButton', trigger the system "recent apps" operation on Android devices
-  * {{ param: {{}} }}
-- type: 'AndroidLongPress', trigger a long press on the screen at specified coordinates on Android devices
-  * {{ param: {{ x: number, y: number, duration?: number }} }}
-- type: 'AndroidPull', trigger pull down to refresh or pull up actions on Android devices
-  * {{ param: {{ direction: 'up' | 'down', startPoint?: {{ x: number, y: number }}, distance?: number, duration?: number }} }}` : ""}
-`;
+${actionList}
+
+`.trim();
+};
 var outputTemplate = `
 ## Output JSON Format:
 
 The JSON format is as follows:
 
-{{
+{
   "actions": [
     // ... some actions
   ],
   ${llmCurrentLog}
   ${commonOutputFields}
-}}
+}
 
 ## Examples
 
@@ -947,68 +821,62 @@ By viewing the page screenshot and description, you should consider this and out
 * Log what these action do: Click the language switch button to open the language options. Wait for 1 second.
 * The task cannot be accomplished (because we cannot see the "English" option now), so the \`more_actions_needed_by_instruction\` field is true.
 
-{{
+{
   "actions":[
-    {{
+    {
       "type": "Tap", 
       "thought": "Click the language switch button to open the language options.",
       "param": null,
-      "locate": {{ id: "c81c4e9a33", prompt: "The language switch button" }},
-    }},
-    {{
+      "locate": { id: "c81c4e9a33", prompt: "The language switch button" }},
+    },
+    {
       "type": "Sleep",
       "thought": "Wait for 1 second to ensure the language options are displayed.",
-      "param": {{ "timeMs": 1000 }},
-    }}
+      "param": { "timeMs": 1000 },
+    }
   ],
   "error": null,
   "more_actions_needed_by_instruction": true,
   "log": "Click the language switch button to open the language options. Wait for 1 second",
-}}
+}
 
 ### Example: What NOT to do
 Wrong output:
-{{
+{
   "actions":[
-    {{
+    {
       "type": "Tap",
       "thought": "Click the language switch button to open the language options.",
       "param": null,
-      "locate": {{
-        {{ "id": "c81c4e9a33" }}, // WRONG: prompt is missing
-      }}
-    }},
-    {{
+      "locate": {
+        { "id": "c81c4e9a33" }, // WRONG: prompt is missing
+      }
+    },
+    {
       "type": "Tap", 
       "thought": "Click the English option",
       "param": null,
       "locate": null, // This means the 'English' option is not shown in the screenshot, the task cannot be accomplished
-    }}
+    }
   ],
   "more_actions_needed_by_instruction": false, // WRONG: should be true
   "log": "Click the language switch button to open the language options",
-}}
+}
 
 Reason:
 * The \`prompt\` is missing in the first 'Locate' action
 * Since the option button is not shown in the screenshot, there are still more actions to be done, so the \`more_actions_needed_by_instruction\` field should be true
 `;
 async function systemPromptToTaskPlanning({
-  pageType,
+  actionSpace,
   vlMode
 }) {
   if (vlMode) {
-    return systemTemplateOfVLPlanning({ pageType, vlMode });
+    return systemTemplateOfVLPlanning({ actionSpace, vlMode });
   }
-  const promptTemplate = new PromptTemplate2({
-    template: `${systemTemplateOfLLM({ pageType })}
+  return `${systemTemplateOfLLM({ actionSpace })}
 
-${outputTemplate}`,
-    inputVariables: ["pageDescription"]
-  });
-  return await promptTemplate.format({
-    pageDescription: samplePageDescription
-  });
+${outputTemplate}`;
 }
 var planSchema = {
   type: "json_schema",
@@ -1347,10 +1215,10 @@ async function call2(messages, AIActionTypeValue, responseFormat, options) {
   let usage;
   let timeCost;
   const commonConfig = {
-    temperature: vlLocateMode3() === "vlm-ui-tars" ? 0 : 0.1,
+    temperature: vlLocateMode2() === "vlm-ui-tars" ? 0 : 0.1,
     stream: !!isStreaming,
     max_tokens: typeof maxTokens === "number" ? maxTokens : Number.parseInt(maxTokens || "2048", 10),
-    ...vlLocateMode3() === "qwen-vl" ? {
+    ...vlLocateMode2() === "qwen-vl" ? {
       vl_high_resolution_images: true
     } : {}
   };
@@ -1419,7 +1287,7 @@ async function call2(messages, AIActionTypeValue, responseFormat, options) {
         }
         content = accumulated;
         debugProfileStats(
-          `streaming model, ${model}, mode, ${vlLocateMode3() || "default"}, cost-ms, ${timeCost}`
+          `streaming model, ${model}, mode, ${vlLocateMode2() || "default"}, cost-ms, ${timeCost}`
         );
       } else {
         const result = await completion.create({
@@ -1430,7 +1298,7 @@ async function call2(messages, AIActionTypeValue, responseFormat, options) {
         });
         timeCost = Date.now() - startTime;
         debugProfileStats(
-          `model, ${model}, mode, ${vlLocateMode3() || "default"}, ui-tars-version, ${uiTarsModelVersion()}, prompt-tokens, ${result.usage?.prompt_tokens || ""}, completion-tokens, ${result.usage?.completion_tokens || ""}, total-tokens, ${result.usage?.total_tokens || ""}, cost-ms, ${timeCost}, requestId, ${result._request_id || ""}`
+          `model, ${model}, mode, ${vlLocateMode2() || "default"}, ui-tars-version, ${uiTarsModelVersion()}, prompt-tokens, ${result.usage?.prompt_tokens || ""}, completion-tokens, ${result.usage?.completion_tokens || ""}, total-tokens, ${result.usage?.total_tokens || ""}, cost-ms, ${timeCost}, requestId, ${result._request_id || ""}`
         );
         debugProfileDetail(
           `model usage detail: ${JSON.stringify(result.usage)}`
@@ -1626,13 +1494,138 @@ function safeParseJson(input) {
     return JSON.parse(jsonrepair(cleanJsonString));
   } catch (e) {
   }
-  if (vlLocateMode3() === "doubao-vision" || vlLocateMode3() === "vlm-ui-tars") {
+  if (vlLocateMode2() === "doubao-vision" || vlLocateMode2() === "vlm-ui-tars") {
     const jsonString = preprocessDoubaoBboxJson(cleanJsonString);
     return JSON.parse(jsonrepair(jsonString));
   }
   throw Error(`failed to parse json response: ${input}`);
 }
 
+// src/image/index.ts
+import {
+  imageInfo,
+  imageInfoOfBase64,
+  localImg2Base64,
+  httpImg2Base64,
+  resizeImg,
+  saveBase64Image,
+  zoomForGPT4o
+} from "@midscene/shared/img";
+
+// src/ai-model/prompt/util.ts
+import { NodeType as NodeType2 } from "@midscene/shared/constants";
+import { vlLocateMode as vlLocateMode3 } from "@midscene/shared/env";
+import {
+  descriptionOfTree,
+  generateElementByPosition,
+  treeToList as treeToList2
+} from "@midscene/shared/extractor";
+import { assert as assert4 } from "@midscene/shared/utils";
+function describeSize(size) {
+  return `${size.width} x ${size.height}`;
+}
+var distanceThreshold = 16;
+function elementByPositionWithElementInfo(treeRoot, position, options) {
+  const requireStrictDistance = options?.requireStrictDistance ?? true;
+  const filterPositionElements = options?.filterPositionElements ?? false;
+  assert4(typeof position !== "undefined", "position is required for query");
+  const matchingElements = [];
+  function dfs(node) {
+    if (node?.node) {
+      const item = node.node;
+      if (item.rect.left <= position.x && position.x <= item.rect.left + item.rect.width && item.rect.top <= position.y && position.y <= item.rect.top + item.rect.height) {
+        if (!(filterPositionElements && item.attributes?.nodeType === NodeType2.POSITION) && item.isVisible) {
+          matchingElements.push(item);
+        }
+      }
+    }
+    for (const child of node.children) {
+      dfs(child);
+    }
+  }
+  dfs(treeRoot);
+  if (matchingElements.length === 0) {
+    return void 0;
+  }
+  const element = matchingElements.reduce((smallest, current) => {
+    const smallestArea = smallest.rect.width * smallest.rect.height;
+    const currentArea = current.rect.width * current.rect.height;
+    return currentArea < smallestArea ? current : smallest;
+  });
+  const distanceToCenter = distance(
+    { x: element.center[0], y: element.center[1] },
+    position
+  );
+  if (requireStrictDistance) {
+    return distanceToCenter <= distanceThreshold ? element : void 0;
+  }
+  return element;
+}
+function distance(point1, point2) {
+  return Math.sqrt((point1.x - point2.x) ** 2 + (point1.y - point2.y) ** 2);
+}
+async function describeUserPage(context, opt) {
+  const { screenshotBase64 } = context;
+  let width;
+  let height;
+  if (context.size) {
+    ({ width, height } = context.size);
+  } else {
+    const imgSize = await imageInfoOfBase64(screenshotBase64);
+    ({ width, height } = imgSize);
+  }
+  const treeRoot = context.tree;
+  const idElementMap = {};
+  const flatElements = treeToList2(treeRoot);
+  if (opt?.domIncluded === true && flatElements.length >= 5e3) {
+    console.warn(
+      'The number of elements is too large, it may cause the prompt to be too long, please use domIncluded: "visible-only" to reduce the number of elements'
+    );
+  }
+  flatElements.forEach((element) => {
+    idElementMap[element.id] = element;
+    if (typeof element.indexId !== "undefined") {
+      idElementMap[`${element.indexId}`] = element;
+    }
+  });
+  let pageDescription = "";
+  const visibleOnly = opt?.visibleOnly ?? opt?.domIncluded === "visible-only";
+  if (opt?.domIncluded || !vlLocateMode3()) {
+    const contentTree = await descriptionOfTree(
+      treeRoot,
+      opt?.truncateTextLength,
+      opt?.filterNonTextContent,
+      visibleOnly
+    );
+    const sizeDescription = describeSize({ width, height });
+    pageDescription = `The size of the page: ${sizeDescription} 
+ The page elements tree:
+${contentTree}`;
+  }
+  return {
+    description: pageDescription,
+    elementById(idOrIndexId) {
+      assert4(typeof idOrIndexId !== "undefined", "id is required for query");
+      const item = idElementMap[`${idOrIndexId}`];
+      return item;
+    },
+    elementByPosition(position, size) {
+      return elementByPositionWithElementInfo(treeRoot, position);
+    },
+    insertElementByPosition(position) {
+      const element = generateElementByPosition(position);
+      treeRoot.children.push({
+        node: element,
+        children: []
+      });
+      flatElements.push(element);
+      idElementMap[element.id] = element;
+      return element;
+    },
+    size: { width, height }
+  };
+}
+
 // src/ai-model/prompt/playwright-generator.ts
 import { PLAYWRIGHT_EXAMPLE_CODE } from "@midscene/shared/constants";
 
@@ -2014,7 +2007,7 @@ import {
   preProcessImageUrl
 } from "@midscene/shared/img";
 import { getDebug as getDebug3 } from "@midscene/shared/logger";
-import { assert as assert4 } from "@midscene/shared/utils";
+import { assert as assert5 } from "@midscene/shared/utils";
 
 // src/ai-model/prompt/extraction.ts
 import { PromptTemplate as PromptTemplate3 } from "@langchain/core/prompts";
@@ -2224,7 +2217,7 @@ async function AiLocateElement(options) {
   const { context, targetElementDescription, callAI } = options;
   const { screenshotBase64 } = context;
   const { description, elementById, insertElementByPosition } = await describeUserPage(context);
-  assert4(
+  assert5(
     targetElementDescription,
     "cannot find the target element description"
   );
@@ -2235,11 +2228,11 @@ async function AiLocateElement(options) {
   const systemPrompt = systemPromptToLocateElement(vlLocateMode4());
   let imagePayload = screenshotBase64;
   if (options.searchConfig) {
-    assert4(
+    assert5(
       options.searchConfig.rect,
       "searchArea is provided but its rect cannot be found. Failed to locate element"
     );
-    assert4(
+    assert5(
       options.searchConfig.imageBase64,
       "searchArea is provided but its imageBase64 cannot be found. Failed to locate element"
     );
@@ -2462,7 +2455,7 @@ async function AiExtractElementInfo(options) {
 }
 async function AiAssert(options) {
   const { assertion, context } = options;
-  assert4(assertion, "assertion should not be empty");
+  assert5(assertion, "assertion should not be empty");
   const { screenshotBase64 } = context;
   const systemPrompt = systemPromptToAssert({
     isUITars: getAIConfigInBoolean2(MIDSCENE_USE_VLM_UI_TARS)
@@ -2512,13 +2505,13 @@ ${assertionText}
 // src/ai-model/llm-planning.ts
 import { vlLocateMode as vlLocateMode5 } from "@midscene/shared/env";
 import { paddingToMatchBlockByBase64 as paddingToMatchBlockByBase642 } from "@midscene/shared/img";
-import { assert as assert5 } from "@midscene/shared/utils";
+import { assert as assert6 } from "@midscene/shared/utils";
 async function plan(userInstruction, opts) {
   const { callAI, context } = opts || {};
   const { screenshotBase64, size } = context;
   const { description: pageDescription, elementById } = await describeUserPage(context);
   const systemPrompt = await systemPromptToTaskPlanning({
-    pageType: opts.pageType,
+    actionSpace: opts.actionSpace,
     vlMode: vlLocateMode5()
   });
   const taskBackgroundContextText = generateTaskBackgroundContext(
@@ -2574,7 +2567,7 @@ async function plan(userInstruction, opts) {
     usage,
     yamlFlow: buildYamlFlowFromPlans(actions, planFromAI.sleep)
   };
-  assert5(planFromAI, "can't get plans from AI");
+  assert6(planFromAI, "can't get plans from AI");
   if (vlLocateMode5()) {
     actions.forEach((action) => {
       if (action.locate) {
@@ -2590,7 +2583,7 @@ async function plan(userInstruction, opts) {
         }
       }
     });
-    assert5(!planFromAI.error, `Failed to plan actions: ${planFromAI.error}`);
+    assert6(!planFromAI.error, `Failed to plan actions: ${planFromAI.error}`);
   } else {
     actions.forEach((action) => {
       if (action.locate?.id) {
@@ -2619,7 +2612,7 @@ import {
 import { resizeImgBase64 } from "@midscene/shared/img";
 import { transformHotkeyInput } from "@midscene/shared/keyboard-layout";
 import { getDebug as getDebug4 } from "@midscene/shared/logger";
-import { assert as assert6 } from "@midscene/shared/utils";
+import { assert as assert7 } from "@midscene/shared/utils";
 import { actionParser } from "@ui-tars/action-parser";
 
 // src/ai-model/prompt/ui-tars-planning.ts
@@ -2696,7 +2689,7 @@ async function vlmPlanning(options) {
   const transformActions = [];
   parsed.forEach((action) => {
     if (action.action_type === "click") {
-      assert6(action.action_inputs.start_box, "start_box is required");
+      assert7(action.action_inputs.start_box, "start_box is required");
       const point = getPoint(action.action_inputs.start_box, size);
       transformActions.push({
         type: "Locate",
@@ -2723,8 +2716,8 @@ async function vlmPlanning(options) {
         param: action.thought || ""
       });
     } else if (action.action_type === "drag") {
-      assert6(action.action_inputs.start_box, "start_box is required");
-      assert6(action.action_inputs.end_box, "end_box is required");
+      assert7(action.action_inputs.start_box, "start_box is required");
+      assert7(action.action_inputs.end_box, "end_box is required");
       const startPoint = getPoint(action.action_inputs.start_box, size);
       const endPoint = getPoint(action.action_inputs.end_box, size);
       transformActions.push({
@@ -2806,7 +2799,7 @@ async function vlmPlanning(options) {
         param: {}
       });
     } else if (action.action_type === "androidLongPress") {
-      assert6(
+      assert7(
         action.action_inputs.start_coords,
         "start_coords is required for androidLongPress"
       );
@@ -2900,8 +2893,6 @@ async function resizeImageForUiTars(imageBase64, size) {
 
 export {
   systemPromptToLocateElement,
-  elementByPositionWithElementInfo,
-  describeUserPage,
   call2 as call,
   callToGetJSONObject,
   callAiFnWithStringResponse,
@@ -2909,6 +2900,8 @@ export {
   callAiFn,
   adaptBboxToRect,
   expandSearchArea,
+  elementByPositionWithElementInfo,
+  describeUserPage,
   generateYamlTest,
   generateYamlTestStream,
   generatePlaywrightTest,
@@ -2922,4 +2915,4 @@ export {
   resizeImageForUiTars
 };
 
-//# sourceMappingURL=chunk-I5LBWOQA.js.map
+//# sourceMappingURL=chunk-5IZMFZPA.js.map