2024年10月3日木曜日

Google ChromeのPrompt APIをOracle APEXのアプリから呼び出してみる

Google ChromeのBuilt-in AI capabilitiesに含まれるPrompt APIが安定版のChromeから利用できるようになっていたので、Oracle APEXで簡単なアプリケーションを作成して、Prompt APIを呼び出してみました。

作成したアプリケーションは以下のように動作します。


APEXアプリケーションを実行しているGoogle Chromeのバージョンは以下です。macOSで実行しています。


最初にGoogle ChromeでGemini NanoおよびPrompt APIを利用可能にします。

まだまだ実験的なAPIなので、設定方法は変わることが多いようです。なので、以下は本記事を書いた時点で有効だった手順ということになります。

設定手順については、以下のページを参考にしました。このリンク先もいつまで有効なのか分からないため、できるだけ新しいGoogleのドキュメントを探してから設定した方が良いでしょう。

Built-in AI Early Preview Program - Welcome and about the Prompt API

Gemini NanoとPrompt APIを有効にする手順は、以下のように記載されています。

Enable Gemini Nano and the Prompt API

Follow these steps to enable Gemini Nano and the Prompt API flags for local experimentation:


  1. Open a new tab in Chrome, go to chrome://flags/#optimization-guide-on-device-model

  2. Select Enabled BypassPerfRequirement

    • This bypass performance checks which might get in the way of having Gemini Nano downloaded on your device.

  3. Go to chrome://flags/#prompt-api-for-gemini-nano

  4. Select Enabled

  5. Relaunch Chrome.


Google Chromeよりchrome://flags/#optimization-guide-on-device-modelを開きます。

Enables optimization guide on deviceをEnabled BypassPerfRequirement、Prompt API for Gemini NanoをEnabledに変更し、ブラウザを再起動します。

本記事では使用しませんが、Prompt APIの他にSummarization API、Writer API、Rewrite APIなども提供されています。


次にGemini Nanoが利用可能かどうか確認します。

Confirm availability of Gemini Nano


  1. Open DevTools and send (await ai.assistant.capabilities()).available; in the console. 

  2. If this returns “readily”, then you are all set. 


If this fails, continue as follows:


  1. 📣🆕Force Chrome to recognize that you want to use this API. To do so, open DevTools and send  await ai.assistant.create(); in the console. This will likely fail but it’s intended.

  2. Relaunch Chrome. 

  3. Open a new tab in Chrome, go to chrome://components 

  4. Confirm that Gemini Nano is either available or is being downloaded

    • You'll want to see the Optimization Guide On Device Model present with a version greater or equal to 2024.5.21.1031.

    • If there is no version listed, click on Check for update to force the download.

  5. Once the model has downloaded and has reached a version greater than shown above, open DevTools and send (await ai.assistant.capabilities()).available; in the console. If this returns “readily”, then you are all set. 

    • Otherwise, relaunch, wait for a little while, and try again from step 1. 


ChromeのJavaScriptコンソールを開いて、以下を実行します。

(await ai.assistant.capabilities()).available;


readyと返されたらGemini Nanoが使えます。初めて構成する場合はnoと返されます。

JavaScriptコンソールから、以下を実行します。

await ai.assistant.create();

以下の画面はすでに構成済みなので、Promiseが返されています。


Chromeよりchrome://componentsを開きます。

Optimization Guide On Device Modelの項目を見つけて、最新のコンポーネントをダウンロードし、ステータスを最新にします。


再度、JavaScriptコンソールで以下を実行し、readyが返されることを確認します。

(await ai.assistant.capabilities()).available;

以上でGoogle ChromeでPrompt APIを利用する準備は完了です。

Prompt APIを呼び出すOracle APEXのアプリケーションを作成します。

空のAPEXアプリケーションを作成します。名前はSample Gemini Nanoとします。


Prompt APIの呼び出しはインライン・ダイアログに実装します。どのページからも呼び出せるように、インライン・ダイアログはグローバル・ページに作成します。

グローバル・ページに作成したコンポーネントは、他のページと共有できます。しかし、グローバル・ページにはページ・プロパティがありません。そのため、JavaScriptとCSSのコードは静的アプリケーション・ファイルに記述し、そのファイルをユーザー・インターフェースに設定することにより、すべてのページで共有します。

共有コンポーネントの静的アプリケーション・ファイルを開きます。


ファイルの作成をクリックします。


最初にJavaScriptのファイルを作成します。ファイル名はgemini-nano.jsとします。

作成をクリックします。


ファイルの内容として以下を記述し、変更を保存します。後の設定で使用するため、参照はコピーしておきます。



取消をクリックすると、エディタを閉じることができます。

同様の手順で、以下の内容を記述したファイルをgemini-nano.cssとして作成します。JavaScriptのファイルと同様に、参照をコピーしておきます。



アプリケーション定義のユーザー・インターフェースを開きます。

JavaScriptのファイルURLに以下を記述します。

#APP_FILES#gemini-nano#MIN#.js

CSSのファイルURLに以下を記述します。

#APP_FILES#gemini-nano#MIN#.css

変更の適用をクリックします。


以上で必要なJavaScriptとCSSのコードを、すべてのページから参照できるようになりました。

グローバル・ページにPrompt APIを呼び出すダイアログを作成します。

タイプが静的コンテンツのリージョンを作成します。識別の名前はAssistantとします。

レイアウトのスロットにDialogs, Drawers and Popupsを選択し、外観のテンプレートとしてInline Dialogを選択します。インライン・ダイアログのリージョンは、動的アクションによって開かれるまで表示されません。


プロンプトを入力するページ・アイテムをP0_PROMPTとして作成します。タイプはテキスト領域です。ラベルはPromptとします。


レスポンスを出力するページ・アイテムをP0_RESPONSEとして作成します。タイプはテキスト領域です。ラベルはResponseとします。


Prompt APIを呼び出すボタンSENDを作成します。動作のアクションとして動的アクションで定義を選択します。


ボタンSENDに動的アクションを作成します。識別の名前はonClick SEND、タイミングのイベントはボタンのデフォルトであるクリックです。


TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。ファンクションsendPromptはファイルgemini-nano.jsで定義されています。

sendPrompt(apex.items.P0_PROMPT, apex.items.P0_RESPONSE);


インライン・ダイアログを閉じるボタンCLOSE_ASSISTANTを作成します。ボタンSENDの右隣に配置するため、レイアウトの新規行の開始はオフにします。動作のアクションとして動的アクションで定義を選択します。


ボタンCLOSE_ASSISTANTに動的アクションを作成します。識別の名前はonClick CLOSE_ASSISTANT、タイミングのイベントはボタンのデフォルトであるクリックです。


最初のTRUEアクションはリージョンを閉じるです。影響を受ける要素の選択タイプにリージョン、リージョンとしてインライン・ダイアログであるAssistantを指定します。


続くTRUEアクションとしてJavaScriptコードの実行を作成します。設定のコードとして以下を記述します。セッションやページ・アイテムをクリーンアップしています。
resetSession();
apex.items.P0_PROMPT.setValue("");
apex.items.P0_RESPONSE.setValue("");

インライン・ダイアログのリージョンを開くボタンOPEN_ASSISTANTを作成します。動作のアクションは動的アクションで定義です。

ボタンがつねに画面右下に表示されるように、外観のCSSクラスにopen-assistant-buttonを設定します。このCSSクラスはgemini-nano.cssで定義しています。このままだと、アプリケーションに含まれるすべてのページにボタンが表示されます。ログイン・ページを表示対象から外すために、サーバー側の条件のタイプに現在のページはカンマで区切られたリストに含まれないを選択し、ページに9999を指定します。


ボタンOPEN_ASSISTANTに動的アクションを作成します。識別の名前はonClick OPEN_ASSISTANT、タイミングのイベントはボタンのデフォルトであるクリックです。


TRUEアクションはリージョンを開くです。影響を受ける要素の選択タイプにリージョン、リージョンとしてインライン・ダイアログであるAssistantを指定します。


以上でアプリケーションは完成です。アプリケーションを実行すると、記事の先頭にあるGIF動画のように動作します。

今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-gemini-nano.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完
投稿者 時刻:
ラベル: , ,