日日是Oracle APEX: 7月 2023

2023年7月31日月曜日

ベクトル・データベースのChromaをAmpere A1のインスタンスで実行する

ベクトル・データベースのChromaをOracle CloudのAlways Free枠で作成したAmpere A1のインスタンス上で実行してみました。

Oracle APEXから呼び出して使用することを想定しているため、サーバーとして実行します。また、インストールする環境はこちらの記事で紹介しているllama_cpp.serverを実行している環境です。ひとつの環境で、Open AIの互換APIを提供するllama_cpp.serverの実行と、ベクトル類似度検索を行なうベクトル・データベースの両方を実装します。

llama_cpp.serverとChromaを同居させるため、Chromaはポート8080でネットワーク接続の待ち受けを行なうように設定します。

firewalldの設定で8080/tcpへの接続を許可します。

sudo firewall-cmd --add-port=8080/tcp --zone=public
sudo firewall-cmd --list-all --zone=public
sudo firewall-cmd --runtime-to-permanent

$ sudo firewall-cmd --add-port=8080/tcp --zone=public

success

$ sudo firewall-cmd --list-all --zone=public

public

target: default

icmp-block-inversion: no

interfaces:

sources:

services: dhcpv6-client http https ssh

ports: 8000/tcp 8080/tcp

protocols:

masquerade: no

forward-ports:

source-ports:

icmp-blocks:

rich rules:

$ sudo firewall-cmd --runtime-to-permanent

success

docker-composeをインストールします。

sudo apt install docker-compose

docker-composeとdocker-composeの実行に必要な関連パッケージがインストールされます。ただし、docker-composeのバージョンが古く（1.25.0-1でした）、このままではChromaのサーバーを実行できません。

DockerのドキュメントのInstall Compose standaloneに記載されているコマンドを実行します。

sudo curl -SL https://github.com/docker/compose/releases/download/v2.20.2/docker-compose-linux-aarch64 -o /usr/local/bin/docker-compose

$ sudo curl -SL https://github.com/docker/compose/releases/download/v2.20.2/docker-compose-linux-aarch64 -o /usr/local/bin/docker-compose

% Total % Received % Xferd Average Speed Time Time Time Current

Dload Upload Total Spent Left Speed

0 0 0 0 0 0 0 0 --:--:-- --:--:-- --:--:-- 0

100 55.3M 100 55.3M 0 0 167M 0 --:--:-- --:--:-- --:--:-- 167M

ダウンロードしたファイルに実行フラグを立てます。

sudo chmod a+x /usr/local/bin/docker-compose

$ sudo chmod a+x /usr/local/bin/docker-compose

今回はARM上の実行なのでaarch64を選んでいます。バージョンも時期によって変わるため、以下のサイトにアクセスして、適切なファイルをダウンロードします。

https://github.com/docker/compose/releases/

ChromaのドキュメントのGetting Startedより、JavaScriptの手順を参照します。

Pythonと異なりJavaScriptのAPIはサーバーを含みません。そのため、Chromaをサーバーとして実行する手順が記載されています。

https://docs.trychroma.com/getting-started

/usr/local/binの下にあるdocker-composeが優先されるように、環境変数PATHを設定します。その後、docker-composeのバージョンを確認します。

export PATH=/usr/local/bin:$PATH
docker-compose -v

ubuntu@mywhisper2:~$ export PATH=/usr/local/bin:$PATH

ubuntu@mywhisper2:~$ docker-compose -v

Docker Compose version v2.20.2

ubuntu@mywhisper2:~$

GitHubよりChromaをクローンします。

git clone https://github.com/chroma-core/chroma.git

$ git clone https://github.com/chroma-core/chroma.git

Cloning into 'chroma'...

remote: Enumerating objects: 16034, done.

remote: Counting objects: 100% (1761/1761), done.

remote: Compressing objects: 100% (512/512), done.

remote: Total 16034 (delta 1386), reused 1486 (delta 1241), pack-reused 14273

Receiving objects: 100% (16034/16034), 173.16 MiB | 58.21 MiB/s, done.

Resolving deltas: 100% (10303/10303), done.

作成されたディレクトリchromaに移動します。

cd chroma

$ cd chroma

~/chroma$ ls

DEVELOP.md bin docker-compose.yml pyproject.toml

Dockerfile chromadb docs requirements.txt

LICENSE clients examples requirements_dev.txt

README.md docker-compose.server.example.yml log_config.yml

RELEASE_PROCESS.md docker-compose.test.yml pull_request_template.md

~/chroma$

docker-compose.ymlを開き、portsの設定を8000:8000から8080:8000に変更します。

version: '3.9'

networks:

net:

driver: bridge

services:

server:

image: server

build:

context: .

dockerfile: Dockerfile

volumes:

- ./:/chroma

- index_data:/index_data

command: uvicorn chromadb.app:app --reload --workers 1 --host 0.0.0.0 --port 8000 --log-config log_config.yml

environment:

- IS_PERSISTENT=TRUE

ports:

- 8080:8000

networks:

- net

volumes:

index_data:

driver: local

backups:

driver: local

docker-composeを実行し、Chomaのサーバーを起動します。

sudo docker-compose up -d --build

ubuntu@mywhisper2:~/chroma$ sudo docker-compose up -d --build

[+] Building 0.3s (15/16)

=> [server internal] load build definition from Dockerfile 0.0s

=> => transferring dockerfile: 771B 0.0s

=> [server internal] load .dockerignore 0.0s

=> => transferring context: 131B 0.0s

=> [server internal] load metadata for docker.io/library/python:3.10-slim-bookworm 0.2s

=> [server builder 1/6] FROM docker.io/library/python:3.10-slim-bookworm@sha256:84ecab4ecf38604b04b 0.0s

=> [server internal] load build context 0.0s

=> => transferring context: 908.78kB 0.0s

=> CACHED [server builder 2/6] RUN apt-get update --fix-missing && apt-get install -y --fix-missing 0.0s

=> CACHED [server final 3/7] RUN mkdir /chroma 0.0s

=> CACHED [server final 4/7] WORKDIR /chroma 0.0s

=> CACHED [server builder 3/6] RUN mkdir /install 0.0s

=> CACHED [server builder 4/6] WORKDIR /install 0.0s

=> CACHED [server builder 5/6] COPY ./requirements.txt requirements.txt 0.0s

=> CACHED [server builder 6/6] RUN pip install --no-cache-dir --upgrade --prefix="/install" -r requ 0.0s

=> CACHED [server final 5/7] COPY --from=builder /install /usr/local 0.0s

=> CACHED [server final 6/7] COPY ./bin/docker_entrypoint.sh /docker_entrypoint.sh 0.0s

=> [server final 7/7] COPY ./ /chroma 0.0s

=> [server] exporting to image 0.0s

=> => exporting layers 0.0s

=> => writing image sha256:be7dda545e17f0772d56a51ffe52739787818d75ad350a0125f20a8c5c602a61 0.0s

=> => naming to docker.io/library/server 0.0s

[+] Running 2/2

✔ Network chroma_net Created 0.2s

✔ Container chroma-server-1 Started 0.4s

ubuntu@mywhisper2:~/chroma$

Nginxがllama_cpp.serverとChromaの両方のプロキシを行なうように、/etc/nginx/conf.d/server.confを以下に置き換えます。

Nginxを再起動します。

sudo systemctl restart nginx

$ sudo systemctl restart nginx

以上でChromaが使えるようになりました。

動作の確認を行います。

手元のPCよりcurlコマンドを使ってAPIを呼び出します。URLや引数は正式な資料が見つからなかったため、JavaScriptのクライアント側のコードより推定しています。

https://github.com/chroma-core/chroma/tree/main/clients/js/src

バージョンを確認します。

curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/version

% curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/version

"0.4.3"

ハートビートを実行します。

curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/heartbeat

% curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/heartbeat

{"nanosecond heartbeat":1690775118527243421}

コレクション（インデックス）my_collectionを作成します。

curl -X POST -H 'Content-Type: application/json' -d '{ "name": "my_collection" }' https://ホスト名/api/v1/collections

% curl -X POST -H 'Content-Type: application/json' -d '{ "name": "my_collection" }' https://ホスト名/api/v1/collections

{"name":"my_collection","id":"ffaa6cfd-e9cd-4358-a9bd-8cd45774ae2b","metadata":null}

レスポンスに含まれるidは、ベクトル埋め込みを追加する際に使用します。

コレクションの一覧を取得します。

curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/collections

% curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/collections

[{"name":"my_collection","id":"ffaa6cfd-e9cd-4358-a9bd-8cd45774ae2b","metadata":null}]

コレクションにベクトル埋め込みを追加します。embeddings以外にmetadatasやdocumentsといった属性も含めることができます。

curl -X POST -H 'Content-Type: application/json' -d '{ "ids": [ "emb01","emb02" ], "embeddings": [[1,2,3],[4,5,6]] }' https://ホスト名/api/v1/collections/コレクションのID/add

% curl -X POST -H 'Content-Type: application/json' -d '{ "ids": [ "emb01","emb02" ], "embeddings": [[1,2,3],[4,5,6]] }' https://ホスト名/api/v1/collections/ffaa6cfd-e9cd-4358-a9bd-8cd45774ae2b/add

true

コレクションに含まれるベクトル埋め込みの数を取得します。

curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/collections/コレクションのID/count

% curl -X GET -H 'Content-Type: application/json' https://ホスト名/api/v1/collections/ffaa6cfd-e9cd-4358-a9bd-8cd45774ae2b/count

コレクションを検索します。

curl -X POST -H 'Content-Type: application/json' -d '{ "query_embeddings": [[1,2,4]] }' https://ホスト名/api/v1/collections/コレクションのID/query

% curl -X POST -H 'Content-Type: application/json' -d '{ "query_embeddings": [[1,2,4]] }' https://ホスト名/api/v1/collections/ffaa6cfd-e9cd-4358-a9bd-8cd45774ae2b/query

{"ids":[["emb01","emb02"]],"distances":[[1.0,22.0]],"metadatas":[[null,null]],"embeddings":null,"documents":[[null,null]]}

コレクションを削除します。

curl -X DELETE -H 'Content-Type: application/json' https://ホスト名/api/v1/collections/コレクション名

% curl -X DELETE -H 'Content-Type: application/json' https://ホスト名/api/v1/collections/my_collection

null

今回の作業は以上になります。ベクトル・データベースとして、一通りの操作ができそうです。

今後、今までPineconeを使っていたAPEXアプリケーションをオープンソースのChromaに置き換えてみようと考えています。

完

2023年7月27日木曜日

ページ・アイテムの値の変更をキャンセルしたときに元の値に戻す

ページ・アイテムの値の変更時に確認のダイアログを表示し、そのダイアログでキャンセルをクリックしたときに元の値に戻すようにします。

以下のような動作です。

ページ・アイテムP1_VALUEを対象に、上記の実装を行います。

設定の[Enter]を押すと送信はオフにします。ページの送信は、ページ・アイテムの値の変更イベントとは関係なく実行されます。また、ページ・アイテムがページに１つだけの場合は[Enter]を押すと送信がオフでもEnterを押すとページの送信が行われるため、このような実装はできません。

ページが開いたときのページ・アイテムP1_VALUEの値を保存しておきます。

ページ・プロパティのJavaScripitのファンクションおよびグローバル変数の宣言に以下を記述します。

ページ・アイテムP1_VALUEに動的アクションを作成します。

タイミングのイベントは、ページ・アイテムのデフォルトである変更を選択します。

TRUEアクションとしてJavaScriptコードの実行を選択し、設定のコードに以下を記述します。

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

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

https://github.com/ujnak/apexapps/blob/master/exports/cancel-and-revert.zip

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

完

外部からの操作で対話グリッドの行をハイライトさせる

対話グリッド自体が持つハイライトの設定ではなく、外部からの操作で対話グリッドの行をハイライトさせる方法について調べました。

サンプルの実装では、ボタンにマウスポインタが乗ったときに、ボタンの静的IDに一致している部門の行をハイライトしています。ポインタが外れたときにハイライトを解除します。

以下、実装方法の紹介です。

サンプル・データセットのEMP/DEPTを英語でインストールして使用します。

アプリケーション作成ウィザードを起動します。名前は対話グリッドの行ハイライトとします。

デフォルトで作成されているホーム・ページを削除し、対話グリッドのページを追加します。

対話グリッドのページの追加では、編集を許可を選択し、表またはビューにEMPを指定します。

以上でアプリケーションを作成します。

アプリケーションが作成されたら、ページ・デザイナで対話グリッドのページを開きます。

対話グリッドをJavaScriptから操作するために、対話グリッドに静的IDを設定します。

詳細の静的IDにempを設定します。

ボタンを配置するリージョンを作成します。

識別のタイトルはButtons、タイプは静的コンテンツです。外観のテンプレートとして、Buttons Containerを選択します。

作成したリージョンにボタンSALESを作成します。識別のボタン名はSALES、ラベルはSalesとします。このボタンの上にマウス・ポインタが乗ったときに、列Departmentの値がSALESである行をハイライトさせます。

レイアウトの新規行の開始はオフにします。これから作成する他のボタンも同様にオフに設定し、それらのボタンを横並びに配置します。

外観のCSSクラスとしてusedForHighlightを設定します。カスタム・イベントのターゲットに使用し、複数のボタンから呼び出される動的アクションを１カ所で定義します。

動作のアクションとして動的アクションで定義を選択します。ボタンを押しても何も実行されないようにします。

詳細の静的IDとしてSALESを指定します。この値と列Departmentの値の一致を確認します。

同様の設定でボタンRESEARCH、OPERATIONS、ACCOUNTINGを作成します。SALESの部分を置き換えます。

画面上に配置するコンポーネントの作成は以上です。

これから行ハイライトの実装を始めます。

ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。行ハイライトを行なうファンクションapplyHighlightRowsと、行ハイライトを解除するremoveHighlightRowsを含みます。

RecordMetadataのhighlightに設定するクラスは、実際にはTR要素のclass属性に追加されます。背景色の変更に使用するCSSクラスをページ・プロパティのCSSのインラインで定義します。

TR要素の子要素であるTDの背景色（background-colorの指定）は、CSS変数の--a-gv-background-colorが設定されています。そのため、TR要素でbackground-colorを指定しても、TD要素の--a-gv-background-color（デフォルトは白）が優先されます。

選択した行の背景色を変更するため、TD要素の背景色である--a-gv-background-colorの定義を変更しています。