LoginSignup
9
6
@ssfujita(Shinjiro Fujita)in日本オラクル株式会社

Oracle APEXとOCI Generative AI Serviceで生成AIアプリをローコード開発

Last updated at Posted at 2024-04-05

生成AIを活用するにはアプリが必要ですが、アプリはなるべく手間を掛けずに実装できた方がありがたいです。
という訳で、OCIのマネージド生成AIサービス「OCI Generative AI Service」とローコード開発プラットフォームの「Oracle APEX」を使って、簡単な生成AIアプリを作ってみました。
結果、シンプルなものであれば、ローコードでお手軽に作れることを確認できました。

環境

今回はAPEXインスタンスをADBで作成しました。
リージョンは Generative AI Service がGAとなっている「US Midwest (Chicago)」を選択しました。
ADBの作成については割愛します。

APEXでWeb資格証明を作成

まずはAPEXからOCIの各サービスを利用するために「Web資格証明」を作成します。
APEXワークスペースのトップ画面にて「アプリケーション・ビルダー」を選択します。
01.png

｢ワークスペース・ユーティリティ」を選択します。
02.png

｢Web資格証明」から「作成」を選択します。
03.png
04.png

赤枠の部分に記入していきます。
｢静的ID」の入力値は後ほどPL/SQLコード実装で使います。
OCI秘密キー、OCI公開キー・フィンガープリントに関しては、OCIコンソールから作成して入力します。
05.png

秘密キーの作成にあたり、OCIコンソールから「ユーザーの詳細」へアクセスし「APIキーの追加」を選択します。
06.png

｢APIキー・ペアの生成」を選択し、秘密キーと公開キーをダウンロードします。
07.png

OCI秘密キー、OCI公開キー・フィンガープリントの内容をWeb資格証明の作成画面で入力します。

APEXアプリの作成(コンポーネントの配置)

APEXワークスペースのトップ画面に戻り「アプリケーション・ビルダー」へアクセスし「作成」を選択します。
08.png
09.png

アプリケーション名を入力し「アプリケーションの作成」を選択します。
10.png

アプリケーションのトップ画面にて「ページの作成」を選択します。
11.png

｢空白ページ」を選択し「次」を選択します。
12.png

名前を記入し「ページの作成」を選択します。
13.png

下段のアイテムからBODYに「テキスト・フィールド」をドラッグ＆ドロップします。
ここに質問を入力します。
アイテムの名前を任意に設定します。
ここで設定した名前は後ほどPL/SQLのバインド変数で使います。
14.png

同様にボタンの「Text」をドラッグ＆ドロップします。
このボタンを押すとGenerative AI Serviceに質問を連携します。
アイテムの名前を任意に設定します。
ここで設定した名前は後ほどプロセスの設定で使います。
15.png

ちなみにボタンの外観は以下のように設定しました。
15-1.png
15-2.png

APEXアプリの作成(OCIサービスとの連携)

以降の手順はノーコード、ローコード双方の実装方法を記載します。

APEX標準機能を使ったノーコードの実装

まずはノーコードで実装する手順になります。
アプリケーションのトップ画面から「共有コンポーネント」を選択します。
24.png

左下の「RESTデータ・ソース」から「作成」を選択します。
25.png
26.png

そのまま「次」を選択します。
27.png

以下画像の通りに入力します。
28.png
URLエンドポイントは下記になります。

https://inference.generativeai.us-chicago-1.oci.oraclecloud.com/20231130/actions/generateText

そのまま「次」を2回選択します。
29.png
30.png

資格証明は先ほど作成したものを選択します。
記入したら「詳細」を選択します。
31.png

赤枠の通りに入力したら「検出」を選択します。
32.png
なおリクエスト本文は下記になります。
コンパートメントIDはご自分のものを入力します。

{ 
    "inferenceRequest": {
        "runtimeType": "COHERE",
            "prompt": "#AI_INPUT#",
            "maxTokens": 500,
            "numGenerations": 1,
            "returnLikelihoods": "GENERATION",
            "isStream": false
    }, 
        "servingMode": { 
            "servingType": "ON_DEMAND",
            "modelId": "cohere.command"
        }, 
        "compartmentId": "<Your-Compartment-OCID>"
}

以下のように出力されれば Generative AI Service との連携が出来ています。
問題なければ「RESTデータ・ソースの作成」を選択します。
33.png

作成されたRESTデータ・ソースの名前を選択します。
34.png

｢パラメータ」タブにて「パラメータの追加」を選択します。
35.png

赤枠の通りに入力したら「パラメータの追加」を選択します。
36.png
これでリクエスト本文に動的な値を格納できるようになりました。

ページ・デザイナに戻り、下段の「リージョン」から「クラシック・レポート」をドラッグ＆ドロップし、BODYに配置します。
37.png

ID と LIKELIHOOD はコメントアウトし、画面に表示されないようにします。
タイトルには任意の名前を入力します。
ソースは「RESTソース」を選択し、先ほど作成したRESTデータ・ソースを設定します。
38.png

パラメータの「AI_INPUT」を選択した状態で、右カラムの値のタイプを「アイテム」にします。
対応するアイテムとして、プロンプトを入力するテキストフィールドに付けたアイテム名を設定します。
39.png

クラシック・レポートの列にある「TEXT」を選択し、右カラムのタイプを「リッチ・テキスト」に設定します。
40.png

以上で完成です。
最後に出来たアプリの動作を確認します。
プロンプトに以下文章を入力すると、C++のサンプルコードが出力されました。

Please show me a sample code to implement an application calculating fibonacci sequence by C++.

41.png

PL/SQLを使ったローコードの実装

次にPL/SQLを使ったローコード実装の手順になります。
下段のアイテムからBODYに「リッチ・テキスト・エディタ」をドラッグ＆ドロップします。
ここにGenerative AI Serviceからの回答が出力されます。
アイテムの名前を任意に設定します。
ここで設定した名前は後ほどPL/SQLのバインド変数で使います。
16.png

このアイテムはユーザは編集しないため、以下の通り読取り専用にしておきます。
16-1.png

ページ・デザイナのプロセスから「プロセスの作成」を選択します。
17.png

作成したプロセスの設定について、以下赤枠の通りになっているか確認します。
｢ボタン押下時」の設定値はボタンのアイテム名を選択します。
18.png
19.png

ソース・プロパティの「PL/SQLコード」にGenerative AI Serviceと連携するコードを実装します。
今回のコードは下記サイトを参考にさせて頂きました。
https://www.linkedin.com/pulse/how-build-intelligent-apps-oracle-generative-ai-apex-madhusudhan-rao-z423f

DECLARE
 
  l_genai_rest_url    VARCHAR2(4000) := 'https://inference.generativeai.us-chicago-1.oci.oraclecloud.com/20231130/actions/generateText'; 

  l_web_cred        CONSTANT VARCHAR2(50)    := 'OCI_WebCred';  -- Web資格証明で入力した「静的ID」を記入
  l_input varchar2(4000) := :AI_INPUT;  -- テキスト・フィールドのアイテム名を記入
  l_response_json CLOB;
  l_text varchar2(4000);
   
  -- JSON形式のリクエスト情報 (compartmentIdにはご自分のコンパートメントIDを記入)
    l_ocigabody varchar2(1000) := '{ 
            "inferenceRequest": {
                    "runtimeType": "COHERE",
                     "prompt": "'||l_input||'",
                     "maxTokens": 500,
                     "numGenerations": 1,
                     "returnLikelihoods": "GENERATION",
                     "isStream": false
            }, 
            "servingMode": { 
                "servingType": "ON_DEMAND",
                "modelId": "cohere.command"
            }, 
            "compartmentId": "<Your-Compartment-OCID>"
    }';

  -- レスポンス取得用のカーソル
  CURSOR C1  IS 
            SELECT jt.* 
            FROM   JSON_TABLE(l_response_json, '$' 
                     COLUMNS (text VARCHAR2(4000)  PATH '$.inferenceResponse[0].generatedTexts[0].text' )) jt; 

BEGIN

  if l_input is not null then

        apex_web_service.g_request_headers.DELETE; 
        apex_web_service.g_request_headers(1).name  := 'Content-Type'; 
        apex_web_service.g_request_headers(1).value := 'application/json';  

         l_response_json := apex_web_service.make_rest_request 
           (p_url                  => l_genai_rest_url, 
            p_http_method          => 'POST', 
            p_body                 => l_ocigabody, 
            p_credential_static_id => l_web_cred); 

    For row_1 In C1 Loop
        l_text := row_1.text; 
        -- 生成AIからの回答を表示 (AI_ANSWERの部分はリッチ・テキスト・エディタのアイテム名を記入)
        :AI_ANSWER := l_text; 
    End Loop;

    end if;

END;

以上で完成です。
出来上がった画面が以下になります。
例として以下の質問を投げており、サンプル・コードが表示されています。

Please show me a sample code to implement an application calculating fibonacci sequence by JavaScript.

22.png

もう一つ例としてタワー型PCの組み立て手順を聞いてみました。

What is the process to build a tower PC?

23.png

以上の通りOCI Generative AI Serviceとの連携、リッチ・テキストを使った回答の表示ができました。
APEXを使えば生成AIアプリもノーコード / ローコードで手軽に開発できますね。

9
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
6