اگر هنوز برای تعامل با مدلهای زبانی محلی از محیطهای متنی و پیچیده استفاده میکنید، زمان آن رسیده که به دنیای رابطهای گرافیکی سریع برسید. پلتفرم Jarvis AI راهاندازی رابط کاربری وب خود را نهایی کرد تا فاصله میان کاربر و دادههای خصوصیاش را به حداقل برساند.
به نقل از مستندات پروژه، در ۲۹ ژوئیه ۲۰۲۶، فاز ۷ این پلتفرم منتشر شد. هدف اصلی این بهروزرسانی، تبدیل یک سامانه هوش مصنوعی «محلی-محور» به یک اپلیکیشن وب صیقلخورده است تا کاربران بدون نیاز به تسلط بر خط فرمان، با مدلهای خود تعامل کنند.
همانطور که در تحلیل قبلی ما دربارهی ترکیب اولاما (Ollama) و Spring Boot برای ایجاد APIهای محلی اشاره کردیم، Jarvis تکامل طبیعی این معماری است. در حالی که ۶ فاز نخست بر «مغز» سیستم — شامل حافظه بردار معنایی (Embedding) — شبیه کارت معرفی عددی برای هر واژه که میگوید این کلمه همسایهی چه کلمات دیگری است — و سامانه عاملهای ReACT متمرکز بود، فاز ۷ در واقع «چهره» این سیستم را میسازد. فلسفه اصلی این پروژه ساده است: هوش مصنوعی شما، دادههای شما و ماشین شما.
برای درک ابعاد این تغییر، باید به مسیر تکاملی این پروژه نگاه کرد. بر اساس گزارشهای منتشرشده، Jarvis طی شش مرحله رشد کرد:
- فاز ۱: چت ساده، احراز هویت JWT و رابط CLI
- فاز ۲: ادغام حافظه بلندمدت با استفاده از pgvector
- فاز ۳: جستوجوی مستندات بر پایه تولید بازیابیافزا (RAG) — شبیه دانشآموزی که قبل از جواب دادن، اول کتاب درسی را باز میکند و از آن نقل میآورد
- فاز ۴: توسعه موتور ابزار با سرور MCP
- فاز ۵: دستیار صوتی با Whisper و TTS
- فاز ۶: پیادهسازی کامل سامانه عامل ReACT
تمام این قابلیتها به درستی کار میکردند، اما تجربه کاربری صرفاً در محیط ترمینال محدود بود. فاز ۷ این محدودیت را با یک رابط مدرن در مرورگر از بین برد.
تیم توسعه در انتخاب تکنولوژی، Angular 22 را به React یا Next.js ترجیح داد. دلیل اول، سازگاری بومی RxJS با استریمهای واکنشی و SSE در بکاند Spring WebFlux بود. استفاده از RxJS مدیریت اشتراکها و لغو استریمها را بسیار تمیزتر از هوکهای React میکند. دلیل دوم، تخصص عمیق نگهدارنده پروژه در Angular بود که سرعت رفع باگ و بازبینی کدها را بالا میبرد. در نهایت، Angular Material 22 زیربنایی دسترسپذیر برای دیالوگها و فرمها فراهم کرد، هرچند تیم برای دوری از ظاهر خشک شرکتی، تمام استایلها را با SCSS سفارشی بازنویسی کرد.
پشته فنی این رابط کاربری بر پایه لایههای دقیقی بنا شده است:
- فریمورک: Angular 22
- زبان: TypeScript 6
- اجزای رابط کاربری: Angular Material 22
- استایلدهی: SCSS سفارشی و متغیرهای CSS
- مدیریت وضعیت: Angular Signals
- ارتباطات: Angular HttpClient
- استریمینگ: ترکیب fetch() با ReadableStream
- مسیریابی: Angular Router با Lazy Loading
- رندر Markdown: ngx-markdown
یکی از چالشهای فنی جدی، ناکارآمدی API استاندارد EventSource بود. طبق گزارش سایت dev.to، این API فقط از درخواستهای GET پشتیبانی میکند و امکان ارسال هدرهای احراز هویت JWT یا بدنه JSON را ندارد. از آنجا که Jarvis برای امنیت به درخواستهای POST نیاز دارد، تیم از ترکیب fetch() و ReadableStream استفاده کرد تا استریمینگ پاسخها در چت، عاملها و بخش صوتی فعال شود.
در جریان پیادهسازی، باگی در رویداد «پایان» (done) رخ داد که باعث میشد پاسخهای هوش مصنوعی با یک پیام خالی تمام شوند. دلیل این اتفاق تداخل سیگنال event: done از بکاند با خروجی reader.read() در مرورگر بود. توسعهدهندگان با اضافه کردن یک متغیر Guard (محافظ)، مانع از اجرای دوجانبه تابع onDone() شدند.
مدیریت وضعیت رابط کاربری اکنون به شدت بر Angular Signals متکی است. این رویکرد باعث میشود تغییرات در صفحه بدون نیاز به بازبینی دستی کل DOM اعمال شود. برای مثال، سیگنال canSend بهطور خودکار بررسی میکند که آیا ورودی خالی است یا استریم در جریان است تا دکمه ارسال را فعال یا غیرفعال کند.
قانون جریان داده در این پلتفرم صریح است: سیگنالها برای نمایش در قالب (Template) و Observableها برای فراخوانیهای HTTP و استریمهای SSE.
برخی باگهای سطح تولیدی نیز توسط بررسیهای خودکار CodeRabbit شناسایی شدند. یکی از این موارد، تداخل دکمه «توقف» و «ارسال» بود. در ابتدا هر دو دکمه وضعیت غیرفعال مشترکی داشتند، بهطوریکه لحظه شروع استریم، دکمه توقف هم غیرفعال میشد. این مشکل با جداسازی آنها در بلوک @if (isStreaming()) حل شد. اکنون توقف استریم با فراخوانی this.abortController?.abort() به سادگی انجام میشود. این رویکرد به استانداردسازی ساختار پروژههای هوش مصنوعی کمک میکند، مشابه آنچه در معماری Nstack برای کاهش توهمات عاملهای کدنویس مشاهده میکنیم.
در بخش بکاند نیز خطای CORS شناسایی شد. مشکل این بود که Spring Security درخواستهای OPTIONS را پیش از آنکه فیلتر CORS فعال شود، متوقف میکرد. راهکار نهایی، انتقال پیکربندی CORS مستقیماً به SecurityWebFilterChain بود.
دسترسیپذیری (Accessibility) نیز به عنوان یک اولویت در نظر گرفته شد. تگهای ساده div با role="status" و role="alert" جایگزین شدند تا صفحهخوانها پیامهای هوش مصنوعی را بهطور خودکار اعلام کنند. همچنین باگی در دکمه حذف وجود داشت که تنها با تغییر Opacity مخفی میشد و کاربران کیبورد همچنان میتوانستند روی آن Tab کنند. این مشکل با افزودن استایل focus-visible برطرف شد.
سیستم تمینگ پلتفرم نیز از متغیرهای CSS استفاده میکند. برای مثال، رنگ --bg-primary در حالت تاریک #0f117 و در حالت روشن سفید است. این ساختار اجازه میدهد بدون تغییر در اجزاء، کل ظاهر برنامه با یک تغییر متغیر بازسازی شود.
در حال حاضر صفحات زیر مستقر شدهاند:
- ورود/ثبتنام: جریان کامل احراز هویت JWT
- پوسته برنامه: سایدبار و نوار ابزار با مسیریابی Lazy
- چت: رندر SSE در لحظه با پشتیبانی از Markdown
- حافظه: عملیات کامل CRUD برای حافظه بلندمدت
- تنظیمات: پایش سلامت ارائهدهندگان و پیکربندی صوتی
نقشه راه آینده بر سه جزء متمرکز است:
- صفحه مستندات: مدیریت آپلود فایل و نظارت بر وضعیت
- صفحه عاملها: نمایش زنده مراحل اجرای ReACT بهصورت استریم
- صفحه صوتی: ادغام API
MediaRecorderبا پاسخهای AI
این انتقال به رابط وب، Jarvis را از یک ابزار توسعهدهنده به یک اپلیکیشن کاربردی برای افراد غیرفنی تبدیل میکند. برای کسانی که به دنبال ساخت ابزارهای مشابه با هزینه کم هستند، تجربه توسعه یک تحلیلگر رزومه رایگان با Gemini و Supabase میتواند الهامبخش باشد. با اثبات اینکه یک پشته پیچیده و محلی میتواند توسط یک فرانتاند با کارایی بالا مدیریت شود، Jarvis الگویی برای سایر پروژههای متنباز تحت لیسانس Apache 2.0 ایجاد کرد.
گام بعدی شما
- اگر توسعهدهنده هستید، مستندات مربوط به
ReadableStreamدر Angular 22 را برای مدیریت بهتر استریمهای AI مطالعه کنید. - پروژه Jarvis را از گیتهاب کلون کرده و تفاوت سرعت پاسخدهی در محیط وب را با نسخه ترمینال مقایسه کنید.
- برای پیادهسازی سیستمهای محلی، ترکیب Spring WebFlux و Angular Signals را به عنوان استانداردی برای کاهش تأخیر در نظر بگیرید.
اما داستان سختافزاری اجرای این مدلهای محلی حتی پیچیدهتر است — به تحلیل ما دربارهی بهینهسازی VRAM در مدلهای کوانتیده مراجعه کنید.
گفتگو