curl -X POST https://api.snapapi.pics/v1/screenshot \
  -H "X-API-Key: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://competitor.com/pricing",
    "width": 1440,
    "height": 900,
    "fullPage": true,
    "blockCookieBanners": true,
    "format": "png"
  }' --output baseline.png

const fetch = require('node-fetch');
const fs = require('fs');
const { PNG } = require('pngjs');
const pixelmatch = require('pixelmatch');

const SNAPAPI_KEY = process.env.SNAPAPI_KEY;
const THRESHOLD = 0.01; // 1% pixel difference triggers alert

async function captureScreenshot(url) {
  const response = await fetch('https://api.snapapi.pics/v1/screenshot', {
    method: 'POST',
    headers: {
      'X-API-Key': SNAPAPI_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      url,
      width: 1440,
      height: 900,
      fullPage: true,
      blockCookieBanners: true,
      format: 'png'
    })
  });
  return Buffer.from(await response.arrayBuffer());
}

async function compareImages(baselinePath, newBuffer) {
  const baseline = PNG.sync.read(fs.readFileSync(baselinePath));
  const current = PNG.sync.read(newBuffer);
  
  const { width, height } = baseline;
  const diff = new PNG({ width, height });
  
  const numDiffPixels = pixelmatch(
    baseline.data, current.data, diff.data,
    width, height,
    { threshold: 0.1 }
  );
  
  const diffPercent = numDiffPixels / (width * height);
  return { diffPercent, diffImage: PNG.sync.write(diff) };
}

async function monitorPage(url, name) {
  const baselinePath = `baselines/${name}.png`;
  const newScreenshot = await captureScreenshot(url);
  
  if (!fs.existsSync(baselinePath)) {
    fs.writeFileSync(baselinePath, newScreenshot);
    console.log(`Baseline created for ${name}`);
    return;
  }
  
  const { diffPercent, diffImage } = await compareImages(
    baselinePath, newScreenshot
  );
  
  if (diffPercent > THRESHOLD) {
    console.log(`⚠️ Change detected on ${name}: ${(diffPercent * 100).toFixed(2)}%`);
    fs.writeFileSync(`diffs/${name}-${Date.now()}.png`, diffImage);
    fs.writeFileSync(`snapshots/${name}-${Date.now()}.png`, newScreenshot);
    // Send alert via Slack, email, etc.
    await sendAlert(name, diffPercent, newScreenshot);
  }
  
  // Update baseline
  fs.writeFileSync(baselinePath, newScreenshot);
}

// Monitor multiple pages
const pages = [
  { url: 'https://competitor.com/pricing', name: 'competitor-pricing' },
  { url: 'https://competitor.com/features', name: 'competitor-features' },
  { url: 'https://yoursite.com', name: 'our-homepage' }
];

for (const page of pages) {
  await monitorPage(page.url, page.name);
}

import requests
import os
from PIL import Image
from io import BytesIO
import numpy as np
from datetime import datetime

SNAPAPI_KEY = os.environ['SNAPAPI_KEY']
THRESHOLD = 0.01  # 1% change triggers alert

def capture_screenshot(url: str) -> bytes:
    response = requests.post(
        'https://api.snapapi.pics/v1/screenshot',
        headers={
            'X-API-Key': SNAPAPI_KEY,
            'Content-Type': 'application/json'
        },
        json={
            'url': url,
            'width': 1440,
            'height': 900,
            'fullPage': True,
            'blockCookieBanners': True,
            'format': 'png'
        }
    )
    return response.content

def compare_images(baseline_path: str, new_bytes: bytes) -> float:
    baseline = np.array(Image.open(baseline_path))
    current = np.array(Image.open(BytesIO(new_bytes)))
    
    # Resize if dimensions differ
    if baseline.shape != current.shape:
        current = np.array(
            Image.open(BytesIO(new_bytes)).resize(
                (baseline.shape[1], baseline.shape[0])
            )
        )
    
    diff = np.abs(baseline.astype(int) - current.astype(int))
    changed_pixels = np.sum(diff.mean(axis=2) > 25)
    total_pixels = baseline.shape[0] * baseline.shape[1]
    return changed_pixels / total_pixels

def monitor_page(url: str, name: str):
    baseline_path = f'baselines/{name}.png'
    new_screenshot = capture_screenshot(url)
    
    if not os.path.exists(baseline_path):
        with open(baseline_path, 'wb') as f:
            f.write(new_screenshot)
        print(f'Baseline created for {name}')
        return
    
    diff_percent = compare_images(baseline_path, new_screenshot)
    
    if diff_percent > THRESHOLD:
        timestamp = datetime.now().strftime('%Y%m%d_%H%M%S')
        print(f'⚠️ Change detected: {name} ({diff_percent:.2%})')
        with open(f'snapshots/{name}_{timestamp}.png', 'wb') as f:
            f.write(new_screenshot)
    
    # Update baseline
    with open(baseline_path, 'wb') as f:
        f.write(new_screenshot)

# Run monitoring
pages = [
    ('https://competitor.com/pricing', 'competitor-pricing'),
    ('https://competitor.com/features', 'competitor-features'),
]

for url, name in pages:
    monitor_page(url, name)

// Capture both screenshot and content
const [screenshot, content] = await Promise.all([
  snapapi.screenshot({ url, fullPage: true }),
  snapapi.extract({ url, type: 'markdown' })
]);

// Compare text content for semantic changes
const textDiff = diffText(previousContent, content.data);

// Compare screenshots for visual changes
const visualDiff = compareImages(previousScreenshot, screenshot);

// Rich alert with both types of changes
if (visualDiff > 0.01 || textDiff.changes > 0) {
  await alert({
    page: url,
    visualChange: `${(visualDiff * 100).toFixed(1)}%`,
    textChanges: textDiff.summary,
    screenshot: screenshot
  });
}