Virtual Try-On Preview

This React app lets you upload a person photo and a product image, submits both to Google Vertex AI’s virtual-try-on-preview-08-04 model, and shows every generated try-on result in a gallery with download links.

Getting Started

npm install
npm start

The dev server runs at http://localhost:3000. The included setupProxy.js file exposes a local endpoint at /api/virtual-try-on that forwards requests to Vertex AI so you do not have to deal with CORS inside the browser.

How It Works

• The browser reads both uploaded images as base64 strings.
• You can request between 1 and 4 outputs by setting the Sample Count field before submitting.
• A POST request is sent to /api/virtual-try-on containing the base64 payload and an OAuth access token.
• The proxy attaches the token as the Authorization header and forwards the payload to the Vertex AI REST endpoint.
• Any base64 images in the response are appended to the on-page gallery, with the current product image pinned to the front as a reference.

Manual Test Checklist

1. Run npm start and open the app.
2. Paste a valid OAuth token with aiplatform.predict scope.
3. Pick a sample count (1-4), then upload a person image and a product image.
4. Click Generate Try-On and wait for the response.
5. Confirm the status bar updates, thumbnails render, and the download link saves a PNG.
6. Use Clear Gallery to remove previous results.

Tokens and images never leave your browser except for the call to Vertex AI. The proxy only relays each request and response.*** End Patch}assistant