（前編）【非エンジニア向け】DifyでStable Diffusion API呼び出してみた！【ノーコードアプリ開発】
こんにちは、RUNO.です！
本日は、DifyというノーコードでAIを用いたアプリ開発ができるものを活用して、より色々なことをStable Diffusionでできるようにしよう！
と言うテーマです。
先に断っておくと、今回、無事APIを呼び出すことには成功するのですが、どうやらDifyからStable Diffusion側にリクエストを渡す際のテキストの総量が多くなりすぎているようで、画像生成はうまくいっていません。
こちらが解消できましたらまた記事にします！
（追記）画像生成まで無事上手くいきました！！！！↓↓↓
DifyからStable DiffusionのAPIを無事叩くには、どこに何をいれればいいのか？という観点であれば参考になるかなと思います！
Dify側の準備
ログインしよう
こちらのリンクから、Googleアカウントログインまたはgithubログインをしてください。
Difyを開いたら、「最初から作成」をクリック
アプリタイプは4つから選べます。今回はカスタマイズして制作したいので「ワークフロー」を選択しました。
「開始」のブロックの右側にくっついている「＋」マークにカーソルと当てると、次の挙動を選ぶことができます。これを繰り返してブロックをパズルのように繋いでいき、複雑なアプリケーションでも視覚的に構築することができます。
Difyアプリの構成の例
まず、生成したい画像についてユーザーがテキストで入力
入力されたテキストについて、「〇〇のように」などの参考になる文言があれば、その内容をLLMで取得する
取得してきた参考情報も加味し、より精緻な命令がStable Diffusion側へ
行くように、言語モデルを噛ませて画像生成命令のテキスト（ユーザーが入力したもの）を再構築StableDiffusionAPIに接続
画像生成結果を表示
これらを実現するように、画面をぽちぽちしてブロックを繋いでいきます。
今回つくるアプリケーションの構成
今回は簡単のため、上記構成から要素を絞って非常にシンプルにします。
まず、生成したい画像についてユーザーがテキストで入力
StableDiffusionAPIに接続
画像生成結果を表示
変数について
Difyでは、各ブロックの入出力を変数として管理し、別のブロックの処理に利用することができます。
今回は、
「開始」ブロックでユーザーが入力するテキストを「input」という名称の変数
「終了」ブロックで表示するStable Diffusionで生成した画像が格納された変数を「files」
としています。
このあとのAPI設定の箇所でこれらの変数が出てきます。
DifyでStable Diffusion APIを呼び出す
Stable Diffusion APIを取得する
上のリンクに登録、ログインしたら、右上のアカウントアイコンをクリックします。
するとAPI keyが表示されているので、これをコピーします。
Dify側の設定
「HTTPリクエスト」のブロックをクリックすると、画面右半分に
このような編集画面が出てきます。
結論、この通りに組めばHTTPリクエストは無事通ります。
（※ただし、ヘッダーのAuthorizationの値の「your_API_key」部分を、上で取得したAPIキーに差し替えてください）
追記
上記の設定の場合、inputの形式はテキストのままでは上手くいかないので、JSONをbase64エンコードした形に変換してから渡す必要があります。
inputの形式をテキスト形式のままでHTTPリクエストを通すには、キー「Accept」の値を「image/*」にする必要があります。
他のAPIを叩く時の参考のため、これがAPIドキュメントのどこにかいてあるか？をみて行きます。
上の画像を見ると、HTTPリクエストブロックは次の要素で構成されているので、それに沿って見ていきます。
API
ヘッダー
パラメータ
ボディ
タイムアウト（今回は無視）
【参考】DifyでAPIを叩くためのAPIリファレンスの見方
今回使ったAPIのAPI referenceはこちらです。
それでは、一つ前の項で示したDify側のHTTPリクエストブロックの構成要素に沿って見るべき箇所を確認します。
HTTPリクエストブロックの構成要素① API
ピンクの枠で囲ったところが「POST」となっているのでPOSTを選択します。エンドポイントのURLはPOSTと書かれた青いブロックの右側にあるURLをそのままコピーします。APIの箇所はこれでOKです。
HTTPリクエストブロックの構成要素② ヘッダー
ヘッダーについてはこちらに記載があります。Authorizationをキーとし、値には得られたAPIキーを入れます（入力方法としては「Bearer your_API_key」という形で入れる必要があります）。
また、キー「Accept」値「application/json」を入れる必要があります。受け取る値がjson形式である必要があるようです。
追記（再掲）
上記の設定の場合、inputの形式はテキストのままでは上手くいかないので、JSONをbase64エンコードした形に変換してから渡す必要があります。
inputの形式をテキスト形式のままでHTTPリクエストを通すには、キー「Accept」の値を「image/*」にする必要があります。
パラメータ
今回は特にトラッキングする用途もないので、つけません
ボディ
こちらにある通り、ボディの形式は「form data」を選択すればいいようです。
そして、こちらにある通り、Stable Diffusionに渡す画像生成のためのプロンプトは、キー「prompt」として、値に画像生成のテキストを入れる（つまり、変数「input」を設定）すればいいようです。
追記
実はもうひとつ、「prompt」の他に設定する必要があり、
キー「output_format」に対し、値「webp」をpromptに並べて設定する必要があります。
上の画像（refenceのスクショ）の画面右半分の例のところを見ると、
「data」部分に「prompt」があり、それに並ぶ形で「output_format」があります。つまり、これもbodyの箇所に設定する必要があるのです。
ここまでで、無事referenceを参照しながらDify側でHTTPリクエストの設定をすることができました！
おつかれさまでした！
動かしてみる
動かしてみると、Stable Diffusion側に渡すプロンプトは英語でなければいけない、というエラーが出ます。なので英語で記載してください（あるいは、どんな言語で入力されてもいいように、「入力」ブロックと「HTTPリクエスト」ブロックの間に英訳のためのブロックをいれてもいいですね）。
エラーメッセージ
Node HTTPリクエスト run failed: Text size is too large, max size is 1.00MB, but current size is 2.63 MB.
Stable Diffusion側に渡しているテキストが大きすぎるとのことなのですが、inputには「girl」と単語だけにしているので、おそらくリクエスト全体としてのテキストが多すぎるのかもしれません。
追記
いまの設定の場合、JSONをbase64エンコードした形に変換してから渡す必要があるので、API側はその形式を期待しています。
inputの形式をテキスト形式のままで渡したせいでこのようなエラーが起こっているものと思われます。
ただ、日本語でinputを入れると、出力画像の中身は空っぽですが、無事HTTPリクエスト自体は通っていることがわかります。
おわりに
完璧に動いていないので、次回もトライしてDifyから画像生成できるように頑張ります！
最後までお読みいただき、ありがとうございました！
