ノーコードLLM統合アプリのdifyでGPT-4oと連携してみた

# はじめに
- ノーコードプラットフォームDifyとAIツールOpenAIの連携を試してみました。
- この記事では、DifyとGPT-4oの統合手順と開発者にとっての利点を詳しく探ります。
- Difyはバージョン0.6.8以降でGPT-4oに対応しています。

## OpenAIとは
OpenAIは、先進的な人工知能技術を提供する企業であり、特にGPT-4などの強力な言語モデルで知られています。これらのモデルは多様なタスクに対応し、高度な自然言語処理を実現します。

https://openai.com/

<iframe width="560" height="315" src="https://www.youtube.com/embed/DQacCB9tDaw?si=zH0wk_Auf-YD11f5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

## Difyとは
DifyはオープンソースのLLMアプリ開発プラットフォームです。RAGエンジンを使用して、エージェントから複雑なAIワークフローまでLLMアプリを編成します。

https://dify.ai/jp

<iframe width="560" height="315" src="https://www.youtube.com/embed/A0w9JAUZwbk?si=_596dx813dDLvuBp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# 前提の環境の説明
- OS: Windows 11
- OpenAI APIキーを取得して利用する
- DifyはDocker Desktopを使用して環境を構築する

# 導入のプロセス

## OpenAIのセットアップ
- OpenAIの公式サイトからAPIキーを取得します。
- APIキーは後でDifyの設定で必要になります。APIは使ったぶんだけ使用料はかかるので、学ばせるドキュメント量、チャットするときのデータ量などは気をつけてください。

https://trends.codecamp.jp/blogs/media/how-to-register-open-aii-account-and-obtain-api-key

## DifyのDockerのインストール
- 公式サイトの手順にそってDocker Composeを使用してインストールします。
  https://docs.dify.ai/getting-started/install-self-hosted/docker-compose
- 複数のコンテナが起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/91975d95-1578-0b77-d6e1-4ba9f897b813.png)

# OpenAIとDifyの連携のプロセス
- DifyのWebサイト[http://localhost/apps]にアクセスする。初回は管理者アカウントの登録してログインする。
- Difyの設定でOpenAIをモデルプロバイダーに追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/95735044-88c7-1034-83e3-cbc88a217d8d.png)


- +ADD MORE MODEL PROVIDERからOpenAIを選択して、次にモデルを追加する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/3c553c15-9bf8-f907-81b0-994c26f0c104.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/3f3c3a8b-6a75-296d-16b3-a72e81a93082.png)

- セットアップの画面でAPIキーを入力して、OpenAIのモデルを利用可能にする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/74605924-094b-b8fa-bab1-7fec54abc197.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/954f19d1-7639-ccad-0926-c7e5a8dbfaed.png)
こんな感じで使えるモデル一覧が利用可能になる

モデルプロバイダーの右上のシステム設定の画面を表示する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/dd9ee7b1-88a7-f97d-3a4f-cc1dc235d215.png)
埋め込みモデル、音声toテキスト、テキストto音声などもデフォルトのものを使ってみる。
再ランクモデルなどは、cohere社のAPIを使えばモデルが選択できそう。

https://docs.dify.ai/getting-started/readme/model-providers

# ナレッジの登録
- チャットボットに学習させいたファイルの情報をナレッジとして登録する。ナレッジのページを開く。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/e86fcf4d-5de3-4da2-e4aa-f17aff3e751a.png)
- 知識を作成をクリックする。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/7cc44c77-b1db-cd0c-8ec4-caeb7874e1d0.png)
- 登録したいテキストファイルをドラッグして登録する。次へをクリックする。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/3460fa1d-918e-db00-0bbb-c9b750fbe632.png)
- 保存して処理をクリックして、ドキュメントが登録されるのを待つ。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/ff38cdf4-c6d4-b69c-875b-c0f2cd5dc971.png)
- ナレッジを登録したあとにコンテキストの追加ボタンをクリックする。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/76ae5586-1934-de18-ba58-4f3f4bb1c17e.png)
- 登録したい知識を選択して、追加ボタンをクリックする。

# チャットボットを検証する
- スタジオをクリックして移動する。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/a22b77f1-2720-0cbc-c8a4-4e2def5a1bea.png)
- 次を選択してシンプルなアプリを作成する。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/b24c7846-87b7-732c-8336-1b06fdcc7f58.png)
- アプリのアイコンと名前を定義して、作成するをクリックする。
- 次のような画面でアプリの定義をする。右上でまずは、モデルを選択する。
- システム推論モデルは　gpt-4oに変更する
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/a854be43-d1a8-f74e-2915-17285595bef4.png)
 
- コンテキストには先程登録したナレッジを登録する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/f419d0ff-413b-59b8-17aa-a466e2feae8b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/89a8a229-b0fa-245b-22ae-a463e80298be.png)


- 次のような機能も追加してみる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/14ef144b-90c6-c2a6-6aeb-64fb9ff05b90.png)

- チャットボットの設定を更新して、アプリを実行してみる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/93dfdac9-bf71-df52-ca0f-8244b66caaa7.png)

# チャットボットを検証する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/75825277-ffc4-bff9-4932-98936aa9cd05.png)

Start Chatをクリックして、チャットを開始する。

回答のソースもとも示してくれた。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/4938e876-5cbc-310f-b1e4-637353de3b80.png)

プレイボタンを押すと、文字を読んでくれる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/3170b97c-cf99-ccf0-c013-ee4f250dbb9c.png)

画像を入力すると、それもふくめて質問できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/440f555c-1d62-23aa-87bf-c4e16288147e.png)

マイクボタンで音声入力もできるが、これはWindows 11の音声入力でいいかな・・・。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648069/4d28d2f8-bf8b-6f11-ebbe-1697598a1ed0.png)

# まとめ
- **Difyの利用:** 数十分のノーコード開発により、gpt4-oと連携するシンプルなRAGチャットボットを構築できました。
- モデルプロバイダーで「セットアップ」の設定で使用可能なモデルを一括で登録できました。
- テキストエンベディング、音声からテキストへの変換（音声toテキスト）、テキストから音声への変換（テキストto音声）なども指定できました。

# コメント
すでにGTP4-oで試されている記事などありますが、モデルプロバイダーで使用可能なモデルを一括で登録できたり、テキストエンベディングの活用をフォーカスして書いてみました。