高速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: 依存関係をインストールする

データベース接続情報: アプリケーションの起動が完了しました。

npm install

ステップ6: 開発サーバー（フロントエンド）を起動する

npm start

実行されると、サーバーは確認をログに記録し、ブラウザでアプリを開きます: http://localhost:3000/

📌 UI のサンプルコンポーネント

画像アップロード
送信ボタン
衣服のタグとおすすめを表示する

これまでに完了したもの:

FastAPI サーバーが稼働中 (4 月 24 日)
データベース接続がセットアップされました（4月24日）
バックエンドアーキテクチャは機能しています（4月24日）
写真アップロード用の基本的なフロントエンドUI（4月25日）

次のステップ:

サンプルの衣服画像でCLIPのタグ付け精度を評価する
タグ付けシステムを微調整して、より適切な推奨事項を作成します
リアルタイムのユーザーデータを使用してバックエンドの統合をテストする
モデルのパフォーマンスの監視を設定する
フロントエンドデモ

FastMCP_RecSys