[JavaScript][Trial&Error] OpenAI Dalle2 API로 생성한 이미지를 Blob 형태로 만들기

이미지는 Firebase Database에 직접적으로 업로드할 수 없다. 따라서 이미지를 Firebase Storage에 저장하고 저장된 url을 Database에 저장해야한다.

 

이미지를 Firebase Storage에 업로드하려면 이미지가 Blob형식이어야 하는데, 이를 변환하는 과정에서 어려움을 겪었다.

 

Dalle2를 통해 이미지 생성을 하는 방법은 기본적으로 다음과 같다.

const imgResponse = await openai.createImage({
  prompt:JSON.stringify(p.content),
  n:1,
  size: "256x256",
})

openai.createImage를 통해 생성을 하고, prompt는 Dalle2에게 주는 입력값, n은 받을 사진의 개수, size는 사진의 크기이다. 이런 방식으로 이미지를 생성하면 다음과 같이 이미지의 url을 얻을 수 있다.

 

const url = imgResponse.data.data[0].url;

 그러나 여기서 문제는 이미지 파일을 Firebase Storage에 올리기 위해 Dalle2가 제공해주는 url을 fetch하면 CORS문제가 발생한다. 

 

그러다가 공식 문서를 다시 보니 이미지 생성할 때 format을 url이 아닌 b64로 지정할 수 있었다는 것..! (내 n시간 ㅠㅠ)

Format을 지정하는 방법은 다음과 같다.

const imgResponse = await openai.createImage({
  prompt:JSON.stringify(p.content),
  n:1,
  size: "256x256",
  response_format: 'b64_json',
})

response_format을통해 지정할 수 있다. 이렇게 되면 url을 fetch하지 않고도 받은 b64를 blob 형태로 만들어주면 된다. Blob으로 만들어주는 방법은 다음과 같다.

const blob = b64toBlob(imgResponse.data.data[0].b64_json);

const b64toBlob = (base64Image) => {
    const byteCharacters = atob(base64Image);
    const byteNumbers = new Array(byteCharacters.length);
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    const byteArray = new Uint8Array(byteNumbers);
    const arrayBuffer = byteArray.buffer;
    return new Blob([arrayBuffer], { type: 'image/jpeg' });
}

이렇게 blob형태를 Firebase Storage에 올려주면된다! Storage에 올리는 방법은 다음에 기회가 되면 글을 작성해보겠다.

 

그럼 즐개~ (즐거운 개발이라는... 뜻........)  

 

Dalle2를 사용해서 만든 고양이 사진