تیم Angular ابزار متنباز Web Codegen Scorer را برای ارزیابی کیفیت کدهای تولیدشده توسط هوش مصنوعی در فرانتاند منتشر کرد. این ابزار خطاها، دسترسپذیری، امنیت و بهترین شیوهها را بررسی میکند و قابلیت پشتیبانی از فریمورکهای دیگر مانند Solid.js و Vue را نیز دارد. |
تیم Angular ابزار Web Codegen Scorer را بهصورت متنباز منتشر کرده تا شاخصهای قابلاندازهگیری برای کدهای فرانتاند تولیدشده با هوش مصنوعی و فریمورکها ارائه دهد.
داستان از کجا شروع شد؟
تیم انگولار در گوگل بحثی داخلی داشت؛ اعضا نمیتوانستند بر سر اینکه کدام مدل زبانی بزرگ در پیادهسازی این فریمورک بهتر عمل میکند، به توافق برسند.
| 💡 این ابزار مثل یک تست آمادگی برای کدهای تولیدشده توسط مدلهای زبانی بزرگ است |
سیمونا کوتین (Simona Cotin)، مدیر مهندسی در گوگل و عضو تیم Angular، گفت:
«در تیمهای مختلفمان تجربههای متفاوتی از استفاده از مدلهای زبانی بزرگ برای تولید کد داشتیم و دیدگاههایمان درباره سطح کیفیت کدهای تولیدشده برای Angular کمی با هم فرق داشت.»
یکی از توسعهدهندگان انگولار این چالش را پذیرفت و نمونهابزاری طراحی کرد که بتواند میزان سازگاری کد تولیدشده با Angular را آزمایش کند. این آزمایش اولیه به ساخت یک ابزار متنباز منجر شد که کدهای تولیدشده توسط مدلهای زبانی بزرگ را از نظر معیارهای توسعه فرانتاند، از جمله رعایت بهترین شیوههای فریمورک، دسترسپذیری و شناسایی مشکلات امنیتی بررسی میکند.
این ابزار که Web Codegen Scorer نام دارد، برای ارزیابی تمام این موارد در برنامههای تولیدشده با روش Vibe-Coding طراحی شده است.
کوتین در رویداد Angular + AI Developer گفت:
«سرعت پیشرفت هوش مصنوعی وسوسهکننده است اما کدی که تولید میکند، همیشه قابل اعتماد نیست و آماده استفاده در محیط تولید نیست. این همان چالش اصلیای است که ما توسعهدهندگان امروز با آن روبهرو هستیم. این ابزار مثل یک تست آمادگی برای کدهای تولیدشده توسط مدلهای زبانی بزرگ است.»
مسیر طیشده تا اینجا
کدهای تولیدشده توسط هوش مصنوعی در بخش فرانتاند، میتوانند چالشبرانگیز باشند؛ چون این بخش شامل زبانها، فریمورکها و میکروفریمورکهای متعددی است.
در حالی که یک مدل زبانی بزرگ ممکن است بتواند کدی مخصوص یک فریمورک خاص بنویسد اما این مدلها معمولا بر پایه بهترین کدها یا استانداردهای برتر آموزش ندیدهاند. همین باعث بروز مشکلاتی در کد میشود؛ البته نوع مشکل به مدل و فریمورک بستگی دارد.
برای مثال، ست وبستر (Seth Webster)، مدیر اجرایی بنیاد React گفت که Claude معمولا برای مدیریت وضعیت از refs در React استفاده میکند که الگوی مناسبی نیست.
کوتین هم توضیح داد که در انگولار نیز مشکلات مشابهی در کدهای تولیدشده توسط AI مشاهده شده، با این تفاوت که در Angular، مدلهای زبانی تمایل دارند از APIهای قدیمیتر استفاده کنند.
Scorer چه مشکلی را حل میکند؟
این ابزار همچنین به دلیل نیاز به آزمایش سرور MCP در Angular ساخته شد.
طبق گفته کوتین، کار روی این ابزار برای تیم فوقالعاده مفید بود تا بتوانند کیفیت تولید کد را ارزیابی کنند و مهمتر از آن، روی APIها و برخی از ویژگیهای هوش مصنوعی هم بتوانند بهطور مستمر تغییر ایجاد کنند.
او گفت: «هرچه بیشتر روی MCP کار میکردیم، یکی از سوالات مکرر این بود که چگونه این را آزمایش کنیم؟ این ابزار به ما امکان داد تغییراتی که اعمال میکنیم را آزمایش کنیم و مطمئن شویم که مدلهای زبانی بزرگ نتایجی تولید میکنند که انتظار داریم.»
در چند هفته اول استفاده از این ابزار، تیم Angular بسیار هیجانزده بود که بتواند فهرستی از حالتهای شکست و خطاهای رایج را مرور کند.
کوتین گفت:
«ما کمی توسعه مبتنی بر خطاهای ساختگی مدلهای زبانی بزرگ انجام دادیم. برخی حالتهای شکست رایج را دیدیم و توانستیم آنها را اصلاح کنیم و تغییراتی در خود فریمورک ایجاد کنیم تا دیگر آن خطاها تکرار نشوند.»
با این حال، گاهی راحتتر بود که خود فریمورک را طوری تغییر دهند که با مدل زبانی بزرگ بهتر سازگار شود. برای مثال، یکی از تغییراتی که ایجاد کردند، اضافه کردن پشتیبانی بهتر از نام کلاسهای Tailwind و دستورات کاربرپسندتر برای ویژگیهای ARIA بود.
او گفت:
«همانطور که صنعت و این تغییرات تثبیت میشوند و ابزارهای بیشتری از این دست داریم که تصویر کاملتری ارائه میدهند، میتوانیم پشتیبانی بهتری برای همه فراهم کنیم. این یکی از دلایلی است که این ابزار را متنباز کردهایم چون میخواهیم اطمینان حاصل کنیم که در سراسر صنعت وضوح وجود دارد، بتوانیم این موارد را اندازهگیری کنیم و برای برخی از این فرضیات اعداد مشخص تعیین کنیم.»
چگونه Web Codegen Scorer کار میکند؟
Web Codegen Scorer در واقع میتواند بررسی کند که آیا یک برنامه Angular از الگوی API قدیمی استفاده میکند یا نه. اما این تنها یکی از قابلیتهای آن است.
میتوان Web Codegen Scorer را به دو «بخش» تقسیم کرد.
۱- اول، این ابزار با «محیطهایی» ارائه میشود که توسط فریمورکها ایجاد شده و مخصوص خود آنهاست (تا کنون فقط Angular و Solid.js پشتیبانی میشوند).
اساسا این بخش با ارائه یک پرامپت به مدل زبانی بزرگ شما کار میکند که مشخص میکند هوش مصنوعی چه کاری باید انجام دهد.
این پرامپتی است که همراه با محیط Angular ارائه میشود:
«تو یک متخصص در TypeScript، Angular و توسعه برنامههای وب مقیاسپذیر هستی. کدی قابل نگهداری، با عملکرد بالا و دسترسپذیر بنویس که مطابق با بهترین شیوههای Angular و TypeScript باشد.»
این پرامپت شامل فهرستی از بهترین راهکارهای TypeScript و Angular است که تیم گوگل متوجه شده مدلهای زبانی بزرگ معمولا رعایت نمیکنند؛ مانند استفاده از signals برای مدیریت وضعیت یا استفاده همیشگی از کامپوننتهای مستقل به جای NGModuleها. راهنماییهای جداگانهای نیز برای کامپوننتها، مدیریت وضعیت، قالبها و سرویسها ارائه شده است.
۲- بخش دوم Web Codegen Scorer شامل مجموعهای از ارزیابها و سنجشهای هوش مصنوعی است که کد را بررسی میکنند. این مجموعه یک کارت امتیاز به توسعهدهندگان میدهند تا برنامه را بر اساس عوامل مختلف، از جمله دسترسپذیری و امنیت، ارزیابی کنند.
Web Codegen Scorer برای ارزیابی دسترسپذیری، از موتور متنباز تست دسترسپذیری Axe استفاده میکند که برنامهها را بر اساس دستورالعملهای دسترسپذیری محتوای وب بررسی میکند. البته این ابزار میتواند مشکلات امنیتی احتمالی در کد را هم بررسی کند.
اعتبارسنجی چطور انجام میشود؟
کوتین گفت:
«یکی از کارهای جالبی که انجام دادیم، همکاری با یکی از تیمهای امنیتی گوگل بود. مجموعهای از بررسیهای امنیتی اضافه کردیم تا مطمئن شویم کد تولیدشده بهترین شیوههای امنیتی را رعایت میکند. این best practiceها اساسا مواردی هستند که در گوگل آزمایش و اعتبارسنجی شدهاند.»
در این ابزار مکانیزمی برای امتیازدهی وجود دارد که بر اساس انواع مختلف خطاها، به توسعهدهندگان نمرهای بین صفر تا ۱۰۰ میدهد. برای مثال، یک آسیبپذیری امنیتی در کد تولیدشده ۵۰ امتیاز از نمره کم میکند چون مشکل جدی محسوب میشود. مشکلات کماهمیتتر، مانند کدنویسی به روشی که بهترین شیوه نیست ولی از نظر فنی نادرست هم نیست، امتیاز کمتری کسر میکند.
کوتین گفت:
«ثابت شده که این ابزار در واقع بسیار مفید است برای اینکه بتوانیم عددی مشخص کنیم که مدلهای زبانی بزرگ چقدر در تولید کد Angular خوب عمل میکنند. آنچه متوجه شدیم این است که، برای مثال، Gemini در تولید کد Angular واقعا عالی است و حالا میتوانیم برای آن عددی مشخص کنیم.»
او افزود که از آنجا، Angular توانست تولید کد را حتی بیشتر بهبود دهد و مجموعهای از بهترین شیوهها را ایجاد کند.
آنها با یک مجموعه اولیه از بهترین شیوهها شروع کردند که کمی شبیه یک پرامپت سیستمی و نسبتا کوتاه بود. سپس فرم این پرامپت خاص را با اجرای آن در ابزار ارزیابی تکرار کردند و آن را تا جایی بهبود دادند که تولید کد با این دستورالعملها برای مدلهای زبانی بزرگ به نمره ۹۷ تا ۱۰۰ رسید.
علاوه بر نمره کلی، این ابزار نمایی تولیدشده توسط AI از انواع خطاهایی که در تستهای Angular مشاهده شده، ارائه میدهد. نیمه پایینی داشبورد جزئیات بیشتری درباره موفقیت بیلد، وجود خطاها و نوع آنها نشان میدهد.
➕ شما میتوانید برنامههای جداگانه را برای خطاها بررسی کنید. میتوانید اسکرینشاتها را ببینید و ببینید کجا و چرا خطا رخ داده است.
همچنین پرامپتهای دیگری وجود دارند که به توسعهدهندگان کمک میکنند ویژگیهایی به برنامه یا وبسایت خود اضافه کنند. از جمله نمونهها میتوان به فرم کارت اعتباری، تولیدکننده گرادیان CSS و تولیدکننده قدرت رمز عبور اشاره کرد.
| 💡 انگولار همچنین قصد دارد ارزیابی Core Web Vitals را اضافه کند |
Web Codegen Scorer میتواند در IDEهای مجهز به هوش مصنوعی یا در عاملهایی مانند Gemini CLI یا Claude Code استفاده شود تا به تولید کد بهتر کمک کند و دستورالعملهایی به مدلهای زبانی بزرگ بدهد تا کد باکیفیت تولید کنند.
پشتیبانی از فریمورکهای دیگر
کوتین گفت یکی از دلایلی که Angular این ابزار را متنباز کرده، این است که فریمورکهای دیگر هم بتوانند از آن استفاده کنند و پرامپتهای خود برای بهترین شیوهها را ایجاد کنند.
او گفت:
«ما این ابزار را با یک محیط پیشپیکربندیشده ارائه کردهایم که برای Angular تنظیم شده و شما میتوانید محیطهای جدیدی ایجاد کنید که فریمورکهای مختلف مانند Solid.js یا Vue را پیکربندی کنند.»
کاربران اولیه
| 💡 Agrawal گفت:
«Web Codegen Scorer ابزار حیاتیای خواهد بود تا به ما کمک کند پیشرفتهایمان را بررسی و تایید کنیم.» |
تیم Angular دسترسی زودهنگام به این ابزار را در اختیار Dev Agrawal، عضو تیم Solid.js، همکار Solid Start و توسعهدهنده فولاستک قرار داد تا بتواند محیطی ایجاد کند که از این فریمورک پشتیبانی کند.
Agrawal گفت:
«از تیم Angular بسیار سپاسگزاریم که با ما تماس گرفتند و دسترسی زودهنگام به ابزار Web Codegen Scorer را در اختیارمان گذاشتند. ما از آن برای ارزیابی عملکرد مدلهای GPT-5، Claude Sonnet و Gemini در ساخت انواع برنامهها با Solid استفاده کردیم و تاکنون این مدلها با کمی راهنمایی اضافی عملکرد بسیار خوبی داشتهاند.»
او افزود که تیم Solid.js بهطور فعال در حال بررسی بهترین روش برای ارائه زمینه لازم به عاملهای کدنویسی هوش مصنوعی است تا بتوانند برنامههای Solid با عملکرد بالا و دسترسپذیر بسازند و پس از انتشار Solid 2.0 بهطور یکپارچه با APIهای جدید کار کنند.
منبع: thenewstack.io
دیدگاهتان را بنویسید