Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
Cloudflare Workers AI의 Text-to-image 모델인 flux-2-klein-4b를 사용하여 문자열로부터 이미지를 생성하는 방법을 다룹니다. FormData를 통한 파라미터 전달 방식과 Base64 인코딩된 응답을 Data URL로 변환하여 프론트엔드에 전달하는 구현 과정을 설명합니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Qiita AI의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기주의
이 기사는 2026년 7월 시점의 것이며
서비스나 이용 가능한 모델 등은 향후 변경될 가능성이 있습니다.
Cloudflare Workers AI를 사용하여 사용자가 입력한 내용으로부터 이미지를 생성하기 위한 메모
Workers AI Models 페이지에서 Task Types를 Text-to-image로 필터링합니다.
이번에는 flux-2-klein-4b라는 것을 사용했습니다.
※ 이에 따르면 apache-2.0 라이선스인 것 같습니다.
Flux의 다른 것들은 flux-non-commercial-license이기도 하므로 이용 시 확인이 필요합니다.
flux-2-klein-4b의 Parameters를 봐도 input은 multipart라는 것을 전달하도록 되어 있으며, 그 안에는 body, contentType을 전달한다고 적혀 있습니다.
이게 무슨 뜻이지? 라는 생각이 들었습니다😅
즉 무엇을 전달하는 걸까?🤔🤔
ChangeLog의 Launching FLUX.2 [klein] 4B on Workers AI 아래의 내용이 기재되어 있으며, FormData에 파라미터를 넣고, Response를 생성한 뒤에 전달하는 것 같습니다.
const form = new FormData();
form.append("prompt", "a sunset with a dog");
form.append("width", "1024");
...
굳이 Response를 만든 다음에 전달하는 것은 굉장히 위화감이 느껴지지만...
앞선 코드의 설명에서는 FormData에 prompt, width, height를 전달하고 있습니다.
그 외에 어떤 것들을 전달할 수 있는지 궁금합니다.
확정적인 것은 아니지만
Generate or edit an image with FLUX.2 [klein] 4B가 전달 가능할 것 같은 느낌이 듭니다. (이 부분은 틀렸을 수도 있습니다.)
앞선 코드 설명의 resp에는 image라는 프로퍼티에 BASE64로 인코딩된 이미지 데이터가 들어 있습니다.
json의 응답(Response)으로 반환해도 되고,
Build an AI Image Generator Playground (Part 1) 영상에서는 data URL로 다음과 같이 반환하고 있습니다.
const dataUrl = `data:image/png;base64,${resp.image}`;
return new Response(dataUrl, { headers: { 'content-type': 'image/png' },
...
서버 측에서 data URL 형식으로 반환하도록 했을 경우의 프론트엔드 측 예시는 다음과 같은 느낌이 됩니다.
// 리퀘스트(Request) 전송
const req = new Request('<worker의 URL>', {
method: 'POST',
...
이런 식으로 생성됩니다.
위의 코드만으로도 문자열로부터 이미지를 생성할 수 있게 됩니다.
이것은 어디까지나 최소한의 구현이므로, 실제 용도를 고려하면 에러 핸들링(Error Handling) 등도 필요하며 고려해야 할 사항들이 여러 가지 나올 것이라고 생각합니다.