Розробка AI-розширення зображень для iOS та Android

Розробка outpainting: від полотна до AI-генерації

Ми отримали запит: iOS-додаток для редагування фото — користувачі хочуть розширювати зображення за межі кадру. Вихідне фото 9:16 потрібно перетворити на 16:9 без втрати контенту. Outpainting домальовує бічні області, зберігаючи стиль, освітлення та деталі. Інший кейс — e-commerce: товар на білому фоні, потрібно показати його в інтер'єрі. AI створює оточення без повторної зйомки. Третій приклад — користувач робить скріншот і хоче розширити його до повноцінної сцени. Ми — команда з 5+ роками досвіду в мобільній розробці та інтеграції AI, реалізували більше 10 проєктів з outpainting: від фоторедакторів до візуальних пошуковиків. Нижче — технічні деталі, типові помилки та робочі рішення.

Які проблеми вирішує аутпейнтинг мобільний додаток?

Нестандартні співвідношення сторін — Instagram вимагає 1:1, а вихідник 4:3. Обрізка втрачає контекст. Outpainting розширює фон, зберігаючи композицію. Відсунути камеру — фотограф зняв крупний план, але потрібен загальний вигляд. Одна операція — і AI домальовує оточення. Креативні макети — дизайнеру потрібно об'єднати кілька розширених зображень в єдине полотно. Outpainting робить шви непомітними. Також це генеративне заповнення зображень — потужний інструмент для контент-менеджерів.

Як підготувати маску для outpainting?

Суть outpainting: поміщаємо оригінальне зображення на полотно більшого розміру (з нейтральними полями), передаємо в API як image + mask (маска = нові пусті області), отримуємо заповнений результат.

func prepareOutpaintingCanvas(
    original: UIImage,
    targetSize: CGSize,
    placement: CGPoint // де розмістити оригінал на полотні
) -> (image: UIImage, mask: UIImage) {
    // Створюємо полотно потрібного розміру
    UIGraphicsBeginImageContextWithOptions(targetSize, false, 1.0)
    let context = UIGraphicsGetCurrentContext()!
    // Заливаємо сірим (нейтральний колір для областей розширення)
    context.setFillColor(UIColor.gray.cgColor)
    context.fill(CGRect(origin: .zero, size: targetSize))
    // Вставляємо оригінал
    original.draw(at: placement)
    let compositeImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    // Створюємо маску: чорні пікселі = зберегти, білі = домалювати
    // Для DALL-E: альфа-канал замість ч/б
    UIGraphicsBeginImageContextWithOptions(targetSize, false, 1.0)
    let maskContext = UIGraphicsGetCurrentContext()!
    // Білі (прозорі для DALL-E) — нові області
    maskContext.setFillColor(UIColor.white.cgColor)
    maskContext.fill(CGRect(origin: .zero, size: targetSize))
    // Чорні (непрозорі) — оригінальне зображення
    maskContext.setFillColor(UIColor.black.cgColor)
    maskContext.fill(CGRect(origin: placement, size: original.size))
    let maskImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    return (compositeImage, maskImage)
}

Позиція оригіналу на полотні визначає напрямок розширення: центр — з усіх боків, лівий край — лише вправо, довільно — користувач керує через drag.

UI управління розширенням (інтерактивне полотно outpainting)

Паттерн взаємодії:

1. Користувач бачить вихідне зображення в рамці полотна.
2. Може перетягувати зображення всередині рамки (або рухати рамку).
3. Обирає підсумковий aspect ratio: 16:9, 4:3, 1:1, або довільний.
4. Натискає Розширити.

// 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
            // Обмежуємо зміщення межами полотна
            imageOffsetX = imageOffsetX.coerceIn(-maxOffsetX, 0f)
            imageOffsetY = imageOffsetY.coerceIn(-maxOffsetY, 0f)
            invalidate()
            return true
        }
    })

    override fun onDraw(canvas: Canvas) {
        canvas.drawColor(Color.DKGRAY) // фон області розширення
        canvas.drawBitmap(originalBitmap, imageOffsetX, imageOffsetY, null)
    }
}

Відправка на DALL-E 2

// DALL-E 2: image і mask передаються як PNG з альфа-каналом
// В масці: прозорість = редагувати, непрозорість = зберегти
func outpaint(composite: UIImage, mask: UIImage, prompt: String, targetSize: String = "1024x1024") async throws -> UIImage {
    // Конвертуємо маску: білі пікселі → прозорі (альфа = 0)
    let alphaMask = convertToAlphaMask(mask)
    guard let compositeData = composite.pngData(), let maskData = alphaMask.pngData() else {
        throw OutpaintError.conversionFailed
    }
    // Запит ідентичний inpainting — той самий ендпоінт /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
    }
    // Інвертуємо: біле → прозоре
    context.setBlendMode(.normal)
    mask.draw(in: CGRect(origin: .zero, size: mask.size))
    // Інверсія альфа-каналу через CIImage
    UIGraphicsEndImageContext()
    // Використовуємо Core Image для інверсії маски
    let ciImage = CIImage(image: mask)!
    let inverted = ciImage.applyingFilter("CIColorInvert")
    return UIImage(ciImage: inverted)
}

Який AI-движок обрати для outpainting?

Якщо потрібна інтеграція з простим API без налаштування — DALL-E 2 дає відмінну якість з коробки. Якщо потрібна кастомізація (стиль, контроль семпла, довільні розміри) — Stable Diffusion кращий. Ми підбираємо движок під задачу клієнта та допомагаємо з деплоєм моделі на власні сервери. OpenAI DALL-E API — це офіційне джерело для API-специфікацій.

Порівняння DALL-E 2 та Stable Diffusion для outpainting

Stable Diffusion має у 2 рази більшу гнучкість за DALL-E 2 завдяки відкритому коду та можливості тонкого налаштування.

Процес роботи: від ідеї до релізу (outpainting під ключ)

1. Аналітика – вивчаємо поточний UX, визначаємо цільові ratio та сценарії використання.
2. Проектування – wireframe інтерактивного полотна, API-контракти.
3. Реалізація – клієнтська логіка на Swift/Kotlin, бекенд-інтеграція (мобільна розробка нейромережі).
4. Тестування – коректність маски, граничні випадки (дуже маленькі/великі зображення).
5. Деплой – публікація в App Store/Google Play, моніторинг.

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

Типові проблеми та їх вирішення

Видимий шов на межі оригіналу та домалюваної частини — трапляється, коли оригінал поміщений з різким краєм на нейтральний фон. Рішення: невеликий градієнтний перехід (feather) на краях маски — розмиваємо маску на 10–20 пікселів.

Невідповідність стилю — модель домалювала щось зовсім іншого стилю. Промпт має описувати всю сцену, а не лише нову частину: «сонячний міський пейзаж, фотореалізм, теплі тони», а не «продовжи».

Терміни та вартість

Базовий outpainting з DALL-E 2 (фіксовані напрямки розширення) — від 5 до 7 днів, вартість від $3000. Інтерактивне draggable полотно з довільним позиціонуванням, множинними ітераціями, історією — від 3 до 4 тижнів, від $8000.

Якщо ваш проект потребує outpainting, замовте консультацію — ми підберемо оптимальне рішення. Отримайте консультацію щодо впровадження outpainting у ваш мобільний додаток — зв'яжіться з нами, ми підготуємо детальну комерційну пропозицію.