このAPEXアプリケーションに、画像と音声を含むプロンプトを作成しPrompt APIを呼び出す機能を追加します。機能追加したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-gemini-nano.zip
機能はすべてホーム・ページに実装しています。
ホーム・ページにページ・アイテムやリージョンを配置していますが、処理についてはすべて静的アプリケーション・ファイルにJavaScriptを記述して実装しています。ページ上のコンポーネントをAPEXアクションに紐づけています。
データと紐づいている（JavaScriptから参照される）ページ上のコンポーネントは、以下のように配置されています。
システム・プロンプトはページ・アイテムP1_SYSTEM_PROMPTに保持されます。ユーザー・プロンプトはP1_USER_PROMPTに保持されます。
音声はAUDIO要素（id="player"）にて保持します。画像はページ・アイテムP1_IMAGEで選択します。プレビューのためにIMG要素（id="preview"）のsrc属性に、選択したファイルの内容を設定します。Prompt APIはページ・アイテムではなく、IMG要素のsrc属性に設定した画像を参照しています。
ページ・アイテムP1_RESPONSEにPrompt APIからのレスポンスを表示します。このページ・アイテムのタイプはリッチ・テキスト・エディタで、Markdown形式のドキュメントを整形して表示します。
APEXアクションへの紐付けは以下になっています。
ボタンStartは音声の録音を開始するAPEXアクション"START_RECORDING"に紐づいています。録音を停止するボタンStopは"STOP_RECORDING"、録音をリセットするボタンResetは"RESET_RECORDING"に紐づいています。
ファイルの選択を変更したときは、APEXアクション"PREVIEW"が呼ばれるようにしています。ボタンについてはカスタム要素data-actionにAPEXアクション名を設定することで紐づけられますが、ファイルの選択はカスタム属性data-actionに対応していません。そのため、これだけはページ・アイテムの変更イベントを拾って、APEXアクションを呼び出しています。
ボタンExplainをクリックしたときに、Prompt APIの呼び出しを行うAPEXアクション"EXPLAIN"が実行されるように、カスタム属性data-acion="EXPLAIN"を設定しています。
これ以外は主にレイアウトを調整するためにリージョンを使用しています。
静的アプリケーション・ファイルとしてgemini-nano-multimodal.jsを作成しています。Claude Sonnet 4.5にレビューをお願いしたら、1/3くらい書き直されました。
このファイルをページ・プロパティのJavaScriptのファイルURLに設定しています。
#APP_FILES#gemini-nano-multimodal#MIN#.js
作成したアプリケーションの紹介は以上です。
アプリケーションを実行して、Prompt APIを呼び出してみました。
竹取物語の冒頭を録音して、ユーザー・プロンプトで文字起こしを依頼してみました。
添付した画像の解説を、音声でお願いしました。
画像を添付し、文字の取り出しをお願いしてみました。
すごく精度が高いということはありませんが、軽くて速くてお金もかからないのは利点です。１年前と比べると、著しく進歩していることは確かです。
今回の記事は以上です。
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
