در حالی که بیشتر ویژگی‌های هوش مصنوعی در وب به سرورها متکی هستند، هوش مصنوعی سمت مشتری مستقیماً در مرورگر کاربر اجرا می‌شود. این مزایایی مانند تاخیر کم، کاهش هزینه های سمت سرور، عدم نیاز به کلید 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 یک دانلود بزرگ را به تکه های کوچکتر تقسیم می کند.
دانلود و آماده سازی مدل
کاربر را مسدود نکنید
یک تجربه کاربری روان را در اولویت قرار دهید: به ویژگی های کلیدی اجازه دهید حتی اگر مدل هوش مصنوعی هنوز به طور کامل بارگیری نشده باشد.
پیشرفت را نشان دهد
همانطور که مدل را دانلود می کنید، پیشرفت تکمیل شده و زمان باقی مانده را نشان دهید.
- اگر دانلودهای مدل توسط کتابخانه هوش مصنوعی سمت سرویس گیرنده شما انجام می شود، از وضعیت پیشرفت دانلود برای نمایش آن به کاربر استفاده کنید. اگر این ویژگی در دسترس نیست، برای درخواست آن (یا مشارکت در آن!) مشکلی را باز کنید.
- اگر دانلودهای مدل را در کد خود مدیریت می‌کنید، می‌توانید مدل را به صورت تکه‌ای با استفاده از کتابخانه واکشی کنید، مانند واکشی در تکه‌ها ، و پیشرفت دانلود را به کاربر نمایش دهید.
- برای مشاوره بیشتر، به بهترین شیوه‌ها برای شاخص‌های پیشرفت متحرک و طراحی برای انتظارها و وقفه‌های طولانی مراجعه کنید.
وقفه های شبکه را با ظرافت مدیریت کنید
دانلود مدل بسته به اندازه آنها ممکن است زمان های مختلفی را ببرد. نحوه رسیدگی به وقفه های شبکه را در صورت آفلاین شدن کاربر در نظر بگیرید. در صورت امکان، کاربر را از اتصال خراب مطلع کنید و پس از بازیابی اتصال، دانلود را ادامه دهید.
اتصال ضعیف دلیل دیگری برای دانلود به صورت تکه‌ای است.
کارهای گران قیمت را به یک کارمند وب بارگذاری کنید
کارهای گران قیمت، به عنوان مثال مراحل آماده‌سازی مدل پس از دانلود، می‌توانند رشته اصلی شما را مسدود کنند و باعث ایجاد یک تجربه کاربر ناراحت کننده شوند. انتقال این وظایف به یک وب کار کمک می کند.
یک نسخه آزمایشی و پیاده سازی کامل را بر اساس وب کارگر بیابید:
در طول استنتاج
هنگامی که مدل دانلود شد و آماده شد، می توانید استنتاج را اجرا کنید. استنتاج می تواند از نظر محاسباتی گران باشد.
انتقال استنتاج به یک وب کارگر
اگر استنتاج از طریق WebGL، WebGPU یا WebNN رخ دهد، به GPU متکی است. این بدان معنی است که در یک فرآیند جداگانه رخ می دهد که رابط کاربری را مسدود نمی کند.
اما برای پیاده‌سازی‌های مبتنی بر CPU (مانند Wasm، که اگر WebGPU پشتیبانی نمی‌شود، می‌تواند بازگشتی برای WebGPU باشد)، انتقال استنتاج به وب‌کارگر صفحه شما را پاسخگو نگه می‌دارد - درست مانند زمان آماده‌سازی مدل.
اگر همه کدهای مرتبط با هوش مصنوعی (واکشی مدل، آماده سازی مدل، استنتاج) در یک مکان زندگی کنند، ممکن است پیاده سازی شما ساده تر باشد. بنابراین، می‌توانید یک وب‌کارگر را انتخاب کنید، چه GPU در حال استفاده باشد یا نه.
رسیدگی به خطاها
حتی با وجود اینکه بررسی کرده اید که مدل باید روی دستگاه اجرا شود، کاربر ممکن است فرآیند دیگری را شروع کند که بعداً به طور گسترده منابع را مصرف می کند. برای کاهش این امر:
- رسیدگی به خطاهای استنتاج استنتاج را در بلوک‌های
try/catchقرار دهید و خطاهای زمان اجرا مربوطه را مدیریت کنید. - خطاهای WebGPU را مدیریت کنید ، چه غیرمنتظره و چه GPUDevice.lost ، که زمانی رخ می دهد که GPU واقعاً به دلیل مشکل دستگاه بازنشانی می شود.
وضعیت استنتاج را نشان دهید
اگر استنباط بیش از آنچه فوری به نظر می رسد زمان می برد، به کاربر سیگنال دهید که مدل در حال فکر کردن است. از انیمیشن‌ها استفاده کنید تا انتظار را کاهش دهید و به کاربر اطمینان دهید که برنامه همانطور که در نظر گرفته شده است کار می‌کند.
استنتاج را قابل لغو کنید
به کاربر اجازه دهید تا درخواست خود را در همان لحظه اصلاح کند، بدون اینکه سیستم منابع را هدر دهد و پاسخی ایجاد کند که کاربر هرگز نخواهد دید.
،
در حالی که بیشتر ویژگی‌های هوش مصنوعی در وب به سرورها متکی هستند، هوش مصنوعی سمت مشتری مستقیماً در مرورگر کاربر اجرا می‌شود. این مزایایی مانند تاخیر کم، کاهش هزینه های سمت سرور، عدم نیاز به کلید 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 یک دانلود بزرگ را به تکه های کوچکتر تقسیم می کند.
دانلود و آماده سازی مدل
کاربر را مسدود نکنید
یک تجربه کاربری روان را در اولویت قرار دهید: به ویژگی های کلیدی اجازه دهید حتی اگر مدل هوش مصنوعی هنوز به طور کامل بارگیری نشده باشد.
پیشرفت را نشان دهد
همانطور که مدل را دانلود می کنید، پیشرفت تکمیل شده و زمان باقی مانده را نشان دهید.
- اگر دانلودهای مدل توسط کتابخانه هوش مصنوعی سمت سرویس گیرنده شما انجام می شود، از وضعیت پیشرفت دانلود برای نمایش آن به کاربر استفاده کنید. اگر این ویژگی در دسترس نیست، برای درخواست آن (یا مشارکت در آن!) مشکلی را باز کنید.
- اگر دانلودهای مدل را در کد خود مدیریت می‌کنید، می‌توانید مدل را به صورت تکه‌ای با استفاده از کتابخانه واکشی کنید، مانند واکشی در تکه‌ها ، و پیشرفت دانلود را به کاربر نمایش دهید.
- برای مشاوره بیشتر، به بهترین شیوه‌ها برای شاخص‌های پیشرفت متحرک و طراحی برای انتظارها و وقفه‌های طولانی مراجعه کنید.
وقفه های شبکه را با ظرافت مدیریت کنید
دانلود مدل بسته به اندازه آنها ممکن است زمان های مختلفی را ببرد. نحوه رسیدگی به وقفه های شبکه را در صورت آفلاین شدن کاربر در نظر بگیرید. در صورت امکان، کاربر را از اتصال خراب مطلع کنید و پس از بازیابی اتصال، دانلود را ادامه دهید.
اتصال ضعیف دلیل دیگری برای دانلود به صورت تکه‌ای است.
کارهای گران قیمت را به یک کارمند وب بارگذاری کنید
کارهای گران قیمت، به عنوان مثال مراحل آماده‌سازی مدل پس از دانلود، می‌توانند رشته اصلی شما را مسدود کنند و باعث ایجاد یک تجربه کاربر ناراحت کننده شوند. انتقال این وظایف به یک وب کار کمک می کند.
یک نسخه آزمایشی و پیاده سازی کامل را بر اساس وب کارگر بیابید:
در حین استنباط
هنگامی که مدل دانلود شد و آماده شد، می توانید استنتاج را اجرا کنید. استنتاج می تواند از نظر محاسباتی گران باشد.
انتقال استنتاج به یک وب کارگر
اگر استنتاج از طریق WebGL، WebGPU یا WebNN رخ دهد، به GPU متکی است. این بدان معنی است که در یک فرآیند جداگانه رخ می دهد که رابط کاربری را مسدود نمی کند.
اما برای پیاده‌سازی‌های مبتنی بر CPU (مانند Wasm، که اگر WebGPU پشتیبانی نمی‌شود، می‌تواند بازگشتی برای WebGPU باشد)، انتقال استنتاج به وب‌کارگر صفحه شما را پاسخگو نگه می‌دارد - درست مانند زمان آماده‌سازی مدل.
اگر همه کدهای مرتبط با هوش مصنوعی (واکشی مدل، آماده سازی مدل، استنتاج) در یک مکان زندگی کنند، ممکن است پیاده سازی شما ساده تر باشد. بنابراین، می‌توانید یک وب‌کارگر را انتخاب کنید، چه GPU در حال استفاده باشد یا نه.
رسیدگی به خطاها
حتی با وجود اینکه بررسی کرده اید که مدل باید روی دستگاه اجرا شود، کاربر ممکن است فرآیند دیگری را شروع کند که بعداً به طور گسترده منابع را مصرف می کند. برای کاهش این امر:
- رسیدگی به خطاهای استنتاج استنتاج را در بلوک‌های
try/catchقرار دهید و خطاهای زمان اجرا مربوطه را مدیریت کنید. - خطاهای WebGPU را مدیریت کنید ، چه غیرمنتظره و چه GPUDevice.lost ، که زمانی رخ می دهد که GPU واقعاً به دلیل مشکل دستگاه بازنشانی می شود.
وضعیت استنتاج را نشان دهید
اگر استنباط بیش از آنچه فوری به نظر می رسد زمان می برد، به کاربر سیگنال دهید که مدل در حال فکر کردن است. از انیمیشن‌ها استفاده کنید تا انتظار را کاهش دهید و به کاربر اطمینان دهید که برنامه همانطور که در نظر گرفته شده است کار می‌کند.
استنتاج را قابل لغو کنید
به کاربر اجازه دهید تا درخواست خود را در همان لحظه اصلاح کند، بدون اینکه سیستم منابع را هدر دهد و پاسخی ایجاد کند که کاربر هرگز نخواهد دید.
،
در حالی که بیشتر ویژگی‌های هوش مصنوعی در وب به سرورها متکی هستند، هوش مصنوعی سمت مشتری مستقیماً در مرورگر کاربر اجرا می‌شود. این مزایایی مانند تاخیر کم، کاهش هزینه های سمت سرور، عدم نیاز به کلید 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 یک دانلود بزرگ را به تکه های کوچکتر تقسیم می کند.
دانلود و آماده سازی مدل
کاربر را مسدود نکنید
یک تجربه کاربری روان را در اولویت قرار دهید: به ویژگی های کلیدی اجازه دهید حتی اگر مدل هوش مصنوعی هنوز به طور کامل بارگیری نشده باشد.
پیشرفت را نشان دهد
همانطور که مدل را دانلود می کنید، پیشرفت تکمیل شده و زمان باقی مانده را نشان دهید.
- اگر دانلودهای مدل توسط کتابخانه هوش مصنوعی سمت سرویس گیرنده شما انجام می شود، از وضعیت پیشرفت دانلود برای نمایش آن به کاربر استفاده کنید. اگر این ویژگی در دسترس نیست، برای درخواست آن (یا مشارکت در آن!) مشکلی را باز کنید.
- اگر دانلودهای مدل را در کد خود مدیریت می‌کنید، می‌توانید مدل را به صورت تکه‌ای با استفاده از کتابخانه واکشی کنید، مانند واکشی در تکه‌ها ، و پیشرفت دانلود را به کاربر نمایش دهید.
- برای مشاوره بیشتر، به بهترین شیوه‌ها برای شاخص‌های پیشرفت متحرک و طراحی برای انتظارها و وقفه‌های طولانی مراجعه کنید.
وقفه های شبکه را با ظرافت مدیریت کنید
دانلود مدل بسته به اندازه آنها می تواند زمان های مختلفی را ببرد. نحوه رسیدگی به وقفه های شبکه را در صورت آفلاین شدن کاربر در نظر بگیرید. در صورت امکان، کاربر را از اتصال خراب مطلع کنید و پس از بازیابی اتصال، دانلود را ادامه دهید.
اتصال ضعیف دلیل دیگری برای دانلود به صورت تکه‌ای است.
کارهای گران قیمت را به یک کارمند وب بارگذاری کنید
کارهای گران قیمت، به عنوان مثال مراحل آماده‌سازی مدل پس از دانلود، می‌توانند رشته اصلی شما را مسدود کنند و باعث ایجاد یک تجربه کاربر ناراحت کننده شوند. انتقال این وظایف به یک وب کار کمک می کند.
یک نسخه آزمایشی و پیاده سازی کامل را بر اساس وب کارگر بیابید:
در حین استنباط
هنگامی که مدل دانلود شد و آماده شد، می توانید استنتاج را اجرا کنید. استنتاج می تواند از نظر محاسباتی گران باشد.
انتقال استنتاج به یک وب کارگر
اگر استنتاج از طریق WebGL، WebGPU یا WebNN رخ دهد، به GPU متکی است. این بدان معنی است که در یک فرآیند جداگانه رخ می دهد که رابط کاربری را مسدود نمی کند.
اما برای پیاده‌سازی‌های مبتنی بر CPU (مانند Wasm، که اگر WebGPU پشتیبانی نمی‌شود، می‌تواند بازگشتی برای WebGPU باشد)، انتقال استنتاج به وب‌کارگر صفحه شما را پاسخگو نگه می‌دارد - درست مانند زمان آماده‌سازی مدل.
اگر همه کدهای مرتبط با هوش مصنوعی (واکشی مدل، آماده سازی مدل، استنتاج) در یک مکان زندگی کنند، ممکن است پیاده سازی شما ساده تر باشد. بنابراین، می‌توانید یک وب‌کارگر را انتخاب کنید، چه GPU در حال استفاده باشد یا نه.
رسیدگی به خطاها
حتی با وجود اینکه بررسی کرده اید که مدل باید روی دستگاه اجرا شود، کاربر ممکن است فرآیند دیگری را شروع کند که بعداً به طور گسترده منابع را مصرف می کند. برای کاهش این امر:
- رسیدگی به خطاهای استنتاج استنتاج را در بلوک‌های
try/catchقرار دهید و خطاهای زمان اجرا مربوطه را مدیریت کنید. - خطاهای WebGPU را مدیریت کنید ، چه غیرمنتظره و چه GPUDevice.lost ، که زمانی رخ می دهد که GPU واقعاً به دلیل مشکل دستگاه بازنشانی می شود.
وضعیت استنتاج را نشان دهید
اگر استنباط بیش از آنچه فوری به نظر می رسد زمان می برد، به کاربر سیگنال دهید که مدل در حال فکر کردن است. از انیمیشن‌ها استفاده کنید تا انتظار را کاهش دهید و به کاربر اطمینان دهید که برنامه همانطور که در نظر گرفته شده است کار می‌کند.
استنتاج را قابل لغو کنید
به کاربر اجازه دهید تا درخواست خود را در همان لحظه اصلاح کند، بدون اینکه سیستم منابع را هدر دهد و پاسخی ایجاد کند که کاربر هرگز نخواهد دید.
،
در حالی که بیشتر ویژگی‌های هوش مصنوعی در وب به سرورها متکی هستند، هوش مصنوعی سمت مشتری مستقیماً در مرورگر کاربر اجرا می‌شود. این مزایایی مانند تاخیر کم، کاهش هزینه های سمت سرور، عدم نیاز به کلید 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 عمومی.
در حالی که همه این مدل ها یک کار یکسان را انجام می دهند ، با دقت متفاوت ، اندازه آنها بسیار متفاوت است: از 3MB تا 1.5 گیگابایت.
بررسی کنید که آیا مدل می تواند اجرا شود
همه دستگاه ها نمی توانند مدل های AI را اجرا کنند. حتی دستگاه هایی که مشخصات سخت افزاری کافی دارند ، ممکن است در صورت استفاده از سایر فرآیندهای گران قیمت یا شروع به کار شوند.
تا زمانی که یک راه حل در دسترس نباشد ، در اینجا کاری است که امروز می توانید انجام دهید:
- پشتیبانی از WebGPU را بررسی کنید . چندین کتابخانه هوش مصنوعی سمت مشتری از جمله Transformer.js نسخه 3 و MediaPipe از WebGPU استفاده می کنند. در حال حاضر ، در صورت پشتیبانی از WebGPU ، برخی از این کتابخانه ها به طور خودکار به WASM می روند. اگر می دانید که کتابخانه AI مشتری شما به WebGPU نیاز دارد ، می توانید با محصور کردن کد مربوط به هوش مصنوعی خود در یک بررسی ویژگی WebGPU ، کاهش دهید.
- دستگاه های تحت قدرت را رد کنید . برای برآورد قابلیت ها و فشار دستگاه ، از navigator.hardwareconcurrency ، navigator.devicemmory و API فشار محاسباتی استفاده کنید. این API ها در همه مرورگرها پشتیبانی نمی شوند و عمداً برای جلوگیری از انگشت نگاری نادرست هستند ، اما آنها هنوز هم می توانند به رد دستگاه هایی که به نظر می رسد بسیار تحت فشار هستند ، کمک کنند.
سیگنال بارگیری های بزرگ
برای مدل های بزرگ ، قبل از بارگیری به کاربران هشدار دهید. کاربران دسک تاپ نسبت به کاربران موبایل با بارگیری های بزرگ به احتمال زیاد خوب هستند. برای تشخیص دستگاه های تلفن همراه ، از mobile از API مشتری عامل API استفاده کنید (یا اگر UA-CHAP پشتیبانی نشده باشد ، رشته کاربر-عامل).
بارگیری های بزرگ را محدود کنید
- فقط موارد لازم را بارگیری کنید . به خصوص اگر این مدل بزرگ باشد ، آن را فقط یک بار بارگیری کنید که از ویژگی های AI استفاده می شود. به عنوان مثال ، اگر یک ویژگی پیشنهادی از نوع AI دارید ، فقط وقتی کاربر با استفاده از ویژگی های تایپ شروع می کند بارگیری کنید.
- برای جلوگیری از بارگیری آن در هر بازدید ، مدل را با استفاده از Cache API ذخیره کنید. فقط به حافظه پنهان مرورگر HTTP ضمنی اعتماد نکنید.
- دانلود مدل . Fetch-Chunks بارگیری بزرگی را در تکه های کوچکتر تقسیم می کند.
بارگیری و آماده سازی مدل
کاربر را مسدود نکنید
اولویت بندی یک تجربه کاربر صاف: به ویژگی های کلیدی اجازه دهید حتی اگر مدل AI هنوز کاملاً بارگیری نشده باشد.
پیشرفت را نشان می دهد
همانطور که مدل را بارگیری می کنید ، پیشرفت را به پایان رساند و زمان باقی مانده است.
- اگر بارگیری های مدل توسط کتابخانه AI طرف مشتری شما انجام می شود ، از وضعیت پیشرفت بارگیری برای نمایش آن به کاربر استفاده کنید. اگر این ویژگی در دسترس نیست ، برای درخواست آن (یا کمک به آن!) یک مسئله را باز کنید.
- اگر بارگیری های مدل را در کد شخصی خود انجام می دهید ، می توانید با استفاده از یک کتابخانه ، مانند Fetch-in-Chunks ، مدل را در تکه ها واکشی کنید و پیشرفت بارگیری را برای کاربر نمایش دهید.
- برای مشاوره بیشتر ، به بهترین روشها برای شاخص های پیشرفت انیمیشن و طراحی برای انتظار طولانی و وقفه مراجعه کنید.
وقفه های شبکه را با لطف انجام دهید
بارگیری مدل بسته به اندازه آنها می تواند مقدار مختلفی از زمان را به خود اختصاص دهد. اگر کاربر آفلاین می شود ، چگونه می توانید وقفه های شبکه را انجام دهید. در صورت امکان ، کاربر را از یک اتصال شکسته مطلع کنید و هنگام ترمیم اتصال ، بارگیری را ادامه دهید.
اتصال پوسته پوسته دلیل دیگری برای بارگیری در تکه ها است.
کارهای گران قیمت را به یک کارگر وب بارگیری کنید
وظایف گران قیمت ، به عنوان مثال مراحل تهیه مدل پس از بارگیری ، می تواند موضوع اصلی شما را مسدود کند و باعث یک تجربه کاربری پرشور شود. انتقال این کارها به یک کارگر وب کمک می کند.
یک نسخه ی نمایشی و اجرای کامل را بر اساس یک کارگر وب پیدا کنید:
در حین استنتاج
پس از بارگیری و آماده شدن مدل ، می توانید استنباط را اجرا کنید. استنتاج می تواند از نظر محاسباتی گران باشد.
استنتاج را به یک کارگر وب منتقل کنید
اگر استنتاج از طریق WebGL ، WebGPU یا WebNN رخ دهد ، به GPU متکی است. این بدان معنی است که در یک فرآیند جداگانه اتفاق می افتد که UI را مسدود نمی کند.
اما برای پیاده سازی های مبتنی بر CPU (مانند WASM ، که می تواند یک بازپرداخت برای WebGPU باشد ، اگر WebGPU پشتیبانی نشده باشد) ، استنباط حرکت به یک کارگر وب صفحه شما را پاسخگو نگه می دارد-درست مانند در هنگام تهیه مدل.
اگر تمام کد مربوط به هوش مصنوعی شما (مدل واکشی ، تهیه مدل ، استنتاج) در همان مکان زندگی کند ، ممکن است اجرای شما ساده تر باشد. بنابراین ، شما ممکن است یک کارگر وب را انتخاب کنید ، خواه GPU در حال استفاده باشد یا خیر.
رسیدگی به خطاها
حتی اگر شما بررسی کرده اید که مدل باید روی دستگاه اجرا شود ، کاربر ممکن است فرآیند دیگری را آغاز کند که بعداً منابع را به طور گسترده مصرف می کند. برای کاهش این امر:
- رسیدگی به خطاهای استنتاج . استنتاج را در بلوک های
try/catchمحصور کنید و خطاهای مربوط به زمان اجرا را برطرف کنید. - خطاهای WebGPU را کنترل کنید ، چه غیر منتظره و چه GPUDEVICE.LOST ، که وقتی GPU در واقع مجدداً تنظیم می شود ، اتفاق می افتد زیرا دستگاه مبارزه می کند.
وضعیت استنتاج را نشان دهید
اگر استنباط بیشتر از آنچه که فوری احساس می شود ، زمان بیشتری می برد ، به کاربر سیگنال می دهد که مدل در حال فکر کردن است. از انیمیشن ها برای سهولت انتظار و اطمینان از کاربر که برنامه در نظر گرفته شده است اطمینان حاصل کنید.
استنتاج را قابل انکار کنید
به کاربر اجازه دهید پرس و جو خود را در پرواز اصلاح کند ، بدون اینکه سیستم منابع خود را هدر دهد و پاسخی را که کاربر هرگز نمی بیند ایجاد کند.