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

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

このパートのゴール¶

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

IBM Bob とは？（復習）¶

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

できること:

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

メリット:

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

追加する機能¶

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

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

追加した項目は検索画面に自動で表示されます

検索画面は、/search API が返した内容をそのまま表示します。API が image_url や recommendation_reason を返すようになったり、min_price と max_price を受け付けるようになったりすると、画面に商品画像やレコメンド理由が表示され、価格フィルターが使えるようになります。このパートで IBM Bob に変更を依頼するのは、API とデータだけです。

ホットリロードについて

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

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

app.py: FastAPI の API を定義し、検索画面を配信します
schema.py: Milvus のコレクション定義、インデックス・検索設定、検索結果として返すフィールドを定義します
insert_sample_data.py: サンプル商品データを Milvus に投入します
static/: 検索画面（HTML、JavaScript、CSS）と商品画像（static/images/product-01.svg〜product-12.svg）です。このパートで変更する必要はありません

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

なぜこの機能が必要？

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

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

IBM Bob の画面下部のチャット入力欄をクリック。モードは Vector Search Builder のままにします。

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

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

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

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

検索結果に商品画像を表示して。

ポイント:

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

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

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

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

ステップ 5: IBM Bob の変更を確認¶

IBM Bob の作業が終わると、/search のレスポンスの各商品に、/static/images/product-01.svg のような image_url が入ります。IBM Bob が編集するファイルは変わる場合があります。

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

IBM Bob がコマンドの実行の承認を求めたら、承認します。

ステップ 7: 動作確認¶

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

Part 1 で作成したコレクションが既に存在するため、スクリプトが このコレクションを削除して作り直しますか？ [y/N] と確認してきます。y と答えてください（.env で設定した自分専用のコレクションのため、他の参加者には影響しません）。
アプリケーションを起動（起動方法）
検索画面を開く（http://localhost:8002）。既に開いている場合はページを再読み込み
以下を検索:
```
赤いスニーカー
```
結果を確認: 各商品のカードに商品画像が表示される

確認ポイント: 商品画像が表示されている。API は /static/images/product-01.svg のような image_url を返し、画面はそのパスの画像を表示します

機能 1 完了チェック¶

IBM Bob に指示を出せた
IBM Bob がコードを生成した
変更を承認した
コレクション定義を変更した場合は、サンプルデータを再投入した
検索結果に商品画像が表示される

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

なぜこの機能が必要？

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

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

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

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

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

検索に価格帯の絞り込みを追加して。

ステップ 3: IBM Bob の変更を確認¶

IBM Bob の作業が終わると、/search のリクエストで min_price と max_price を指定でき、その価格帯の商品だけが返ります。

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

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

IBM Bob がコマンドの実行の承認を求めたら、承認します。

ステップ 5: 動作確認¶

アプリケーションを起動（起動方法）
検索画面を再読み込み。価格フィルターが使えるようになっている
価格の下限に 5000、上限に 10000 を入力して、以下を検索:
```
スニーカー
```
結果を確認: 5000 円〜10000 円の商品のみ表示される

機能 2 完了チェック¶

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

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

なぜこの機能が必要？

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

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

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

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

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

検索結果の各商品におすすめ理由を付けて。

ステップ 3: IBM Bob の変更を確認¶

IBM Bob の作業が終わると、/search のレスポンスの各商品に、類似度スコアから作った recommendation_reason が入ります。

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

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

IBM Bob がコマンドの実行の承認を求めたら、承認します。

ステップ 5: 動作確認¶

アプリケーションを起動（起動方法）
検索画面を再読み込みして、以下を検索:
```
初心者向けのカメラ
```
結果を確認: 各商品のカードのおすすめ理由に理由が表示される。文言は IBM Bob が生成したコードによって変わります

機能 3 完了チェック¶

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

Part 2 完了チェック¶

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

FAQ¶

IBM Bob が応答しない

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

変更が反映されない

ファイルが保存されているか確認
アプリケーションを手動で再起動
1. アプリケーションを起動しているターミナルで Ctrl+C（停止）
2. アプリケーションを起動（起動方法）
ブラウザで検索画面を再読み込み

Address already in use と出る場合は、IBM Bob が確認用に起動したアプリが動いています。画面を再読み込みすれば使えます。

エラーが表示される

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

次へ →