Cloudflare Workers 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 だったりするので利用時は要確認

Worker 側の実装

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");
form.append("height", "1024");

// FormData doesn't expose its serialized body or boundary. Passing it to a
// Request (or Response) constructor serializes it and generates the Content-Type
// header with the boundary, which is required for the server to parse the multipart fields.
const formResponse = new Response(form);
const formStream = formResponse.body;
const formContentType = formResponse.headers.get('content-type');

const resp = await env.AI.run("@cf/black-forest-labs/flux-2-klein-4b", {
	multipart: {
		body: formStream,
		contentType: formContentType,
	},
});

わざわざResponseを作ってから渡すのはすごい違和感がありますが、、、

渡せるものの詳細

先のコードの説明では FormDataに prompt, width, height を渡しています。
他にどのようなものが渡せるのかが気になります。

確定ではないのですが
Generate or edit an image with FLUX.2 [klein] 4B が渡せそうな気がします。(ここは間違ってるかもしれないです。)

結果の返却

先のコード説明の resp には image というプロパティにBASE64でエンコードされた画像データが入っています。

jsonのレスポンスとして返してもいいですし、
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の形式で返すようにした場合のフロントエンド側の例はこのような感じになります。

// リクエストの送信
const req = new Request('<workerのURL>', {
    method: 'POST',
    // 省略
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        userInput: userInput, // ユーザーが入力した情報
    }),
});

const resp = await fetch(req);
if (!resp.ok) {
    // TODO 200以外の場合
    return;
}

const base64DataUrl = await resp.text();

// imgタグのsrcにレスポンスの内容(data URL)をそのまま設定
const imgElem = document.createElement('img');
imgElem.src = base64DataUrl;

// 設置したいところに追加
resultElem.appendChild(imgElem);

結果

こんな感じで生成されます。

最後に

上記のコードだけで文字列から画像を生成することができるようになります。

これはあくまでも最低限の実装なので、実際の用途を考えるとエラーハンドリングなども必要ですし、考慮すべきものがいろいろ出てくるかと思います。