高速MCP_RecSys
これは、MCP を使用した CLIP ベースのファッション レコメンダーです。
モックアップ
ユーザーが衣服の画像をアップロード → YOLOが衣服を検出 → CLIPがエンコード → 類似の衣服を推奨
フォルダ構造
/project-root
│
├── /backend
│ ├── Dockerfile
│ ├── /app
│ │ ├── server.py # FastAPI app code
│ │ ├── /routes
│ │ │ └── clothing_routes.py
│ │ ├── /controllers
│ │ │ └── clothing_controller.py
│ │ │ └──clothing_tagging.py
│ │ │ └── tag_extractor.py # Pending: define core CLIP functionality
│ │ ├── schemas/
│ │ │ └── clothing_schemas.py
│ │ ├── config/
│ │ │ └── tag_list_en.py $ Tool for mapping: https://jsoncrack.com/editor
│ │ │ └── database.py
│ │ │ └── settings.py
│ │ │ └── api_keys.py
│ │ └── requirements.txt
│ └── .env
│
├── /fastmcp
│ └── app
│ └── server.py
│
├── /frontend
│ ├── Dockerfile
│ ├── package.json
│ ├── package-lock.json
│ ├── /public
│ │ └── index.html
│ ├── /src
│ │ ├── /components
│ │ │ ├── ImageUpload.jsx
│ │ │ ├── DetectedTags.jsx
│ │ │ └── Recommendations.jsx
│ │ ├── /utils
│ │ │ └── api.js
│ │ ├── App.js # Main React component
│ │ ├── index.js
│ │ ├── index.css
│ │ ├── tailwind.config.js
│ │ ├── postcss.config.js
│ │ └── .env
│ ├── .gitignore
│ ├── docker-compose.yml
│ └── README.md
└────── requirements.txt
クイックスタートガイド
ステップ1: GitHubプロジェクトのクローンを作成する
ステップ2: Python環境をセットアップする
python -m venv venv
source venv/bin/activate # On macOS or Linux
venv\Scripts\activate # On Windows
ステップ3: 依存関係をインストールする
pip install -r requirements.txt
ステップ4: FastAPIサーバー（バックエンド）を起動する
uvicorn backend.app.server:app --reload
サーバーが実行し、データベースが接続されると、コンソールに次のメッセージが表示されます。
Database connected
INFO: Application startup complete.
ステップ5: 依存関係をインストールする
データベース接続情報: アプリケーションの起動が完了しました。
ステップ6: 開発サーバー（フロントエンド）を起動する
実行されると、サーバーは確認をログに記録し、ブラウザでアプリを開きます: http://localhost:3000/
📌 UI のサンプルコンポーネント
- 画像アップロード
- 送信ボタン
- 衣服のタグとおすすめを表示する
これまでに完了したもの:
- FastAPI サーバーが稼働中 (4 月 24 日)
- データベース接続がセットアップされました（4月24日）
- バックエンドアーキテクチャは機能しています（4月24日）
- 写真アップロード用の基本的なフロントエンドUI（4月25日）
次のステップ:
- サンプルの衣服画像でCLIPのタグ付け精度を評価する
- タグ付けシステムを微調整して、より適切な推奨事項を作成します
- リアルタイムのユーザーデータを使用してバックエンドの統合をテストする
- モデルのパフォーマンスの監視を設定する
- フロントエンドデモ