Разработка 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 управления расширением
Паттерн взаимодействия:
- Пользователь видит исходное изображение в рамке холста.
- Может перетаскивать изображение внутри рамки (или двигать рамку).
- Выбирает итоговый aspect ratio: 16:9, 4:3, 1:1, или произвольный.
- Нажимает Расширить.
// 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
| Параметр | DALL-E 2 | Stable Diffusion (via Replicate/FAL) |
|---|---|---|
| Формат запроса | image + mask (PNG с альфа) | image + mask (PNG/JPEG) |
| Размеры | 256x256, 512x512, 1024x1024 | Любые кратные 64 |
| Поддержка outpainting | Да (как inpainting) | Да (через расширение холста) |
| Качество | Высокое, но мало контроля | Зависит от модели и LoRA |
| Скорость | ~10 сек | ~15-30 сек (в зависимости от размера) |
| Стоимость API | от $0.02 за 1024x1024 | от $0.01 до $0.05 за изображение |
Процесс работы: от идеи до релиза
- Аналитика — изучаем текущий UX, определяем целевые ratio и сценарии использования.
- Проектирование — wireframe интерактивного холста, API-контракты.
- Реализация — клиентская логика на Swift/Kotlin, бэкенд-интеграция.
- Тестирование — корректность маски, граничные случаи (очень маленькие/большие изображения).
- Деплой — публикация в App Store/Google Play, мониторинг.
Что входит в работу
| Этап | Результат |
|---|---|
| Консультация | Оценка проекта, выбор AI-движка, сроки |
| Разработка | Готовый модуль outpainting с документацией |
| Интеграция | Встраивание в существующее приложение |
| Тестирование | QA по чек-листу (швы, стиль, производительность) |
| Обучение | Документация и воркшоп для ваших разработчиков |
| Поддержка | 3 месяца бесплатной поддержки после релиза |
Типичные проблемы и их решения
Видимый шов на границе оригинала и дорисованной части — случается, когда оригинал помещён с резким краем на нейтральный фон. Решение: небольшой градиентный переход (feather) на краях маски — размываем маску на 10–20 пикселей.
Несоответствие стиля — модель дорисовала что-то совсем другого стиля. Промпт должен описывать всю сцену, не только новую часть: «солнечный городской пейзаж, фотореализм, тёплые тона» а не «продолжи».
Сроки
Базовый outpainting с DALL-E 2 (фиксированные направления расширения) — от 5 до 7 дней. Интерактивный draggable холст с произвольным позиционированием, множественные итерации, история — от 3 до 4 недель.
Если ваш проект требует outpainting, закажите консультацию — мы подберем оптимальное решение. Получите консультацию по внедрению outpainting в ваше мобильное приложение — свяжитесь с нами, мы подготовим детальное коммерческое предложение.