ML своими руками на JS: модель, которая отличает хорошую верстку от плохой

Даже Opus, обвешанный скиллами, командами и правилами дизайн-системы, реализует макет не в pixel perfect. Корень проблемы в том, что скриншотный тест говорит только «картинки не совпали». А что именно — непонятно.

На этой задаче мы шаг за шагом войдем в машинное обучение, даже если вы никогда его не трогали. На JavaScript соберем маленькую нейросеть, которая смотрит на эталон и рендер компонента и называет, какие CSS-свойства разошлись: цвет, жирность, межбуквенный интервал, рамка. Без формул, на трафаретах, лампочках и рыбалке разберем, как сеть видит картинку, как учится и откуда берёт данные. Обучим ее на TensorFlow.js прямо в headless Chromium и встроим Playwright-тест. А главное — научимся не обманывать себя цифрами: покажу, какие метрики нам нужны, как интерпретировать их показания и как на них влиять.

Уйдете с пониманием, как устроено обучение нейросетей, и с готовым рецептом, как применить его в своем фронтенде.