בניית AI Outpainting ל-iOS ואנדרואיד: מדריך מלא

כיצד לבנות Outpainting מבוסס בינה מלאכותית ל-iOS ואנדרואיד: מהקנבס ליצירה

קיבלנו בקשה: אפליקציית עריכת תמונות ל-iOS — משתמשים רוצים להרחיב תמונות מעבר למסגרת. תמונה מקורית ביחס 9:16 צריכה להפוך ל-16:9 מבלי לאבד תוכן. Outpainting מצייר אזורים צדדיים תוך שמירה על סגנון, תאורה ופרטים. מקרה נוסף — מסחר אלקטרוני: מוצר על רקע לבן צריך להיות מוצג בתוך חלל פנים. הבינה המלאכותית יוצרת את הסביבה ללא צילום חוזר. דוגמה שלישית: משתמש מצלם מסך ורוצה להרחיב אותו לסצנה מלאה. אנחנו צוות עם ניסיון של 5+ שנים בפיתוח מובייל ובשילוב בינה מלאכותית, שסיפקנו למעלה מ-10 פרויקטים עם outpainting — מעורכי תמונות ועד מנועי חיפוש חזותיים. להלן פרטים טכניים, מלכודות אופייניות ופתרונות עובדים.

אילו בעיות outpainting פותר?

יחסי גובה-רוחב לא סטנדרטיים — אינסטגרם דורש 1:1, אבל המקור הוא 4:3. חיתוך מאבד הקשר. Outpainting מאריך את הרקע תוך שמירה על הקומפוזיציה. הרחקת המצלמה — הצלם צילם תקריב, אבל צריך תמונה רחבה. פעולה אחת והבינה המלאכותית מציירת את הסביבה. פריסות יצירתיות — מעצב צריך לשלב מספר תמונות מורחבות לקנבס אחד. Outpainting הופך תפרים לבלתי נראים.

כיצד להכין מסכה ל-outpainting?

המהות של outpainting: מניחים את התמונה המקורית על קנבס גדול יותר (עם שוליים ניטרליים), מעבירים אותה ל-API כתמונה + מסכה (מסכה = אזורים ריקים חדשים), ומקבלים תוצאה מלאה.

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)
}

מיקום המקור על הקנבס קובע את כיוון ההרחבה: מרכז — כל הצדדים, קצה שמאלי — רק ימינה, שרירותי — המשתמש שולט באמצעות גרירה.

ממשק משתמש לשליטה בהרחבה

דפוס אינטראקציה:

1. המשתמש רואה את התמונה המקורית בתוך מסגרת קנבס.
2. הוא יכול לגרור את התמונה בתוך המסגרת (או להזיז את המסגרת).
3. הוא בוחר את יחס הגובה-רוחב הסופי: 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)
}

איזה מנוע בינה מלאכותית לבחור ל-outpainting?

אם אתה צריך אינטגרציית API פשוטה ללא התאמה אישית, DALL-E 2 מספק איכות מצוינת מחוץ לקופסה. אם אתה צריך התאמה אישית (סגנון, שליטה בדוגמיות, גדלים שרירותיים), Stable Diffusion עדיף. Stable Diffusion יכול להיות זול פי 2 לתמונה בנפחים גבוהים בהשוואה ל-DALL-E 2. אנחנו בוחרים את המנוע לפי המשימה של הלקוח ועוזרים בפריסת המודל על שרתים פרטיים. מפרטי API רשמיים: OpenAI DALL-E API. ראו גם ויקיפדיה על Outpainting.

השוואה: DALL-E 2 מול Stable Diffusion ל-outpainting

תהליך עבודה: מרעיון לשחרור

1. אנליטיקה — לימוד חוויית משתמש קיימת, הגדרת יחסי מטרה ומקרי שימוש.
2. עיצוב — wireframe של קנבס אינטראקטיבי, חוזי API.
3. יישום — לוגיקת לקוח ב-Swift/Kotlin, אינטגרציית backend.
4. בדיקות — תקינות מסכה, מקרי קצה (תמונות קטנות/גדולות מאוד).
5. פריסה — פרסום ל-App Store/Google Play, ניטור.

תוצרים: מה כלול בעבודה

אנחנו מבטיחים תקופת תמיכה של 6 חודשים ומציעים אחריות להחזר כספי של 30 יום על העבודה שלנו.

בעיות אופייניות ופתרונותיהן

תפר נראה לעין בגבול בין החלק המקורי לחלק שנוצר — מתרחש כשהמקור ממוקם עם קצה חד על רקע ניטרלי. פתרון: מעבר הדרגתי קטן (feather) בקצוות המסכה — טשטש את המסכה ב-10–20 פיקסלים.

אי-התאמה בסגנון — המודל יצר משהו בסגנון שונה לחלוטין. ה-prompt צריך לתאר את כל הסצנה, לא רק את החלק החדש: "נוף עירוני שטוף שמש, פוטוריאליזם, גוונים חמים" ולא "המשך".

לוח זמנים

Outpainting בסיסי עם DALL-E 2 (כיווני הרחבה קבועים) — מ-5 עד 7 ימים. קנבס אינטראקטיבי עם גרירה, מיקום שרירותי, איטרציות מרובות, היסטוריה — מ-3 עד 4 שבועות.

תמחור

פיתוח תכונת outpainting מתחיל ב-$5,000 ליישום בסיסי ויכול להגיע עד $15,000 למודול אינטראקטיבי מלא. צור קשר להצעת מחיר מפורטת.

אם הפרויקט שלך דורש outpainting, הזמן ייעוץ — נמצא את הפתרון האופטימלי. קבל ייעוץ על יישום outpainting באפליקציית המובייל שלך — צור קשר, נכין הצעה מסחרית מפורטת.