Part 2: IBM Bob で機能を追加しよう¶

このパートでは、IBM Bob を使って、Vector Search アプリケーションに新しい機能を追加します。

このパートのゴール¶

IBM Bob の使い方を学ぶ
自然言語で指示を出してコードを生成する
3 つの新機能を追加する

IBM Bob とは？（復習）¶

IBM Bob = AI がコーディングをサポートしてくれる開発ツール

できること:

自然言語で「こういう機能が欲しい」と伝える
IBM Bob が自動的にコードを書いてくれる
コードの説明もしてくれる

メリット:

コーディングの手間を削減
開発時間が大幅に短縮
高品質なコードが生成される

追加する機能¶

このパートでは、以下の 3 つの機能を追加します:

商品画像の表示
価格フィルター
レコメンド理由の表示

ホットリロードについて

アプリケーションにはホットリロード機能がありますが、このハンズオンでは変更内容を確実に反映するため、コード変更前に一度停止し、変更後に起動し直します。

アプリケーションのファイル構成

app.py: FastAPI の API と画面を定義します
common.py: .env、言語切替、Milvus 接続、埋め込みモデル読み込みを扱います
schema.py: Milvus のコレクション定義、インデックス・検索設定、検索結果として返すフィールドを定義します
insert_sample_data.py: サンプル商品データを Milvus に投入します
sample_products.py: 使用するサンプル商品データを PARTICIPANT_LANGUAGE に応じて選択します
sample_products_ja.py: 日本語の商品名、説明、価格などのサンプルデータを定義します

機能 1: 商品画像の表示¶

なぜこの機能が必要？

現在の検索結果は文字だけです。商品画像があると視覚的に分かりやすく、ユーザー体験が向上します。

ステップ 1: IBM Bob を開く¶

IBM Bob の画面下部のチャット入力欄をクリック

ステップ 2: Code モードに切り替え¶

画面右下の「Mode」セレクターをクリック
「Code」を選択

Code モード = コードを書くための専用モード

Code モードへの切り替え練習

Vector Search Builder モード のままでもこのタスクは実行できます。ここでは、モード切り替えの基本操作を練習するために、あえて Code モード に切り替えます。

ステップ 3: アプリケーションを停止¶

アプリケーションを起動しているターミナルで Ctrl+C を押して停止します。

ステップ 4: IBM Bob に指示を出す¶

チャット入力欄に以下を入力して Enter:

/search API の JSON レスポンスに image_url フィールドを追加して。
Swagger UI で確認できる形にして。

ポイント:

具体的に何をしたいか伝える

ステップ 5: IBM Bob の応答を待つ¶

IBM Bob が自動的に以下を行います:

指示を理解
関連ファイルを探す
コードを生成
説明を表示

ステップ 6: IBM Bob の提案を確認¶

IBM Bob が以下のような提案をします。

変更内容:

sample_products_ja.py: 商品データに image_url を追加
schema.py: コレクション定義と検索結果フィールドに image_url を追加
insert_sample_data.py: 新しい商品フィールドを Milvus に投入
app.py: API レスポンスモデルと検索結果 JSON に image_url を追加

実際の提案内容は多少変わる場合がありますが、保存する商品フィールドを追加するときは、API レスポンスと Milvus のデータ定義をそろえる必要があります。

ステップ 7: 変更を承認¶

IBM Bob の提案を読む
「承認」ボタンをクリック
関連ファイルに変更が適用される

ステップ 8: 動作確認¶

Milvus のコレクション定義が変わったため、サンプルデータを再投入:
```
python insert_sample_data.py
```
確認プロンプトについて

Part 1 で作成したコレクションが既に存在するため、スクリプトが このコレクションを削除して作り直しますか？ [y/N] と確認してきます。y と答えてください（.env で設定した自分専用のコレクションのため、他の参加者には影響しません）。
アプリケーションを起動（python app.py を実行。起動方法）
Swagger UI を開く（http://localhost:8002/docs）
検索を実行:
```
{
  "query": "赤いスニーカー"
}
```

結果を確認:

{
  "results": [
    {
      "product_name": "赤いスポーツシューズ",
      "image_url": "https://example.com/images/red-shoes.jpg",
      "similarity_score": 0.5474,
      "price": 7500
    }
  ]
}

確認ポイント: image_url フィールドが追加されている

機能 1 完了チェック¶

IBM Bob に指示を出せた
IBM Bob がコードを生成した
変更を承認した
コレクション定義の変更後にサンプルデータを再投入した
検索結果に image_url が表示される

機能 2: 価格フィルター¶

なぜこの機能が必要？

価格帯で絞り込めると、予算に合った商品を探せます。

ステップ 1: アプリケーションを停止¶

アプリケーションを起動しているターミナルで Ctrl+C を押して停止します。

ステップ 2: IBM Bob に指示を出す¶

チャット入力欄に以下を入力して Enter:

/search API の JSON リクエストで min_price と max_price を指定できるようにして。
指定された価格帯に入る検索結果だけを返すようにして。

ステップ 3: IBM Bob の提案を確認¶

IBM Bob が以下のような提案をします。

変更内容:

app.py: 検索リクエストに min_price と max_price パラメータを追加
検索結果を価格帯でフィルタリング

価格は既存の Milvus コレクションに保存済みのため、この機能では通常 schema.py の変更やサンプルデータの再投入は不要です。

ステップ 4: 変更を承認¶

「承認」ボタンをクリック

ステップ 5: 動作確認¶

アプリケーションを起動（python app.py を実行。起動方法）

検索を実行:

{
  "query": "スニーカー",
  "min_price": 5000,
  "max_price": 10000
}

結果を確認: 5000 円〜10000 円の商品のみ表示される

機能 2 完了チェック¶

IBM Bob に指示を出せた
変更を承認した
価格フィルターが動作する

機能 3: レコメンド理由の表示¶

なぜこの機能が必要？

なぜその商品がおすすめなのかを表示すると、ユーザーの納得感が高まります。

ステップ 1: アプリケーションを停止¶

アプリケーションを起動しているターミナルで Ctrl+C を押して停止します。

ステップ 2: IBM Bob に指示を出す¶

チャット入力欄に以下を入力して Enter:

/search API の JSON レスポンスに recommendation_reason フィールドを追加して。
類似度スコアに基づいて理由のテキストを生成して。

ステップ 3: IBM Bob の提案を確認¶

IBM Bob が以下のような提案をします。

変更内容:

app.py: API レスポンスモデルと検索結果 JSON に recommendation_reason を追加
類似度スコアに基づいて理由を生成

レコメンド理由は検索スコアから生成するため、この機能では通常、保存済みの商品データを変更する必要はありません。

ステップ 4: 変更を承認¶

「承認」ボタンをクリック

ステップ 5: 動作確認¶

アプリケーションを起動（python app.py を実行。起動方法）

検索を実行:

{
  "query": "初心者向けのカメラ"
}

結果を確認:

{
  "results": [
    {
      "product_name": "入門用デジタルカメラ",
      "similarity_score": 0.6123,
      "recommendation_reason": "検索内容と関連しています（類似度: 0.6123）"
    }
  ]
}

機能 3 完了チェック¶

IBM Bob に指示を出せた
変更を承認した
レコメンド理由が表示される

Part 2 完了チェック¶

商品画像表示機能を追加した
価格フィルター機能を追加した
レコメンド理由表示機能を追加した
すべての機能が正しく動作する

FAQ¶

Q1: IBM Bob が応答しない

対処法:

インターネット接続を確認
IBM Bob を再起動

Q2: 変更が反映されない

対処法:

ファイルが保存されているか確認
アプリケーションを手動で再起動
1. アプリケーションを起動しているターミナルで Ctrl+C （停止）
2. python app.py を実行（起動方法）
ブラウザをリロード

Q3: エラーが表示される

対処法:

エラーメッセージをコピー
IBM Bob のチャット画面で以下を入力:
```
このエラーを解決して
```

次のステップ¶

Part 2 が完了したら、Part 3: 動作確認に進みましょう！