はじめに

OCI Visionは、ディープラーニング・ベースの画像分析を大規模に実行するためのAIサービスです。機械学習（ML）の専門知識がなくても、すぐに使える事前構築済みのモデルを利用して、アプリケーションに画像認識やテキスト認識等を簡単に組み込むことができます。

本記事では、LiveLabsのBuild AI-Powered Image Search into your Oracle APEX Appを参考に、Oracle APEXで作成したソーシャル・メディア・アプリ（インスタグラムの様な写真を投稿することの出来るアプリ）に、OCI Visionの画像分類を使用してAI搭載の検索機能を実装します。

【前提条件】

OCIのアカウントを作成済みであること
（OCIのアカウントをお持ちでない場合は、こちらを参考にご作成下さい。）
OCIの中に使用可能なコンパートメントが作成済みであること
（コンパートメントの作成方法はこちらをご参照ください。）

【所要時間】
30分程

1. APEXでのアプリケーション開発

Oracle APEXは、Oracle Databaseのためのローコード・アプリケーション開発プラットフォームです。クラウドでもオンプレミスでも、Oracle Database上であればどこでもアプリケーションの開発・実装をすることが出来ます。

Oracle APEXはデータベースのライセンスに含まれているため、Oracle Databaseのライセンスをお持ちの方は無料でご使用出来るツールです。

エクセルやCSVファイルをインポートする事も可能で、インポートしたデータを基に簡単に素早くアプリケーション開発を行う事が出来ます。

1-1. APEX環境の準備

先ずは、APEXの開発環境を準備します。既にAPEXの開発環境をお持ちの方は2. OCI APIキーの設定へスキップして下さい。

OCIコンソールにログインし、ホームページにあるクイックスタート>APEXを使用したAutonomous Databaseへのロー・コード・アプリケーションのデプロイをクリックします。
続行をクリック
有効な管理権限を持つコンパートメントを選択します。
作成するAutonomous DatabaseのADMIN用パスワードを入力します。
APEXのデプロイが完了したら、APEXの起動をクリックします
先程設定したデータベースのADMIN用パスワードを入力し、管理にサインインをクリックします。
次に、アプリケーションを作成する開発環境（ワークスペース）を作成します。ワークスペースの作成をクリックします。
新規のスキーマをクリックします。
立ち上がったワークスペース作成のポップアップウィンドウに以下を入力します。
- ワークスペース名 - 任意（本記事ではOCI_VISIONとしています。APEXのワークスペースへのログイン時に使用するので忘れない様にご注意下さい。）
- ワークスペース・ユーザー名 - 任意（ご自分の名前等、お好きなユーザー名をご入力下さい。APEXのワークスペースへのログイン時に使用するので、忘れない様にご注意下さい。）
- ワークスペース・パスワード - 任意（本記事では**Welcome12345#**としています。APEXのワークスペースへのログイン時に使用するので、忘れない様にご注意下さい。）
ワークスペースを作成すると、画面上部にメッセージが表示されます。ワークスペース名をクリックして、作成したワークスペースにログインします。
先程設定したワークスペース名、ワークスペース・ユーザー名、ワークスペース・パスワードを入力し、サインインをクリックします。
APEXのワークスペースにログインする事が出来ました。

これでAPEXの開発環境の準備が出来ました。

2. OCI APIキーの設定

REST APIを介してOracle APEXからOCIリソースにアクセスする為、OCI APIキーを生成し、Webクレデンシャルを作成します。

2-1. OCI APIキーの作成

OCIコンソールの右上にある人のアイコンをクリックし、自分のプロファイル（若しくはユーザー設定）をクリックします。
下にスクロールし、画面左側に表示されているリソースの中からAPIキーをクリックします。APIキーの追加をクリックします。
APIキー・ペアの生成を選び、秘密キーのダウンロードをクリックします（公開キーをダウンロードする必要はありません）。秘密キーをダウンロード後追加をクリックします。
構成ファイルのプレビューをコピーします。後程Webクレデンシャルを作成する際に使用するので、メモを取っておきます。メモを取ったら閉じるをクリックします。

これでOCI APIキーを取得する事が出来ました。

2-2. Webクレデンシャルの作成

先程作成したワークスペースに戻り、アプリケーション・ビルダーをクリックします。
OCIのサービスと連携させるため、Webクレデンシャルを作成します。ワークスペース・ユーティリティをクリックします。
Web資格証明をクリックします。
作成をクリックします。
Web資格証明の入力欄に、以下を入力し、作成をクリックします。
- 名前 - apex_ai_cred
- 認証タイプ - Oracle Cloud Infrastructure (OCI)
- OCIユーザーID - ユーザーのOCID（OCI APIキー作成時にメモを取った構成ファイルのプレビューの中に記載があります。例：ocid1.user.oc1..aaaaaaaa******wj3v23yla）
- OCI秘密キー - APIキーの作成時にダウンロードした秘密キー（APIキーの作成時にダウンロードした秘密キーをテキストエディタ等で開き、コピー＆ペーストします。）
- OCIテナンシID - テナンシのOCID（OCI APIキー作成時にメモを取った構成ファイルのプレビューの中に記載があります。例：ocid1.tenancy.oc1..aaaaaaaaf7ush****cxx3qka）
- OCI公開キー・フィンガープリント - フィンガープリントID（OCI APIキー作成時にメモを取った構成ファイルのプレビューの中に記載があります。例：a8:8e:c2:8b:fe:****:ff:4d:40）
アプリケーション・ビルダーをクリックします。

3. アプリケーションのインポートと編集

事前作成済みのアプリケーションとそれに付随するオブジェクト（データベースの表）をインポートし、表を編集します。

3-1. 事前作成済みアプリケーションのインポート

LiveLabsのBuild a Social Media App Using Oracle APEX!を参考にして作成したソーシャル・メディア・アプリ上にAI搭載の検索機能を実装します。こちらをクリックし、「f101.zip」をダウンロードします。
事前に作成済みのアプリケーションを元にアプリケーションを作成するので、インポートをクリックします。
先程ダウンロードした.zipファイルをドラッグアンドドロップし、次をクリックします。
設定事項はデフォルトのままにして、アプリケーションのインストールをクリックします。
サポートするオブジェクトのインストールをクリックし、アプリケーションで使用する表もインストールします。
アプリケーション、表のインストールが終わったら、アプリケーションの編集をクリックします。

3-2. データベースの表へ列を追加

画面上部のSQLワークショップ>オブジェクト・ブラウザをクリックします。
画面左側の表>SM_POSTをクリックし、列の追加をクリックします。
列の追加画面で以下の通りに入力し、適用をクリックします。
- 列 - AI_OUTPUT
- データ型 - VARCHAR2
- 長さ - 1000
AI_OUTPUT列は、OCI Visionからのレスポンスを格納するための列となります。AI_OUTPUT列が追加されているのを確認したら、アプリケーション・ビルダーをクリックします。
先程インポートしたAPEX Social Mediaという名前のアプリが表示されています。インポートされたアプリをクリックし、アプリケーションの編集ページへ移動します。

4. OCI VisionとOracle APEXの連携

「ユーザーがアプリに写真を投稿すると、OCI Vision APIが呼び出され、画像分類が行われる」ようにするため、OCI Visionとの接続に使用するRESTデータ・ソースと、そのRESTデータ・ソースを呼び出すプロセスを作成します。

4-1. RESTデータ・ソースの作成

RESTデータソースを作成します。共有コンポーネントをクリックします。
左下のデータ・ソース>RESTデータ・ソースをクリックします。
作成をクリックします。
最初からを選択し、次をクリックします。
入力欄に以下を記入し、次をクリックします。
- RESTデータ・ソース・タイプ - Oracle Cloud Infrastructure (OCI)
- 名前 - OCI Vision
- URLエンドポイント - 各リージョンのAPIエンドポイント + /20220125/actions/analyzeImage（APIキーとADBインスタンスを作成したリージョンによって異なります。）
リージョンがAshburnの場合：
- URLエンドポイント = https://vision.aiservice.us-ashburn-1.oci.oraclecloud.com/20220125/actions/analyzeImage
リージョンがTokyoの場合：
- URLエンドポイント =https://vision.aiservice.ap-tokyo-1.oci.oraclecloud.com/20220125/actions/analyzeImage
その他のリージョンの場合：
- こちらから使用しているリージョンに対応するAPIエンドポイントをご確認下さい。APIエンドポイントの後ろに「/20220125/actions/analyzeImage」を付け忘れない様にご注意下さい。
入力したURLエンドポイントがベースURLとサービスURLパスに分かれているのを確認し、次をクリックします。
認証の画面で以下の通りに選択し、RESTソースの手動作成をクリックします。
- 認証が必要です - トグルをオン
- 資格証明 - api_ai_cred
作成したRESTソース、OCI Visionをクリックします。
下へスクロールし、操作>POSTを編集します。ペンのアイコンをクリックします。
操作の画面で以下を入力します。
- データベース操作 - マップされていません
- リクエスト本文テンプレート - 以下のJSONをコピー＆ペースト（OCI VisionはJSONフォーマットのリクエストのみ受け付けます）
```
{
     "compartmentId": "#COMPARTMENT_ID#",
     "image": {
     "source": "INLINE",
     "data": "#FILE_DATA#"
   },
  "features": [
  {
        "featureType": "#FEATURE_TYPE#",
        "maxResults": 5
     }
    ]
  }
```
パラメータの追加をクリックし、その後出てくるポップアップウィンドウを一度閉じます。その後、本文との同期が表示されるので、クリックします。
ポップアップ画面が出てくるので、OKをクリックします。
3つの操作パラメータが作成されました。あと2つパラメータを追加したいので、パラメータの追加をクリックします。
パラメータの編集画面で、以下の通りに入力します。このパラメータは、レスポンスを記録しておくためのものです。入力し終えたら、追加後、さらに追加をクリックします。
- タイプ - リクエストまたはレスポンス本文
- 名前 - RESPONSE
- 目的 - 出力
パラメータの編集画面で、以下の通りに入力し、パラメータの追加をクリックします。
- タイプ - HTTPヘッダー
- 名前 - Content-Type
- 目的 - 入力
- デフォルト値 - application/json
- 静的 - トグルをオン
今までの変更を保存します。変更の保存をクリックします。

4-2. RESTデータ・ソースを呼び出すプロセスを作成する

次に、先程作成したOCI VisionというRESTデータ・ソースを呼び出すプロセスをAPEXのページデザイナーで作成します。

アプリケーションIDをクリックします。
画面下部にあるTimelineというページをクリックします。
Timelineという名前のリージョンを右クリックし、アイテムの作成をクリックします。
作成したアイテムを編集します。画面右側のプロパティ・エディタで以下の通り入力します。
- 名前 - P1_RESPONSE
- タイプ - 非表示
次に、画面左側のプロセスタブへ移動します。プロセスを右クリックし、プロセスの作成をクリックします。
作成したプロセスを編集し、ユーザーがアプリに写真を投稿するたびにこのプロセスが呼び出される様にします。画面右側のプロパティ・エディタで以下の通り入力します。
- 識別
  - 名前 - Analyze Image
  - タイプ - 実行チェーン
- 設定
  - バックグラウンドで実行 - トグルをオン
作成したAnalyze Imageというプロセスを右クリックし、子プロセスの追加をクリックします。
作成した子プロセスを編集し、RESTデータ・ソースを呼び出すプロセスにします。画面右側のプロパティ・エディタで以下の通り入力します。
- 識別
  - 名前 - Invoke REST Data Source
  - タイプ - APIの呼び出し
  - 実行チェーン - Analyze Image
- 設定
  - タイプ - RESTソース
  - RESTソース - OCI Vision
  - 操作 - POST
左側のビューからCOMPARTMENT_IDをクリックします。右側のプロパティ・エディタに以下を入力します。
- 値
  - タイプ - 静的値
  - 静的値 - コンパートメントID
【コンパートメントID】
- ルートコンパートメントを使用している場合：OCI APIキー作成時にメモを取った構成ファイルのプレビューの中に記載があります
- それ以外のコンパートメントを使用している場合：OCIコンソールのナビゲーションメニュー>アイデンティティとセキュリティ>コンパートメントから、使用しているコンパートメントのOCIDを探します
画面左のビューからFEATURE_TYPEをクリックします。右側のプロパティ・エディタに以下を入力します。
- 値
  - タイプ - 静的値
  - 静的値 - IMAGE_CLASSIFICATION（本記事では画像分類のみを行うので、IMAGE_CLASSIFICATIONと設定します）
左側のビューからFILE_DATAをクリックします。右側のプロパティ・エディタに以下を入力します。
- 値
  - タイプ - SQL問合せ（単一の値を返す）
  - 静的値 - 以下のSQLクエリをコピー＆ペースト（アップロードした画像ファイルを取得し、CLOBデータ型に変換するクエリです）
```
select 
    replace(replace(apex_web_service.blob2clobbase64(file_blob),chr(10),''),chr(13),'')
from SM_posts
where ID = :P1_ID;
```
入力すると、以下の様になります。
画面左のビューからRESPONSEをクリックします。右側のプロパティ・エディタに以下を入力します。
- パラメータ
  - 出力を無視 - トグルをオフ
- 値
  - アイテム - P1_RESPONSE
画面左のビューから、作成したAnalyze Imageというプロセスを右クリックし、子プロセスの追加をクリックします。
作成した子プロセスを編集します。画面右側のプロパティ・エディタで以下の通り入力します。
- 識別
  - 名前 - Parse the Response
- ソース
  - PL/SQLコード - 以下のSQLクエリをコピー＆ペースト（OCI Visionが行った画像分類の結果を、SM_POST表のAI_OUTPUTに格納するクエリです）
```
UPDATE SM_POSTS
SET
AI_OUTPUT = (
    SELECT
        LISTAGG(obj_name, ',') WITHIN GROUP(
        ORDER BY
            obj_name
        )
    FROM
        JSON_TABLE ( :P1_RESPONSE, '$.labels[*]'
            COLUMNS
                obj_name VARCHAR2 ( 100 ) PATH '$.name[*]'
        )
  )
 WHERE
 ID = :P1_ID;
```
これでプロセスの作成が終わりました。保存をクリックし、今までの変更を保存します。

4-3. AIを搭載した検索機能を実装する

レンダリング・ビューにタブを切り替え、After Logoを右クリックし、アイテムの作成をクリックします。
画面右のプロパティ・エディタで以下の通りに入力します。
- 識別
  - 名前 - P1_AI_SEARCH
- 設定
  - [Enter]を押すと送信 - トグルをオン
- 外観
  - テンプレート - Hidden
  - 幅 - 100
  - 値のプレースフォルダー - 検索したい写真を表す言葉を入力してください

Timelineリージョンをクリックし、画面右のプロパティ・エディタで以下を入力します。

送信するページ・アイテム - P1_AI_SEARCH
SQL問合せ - 以下のSQLクエリに変更（アップロードした投稿を全て表示するSQLクエリが記述されているので、検索機能を実装し投稿フィルタリングできるように、where句を追記します）

select
p.id,
p.created_by AS user_name,
p.post_comment AS comment_text,
p.file_blob,
p.file_mime,    
apex_util.get_since(p.created) post_date,
(
    select count(*) from SM_REACTIONS smr
    where smr.post_id=p.id
) as REACTIONS,
(
    select 'user-has-liked' from SM_REACTIONS smr
    where smr.post_id=p.id and created_by=UPPER(:APP_USER)
) USER_REACTION_CSS
from SM_POSTS p
where (:P1_AI_SEARCH IS NOT NULL AND upper(ai_output) like upper('%'||:P1_AI_SEARCH||'%'))OR :P1_AI_SEARCH IS NULL
order by p.created desc;

変更が終わったら、右上にある保存と実行をクリックします。

アプリを実行すると、ログイン画面が表示されます。このログイン画面は、APEXでアプリケーションを開発するとデフォルトで実装される機能です。ワークスペースのユーザー名とパスワードを入力し、サインインします。
サインインするとこの様な画面が表示されます。今はまだ写真をアップロードしていないので、何も表示されないままで大丈夫です。

5. OCI Vision Serviceを試してみる

作成したソーシャル・メディア・アプリに写真を投稿し、AI搭載の画像検索機能を試してみます。
本記事ではこちらのサイトから、無料、かつロイヤリティフリーの写真をダウンロードし、使用しています。

画面左上の投稿ボタンをクリックし、写真をアップロードします。
写真をアップロード、コメントを入力したら、投稿ボタンをクリックし、写真を投稿します。
この様に写真を投稿する事が出来ました。他にも写真を投稿してみます。

アプリケーションに他のユーザーも追加すれば、他のユーザーも投稿をすることが出来ます。
写真を何枚か投稿したら、投稿した写真を表す・関連する言葉を検索バーに入力し、検索してみます。試しにdogと入力し、検索してみます。投稿されている犬の写真が全て表示されました。（検索するワードは投稿した写真に合わせて変更して下さい。）
次に、flowerと入力し、検索してみます。投稿されている花の写真が全て表示されました。（検索するワードは投稿した写真に合わせて変更して下さい。）

この様に、写真を検索する事が出来ました。

【補足】
表のAI_OUTPUT列に、各画像に紐ずくワード（OCI Visionが行った画像分類の結果）が格納されています。
画像ごとにそれぞれ5つずつワードがタグ付けされており、その内いずれかのワードで検索すると画像が検索結果として表示されるようになります。

参考資料