Stability-AI / rest-api-support

Stability REST API examples, issues, and discussions | https://api.stability.ai
107 stars 21 forks source link

Error 500 with Inpainting #25

Closed JudahMantell closed 1 year ago

JudahMantell commented 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.

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 });
}
JudahMantell commented 1 year ago

Image dimensions were not multiples of 64.