Сравнение локальных нейросетевых моделей в разрезе генерации HTML кода

В этой статье рассмотрим возможности небольших моделей, доступных в рамках платформы Ollama.

Малые модели (1-3 миллиарда параметров)

Начнем тест с самых доступных моделей, запускать которые возможно на слабых машинах, в примере инференс выполнялся на ноутбуке с 8ГБ ОЗУ.

Для теста таких моделей запрос использовался самого общего формата, без дополнительных уточнений:

{
'role': 'system',
'content': (
    "Ты — профессиональный веб-разработчик. "
    "Пиши код согласно стандартам."
    "Верстка должна быть кроссбраузерной и адекватно отображаться на мобильных устройствах."
)
},
{
'role': 'user',
'content': "Напиши html-код главной страницы автосервиса с формой обратной связи."
}

llama3.2:3b

Время выполнения: 00:02:45
Токены: 1171
Производительность: 7.09 ток/сек

В целом сгененирован частично валидный код, структурирован понятно, в код добавлены комментарии обозначающие начало и коне секций. Из замечаний, в код также добавлена ссылка на скрипт script.js и картинки, хотя код самого скрипта и сами. изображения не предоставлены. Также наблюдается некоторая проблема со смесью латиницы и кириллицы. Визуально все весьма аскетично, при этом респонсивность минимальная присутствует, ниже скриншот как это выглядит в браузере:

И ссылка на html-файл со сгенерированным кодом: llama3.2_3b.html

gemma2:2b

Время выполнения: 00:02:05
Токены: 974
Производительность: 7.79 ток/сек

К структуре в целом вопросов нет — минимальная и корректная, только стили модель не предоставила, хотя ссылка на абстрактный style.css в коде присутствует:

Файл со сгенерированным кодом: gemma2_2b.html

qwen2.5:3b

Время выполнения: 00:00:53
Токены: 506
Производительность: 9.38 ток/сек

Минимально задача выполнена — код валидный и структурированный, базовые стили добавлены. Модель не добавила каких-либо сопутствующих блоков, по сути только заголовок и форма обратной связи:

Файл со сгенерированным кодом: qwen2.5_3b

qwen3:1.7b

Время выполнения: 00:02:32
Токены: 1670
Производительность: 10.98 ток/сек

Здесь результат субъективно хуже предыдущей модели, есть проблемы с отступами и контент максимально минималистичный, хотя css стили проработаны лучше чем у всех малых моделей из теста.

Файл со сгенерированным кодом: qwen3_1.7b.html

deepseek-r1:1.5b

Время выполнения: 00:01:48
Токены: 1585
Производительность: 14.63 ток/сек

По коду вроде-бы все выглядит на первый взгляд неплохо, объем выдан относительно большой, есть стили. Только незакрытые теги ломают всю верстку и также отступы проработаны ужасно. Также страница на английском, однозначно вариант не для продакшена.

Файл со сгенерированным кодом: deepseek-r1_1.5b.html

Крупные модели (14-26 миллиарда параметров)

Более серьезные модели, которые можно запускать локально, для работы с ними использовался ПК с 24ГБ ОЗУ.

Проверив в тестовом режиме базовый запрос по аналогии с малыми моделями — вывод результат сравним и кардинально не отличается в лучшую сторону, поэтому для проверки возможностей подобран расширенный запрос, который выглядит следующим образом:

{
    'role': 'system',
    'content': (
        "Ты — профессиональный веб-разработчик. "
        "Пиши код согласно стандартам. "
        "Верстка должна быть кроссбраузерной и адекватно отображаться на мобильных устройствах."
        "При написании html-кода добавляй стили в блоке <style> в head, чтобы получившаяся страница выглядела презентабельно."
    )
},
{
    'role': 'user',
    'content': "Напиши html-код главной страницы автосервиса: на нем должно быть горизонтальное меню, баннер (должен быть анимирован на js), блок с новостями, информация о компании, форма обратной связи, контакты."
}

Дополнительно указаны опции пенальти для уменьшения вероятности зацикливания реализации:

'presence_penalty': 1.5,
'repeat_penalty': 1.1

qwen2.5-coder:14b

Время выполнения: 00:02:48
Токены: 1476
Производительность: 8.76 ток/сек

Все необходимые блоки присутствуют, изображение на баннер внешней ссылкой — невалидное, спишем на ненадежный источник, модель старалась 🙂

Стили минималистичные (как и все модели из сравнения, если в промпте явно не указано — визуал генерируется самый простой), javascript простой добавлен, работает.

Файл со сгенерированным кодом: qwen2.5-coder_14b.html

deepseek-coder-v2:16b

Время выполнения: 00:00:33
Токены: 1403
Производительность: 41.64 ток/сек

Блочная структура проработана хорошо, анимация баннера выбрана очень странно (заливка другим цветом при наведении курсора), изображеняи в баннер не добавлены.

Файл со сгенерированным кодом: deepseek-coder-v2_16b.html

llama3.1:8b

Время выполнения: 00:01:10
Токены: 1200
Производительность: 16.92 ток/сек

Верстка получилось кривоватой, изображение в баннер не добавлено, при этом добавлен логотип с битой ссылкой, неоправданно подключена библиотека jquery при том что анимация элементарная и не совсем очевидная.

Файл со сгенерированным кодом: llama3.1_8b.html

codegemma:7b

Время выполнения: 00:00:11
Токены: 190
Производительность: 17.02 ток/сек

Невалидный html, стили прописаны обособленно от основного кода, явный неуд.

Файл со сгенерированным кодом: codegemma_7b.html

devstral:24b

Время выполнения: 00:02:33
Токены: 951
Производительность: 6.21 ток/сек

Самая крупная локальная модель в выборке, при этом результат кардинально от среднего по другим моделям не отличается. Все блоки присутствуют, но текстового наполнения нет, ссылки на рисунки невалидные (это уже привычно), анимация есть и работает.

Файл со сгенерированным кодом: devstral_24b.html

Референсные модели

Для сравнения пример реализации задачи с помощью некоторых популярных моделей доступных онлайн.

Промт максимально расписан:

'role': 'system',
    'content': (
        "Ты — ведущий фронтенд-разработчик и UI/UX дизайнер. "
        "Ты пишешь современный, валидный HTML5 и CSS3 код. "
        "Вся верстка должна быть строго адаптивной (mobile-first), кроссбраузерной и соответствовать стандартам семантики. "
        "Стили пиши исключительно внутри тега <style> в секции <head>."
    )
},
{
    'role': 'user',
    'content': (
        "Напиши полноценный HTML-код главной страницы современного премиального автосервиса. "
        "Сайт должен выглядеть дорого, чисто и профессионально. "
        "Используй темную или брутальную цветовую палитру (например: глубокий графитовый/темно-серый фон, белый текст и яркие неоновые акценты — автосервисный оранжевый, спортивный красный или лаймовый для кнопок и важных элементов). "
        "Добавь красивые CSS-переходы (transitions) при наведении на кнопки, ссылки и карточки.\n\n"
        
        "Обязательно реализуй следующие блоки с детальной проработкой:\n"
        "1. Шапка (Header): фиксированная (sticky), с логотипом, контактами, кнопкой 'Записаться' и адаптивным меню.\n"
        "2. Главный баннер (Hero Section): на весь экран (min-height: 80vh), с фоновым градиентом, крупным продающим заголовком, подзаголовком и двумя кнопками действия. Напиши JS-скрипт для плавной смены фонового изображения или текста (слайдер/анимация) внутри баннера.\n"
        "3. Блок услуг (Services): сетка CSS Grid из 4-6 карточек с псевдоиконками, описанием цен 'от...' и эффектом приподнимания карточки при hover.\n"
        "4. О компании (About): двухколоночный grid (текст с преимуществами + заглушка под изображение), оформленный аккуратными отступами.\n"
        "5. Новости/Акции (News): 3 карточки с датами, цепляющими заголовками и кнопками 'Подробнее'.\n"
        "6. Форма обратной связи: стильная минималистичная форма (Имя, Телефон, Выбор услуги) с темным фоном, контрастными инпутами и валидацией полей.\n"
        "7. Подвал (Footer): 4 колонки (описание, ссылки, услуги, контакты и карта-заглушка).\n\n"
        
        "Используй качественные шрифты из Google Fonts (например, Montserrat или Inter), подключив их через @import. "
        "Заполни страницу реальным текстом (названия услуг, фейковые телефоны), избегай 'Lorem Ipsum'."
    )
}

Google Gemini

Использовался через поиск Google, из-за лимита на размер ответа пришлось вручную просить разбить код на две генерации с цем модель справилась, только пришлось вручную из них собрать результат.

Разница с локальными моделями кардинальная — проработка каждого элемента на порядок выше.

Файл со сгенерированным кодом: google.html

Yandex GPT

Использовался через поиск Яндекс, из-за особенностей интерфейса на длинных ответах (как в данном случае) необходимо постоянно скроллить вручную вниз, что не очень удобно, зато выдал весь код в одном сообщении в отличие от Google. Результат также отличный.

Файл со сгенерированным кодом: yandex.html

Также для сравнения на этом же промпте результаты лидеров предыдущих генераций из крупных локальных моделей:

devstral_24b

За счет темных цветов вроде бы выглядит приличнее, но при детальном осмотре результат от более простого варианта промпта кардинально не отличается.

Файл со сгенерированным кодом: devstral_24b_2.html

qwen2.5-coder_14b

Тут вроде бы чуть получше проработка, тем не менее огрехи встречаются, и результат не идет ни в какое сравнение с референсными моделями от Google и Yandex.

Файл со сгенерированным кодом: qwen2.5-coder_14b_2.html

Выводы

На данный момент, к сожалению, можно констатировать, что локальные модели, предназначенные для бытовых устройств средней производительности (до 24b параметров), неспособны стабильно генерировать качественный html-код. Во всех проведенных тестах были обнаружены огрехи и замечания, которые недопустимы на профессиональном уровне. Разница между большими и малыми локальными моделями есть, но ни у тех ни у других результат не соответствует ожиданиям. При этом референсные модели дают вполне качественный результат, приемлемый на продакшене.