page-agent 0.0.0 → 0.0.1

package/README.md

@@ -1,21 +1,25 @@
-# PageAgent 🤖
+# PageAgent 🤖🪄
 
-[![npm version](https://badge.fury.io/js/page-agent.svg)](https://badge.fury.io/js/page-agent) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/) [![Downloads](https://img.shields.io/npm/dt/page-agent.svg)](https://www.npmjs.com/package/page-agent) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/page-agent)](https://bundlephobia.com/package/page-agent) [![GitHub stars](https://img.shields.io/github/stars/gaomeng1900/page-agent.svg)](https://github.com/gaomeng1900/page-agent)
+> Unfinished Project. See [**Roadmap**](./ROADMAP.md)
 
-**Transform any webpage into an AI-powered application with a single script tag.**
+![banner](https://img.alicdn.com/imgextra/i1/O1CN01RY0Wvh26ATVeDIX7v_!!6000000007621-0-tps-1672-512.jpg)
 
-PageAgent is an intelligent UI agent for web automation and DOM interaction. Built on browser-use architecture, it enables natural language control of web interfaces through LLM integration.
+[![npm version](https://badge.fury.io/js/page-agent.svg)](https://badge.fury.io/js/page-agent) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/) [![Downloads](https://img.shields.io/npm/dt/page-agent.svg)](https://www.npmjs.com/package/page-agent) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/page-agent)](https://bundlephobia.com/package/page-agent) [![GitHub stars](https://img.shields.io/github/stars/alibaba/page-agent.svg)](https://github.com/alibaba/page-agent)
+
+**Transform your webpage into an AI-powered application with a single script tag.**
+
+An in-page UI agent in javascript. Control web interfaces with natural language.
 
 🌐 **English** | [中文](./README-zh.md)
 
-👉 [📖 **Documentation**](#) | [🚀 **Try Demo**](#)
+👉 [🚀 **Demo**](https://alibaba.github.io/page-agent/) | [📖 **Documentation**](https://alibaba.github.io/page-agent/#/docs/introduction/overview)
 
 ---
 
 ## ✨ Features
 
-- **🎯 Easy Integration** - Add to any webpage via CDN or npm
-- **🔐 Client-Side Processing** - No data leaves the browser
+- **🎯 Easy Integration**
+- **🔐 Client-Side Processing**
 - **🧠 DOM Extraction**
 - **💬 Natural Language Interface**
 - **🎨 UI with Human in the loop**
@@ -45,7 +49,7 @@ npm install page-agent
 import { PageAgent } from 'page-agent'
 
 const agent = new PageAgent({
-  modelName: 'gpt-4.1-mini'
+  modelName: 'gpt-4.1-mini',
   baseURL: 'xxxx',
   apiKey: 'xxxx'
 })
@@ -95,7 +99,23 @@ PageAgent is designed for **client-side web enhancement**, not server-side autom
 
 MIT License - see the [LICENSE](LICENSE) file for details.
 
-DOM processing components and prompt are derived from [browser-use](https://github.com/browser-use/browser-use) (MIT License). See [NOTICE](NOTICE) for full attribution.
+
+```
+DOM processing components and prompt are derived from browser-use: 
+
+Browser Use
+Copyright (c) 2024 Gregor Zunic
+Licensed under the MIT License
+
+Original browser-use project: <https://github.com/browser-use/browser-use>
+
+We gratefully acknowledge the browser-use project and its contributors for their
+excellent work on web automation and DOM interaction patterns that helped make
+this project possible.
+
+Third-party dependencies and their licenses can be found in the package.json
+file and in the node_modules directory after installation.
+```
 
 ---
 

package/dist/lib/PageAgent.d.ts

@@ -1,6 +1,5 @@
-import { LanguageModelUsage } from 'ai';
 import { Motion } from 'ai-motion';
-import { Tool } from 'ai';
+import { z } from 'zod';
 
 export declare interface AgentBrain {
     evaluation_previous_goal: string;
@@ -13,11 +12,21 @@ export declare interface AgentHistory {
     action: {
         name: string;
         input: any;
-        output: any;
+        output: string;
+    };
+    usage: {
+        promptTokens: number;
+        completionTokens: number;
+        totalTokens: number;
+        cachedTokens?: number;
+        reasoningTokens?: number;
     };
-    usage: LanguageModelUsage;
 }
 
+declare type DeepStringify<T> = {
+    [K in keyof T]: T[K] extends string ? string : T[K] extends object ? DeepStringify<T[K]> : T[K];
+};
+
 declare interface DomConfig {
     interactiveBlacklist?: (Element | (() => Element))[];
     interactiveWhitelist?: (Element | (() => Element))[];
@@ -43,6 +52,55 @@ declare interface ElementDomNode {
     [key: string]: unknown;
 }
 
+declare const enUS: {
+    readonly ui: {
+        readonly panel: {
+            readonly ready: "Ready";
+            readonly thinking: "Thinking...";
+            readonly paused: "Paused";
+            readonly taskInput: "Enter new task, describe steps in detail, press Enter to submit";
+            readonly userAnswerPrompt: "Please answer the question above, press Enter to submit";
+            readonly taskTerminated: "Task terminated";
+            readonly taskCompleted: "Task completed";
+            readonly continueExecution: "Continue execution";
+            readonly userAnswer: "User answer: {{input}}";
+            readonly question: "Question: {{question}}";
+            readonly waitingPlaceholder: "Waiting for task to start...";
+            readonly pause: "Pause";
+            readonly continue: "Continue";
+            readonly stop: "Stop";
+            readonly expand: "Expand history";
+            readonly collapse: "Collapse history";
+            readonly step: "Step {{number}} · {{time}}{{duration}}";
+        };
+        readonly tools: {
+            readonly clicking: "Clicking element [{{index}}]...";
+            readonly inputting: "Inputting text to element [{{index}}]...";
+            readonly selecting: "Selecting option \"{{text}}\"...";
+            readonly scrolling: "Scrolling page...";
+            readonly waiting: "Waiting {{seconds}} seconds...";
+            readonly done: "Task done";
+            readonly clicked: "🖱️ Clicked element [{{index}}]";
+            readonly inputted: "⌨️ Inputted text \"{{text}}\"";
+            readonly selected: "☑️ Selected option \"{{text}}\"";
+            readonly scrolled: "🛞 Page scrolled";
+            readonly waited: "⌛️ Wait completed";
+            readonly executing: "Executing {{toolName}}...";
+            readonly resultSuccess: "success";
+            readonly resultFailure: "failed";
+            readonly resultError: "error";
+        };
+        readonly errors: {
+            readonly elementNotFound: "No interactive element found at index {{index}}";
+            readonly taskRequired: "Task description is required";
+            readonly executionFailed: "Task execution failed";
+            readonly notInputElement: "Element is not an input or textarea";
+            readonly notSelectElement: "Element is not a select element";
+            readonly optionNotFound: "Option \"{{text}}\" not found";
+        };
+    };
+};
+
 /**
  * Type-safe event bus
  * @note Mainly used to decouple logic and UI
@@ -111,15 +169,129 @@ declare interface InteractiveElementDomNode {
 declare interface LLMConfig {
     baseURL?: string;
     apiKey?: string;
-    modelName?: string;
+    model?: string;
+    temperature?: number;
+    maxTokens?: number;
     maxRetries?: number;
 }
 
 declare const locales: {
-    readonly 'zh-CN': TranslationSchema;
-    readonly 'en-US': TranslationSchema;
+    readonly 'en-US': {
+        readonly ui: {
+            readonly panel: {
+                readonly ready: "Ready";
+                readonly thinking: "Thinking...";
+                readonly paused: "Paused";
+                readonly taskInput: "Enter new task, describe steps in detail, press Enter to submit";
+                readonly userAnswerPrompt: "Please answer the question above, press Enter to submit";
+                readonly taskTerminated: "Task terminated";
+                readonly taskCompleted: "Task completed";
+                readonly continueExecution: "Continue execution";
+                readonly userAnswer: "User answer: {{input}}";
+                readonly question: "Question: {{question}}";
+                readonly waitingPlaceholder: "Waiting for task to start...";
+                readonly pause: "Pause";
+                readonly continue: "Continue";
+                readonly stop: "Stop";
+                readonly expand: "Expand history";
+                readonly collapse: "Collapse history";
+                readonly step: "Step {{number}} · {{time}}{{duration}}";
+            };
+            readonly tools: {
+                readonly clicking: "Clicking element [{{index}}]...";
+                readonly inputting: "Inputting text to element [{{index}}]...";
+                readonly selecting: "Selecting option \"{{text}}\"...";
+                readonly scrolling: "Scrolling page...";
+                readonly waiting: "Waiting {{seconds}} seconds...";
+                readonly done: "Task done";
+                readonly clicked: "🖱️ Clicked element [{{index}}]";
+                readonly inputted: "⌨️ Inputted text \"{{text}}\"";
+                readonly selected: "☑️ Selected option \"{{text}}\"";
+                readonly scrolled: "🛞 Page scrolled";
+                readonly waited: "⌛️ Wait completed";
+                readonly executing: "Executing {{toolName}}...";
+                readonly resultSuccess: "success";
+                readonly resultFailure: "failed";
+                readonly resultError: "error";
+            };
+            readonly errors: {
+                readonly elementNotFound: "No interactive element found at index {{index}}";
+                readonly taskRequired: "Task description is required";
+                readonly executionFailed: "Task execution failed";
+                readonly notInputElement: "Element is not an input or textarea";
+                readonly notSelectElement: "Element is not a select element";
+                readonly optionNotFound: "Option \"{{text}}\" not found";
+            };
+        };
+    };
+    readonly 'zh-CN': {
+        readonly ui: {
+            readonly panel: {
+                readonly ready: "准备就绪";
+                readonly thinking: "正在思考...";
+                readonly paused: "暂停中，稍后";
+                readonly taskInput: "输入新任务，详细描述步骤，回车提交";
+                readonly userAnswerPrompt: "请回答上面问题，回车提交";
+                readonly taskTerminated: "任务已终止";
+                readonly taskCompleted: "任务结束";
+                readonly continueExecution: "继续执行";
+                readonly userAnswer: "用户回答: {{input}}";
+                readonly question: "询问: {{question}}";
+                readonly waitingPlaceholder: "等待任务开始...";
+                readonly pause: "暂停";
+                readonly continue: "继续";
+                readonly stop: "终止";
+                readonly expand: "展开历史";
+                readonly collapse: "收起历史";
+                readonly step: "步骤 {{number}} · {{time}}{{duration}}";
+            };
+            readonly tools: {
+                readonly clicking: "正在点击元素 [{{index}}]...";
+                readonly inputting: "正在输入文本到元素 [{{index}}]...";
+                readonly selecting: "正在选择选项 \"{{text}}\"...";
+                readonly scrolling: "正在滚动页面...";
+                readonly waiting: "等待 {{seconds}} 秒...";
+                readonly done: "结束任务";
+                readonly clicked: "🖱️ 已点击元素 [{{index}}]";
+                readonly inputted: "⌨️ 已输入文本 \"{{text}}\"";
+                readonly selected: "☑️ 已选择选项 \"{{text}}\"";
+                readonly scrolled: "🛞 页面滚动完成";
+                readonly waited: "⌛️ 等待完成";
+                readonly executing: "正在执行 {{toolName}}...";
+                readonly resultSuccess: "成功";
+                readonly resultFailure: "失败";
+                readonly resultError: "错误";
+            };
+            readonly errors: {
+                readonly elementNotFound: "未找到索引为 {{index}} 的交互元素";
+                readonly taskRequired: "任务描述不能为空";
+                readonly executionFailed: "任务执行失败";
+                readonly notInputElement: "元素不是输入框或文本域";
+                readonly notSelectElement: "元素不是选择框";
+                readonly optionNotFound: "未找到选项 \"{{text}}\"";
+            };
+        };
+    };
 };
 
+/**
+ * MacroTool input structure
+ */
+export declare interface MacroToolInput {
+    evaluation_previous_goal?: string;
+    memory?: string;
+    next_goal?: string;
+    action: Record<string, any>;
+}
+
+/**
+ * MacroTool output structure
+ */
+export declare interface MacroToolResult {
+    input: MacroToolInput;
+    output: string;
+}
+
 declare type NestedKeyOf<ObjectType extends object> = {
     [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object ? `${Key}` | `${Key}.${NestedKeyOf<ObjectType[Key]>}` : `${Key}`;
 }[keyof ObjectType & (string | number)];
@@ -130,6 +302,7 @@ export declare class PageAgent extends EventTarget {
     id: string;
     bus: EventBus;
     i18n: I18n;
+    panel: Panel;
     paused: boolean;
     disposed: boolean;
     task: string;
@@ -147,11 +320,9 @@ export declare class PageAgent extends EventTarget {
     /** last time the tree was updated */
     lastTimeUpdate: number;
     /** Corresponds to actions in browser-use */
-    tools: Map<string, Tool>;
+    tools: Map<string, PageAgentTool<any>>;
     /** Fullscreen mask */
     mask: SimulatorMask;
-    /** Interactive panel */
-    panel: Panel;
     /** History records */
     history: AgentHistory[];
     constructor(config?: PageAgentConfig);
@@ -189,6 +360,15 @@ declare interface PageAgentEventMap {
     };
 }
 
+/**
+ * Internal tool definition that has access to PageAgent `this` context
+ */
+declare interface PageAgentTool<TParams = any> {
+    description: string;
+    inputSchema: z.ZodType<TParams>;
+    execute: (this: PageAgent, args: TParams) => Promise<string>;
+}
+
 /**
  * Agent control panel
  */
@@ -246,49 +426,7 @@ declare type TranslationKey = NestedKeyOf<TranslationSchema>;
 
 declare type TranslationParams = Record<string, string | number>;
 
-declare interface TranslationSchema {
-    ui: {
-        panel: {
-            ready: string;
-            thinking: string;
-            paused: string;
-            taskInput: string;
-            userAnswerPrompt: string;
-            taskTerminated: string;
-            taskCompleted: string;
-            continueExecution: string;
-            userAnswer: string;
-            pause: string;
-            continue: string;
-            stop: string;
-            expand: string;
-            collapse: string;
-            step: string;
-        };
-        tools: {
-            clicking: string;
-            inputting: string;
-            selecting: string;
-            scrolling: string;
-            waiting: string;
-            done: string;
-            clicked: string;
-            inputted: string;
-            selected: string;
-            scrolled: string;
-            waited: string;
-            executing: string;
-        };
-        errors: {
-            elementNotFound: string;
-            taskRequired: string;
-            executionFailed: string;
-            notInputElement: string;
-            notSelectElement: string;
-            optionNotFound: string;
-        };
-    };
-}
+declare type TranslationSchema = DeepStringify<typeof enUS>;
 
 declare interface UIConfig {
     language?: SupportedLanguage;