Мультимодальный AI-ввод (текст+изображение) в мобильном приложении

Мы знаем: когда пользователь фотографирует этикетку товара и хочет сразу получить расшифровку состава — это мультимодальный ввод. Не «загрузи фото, потом напиши вопрос в другом поле», а единый поток: снимок и контекст уходят в модель одним запросом. Реализовать это правильно сложнее, чем кажется на старте. Наш опыт показывает, что большинство команд допускает типовые ошибки на первых прототипах. Мы гарантируем корректную интеграцию с любым провайдером — от GPT-4o до Claude от Anthropic. Свяжитесь с нами — оценим ваш проект и предложим решение под ключ в сжатые сроки.

Почему ломаются первые прототипы?

Самая частая ошибка — отправлять изображение отдельным запросом, получать текстовое описание, а потом склеивать его с вопросом пользователя. Это не мультимодальность, а цепочка из двух вызовов с потерей контекста. 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 секунд. Время ожидания сокращается в 2-3 раза по сравнению с полной загрузкой.

Кеш и повторные запросы. Если пользователь отправил то же изображение с другим вопросом — перекодировать не нужно. Кешируем 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 должен это различать и давать пользователю понятный фидбек, а не вечный индикатор загрузки.

Стек и инструменты

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 недель в зависимости от существующего кодовой базы.

Что входит в работу

• Документация по интеграции (схема протокола, примеры кода)
• Доступ к репозиторию с абстракцией MultimodalMessage под iOS и Android
• Обучение команды (воркшоп по работе с провайдерами)
• Поддержка после выкатки (2 недели мониторинга)

Типичные ошибки при интеграции

• Отправка несжатого изображения (размер > 20 МБ)
• Игнорирование ориентации на iOS
• Отсутствие стриминга для длинных ответов
• Нет обработки ошибок модели (content_filter, пустой ответ)

Пишите — мы реализуем интеграцию мультимодального AI под ключ. Получите консультацию и предварительную оценку вашего проекта.