Image Object Replacement Based On Prompt Tool

/**
 * Replaces a masked area of an image with content generated from a text prompt using the Stability AI API.
 * This function performs generative inpainting. To work, it requires a mask to specify the area for replacement
 * and a valid Stability AI API key.
 *
 * @param {Image} originalImg The original Image object to modify. Its 'src' should be loaded.
 * @param {string} prompt A detailed text description of what to generate in the masked area.
 * @param {string} maskDataUrl A string containing a data URL ('data:image/png;base64,...') of the mask image.
 *                             The mask must have the same dimensions as the original image. The area to be
 *                             replaced should be white (#FFFFFF), and the area to keep should be black (#000000).
 * @param {string} apiKey Your personal Stability AI API key.
 * @returns {Promise<HTMLCanvasElement>} A promise that resolves to an HTMLCanvasElement containing the modified image.
 */
async function processImage(
    originalImg,
    prompt = "a beautiful watercolor painting, high detail",
    maskDataUrl = "",
    apiKey = ""
) {
    if (!maskDataUrl) {
        return Promise.reject(new Error("A 'maskDataUrl' is required. Please provide a data URL for a mask image where the area to replace is white."));
    }
    if (!apiKey) {
        return Promise.reject(new Error("A Stability AI 'apiKey' is required."));
    }

    // This function uses the Stability AI API for generative inpainting.
    // API Reference: https://platform.stability.ai/docs/api-reference#tag/v1generation/operation/masking
    const engineId = 'stable-diffusion-xl-1024-v1-0';
    const apiUrl = `https://api.stability.ai/v1/generation/${engineId}/image-to-image/masking`;

    // The API requires a multipart/form-data request body.
    const formData = new FormData();

    // 1. Append the configuration parameters.
    formData.append('mask_source', 'MASK_IMAGE_WHITE');
    formData.append('text_prompts[0][text]', prompt);
    formData.append('text_prompts[0][weight]', 1);
    formData.append('cfg_scale', 7);
    formData.append('samples', 1);
    formData.append('steps', 30);

    // 2. Convert the original Image object to a Blob and append it.
    const originalImgBlob = await new Promise(resolve => {
        const tempCanvas = document.createElement('canvas');
        tempCanvas.width = originalImg.naturalWidth;
        tempCanvas.height = originalImg.naturalHeight;
        const ctx = tempCanvas.getContext('2d');
        ctx.drawImage(originalImg, 0, 0);
        tempCanvas.toBlob(resolve, 'image/png');
    });
    formData.append('init_image', originalImgBlob, 'init_image.png');

    // 3. Convert the mask data URL to a Blob and append it.
    try {
        const maskResponse = await fetch(maskDataUrl);
        if (!maskResponse.ok) throw new Error('Failed to fetch the mask from the data URL.');
        const maskBlob = await maskResponse.blob();
        formData.append('mask_image', maskBlob, 'mask_image.png');
    } catch (error) {
        return Promise.reject(new Error(`Invalid or unreachable maskDataUrl: ${error.message}`));
    }

    // 4. Make the API call to Stability AI.
    const response = await fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: formData,
    });

    if (!response.ok) {
        // Try to read the error message from the API response for better debugging.
        try {
            const errorData = await response.json();
            throw new Error(`API Error (${response.status}): ${errorData.message || 'Unknown error'}`);
        } catch (e) {
            throw new Error(`API Error (${response.status}): ${response.statusText}`);
        }
    }

    const responseJSON = await response.json();
    const base64Image = responseJSON.artifacts[0].base64;

    // 5. Create a new canvas from the resulting base64 image data.
    return new Promise((resolve, reject) => {
        const resultImg = new Image();
        resultImg.onload = () => {
            const resultCanvas = document.createElement('canvas');
            resultCanvas.width = resultImg.naturalWidth;
            resultCanvas.height = resultImg.naturalHeight;
            const ctx = resultCanvas.getContext('2d');
            ctx.drawImage(resultImg, 0, 0);
            resolve(resultCanvas);
        };
        resultImg.onerror = () => {
            reject(new Error("Failed to load the result image from base64 data."));
        };
        resultImg.src = `data:image/png;base64,${base64Image}`;
    });
}