Dify、アカウント登録から似非MAGIシステム構築まで30分で終わらせる

LLMアプリ開発プラットフォームである**Dify**について、アカウント登録から似非MAGIシステム構築まで**まさかの30分で完了**できたので、その備忘録になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/c50442b6-0cc7-413c-adee-e4ef1f7c169f.png)


:::note warn
メールアドレスの所持と、OpenAIの有料APIキー取得は時間に含んでいません。

:::

# 流れ
1.アカウント登録(2分)
2.初期設定(3分)
3.チャットボットの動作確認(5分)
4.シンプルなワークフローの動作確認(10分)
5.似非MAGIシステム構築(ワークフロー)(10分)

# 1.アカウント登録(2分)
Dify公式HPにアクセスします。
https://dify.ai/jp

`始める`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/da78299f-0582-4b15-8a5f-1c79fa626b53.png)

<br>

ログイン画面になります。
今回はメールアドレスでアカウント登録をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/994a7883-559f-4b0b-b821-3ef28be082a1.png)

<br>

メールアドレス宛に認証コードが届くため、
そちらで認証を実施するとさっそくDifyのスタジオ画面が開設しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/0580ed04-3c4e-4fbc-86fa-01fb49ece184.png)



# 2.初期設定(3分)
料金プランの確認と、OpenAI APIキーの登録を行います。

## 2.1 プランの確認
クレジットカード情報等は入力していませんが、念のため無料プランに登録されているかを確認します。
プロジェクト名の横の`アップグレード`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/2f9596d6-5d64-4f94-83e9-107ae10ac687.png)

<br>

無料プランにあたる`sandbox`ライセンスであることが確認できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/bc87890f-111d-4154-84d2-92771efa7d98.png)

## 2.2 モデルプロバイダーのインストール
無料の`sandbox`ライセンスだと、入力したテキストに対し200メッセージ(Dify定義)で利用制限がかかってしまうため、200メッセージを超えた場合はOpenAI API経由でLLM処理をしてもらうようにOpenAIのAPIキーを登録しておきます。

:::note info
Difyのプランページではメッセージクレジットについて以下の説明があります。

>1 回の AI 応答（gpt-3.5-turbo 使用）は 1 メッセージクレジット、gpt-4 使用時は 20 メッセージクレジットが必要です。チャットボットの設定で使用するモデルを変更できます（現在、エージェントアシスタントでは未対応）。プラン内のメッセージクレジットを使い切った後は、バージョンをアップグレードするか、ご自身の LLM API キーを使用してください。

https://dify.ai/jp/pricing
:::

<br>

それでは設定に入ります。
アカウントマークをクリックし、`設定`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/d1460573-477a-40ad-84b0-eb6fc7e63d37.png)

<br>

モデルプロバイダー画面にて、`OpenAI`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/5022f210-6962-4a25-951c-1477dc9e6d57.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/c1126c13-7ff5-490f-8942-6b642767ddd4.png)

<br>

続いて`セットアップ`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/e52023d6-4dd8-4f3e-997e-18aba4214612.png)

<br>

`API Key`を入力し、`保存`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/993deafc-1ac8-4f17-8404-15146a11d29e.png)

<br>

`システムモデル設定`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/244172a1-65c1-4976-9a21-c482f8ac54a7.png)

<br>

`システム推論モデル`と`埋め込みモデル`を選択し、`保存`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/2e1279c4-bea3-4f86-ad20-893906c526f8.png)





# 3.チャットボットの動作確認(5分)
それでは一番簡単そうな動作確認をしていきます。

まずはスタジオ画面から`最初から作成`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/bb6b40b8-e674-4289-8eef-d0eb622bd0af.png)

<br>

アプリの種類として`チャットボット`を選択し、`アプリのアイコンと名前`を設定して`作成する`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/42367a64-9663-4213-9aad-8a643788bd3a.png)

<br>

チャットボット画面（チャットプレイグラウンド）が開設しました。
左ペインのシステムプロンプトにあたる`手順`を記入し、右ペインで質問してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/057666cf-362a-484a-9899-b0b8d1d1c797.png)


```:システムプロンプト
あなたはギャルです。また、あなたは数学者でもあります。
回答は高校生にも伝わるレベルとし、ギャル語で生成してください。
```

```:質問
ラプラス変換について教えてください。
```


```:回答
えーと、ラプラス変換ね。なんかもう、難しそうでウザったいかもだけど、そんなに難しくないんだよね。

ラプラス変換っていうのは、時間ごとに変化する数（時間領域）を、頻度ごとに変化する数（周波数領域）に変換する方法のことを指すのよ。
みたいな、例えば毎日同じ時間に行う日課的なこと（時間領域）を、いつでもどこでも行えるようにする（周波数領域）みたいな感じで捉えるとわかりやすいかも。
具体的には、ある関数f(t)に対して、ラプラス変換の公式を使って新しい関数F(s)を生成するわけ。その公式っていうのが「F(s) = ∫_0^∞e^-st f(t) dt」なんだけど、これ見てもパニクりそうだよね。
でもまあ、ざっくり言えば、時間が進むにつれて変化する何か（f(t)）を、別の視点（周波数領域）から表現し直す方法ってことなんだから、そんなにコワがらないで欲しいな。

こんな感じで、数学ってちょっとディープだけど、ちゃんと理解すればめちゃくちゃ面白いもんなんだから、ぜひチャレンジしてみてほしいな～。
```

<br>

それなりの回答が得られたので、最後に`公開する` - `更新を公開`を押下して状況を保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/cdbc2f3e-f862-41ab-830f-b962a1c561f4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/c0c74966-82e9-4928-a70c-a306937e609e.png)


:::note warn
チャット履歴は保存されないため、出力回答は別途保存する必要があります。
:::





# 4.シンプルなワークフローの動作確認(10分)
続いて、ワークフローの作成と動作について確認をしていきます。

## 4.1 最終形イメージ
さきほどのチャットボットと同じように、質問文をLLMが解釈/回答するというシンプルなワークフローを構成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/9ca1f458-a32c-43a8-a5c5-1adf69b1c284.png)



## 4.2 設定および動作確認
まずはスタジオ画面から`最初から作成`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/bb6b40b8-e674-4289-8eef-d0eb622bd0af.png)

<br>

アプリの種類として`ワークフロー`を選択し、`アプリのアイコンと名前`を設定して`作成する`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/62639087-99c3-4fca-afca-dfcbbc51e4f8.png)

<br>

ワークフロー画面が開設されました。
`開始`というコンポーネントが初期配置されており、その後段に配置するものについての選択肢が開かれた状態になっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/19bd9250-f5f8-4b60-9603-f09bc1f6308b.png)

<br>

まずは、`開始`コンポーネントから編集します。
`開始`コンポーネントでは質問文を入力してもらう必要があるので、`入力フィールド`を押下し、変数名を作成して`保存`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/abe6f16c-ea6e-4369-ad75-07001fca3644.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/03e36418-2263-44c3-9afe-306148d050dd.png)

<br>

続いて、`LLM`コンポーネントを編集します。
以下の内容を`コンテキスト`に入力します。

```:コンテキスト
あなたはギャルです。また、あなたは数学者でもあります。
回答は高校生にも伝わるレベルとし、ギャル語で生成してください。
  開始 / {x} quesution
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/3975a1b8-c6ac-4304-896d-5e131e5ff315.png)

:::note info
`開始`コンポーネントの変数`question`を受け取るため、コンテキスト内に受け取る変数を入力します。
なお `/` (スラッシュ) で予測が表示されるのでワンクリックで挿入可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/aa4924e5-7402-494f-9f74-982070fb007b.png)
:::

<br>

最後に`終了`コンポーネントを作成します。
まずは`LLM`コンポーネントの`+`マークから`終了`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/065d517c-6870-452b-a142-d1a316ebcc17.png)

<br>

`終了`コンポーネントの`出力変数`を作成します。
LLMの出力を受け取るため、`LLM / text String`を候補からクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/731d2ca6-3426-4e00-955c-21cb85e8b506.png)
↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/7f86d193-98c3-43f8-a077-0e7a0a727a14.png)

<br>

それでは動作確認に移ります。
`公開する` - `アプリを実行`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/c438fc09-704f-476e-b3bc-e4ddbb4b99a0.png)

<br>

アプリケーション画面に遷移します。
左ペインに`入力`コンポーネントの変数`question`の入力ボックスが表示されるため、テキストを入力して`Execute`を押下すると、ワークフロー処理が実行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/bdf893c8-f697-4d85-942d-ef5ef9247067.png)

```:question
フーリエ変換について教えてください
```

```:result
ギャル語だとちょっと難しいかもだけど、頑張って解説するね！

フーリエ変換ってのは、ざっくり言うと時間領域で表されてる波形を周波数領域に変換する手法のことなのよね。なんか音楽とか聞いてて、低音と高音が混ざってるような感じで考えてみて！それをバラバラに分けることができるって感じ。
フーリエ変換のメリットは、それぞれの周波数成分がどのくらい含まれてるのかを見つけることができるってところ。だから音響工学とか通信とか、いろんなところで使われてるのよ！
でも、時刻と周波数の両方の情報がほしいときにはちょっと難しくなっちゃうの。それを解決するために使われるのがショートタイムフーリエ変換とかウェーブレット変換とか、もっと高度な手法だったりするわ。

まぁ、それでも難しいかもだけど、最初は波形を分解するってことだけ覚えておいて! ギャルでも数学は楽しいわよ♪
```

それなりの回答が得られたので、最後に`公開する` - `更新を公開`を押下して状況を保存します。




# 5.似非MAGIシステム構築(ワークフロー)(10分)
最後に、似非MAGIシステムについて作成していきます。

## 5.1 最終形イメージ
エ〇ァンゲリオンにおけるMAGIシステムのような構成を構築してみます。

３つの異なった視点/観点を持つLLMの並列処理と、それらのモデレーターとしてのLLMを最後に直列させた構造を採っています。

処理 | 読み方 | 役割
--- | --- | ---
MELCHIOR | メルキオール | 「科学者」としての意見
BALTHASAR | バルタザール | 「母親」としての意見
CASPER | カスパー | 「女」としての意見
MAGI | マギ | モデレーターとして回答を統括

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/f9ff7395-76f3-455d-8ef3-e44032fa19d8.png)


＃Azure AI Foundary プロンプトフロー版は以下

https://qiita.com/Higemal/items/0207d23d8c9bb054b185

## 5.2 設定および動作確認
まずはスタジオ画面から`最初から作成`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/bb6b40b8-e674-4289-8eef-d0eb622bd0af.png)

<br>

アプリの種類として`ワークフロー`を選択し、`アプリのアイコンと名前`を設定して`作成する`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/533584cb-1d39-4f47-befb-38319e6499d4.png)


<br>

`入力`,`MERCHIOR`,`BALTHASAR`,`CASPER`,`終了`の5コンポーネント作成については、前章 `4.2 設定および動作確認` に同じため割愛します。

`MERCHIOR`,`BALTHASAR`,`CASPER`のLLMコンテキストは以下です。

```:MERCHIOR
あなたは一流の科学者です。
科学的・論理的な視点で回答してください。
回答は500文字程度としてください。
　開始 / {x} question
```

```:BALTHASAR
あなたは子供を持つ母親です。
子供に諭すような優しさをもった視点で回答してください。
回答は500文字程度としてください。
　開始 / {x} question
```

```:CASPER
あなたは独身の女性です。
感情的・情緒的な視点で回答してください。
回答は500文字程度としてください。
　開始 / {x} question
```


<br>

`MAGI`コンポーネントについては4つの入力変数と3コンポーネントの結合点になり特殊なので以下に記載します。
4つの入力変数についてはコンテキストに入力すれば問題ありません。
3コンポーネントの結合点については、コンポーネント間の矢印をドラッグアンドドロップでつなげることで設定可能となります。

```:コンテキスト
あなたは中立的なモデレーターです。
以下のトピックに関する回答を得ました。
　開始 / {x} question

以下の回答について、肯定も否定もせず、意見を取りまとめてください。
意見のとりまとめ結果から、最も重要な結論となる事項を１点だけとりあげてください。
　LLM/MERCHIOR / {x} text
  LLM/BARTHASAR / {x} text
  LLM/CASPER / {x} text
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/dcfcf5a2-1515-4c6f-88b2-4341b39919ce.png)

<br>

それでは動作確認に移ります。
`公開する` - `アプリを実行`を押下します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/d3b04e0c-c30a-4081-b23d-bbd9d98cdfb6.png)


<br>

アプリケーション画面に遷移します。
左ペインに`入力`コンポーネントの変数`question`の入力ボックスが表示されるため、テキストを入力して`Execute`を押下すると、ワークフロー処理が実行されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/4d8eb302-bd8b-401e-ab52-0828ce06a716.png)

<br>

最後に`公開する` - `更新を公開`を押下して状況を保存します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/6b1a2b06-c453-4918-bcef-923b81237dc1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/e80a9c7f-e674-4f5e-8563-35f6e09b65c8.png)


## 5.3 似非MAGIシステムの回答
３つほど適当に質問をしてみます。

### １個目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/4d8eb302-bd8b-401e-ab52-0828ce06a716.png)


```:question
うま味調味料は使用するべきか、しないべきかどちらでしょうか
```

```:result
うま味調味料の使用に関する意見は多様で、使用するべきという意見もあれば、適度な使用を推奨する意見もあります。うま味調味料は食事の風味を引き立て、手軽に美味しい食事を作る手助けとなる一方、化学物質が含まれていることや、食材本来の味覚を鈍くする可能性が指摘されています。また、過剰な摂取は健康に悪影響を及ぼす可能性もあります。そのため、個々の健康状態や食事の目的に合わせて適切な使用を心掛けるべきでしょう。自然な素材からうま味を引き出す料理法も学ぶことが推奨されています。

最も重要な結論としては、「うま味調味料の使用はバランスが大切であり、食材本来の味を楽しむためにも、適度な使用と自然な素材からうま味を引き出す料理法も学ぶことが推奨されています」といえます。
```

<br>

### ２個目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/866a45d7-783f-4f6b-b84b-b849e7ecb84e.png)

```:question
寿命が長い動物と短い動物はどちらのほうが子供に愛情を注いでいるでしょうか
```

```:result
回答者たちは、生物学的な視点、個々の観察、個人的な解釈を用いて動物の親子間の愛情について考察しています。生活史理論に基づくと、一般的に寿命が長い動物は子供に多くの時間とリソースを投資し、寿命が短い動物は一度に多くの子供を産む傾向があります。しかし、これはあくまで一般的な傾向であり、全ての動物種がこのパターンに当てはまるわけではないとされています。また、愛情を科学的に定量化することは難しく、その定義は観察者によります。

一方、哲学的な視点からは、愛情は生涯の長さや短さではなく、その心の深さや強さによって決まるという意見があります。寿命が長い動物は子供たちが自立するまでの時間が長く、その間に愛情を形成し、深め、そして表現する時間が多いとされています。寿命が短い動物の親の愛情は、子供たちが生き残るために必要なスキルを急速に教えることに集中しており、その表現は短く、集中的だと解釈されています。

最も重要な結論としては、愛情の表現や深さは生物種や寿命による傾向があるものの、全ての親が子供たちに愛情を注ぐことは間違いないという点が挙げられます。
```

<br>

### ３個目

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/201787/bdf661f3-12af-47cf-b502-0529bf9c3a58.png)


```:question
ハリネズミのジレンマの解決方法を教えてください
```

```:result
ハリネズミのジレンマについての回答は3つありますが、全ての回答が一定の共通点を持っています。それは、ハリネズミのジレンマを解決するためには、「理解」「尊重」「コミュニケーション」が重要であるという点です。具体的には、自分自身と他者の感情や欲求を理解し、それを尊重すること、そしてその感情や欲求を適切に伝えるコミュニケーションが重要であると示されています。

一つ目の回答は、科学的、論理的な手法を用いてジレンマを解決する方法を提案しています。具体的には、「コミュニケーション」「エンパシー（共感）」「自己認識と自己改善」の3つの手法を挙げています。

二つ目の回答は、自己と他者、そして自己と他者の関係性を理解すること、自己開示というスキルを磨くこと、信頼関係を築くことを挙げています。

三つ目の回答は、個々の理解とエンパシー、そしてコミュニケーションを深めることを提案しています。具体的には、相手の弱さや欠点を受け入れ、自分の感情を上手に伝えること、そしてコミュニケーションを通じて互いの距離感を調整することを挙げています。

以上の回答を基にすると、ハリネズミのジレンマを解決するための最も重要な結論は、「自己と他者の理解、尊重、そして適切なコミュニケーション」が必要であるということが挙げられます。
```


<br>





# 最後に
アプリ作成としては非常に簡単かつ短時間で作成が可能でした。
他にもRAGやWebスクレイピングなども利用可能らしく、アイデア次第でより柔軟かつ高機能な利用ができると思いますので、これからも挑戦してみようと思います。




# 参考

https://tech-lab.sios.jp/archives/45587