Мультимодальные модели: скрин в код, голос, картинки, видео

Что такое мультимодальность простыми словами

Представь стажёра, который умеет только читать и писать. Текст - пожалуйста, хоть роман. А ты ему скриншот: «вот, смотри, кнопка съехала». А он не видит. Совсем. Для него твой скриншот - просто непонятный файл, как для тебя инструкция на древнегреческом.

Теперь другой стажёр. Читает, смотрит на картинки, слушает голос, может глянуть видео. И сам набросок нарисует, если попросишь. Вот это и есть мультимодальная модель.

Слово страшное, смысл простой. Модальность Модальность - это канал, по которому в модель попадает или из неё выходит информация: текст, изображение, аудио, видео. Одна модальность - один канал восприятия. - это канал восприятия. Текст - один канал, картинка - другой, звук - третий, видео - четвёртый (по сути картинки плюс звук во времени). «Мульти» значит «много». Мультимодальная модель тянет несколько каналов сразу, а не только буквы.

Зачем мультимодальность вайбкодеру

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

Как было раньше? «Там кнопка синяя, скруглённая, чуть левее центра, под ней мелкий серый текст…» - и всё равно модель поймёт по-своему. А как теперь? Кинул скриншот - и всё.

• Скрин в код. Показываешь макет или фото наброска от руки - получаешь HTML и CSS или готовый компонент. Дизайн словами не описываешь.
• Голос вместо клавиатуры. Надиктовал задачу на ходу - модель распознала речь и ответила. Руки свободны.
• Картинки на заказ. Нужна заглушка, иконка, баннер для лендинга - модель рисует прямо под запрос.
• Видео и скрины с багом. Записал экран, где всё ломается, - модель смотрит и говорит, в чём дело. Быстрее любого описания.

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

Вход и выход: как работает мультимодальная модель

Запомни одну вещь - и половина путаницы исчезнет. У мультимодальности две стороны, и смешивать их нельзя:

• Понимание (вход). Что модель умеет принять и осмыслить: текст, картинку, аудио, видео.
• Генерация (выход). Что модель умеет создать: текст, картинку, голос, иногда видео.

Это разные навыки. Модель может прекрасно видеть картинки и при этом совсем не уметь их рисовать. Бывает и наоборот: генератор картинок, который слабо ловит текстовые нюансы. Так что фраза «модель мультимодальная» сама по себе ничего не говорит. Спрашивай конкретно: по каким каналам вход, по каким выход?

Откуда у модели «глаза» и «уши»

Совсем на пальцах. Внутри модель живёт в мире чисел. Чтобы она «увидела» картинку, изображение сначала превращают в набор чисел, которые лежат в том же пространстве, что и слова. Грубо говоря, картинка и фраза описываются на одном внутреннем языке. Поэтому модель и связывает слово «кот» с фоткой кота - для неё это близкие точки в одном пространстве смыслов.

Со звуком и видео то же самое: их режут на кусочки и переводят в числа. Видео тут самый тяжёлый канал - это много кадров плюс звуковая дорожка. Отсюда и расплата: видео обрабатывается дольше и обходится дороже текста.

Как сверстать экран по скриншоту: пример

Покажу типичный кейс вайбкодера от начала до конца. Задача простая: есть скрин чужого экрана, хочешь похожий у себя.

Сделай скриншот экрана, который хочешь повторить, или сфоткай набросок от руки.
Открой мультимодальную модель, которая умеет принимать изображения на вход - это её способность видеть.
Прикрепи картинку и опиши задачу словами: свёрстай это на HTML и CSS, адаптивно, цвета возьми с картинки.
Получи код, вставь в проект, запусти. Что-то съехало - снова прикрепи скриншот результата и скажи, что поправить.
Нужна картинка-заглушка вместо пустого блока - попроси модель сгенерировать изображение под описание и положи его в проект.

Заметил? На шаге 2 ты проверил вход (понимает картинку), а на шаге 5 тебе понадобился выход (рисует картинку). Это могут быть даже разные модели - и это нормально.

Чтобы «скрин в код» срабатывал с первого раза, не пиши «свёрстай как на картинке». Дай модели рамки. Вот шаблон - скопируй и подставь под себя:

Вот скриншот экрана. Свёрстай похожий блок.
Что важно:

стек: чистый HTML и CSS, без фреймворков;
адаптивно: на телефоне всё в одну колонку;
цвета, отступы и шрифты бери максимально близко к картинке;
семантические теги, понятные имена классов.
Сначала коротко перечисли, какие элементы ты видишь на скрине, и только потом выдай код одним файлом.

Маленькая хитрость спрятана в последней строке. Просьба сначала описать, что модель видит, ловит недопонимание до того, как она напишет код. Чего-то в списке нет или что-то лишнее? Правишь сразу, а не отлаживаешь потом готовую вёрстку.

Частые ошибки с мультимодальными моделями

• Считать любую модель всеядной. Не каждая модель видит картинки и тем более рисует их. Сначала проверь её входы и выходы, потом строй процесс.
• Путать понимание и генерацию. «Разбирает скриншоты» не значит «генерирует изображения». Это два разных навыка, и часто они живут в разных моделях.
• Грузить гигантское видео целиком. Видео - самый тяжёлый канал. Вырежи кусок секунд на десять с самим багом, а не присылай получасовую запись.
• Описывать словами то, что проще показать. Есть скрин - прикрепи скрин. Пересказывая картинку текстом, ты теряешь главное преимущество.
• Загружать чувствительные данные. На скриншоте легко проворонить закрытый токен, пароль или данные клиента. Замазывай перед отправкой.
• Ждать совпадения пиксель в пиксель. Генерация картинок и вёрстка по скрину дают близкий результат, а не точную копию. Это черновик, который ты доводишь руками.