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

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

Уяви стажера, який вміє лише читати й писати. Текст - будь ласка, хоч роман. А ти йому скриншот: «ось, дивись, кнопка зʼїхала». А він не бачить. Зовсім. Для нього твій скриншот - просто незрозумілий файл, як для тебе інструкція давньогрецькою.

Тепер інший стажер. Читає, дивиться на картинки, слухає голос, може глянути відео. І сам начерк намалює, якщо попросиш. Ось це й є мультимодальна модель.

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

Навіщо мультимодальність вайбкодеру

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

Як було раніше? «Там кнопка синя, заокруглена, трохи лівіше центру, під нею дрібний сірий текст…» - і все одно модель зрозуміє по-своєму. А як тепер? Кинув скриншот - і все.

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

Скриншот помилки економить десять хвилин листування. Ти не переказуєш стек-трейс по памʼяті - ти його показуєш, і модель читає прямо з картинки.

Вхід і вихід: як працює мультимодальна модель

Запамʼятай одну річ - і половина плутанини зникне. У мультимодальності дві сторони, і змішувати їх не можна:

• Розуміння (вхід). Що модель уміє прийняти й осмислити: текст, картинку, аудіо, відео.
• Генерація (вихід). Що модель уміє створити: текст, картинку, голос, інколи відео.

Це різні навички. Модель може чудово бачити картинки й при цьому зовсім не вміти їх малювати. Буває й навпаки: генератор картинок, який слабко ловить текстові нюанси. Тож фраза «модель мультимодальна» сама по собі нічого не каже. Питай конкретно: за якими каналами вхід, за якими вихід?

Звідки в моделі «очі» та «вуха»

Зовсім на пальцях. Усередині модель живе у світі чисел. Щоб вона «побачила» картинку, зображення спершу перетворюють на набір чисел, які лежать у тому самому просторі, що й слова. Грубо кажучи, картинка і фраза описуються однією внутрішньою мовою. Тому модель і повʼязує слово «кіт» із фоткою кота - для неї це близькі точки в одному просторі смислів.

Зі звуком і відео те саме: їх ріжуть на шматочки й переводять у числа. Відео тут найважчий канал - це багато кадрів плюс звукова доріжка. Звідси й розплата: обробляється довше й дорожче за текст.

Як зверстати екран за скриншотом: приклад

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

Зроби скриншот екрана, який хочеш повторити, або сфоткай начерк від руки.
Відкрий мультимодальну модель, яка вміє приймати зображення на вхід - це її здатність бачити.
Прикріпи картинку й опиши задачу словами: зверстай це на HTML і CSS, адаптивно, кольори візьми з картинки.
Отримай код, встав у проєкт, запусти. Щось зʼїхало - знову прикріпи скриншот результату й скажи, що поправити.
Потрібна картинка-заглушка замість порожнього блоку - попроси модель згенерувати зображення під опис і поклади його в проєкт.

Помітив? На кроці 2 ти перевірив вхід (розуміє картинку), а на кроці 5 тобі знадобився вихід (малює картинку). Це можуть бути навіть різні моделі - і це нормально.

Щоб скрін у код заходив з першого разу, не пиши «зверстай як на картинці». Дай моделі рамки. Ось шаблон - скопіюй і підстав під себе:

Ось скриншот екрана. Зверстай схожий блок.
Що важливо:

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

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

Часті помилки з мультимодальними моделями

• Вважати будь-яку модель всеїдною. Не кожна модель бачить картинки й тим паче малює їх. Спершу перевір її входи та виходи, потім будуй процес.
• Плутати розуміння й генерацію. «Розбирає скриншоти» не означає «генерує зображення». Це дві різні навички, і часто вони живуть у різних моделях.
• Вантажити гігантське відео цілком. Відео - найважчий канал. Виріж шматок секунд на десять із самим багом, а не надсилай пів години запису.
• Описувати словами те, що простіше показати. Є скрін - прикріпи скрін. Переказуючи картинку текстом, ти втрачаєш головну перевагу.
• Завантажувати чутливі дані. На скриншоті легко проґавити закритий токен, пароль чи дані клієнта. Замазуй перед надсиланням.
• Чекати піксель-у-піксель. Генерація картинок і верстка за скріном дають близький результат, а не точну копію. Це чернетка, яку ти доводиш руками.