LoginSignup
2
0
お題は不問！Qiita Engineer Festa 2024で記事投稿！
Qiita Engineer Festa20242024年7月17日まで開催中！
@marfujim(Marina Fujimoto)in日本オラクル株式会社

OCI Vision Serviceを使ってAIを搭載した画像検索が出来るアプリを作る

Last updated at Posted at 2024-06-11

はじめに

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キーの設定へスキップして下さい。

  1. OCIコンソールにログインし、ホームページにあるクイックスタート>APEXを使用したAutonomous Databaseへのロー・コード・アプリケーションのデプロイをクリックします。
    1-1.png

  2. 続行をクリック
    1-2.png

  3. 有効な管理権限を持つコンパートメントを選択します。
    1-3.png

  4. 作成するAutonomous DatabaseのADMIN用パスワードを入力します。
    1-5.png

  5. APEXのデプロイが完了したら、APEXの起動をクリックします
    1-6.png

  6. 先程設定したデータベースのADMIN用パスワードを入力し、管理にサインインをクリックします。
    1-7.png

  7. 次に、アプリケーションを作成する開発環境（ワークスペース）を作成します。ワークスペースの作成をクリックします。
    1-8.png

  8. 新規のスキーマをクリックします。
    1-9.png

  9. 立ち上がったワークスペース作成のポップアップウィンドウに以下を入力します。

    • ワークスペース名 - 任意（本記事ではOCI_VISIONとしています。APEXのワークスペースへのログイン時に使用するので忘れない様にご注意下さい。）
    • ワークスペース・ユーザー名 - 任意（ご自分の名前等、お好きなユーザー名をご入力下さい。APEXのワークスペースへのログイン時に使用するので、忘れない様にご注意下さい。）
    • ワークスペース・パスワード - 任意（本記事では**Welcome12345#**としています。APEXのワークスペースへのログイン時に使用するので、忘れない様にご注意下さい。）
      1-10.png

  10. ワークスペースを作成すると、画面上部にメッセージが表示されます。ワークスペース名をクリックして、作成したワークスペースにログインします。
    1-11.png

  11. 先程設定したワークスペース名、ワークスペース・ユーザー名、ワークスペース・パスワードを入力し、サインインをクリックします。
    1-12.png

  12. APEXのワークスペースにログインする事が出来ました。
    1-13.png

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

2. OCI APIキーの設定

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

2-1. OCI APIキーの作成

  1. OCIコンソールの右上にある人のアイコンをクリックし、自分のプロファイル（若しくはユーザー設定）をクリックします。
    2-1.png

  2. 下にスクロールし、画面左側に表示されているリソースの中からAPIキーをクリックします。APIキーの追加をクリックします。
    2-2.png

  3. APIキー・ペアの生成を選び、秘密キーのダウンロードをクリックします（公開キーをダウンロードする必要はありません）。秘密キーをダウンロード後追加をクリックします。
    2-3.png

  4. 構成ファイルのプレビューをコピーします。後程Webクレデンシャルを作成する際に使用するので、メモを取っておきます。メモを取ったら閉じるをクリックします。
    2-4.png

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

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

  1. 先程作成したワークスペースに戻り、アプリケーション・ビルダーをクリックします。
    2-5.png

  2. OCIのサービスと連携させるため、Webクレデンシャルを作成します。ワークスペース・ユーティリティをクリックします。
    2-6.png

  3. Web資格証明をクリックします。
    2-7.png

  4. 作成をクリックします。
    2-8.png

  5. 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）
      2-9.png

  6. アプリケーション・ビルダーをクリックします。
    2-10.png

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

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

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

  1. LiveLabsのBuild a Social Media App Using Oracle APEX!を参考にして作成したソーシャル・メディア・アプリ上にAI搭載の検索機能を実装します。こちらをクリックし、「f101.zip」をダウンロードします。
    3-1.png

  2. 事前に作成済みのアプリケーションを元にアプリケーションを作成するので、インポートをクリックします。
    3-2.png

  3. 先程ダウンロードした.zipファイルをドラッグアンドドロップし、次をクリックします。
    3-3.png

  4. 設定事項はデフォルトのままにして、アプリケーションのインストールをクリックします。
    3-4.png

  5. サポートするオブジェクトのインストールをクリックし、アプリケーションで使用する表もインストールします。
    3-5.png

  6. アプリケーション、表のインストールが終わったら、アプリケーションの編集をクリックします。
    3-6.png

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

  1. 画面上部のSQLワークショップ>オブジェクト・ブラウザをクリックします。
    3-7.png

  2. 画面左側の表>SM_POSTをクリックし、列の追加をクリックします。
    3-8.png

  3. 列の追加画面で以下の通りに入力し、適用をクリックします。

    • 列 - AI_OUTPUT
    • データ型 - VARCHAR2
    • 長さ - 1000
      3-9.png

  4. AI_OUTPUT列は、OCI Visionからのレスポンスを格納するための列となります。AI_OUTPUT列が追加されているのを確認したら、アプリケーション・ビルダーをクリックします。
    3-10.png

  5. 先程インポートしたAPEX Social Mediaという名前のアプリが表示されています。インポートされたアプリをクリックし、アプリケーションの編集ページへ移動します。
    3-11.png

4. OCI VisionとOracle APEXの連携

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

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

  1. RESTデータソースを作成します。共有コンポーネントをクリックします。
    4-1.png

  2. 左下のデータ・ソース>RESTデータ・ソースをクリックします。
    4-2.png

  3. 作成をクリックします。
    4-3.png

  4. 最初からを選択し、次をクリックします。
    4-4.png

  5. 入力欄に以下を記入し、次をクリックします。
    4-5.png

    • RESTデータ・ソース・タイプ - Oracle Cloud Infrastructure (OCI)
    • 名前 - OCI Vision
    • URLエンドポイント - 各リージョンのAPIエンドポイント + /20220125/actions/analyzeImage（APIキーとADBインスタンスを作成したリージョンによって異なります。）

    リージョンがAshburnの場合：

    リージョンがTokyoの場合：

    その他のリージョンの場合：

    • こちらから使用しているリージョンに対応するAPIエンドポイントをご確認下さい。APIエンドポイントの後ろに「/20220125/actions/analyzeImage」を付け忘れない様にご注意下さい。

  6. 入力したURLエンドポイントがベースURLとサービスURLパスに分かれているのを確認し、次をクリックします。
    4-6.png

  7. 認証の画面で以下の通りに選択し、RESTソースの手動作成をクリックします。

    • 認証が必要です - トグルをオン
    • 資格証明 - api_ai_cred
      4-7.png

  8. 作成したRESTソース、OCI Visionをクリックします。
    4-8.png

  9. 下へスクロールし、操作>POSTを編集します。ペンのアイコンをクリックします。
    4-9.png

  10. 操作の画面で以下を入力します。

    • データベース操作 - マップされていません
    • リクエスト本文テンプレート - 以下のJSONをコピー＆ペースト（OCI VisionはJSONフォーマットのリクエストのみ受け付けます）
    {
     "compartmentId": "#COMPARTMENT_ID#",
     "image": {
     "source": "INLINE",
     "data": "#FILE_DATA#"
   },
  "features": [
  {
        "featureType": "#FEATURE_TYPE#",
        "maxResults": 5
     }
    ]
  }

  11. パラメータの追加をクリックし、その後出てくるポップアップウィンドウを一度閉じます。その後、本文との同期が表示されるので、クリックします。
    4-10.png

  12. ポップアップ画面が出てくるので、OKをクリックします。
    4-11.png

  13. 3つの操作パラメータが作成されました。あと2つパラメータを追加したいので、パラメータの追加をクリックします。
    4-12.png

  14. パラメータの編集画面で、以下の通りに入力します。このパラメータは、レスポンスを記録しておくためのものです。入力し終えたら、追加後、さらに追加をクリックします。

    • タイプ - リクエストまたはレスポンス本文
    • 名前 - RESPONSE
    • 目的 - 出力
      4-13.png

  15. パラメータの編集画面で、以下の通りに入力し、パラメータの追加をクリックします。

    • タイプ - HTTPヘッダー
    • 名前 - Content-Type
    • 目的 - 入力
    • デフォルト値 - application/json
    • 静的 - トグルをオン
      4-14.png

  16. 今までの変更を保存します。変更の保存をクリックします。
    4-15.png

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

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

  1. アプリケーションIDをクリックします。
    4-16.png

  2. 画面下部にあるTimelineというページをクリックします。
    4-17.png

  3. Timelineという名前のリージョンを右クリックし、アイテムの作成をクリックします。
    4-18.png

  4. 作成したアイテムを編集します。画面右側のプロパティ・エディタで以下の通り入力します。

    • 名前 - P1_RESPONSE
    • タイプ - 非表示
      4-19.png

  5. 次に、画面左側のプロセスタブへ移動します。プロセスを右クリックし、プロセスの作成をクリックします。
    4-20.png

  6. 作成したプロセスを編集し、ユーザーがアプリに写真を投稿するたびにこのプロセスが呼び出される様にします。画面右側のプロパティ・エディタで以下の通り入力します。

    • 識別
      • 名前 - Analyze Image
      • タイプ - 実行チェーン
    • 設定
      • バックグラウンドで実行 - トグルをオン
        4-21.png

  7. 作成したAnalyze Imageというプロセスを右クリックし、子プロセスの追加をクリックします。
    4-22.png

  8. 作成した子プロセスを編集し、RESTデータ・ソースを呼び出すプロセスにします。画面右側のプロパティ・エディタで以下の通り入力します。

    • 識別
      • 名前 - Invoke REST Data Source
      • タイプ - APIの呼び出し
      • 実行チェーン - Analyze Image
    • 設定
      • タイプ - RESTソース
      • RESTソース - OCI Vision
      • 操作 - POST
        4-23.png

  9. 左側のビューからCOMPARTMENT_IDをクリックします。右側のプロパティ・エディタに以下を入力します。
    4-24.png

    • 値
      • タイプ - 静的値
      • 静的値 - コンパートメントID

    【コンパートメントID】

    • ルートコンパートメントを使用している場合：OCI APIキー作成時にメモを取った構成ファイルのプレビューの中に記載があります
    • それ以外のコンパートメントを使用している場合：OCIコンソールのナビゲーションメニュー>アイデンティティとセキュリティ>コンパートメントから、使用しているコンパートメントのOCIDを探します

  10. 画面左のビューからFEATURE_TYPEをクリックします。右側のプロパティ・エディタに以下を入力します。

    • 値
      • タイプ - 静的値
      • 静的値 - IMAGE_CLASSIFICATION（本記事では画像分類のみを行うので、IMAGE_CLASSIFICATIONと設定します）
        4-25.png

  11. 左側のビューから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;

    入力すると、以下の様になります。
    4-26.png

  12. 画面左のビューからRESPONSEをクリックします。右側のプロパティ・エディタに以下を入力します。

    • パラメータ
      • 出力を無視 - トグルをオフ
    • 値
      • アイテム - P1_RESPONSE
        4-27.png

  13. 画面左のビューから、作成したAnalyze Imageというプロセスを右クリックし、子プロセスの追加をクリックします。
    4-28.png

  14. 作成した子プロセスを編集します。画面右側のプロパティ・エディタで以下の通り入力します。

    • 識別
      • 名前 - 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-29.png

  15. これでプロセスの作成が終わりました。保存をクリックし、今までの変更を保存します。

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

  1. レンダリング・ビューにタブを切り替え、After Logoを右クリックし、アイテムの作成をクリックします。
    4-30.png

  2. 画面右のプロパティ・エディタで以下の通りに入力します。

    • 識別
      • 名前 - P1_AI_SEARCH
    • 設定
      • [Enter]を押すと送信 - トグルをオン
    • 外観
      • テンプレート - Hidden
      • 幅 - 100
      • 値のプレースフォルダー - 検索したい写真を表す言葉を入力してください
        4-31.png

  3. 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;

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

  4. アプリを実行すると、ログイン画面が表示されます。このログイン画面は、APEXでアプリケーションを開発するとデフォルトで実装される機能です。ワークスペースのユーザー名とパスワードを入力し、サインインします。
    4-33.png

  5. サインインするとこの様な画面が表示されます。今はまだ写真をアップロードしていないので、何も表示されないままで大丈夫です。
    4-34.png

5. OCI Vision Serviceを試してみる

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

  1. 画面左上の投稿ボタンをクリックし、写真をアップロードします。
    5-1.png

  2. 写真をアップロード、コメントを入力したら、投稿ボタンをクリックし、写真を投稿します。
    5-2.png

  3. この様に写真を投稿する事が出来ました。他にも写真を投稿してみます。
    5-3.png
    アプリケーションに他のユーザーも追加すれば、他のユーザーも投稿をすることが出来ます。
    5-4.png

  4. 写真を何枚か投稿したら、投稿した写真を表す・関連する言葉を検索バーに入力し、検索してみます。試しにdogと入力し、検索してみます。投稿されている犬の写真が全て表示されました。（検索するワードは投稿した写真に合わせて変更して下さい。）
    5-5.png

  5. 次に、flowerと入力し、検索してみます。投稿されている花の写真が全て表示されました。（検索するワードは投稿した写真に合わせて変更して下さい。）
    5-6.png

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

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

参考資料

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0