Visual Search for Product Discovery

import { Mixpeek } from 'mixpeek';

const client = new Mixpeek({ apiKey: process.env.MIXPEEK_API_KEY });

// Index product catalog images
await client.buckets.connect({
  collection_id: 'product-catalog',
  bucket_uri: 's3://your-product-images/',
  extractors: ['image-embedding', 'color-detection', 'style-classification']
});

// Visual search endpoint
async function visualSearch(customerImageUrl: string, limit: number = 20) {
  const results = await client.retrieve({
    collection_id: 'product-catalog',
    query: {
      type: 'image',
      url: customerImageUrl
    },
    limit: limit,
    filters: {
      in_stock: true
    }
  });

  return results.map(r => ({
    product_id: r.metadata.product_id,
    name: r.metadata.name,
    price: r.metadata.price,
    similarity: r.score,
    image_url: r.content_url
  }));
}

// Search with visual filters
async function filteredVisualSearch(imageUrl: string, filters: object) {
  const visualFeatures = await client.extract({
    url: imageUrl,
    extractors: ['color-detection', 'style-classification']
  });

  return await client.retrieve({
    collection_id: 'product-catalog',
    query: { type: 'image', url: imageUrl },
    filters: {
      ...filters,
      primary_color: visualFeatures.color.primary,
      style: visualFeatures.style.category
    }
  });
}

// React visual search component
function VisualSearchButton() {
  const handleUpload = async (file: File) => {
    const formData = new FormData();
    formData.append('image', file);

    const response = await fetch('/api/visual-search', {
      method: 'POST',
      body: formData
    });

    const results = await response.json();
    // Display similar products
    setSearchResults(results);
  };

  return <ImageUploader onUpload={handleUpload} />;
}