OpenAI Image API で 画像生成が上手くできないエラーの解決方法

はじめに

今回Open API（gpt-image-1）を使用し画像生成をする際に中々、画像生成をすることができない事象が発生しました。
なぜ、APIが上手く使えなかったかエラーの原因を解説していきます。

エラーの原因

まず、結論から話すと今回のエラーは Node.js 環境と Edge 環境で動作が異なることが原因でした。

Node.js 環境

サーバーサイドで JavaScript を実行する環境。
普通はブラウザで動く JavaScript をサーバー上で動かせるようにしたものです。
Next.js では runtime = "nodejs" を指定すると、Node.js 環境で API やサーバー処理が実行されます。

Edge 環境

クラウド上のサーバ―で軽量に JavaScript を実行できるようにした環境。
Next.js で runtime = "edge" を指定すると、世界中のエッジサーバーで処理される。

動くコード

export const runtime = "nodejs";

const image_base64 = response.data[0].b64_json;
const imageUrl = `data:image/png;base64,${image_base64}`;

Node.js 固定（runtime = "nodejs"）

OpenAI SDK は Node.js環境だとb64_jsonが返るようで、.urlが返ってこないと調べると出てきました。
そのため、Node.js固定でBase64を使うと確実に成功します。

動かないコード

const imageUrl = response.data[0].url;

rantime指定なし

Next.jsが Edge Runtime を選ぶ場合があり、runtimeを指定しないと Edge 環境では gpt-image-1 が URLのみを返すのでエラーになります。

まとめ

最初画像を生成する際、タイムエラーで処理が落ちているのかなと思いましたが、
そういったことではなく Open API で画像生成する際は .url で画像を返せないことが問題だと知ることができました。

コードを書く時のポイントは、
Node.jsでOpen API を使用し画像を生成するときは .b64_json を使用し、
Edgeや URLを使用したいときは .url を使用する。

これからは意識して開発に取り組みたいと思います。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼

下記記事ではCSSの紹介ページを運営していますので参考にしていただければと思います。
▼▼▼