JanusCoder и SVG для ИИ: визуальная самопроверка кода | AiManual
AiManual Logo Ai / Manual.
02 Янв 2026 • Инструмент

JanusCoder и SVG для ИИ: как мультимодальные модели учатся видеть и исправлять созданный код

Как мультимодальный ИИ JanusCoder использует SVG для анализа и исправления сгенерированного кода. Технология визуальной самопроверки интерфейсов.

Код, который видит себя

Представьте, что вы попросили ИИ нарисовать кнопку. Он пишет HTML и CSS. Вы запускаете код. Получаете серый прямоугольник. Где обещанная анимация? Где тень? Традиционный ИИ-помощник просто извинится и предложит попробовать снова. JanusCoder поступает иначе. Он смотрит на результат своей работы. И исправляет ошибки.

💡
Если вы пропустили нашу первую статью о JanusCoder, вот базовое объяснение того, как эта мультимодальная модель работает. Коротко: она генерирует код, запускает его, делает скриншот и сравнивает с ожиданием.

Зачем ИИ вообще смотреть на код?

Текстовые LLM слепы. Они генерируют код по описанию, но не понимают, как этот код выглядит в браузере. Это как писать рецепт, никогда не пробуя блюдо. Результат предсказуем: многообещающие описания, разочаровывающая реализация.

JanusCoder ломает эту парадигму. Его пайплайн выглядит так:

  1. Принимает текстовый запрос («красная кнопка с анимацией при наведении»)
  2. Генерирует HTML/CSS/JavaScript
  3. Запускает код в изолированном окружении (headless браузер)
  4. Делает скриншот результата
  5. Анализирует скриншот через vision-модель
  6. Сравнивает визуальный результат с исходным запросом
  7. Если не совпадает — возвращается к шагу 2 с правками

Проблема со скриншотами: они слишком «тяжелые»

Первые версии JanusCoder использовали PNG-скриншоты. Работало, но медленно. Картинка — это тысячи пикселей, каждый со своим цветом. Vision-модели тратят кучу времени на обработку этих данных. И главное — модель видит только конечный результат, а не структуру интерфейса.

Здесь появляется SVG. Вместо растрового изображения JanusCoder теперь генерирует векторное представление интерфейса.

SVG (Scalable Vector Graphics) — это не картинка в привычном смысле. Это XML-документ, который описывает фигуры, текст, цвета. Браузер рисует его. Для ИИ это золотая жила: структурированные данные вместо пиксельного шума.

1 Как JanusCoder превращает код в SVG

Вот упрощенный пример того, что происходит под капотом. Допустим, ИИ сгенерировал такой код:

<!DOCTYPE html>
<html>
<head>
  <style>
    .button {
      background: red;
      padding: 12px 24px;
      border-radius: 8px;
      color: white;
      border: none;
    }
  </style>
</head>
<body>
  <button class="button">Click me</button>
</body>
</html>

Вместо скриншота система генерирует SVG примерно такого вида:

<svg width="800" height="600">
  <rect x="350" y="250" width="100" height="40" 
        rx="8" fill="#ff0000" class="button-element"/>
  <text x="400" y="275" text-anchor="middle" 
        fill="white" font-size="14">Click me</text>
</svg>

Видите разницу? В SVG явно указано: есть прямоугольник с закругленными углами (rx="8"), красной заливкой, внутри текст. Vision-модели не нужно гадать, где заканчивается кнопка и начинается фон. Данные уже структурированы.

Что ИИ видит в SVG, чего не видит в PNG?

Аспект PNG (старый подход) SVG (новый подход)
Цвет кнопки Модель анализирует пиксели, может ошибиться с оттенком Явно указан fill="#ff0000" — точно красный
Закругленные углы Нужно распознавать визуальную форму Явно указано rx="8" — радиус закругления
Текст внутри OCR может ошибиться с распознаванием Текст прямо в теге <text> — «Click me»
Иерархия элементов Плоское изображение, структуру нужно восстанавливать DOM-подобная структура в XML

Пример исправления: когда ИИ сам находит баг

Допустим, мы просим: «Кнопка, которая меняет цвет при наведении». JanusCoder генерирует код, но забывает про псевдокласс :hover. Он запускает код, получает SVG, анализирует его.

Vision-модель видит: есть кнопка, но в SVG нет описания состояний. Никакого изменения цвета. Модель понимает — запрос не выполнен. Она возвращается к коду и добавляет:

.button:hover {
  background: blue;
}

Запускает снова. Теперь в SVG появляется описание интерактивного поведения (в расширенном формате). Модель видит — теперь есть hover-состояние. Цикл завершен.

💡
Этот подход напоминает GUI-агентов, которые учатся взаимодействовать с интерфейсами. Только здесь агент учится на собственных ошибках в коде.

Альтернативы? Их почти нет

На рынке полно ИИ-кодогенераторов. GitHub Copilot, ChatGPT, Claude. Все они слепы. Они могут написать идеальный с точки зрения синтаксиса код, который визуально будет полным провалом.

Есть исследовательские проекты вроде Multi-modal RAG, которые работают с визуальной информацией. Но они не заточены под цикл «сгенерировал-проверил-исправил».

JanusCoder уникален именно этой связкой: мультимодальность + автономное тестирование + итеративное улучшение. Это не просто помощник. Это автономный агент, который доводит задачу до конца.

Где эта технология взорвется в первую очередь?

  • Прототипирование интерфейсов. Дизайнер описывает макет текстом, получает работающий прототип через 30 секунд. ИИ сам исправляет расхождения.
  • Тестирование UI. Автоматическая проверка визуальной регрессии. ИИ видит, что кнопка «съехала» после обновления кода.
  • Обучение фронтенду. Студент пишет код, ИИ сразу показывает, как он выглядит, и предлагает исправления.
  • Генерация тем оформления. «Сделай темную тему для этого интерфейса» — ИИ меняет цвета, проверяет контрастность, исправляет недочеты.

Подводные камни (потому что без них не бывает)

SVG — не панацея. Динамические интерфейсы с анимациями, canvas, WebGL — все это плохо ложится в статичное векторное представление. JanusCoder пока специализируется на сравнительно простых UI-компонентах.

Еще проблема: SVG описывает то, что нарисовано, а не то, как это должно себя вести. Кнопка может выглядеть правильно, но не иметь обработчика клика. ИИ это не увидит.

Самый неприятный баг: ИИ может «обмануть» сам себя. Сгенерировал код, получил SVG, увидел, что все ок. Но в реальном браузере у пользователя сломается из-за разницы в рендеринге. SVG и реальный рендеринг — не всегда одно и то же.

Что дальше? ИИ, который видит как человек

Текущая реализация с SVG — промежуточный этап. Идеальный сценарий: ИИ запускает код в реальном браузере, взаимодействует с интерфейсом как пользователь (кликает, скроллит, вводит текст), и на основе этого опыта улучшает код.

Представьте: вы просите «форму входа с валидацией». ИИ не только рисует поля, но и тестирует их — вводит неправильный email, проверяет, появляется ли сообщение об ошибке, исправляет код, если валидация не работает.

Это уже не генерация кода. Это полноценная разработка с тестированием. И SVG здесь — лишь первый шаг к тому, чтобы ИИ по-настоящему понимал, что он создает.

Пока другие обсуждают, заменят ли ИИ программистов, JanusCoder тихо создает ИИ, который программирует, тестирует и исправляет сам себя. И это куда страшнее (или интереснее — смотря с какой стороны посмотреть).

←
На главную