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

Мультимодальний AI ввід текст+зображення: покрокова інтеграція

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

TrueTech — компанія з понад 5 роками досвіду в AI-інтеграціях та 50+ реалізованих проектів. Вартість базової інтеграції від $500, повний комплект — від $2000. Ви заощаджуєте до 40% часу на обробку запитів завдяки нашому рішенню.

Як інтегрувати мультимодальний AI в 3 кроки?

1. Крок 1. Захоплення та підготовка зображення. Використовуйте CameraX (Android) або AVFoundation (iOS). Масштабуйте до 1024×1024, стисніть у JPEG 85% та закодуйте в base64.
2. Крок 2. Формування мультимодального запиту. Створіть масив messages з text_part та image_part. Для GPT-4o використовуйте тип content array.
3. Крок 3. Стрімінг та відображення. Увімкніть stream: true, щоб отримувати відповідь частинами. На Android використовуйте OkHttp EventSource, на iOS — URLSession AsyncSequence.

// 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[]
}

Чому ламаються перші прототипи?

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

Стрімінг відповіді. Стрімінг скорочує час очікування в 2-3 рази порівняно з повним завантаженням. Для довгих відповідей (аналіз медичного знімка, розбір рахунку-фактури) 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 повинен це розрізняти і давати користувачеві зрозумілий фідбек, а не вічний індикатор завантаження.

Стек та інструменти

Flutter: image_picker → dart:convert (base64Encode) → http або dio з chunked streaming. Архітектурно — провайдер або BLoC для керування станом завантаження/стрімінгу.

Чому варто обрати нас?

Наш код підтримує Swift Kotlin AI та адаптований під iOS мультимодальний запит та Android AI мультимодальний. Ми надаємо обробку помилок AI та гнучкого провайдера мультимодального AI. Використовуємо кеш зображень LruCache, стрімінг AI відповідей, кодування зображень base64, мультимодальний AI ввід для текст+зображення AI в GPT-4o мобільний додаток через Vision API інтеграцію.

Етапи роботи та терміни

Аудит поточної архітектури додатка та вибір AI-провайдера → проектування протоколу MultimodalMessage та абстракції провайдера → реалізація захоплення, кодування та відправки → інтеграція стрімінгового рендерингу відповіді → тестування edge-cases (портрет/ландшафт, HDR, великі файли) → навантажувальне тестування (паралельні запити, скасування, reconnect) → викатка та моніторинг через Firebase Crashlytics + кастомні події.

Терміни: MVP з базовим text+image вводом — 1–2 тижні. Повна реалізація зі стрімінгом, кешем, обробкою помилок та підтримкою кількох провайдерів — 3–5 тижнів залежно від існуючої кодової бази.

Що входить в роботу

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

Типові помилки при інтеграції

• Відправка нестиснутого зображення (розмір > 20 МБ)
• Ігнорування орієнтації на iOS
• Відсутність стрімінгу для довгих відповідей
• Немає обробки помилок моделі (content_filter, порожня відповідь)

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

Машинне навчання в мобільних застосунках: CoreML, TFLite та on-device LLM

Ми розрізняємо два принципово різних підходи: застосунок з on-device AI та застосунок, який просто викликає хмарне API. Перший працює без інтернету, не надсилає дані користувача на сторонні сервери та відповідає за 50 мілісекунд. Другий залежить від затримки мережі та тарифного плану. Вибір архітектури — ключовий етап, який безпосередньо впливає на вартість, приватність та користувацький досвід. Наш досвід показує: у 70% проектів on-device інференс виявляється дешевшим у довгостроковій перспективі завдяки виключенню серверних витрат. Економія може сягати 40% щомісячних витрат — отримайте консультацію, ми порахуємо для вашого кейсу.

Як вибрати між CoreML та TFLite для on-device інференсу?

CoreML — нативний фреймворк Apple для запуску ML-моделей на пристрої, описаний у документації Apple. Підтримує Neural Engine (A11 Bionic та новіші), GPU та CPU як fallback. Моделі конвертуються у формат .mlmodel через coremltools з PyTorch, ONNX або TensorFlow. Конвертація — не завжди тривіальна: кастомні шари вимагають реалізації MLCustomLayer, а квантизація до INT8 іноді помітно знижує точність на специфічних даних. Ми гарантуємо, що підсумкова модель проходить валідацію на реальних даних до та після конвертації.

TensorFlow Lite — крос-платформна альтернатива для Android та Flutter відповідно до специфікації Google. На Android використовує NNAPI (Neural Networks API) для апаратного прискорення — з Android 10+ NNAPI стабільніший, до цього краще явно використовувати GPU delegate через GpuDelegate. Типова помилка: модель навчена на нормалізованих даних у діапазоні [0,1], а в застосунку на вхід подається [0,255] — інференс працює, але з безглуздими результатами без помилки. Ми включаємо модуль автоматичної валідації вхідних даних у SDK.

Для задач класифікації зображень, детекції об'єктів та сегментації доступні готові оптимізовані моделі. YOLOv8 у CoreML форматі запускає детекцію кадру 640×640 за 15–20 мс на iPhone 14 Neural Engine. MobileNetV3 на TFLite з GPU delegate — близько 8 мс на Pixel 7 при класифікації.

Що робити, якщо потрібна генерація тексту на пристрої?

Запуск невеликих мовних моделей на пристрої став реальністю за останні роки. Apple Intelligence використовує власні моделі через Private Cloud Compute, але для сторонніх розробників доступні інші шляхи.

llama.cpp з Metal backend на iOS — робочий підхід для phi-3-mini (3.8B параметрів, 4-bit квантизація, ~2.3 ГБ). Інференс: 15–25 токенів/секунду на iPhone 15 Pro. Для інтеграції в Swift використовуємо Swift Package llama.swift або обгортку через C-інтерфейс llama.h. Бінарник до застосунку не додаємо — модель завантажується при першому запуску та зберігається в Application Support. Наші сертифіковані розробники налаштовують інкрементальне завантаження, щоб не блокувати перший запуск.

На Android аналог — Google AI Edge (колишній MediaPipe LLM Inference API) з підтримкою Gemma-2B. Працює через GPU delegate, на Tensor G3 чіпі Pixel 8 Pro — близько 20 токенів/секунду.

Інтеграція OpenAI API та інших хмарних моделей

Для сценаріїв, де cloud inference допустимий, інтеграція OpenAI, Anthropic або Google Gemini — це HTTP клієнт + streaming SSE. У Swift зручно через AsyncThrowingStream для стрімінгових відповідей. У Kotlin — через Flow.

Критично важливо: API-ключі ніколи не зберігаються в бандлі застосунку. Навіть обфускований ключ витягується з IPA за 10 хвилин через strings або frida. Правильна архітектура: мобільний застосунок → власний backend → OpenAI API. Backend контролює rate limiting, логує запити, захищає ключ.

Що входить у роботу (результати)

• Навчена та квантизована модель під цільовий пристрій (документація за метриками)
• SDK для інтеграції (Swift/Kotlin/Flutter) з прикладами виклику
• Тести продуктивності на 3–5 реальних пристроях
• Інструкція з оновлення моделі OTA
• Підтримка при проходженні модерації App Store / Google Play (перевірка відповідності Guidelines 4.2, 5.1)
• 2 тижні технічної підтримки після релізу

Типовий пайплайн проекту

1. Аналіз завдання — вимірюємо latency, privacy, size, підтримувані пристрої.
2. Прототипування моделі — в Python, оцінка accuracy на цільових даних.
3. Конвертація та квантизація — під CoreML/TFLite з валідацією.
4. Інтеграція в застосунок — модель обгортається в сервісний шар (легко замінювати CoreML → TFLite → хмара).
5. Тестування — на реальних пристроях, вимір FPS, RAM, батареї.
6. Деплой — через TestFlight / Firebase App Distribution, моніторинг метрик.

Терміни: інтеграція готової CoreML/TFLite моделі — 1–2 тижні, розробка кастомної моделі з мобільною оптимізацією — від 6 тижнів, on-device LLM чат з персоналізацією — 4–8 тижнів.

Чому ми беремося за складні кейси?

10+ років досвіду в мобільній розробці, 50+ впроваджених AI/ML рішень, гарантія сумісності з актуальними версіями iOS та Android. Всі проекти проходять code review та навантажувальне тестування. У вартість вже входить підготовка документації для модерації та навчання вашої команди.

Зв'яжіться з нами — ми допоможемо вибрати архітектуру та впровадити ML у ваш застосунок під ключ. Замовте аудит наявного рішення — безкоштовно оцінимо потенціал економії серверних витрат. Отримайте консультацію експерта — напишіть нам сьогодні.