В команде Angular в Google назревала внутренняя дискуссия: они не могли прийти к единому мнению, какая модель большого языка лучше всего подходит для реализации фреймворка.
«В наших командах был разный опыт использования программ LLM. [large language models] для генерации кода, и у нас были немного разные мнения относительно того, каков уровень качества генерации кода в Angular», — рассказала The New Stack на этой неделе Симона Котин, технический менеджер Google, работающая в команде Angular.
Один из разработчиков Angular принял вызов и написал прототип инструмента, который мог бы проверить, насколько хорошо код Vibe работает с Angular. Этот ранний эксперимент привел к созданию инструмента с открытым исходным кодом, который тестирует сгенерированный LLM код на предмет соображений разработки внешнего интерфейса, таких как следование лучшим практикам для платформы, использование лучших практик доступности и выявление проблем безопасности.
Этот инструмент, получивший название Web Codegen Scorer, предназначен для тестирования всего этого в приложениях с кодированием Vibe.
«Скорость искусственного интеллекта очень заманчива, но код, который он создает, иногда не является кодом, которому можно действительно доверять. Он не всегда готов к использованию, и это главная проблема, с которой мы сегодня сталкиваемся как разработчики», — сказал Котин аудитории на сентябрьском мероприятии Angular + AI Developer. «Этот инструмент похож на фитнес-тест для кода, сгенерированного LLM».
Котин объяснил, как работает Web Codegen Scorer и что он предлагает разработчикам.
Путь искусственного интеллекта на данный момент
Код, сгенерированный ИИ, может быть проблематичным, когда дело касается внешнего интерфейса с его множеством языков, фреймворков и микрофреймворков.
Хотя LLM может создавать код, специфичный для платформы, LLM в целом не обязательно обучены лучшему коду или передовым практикам. Это приводит к проблемам в коде, хотя проблемы различаются в зависимости от LLM и платформы.
Например, Клод любит использовать ссылки в React для отслеживания состояния, что не является хорошей практикой, рассказал The New Stack исполнительный директор React Foundation Сет Вебстер.
По словам Котина, в Angular наблюдались аналогичные проблемы с кодом, сгенерированным GenAI, но в Angular студенты LLM, как правило, используют старые API.
Что бомбардир сделал для Angular
Этот инструмент также появился из-за необходимости протестировать сервер Angular MCP.
«Работа над этим инструментом была невероятно полезной для нас: мы смогли оценить качество генерации кода и, что более важно, иметь возможность выполнять итерации над API и некоторыми функциями ИИ», — сказал Котин TNS. «Поскольку мы все больше и больше работали над MCP, один из постоянных вопросов заключался в том, как нам это протестировать? Этот инструмент позволил нам протестировать изменения, которые мы вносили, и действительно убедиться, что LLM дает те результаты, которые мы ожидаем».
В первые несколько недель использования инструмента команда Angular была очень рада возможности прочитать список распространенных режимов сбоя и ошибок.
«Мы провели небольшую разработку, основанную на галлюцинациях LLM», — сказал Котин. «Мы увидели некоторые распространенные режимы сбоев и смогли их исправить и внести изменения в саму структуру, чтобы больше не видеть эти ошибки».
Однако иногда проще просто изменить структуру, чтобы лучше приспособить ее к программе LLM, добавила она. Например, одним из изменений, которое они внесли, была улучшенная поддержка имен классов, используемых Tailwind, и более эргономичный синтаксис для атрибутов ARIA.
«Поскольку отрасль и эти изменения стабилизируются, и у нас появляется все больше и больше инструментов такого типа, которые рассказывают нам более полную историю, мы сможем иметь лучшую историю поддержки для всех», — сказала она. «Это одна из причин, почему мы открываем исходный код этого инструмента, потому что мы также хотим убедиться, что в нашей отрасли есть ясность, что мы можем измерить эти вещи и присвоить цифры некоторым из этих гипотез».
Как работает средство оценки веб-кода
По словам Котина, Web Codegen Scorer действительно может проверить, включает ли приложение Angular этот старый шаблон API. Но это лишь одна из его функций.
Один из способов представить Web Codegen Scorer — это состоять из двух «частей». Во-первых, он поставляется с «средами», созданными с помощью фреймворков и для них, хотя на данный момент поддерживаются только Angular и Solid.js. По сути, это работает путем предоставления вашему LLM подсказки, в которых описывается, что должен делать GenAI.
Вот подсказка, включенная в среду Angular: «Вы являетесь экспертом в разработке TypeScript, Angular и масштабируемых веб-приложений. Вы пишете поддерживаемый, производительный и доступный код, следуя лучшим практикам Angular и TypeScript».
Системное приглашение с рекомендациями по Angular и TypeScript через GitHub.
В приглашении содержится список лучших практик для TypeScript и Angular, которые, как обнаружила команда Google, LLM обычно не используют, например, использовать сигналы для управления состоянием или всегда использовать автономные компоненты вместо NGModules. Он включает отдельное руководство по компонентам, управлению состоянием, шаблонам и сервисам.
Вторая часть Web Codegen Scorer представляет собой серию оценок оценщиков и искусственного интеллекта, которые оценивают код и предоставляют разработчикам оценочную карту, в которой оценивается приложение на основе ряда факторов, включая доступность и безопасность.
«После того как приложение создано, мы запускаем оценщиков и оцениваем время сборки и ошибки во время выполнения. Они эффективно проверяют, включает ли этот код лучшие практики?» — сказал Котин.
Для оценки доступности Web Codegen Scorer использует механизм тестирования доступности с открытым исходным кодом Axe, который проверяет приложения на соответствие рекомендациям по доступности веб-контента.
Она также может проверять проблемы безопасности, которые могут возникнуть в коде, добавила она.
«Что-то интересное, что мы также сделали, — это сотрудничество с одной из команд безопасности Google, и мы добавили набор проверок безопасности, поэтому теперь мы также проверяем, что генерируемый код включает в себя лучшие практики, связанные с безопасностью, и эти лучшие практики — это, по сути, те, которые были опробованы и проверены всеми сотрудниками Google», — сказала она.
В инструменте имеется механизм оценки, который предоставляет разработчикам оценку от 0 до 100 в зависимости от различных типов ошибок. Например, уязвимость безопасности в сгенерированном коде снижает оценку на 50 баллов, поскольку считается критической проблемой. Менее критичные проблемы, такие как кодирование, которое не является лучшей практикой, но и не является технически неправильным, приведут к удалению меньшего количества точек.
«Мы провели небольшую разработку, основанную на LLM-галлюцинациях. Мы увидели некоторые распространенные режимы сбоя, и мы смогли их исправить и внести изменения в саму структуру, чтобы мы больше не видели этих ошибок».
– Симона Котин, технический менеджер Google в команде Angular.
«Доказано, что это очень полезно для определения числа [to] насколько хороши LLM в генерации кода Angular, — сказал Котин. — Мы обнаружили, что, например, Gemini действительно хорошо генерирует код Angular, и это было здорово, и теперь мы можем оценить это».
После этого Angular смогла еще больше улучшить генерацию кода, создав набор лучших практик, добавила она.
«Мы начали с начального набора лучших практик, который представляет собой некую системную подсказку; он довольно короткий», — сказала она. «Мы повторяли форму этой конкретной подсказки, запуская ее с помощью инструмента evals, а также совершенствовали и улучшали ее, пока генерация кода не достигла оценки от 97 до 100 с помощью этих инструкций для LLM».
В дополнение к общей оценке, инструмент предлагает сгенерированный искусственным интеллектом обзор типов ошибок, обнаруженных в тестах, которые проводил Angular. В нижней половине информационной панели представлена более подробная информация о том, была ли сборка успешной, были ли в ней ошибки и какого рода ошибки.
«Вы можете проверить отдельные приложения на наличие ошибок. Вы можете увидеть скриншоты. Вы можете увидеть, где произошел сбой и почему», — сказал Котин.
Существуют также другие подсказки, которые помогают разработчикам добавлять функции в свое приложение или сайт. Примеры включают форму кредитной карты, генератор CSS-градиентов и генератор надежности пароля.
По словам Котина, Angular также планирует добавить оценку Core Web Vitals.
По словам Котина, Web Codegen Scorer можно использовать в вашей IDE с поддержкой искусственного интеллекта или в таком агенте, как Gemini CLI или Claude Code, чтобы улучшить генерацию кода и дать инструкции для LLM по созданию хорошего кода.
Поддержка других фреймворков
По словам Котина, одна из причин, по которой Angular открыла этот инструмент, заключается в том, что другие платформы могут использовать его для создания собственных подсказок для лучших практик.
«Мы поставили его с предварительно настроенной средой, настроенной для Angular, и вы можете создавать и создавать новые среды, которые будут настраивать различные платформы, такие как Solid.js или Vue», — сказала она.
Команда Angular предоставила члену команды Solid.js Деву Агравалу, участнику Solid Start и полнофункциональному разработчику, ранний доступ к инструменту, чтобы он мог создать среду, поддерживающую платформу.
«Мы очень благодарны команде Angular за то, что они связались с нами и предоставили нам ранний доступ к инструменту Web Codegen Scorer», — сообщил Агравал TNS по электронной почте. «Мы использовали его для тестирования производительности моделей GPT 5, Claude Sonnet, а также моделей Gemini при создании различных приложений с использованием Solid, и на данный момент эти модели отлично справляются со своей задачей лишь с небольшим дополнительным руководством».
Команда Solid.js активно исследует, как лучше всего предоставить агентам ИИ-кодирования контекст, необходимый им для создания производительных и доступных приложений Solid, а также для беспрепятственной работы с новыми API-интерфейсами Solid 2.0 после его выпуска, добавил он.
«Web Codegen Scorer станет важным инструментом, который поможет нам проверить наши улучшения», — сказал Агравал.
ТЕНДЕНЦИОННЫЕ ИСТОРИИ YOUTUBE.COM/THENEWSTACK Технологии развиваются быстро, не пропустите ни одной серии. Подпишитесь на наш канал YouTube, чтобы смотреть все наши подкасты, интервью, демонстрации и многое другое. ПОДПИСАТЬСЯ Группа, созданная в Sketch. Лорейн Лоусон — опытный репортер в области технологий, которая в течение 25 лет освещала технологические вопросы, от интеграции данных до безопасности. До прихода в The New Stack она работала редактором сайта банковских технологий Bank Automation News. У нее есть… Подробнее от Лорейн Лоусон.
