Closed JudahMantell closed 1 year ago
Hi, I'm new here and am trying to implement the REST API with vanilla js and am having a lot of trouble.
currentImage is a base64 string of the input image, and getFinalMask() returns a base64 string of a drawn mask also in the same format.
currentImage
getFinalMask()
After a lot of trial and error, it looks like this format works, but I always get an error 500.
Any help would be appreciated!
async function sendData() { const prompt = promptInput.value; promptInput.value = ""; const maskData = getFinalMask(); let maskBlob = await base64ToBlob(maskData, "image/png"); let imageBlob = await base64ToBlob(currentImage, "image/png"); const formData = new FormData(); formData.append("init_image", imageBlob); formData.append("mask_image", maskBlob); formData.append("mask_source", "MASK_IMAGE_WHITE"); formData.append("text_prompts[0][text]", prompt); formData.append("cfg_scale", "7"); formData.append("clip_guidance_preset", "FAST_BLUE"); formData.append("samples", 1); formData.append("steps", 30); const engineId = "stable-inpainting-512-v2-0"; const apiHost = "https://api.stability.ai"; const response = await fetch( `${apiHost}/v1/generation/${engineId}/image-to-image/masking`, { method: "POST", headers: { Accept: "application/json", Authorization: `Bearer ${apiKey}`, }, body: formData, } ); console.log(response); console.log(response.text); } async function base64ToBlob(b64Data, contentType) { b64Data = b64Data.split(",")[1]; const byteCharacters = atob(b64Data); const byteArrays = []; for (let offset = 0; offset < byteCharacters.length; offset += 1024) { const slice = byteCharacters.slice(offset, offset + 1024); const byteNumbers = new Array(slice.length); for (let i = 0; i < slice.length; i++) { byteNumbers[i] = slice.charCodeAt(i); } byteArrays.push(new Uint8Array(byteNumbers)); } return new Blob(byteArrays, { type: contentType }); }
Image dimensions were not multiples of 64.
Hi, I'm new here and am trying to implement the REST API with vanilla js and am having a lot of trouble.
currentImage
is a base64 string of the input image, andgetFinalMask()
returns a base64 string of a drawn mask also in the same format.After a lot of trial and error, it looks like this format works, but I always get an error 500.
Any help would be appreciated!