# Getting Started with CompareKit

## What You Have

CompareKit is now fully set up and ready to generate professional comparison images! Here's what's been built:

### Core Features
- ✅ **Comparison Series Generator** - VS battles between two products
- ✅ **Automatic Logo Fetching** - Clearbit API with fallback to placeholders
- ✅ **24,000+ Style Combinations** - Smart randomization prevents repetition
- ✅ **Professional Effects** - Glass morphism, lighting, shadows, vignettes
- ✅ **REST API** - Easy integration with n8n and other tools
- ✅ **Caching System** - Logos cached for 30 days for performance
- ✅ **Web Interface** - Beautiful test interface to try it out

### What's Working Right Now

1. **10 Background Types**
   - 5 Photorealistic (gradient-based)
   - 5 Abstract (patterns, particles, waves)

2. **20 Color Schemes**
   - Corporate Professional, Startup Energy, Technical Deep, Creative Flow, and 16 more

3. **15 Layout Variations**
   - Horizontal splits (3 types)
   - Vertical splits (3 types)
   - Diagonal (3 types)
   - Asymmetric (3 types)
   - Centered (3 types)

4. **8 VS Element Styles**
   - Classic circle, badge, gradient, hexagon, neon, and more

## Quick Start (3 Steps)

### 1. Start the Server

```bash
npm start
```

You should see:
```
╔════════════════════════════════════════╗
║         CompareKit Server              ║
║   Professional Image Generator         ║
╚════════════════════════════════════════╝

🚀 Server running on http://localhost:3000
```

### 2. Open Your Browser

Visit: `http://localhost:3000`

### 3. Generate Your First Image

1. Enter two product names (e.g., "Semrush" and "Ahrefs")
2. Click "Generate Image"
3. Wait 1-2 seconds
4. Download your professional comparison image!

## Try These Examples

Click the example tags on the web interface or use these popular comparisons:

- Semrush vs Ahrefs
- Monday vs Asana
- Shopify vs WooCommerce
- Notion vs Obsidian
- Figma vs Canva
- HubSpot vs Salesforce
- Slack vs Microsoft Teams

## API Usage Examples

### Generate a Single Image

```bash
curl -X POST http://localhost:3000/api/generate/comparison \
  -H "Content-Type: application/json" \
  -d '{"productA": "Monday", "productB": "Asana"}' \
  --output monday-vs-asana.png
```

### Generate Multiple Images

```bash
curl -X POST http://localhost:3000/api/generate/batch \
  -H "Content-Type: application/json" \
  -d '{
    "comparisons": [
      ["Semrush", "Ahrefs"],
      ["Shopify", "WooCommerce"],
      ["Figma", "Canva"]
    ]
  }'
```

Check the `generated/` folder for the images.

### Check Cache Stats

```bash
curl http://localhost:3000/api/cache/stats
```

## Testing Variety

Want to see the randomization in action? Generate 10 images:

```bash
npm test
```

This will create 10 different comparison images in `generated/samples/` with unique styles.

## n8n Integration

Create an HTTP Request node in n8n:

```
Method: POST
URL: http://your-domain.com/api/generate/comparison
Content-Type: application/json
Body:
{
  "productA": "{{$json.productA}}",
  "productB": "{{$json.productB}}"
}
Binary Response: true
```

## Customization Tips

### Add More Product Domains

Edit `src/lib/logos.js` around line 15:

```javascript
const domainMap = {
  'yourproduct': 'yourproduct.com',
  // Add your custom mappings here
};
```

### Change Style Preferences

Edit `src/config/weights.json` to adjust how often certain styles appear:

```json
{
  "comparison": {
    "backgroundPreferences": {
      "photorealistic": 0.7,  // 70% photo backgrounds
      "abstract": 0.3         // 30% abstract
    }
  }
}
```

### Add Custom Color Schemes

Edit `src/config/styles.json` and add to the `colorSchemes` array:

```json
{
  "id": "my-brand",
  "name": "My Brand",
  "primary": "#FF0000",
  "secondary": "#00FF00",
  "accent": "#0000FF",
  "text": "#FFFFFF"
}
```

## Next Steps

### Phase 2 Enhancements (Not Yet Implemented)

1. **Review Series** - Single product review graphics
2. **Feature Series** - Feature highlights/benefits
3. **Alternative Series** - "Switch from X to Y" graphics
4. **Real Photo Backgrounds** - Unsplash integration (add API key to .env)
5. **Custom Fonts** - Upload your own fonts

### Optional API Keys

While CompareKit works without any API keys, you can enhance it:

**Clearbit** (usually free): Better logo quality
- Sign up at https://clearbit.com
- Add to `.env`: `CLEARBIT_API_KEY=your_key`

**Brandfetch** (fallback): Additional logo source
- Sign up at https://brandfetch.com
- Add to `.env`: `BRANDFETCH_API_KEY=your_key`

**Unsplash** (real photos): Photorealistic backgrounds
- Sign up at https://unsplash.com/developers
- Add to `.env`: `UNSPLASH_ACCESS_KEY=your_key`

## Deployment to cPanel

1. Upload all files to your subdirectory (e.g., `/public_html/comparekit/`)
2. In cPanel, go to "Setup Node.js App"
3. Create new application:
   - Node.js version: 18.x or higher
   - Application mode: Production
   - Application root: /public_html/comparekit
   - Application startup file: src/server.js
4. Set environment variables (if needed)
5. Click "Run NPM Install"
6. Start the application
7. Access via: `https://yourdomain.com/comparekit`

## Troubleshooting

**"Logo not found"**
- Check cache stats: `curl http://localhost:3000/api/cache/stats`
- Add domain mapping in `src/lib/logos.js`
- A placeholder will be used automatically

**"Port already in use"**
- Change PORT in `.env` to something else (e.g., 3001)

**"Canvas installation failed"**
- Install system dependencies (see README.md)
- Or use Docker (coming soon)

## File Structure Overview

```
CompareKit/
├── src/
│   ├── api/          # API endpoints
│   ├── generators/   # Image generators
│   ├── lib/          # Core libraries
│   └── config/       # Configuration files
├── public/           # Web interface
├── cache/            # Cached logos
└── generated/        # Generated images
```

## Support

- Documentation: See README.md
- Issues: Create an issue on GitHub
- Questions: hello@pragmaco.net

---

**You're all set!** Run `npm start` and visit http://localhost:3000 to start generating professional comparison images! 🎨
