（前編）【非エンジニア向け】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キーに差し替えてください）

追記

他の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形式である必要があるようです。

追記（再掲）

パラメータ

今回は特にトラッキングする用途もないので、つけません

ボディ

こちらにある通り、ボディの形式は「form data」を選択すればいいようです。

そして、こちらにある通り、Stable Diffusionに渡す画像生成のためのプロンプトは、キー「prompt」として、値に画像生成のテキストを入れる（つまり、変数「input」を設定）すればいいようです。

追記

ここまでで、無事referenceを参照しながらDify側でHTTPリクエストの設定をすることができました！

おつかれさまでした！

動かしてみる

動かしてみると、Stable Diffusion側に渡すプロンプトは英語でなければいけない、というエラーが出ます。なので英語で記載してください（あるいは、どんな言語で入力されてもいいように、「入力」ブロックと「HTTPリクエスト」ブロックの間に英訳のためのブロックをいれてもいいですね）。

エラーメッセージ

Stable Diffusion側に渡しているテキストが大きすぎるとのことなのですが、inputには「girl」と単語だけにしているので、おそらくリクエスト全体としてのテキストが多すぎるのかもしれません。

追記

ただ、日本語でinputを入れると、出力画像の中身は空っぽですが、無事HTTPリクエスト自体は通っていることがわかります。

おわりに

完璧に動いていないので、次回もトライしてDifyから画像生成できるように頑張ります！

最後までお読みいただき、ありがとうございました！