高速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