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

چطور DRYL رابط‌های کاربری تعاملی را به‌صورت تکه‌تکه استریم می‌کند؟

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

رندر زنده و تکه‌تکه (Incremental Rendering) اشیاء تایپ‌شده C# به‌جای استریم متن خام یا انتظار برای JSON کامل؛ این اولین بار است که یک کتابخانه Blazor وضعیت ناقص JSON را در لحظه تعمیر و به UI تبدیل می‌کند.

اپلیکیشن‌های شما از متن ساخته نشده‌اند؛ آن‌ها مجموعه‌ای از کارت‌ها، نمودارها، نشان‌ها و فرم‌ها هستند. این واقعیت، شکاف عمیقی را در رابط‌های کاربری فعلی هوش مصنوعی نشان می‌دهد که در آن‌ها پاسخ‌ها صرفاً در حباب‌های متنی با فرمت Markdown نمایش داده می‌شوند.

برای پر کردن این خلأ، توسعه‌دهنده‌ای به نام Zimpi کتابخانه DRYL را منتشر کرد. این کتابخانه متن‌باز و بومیِ هوش مصنوعی برای Blazor (در هر دو حالت Server و WebAssembly) است که با رابط کاربری (UI) به‌عنوان خروجی اصلی برخورد می‌کند، نه رشته‌های متنی ساده.

پخش زنده هوش مصنوعی در رابط کاربری Blazor: تولید ساخت‌یافته تایپ‌شده و داشبوردهای ساخته‌شده با AI به صورت زنده

اکثر توسعه‌دهندگان امروز با یک انتخاب دشوار روبرو هستند: یا باید منتظر دریافت کامل یک پاسخ JSON بمانند و ۲۰ ثانیه به نماد در حال بارگذاری (Loading Spinner) خیره شوند، یا متن خام را استریم کنند و تمام قالب‌بندی‌های غنی و تعاملات را از دست بدهند. DRYL این بن‌بست را می‌شکند و اجازه می‌دهد رابط کاربری، اشیاء ناقص را توکن‌به‌توکن و در لحظه تولید رندر کند.

این رویکرد مشکل «چرخ‌دنده‌های بارگذاری» را حل می‌کند؛ زیرا خروجی هوش مصنوعی را مانند یک وضعیت زنده می‌بیند. در حالی که مدل هنوز در حال نوشتن پاسخ است، رابط کاربری نوع داده C# را حتی در حالت ناقص نمایش می‌دهد. ابتدا عنوان ظاهر می‌شود، سپس توضیحات کاراکتر به کاراکتر رشد می‌کنند و در نهایت آیتم‌های لیست یکی پس از دیگری بدون پرش یا لرزش ظاهر می‌شوند.

همان‌طور که در تحلیل‌های پیشین ما درباره‌ی معماری‌های عامل‌محور اشاره کردیم، گذار از متن به حالت (State) کلید بهره‌وری در ابزارهای سازمانی است. در این راستا، هسته مرکزی این کتابخانه متد DrylAiGenerate<T> است که تولید ساختاریافته‌ی تایپ‌شده را ممکن می‌کند. به‌جای کلنجار رفتن با انواع پویا، توسعه‌دهندگان یک رکورد ساده در C# تعریف می‌کنند؛ مثلاً برای یک دستور پخت، فیلدهایی برای عنوان، توضیحات، زمان و لیست مواد لازم تعریف می‌شود.

پخش مستقیم هوش مصنوعی به رابط کاربری Blazor: تولید ساخت‌یافته تایپ‌شده و داشبوردهای زنده ساخته‌شده با AI

به نقل از مستندات رسمی این پروژه، توسعه‌دهندگان یک استریم درخواست می‌کنند که فرمت پاسخ JSON را برای نوع T تنظیم می‌کند و آن را به رابط کاربری متصل می‌کنند. در پشت صحنه، یک PartialJsonReader<T> منعطف، JSONهای ناقص را در لحظه تعمیر می‌کند. این سیستم به‌طور خاص موارد زیر را مدیریت می‌کند:

  • رشته‌های نیمه‌باز
  • آرایه‌های بسته نشده
  • اشیاء بریده شده

اگر یک تکه داده در میانه‌ی یک توکن برسد و تجزیه (Parse) شکست بخورد، سیستم آخرین وضعیت سالم را نگه می‌دارد. این موضوع تضمین می‌کند که GenerationSnapshot<T> همیشه بهترین شیء ناقص ممکن را برای نمایش در UI فراهم کند.

طبق اعلام توسعه‌دهندگان در وب‌سایت components.dryl.dev، این سامانه مستقل از ارائه‌دهنده است. از آنجا که این کامپوننت بر پایه استریم استاندارد IAsyncEnumerable<string> کار می‌کند، با هر ارائه‌دهنده Microsoft.Agents.AI از جمله OpenAI، Azure و مدل‌های محلی از طریق Ollama سازگار است. این یعنی برای تست‌ها نیازی به مدل زنده نیست و دمو می‌تواند با یک بازپخش ضبط‌شده اجرا شود.

یکی از تمرکزهای اصلی کتابخانه، وضعیت مشترک AiState (در حال تفکر / در حال استریم / تولید شده) است. هر کامپوننت DRYL این وضعیت را می‌پذیرد. وقتی وضعیت Ai="@snap.State" ارسال شود، یک کارت در مرحله استریم، هاله‌ای رنگی و متحرک به خود می‌گیرد و پس از تکمیل تولید، یک انیمیشن نمایشی اجرا می‌کند. این کار باعث می‌شود کاربر بدون نیاز به برچسب‌های متنی بفهمد هوش مصنوعی در کجای کار است.

افشای تدریجی اطلاعات نیز بسیار ساده است. توسعه‌دهندگان می‌توانند بخش‌هایی را در DrylPresence قرار دهند که تنها زمانی نمایش داده شوند که مقدار ناقص شرط خاصی داشته باشد؛ مثلاً بخشی از کارت تنها زمانی ظاهر شود که لیست مواد لازم بیش از صفر آیتم داشته باشد.

بوم تعاملی هوش مصنوعی

فراتر از داده‌های ساختاریافته، DRYL سیستمی به نام DrylAiCanvas را معرفی می‌کند که در آن هوش مصنوعی خودش چیدمان را طراحی می‌کند. مدل دو ابزار خاص دارد: create_artifact و update_artifact. وقتی کاربر درخواست بصری می‌کند، مدل مشخصات یک کامپوننت — درختی از اجزای DRYL شامل نمودارها، کاشی‌های آماری و دکمه‌ها — را استریم می‌کند و بوم (Canvas) آن را گره‌به‌گره و به‌صورت زنده در کنار چت می‌سازد. این رویکرد در واقع تکامل یافته‌ی ابزارهای طراحی است که بر اساس کیفیت خروجی کد و عمق تولید محصول رتبه‌بندی می‌شوند تا تجربه‌ی بصری کاربر را بهبود بخشند.

پخش مستقیم هوش مصنوعی به رابط کاربری Blazor: تولید ساختاریافته تایپ‌شده و داشبوردهای زنده ساخته‌شده با AI

این مصنوعات (Artifacts) استاتیک نیستند، بلکه کاملاً تعاملی‌اند و بازخوردهای آن‌ها به مدل بازمی‌گردد. برای مثال، اگر کاربر منطقه‌ای را در یک فیلتر تولیدشده انتخاب کند و روی «تفکیک بر اساس منطقه» کلیک کند، سیستم یک CanvasInteraction ایجاد می‌کند که شامل مقادیر فعلی تمام کنترل‌های فرم در آن مصنوع است.

پخش زنده هوش مصنوعی در رابط کاربری Blazor: تولید ساختاریافته تایپ‌شده و داشبوردهای ساخته‌شده با AI به‌صورت زنده

با استفاده از interaction.ToPromptMessage()، این تعامل به نوبت بعدی چت تبدیل می‌شود. مدل سپس با update_artifact یک وصله (Patch) را استریم می‌کند. برای تجربه نرم‌تر، گره‌های تغییریافته می‌درخشند و گره‌های جدید با انیمیشن‌های FLIP سر جای خود می‌لغزند، در حالی که گره‌های دست‌نخورده ثابت می‌مانند. این یک حلقه مداوم می‌سازد: کاربر می‌پرسد $\rightrightarrows$ مدل UI را می‌سازد $\rightrightarrows$ کاربر داخل آن UI کلیک می‌کند $\rightrightarrows$ مدل آن را به‌روز می‌کند.

ایمنی و اکوسیستم

برای جلوگیری از تزریق کدهای مخرب یا شکستن رابط کاربری، مدل هرگز HTML یا کد خام ارسال نمی‌کند. مدل یک مشخصه JSON تولید می‌کند که با یک لیست سفید (Whitelist) سخت‌گیرانه از کامپوننت‌ها اعتبارسنجی می‌شود. اگر مدل گره‌های نامعتبر تولید کند، آن‌ها رندر نمی‌شوند و به‌جای آن، مدل یک رشته خطای اصلاحی دریافت کرده و دوباره تلاش می‌کند.

DRYL ابزارهای کمکی دیگری نیز برای تعمیق ادغام دارد:

  • DrylAiStream: استریم توکن‌ها به DrylMarkdown با حالتی نرم برای جلوگیری از ارسال‌های ناگهانی و تکه‌ای.
  • ابزارهای انسان-در-حلقه: توابع آماده‌ای مانند AskChoice و RequestPermission که دیالوگ‌های واقعی را در میانه‌ی اجرا باز می‌کنند و منتظر پاسخ کاربر می‌مانند. این قابلیت‌ها شباهت زیادی به رویکردهای خودکارسازی ابزارهای عامل‌های هوش مصنوعی از طریق مهندسی معکوس APIها دارند تا تعامل بین کاربر و عامل بهینه شود.
  • ابزارهای نمایش: قابلیت‌های مدل‌محور برای نمایش زنده نمودارهای خطی و تایم‌لاین‌ها.
  • DrylHandoffTrace: یک تایم‌لاین بصری برای رندر کردن جریان‌های متوالی یا هم‌زمان چندعاملی. این ابزار برای کسانی که به دنبال ساخت IDEهای پیشرفته و متن‌باز برای هوش مصنوعی هستند، دیدگاه بسیار ارزشمندی از جریان اجرای عملیات فراهم می‌کند.
  • DrylAiField: یک راهنمای بصری برای هر ورودی که به کاربر اجازه می‌دهد متن را در یک فیلد خالی تولید یا متن انتخاب‌شده را تغییر دهد.

تمام این لایه بر روی یک کتابخانه عمومی با بیش از ۶۰ کامپوننت قرار دارد که دارای سطوح شیشه‌ای، حالت‌های تاریک/روشن توکن‌محور و پاسخگویی (Responsiveness) هستند و هیچ وابستگی به npm ندارند.

برای توسعه‌دهندگان، این تغییر یعنی گذار از الگوی «پردازش متن» به «مدیریت وضعیت». این کتابخانه از طریق NuGet و بسته‌های DRYL.Components و DRYL.Components.Agents در دسترس است. با فراخوانی builder.Services.AddDrylComponents().AddDrylAgents()، توسعه‌دهندگان می‌توانند عامل‌های خود را از OpenAI، Azure یا Ollama در یک محیط Blazor با کارایی بالا ادغام کنند.

گام بعدی شما

  • اگر از Blazor استفاده می‌کنید، بسته DRYL.Components را از NuGet نصب کنید تا خروجی‌های مدل خود را از متن به اشیاء C# تبدیل کنید.
  • برای کاهش نرخ پرش کاربر، از AiState برای نمایش بصری وضعیت «در حال تفکر» مدل استفاده کنید تا کاربر متوجه فعالیت مدل شود.
  • قابلیت DrylAiCanvas را برای ساخت ابزارهای تحلیل داده‌ای امتحان کنید که در آن مدل به‌جای گزارش متنی، داشبورد تعاملی می‌سازد.

اما داستان سخت‌افزاری این تحول حتی شگفت‌انگیزتر است — به تحلیل ما درباره‌ی تراشه‌های Blackwell مراجعه کنید.

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

این ابزار با حذف زمان انتظار برای پاسخ‌های JSON، تجربه کاربری را از حالت ایستا به پویا تغییر می‌دهد. تکیه بر استانداردهای مایکروسافت و عدم وابستگی به npm، اعتبار و پایداری آن را برای محیط‌های سازمانی تضمین می‌کند.

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

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

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

جایگزینی متد سنتی «چت‌باکس» با «مدیریت وضعیت» (State Management)، نقطه پایان عصر رابط‌های کاربری متنی در اپلیکیشن‌های AI است. DRYL با تبدیل توکن‌ها به اشیاء C# در لحظه، مدل زبانی را از یک نویسنده به یک طراح رابط کاربری تبدیل می‌کند. این رویکرد احتمالاً استاندارد جدیدی برای ابزارهای سازمانی خواهد بود که در آن‌ها دقت داده‌ای (از طریق تایپ‌های سخت) بر انعطاف متن اولویت دارد.

منابع

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

گفتگو

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

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

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

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

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

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

دات‌هوش

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

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