بهبود عملکرد و UX برای هوش مصنوعی سمت مشتری

Maud Nalpas

در حالی که بیشتر ویژگی‌های هوش مصنوعی در وب به سرورها متکی هستند، هوش مصنوعی سمت مشتری مستقیماً در مرورگر کاربر اجرا می‌شود. این مزایایی مانند تاخیر کم، کاهش هزینه های سمت سرور، عدم نیاز به کلید API، افزایش حریم خصوصی کاربر و دسترسی آفلاین را ارائه می دهد. می‌توانید هوش مصنوعی سمت کلاینت را که در مرورگرها با کتابخانه‌های جاوا اسکریپت مانند TensorFlow.js ، Transformers.js و MediaPipe GenAI کار می‌کند، پیاده‌سازی کنید.

هوش مصنوعی سمت مشتری نیز چالش‌های عملکردی را معرفی می‌کند: کاربران باید فایل‌های بیشتری را دانلود کنند و مرورگر آنها باید سخت‌تر کار کند. برای اینکه به خوبی کار کند، در نظر بگیرید:

• مورد استفاده شما آیا هوش مصنوعی سمت مشتری گزینه مناسبی برای ویژگی شماست؟ آیا ویژگی شما در یک سفر حیاتی کاربر است، و اگر چنین است، آیا بازگشتی دارید؟
• روش های خوب برای دانلود و استفاده از مدل . برای یادگیری بیشتر به خواندن ادامه دهید.

قبل از دانلود مدل

کتابخانه ذهن و اندازه مدل

برای پیاده سازی هوش مصنوعی سمت مشتری، به یک مدل و معمولاً یک کتابخانه نیاز دارید. هنگام انتخاب کتابخانه، اندازه آن را مانند هر ابزار دیگری ارزیابی کنید.

اندازه مدل نیز مهم است. آنچه برای یک مدل هوش مصنوعی بزرگ در نظر گرفته می شود بستگی دارد. 5 مگابایت می تواند یک قانون کلی مفید باشد: همچنین صدک 75 میانگین اندازه صفحه وب است. یک عدد ساده تر 10 مگابایت خواهد بود.

در اینجا چند نکته مهم در مورد اندازه مدل وجود دارد:

• بسیاری از مدل‌های هوش مصنوعی مخصوص کار می‌توانند واقعاً کوچک باشند . مدلی مانند BudouX ، برای شکستن دقیق کاراکترها در زبان‌های آسیایی، تنها 9.4 کیلوبایت GZiپ دارد. مدل تشخیص زبان MediaPipe 315 کیلوبایت است.
• حتی مدل های بینایی نیز می توانند اندازه های معقولی داشته باشند . مدل Handpose و تمام منابع مرتبط در مجموع 13.4 مگابایت است. در حالی که این بسیار بزرگتر از بسیاری از بسته های فرانت اند کوچک است، با صفحه وب متوسط ​​که 2.2 مگابایت است ( 2.6 مگابایت در دسکتاپ) قابل مقایسه است.
• مدل‌های AI ژنرال می‌توانند از اندازه توصیه‌شده برای منابع وب فراتر بروند . DistilBERT ، که یک مدل LLM بسیار کوچک یا یک مدل NLP ساده در نظر گرفته می شود (نظرات متفاوت است)، وزن آن 67 مگابایت است. حتی LLM های کوچک، مانند Gemma 2B ، می توانند به 1.3 گیگابایت برسند. این اندازه بیش از 100 برابر اندازه متوسط ​​صفحه وب است.

می توانید اندازه دانلود دقیق مدل هایی را که قصد استفاده از آنها را دارید با ابزارهای توسعه دهنده مرورگر خود ارزیابی کنید.

اندازه مدل را بهینه کنید

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

در حالی که همه این مدل‌ها کار یکسانی را انجام می‌دهند، با دقت متفاوت، اندازه‌های آنها بسیار متفاوت است: از 3 مگابایت تا 1.5 گیگابایت.

بررسی کنید که آیا مدل می تواند اجرا شود

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

تا زمانی که راه حلی در دسترس نباشد، امروز می توانید کاری انجام دهید:

• پشتیبانی WebGPU را بررسی کنید . چندین کتابخانه هوش مصنوعی سمت کلاینت از جمله Transformers.js نسخه 3 و MediaPipe از WebGPU استفاده می کنند. در حال حاضر، اگر WebGPU پشتیبانی نشود، برخی از این کتابخانه‌ها به‌طور خودکار به Wasm بازگشت نمی‌کنند. اگر می‌دانید که کتابخانه هوش مصنوعی سمت کلاینت شما به WebGPU نیاز دارد، می‌توانید با قرار دادن کدهای مرتبط با هوش مصنوعی خود در بررسی تشخیص ویژگی WebGPU ، آن را کاهش دهید.
• دستگاه های کم توان را کنار بگذارید . از Navigator.hardwareConcurrency ، Navigator.deviceMemory و Compute Pressure API برای تخمین قابلیت‌ها و فشار دستگاه استفاده کنید. این APIها در همه مرورگرها پشتیبانی نمی‌شوند و عمداً برای جلوگیری از اثرانگشت نادقیق هستند، اما همچنان می‌توانند دستگاه‌هایی را که به نظر بسیار ضعیف به نظر می‌رسند، رد کنند.

سیگنال دانلودهای بزرگ

برای مدل های بزرگ، قبل از دانلود به کاربران هشدار دهید. کاربران دسکتاپ بیشتر از کاربران تلفن همراه با دانلودهای زیاد مشکلی ندارند. برای شناسایی دستگاه‌های تلفن همراه، از طریق User-Agent Client Hints API (یا اگر UA-CH پشتیبانی نمی‌شود، از رشته User-Agent mobile کنید).

محدود کردن دانلودهای زیاد

• فقط موارد لازم را دانلود کنید . به خصوص اگر مدل بزرگ است، آن را فقط زمانی دانلود کنید که مطمئن شوید از ویژگی های هوش مصنوعی استفاده می شود. برای مثال، اگر یک ویژگی هوش مصنوعی پیشنهادی تایپ دارید، فقط زمانی دانلود کنید که کاربر شروع به استفاده از ویژگی‌های تایپ کند.
• برای جلوگیری از بارگیری آن در هر بازدید، مدل را به صراحت در دستگاه با استفاده از Cache API ذخیره کنید. فقط به حافظه پنهان مرورگر HTTP اتکا نکنید.
• دانلود مدل تکه . fetch-in-chunks یک دانلود بزرگ را به تکه های کوچکتر تقسیم می کند.

دانلود و آماده سازی مدل

کاربر را مسدود نکنید

یک تجربه کاربری روان را در اولویت قرار دهید: به ویژگی های کلیدی اجازه دهید حتی اگر مدل هوش مصنوعی هنوز به طور کامل بارگیری نشده باشد.

پیشرفت را نشان دهد

همانطور که مدل را دانلود می کنید، پیشرفت تکمیل شده و زمان باقی مانده را نشان دهید.

• اگر دانلودهای مدل توسط کتابخانه هوش مصنوعی سمت سرویس گیرنده شما انجام می شود، از وضعیت پیشرفت دانلود برای نمایش آن به کاربر استفاده کنید. اگر این ویژگی در دسترس نیست، برای درخواست آن (یا مشارکت در آن!) مشکلی را باز کنید.
• اگر دانلودهای مدل را در کد خود مدیریت می‌کنید، می‌توانید مدل را به صورت تکه‌ای با استفاده از کتابخانه واکشی کنید، مانند واکشی در تکه‌ها ، و پیشرفت دانلود را به کاربر نمایش دهید.
  • برای مشاوره بیشتر، به بهترین شیوه‌ها برای شاخص‌های پیشرفت متحرک و طراحی برای انتظارها و وقفه‌های طولانی مراجعه کنید.

وقفه های شبکه را با ظرافت مدیریت کنید

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

اتصال ضعیف دلیل دیگری برای دانلود به صورت تکه‌ای است.

کارهای گران قیمت را به یک کارمند وب بارگذاری کنید

کارهای گران قیمت، به عنوان مثال مراحل آماده‌سازی مدل پس از دانلود، می‌توانند رشته اصلی شما را مسدود کنند و باعث ایجاد یک تجربه کاربر ناراحت کننده شوند. انتقال این وظایف به یک وب کار کمک می کند.

یک نسخه آزمایشی و پیاده سازی کامل را بر اساس وب کارگر بیابید:

• script.js
• worker.js

در حین استنباط

هنگامی که مدل دانلود شد و آماده شد، می توانید استنتاج را اجرا کنید. استنتاج می تواند از نظر محاسباتی گران باشد.

انتقال استنتاج به یک وب کارگر

اگر استنتاج از طریق WebGL، WebGPU یا WebNN رخ دهد، به GPU متکی است. این بدان معنی است که در یک فرآیند جداگانه رخ می دهد که رابط کاربری را مسدود نمی کند.

اما برای پیاده‌سازی‌های مبتنی بر CPU (مانند Wasm، که اگر WebGPU پشتیبانی نمی‌شود، می‌تواند بازگشتی برای WebGPU باشد)، انتقال استنتاج به وب‌کارگر صفحه شما را پاسخگو نگه می‌دارد - درست مانند زمان آماده‌سازی مدل.

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

رسیدگی به خطاها

حتی با وجود اینکه بررسی کرده اید که مدل باید روی دستگاه اجرا شود، کاربر ممکن است فرآیند دیگری را شروع کند که بعداً به طور گسترده منابع را مصرف می کند. برای کاهش این امر:

• رسیدگی به خطاهای استنتاج استنتاج را در بلوک‌های try / catch قرار دهید و خطاهای زمان اجرا مربوطه را مدیریت کنید.
• خطاهای WebGPU را مدیریت کنید ، چه غیرمنتظره و چه GPUDevice.lost ، که زمانی رخ می دهد که GPU واقعاً به دلیل مشکل دستگاه بازنشانی می شود.

وضعیت استنتاج را نشان دهید

اگر استنباط بیش از آنچه فوری به نظر می رسد زمان می برد، به کاربر سیگنال دهید که مدل در حال فکر کردن است. از انیمیشن‌ها استفاده کنید تا انتظار را کاهش دهید و به کاربر اطمینان دهید که برنامه همانطور که در نظر گرفته شده است کار می‌کند.

استنتاج را قابل لغو کنید

به کاربر اجازه دهید تا درخواست خود را در همان لحظه اصلاح کند، بدون اینکه سیستم منابع را هدر دهد و پاسخی ایجاد کند که کاربر هرگز نخواهد دید.