Dify に AIモデル（Gemini）を設定する

[前回](https://qiita.com/b-wind/items/8a0f1d6026b9998cf05a)は Dify のインストールと起動確認 まで実施しました。
今回は、生成AI「Gemini」からの返答を得られるところまで、環境構築を進めていきます。

## 初期ログイン完了まで
起動直後はユーザーが未登録の状態です。
最初に管理者アカウントを登録し、ログイン可能な状態にしておきます。

### ① 管理者アカウント情報の入力
管理者アカウントの情報（メールアドレス、ユーザー名、パスワード）を入力します。
その後、「セットアップ」ボタンをクリックします。

:::note info
管理者アカウントでログインすると、ここで入力したメールアドレス宛にログイン確認のメール（認証コード付き）が送られてきます。
:::

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/45fd803c-a9da-4b6a-bf15-debe0caba0d8.png" />

### ② ログイン
ログイン画面が表示されます。
管理者アカウントの情報（メールアドレス、パスワード）を入力してから、「サインイン」ボタンをクリックします。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/4a31314d-6f87-4d95-a4c7-5f19192f30c1.png" />

### ③ スタジオ画面の表示
ログインが成功すると スタジオ画面 が表示されます。
左上の 黒枠部分には「ワークスペース名」が、右上の黒枠内には「ユーザー名」が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/54f2c5a4-6dbe-42c5-956b-9cda3b45b5db.png)

これで、Dify を利用する準備が整いました。

## Gemini APIキー の取得
高性能なAIモデルを無料で幅広く利用できる「Gemini」を利用します。

::: note info
利用可能なトークン数で制限している他 AIモデルとは異なり、無料枠では「短時間での連続するリクエスト」に制限を設けているようです。
　**リクエスト数/分**　2 - 30 RPM
　**トークン/分**　　　32,000 - 1,000,000 TPM
　**リクエスト/日**　　1,500 RPD

有料枠に変更すると、上記の制限値が大きく緩和されます。
詳細については **[レート制限](https://ai.google.dev/gemini-api/docs/rate-limits?hl=ja)** を参照してください。
:::

### ① Google AI Studio の起動
Gemini の APIキー は、[Google AI Studio](https://aistudio.google.com/) 上で取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/0cc8304d-5449-41bb-a16e-b69ea180d658.png)

左下の「Explore models in Google AI Studio」をクリックすると、Google AI Studio のメイン画面が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/a0558e9b-9f99-44a9-9f49-49be312d5bc7.png)

### ② APIキーの取得
左上の「Get API Key」ボタンをクリックします。

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/39e15a38-4db2-4077-9d0d-fd03792f9b94.png" />

APIキー 画面が表示されたら、「API キーを作成」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/a4be6862-b9e9-4342-bb3f-b366cb294c95.png)

少しの時間の後、生成された API キーが表示されます。
「コピー」ボタンをクリックし、「APIキー」を保存しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/29b7b13a-6509-4c11-97f2-d7d229e01b5e.png)

### ③ API 利用規約の同意

生成した APIキー は、画面の下部に一覧表示されています。
「プラン」列のリンク "**お支払い情報を設定 使用状況データを表示**" をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/02046ebc-fbf3-441a-bba0-989884dfa2a0.png)

Google Cloud の「APIとサービス」画面へ切り替わります。
下のポップアップ画面が表示されたら、利用規約にチェックを付けて「同意して続行」をクリックします。

<img width="70%"  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/5516dd54-6898-446e-8007-8f54466c911a.png" />

ポップアップ画面が表示されないときは「すでに利用規約に同意済み」ということです。
その場合は、何もする必要はありません。

## モデルプロバイダー の新規登録
設定画面からモデルプロバイダーを追加し、先ほど取得した APIキー を登録します。

### ① アプリ編集画面を表示
Dify スタジオ画面の「アプリを作成する」-「最初から作成」をクリックします。

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/64054f76-fca6-43c8-a44d-bb5f8803ce77.png" />

アプリの種類は「チャットボット」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/6438cae2-df82-4381-a829-08132c126ee0.png)

「アプリのアイコンと名前」および「説明」を入力してから、「作成する」ボタンをクリックします。
　**アプリのアイコンと名前**：　**テストアプリ１**
　**説明**　　　　　　　　　：　**最初に作成したチャットボットのアプリ。**
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/74b562ad-c080-4455-ad12-f3034cfd807c.png)

アプリを編集するためのオーケストレーション画面が表示されます。
"<font color="red">LLMプロバイダキーが設定されていません</font>"というメッセージが表示されていますが、今は 無視して構いません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/bee1eed0-e97e-4f14-9184-2df7366fc8d1.png)

### ② モデルプロバイダーの選択
右ペイン中央の「設定に移動」ボタンをクリックすると、モデルプロバイダーの一覧が表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/c4300021-9048-4c51-8ae9-112f9040d115.png)

マウスカーソルを「Gemini」枠内へ移動すると、「インストール」「詳細」というボタンが表示されます。
「**詳細**」ボタンをクリックします。

<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/87c977d9-9868-4654-b88b-000302149d0d.png" />


### ③ モデルプロバイダーの詳細
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/862f40ff-fa57-4ccc-9c36-6fb489185ef4.png)

Overview には「Geminiを使うとマルチモーダル な AIアプリケーションを構築できる」的な文章が表示されています。
が、ここでは 右側の「REQUIREMENTS（要件）」に注目してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/a4980dfe-f007-44f7-80a8-a9b20028a499.png)

「最大メモリサイズ」が「256MB」と表示されています。
他の多くのプラグインも 256MB と表示されているので、Gemini 用プロバイダーだけが特別に多いわけではなさそうです。

:::note info
OpenAI など、いくつかのプラグインでは 1MB でした。
数多くのプラグインを導入して同時に動かす際は、それぞれの消費メモリ量にも気を配る必要があると思います。
:::

### ④ モデルプロバイダーのインストール
元の「モデルプロバイダー」一覧画面へ戻り、今度は「**インストールボタン**」の方をクリックします。

<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/a90d2c36-2873-4fa0-be9d-9c9501c07a0e.png" />

:::note warn
詳細画面の「Install」ボタンをクリックすると、「はじめましょう！」画面に戻ってしまいます。
このボタンはクリックしないようにしましょう。
:::

確認画面が表示されたら、「インストール」ボタンをクリックしてください。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/be52c6dd-a175-49c2-ab0e-505c85693854.png" />

### ⑤ APIキー の登録
モデルプロバイダーの一覧画面に戻ると、「設定中」欄に「Gemini」が表示されています。 
右端の「セットアップ」ボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/aaee4916-7762-48e8-bc6f-036bb9f33639.png)

設定画面が表示されたら「API Key」欄へ Gemini の APIキー を入力し、「保存」ボタンをクリックします

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/b33a757b-f07e-4e69-9255-0d6f828333b2.png" />

次のように表示されたら、モデルプロバイダーの登録は終了です。
続けて、「システムモデルの設定」へ進みます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/db79e43a-b45a-404e-9f86-eaf58edf7300.png)

## システムモデルの設定
Dify が使用する既定のモデルを設定します。
少なくとも「システム推論モデル」にはモデルを設定してください。
　参照：　[モデルタイプ](https://docs.dify.ai/ja-jp/guides/model-configuration#moderutaipu)
 
|名称|説明|
|:-|:-|
|システム推論モデル|アプリの中で使用するモデル。(チャットなど)|
|埋め込みモデル|テキストを、意味の似た数値(ベクトル)に変換するモデル。|
|Rerankモデル|検索した候補を「意味のあっている順」に並べ直すモデル。|
|音声-to-テキストモデル|音声をテキストに変換するモデル。|
|テキスト-to-音声モデル|テキストを音声に変換するモデル。|

### ① 設定画面の表示

「システムモデル設定」ボタンをクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/52270807-8122-4b22-983e-7fddd4e9408c.png)

同ボタンの直下に、モデル設定ウィンドウが表示されます。
「システム推論モデル」欄の右端のアイコンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/6a97053c-9f68-475d-9591-f64c05f20857.png)

### ② モデルの選択
Gemini で利用可能なモデルが一覧表示されます。
利用したいモデルをクリックしてください。
　参照： [モデル バリエーション](https://ai.google.dev/gemini-api/docs/models?hl=ja#model-variations)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/304a763b-8319-486c-9816-b4b46168f19a.png)

多少 精度は落ちるものの、今回は 返答速度の速い「Gemini 2.0 Flash-Lite」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/8edc3e48-62b8-4f71-9e1e-aab61bb6a2d6.png)

「システム推論モデル」欄に「Gemini 2.0 Flash-Lite」と表示されます。
そのまま、モデル設定ウィンドウ下部の「保存」ボタンをクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/1e3447f5-67fe-4743-a267-77ffd91ef305.png)

相変わらず警告メッセージが表示されていますが、ここでは無視しても構いません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/5a3bac77-11f7-43e9-9b94-247385a25860.png)

## チャットボット動作の確認
チャットアプリの「デバッグとプレビュー」画面から、モデル「Gemini 2.0 Flash-Lite」との会話を試してみることにします。

### ① 「デバッグとプレビュー」画面の表示
アプリ「テストアプリ１」の オーケストレート画面 を表示します。
システムモデルを設定したので、警告メッセージは見当たりません。

<img width="80%"  src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/6bc23e15-9ed7-4c4d-812a-ea8f8efd29f7.png" />

### ② モデルの選択
この確認で使用する「モデル」を選択します。
黄色い枠線 の内側をクリックしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/b6b80452-91d5-49ce-b183-6d2ee82b6059.png)

:::note warn
マウスポインタを 黄色い枠線 の内側へ移動すると、「廃止予定」というツールチップが表示されます。
おそらく、この UI部品は 近い将来に削除されるものと考えられます。
:::

「システムモデルの設定」と似た画面が表示されます。
ここでも「Gemini 2.0 Flash-Lite」を選択してください。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/95378064-d4eb-440e-8bf9-45617c4d403c.png" />

選択後、「パラメータ」画面が表示されます。
今は無視しても構わないので、このウィンドウ枠外をクリックして画面を閉じてください。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/cc158096-e5c0-4a1d-aff8-208aaa622ed2.png" />

### ③ テストメッセージの入力
画面下部のテキスト入力欄に、「こんにちは。あなたのことについて教えてください。」と入力してください。
入力後は「Enter」キーを押下、または 入力欄の右端の「青いボタン」をクリックします。

<img width="70%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/b82447f7-b114-4acc-89ce-9c1f0b0503b7.png" />

数秒の後、以下のように表示されました。
時間にして ２秒ほど でしょうか。
家庭用のネット回線（Wimax 5G）なので、混み具合によっては応答時間がかなり変動しそうです。

<img width="90%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90456/ec810a2d-ef85-46b0-87d8-b927c73202d1.png" />

## 終わりに
生成AIモデル「Gemini」の API を呼び出して、質問に対する返答が得られるところまで辿り着きました。

次回は、サンプルアプリ「テストアプリ１」を「公開」し、アプリとして実行してみることにします。（今回はデバッグ画面から実行しただけなので）