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

Разработка outpainting: от холста до AI-генерации

Мы получили запрос: iOS-приложение для редактирования фото — пользователи хотят расширять изображения за границы кадра. Исходное фото 9:16 нужно превратить в 16:9 без потери контента. Outpainting дорисовывает боковые области, сохраняя стиль, освещение и детали. Другой кейс — e-commerce: товар на белом фоне, нужно показать его в интерьере. AI создаёт окружение без повторной съёмки. Третий пример — пользователь делает скриншот и хочет расширить его до полноценной сцены. Мы — команда с 5+ годами опыта в мобильной разработке и интеграции AI, реализовали более 10 проектов с outpainting: от фоторедакторов до визуальных поисковиков. Ниже — технические детали, типичные ошибки и рабочие решения.

Какие проблемы решает 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 управления расширением

Паттерн взаимодействия:

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

Процесс работы: от идеи до релиза

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

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

Типичные проблемы и их решения

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

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

Сроки

Базовый outpainting с DALL-E 2 (фиксированные направления расширения) — от 5 до 7 дней. Интерактивный draggable холст с произвольным позиционированием, множественные итерации, история — от 3 до 4 недель.

Если ваш проект требует outpainting, закажите консультацию — мы подберем оптимальное решение. Получите консультацию по внедрению outpainting в ваше мобильное приложение — свяжитесь с нами, мы подготовим детальное коммерческое предложение.