Реализация мультимодального AI-ввода (текст + изображение) в мобильном приложении
Когда пользователь фотографирует этикетку товара и хочет сразу получить расшифровку состава — это мультимодальный ввод. Не «загрузи фото, потом напиши вопрос в другом поле», а единый поток: снимок и контекст уходят в модель одним запросом. Реализовать это правильно сложнее, чем кажется на старте.
Где ломаются первые прототипы
Самая частая ошибка — отправлять изображение отдельным запросом, получать текстовое описание, а потом склеивать его с вопросом пользователя. Это не мультимодальность, это цепочка из двух вызовов с потерей контекста. GPT-4o, Claude 3, Gemini 1.5 поддерживают image_url прямо в messages[] — используйте это.
На Android типичная проблема: Bitmap после BitmapFactory.decodeFile() на крупном снимке с камеры весит 15–20 МБ. Base64 от такого изображения раздувается до 25+ МБ, и API возвращает 400 Bad Request с невнятным image_too_large. Решение — масштабировать через Bitmap.createScaledBitmap() до 1024×1024 или использовать BitmapRegionDecoder для кропа до отправки. Компрессия в JPEG 85% обычно достаточна.
На iOS история та же, но с другими граблями: UIImagePickerController возвращает UIImage с поворотом imageOrientation != .up, и модель получает изображение вверх ногами. ImageIO или CGImagePropertyOrientation нужно применять до кодирования в base64 — иначе распознавание текста деградирует.
Как строится реальная интеграция
Протокол обмена. OpenAI-совместимый формат (messages с content типа array) работает у большинства провайдеров. Мы строим абстракцию MultimodalMessage, которая умеет упаковывать List<ContentPart> — текст, изображение, опционально документ — в один payload. Это позволяет переключать провайдера (OpenAI → Anthropic → Google) заменой одного адаптера.
// Android (Kotlin)
data class ImagePart(val base64: String, val mimeType: String = "image/jpeg")
data class TextPart(val text: String)
fun buildPayload(text: String, bitmap: Bitmap): RequestBody {
val scaled = Bitmap.createScaledBitmap(bitmap, 1024, 1024, true)
val stream = ByteArrayOutputStream()
scaled.compress(Bitmap.CompressFormat.JPEG, 85, stream)
val b64 = Base64.encodeToString(stream.toByteArray(), Base64.NO_WRAP)
// упаковка в messages[]
}
Стриминг ответа. Для длинных ответов (анализ медицинского снимка, разбор счёта-фактуры) stream: true с Server-Sent Events даёт пользователю ощущение живого ответа. На Android — OkHttp с EventSource, на iOS — URLSession + AsyncSequence. Без стриминга при анализе плотного документа пользователь смотрит в пустой экран 8–12 секунд.
Кеш и повторные запросы. Если пользователь отправил то же изображение с другим вопросом — перекодировать не нужно. Кешируем base64-строку по хешу Bitmap (MD5 от массива пикселей или Uri файла) в LruCache на 10–20 МБ. На iOS — NSCache с аналогичной логикой.
Сложности на уровне UX и архитектуры
Разрешения камеры и галереи на Android 13+ разделены: READ_MEDIA_IMAGES вместо старого READ_EXTERNAL_STORAGE. На iOS — NSPhotoLibraryUsageDescription и NSCameraUsageDescription в Info.plist, причём с iOS 14 работает PHPickerViewController без запроса полного доступа к библиотеке. Не используйте UIImagePickerController для новых проектов — Apple его устарит.
Многие команды недооценивают обработку ошибок модели. Если изображение размыто, слишком тёмное или содержит запрещённый контент — провайдер вернёт finish_reason: content_filter или просто пустой content. UI должен это различать и давать пользователю понятный фидбек, а не вечный индикатор загрузки.
Стек и инструменты
| Компонент | Android | iOS |
|---|---|---|
| Захват изображения | CameraX 1.3+ | AVFoundation / PHPickerViewController |
| Кодирование | Base64 (java.util) |
Data.base64EncodedString() |
| HTTP-клиент | OkHttp 4 + Retrofit | URLSession / Alamofire |
| Стриминг | OkHttp EventSource | AsyncStream / Combine |
| Кеш | LruCache / Coil | NSCache / Kingfisher |
Flutter: image_picker → dart:convert (base64Encode) → http или dio с chunked streaming. Архитектурно — провайдер или BLoC для управления состоянием загрузки/стриминга.
Этапы работы
Аудит текущей архитектуры приложения и выбор AI-провайдера → проектирование протокола MultimodalMessage и абстракции провайдера → реализация захвата, кодирования и отправки → интеграция стримингового рендеринга ответа → тестирование edge-cases (портрет/ландшафт, HDR, большие файлы) → нагрузочное тестирование (параллельные запросы, отмена, reconnect) → выкатка и мониторинг через Firebase Crashlytics + кастомные события.
Сроки: MVP с базовым text+image вводом — 1–2 недели. Полная реализация со стримингом, кешем, обработкой ошибок и поддержкой нескольких провайдеров — 3–5 недель в зависимости от существующего кодовой базы.