高速MCP_RecSys

これは、MCP を使用した CLIP ベースのファッションレコメンダーです。

フォルダ構造

/project-root
│
├── /backend
│   ├── Dockerfile                # Backend Dockerfile
│   ├── /app
│   │   ├── main.py               # FastAPI app code
│   │   └── requirements.txt      # Python dependencies for the backend
│   └── .env                      # Environment variables (make sure to add this to .gitignore)
│
├── /frontend
│   ├── Dockerfile                # Frontend Dockerfile
│   ├── package.json              # Node.js dependencies (for React)
│   ├── package-lock.json         # Lock file for React dependencies
│   ├── /public
│   │   └── index.html            # HTML file for the frontend (React app is mounted here)
│   ├── /src
│   │   ├── App.js                # Main React component
│   │   └── index.js              # React entry point
│   ├── tailwind.config.js        # Tailwind CSS config
│   ├── postcss.config.js         # PostCSS config
│   └── .env                      # Frontend environment variables (add to .gitignore)
│
├── .gitignore                    # Git ignore file (include .env, node_modules, etc.)
├── docker-compose.yml            # Docker Compose configuration
└── README.md                     # Project documentation

ステップ1

mongo サービスを更新して同じ資格情報を追加します。

  mongo:
    image: mongo:latest
    ports:
      - "27017:27017"
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
    volumes:
      - mongo-data:/data/db

注: FastAPI アプリでは環境変数を使用するため、Mongo URL は次のようになります: MONGO_URL = "mongodb://root:example@mongo:27017"

実行したら、ブラウザを開いて 👉 http://localhost:8081にアクセスします

ログイン方法: ユーザー名: root / パスワード: 例(仮設定)

ステップ2

docker-compose up --build

これにより、次のようになります。

ホットリロードでFastAPIバックエンドを起動する
MongoDBを起動する
Mongo Express を起動します (DB UI 用) (このモードではフロントエンドは自動的に構築されません)

ステップ3

フロントエンド（React アプリ）にアクセスするには、次の URL にアクセスします: http://localhost:3000
バックエンド（FastAPI アプリ）にアクセスするには、次の URL にアクセスします: http://localhost:8000

📌 クイックヒント

アプリにアクセスするには、 http://localhost:8000/docsにアクセスしてください。

MongoDB UI を表示: http://localhost:8081 (ユーザー: root、パスワード: example を使用)

mongo-seed は起動時に 1 回だけ実行され、タグコレクションにデータを入力します。

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

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

FastMCP_RecSys

Integrations