LLMに写真の説明してもらうアプリをページ送信の代わりに動的アクションで実装する

以前に記事「マルチモーダルLLMのGemma3をLM Studioで動かしAPEXアプリケーションから呼び出す」で、LM Studioで動かしているGemma3に写真の説明をしてもらうアプリケーションを作成しました。ブラウザで選択した写真をデータベース・サーバーに送信するために、ページの送信を行なっています。

世界ではAPEX Developer Blogsというサイトが運用されていて、このサイトに自分の技術ブログを登録していると、新着記事が自動的に一覧に表示されます。

新着記事を見ていて、Arun Mohanさんの以下の記事が目に止まりました。

How to Handle Large Data in APEX AJAX Calls (Bypassing the 32K Limit)?

Ajaxコールバックで32kを超えるデータを受け取る方法が紹介されています。

APEXのいつのバージョンからか分かりませんが、p_clob_01というパラメータが追加されているようです。これを使うことにより、簡単に32kを超えるデータをCLOBとしてAjaxコールバックに渡すことができるようになっています。

この機能を使って、先の記事のアプリケーションを作り直してみました。作り直したアプリケーションは以下のように動作します。

選択したファイルを変更したイベントを受けて、動的アクションを実行しています。動的アクションでプレビューの表示およびAjaxコールバックを介したLLMの呼び出しを行い、結果をページ・アイテムに設定しています。

ページの送信は行なっていません。

作成したAPEXアプリケーションを簡単に説明します。機能はすべてホーム・ページに実装しています。

写真を選択するページ・アイテムをP1_IMAGEとして作成しています。このページ・アイテムでファイルを選択したときに、以下のJavaScriptを実行します。

選択した写真のプレビューを行った後に、写真のデータを属性p_clob_01としてAjaxコールバックEXPLAIN_IMAGEに与え、プロンプト（ページ・アイテムP1_PROMPT）と共に送信しています。EXPLAIN_IMAGEのレスポンスはLLMが返すレスポンスをそのまま返しているため、フロントエンドでdata.choices[0].message.contentとして答えの文章を取り出しています。

AjaxコールバックEXPLAIN_IMAGEとして、以下のPL/SQLコードを記述しています。

送信された写真（p_clob01として渡されたデータ）は、AjaxコールバックからはAPEX_APPLICATION.G_CLOB_01として参照できます。後はLM Studioで動作しているモデルgemma-3n-e4b-it-mlx@?を素直に呼び出しています。

今回の記事で作成したAPEXアプリケーションのエクスポートを以下に置きました。

https://github.com/ujnak/apexapps/blob/master/exports/explain-image-by-dynamic-action-and-ajax-callback.zip

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

完