Mask_input in out-paint-in-paint

[bobgus39]

Hi,

I am working on integrating the inpaint/outpaint API and have a few specific questions regarding how to proceed. My goal is to allow users to upload an image and draw a mask directly on it in a React application. Then, I need to send both the image and the mask to the API for inpainting or outpainting processing.

I understand that the API accepts binary images for the main image (input_image) and the mask (input_mask). However, I have some questions to ensure I am sending the data correctly:

1.  Mask on the Image:
•   Could you confirm if the mask needs to be exactly the same size as the main image?
•   What is the expected format for the mask (e.g., alpha channel for transparency)?
2.  Data Format and Submission:
•   Is it correct to send the mask as an image file (e.g., PNG) generated from an HTML5 canvas?
•   Is there a specific format that the API prefers for masks (e.g., PNG with a transparent background)?
3.  Outpainting Process:
•   For the outpaint_selections parameter, could you provide more details on how to specify the directions and distances?
•   Is it possible to combine inpainting and outpainting in a single request, and if so, how should the parameters be structured?

Here is an example of how I am currently preparing and sending the request:

const handleSubmit = async (e) => { e.preventDefault();

// Get the mask data from the canvas const maskData = canvasRef.current.canvasContainer.children[1].toDataURL('image/png');

const formData = new FormData(); formData.append('input_image', image); formData.append('input_mask', dataURLtoFile(maskData, 'mask.png')); formData.append('outpaint_selections', direction); formData.append('inpaint_additional_prompt', prompt);

try { const response = await axios.post('http://127.0.0.1:8888/v1/generation/image-inpaint-outpaint', formData, { headers: { 'Content-Type': 'multipart/form-data', }, }); setResult(response.data); } catch (error) { console.error('Error:', error); } };

const dataURLtoFile = (dataurl, filename) => { const arr = dataurl.split(','); const mime = arr[0].match(/:(.*?);/)[1]; const bstr = atob(arr[1]); let n = bstr.length; const u8arr = new Uint8Array(n); while (n--) { u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], filename, { type: mime }); };

I appreciate any guidance you can provide to ensure I am following best practices and sending the data correctly.

Thanks and regards

[mrhan1993]

1. The image and mask do not have to be the same size, but it is important to note that the program will internally scale the mask to the same size as the image.
2. There is no requirement for the format of the mask. Either png or jpeg is feasible.
3. You can specify it directly. For example, if you expand 100px to the left, specify outpaint_selections = ["Left"], and outpaint_distance_left = 100.

The last question is yes, just send the parameters of inpaint and outpaint together.