Chainlitで作成したアプリケーションをOracle APEXに埋め込む

Chainlitで作成したアプリケーションをOracle APEXのアプリケーションに埋め込んでみます。

埋め込みのテストには、Chainlitのインストール後の動作確認に使用するhello appを使用します。

作成したアプリケーションは以下のように動作します。通常のページと非モーダル・ダイアログの双方のページに、静的コンテンツのリージョンとして組み込むことができました。

ChainlitはローカルのmacOSにインストールして実行しています。

ChainlitのインストールはSonoma 14.5上で、以下のコマンドにより実施しました。

python3 -m venv $PWD/chainlit
cd chainlit
source bin/activate
pip3 install chainlit
chainlit hello

chainlit helloを実行するとhttp://localhost:8000で、アプリケーションhello appへ接続できるようになります。

% python3 -m venv $PWD/chainlit

% cd chainlit 

chainlit % source bin/activate

(chainlit) chainlit % pip3 install chainlit

Collecting chainlit

  Using cached chainlit-1.1.101-py3-none-any.whl.metadata (5.5 kB)

Collecting aiofiles<24.0.0,>=23.1.0 (from chainlit)

  Using cached aiofiles-23.2.1-py3-none-any.whl.metadata (9.7 kB)

Collecting asyncer<0.0.3,>=0.0.2 (from chainlit)

  Using cached asyncer-0.0.2-py3-none-any.whl.metadata (6.8 kB)

[中略]

Successfully installed aiofiles-23.2.1 annotated-types-0.6.0 anyio-3.7.1 asyncer-0.0.2 bidict-0.23.1 certifi-2024.2.2 chainlit-1.1.101 charset-normalizer-3.3.2 chevron-0.14.0 click-8.1.7 dataclasses_json-0.5.14 deprecated-1.2.14 fastapi-0.110.3 fastapi-socketio-0.0.10 filetype-1.2.0 googleapis-common-protos-1.63.0 grpcio-1.63.0 h11-0.14.0 httpcore-1.0.5 httpx-0.27.0 idna-3.7 importlib-metadata-7.0.0 lazify-0.4.0 literalai-0.0.601 marshmallow-3.21.2 mypy-extensions-1.0.0 nest-asyncio-1.6.0 opentelemetry-api-1.24.0 opentelemetry-exporter-otlp-1.24.0 opentelemetry-exporter-otlp-proto-common-1.24.0 opentelemetry-exporter-otlp-proto-grpc-1.24.0 opentelemetry-exporter-otlp-proto-http-1.24.0 opentelemetry-instrumentation-0.45b0 opentelemetry-proto-1.24.0 opentelemetry-sdk-1.24.0 opentelemetry-semantic-conventions-0.45b0 packaging-23.2 protobuf-4.25.3 pydantic-2.7.1 pydantic-core-2.18.2 pyjwt-2.8.0 python-dotenv-1.0.1 python-engineio-4.9.0 python-multipart-0.0.9 python-socketio-5.11.2 requests-2.31.0 setuptools-69.5.1 simple-websocket-1.0.0 sniffio-1.3.1 starlette-0.37.2 syncer-2.0.3 tomli-2.0.1 typing-extensions-4.11.0 typing-inspect-0.9.0 uptrace-1.24.0 urllib3-2.2.1 uvicorn-0.25.0 watchfiles-0.20.0 wrapt-1.16.0 wsproto-1.2.0 zipp-3.18.2

(chainlit) chainlit % chainlit hello

2024-05-16 18:20:48 - Created default config file at /Users/home/Documents/chainlit/.chainlit/config.toml

2024-05-16 18:20:48 - Created default translation directory at /Users/home/Documents/chainlit/.chainlit/translations

2024-05-16 18:20:48 - Created default translation file at /Users/home/Documents/chainlit/.chainlit/translations/en-US.json

2024-05-16 18:20:49 - Created default chainlit markdown file at /Users/home/Documents/chainlit/chainlit.md

2024-05-16 18:20:49 - Your app is available at http://localhost:8000

2024-05-16 18:20:50 - Translation file for ja not found. Using default translation en-US.

2024-05-16 18:20:50 - Translated markdown file for ja not found. Defaulting to chainlit.md.

以下、簡単に実装を紹介します。

Chainlitはタイプが静的コンテンツのリージョンの、ソースのHTMLコードとして以下を記述することで組み込んでいます。

<iframe
 src="http://localhost:8000"
 style="width: 100%; height: 100%; min-height: 700px"
 frameborder="0"
 allow="microphone">
</iframe>

外観のテンプレートはなしとします。

同じリージョンを、ページ・モードを非モーダル・ダイアログとしたページに配置すると、主となるAPEXアプリケーションとは別画面でChainlitのアプリケーションを操作できます。

Chainlitの埋め込みについては以上です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

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

完