Oracle APEXの新機能、会話型AIダイアログを使ってチャットボットを実装してみた

# はじめに
新たにリリースされたOracle APEX24.1の新機能、**会話型AIダイアログ**を使用して、簡単にアプリケーションに**チャットボット**を実装します。

**会話型AIダイアログ**は、アプリに簡単に素早く実装できる**会話型インターフェース**です。エンド・ユーザーがアプリと自然言語で「会話」できるようにします。**生成AIや自然言語処理コンポーネントを最初から構築せず**に、アプリケーション内でよりリッチなエクスペリエンスを提供することができます。

本記事では、**給与の提案をするAIアシスタント**を作成し、アプリケーションに実装したいと思います。

**【前提条件】**
- Oracle APEXのワークスペースが作成済みであること
  （ワークスペースの作成方法は[こちら](https://qiita.com/marfujim/items/a9ebe698c865e20d4852#1-1-apex%E7%92%B0%E5%A2%83%E3%81%AE%E6%BA%96%E5%82%99)をご参照ください。）
- 使用可能なAPIキーが作成済みであること
        （OpenAIのAPIキー取得方法は[こちら](https://qiita.com/marfujim/items/3e2fe1861a7b148e41b1#openai%E3%81%AE%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90)をご参照ください。）
:::note info
Oracle APEXの生成AIサービスは、2024年8月現在、**OpenAI、Cohere、OCI Genarative AI**をAIプロバイダーとして使用することが出来ます。OCI Genarative AIは、**APEX24.1.2以降**でのみ使用可能です。
:::


**【所要時間】**
20分程

# 1. 生成AIサービスの作成
**APEXアシスタント**の機能を使用するため、APEX上で生成AIサービスを作成します。

既にAPEX上で生成AIサービスを作成済みの場合は再度作成いただく必要はありません。[2. サンプルアプリケーションの作成](https://qiita.com/marfujim/items/6f008252f81561146877#2-%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E6%88%90)へスキップします。

1. 作成したAPEXのワークスペースにログインし、**アプリケーション・ビルダー**をクリックします。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f444d3c9-787b-f6be-dfd7-0347bcf94d09.png)


2. **ワークスペース・ユーティリティ**をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/0236a250-130b-d4ec-7609-21070f49f741.png)


3. **生成AI**をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/242a8375-f209-bb99-f4c9-489c01c5b821.png)


4. **作成**をクリックし、生成AIサービスを作成します。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/366c6e6e-d415-356c-8977-82e580a2202d.png)


5. 以下の通りに記入し、**作成**をクリックします。
    - **AIプロバイダ** - OpenAI（CohereのAPIを使用する場合は、Cohereを選択します）
    - **名前** - 任意（本記事では、OpenAI Demoとしています）
    - **アプリケーション・ビルダーで使用** - トグルをオン
    - **APIキー** - 取得したAPIキー
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ce6ac5f0-c186-6998-afe5-d6db520ec6ed.png)


6. 生成AIサービスを作成する事が出来ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/5713e6d2-3e75-d608-afc1-9ac4b3508a93.png)


# 2. サンプルアプリケーションの作成
 **APEXアシスタント**の機能を試すために、アプリケーションとデータセットが必要です。
 
 APEXのワークスペース上に、サンプルデータセットをロードし、新しいアプリケーションを作成します（既にEMP表、DEPT表をダウンロードし、アプリケーションを作成済みの場合は[3. 会話型AIダイアログを実装してみる](https://qiita.com/marfujim/items/6f008252f81561146877#3-%E4%BC%9A%E8%A9%B1%E5%9E%8Bai%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%82%92%E5%AE%9F%E8%A3%85%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B)へスキップして下さい。)

1. 画面上部の**検索**をクリックし、**検索フィールド**にサンプルと入力します。検索結果に表示される**サンプル・データセット**をクリックします。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ced579e2-d63c-a9e0-6178-b1cccc60e495.png)


2. アプリケーションの作成に必要なデータをインストールします。本記事では、**EMP/DEPT**というサンプル・データセットをインストールします。**インストール**をクリックします。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/2fb21d3c-9d9d-71c5-0a8a-84df351fee3f.png)



3. 言語を**日本語**へ変更し、**次**をクリックします。
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/bf159bbd-eb9f-e6d5-077d-d4fc1e5ca2eb.png)



4. **データセットのインストール**をクリックします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/2c396ae5-56ed-5598-b1ac-649c2cb2a895.png)



5. データセットのインストールが終了しました。**アプリケーションの作成**をクリックします。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/b17ea773-262b-fd82-22dc-a0f32ccd08bd.png)


6. 設定はそのままにし、**アプリケーションの作成**をクリックします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/04ffb89a-822d-2e22-5710-61e573cc6242.png)


7. これで、アプリケーションの作成が終わりました。**SQLワークショップ**をクリックし、インポートしたEMP表とDEPT表を確認します。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/7b801c4a-052a-5c0d-e0cd-b6a2bc1e9efd.png)


8. **オブジェクト・ブラウザ**をクリックします。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/c06c4bba-0ac3-10b0-f846-99eac1f5692f.png)


9. 先程インポートした**EMP表とDEPT表**が表示されています。それぞれの表にどの様なデータが格納されているか確認します。

    EMP表には従業員の氏名や職種、給与等の情報が格納されており、DEPT表には部署のID、名前、所在地が格納されている事が分かりました。また、EMP表のDEPTNOはDEPT表の主キーであるDEPTNOを参照している事が分かりました。

    データセットの確認が終わったら、**アプリケーション・ビルダー**へ戻ります。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/af9588da-5e4d-7a92-6034-ca34c0f55ac1.png)



# 3. 会話型AIダイアログを実装してみる
生成AIサービス、サンプルアプリケーションの用意ができたので、**会話型AIダイアログ**を実装してみましょう。

1. 先ずは、チャットボットを実装するページを新規に作成します。**ページの作成**をクリックし、対話モード・レポートのページを追加します。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/4a5a5854-3904-910c-2c61-e13736bdba22.png)

2. **対話モード・レポート**を選択します。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/364ab80e-e53e-b3fd-61a7-ded8c949f4fe.png)


3. 従業員一覧の対話モード・レポートを作成し、各従業員の給与を編集することの出来るフォーム・ページも作成します。以下の通りに入力します。
    - **ページ定義**
        - **名前** - 従業員の給与
        - **フォーム・ページを含める** - オン
        - **フォーム・ページ名** - 給与編集
    - **データ・ソース**
        - **表/ビューの名前** - EMP（従業員の情報を表示させたいので、EMP表を選択します。）
![スクリーンショット 2024-06-25 110112.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/237789dc-c15d-5bc2-b5df-55d17f775e77.png)

4. **ページの作成**をクリックします。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/23178957-92b3-f92e-ad39-82f63d6917c3.png)


5. ページが作成されました。**保存と実行**ボタンをクリックし、どの様なページが作成されたか確認します。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/ab9ecfff-efa2-0654-c074-6a0033379e7d.png)


6. ワークスペースの**ユーザー名とパスワード**を入力し、ログインします。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/963f7a8e-24c0-14c6-ec86-c3433d7ee84b.png)


7. 従業員の名前、職種、給与、部署等の情報を一覧出来る対話モードレポートが作成されました。名前の隣にある**編集アイコン**をクリックします。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/54a9c8a2-5257-c5f9-b08e-ad5765c93f5a.png)


8. 従業員の情報を編集することのできる給与編集ページが表示されました。

    このページに、従業員の給与を上げる際に相談することが出来るチャットボットを実装します。画面下部の**ページ8**をクリックし、給与編集ページを編集します。
![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/e3b34d51-c3ad-3ec3-2f89-0c1bb744bf8a.png)


9. 給与編集フォームをクリックし、**ボタンの作成**を選択します。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/65e9945f-4aa1-b76e-0969-1be9d106a8a8.png)


10. 作成したボタンを給与の隣に配置します。以下の通りに入力します。
    - **識別**
        - **ボタン名** - SUGGEST_SALARY
        - **ラベル** - 給与を提案
    - **レイアウト**
        - **順序** - 70（P8_SALの隣にボタンを表示させる様にレイアウトを調整します）
        - **新規行の開始** - オフ
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/520ff1e7-8564-ec8c-5544-3e943825fbfb.png)


    - **外観**
        - **ボタン・テンプレート** - Text with icon（作成したボタンに文字とアイコンの両方を表示させます。）
        - **ホット** - オン
    - **動作**
        - **アクション** - 動的アクションで定義
        - **検証で実行** - オフ
    ![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/1258e588-2474-f1a3-cb1d-f4bc5bc4953f.png)
    
    
    - **外観**
        - **テンプレート・オプション**
            - **Size** - Large
            - **Width** - Stretch
            - **Spacing Top** - Large
    ![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/046b473a-4830-8cef-3cf6-647be463f71e.png)
    - **外観**
        - **アイコン** - fa-robot（表示するアイコンを選択します。）
    ![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/8d459ffd-879c-ed41-2bd1-a141a8a140fe.png)


11. 給与編集フォームをクリックし、**アイテムの作成**をクリックします。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/3a05ee4c-8c79-02ae-fdf0-41ad1dc11b10.png)


12. 以下の通りに入力し、画面上部の**保存**ボタンをクリックします。
    - **識別**
        - **名前** - P8_DEPARTMENT（数字は編集しているページのページ番号に合わせて変更してください。ページ８の中にあるアイテムなので、P8としています。）
        - **タイプ** - 非表示
    ![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/d00477d3-dc2c-4073-3d6d-5b8383a5c5ba.png)


13. 作成したページ・アイテムP8_DEPARTMENTをクリックし、**計算の作成**をクリックします。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/bca3fe29-f984-3d5e-3d87-5db2d065f945.png)


14. SQL問合せの欄に、**以下のSQLクエリを記述**します。先ほどと同様に、P8_DEPTNOの数字はページナンバーに合わせて変更します。

        select dname
        from dept
        where deptno = :P8_DEPTNO
    ![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/f09c1bff-69a2-effb-bf10-572812fa9d44.png)


15. 給与編集フォームをクリックし、**アイテムの作成**をクリックします。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/79eff317-d7bd-eea7-9731-93fea5a91874.png)


16. 以下の通りに入力します。
    - **識別**
        - **名前** - P8_INIT_PROMPT（数字は編集しているページのページ番号に合わせて変更してください。ページ８の中にあるアイテムなので、P8としています。）
        - **タイプ** - 非表示
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/fae3eb9b-fa54-39b3-cd02-670346194219.png)


17. 作成したページ・アイテムP8_INIT_PROMPTをクリックし、**計算の作成**をクリックします。
![21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/d82aadb5-4aba-4f3a-d935-73bb4d6c4de5.png)


18. 以下の通りに入力します。
    - **計算**
        - **タイプ** - 静的値
        - **静的値** - 下記の値を記入（数字は編集しているページのページ番号に合わせて変更してください。ページ８の中にあるアイテムなので、P8としています。）
        ```
        部署：&P8_DEPARTMENT.　現在の給与：&P8_SAL.
        ```
    ![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/30dd2f55-732b-41c3-88b1-a69a67f7c9e3.png)



19. **動的アクションタブ**に移動し、イベントをクリックして**動的アクション**を作成します。
![23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/332b669b-fec6-5691-f9cf-1f5b7b23ca02.png)


20. 作成した動的アクションのを編集し、ボタンをクリックすると動的アクションが実行されるように設定します。
    - **識別**
        - **名前** - AI: Suggest Salary
    - **タイミング** 
        - **イベント** - クリック
        - **選択タイプ** - ボタン
        - **ボタン** - SUGGEST_SALARY
![24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/6df46324-a9ca-1178-4fd9-2b33da530d2c.png)


21. 表示というTrueアクションを編集し、ボタンがクリックされた時の動きを設定します。
    - **識別**
        - **アクション** - Open AIアシスタント
    - **生成AI**
        - **サービス** - OpenAI Demo（作成した生成AIサービスを選択します。）
        - **システム・プロンプト** - 以下のメッセージを入力（AIに文脈を伝えるために記入します。エンド・ユーザーには表示されません。）
        - **ようこそメッセージ** - こんにちは、私はHRアシスタントです。昇給の計算をお手伝いします。（チャットボットをユーザーが使う時に最初に表示されるメッセージとなります。）

                あなたは従業員の昇給を提案する人事マネージャーです。
                部署によって昇給率は異なります。
                
                以下は部署と昇給率の一覧です：
                - 会計 5%
                - 業務 7%
                - 研究開発 10%
                - セールス 3%
                
                従業員の部門情報と現在の給与を取得します。
                これらの情報に基づいて新しい給与を計算します。
                
                計算された給与は、特殊文字や通貨記号を使わずに表示する必要があります。
                また、小数点以下は四捨五入してください。計算した給与を含む完全で短い文章で回答してください。
                
                給与に関する質問にのみ回答し、それ以外の質問には回答しないでください。
                部署名や現在の基本給など、必要なパラメータが不足している場合は、続行するにはさらに情報が必要であると回答してください。
    ![100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/afbff235-fa6d-fe2f-2ed7-90f7f02d2f4b.png)



    - **外観**
        - **タイトル** - HRアシスタント
    - **最初のプロンプト**
        - **タイプ** - アイテム
        - **アイテム** - P8_INIT_PROMPT
        - **即時アクション・プロンプト**- 給与額の算出をして下さい。（入力したプロンプトを自動で入力し、送信します。）
    ![26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/132f4b10-a6a3-2e25-6e89-de5ee6e41a45.png)

22. 昇給させたい従業員を選択し、チャットボットにどのくらいの給与にすべきかアドバイスを求めます。

    上から2人目の石原さんの給与を上げたいと思います。名前の隣にある**編集**アイコンをクリックします。
![28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/4d546bf3-b559-01b0-0fcd-ea994d2a300f.png)


23. 編集アイコンをクリックすると、給与編集のフォームが表示されます。

    先程作成した**給与を提案**ボタンをクリックし、従業員の所属している部署、現在の給与を基に、昇給額の算出をしてもらいます。
![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/898ee8d4-f54a-415a-0818-ba634fb04dc6.png)



24. ボタンをクリックすると、HRアシスタントというチャットボットが開き、従業員の所属している部署、現在の給与を基に、昇給額の算出を自動で行います。

    人事部のスタッフはAIアシスタントのアドバイスを基に、昇給額を決定する事が出来ます。
![image (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/126176f7-29c0-ad96-3944-9767c1111b19.png)

25. APEX AIアシスタントが提案してくれた額である、1365と給与列を更新します。Salに**1365**と入力し、**変更の適用**をクリックします。
![image (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/daccd379-b397-2958-d0e2-e65a0c599efc.png)

26. 石川さんの給与を更新する事が出来ました。
![image (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3762201/d01e285a-99af-e4b5-6e4f-d43e955856c3.png)

本記事は以上です。他にも様々なチャットボットを作成してみて下さい。

# 参考資料
- [Creating an AI Assistant to Suggest Salary](https://docs.oracle.com/en/database/oracle/apex/24.1/htmdb/including-generative-ai-in-applications.html#GUID-BD590E3A-A0B9-4418-AEFA-1EA0350E303A)
-  [What's New in Oracle APEX 24.1](https://apex.oracle.com/en/platform/features/whats-new-241/)
- [Oracle APEX AI Assistant、エンタープライズ・アプリケーションの自然言語ベースによる開発を実現](https://www.oracle.com/jp/news/announcement/oracle-apex-ai-assistant-enables-natural-language-based-development-of-enterprise-applications-2024-06-17/)
- [Managing Generative AI Services](https://docs.oracle.com/en/database/oracle/apex/24.1/htmdb/managing-generative-ai-services.html#GUID-2AE4465F-8BD6-4BE0-AFCA-7962F6991715)
- [Coding with the AI Powered APEX Assistant on Oracle APEX](https://blogs.oracle.com/apex/post/coding-with-the-ai-powered-apex-assistant-on-oracle-apex)