はじめてのDify

# はじめに
社内でDifyが話題になっているので乗り遅れないように試しにやってみる
SaaS版が公開されていて無料プランがあるので、
環境準備しなくてもすぐAIアプリ作れちゃう！
ちなみに試したのはSaaS版のほうです。

先に結論から言うと、記事書きながらだから３０分くらいかかったけど
記事書かなかったらDifyのアカウント作成からAIアプリ実行まで１０分でできたんじゃないかな、めっちゃ簡単でした

公開設定もあるから誰でも簡単にAIアプリが公開できるのはいいね！

# 参考
お試しの参考にしました。とってもわかりやすかったです。
Difyの紹介とよさについてはこちらのサイトが完璧に抑えているので割愛

https://qiita.com/minorun365/items/4c5dba1de7977c386249

# Difyにログイン

https://dify.ai/

より、 Get Started クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/44e19f6d-5104-8a77-4ef8-52b5467b2174.png)

アカウントは～Github か Googleか選べるのか。Googleにしておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/921c42a4-781c-52aa-ea43-4dc297820a8c.png)

ログイン成功、簡単！
では、話題のワークフローを作ってみよう。　最初から作成　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/b559e5c6-cd29-afde-87a1-cf69134f49ca.png)

# ワークフローを作成
ワークフロー　を選択して、名前と説明を入力。
適当に考えてみました。　作成する　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/b205e7df-8429-86a7-f966-630f115485f4.png)

ワークフロー編集画面へ移動した
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/53f31d22-28fb-5d7d-c171-c9b6e0da32ea.png)

最初に「開始」というモジュールをクリックすると、
画面右側にモジュール編集画面が現れた
入力フィールド右側の＋　クリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/29c7dde6-45fd-6f76-445b-ee1fee8aebb0.png)

入力欄が現れた
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/8b2e1599-2fb7-8c7c-2149-680298340021.png)

変数名を Input にした、ラベル名も自動的に入力された
保存　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/0ca31ac0-15c6-da10-0e51-f31d77d2d051.png)

画面戻った。Input が追加されたのがよくわかった
開始モジュール右側の　＋　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a72c131f-35db-94c6-46f2-f8bbc428940f.png)

色々選べそう、ここで開始モジュールの後の動きを決めるのね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/2eab449b-97aa-9989-4857-5623704b2fb3.png)

ツールタブクリックすると
いろんな外部サービスへの連携をやってくれそうだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5a4c793a-e106-79df-aaac-b540258b53b3.png)

検索窓より google って入れたら　絞り込まれた
GoogleSearch　を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/4b36d2d5-4700-7710-7175-802533e639b5.png)

画面出た。
承認するには　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ad804656-a201-48ef-4a68-62f546c6a87a.png)

APIキーの入力を求められた。
GoogleSearchするためのAPIキーが必要なのか、親切。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ff9e9fe5-6524-eb9d-f1c5-b76f49b83ec0.png)

※ ↑↑の 取得方法 をクリックするとAPI取得のための画面へ転送してくれた
Gmailでログインしたあと、メールと電話番号の認証をパスしたらAPIキーくれました
フリープランがあるので安心

https://serpapi.com/users/sign_in

無事APIキーを入手、入力しました。`` 保存 ``クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/35165d2c-9686-d26c-25ef-37b8c83fe2ad.png)

画面戻って　入力変数を求められた
/　を入力すると候補が出てきた`` input ``を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/07ea9179-9d47-6d0a-ad47-c13a5a5f9325.png)

できました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/7c5c0c02-388e-cd84-288e-7819ac311384.png)

`` 次のブロックを選択 ``クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/920e989c-939e-5379-7cff-b7366f773f14.png)

ブロックの画面が出る、`` LLM ``クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/7262a9ed-09dd-8ab2-00db-89a377e1e46d.png)

LLM画面出た。`` モデル ``クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/9228b722-88c0-999c-41a2-ddc98f2aaa5f.png)

MODELクリックして`` gpt-3.5-turbo-16k-0613 ``選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/49659352-aeec-4e52-8862-deafb75ec86e.png)

結果はこちら、他のパラメータはそのまましておく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/738164c0-24ac-1859-b9b8-f117e6d52d4f.png)

前の画面に戻って`` SYSTEM ``に質問を書く。
変数は {x}ってのをクリックすると呼び出し可能な変数の候補を自動的に選んでくれるので難しくなったです。
これでうまいことやってくれるかな…？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/1aa26362-2b5d-03a5-cae6-46baaab76950.png)

```
以下の「ユーザーの質問」に含まれる食材を使って、「Google検索結果」を用いておすすめのレシピを回答してください。
##制約事項
「ユーザーの質問」に含まれない食材はなるべく使用しないレシピを考えてください
一汁一菜になるようレシピを考えてください

「ユーザーの質問」：{{#1720762960739.Input#}}
「Google検索結果」：{{#1720763647108.text#}}
```

`` 次のブロック ``クリック
`` 終了 ``を選択しました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/74bb4bab-b39f-e2ff-e676-be9966b02576.png)

終了の画面
出力変数`` ＋ ``　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/390f0a53-9e69-b203-5e30-2bff02c7ab30.png)

出力変数にはさっきのブロックの出力結果を使う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/a4baf2ad-7996-32eb-bbfa-127d2a65df6e.png)

これで完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/229b1991-7c52-15db-5f7e-9561dfccd30b.png)

# 実行してみよう
最終的なワークフローはこんな感じになりました
画面右上の`` 実行 ``クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ae4de5eb-bc2d-7b63-b289-2b280863302a.png)

入力画面でた。
食材を入力して、、、`` 実行を開始 ``クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/062e00a7-90c7-af8f-4419-9bbfa5b1dd9d.png)

結果出ました！
指示の仕方がわかるかったからかスープの献立は出なかった…orz
が、いい感じではないでしょうか？！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3c580270-338e-882f-a23b-8b5b253440e6.png)

# 公開設定も選べる
怖くてできなかったけど、公開設定もできる。
これはすごいね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/bd75cf65-0f42-56ed-1ad8-b60020c5b49a.png)


# オマケ：作成画面の説明
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/acb2bd7b-62e3-0ca1-d1c0-b3feb79f0c1d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/3023d210-7187-94c9-f3a9-d41c87bf7360.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/65c407bc-0fb4-65ae-c40c-77d15e183e19.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/fbd3e4b2-d197-a15a-723e-58dd0f5083ae.png)