Мультимодальность (мультимодальный — работающий с…

Модуль: Технические инструменты | Время: ~20 мин теории + 30 мин практики

Суть урока

До сих пор Claude работал только с текстом — как эксперт который читает, но не смотрит. Мультимодальность — это дать ему зрение. Теперь ты можешь показать скриншот интерфейса и сказать "что здесь не так?", закинуть PDF счёт и попросить "вытащи все суммы в JSON", сфотографировать рукописную схему и получить код. Claude Code "видит" изображения и "читает" документы — не через OCR конвертацию, а напрямую, как мультимодальная модель.

Ключевые концепции

Vision — Claude анализирует изображения через API (эй-пи-ай — интерфейс программирования): base64, URL или Files API
PDF поддержка — Read tool в Claude Code обрабатывает PDF автоматически (с поддержкой диапазонов страниц)
Поддерживаемые форматы — JPEG, PNG, GIF, WebP для картинок; PDF для документов
Формула токенов (токен — единица текста для AI) — изображение режется на блоки 28x28 px, каждый блок = 1 токен: ⌈ширина/28⌉ × ⌈высота/28⌉ (из официальной документации)
Лимиты (на октябрь 2026) — максимум 10 MB на файл через API напрямую (5 MB на Amazon Bedrock и Google Cloud, 10 MB на claude.ai), до 8000x8000 px, до 600 изображений в одном запросе (100 для моделей с окном 200K, например Haiku 4.5)
Нативное разрешение — максимум 1568 px по длинной стороне; 2576 px для моделей Claude 4.7 и новее (Opus 5.5, Sonnet 5.5, Fable 5.1)

Теория

Как Claude видит изображения

🎨 Образ: мультимодальность — это дать слепому эксперту зрение. До этого он всё знал, но только на ощупь. Теперь ты показываешь ему экран — и он мгновенно видит что не так с интерфейсом, какие цифры в PDF, как выглядит схема.

Claude не получает картинку как пиксельную матрицу — он получает её как encoded данные и обрабатывает в своём мультимодальном пространстве. Это значит он может:

Читать текст на скриншотах, фото документов, рукописях
Анализировать диаграммы, графики, схемы
Описывать UI: "кнопка Отправить находится справа внизу, форма содержит 3 поля"
Находить ошибки: сравнивать дизайн-макет с реализацией
Извлекать структурированные данные из таблиц и форм

Что Claude НЕ может с изображениями (из документации Anthropic):

Генерировать изображения — Claude только анализирует, не создаёт и не редактирует
Идентифицировать людей — Claude не называет людей на фото (ограничение Acceptable Use Policy)
Точно определять пространственные отношения — может ошибаться с аналоговыми часами или позициями шахмат
Гарантировать точный подсчёт объектов — даёт приблизительные числа
Определять AI-generated изображения — не отличает фейк от реального
Анализировать видео — только статичные кадры, анимации GIF — только первый кадр

Мультимодальность в Claude Code

В Claude Code работа с изображениями происходит через Read tool — тот же инструмент, что читает текстовые файлы:

Напиши в чат

Прочитай /Users/me/screenshots/ui-bug.png и найди проблемы с интерфейсом

Claude Code автоматически определяет тип файла. Для изображений он отображает содержимое визуально (Claude — мультимодальная модель). Поддерживаются PNG, JPG, GIF, WebP.

Для PDF есть параметр pages для чтения конкретных страниц:

Напиши в чат

Прочитай /Users/me/docs/contract.pdf страницы 1-5 и выдели ключевые пункты

🎨 Образ: Read tool в Claude Code — как универсальный сканер. Ты кладёшь документ (текст, картинку, PDF) — и Claude видит содержимое напрямую. Не нужно ничего конвертировать или перекодировать.

Три способа передать изображение через API

Способ 1: URL (если изображение публично доступно)

python

import anthropic

client = anthropic.Anthropic()

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "url",
                        "url": "https://example.com/screenshot.png",
                    },
                },
                {
                    "type": "text",
                    "text": "Что изображено на этом скриншоте? Опиши UI элементы."
                }
            ],
        }
    ],
)
print("".join(b.text for b in message.content if b.type == "text"))

Способ 2: Base64 (для локальных файлов)

python

import anthropic
import base64

# Читаем файл и кодируем в base64
with open("invoice.png", "rb") as f:
    image_data = base64.standard_b64encode(f.read()).decode("utf-8")

client = anthropic.Anthropic()

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {
                        "type": "base64",
                        "media_type": "image/png",  # image/jpeg, image/gif, image/webp
                        "data": image_data,
                    },
                },
                {
                    "type": "text",
                    "text": "Извлеки из этого счёта: номер, дату, итоговую сумму, получателя. Верни JSON."
                }
            ],
        }
    ],
)
print("".join(b.text for b in message.content if b.type == "text"))

Способ 3: Files API (загрузи один раз — используй многократно)

Для изображений которые используются повторно или при длинных диалогах — Files API позволяет загрузить файл один раз и ссылаться по file_id:

python

import anthropic

client = anthropic.Anthropic()

# Загружаем файл один раз
with open("image.jpg", "rb") as f:
    file_upload = client.files.upload(file=("image.jpg", f, "image/jpeg"))

# Используем file_id (не нужно каждый раз отправлять base64)
message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "image",
                    "source": {"type": "file", "file_id": file_upload.id},
                },
                {"type": "text", "text": "Опиши это изображение."},
            ],
        }
    ],
)

Зачем Files API? (раньше для него нужен был beta-заголовок, по актуальной документации сейчас он не требуется) В мультиходовых диалогах каждый запрос пересылает всю историю. Если изображения закодированы в base64 — они отправляются полностью на каждом ходу. С Files API отправляется только file_id — размер запроса не растёт.

🎨 Образ: base64 — это каждый раз распечатывать полный чертёж и нести его на совещание. Files API — это сказать "смотрите на чертёж #7 который мы уже согласовали". Один ярлык вместо тяжёлой стопки бумаг.

Несколько изображений в одном запросе

Claude может работать с несколькими картинками одновременно — например сравнить дизайн-макет и скриншот реализации.

Лимиты (из документации Anthropic):

До 20 изображений на сообщение в claude.ai
До 100 изображений на запрос через API (модели с 200K контекстом, сейчас это Haiku 4.5)
До 600 изображений на запрос через API (остальные модели)
При >20 изображениях в одном запросе действует более строгий лимит на размер каждого изображения (в документации — не больше 2000 px по стороне)

🎨 Образ: несколько изображений в одном запросе — как показать архитектору два плана одновременно. "Вот план 1 (что задумали), вот план 2 (что построили). Найди расхождения." Без подписей архитектор запутается какой где.

Лучшая практика: при нескольких изображениях подписывай каждое — "Image 1:", "Image 2:":

python

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=1024,
    messages=[
        {
            "role": "user",
            "content": [
                {"type": "text", "text": "Image 1:"},
                {
                    "type": "image",
                    "source": {"type": "base64", "media_type": "image/png", "data": design_b64},
                },
                {"type": "text", "text": "Image 2:"},
                {
                    "type": "image",
                    "source": {"type": "base64", "media_type": "image/png", "data": screenshot_b64},
                },
                {
                    "type": "text",
                    "text": "Найди расхождения между макетом (Image 1) и реализацией (Image 2)."
                }
            ],
        }
    ],
)

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

PDF — Read tool в Claude Code

В интерактивном режиме Claude Code обрабатывает PDF через встроенный Read tool. Просто укажи путь к файлу:

Напиши в чат

Прочитай /Users/me/documents/contract.pdf и выдели все сроки платежей

Claude Code автоматически:

Открывает PDF
Извлекает текст, таблицы, структуру
Обрабатывает содержимое

Для больших PDF (>10 страниц) обязательно указывай диапазон страниц:

Напиши в чат

Прочитай /Users/me/docs/report.pdf страницы 1-5

Максимум 20 страниц за один запрос. Без указания диапазона чтение большого PDF может завершиться ошибкой.

🎨 Образ: Read tool для PDF — как бухгалтер который читает любой документ без сканера. Ты кладёшь договор на стол — он сразу видит все суммы, даты, условия. Не нужно ничего конвертировать.

Через API — PDF как base64:

python

import anthropic
import base64

with open("report.pdf", "rb") as f:
    pdf_data = base64.standard_b64encode(f.read()).decode("utf-8")

client = anthropic.Anthropic()

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=2048,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "document",
                    "source": {
                        "type": "base64",
                        "media_type": "application/pdf",
                        "data": pdf_data,
                    },
                },
                {
                    "type": "text",
                    "text": "Вытащи все числовые показатели из этого отчёта в виде таблицы Markdown."
                }
            ],
        }
    ],
)

Стоимость: формула расчёта токенов

Официальная формула из документации Anthropic: Claude смотрит на изображение блоками 28x28 пикселей, каждый блок — один токен.

Код

токены = ⌈width / 28⌉ × ⌈height / 28⌉

Где width и height — в пикселях, после масштабирования. (В старых версиях курса здесь стояла формула width * height / 750, она устарела.)

Максимальное нативное разрешение (на октябрь 2026):

Для моделей Claude 4.7 и новее: 2576 px по длинной стороне (до 4784 токенов за изображение)
Для остальных моделей: 1568 px по длинной стороне (до 1568 токенов за изображение)

Если изображение больше — Claude автоматически уменьшает его с сохранением пропорций.

Примеры для стандартного уровня разрешения (например Haiku 4.5, $1 за 1 млн входных токенов) и для высокого (Opus 5.5, $4 за 1 млн). Цены на октябрь 2026, актуальные: Актуальное сейчас.

Размер изображения	Токены (стандартный уровень)	Стоимость (Haiku 4.5, $1/млн)
200x200 px	64	~$0.00006
1000x1000 px	1296	~$0.0013
1920x1080 px	1560 (уменьшен)	~$0.0016

Размер изображения	Токены (высокое разрешение)	Стоимость (Opus 5.5, $4/млн)
200x200 px	64	~$0.00026
1000x1000 px	1296	~$0.0052
1920x1080 px	2691 (высокое разрешение)	~$0.011

Модели Claude 4.7 и новее поддерживают высокое разрешение. До 3x больше токенов за изображение, но лучше видит мелкие детали. Если высокая точность не нужна — уменьши изображение перед отправкой.

🎨 Образ: Зрение со стоимостью. Представь что каждый взгляд Claude на изображение стоит денег — как рентген в клинике. Маленькая картинка для чтения текста — дешёвый рентген (доли цента). Огромная PNG для пиксельного анализа на модели высокого разрешения — дорогая МРТ (около $0.02). Уменьшай "снимок" до нужного размера.

Практические кейсы

Анализ UI скриншотов:

Напиши в чат

Вот скриншот нашей страницы оформления заказа [image].
Найди UX проблемы: что может запутать пользователя, где нет 
достаточного контраста, какие элементы расположены неинтуитивно.

Извлечение данных из документов:

Напиши в чат

Вот фото чека из ресторана [image].
Извлеки: название заведения, дату, каждую позицию с ценой, итог, 
чаевые если есть. Верни структурированный JSON.

Обработка рукописных схем:

Напиши в чат

Вот фото рукописной схемы базы данных [image].
Преобразуй в SQL CREATE TABLE statements для PostgreSQL.

🎨 Образ: two-pass visual check — как фотограф который сначала делает снимок, потом смотрит на экран камеры. "Свет не тот, чуть правее." Сделал → посмотрел → поправил → снова. Без второго взгляда — печатаешь то что получилось с первого раза.

Two-pass visual check (паттерн Build → Screenshot → Review → Fix):

Мощный паттерн для разработки UI — сначала пишешь код, потом Claude проверяет визуальный результат:

python

# Шаг 1: Claude генерирует HTML/CSS
# Шаг 2: Делаем скриншот страницы (через Playwright, Puppeteer, или Computer Use)
# Шаг 3: Отправляем скриншот Claude с вопросом "что не так?"
# Шаг 4: Claude находит визуальные баги и фиксит код

message = client.messages.create(
    model="claude-opus-5-5",
    max_tokens=2048,
    messages=[{
        "role": "user",
        "content": [
            {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": screenshot_b64}},
            {"type": "text", "text": "Это скриншот страницы которую я только что сгенерировал. "
             "Найди визуальные проблемы: кривое выравнивание, обрезанный текст, "
             "проблемы с контрастом, неправильные отступы. Предложи CSS-фиксы."}
        ]
    }]
)

Автоматический QA дизайна (сравнение Figma с реализацией):

python

# Сравниваем каждый компонент из Figma с реальным скриншотом
for component_name, figma_img, screenshot_img in components:
    result = client.messages.create(
        model="claude-opus-5-5",
        messages=[{
            "role": "user",
            "content": [
                {"type": "text", "text": "Image 1 (Figma макет):"},
                {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": figma_img}},
                {"type": "text", "text": "Image 2 (реализация):"},
                {"type": "image", "source": {"type": "base64", "media_type": "image/png", "data": screenshot_img}},
                {"type": "text", "text": f"Компонент: {component_name}. Оцени совпадение 0-10 и опиши расхождения."}
            ]
        }]
    )

Практика

Задание: Анализатор счетов

Найди или создай PNG-изображение счёта (faktura, invoice) — можешь сделать скриншот любого шаблона онлайн
Напиши скрипт на Python который читает файл, кодирует в base64, отправляет Claude с промптом (промпт — запрос к AI): "Извлеки из этого счёта: номер документа, дату, получателя, список позиций (название, количество, цена), итоговую сумму. Верни JSON."
Запусти скрипт — проверь корректность извлечённых данных
Добавь обработку ошибок: если файл не найден, если Claude не смог извлечь данные
Бонус: обработай несколько счетов в цикле, сохрани результаты в invoices.json

Задание 2: Two-pass visual check в Claude Code

Попроси Claude Code создать HTML-страницу: "Создай landing page для фитнес-приложения с hero-секцией, ценами и CTA-кнопкой"
Открой результат в браузере и сделай скриншот (или используй Claude Code Read tool для просмотра)
Покажи скриншот Claude: "Прочитай /tmp/screenshot.png и найди визуальные проблемы с этой страницей"
Claude предложит фиксы — примени их
Повтори цикл: скриншот → ревью → фикс, пока результат не будет идеальным

Цель: понять как передавать изображения через API и извлекать структурированные данные из визуальных источников. Освоить two-pass visual check паттерн.

Инструменты и ресурсы

anthropic — pip install anthropic — Python SDK с поддержкой vision
Pillow — pip install Pillow — изменение размера изображений перед отправкой (экономия токенов)
base64 — встроенный модуль Python для кодирования файлов
Claude Code Read tool — встроенная поддержка изображений (PNG, JPG, GIF, WebP) и PDF
Files API — загрузка и переиспользование изображений через file_id
Документация Vision: platform.claude.com/docs/en/build-with-claude/vision
Multimodal cookbook: platform.claude.com/cookbook/multimodal-getting-started-with-vision

Ключевые выводы

Изображение передаётся в API тремя способами: base64, URL, или Files API (file_id). Тип указывается в поле media_type. Claude обрабатывает JPEG, PNG, GIF, WebP и PDF.

В Claude Code изображения и PDF открываются через Read tool как обычные файлы — конвертировать не нужно. Для больших PDF (>10 страниц) указывай диапазон страниц.

Стоимость = ⌈width/28⌉ × ⌈height/28⌉ токенов. Максимум 1568px по длинной стороне (2576px для моделей Claude 4.7 и новее). Уменьшай до необходимого минимума перед отправкой.

Claude НЕ генерирует изображения — только анализирует. Не идентифицирует людей на фото. Может ошибаться на мелких, размытых или перевёрнутых изображениях.

Паттерн two-pass visual check (Build → Screenshot → Review → Fix) — мощный инструмент для разработки UI с визуальной верификацией через Claude.

Следующий урок

→ AI Image Generation Pipeline: как делать картинки, если Claude их не рисует. Дальше — Что такое Skills.

Мультимодальность (мультимодальный — работающий с разными типами данных: текст, изображения) — картинки, PDF, аудио

Суть урока

Ключевые концепции

Теория

Как Claude видит изображения

Мультимодальность в Claude Code

Три способа передать изображение через API

Несколько изображений в одном запросе

PDF — Read tool в Claude Code

Стоимость: формула расчёта токенов

Рекомендации по качеству изображений (из документации Anthropic)

Практические кейсы

Практика

Инструменты и ресурсы

Ключевые выводы

Следующий урок