پرش به محتوای اصلی
پرش به محتوای مقاله

SaaS AI Copilots با متد DOM Dehydration کنترل رابط‌های وب را به دست گرفتند

·۱۲ تیر ۱۴۰۵۵ دقیقه مطالعه۱ بازدید
عامل صفحه علی‌بابا: عامل رابط گرافیکی جاوااسکریپت درون‌صفحه برای کنترل وب با زبان طبیعی از طریق DOM
عامل صفحه علی‌بابا: عامل رابط گرافیکی جاوااسکریپت درون‌صفحه برای کنترل وب با زبان طبیعی از طریق DOM
اشتراک‌گذاری
واقعاً چه چیز جدید است؟

معرفی متد DOM Dehydration برای تبدیل رابط وب به نقشه‌ی متنی فشرده؛ این یعنی مدل‌های متنی ساده اکنون می‌توانند بدون دیدن عکس صفحه، با دقت بالا روی عناصر وب کلیک کنند و متن بنویسند.

اگر امروز یک محصول SaaS می‌سازید، احتمالاً می‌دانید که تبدیل یک چت‌بات ساده به دستیاری که واقعاً «کار» می‌کند، چقدر دشوار است. مشکل این است که اکثر عامل‌ها برای دیدن صفحه وب به عکس نیاز دارند و در نتیجه کند، گران و غیردقیق هستند. اتوماسیون مرورگر به‌طور سنتی بر مدل‌های سنگین چندوجهی (Multi-modal) و مرورگرهای خارجی بدون رابط گرافیکی (Headless) متکی بوده است.

علی‌بابا (Alibaba) با معرفی Page Agent این معادله را تغییر داد. این ابزار کنترل را مستقیماً به سمت کلاینت منتقل می‌کند. توسعه‌دهندگان اکنون می‌توانند تنها با استفاده از یک تگ اسکریپت (Script Tag)، یک عامل هوش مصنوعی کاملاً کاربردی را در اپلیکیشن وب خود جاسازی کنند تا کنترل رابط‌های کاربری وب از طریق زبان طبیعی امکان‌پذیر شود.

این ابزار برخلاف روش‌های سنتی که از بیرون و با ابزارهایی مثل Playwright، Puppeteer یا Selenium (که از طریق اسکرین‌شات یا پروتکل Chrome DevTools کار می‌کنند) مرورگر را هدایت می‌کنند، مستقیماً به‌عنوان یک اسکریپت جاوااسکریپت درون صفحه قرار می‌گیرد. در روش‌های قدیمی، اغلب شکافی میان ادراک عامل و وضعیت واقعی و زنده صفحه وجود داشت. Page Agent این شکاف را می‌پوشاند زیرا درون صفحه وب زندگی می‌کند و به طور خودکار نشست‌های فعال (Sessions)، کوکی‌ها و احراز هویت کاربر را به ارث می‌برد. در این مدل، نیازی به نوشتن بک‌اندهای مجزا نیست و تمام قوانین امنیتی و اعتبارسنجی‌های رابط کاربری (UI Validation) موجود، همچنان پابرجا می‌مانند.

همان‌طور که در تحلیل‌های پیشین ما درباره‌ی پروتکل‌های ارتباطی مدل‌ها اشاره کردیم، حذف لایه‌های واسطه همیشه سرعت استنتاج را بالا می‌برد. بر اساس گزارش marktechpost، قلب تپنده این سیستم مکانیزمی به نام «تخلیه DOM» (DOM Dehydration) است. در این روش، به جای ارسال حجم عظیمی از کدهای HTML خام یا پیکسل‌های تصویر به مدل زبانی (LLM)، عامل ابتدا مدل شیء سند (Document Object Model) را اسکن کرده و تنها عناصر تعاملی مانند دکمه‌ها، لینک‌ها و فیلدهای ورودی را شناسایی می‌کند. سپس این اطلاعات به یک FlatDomTree تبدیل می‌شود؛ یک نقشه متنی فشرده که در آن هر عنصر دارای یک شاخص (Index)، نقش (Role) و برچسب (Label) مشخص است. در این فرآیند، علامت‌گذاری‌های زائد (Redundant Markup) حذف می‌شوند تا مدل‌های متنی کوچک‌تر بتوانند با دقت بسیار بالا عمل کنند.

طبق مستندات فنی این پروژه، معماری آن به صورت زیر است:

  • مستقل از مدل (Model Agnostic): با هر نقطه پایانی (Endpoint) سازگار با OpenAI کار می‌کند. این یعنی توسعه‌دهندگان می‌توانند تنها با تغییر URL پایه و کلید API، مدل را عوض کنند. برای مثال، یک توسعه‌دهنده می‌تواند از مدل qwen3.5-plus از طریق نقطه پایانی Dashscope استفاده کند.
  • زبان توسعه و منبع‌باز: کدبیس این پروژه بر پایه TypeScript است و تحت مجوز MIT منتشر شده است. این ابزار بر روی منطق پروژه browser-use بنا شده و دستورات (Prompts) و پردازش DOM آن از همان پروژه مشتق شده است.
  • ساختار ماژولار: این مخزن کد (Monorepo) به سه بخش تقسیم شده است: @page-agent/core برای منطق عامل بدون رابط گرافیکی، page-agent برای کلاس ورودی کامل به همراه یک پنل رابط کاربری، و @page-agent/page-controller برای استخراج DOM و شماره‌گذاری عناصر.
  • بازخورد بصری: بخش page-controller از یک ابزار اختیاری به نام SimulatorMask پشتیبانی می‌کند تا در هنگام اجرای عملیات توسط عامل، بازخوردهای بصری به کاربر نمایش داده شود.

توسعه‌دهندگان می‌توانند برای امنیت بیشتر، «لیست‌های مجاز» (Operation Allowlists) تعریف کنند تا محدود کنند عامل مجاز به اجرای کدام اقدامات باشد. همچنین قابلیت ماسک‌گذاری داده‌ها (Data Masking) برای پنهان کردن فیلدهای حساس، مانند رمز عبورها، از دید مدل پیش‌بینی شده است. علاوه بر این، می‌توان دانش سفارشی (Custom Knowledge) را به سیستم تزریق کرد تا عامل قوانین خاص یک حوزه یا دامنه (Domain Rules) را دنبال کند.

کنترل حرکت و عملیات از طریق یک PageController انجام می‌شود که دستورات غیرهمزمان (Asynchronous) مشخصی را اجرا می‌کند:

  • await this.pageController.updateTree() برای به‌روزرسانی وضعیت DOM.
  • await this.pageController.clickElement(index) برای فعال کردن یک دکمه یا لینک.
  • await this.pageController.inputText(index, text) برای پر کردن فیلدهای فرم.
  • await this.pageController.scroll({ down: true, numPages: 1 }) برای پیمایش در صفحه.

از آنجایی که این ابزار در محدوده تک-صفحه‌ای (Single-page scope) عمل می‌کند، برای ساخت کوپایلت‌های درون‌برنامه‌ای و اتوماسیون فرم‌های پیچیده ERP یا CRM ایده‌آل است. تصور کنید کاربر تایپ کند: «۵۰ دلار هزینه ناهار دیروز را ثبت کن» و عامل تمام مراحل ناوبری در منوها و ورود داده‌ها به فیلدها را به طور خودکار مدیریت کند.

به گزارش منابع فنی، کاربردهای عملی این فناوری شامل موارد زیر است:

  • دستیارهای SaaS: شرکت‌ها می‌توانند دستیارهایی عرضه کنند که به جای ارائه متون راهنمای آموزشی، واقعاً محصول را برای کاربر به حرکت درآورند. یک ربات پشتیبانی می‌تواند مراحل سخت را مستقیماً برای کاربر انجام دهد.
  • دسترسی‌پذیری (Accessibility): با جفت کردن Page Agent با Web Speech API، هر اپلیکیشن وب می‌تواند از طریق کنترل صوتی زبان طبیعی و اعلان‌های سازگار با صفحه‌خوان (Screen-reader) در دسترس قرار گیرد.
  • مدرن‌سازی سیستم‌های قدیمی (Legacy Modernization): می‌توان این ابزار را روی ابزارهای داخلی قدیمی که فاقد API هستند قرار داد و بدون تغییر در کد منبع اصلی، یک نوار دستورات متنی (Command Bar) به آن‌ها اضافه کرد.

این چرخش معماری، هزینه عملیات را به‌شدت کاهش می‌دهد؛ چون نیاز به مدل‌های گران‌قیمت چندوجهی (Multimodal) — مدل‌هایی که شبیه انسان هم متن را می‌خوانند و هم تصویر را می‌بینند — حذف شده و مدل‌های متنی سریع و کوچک جایگزین شده‌اند. در واقع، این فناوری رابط وب را به یک API ساختاریافته تبدیل می‌کند که LLM می‌تواند آن را در لحظه بخواند و تغییر دهد. این رویکرد در واقع یکی از راهکارهای عملی برای عبور از بن‌بست‌های اجرای عملیاتی در عامل‌های هوش مصنوعی است که توسعه‌دهندگان را از وابستگی به زیرساخت‌های سنگین رها می‌کند.

با این حال، محدودیت‌هایی نیز وجود دارد. ایمنی در سطح پرامپت (مثلاً دستور «هرگز فرم پرداخت را خودکار ارسال نکن») بر اساس System Prompts است. این‌ها تنها راهنماهای متقاعدکننده هستند و ضمانت‌های سخت (Hard Guarantees) محسوب نمی‌شوند. برای عملیات حساس یا تخریبی، توسعه‌دهندگان همچنان باید اعتبارسنجی در سمت سرور (Server-side validation) را پیاده‌سازی کنند.

علاوه بر این، عامل نمی‌تواند به تنهایی بین تب‌ها یا پنجره‌های مختلف مرورگر جابه‌جا شود. اتوماسیون چندصفحه‌ای نیازمند یک افزونه کروم اختیاری است که نصب و مجوزهای جداگانه‌ای می‌طلبد.

برای تست این فناوری، دموی آن از طریق یک تگ اسکریپت CDN با استفاده از page-agent.demo.js (نسخه ۱.۱۰.۰) در دسترس است، هرچند برای محیط‌های عملیاتی باید از یک بک‌اند پروکسی‌شده استفاده کرد تا API Keyها در بسته کلاینت (Client Bundle) لو نروند. همچنین اضافه شدن سرور Beta MCP به این معناست که عامل‌های خارجی مثل Claude Desktop یا Microsoft Copilot اکنون می‌توانند از طریق این پل ارتباطی داخلی، رابط‌های وب را هدایت کنند. این قابلیت دسترسی گسترده‌تر، یادآور رویکرد اپلیکیشن Hermes در ساده‌سازی گردش‌کارهای چندعاملی است که هدف آن حذف موانع فنی برای تعامل با مدل‌های مختلف است.

گام بعدی شما

  • اگر توسعه‌دهنده هستید، کتابخانه Page Agent را در یک محیط ایزوله برای اتوماسیون فرم‌های داخلی شرکتتان تست کنید.
  • بررسی کنید آیا مدل‌های زبانی کوچک (SLM) شما در تبدیل FlatDomTree به دستورات عملیاتی دچار توهم می‌شوند یا خیر.
  • برای افزایش امنیت، حتماً لایه‌ی تاییدیه (Human-in-the-loop) را برای عملیات تخریبی یا مالی پیاده‌سازی کنید.

اما تأثیر این روش بر کاهش مصرف GPU در مقیاس سازمانی حتی جذاب‌تر است — به تحلیل ما درباره هزینه استنتاج در مدل‌های بازمتن مراجعه کنید.

چرا این موضوع مهم است؟

این ابزار با حذف نیاز به تحلیل تصویر، هزینه و تاخیر استنتاج را به‌شدت کاهش می‌دهد و تخصص علی‌بابا در بهینه‌سازی ساختار داده‌های وب را به رخ می‌کشد. نتیجه این است که عامل‌های AI از «مشاوران متنی» به «اپراتورهای عملیاتی» تبدیل می‌شوند.

تأثیر برای ایران

برنامه‌نویسان ایرانی می‌توانند با استفاده از این کتابخانه متن‌باز، دستیارهای هوشمند داخلی برای سامانه‌های اداری قدیمی (که API ندارند) بسازند و بهره‌وری آن‌ها را بدون تغییر در کد قدیمی افزایش دهند.

·نگاه ما
تحریریه دات‌هوش

جایگزینی بینایی ماشین با نقشه‌های متنی فشرده (DOM Dehydration)، در واقع پذیرش این واقعیت است که برای کنترل وب، «درک ساختاری» بسیار کارآمدتر از «درک بصری» است. این رویکرد، وابستگی شرکت‌ها به مدل‌های عظیم چندوجهی را می‌شکند و مسیر را برای استقرار عامل‌های هوشمند در لبه (Edge) هموار می‌کند، جایی که حافظه و پردازش محدود است.

منابع

این گزارش با خط‌لولهٔ خودکار دات‌هوش از منابع معتبر جهانی تدوین و زیر نظر تحریریه منتشر شده است. روش کار ما

گفتگو

پنج‌شنبه‌های هوش‌محور

بسته‌ی هفتگی دات‌هوش

۵ خبر، ۲ ابزار، ۱ پرامپت در هر شماره. به‌زودی راه‌اندازی می‌شود — هر پنج‌شنبه صبح.

خبر کلیدی
ابزار کاربردی
پرامپت حرفه‌ای
تحلیل پژوهش
به‌زودی
زاویه‌ی ایرانی
به‌زودی
تمرین این هفته
به‌زودی

راهنماهای دات‌هوش

راهنماهای کاربردیِ دات‌هوش برای کار با هوش مصنوعی — از همین‌جا شروع کنید:

دات‌هوش

راهنمای فارسی هوش مصنوعی — با نگاه به ایران

اخبار روزانه، معرفی ابزارها و مدل‌ها، و آموزشِ کار با هوش مصنوعی؛ همیشه با این پرسش که از ایران چه چیزی کار می‌کند و چه چیزی نه.