How to Build AI Outpainting for iOS and Android: From Canvas to Generation

We received a request: an iOS photo editing app — users want to expand images beyond the frame. An original 9:16 photo needs to become 16:9 without losing content. Outpainting draws side areas while preserving style, lighting, and details. Another case — e-commerce: a product on a white background needs to be shown in an interior. AI creates the environment without a reshoot. A third example: a user takes a screenshot and wants to expand it into a full scene. We are a team with 5+ years of experience in mobile development and AI integration, having delivered over 10 projects with outpainting — from photo editors to visual search engines. Below are technical details, typical pitfalls, and working solutions.

What problems does outpainting solve?

Non-standard aspect ratios — Instagram requires 1:1, but the source is 4:3. Cropping loses context. Outpainting extends the background while keeping the composition. Pulling the camera back — the photographer shot a close-up, but a wide shot is needed. One operation and AI draws the surroundings. Creative layouts — a designer needs to combine multiple expanded images into a single canvas. Outpainting makes seams invisible.

How to prepare a mask for outpainting?

The essence of outpainting: place the original image on a larger canvas (with neutral margins), pass it to the API as image + mask (mask = new empty areas), and receive the filled result.

func prepareOutpaintingCanvas(
    original: UIImage,
    targetSize: CGSize,
    placement: CGPoint // where to place the original on the canvas
) -> (image: UIImage, mask: UIImage) {
    // Create canvas of required size
    UIGraphicsBeginImageContextWithOptions(targetSize, false, 1.0)
    let context = UIGraphicsGetCurrentContext()!

    // Fill with gray (neutral color for expansion areas)
    context.setFillColor(UIColor.gray.cgColor)
    context.fill(CGRect(origin: .zero, size: targetSize))

    // Insert the original
    original.draw(at: placement)
    let compositeImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    // Create mask: black pixels = keep, white = redraw
    // For DALL-E: alpha channel instead of black/white
    UIGraphicsBeginImageContextWithOptions(targetSize, false, 1.0)
    let maskContext = UIGraphicsGetCurrentContext()!

    // White (transparent for DALL-E) — new areas
    maskContext.setFillColor(UIColor.white.cgColor)
    maskContext.fill(CGRect(origin: .zero, size: targetSize))

    // Black (opaque) — original image
    maskContext.setFillColor(UIColor.black.cgColor)
    maskContext.fill(CGRect(origin: placement, size: original.size))
    let maskImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return (compositeImage, maskImage)
}

The placement of the original on the canvas determines the expansion direction: center — all sides, left edge — only rightward, arbitrary — the user controls via drag.

UI for controlling expansion

Interaction pattern:

1. The user sees the original image inside a canvas frame.
2. They can drag the image inside the frame (or move the frame).
3. They select the final aspect ratio: 16:9, 4:3, 1:1, or custom.
4. They tap Expand.

// Android: draggable image inside canvas with GestureDetector
class OutpaintingView(context: Context) : View(context) {
    var imageOffsetX = 0f
    var imageOffsetY = 0f
    private val gestureDetector = GestureDetector(context, object : SimpleOnGestureListener() {
        override fun onScroll(e1: MotionEvent?, e2: MotionEvent, dx: Float, dy: Float): Boolean {
            imageOffsetX -= dx
            imageOffsetY -= dy
            // Limit offset to canvas bounds
            imageOffsetX = imageOffsetX.coerceIn(-maxOffsetX, 0f)
            imageOffsetY = imageOffsetY.coerceIn(-maxOffsetY, 0f)
            invalidate()
            return true
        }
    })

    override fun onDraw(canvas: Canvas) {
        canvas.drawColor(Color.DKGRAY) // background of expandable area
        canvas.drawBitmap(originalBitmap, imageOffsetX, imageOffsetY, null)
    }
}

Sending to DALL-E 2

// DALL-E 2: image and mask are passed as PNG with alpha channel
// In the mask: transparency = edit, opacity = keep

func outpaint(composite: UIImage, mask: UIImage, prompt: String, targetSize: String = "1024x1024") async throws -> UIImage {
    // Convert mask: white pixels → transparent (alpha = 0)
    let alphaMask = convertToAlphaMask(mask)

    guard let compositeData = composite.pngData(),
          let maskData = alphaMask.pngData() else { throw OutpaintError.conversionFailed }

    // Request identical to inpainting — same endpoint /v1/images/edits
    return try await sendInpaintRequest(imageData: compositeData, maskData: maskData, prompt: prompt, size: targetSize)
}

private func convertToAlphaMask(_ mask: UIImage) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(mask.size, false, 1.0)
    guard let context = UIGraphicsGetCurrentContext() else { return mask }
    // Invert: white → transparent
    context.setBlendMode(.normal)
    mask.draw(in: CGRect(origin: .zero, size: mask.size))
    // Invert alpha channel via CIImage
    UIGraphicsEndImageContext()
    // Use Core Image for mask inversion
    let ciImage = CIImage(image: mask)!
    let inverted = ciImage.applyingFilter("CIColorInvert")
    return UIImage(ciImage: inverted)
}

Which AI engine to choose for outpainting?

If you need a simple API integration without customization, DALL-E 2 delivers great quality out of the box. If you need customization (style, sample control, arbitrary sizes), Stable Diffusion is preferable. Stable Diffusion can be 2x cheaper per image for high volumes compared to DALL-E 2. We pick the engine based on the client's task and help with model deployment on their own servers. Official API specs: OpenAI DALL-E API. Also see Wikipedia on Outpainting.

Comparison: DALL-E 2 vs Stable Diffusion for outpainting

Work process: from idea to release

1. Analytics — study current UX, define target ratios and use cases.
2. Design — wireframe of interactive canvas, API contracts.
3. Implementation — client logic in Swift/Kotlin, backend integration.
4. Testing — mask correctness, edge cases (very small/large images).
5. Deployment — publish to App Store/Google Play, monitoring.

Deliverables: what's included in the work

We guarantee a 6-month support period and offer a 30-day money-back guarantee on our work.

Typical problems and their solutions

Visible seam at the border of original and generated part — occurs when the original is placed with a sharp edge on a neutral background. Solution: a small gradient transition (feather) on the mask edges — blur the mask by 10–20 pixels.

Style mismatch — the model generated something of a completely different style. The prompt should describe the entire scene, not just the new part: "sunny urban landscape, photorealism, warm tones" not "continue".

Timeline

Basic outpainting with DALL-E 2 (fixed expansion directions) — from 5 to 7 days. Interactive draggable canvas with arbitrary positioning, multiple iterations, history — from 3 to 4 weeks.

Pricing

Our outpainting feature development starts at $5,000 for a basic implementation and can go up to $15,000 for a fully interactive module. Contact us for a detailed quote.

If your project requires outpainting, order a consultation — we will find the optimal solution. Get a consultation on implementing outpainting in your mobile app — contact us, we will prepare a detailed commercial proposal.

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.