This project is a web app that allows you to search for Pokémon cards by image using AI. It does so by detecting a Pokémon card in the image, generating embeddings for the card, and then searching for the nearest neighbor in a database. All AI models run locally on the user's browser for cost and speed 🚀.
Many thanks to the several free/freemium, open source projects and services used:
- Pokémon TCG API - for the Pokémon card data
- Pokémon Card Detection Dataset and Model and Roboflow - for the object detection model
- Transformers.js - for the image embeddings model
- MongoDB - for the database
- Next.js - for the web app framework
- TailwindCSS - for the styling
- Shadcn - for the UI components
If you want to run this project locally, follow these steps:
- Get a free Pokémon API Key at https://pokemontcg.io/
- Setup MongoDB Atlas cluster at https://www.mongodb.com/atlas/database
- Clone the repo
git clone /~https://github.com/dsouza95/poke-finder
- Install PNPM packages
pnpm install
- Copy the .env.local.template file to .env.local and fill in the values from step 1 and 2
If you want to run locally, you will need to populate your MongoDB Atlas cluster with the Pokémon card data.
This script will fetch all the Pokémon cards from the Pokémon TCG API, calculate embeddings for each card, and then insert the data into the database (:warning: this will take a while).
You can do this by running the populate-db.js script.
pnpm run populate-dbOnce the Next.js app is running, you can search for Pokémon cards by uploading an image of a Pokémon card. The app will detect the card, generate embeddings for it, and then search for the nearest neighbor in the database.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
Distributed under the MIT License. See LICENSE.txt for more information.