Difyのローカル開発入門

# Dify？
ローコード(もしくはノーコード)で生成AIアプリを開発できるOSSツールです。
GitHubでソースが公開されています。

※GitHubリンク

https://github.com/langgenius/dify

環境構築したくないよという人向けに公式がSaaS版もでているようです。
無料枠もあるみたいですが、いろいろやろうと料金がかかりそうです。
※Dify公式リンク

https://dify.ai/jp

# ローカルでの環境構築

### dockerコマンドが使える環境まわりとソースコード取得

Difyはコンテナで動くようなのでDockerコマンドが動く環境を用意します。
今回はDocker Desktopを使います. 諸事情で使いたくない方はRancher Desktopがお手軽で個人的にはおすすめです。

https://rancherdesktop.io/

dockerコマンドが使える環境を整えたらGitHubからDifyソースを落としてきます。

```powershell.exe
> git clone https://github.com/langgenius/dify.git

```

### コンテナ起動

docker-compose.yamlが存在するディレクトリに移動してコンテナを立ち上げます。

```powershell.exe
> cd .\dify\docker\
> docker compose up -d

```

「Created」や「Started」が並んでいれば起動成功です。

![2024-06-08_19h07_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/a033f0ab-db5e-afb3-4c4e-a1025e86e0e9.png)

ブラウザからアクセスするとこんな感じです。
http://localhost

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/0a993ad8-3515-5686-19ea-b3e99957b734.png)

ここまで出来たら環境構築は完了です。


# いざ、Difyを触る
### 外部APIキーの設定など
ログイン用のメールアドレス、ユーザー名、パスワードを登録して中に入るとこんな感じの画面になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/485fedc9-5bdc-f964-fe03-0c4e980f1812.png)

右上のユーザ名＞設定＞モデルプロバイダーから外部LLMなどとの接続設定が行えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/f271a01c-be34-8b4c-b070-93b43457bd13.png)

今回はGeminiの設定をします。

登録済みであれば以下のURLから「キー APIキーを作成」ボタンを押すとキーが作成、取得できます。
※Gemini APIキー取得は以下からできます
※今回は無料で使えるものを使用しますが、接続先のキーが従量課金制などになっている場合は注意してください

https://aistudio.google.com/app/apikey?hl=ja&_gl=1*1ae9qoh*_ga*MTgxNDc1MjM1MS4xNzE1NDM0NjU5*_ga_P1DBVKWT6V*MTcxNzg0NTUwMC4yLjEuMTcxNzg0NTUwNi41NC4wLjM4MzU2NTc0NQ..

こんな感じで先ほどのポップアップの一番上に登録したものが出ていれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/db622dc7-0dfd-b1f2-5e3c-7b33e0a58e5c.png)

ポップアップを閉じて、「最初から作成」ボタンからアプリを作っていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/66cdb3b3-82f7-732a-31f1-8e36045d3502.png)

今回はテスト用のチャットボットとして、以下のようなチャットボットを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/9c7e0173-80e7-713f-79dc-b1bdc4947d03.png)

作成を押すと以下の画像のような画面に遷移するので、
手順と書かれているテキストエリアにどんな応答をしてほしいか、ターゲットはだれかなどの情報を記載していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/2b3cdf3f-24fe-d697-fb6d-6c972031af8e.png)

次に、デフォルトではgpt-4を使う設定になっているので、右上の公開する横の「gpt-4」の記載を使用するLLMに変えます。今回の場合はGemini Proになっていて右の黄色い「！」の注意マークが消えていればOK。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/f15eb9a8-338a-e5f5-fb33-de714aa28fe1.png)

ここまで出来たら公開する下のリフレッシュボタンを押してデバックとプレビューのところでちゃんと動いているか確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/5eca1572-b90b-3402-ade1-35625b372c97.png)

ちゃんと動いてそうですね、実際にアプリとして動かしたい場合は公開するボタンから、
アプリを実行したり、サイトに埋め込んだり、APIとして使ったりできるようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/81c480b0-7443-8a70-2678-067a1ee7de80.png)

アプリを実行してみたときの画面はこちら

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/88009955-cc18-2509-a7c3-8edc710989fa.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/582b9c33-c68c-9963-eceb-750249a41cdd.png)


# 終わりに
今回はDifyを触り始めるところまででした。
プロンプト部分をもう少しちゃんと書いてやると、返答の制度も上がると思うので、そこの調整や、ワークフロー機能を使ったもう少し高度な部分はまた、別の機会に。