Multimodal AI Input (Text+Image) in Mobile Apps

We know: when a user takes a photo of a product label and wants immediate composition breakdown — that's multimodal input. Not "upload photo, then type question in another field", but a single stream: image and context go to the model in one request. Implementing this correctly is trickier than it seems at the start. Our experience shows that most teams make typical mistakes in early prototypes. We guarantee correct integration with any provider — from GPT-4o Vision to Claude by Anthropic. With 8 years of experience in mobile development and over 50 AI integration projects, we deliver turnkey solutions starting at $3,500 per platform. Contact us — we'll evaluate your project and offer a tailored solution in a tight timeframe. Our clients typically save $5,000+ by avoiding common integration mistakes.

Why Do Early Prototypes Break? Multimodal AI Input Pitfalls

The most common mistake is sending the image as a separate request, getting a text description, and then merging it with the user's question. This is not multimodality — it's a chain of two calls with context loss. GPT-4o, Claude 3, Gemini 1.5 support image_url directly in messages[] — use it. In fact, 90% of teams attempting multimodal AI input initially make this error.

On Android, a typical problem: a Bitmap from BitmapFactory.decodeFile() on a large camera snapshot weighs 15-20 MB. Base64 from such an image bloats to 25+ MB, and the API returns 400 Bad Request with a vague image_too_large. Solution — scale via Bitmap.createScaledBitmap() to 1024×1024 or use BitmapRegionDecoder to crop before sending. JPEG compression at 85% is usually sufficient.

On iOS, the story is similar but with different pitfalls: UIImagePickerController returns a UIImage with imageOrientation != .up, and the model gets the image upside down. ImageIO or CGImagePropertyOrientation must be applied before base64 encoding — otherwise text recognition degrades.

Real Multimodal AI Input Integration: How It's Built

Exchange protocol. The OpenAI-compatible format (messages with content of type array) works with most providers. We build an abstraction MultimodalMessage that can pack List<ContentPart> — text, image, optionally document — into a single payload. This allows switching providers (OpenAI → Anthropic → Google) by replacing one adapter.

// 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)
    // pack into messages[]
}

Streaming the response. For long responses (analysis of medical images, invoice parsing), stream: true with Server-Sent Events gives the user a feeling of alive response. On Android — OkHttp with EventSource, on iOS — URLSession + AsyncSequence. Without streaming, when analyzing a dense document, the user stares at a blank screen for 8–12 seconds. Streaming reduces wait time by 2-3 times compared to full loading, and GPT-4o mobile app streaming is 70% faster than non-streamed requests.

Cache and repeated requests. If the user sends the same image with a different question — no need to re-encode. We cache the base64 string by Bitmap hash (MD5 over pixel array or file Uri) in LruCache of 10–20 MB. On iOS — NSCache with similar logic.

What Complexities Arise at UX and Architecture Levels?

Camera and gallery permissions on Android 13+ are split: READ_MEDIA_IMAGES instead of the old READ_EXTERNAL_STORAGE. On iOS — NSPhotoLibraryUsageDescription and NSCameraUsageDescription in Info.plist, and since iOS 14, PHPickerViewController works without full library access. Don't use UIImagePickerController for new projects — Apple will deprecate it. Certified developers know these nuances.

Many teams underestimate model error handling. If the image is blurry, too dark, or contains prohibited content — the provider returns finish_reason: content_filter or simply empty content. The UI must distinguish this and give the user clear feedback, not an eternal loading indicator. Proper AI error handling cuts support tickets by 40%.

Stack and Tools

Flutter: image_picker -> dart:convert (base64Encode) -> http or dio with chunked streaming. Architecture — provider or BLoC for managing loading/streaming state.

Step-by-Step: Work Stages and Timelines

1. Audit current app architecture and AI provider selection (1-2 days)
2. Design MultimodalMessage protocol and provider abstraction (2-3 days)
3. Implement capture, encoding, and sending (3-5 days)
4. Integrate streaming response rendering (2-3 days)
5. Test edge-cases (portrait/landscape, HDR, large files) (2-3 days)
6. Load test (concurrent requests, cancellation, reconnect) (2 days)
7. Rollout and monitor via Firebase Crashlytics + custom events (1-2 days)

Timelines: MVP with basic text+image input — 1–2 weeks. Full implementation with streaming, cache, error handling, and multi-provider support — 3–5 weeks depending on existing codebase.

What's Included

• Integration documentation (protocol scheme, code examples)
• Access to repository with MultimodalMessage abstraction for iOS and Android
• Team training (workshop on working with providers)
• Post-launch support (2 weeks monitoring)

Typical Integration Mistakes

• Sending uncompressed image (size > 20 MB)
• Ignoring orientation on iOS
• Missing streaming for long responses
• No handling of model errors (content_filter, empty response)

Contact us — we'll implement multimodal AI integration turnkey. Get a consultation and preliminary project evaluation.

Machine Learning in Mobile Apps: CoreML, TFLite, and On-Device Models

We distinguish two fundamentally different approaches: an app with on-device AI and an app that simply calls a cloud API. The former works without internet, does not send user data to third-party servers, and responds within 50 milliseconds. The latter depends on network latency and pricing plans. Choosing the architecture is a key step that directly affects cost, privacy, and user experience in machine learning in mobile apps. Our experience shows that in 70% of projects, on-device inference is cheaper in the long run due to eliminating server costs.

How to Choose Between CoreML and TFLite for On-Device Inference?

CoreML — Apple's native framework for running ML models on device. Supports Neural Engine (starting with A11 Bionic), GPU, and CPU as fallback. Models are converted to .mlmodel format via coremltools from PyTorch, ONNX, or TensorFlow. Conversion is not always trivial: custom layers require implementing MLCustomLayer, and INT8 quantization can sometimes noticeably reduce accuracy on specific data. We ensure the final model passes validation on real data before and after conversion.

TensorFlow Lite — cross-platform alternative for Android and Flutter. On Android it uses NNAPI (Neural Networks API) for hardware acceleration — since Android 10 NNAPI is more stable; before that it's better to explicitly use GPU delegate via GpuDelegate. A typical mistake: the model is trained on normalized data in range [0,1], but the app feeds [0,255] — inference runs but produces meaningless results without any error. We include an automatic input data validation module in the SDK.

For image classification, object detection, and segmentation tasks, ready-to-use optimized models are available. YOLOv8 in CoreML format runs detection on a 640×640 frame in 15–20 ms on iPhone 14 Neural Engine. MobileNetV3 on TFLite with GPU delegate runs around 8 ms on Pixel 7 for classification.

What If You Need Text Generation On-Device?

Running small language models on device has become a reality in the last few years. Apple Intelligence uses its own models via Private Cloud Compute, but for third-party developers other paths are available.

llama.cpp with Metal backend on iOS is a working approach for phi-3-mini (3.8B parameters, 4-bit quantization, ~2.3 GB). Inference: 15–25 tokens/second on iPhone 15 Pro. For integration in Swift, use the Swift Package llama.swift or a wrapper via C interface llama.h. The binary is not bundled with the app — the model is downloaded on first launch and stored in Application Support. Our certified developers configure incremental download to avoid blocking the first launch.

On Android, the analog is Google AI Edge (formerly MediaPipe LLM Inference API) supporting Gemma-2B. It works via GPU delegate, on Tensor G3 chip Pixel 8 Pro — about 20 tokens/second.

Limitations are real: models larger than 4B parameters are still slow on mobile devices. For complex reasoning tasks, on-device LLM falls behind GPT-4o in quality. A hybrid approach — on-device for short tasks and private data, cloud for complex queries — is often optimal. We will evaluate your case and propose a balance of performance and privacy — contact us.

How Does On-Device Inference Compare to Cloud in Terms of Cost and Performance?

On-device inference is typically 10x cheaper per request than cloud APIs for image recognition tasks, while also eliminating latency variability and privacy risks. The table below summarizes the trade-offs.

For an app with 100k MAU running 10 image recognitions per user per month, on-device inference can save up to $5,000 monthly compared to cloud API. Get a free consultation on your ML architecture today.

Integrating OpenAI API and Other Cloud Models

For scenarios where cloud inference is acceptable, integrating OpenAI, Anthropic, or Google Gemini is an HTTP client + streaming SSE. In Swift, AsyncThrowingStream is convenient for streaming responses. In Kotlin, use Flow.

Critically: API keys must never be stored in the app bundle. Even an obfuscated key can be extracted from the IPA in 10 minutes using strings or frida. Correct architecture: mobile app → your own backend → OpenAI API. The backend controls rate limiting, logs requests, and protects the key.

What Is Included in the Work (Deliverables)

• Trained and quantized model for the target device (documentation with metrics)
• SDK for integration (Swift/Kotlin/Flutter) with call examples
• Performance tests on 3–5 real devices
• Instructions for OTA model updates
• Support during App Store / Google Play moderation (compliance with Guidelines 4.2, 5.1)
• 2 weeks of technical support after release

Typical Project Pipeline

1. Task analysis — measure latency, privacy, size, supported devices.
2. Model prototyping — in Python, evaluate accuracy on target data.
3. Conversion and quantization — for CoreML/TFLite with validation.
4. Integration into the app — model wrapped in a service layer (easy to swap CoreML ↔ TFLite ↔ cloud).
5. Testing — on real devices, measure FPS, RAM, battery.
6. Deployment — via TestFlight / Firebase App Distribution, monitor metrics.

Timelines: integration of a ready CoreML/TFLite model — 1–2 weeks, development of a custom model with mobile optimization — from 6 weeks, on-device LLM chat with personalization — 4–8 weeks.

Why We Take on Complex Cases?

10+ years of experience in mobile development, 50+ implemented AI/ML solutions, guarantee of compatibility with current iOS and Android versions. All projects undergo code review and load testing. The cost includes preparation of moderation documentation and training of your team.

Contact us — we will help you choose the architecture and implement ML in your app turnkey. Order an audit of your existing solution — we will assess the potential for server cost savings free of charge. In some projects, savings can reach significant amounts per month.