htmLLM-124M v2: как запустить модель для автодополнения HTML на обычной видеокарте

Ваша видеокарта только что научилась верстать

Серьезно. Забудьте про копирование шаблонов с Stack Overflow. htmLLM-124M v2 - это специализированная нейросеть, которая генерирует HTML и Bootstrap код по описанию на естественном языке. И да, она запускается на обычной видеокарте, даже не самой мощной.

1Что умеет htmLLM-124M v2

Основная фишка - автодополнение HTML. Начинаете писать разметку, модель подсказывает продолжение. Но это не просто подсказки, а целые блоки с учетом контекста.

• Генерация Bootstrap компонентов: навигационные панели, карточки, формы.
• Автодополнение CSS классов, особенно для утилитарных фреймворков.
• Преобразование описания на английском в готовую разметку.
• Исправление невалидного HTML (иногда, не всегда).

Вторая версия исправила главную проблему первой - тенденцию генерировать бесконечные div-ы. Теперь код стал чище и чаще проходит валидацию.

2Чем она лучше альтернатив

Да, есть htmLLM-50M - младшая сестра. Но v2 обучена на более свежих данных и дает более точные результаты. К тому же, она все еще достаточно мала для локального запуска.

А еще есть гиганты вроде CodeLlama-13B. Но попробуйте запустить 13-миллиардную модель на вашей RTX 3060. Правильно, не получится. А htmLLM-124M v2 - получится.

Для тех, у кого слабое железо, у нас есть отдельный гайд - как запустить нейросети на ноутбуке с 4 ГБ VRAM. Там те же принципы.

3Примеры того, что выдает модель

Попросим ее создать навигационную панель Bootstrap с темной темой и выпадающим меню.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Мой сайт</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Главная</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
            Услуги
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Веб-разработка</a></li>
            <li><a class="dropdown-item" href="#">Дизайн</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Это не идеально (не хватает некоторых атрибутов), но для начала верстки - более чем достаточно. Модель сгенерировала это за 3 секунды на GTX 1660.

4Как запустить у себя

Веса модели доступны на HuggingFace. Для запуска нужен Python 3.10+ и PyTorch 2.3+.

# Клонируем репозиторий с кодом
git clone https://github.com/author/htmLLM
cd htmLLM

# Устанавливаем зависимости
pip install -r requirements.txt

# Скачиваем веса модели с HuggingFace
python download_weights.py --model htmLLM-124M-v2

# Запускаем инференс
python generate.py --prompt "Создай кнопку Bootstrap с иконкой"

Для интеграции в IDE, например VS Code, нужно написать простой плагин, который будет отправлять текущий код в модель и получать подсказки. Но это тема для отдельной статьи.

5Кому это вообще нужно

Вот три типа людей, которые выжмут из htmLLM-124M v2 максимум:

1. Веб-разработчики-одиночки, которые устали верстать однотипные компоненты. Модель ускорит работу в разы.
2. Преподаватели HTML/CSS, которые хотят показывать студентам примеры кода по описанию.
3. Энтузиасты локального ИИ, которые хотят иметь специализированный инструмент без облачных зависимостей.

А вот если вам нужна генерация сложного JavaScript или backend-кода - это не ваш выбор. Модель заточена именно под фронтенд, под Bootstrap и похожие фреймворки.

И да, она иногда генерирует кривой код. Но кто не генерирует? По крайней мере, вы можете сразу исправить ошибки, не отправляя данные в облако.

Что дальше? Автор обещает версию с поддержкой Tailwind CSS. А пока - качайте веса, запускайте и забудьте про рутинную верстку.

Подписаться на канал