APEXアプリケーションに入力したメッセージをOpen WebUIに送信する

以前の記事「macOSのpodmanでOpen WebUIのコンテナを実行しAPEXのアプリの非モーダル・ダイアログとして開く」にて、APEXアプリケーションに非モーダル・ダイアログのページとしてOpen WebUIを組み込んでいます。

今回は、このAPEXアプリケーションに入力したメッセージをOpen WebUIに送り、Open WebUIから生成AIを呼び出してみます。

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

最初にAPEXアプリケーションとOpen WebUIを同一オリジンに見せるために、両方のサーバーへのアクセスをまとめるリバース・プロキシを配置します。リバース・プロキシにはnginxを使用します。

macOS上のpodmanで環境を構築します。以下のような構成になります。APEXアプリケーション、Open WebUIともに、http://localhost:8822で接続を待ち受けているnginxに接続し、nginxがOpen WebUIをhttp://host.containers.internal:3000へ、APEXアプリケーションをhttp://host.containers.internal:8181へ振り分けます。

以前の記事に従って、Open WebUIやOracle APEXのコンテナは作成済みというところから作業を始めます。

nginxのコンテナを作成します。nginxはポート8822で待ち受けするように構成するため、ポート8822をホストにマップします。

podman run -p 8822:8822 --name nginx -d nginx:alpine

% podman run -p 8822:8822 --name nginx -d nginx:alpine

Resolving "nginx" using unqualified-search registries (/etc/containers/registries.conf.d/999-podman-machine.conf)

Trying to pull docker.io/library/nginx:alpine...

Getting image source signatures

Copying blob sha256:76f8ad18306ed8a7757d73f845d89b3aee98b4774af2b7c5c9a288bcf097036c

Copying blob sha256:0be31969a6d1e1f2699d0fb5a48f1b4da62a3b2aefa8a9b0dfb548bc497bf321

Copying blob sha256:6e771e15690e2fabf2332d3a3b744495411d6e0b00b2aea64419b58b0066cf81

Copying blob sha256:83f1386059fa17276f4f0e676f45370a63667006c4d8e514298f71c6639328ea

Copying blob sha256:8ea77ffafa6ef989339c5c391fb30729e3f148240c0834f1db148158ab32f657

Copying blob sha256:9e170776f94c97f95260908e78676599218d0247c22929326f7072689b832bbb

Copying blob sha256:3c5c25f3816a63c8239c4a853ae22036406ffbd4f55b16e29e01f941f2dea356

Copying blob sha256:0a329c61f9e1dc20260b65b0ef67440ced65fbf671c1e93df0a9710fbb42d536

Copying config sha256:cedb667e1a7b4e6d843a4f74f1f2db0dac1c29b43978aa72dbae2193e3b8eea3

Writing manifest to image destination

aa331c3fdd940c53ae85b90ec874bd6bbf85aaaccf3e80474c8ad0b993a23cf6

% 

リバース・プロキシを構成します。コンテナnginxに接続します。

podman exec -it nginx sh

% podman exec -it nginx sh

/ # 

/etc/nginx/conf.d/default.confを以下の内容に置き換えます。

/ # cd /etc/nginx/conf.d

/etc/nginx/conf.d # ls default.conf 

default.conf

/etc/nginx/conf.d # vi default.conf

default.confの内容を置き換える

/etc/nginx/conf.d # exit

% 

nginxのコンテナを再起動します。

% podman restart nginx

nginx

% 

以上でnginxがリバース・プロキシとして動作するようになりました。ORDSのページに接続します。

http://localhost:8822/ords/

Open WebUIには、以下のURLで接続できます。APEXとOpen WebUIが同一オリジンになっています。

http://localhost:8822/

記事の先頭のGIF動画で使用しているAPEXアプリケーションのエクスポートです。

https://github.com/ujnak/apexapps/blob/master/exports/open-webui.zip

Oracle APEXのページからOpen WebUIのiframeへメッセージを送信する実装について、以下より紹介します。

APEXのページでメッセージを入力するために、テキスト領域のページ・アイテムを作成しています。

識別の名前はP1_TEXT、タイプにテキスト領域です。ラベルはTextとしています。セッション・ステートのデータ型はVARCHAR2、ストレージはリクエストごと(メモリーのみ)としています。

ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述し、Open WebUIが埋め込まれたページと通信するためのブロードキャスト・チャンネルsubmit-messageを作成します。

const channel = new BroadcastChannel('submit-message');

ページ・アイテムP1_TEXTに入力した文字列をブロードキャスト・チャンネルに送信するボタンSUBMITを作成します。ボタンをクリックしたときに、動的アクションとして以下のJavaScriptコードを実行します。

const chatMessage = apex.item("P1_TEXT").getValue();
channel.postMessage( { message: chatMessage } );

以上でメッセージを送信する実装は完了です。

Open WebUIをiframeとして埋め込んでいるページに移ります。

まず、Open WebUIをiframeとして埋め込んでいるリージョンの属性を開き、設定のURLをhttp://localhost:8822に変更します。埋め込むURLをリバース・プロキシに変更することにより、Open WebUIがAPEXアプリケーションと同一オリジンでiframeに埋め込まれます。

ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言で、APEXアプリケーションとの通信に使用するブロードキャスト・チャンネルsubmit-messageを作成します。

const channel = new BroadcastChannel('submit-message');

ページ・ロード時に実行に以下を記述し、ブロードキャスト・チャンネルより受信したメッセージをiframe内のOpen WebUIのメッセージを入力する領域にコピーします。その後１秒待って、ボタンsend-message-buttonをクリックします。ボタンsend-message-buttonはメッセージ領域にテキストを入力した後に生成されるようで、テキスト入力後に少し待機する必要があります。

channel.addEventListener("message", (event) => {
    console.log(event.data.message);
    // iframe
    const iframe = document.querySelector('iframe');
    const input = iframe.contentDocument.getElementById("chat-input");
    input.innerText = event.data.message;

    // send-message-buttonが表示されるまで待つ。
    setTimeout(() => {
        const button = iframe.contentDocument.getElementById("send-message-button");
        button.click();
    }, 1000);
});

以上で、メッセージの送信側と受信側の実装は完了です。アプリケーションを実行すると、記事の先頭のGIF動画のように操作できます。

今回の記事は以上になります。

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

完