Pokémon Card Scanner

A web application that scans Pokémon trading cards using OCR (Optical Character Recognition) and provides real-time market prices and card information.

Features

• Card Recognition: Automatically identifies Pokémon cards from images
• Price Lookup: Displays current market prices from TCGPlayer
• Multiple Input Methods: Upload images or use your webcam to scan cards
• Detailed Card Information: View card set, rarity, artist, and other details
• Side-by-Side View: Compare your scanned card with the official card image

Technologies Used

• Frontend: HTML, CSS, JavaScript
• Backend: Node.js, Express
• OCR: Google Cloud Vision API for text extraction
• Card Data: Pokémon TCG API
• Image Processing: Custom algorithms to enhance OCR accuracy

Prerequisites

Before you begin, ensure you have the following:

• Node.js (v14 or higher)
• npm
• A Pokémon TCG API key (get one at https://dev.pokemontcg.io/)
• Google Cloud Vision API credentials

Setting Up Google Cloud Vision API Credentials

To use the OCR functionality, you'll need to create a Google Cloud Vision API project and download a credentials file named google-credentials.json.

1. Go to the Google Cloud Console

2. Click on Select a project and then New Project

3. Enter a project name and click Create

4. Navigate to the Vision API page

5. Click Enable

6. Go to the Service Accounts page

7. Click Create Service Account

8. Enter a name (e.g., vision-api-user) and click Create and Continue

9. Under "Role", select Project > Editor and click Done

10. In the list of service accounts, click on the one you just created

11. Go to the Keys tab and click Add Key > Create new key

12. Select JSON and click Create

13. A file will be downloaded — rename this file to google-credentials.json

14. Move google-credentials.json to the root directory of your project

15. Open your .env file and add the following line (Note: It's better to use the path to the file rather than putting the entire JSON in .env):

GOOGLE_APPLICATION_CREDENTIALS=./google-credentials.json

Now your application is ready to authenticate with the Google Cloud Vision API.

Installation

1. Clone the repository:

   git clone https://github.com/ABreadLoaf/Final-project.git
   cd pokemon-card-scanner

2. Install dependencies:

   npm install

3. Create your environment file:

   cp .env.example .env

4. Edit the .env file with your API keys and configuration.

5. Start the server:

   npm start

6. Open your browser and navigate to:

   http://localhost:3000
   

Usage

Scanning Cards with Image Upload

1. Open the application in your browser
2. Click on "Upload Image" if not already selected
3. Either drag and drop your card image or click to browse your files
4. Select an image of a Pokémon card
5. Click "Scan Card"
6. View the results showing your card image, the official card image, and pricing information

Scanning Cards with Webcam

1. Open the application in your browser
2. Click on "Use Webcam"
3. Allow webcam access when prompted
4. Position your Pokémon card in the frame
5. Click "Capture & Scan"
6. View the results showing your captured image, the official card image, and pricing information

How It Works

The application works through several steps:

1. Image Acquisition: Get card image via upload or webcam
2. Image Preprocessing: Enhance image for better OCR results
3. Text Extraction: Use Google Cloud Vision API to extract text from the card
4. Card Identification: Match extracted text to cards in the Pokémon TCG database
5. Data Retrieval: Get official card data and pricing information
6. Display Results: Show all information in a user-friendly interface

Troubleshooting

Common issues and solutions:

• Card Not Recognized: Ensure the card name is clearly visible and the image is well-lit
• Incorrect Card Identified: Try taking a picture of just the card name at the top
• Webcam Not Working: Make sure you've granted camera permissions to the browser
• API Error: Check that your API keys in the .env file are valid

Acknowledgements

• Pokémon TCG API for providing card data and pricing information
• Google Cloud Vision API for OCR capabilities
• The Pokémon Company for creating these amazing cards

Project Link: https://github.com/ABreadLoaf/Final-project.git