The Future of Fashion Shopping: Virtual Try-On with AI and AR

// page.tsx 
'use client';
import { useState } from 'react';

export default function Home() {
  const [personImageUrl, setPersonImageUrl] = useState('');
  const [garmentImageUrl, setGarmentImageUrl] = useState('');
  const [result, setResult] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const response = await fetch('/api/try-on', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ personImageUrl, garmentImageUrl }),
    });
    const data = await response.json();
    setResult(data.result_url);
  };

  return (
    <main>
      <h1>Virtual Try-On Studio</h1>
      <form onSubmit={handleSubmit}>
        <input value={personImageUrl} onChange={(e) => setPersonImageUrl(e.target.value)} placeholder="Person Image URL" />
        <input value={garmentImageUrl} onChange={(e) => setGarmentImageUrl(e.target.value)} placeholder="Garment Image URL" />
        <button type="submit">Try On</button>
      </form>
      {result && <img src={result} alt="Try-On Result" />}
    </main>
  );
}

// pages/api/try-on.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { personImageUrl, garmentImageUrl } = req.body;

  const response = await fetch('https://api.developer.pixelcut.ai/v1/try-on', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-API-KEY': process.env.PIXELCUT_API_KEY || '',
    },
    body: JSON.stringify({
      person_image_url: personImageUrl,
      garment_image_url: garmentImageUrl,
      garment_mode: 'auto',
      preprocess_garment: true,
      remove_background: false,
      wait_for_result: true,
    }),
  });

  const data = await response.json();
  res.status(200).json(data);
}