import { useRef, useState } from 'react';
const API_BASE = 'https://api.bizmori.com/api/v2';
const API_TOKEN = import.meta.env.VITE_MORI_API_TOKEN;
const ACCEPT_FORMATS = '.jpg,.jpeg,.png,.webp,.tiff,.bmp';
const MAX_FILES = 100;
const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
async function api(path, { method = 'GET', body, idempotencyKey } = {}) {
// Retries reuse the caller's idempotency key, so a retried create can never
// produce a second order. Auth failures surface as `AUTH_*` codes — retrying
// those will not help, so they fall through to the throw below.
for (let attempt = 0; ; attempt++) {
const res = await fetch(`${API_BASE}${path}`, {
method,
headers: {
Authorization: `Bearer ${API_TOKEN}`,
...(body && { 'Content-Type': 'application/json' }),
},
body: body && JSON.stringify({ idempotencyKey, ...body }),
});
if (!res.ok) {
const { code } = await res.json().catch(() => ({}));
// 429 covers two cases: a transient rate limit, and PLAN_LIMIT_EXCEEDED,
// which means the plan quota is spent and will never clear on retry.
if (res.status === 429 && code !== 'PLAN_LIMIT_EXCEEDED' && attempt < 3) {
await sleep(2 ** attempt * 1000);
continue;
}
throw new Error(code ?? `HTTP_${res.status}`);
}
return (await res.json()).data;
}
}
function putFile(file, uploadUrl, onProgress) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', uploadUrl);
xhr.setRequestHeader('Content-Type', file.type);
xhr.upload.onprogress = (event) => {
if (event.lengthComputable) onProgress(event.loaded / event.total);
};
xhr.onload = () =>
xhr.status < 300 ? resolve() : reject(new Error(`UPLOAD_FAILED_${xhr.status}`));
xhr.onerror = () => reject(new Error('UPLOAD_NETWORK_ERROR'));
xhr.send(file);
});
}
async function pollOrder(orderId, { onStatus, timeoutMs = 10 * 60 * 1000 } = {}) {
const deadline = Date.now() + timeoutMs;
let delay = 2000;
while (Date.now() < deadline) {
const order = await api(`/orders/${orderId}`);
onStatus?.(order.status);
if (['complete', 'failed', 'expired'].includes(order.status)) return order;
await sleep(delay);
delay = Math.min(delay * 1.5, 15000);
}
throw new Error('ORDER_POLL_TIMEOUT');
}
export default function AntiAiUploader() {
const [files, setFiles] = useState([]);
const [progress, setProgress] = useState({});
const [status, setStatus] = useState('idle');
const [downloadUrl, setDownloadUrl] = useState(null);
const [error, setError] = useState(null);
const [orderId, setOrderId] = useState(null);
const inFlight = useRef(false);
const busy = status !== 'idle' && status !== 'complete';
async function protectImages(event) {
event.preventDefault();
if (inFlight.current || files.length === 0) return;
inFlight.current = true;
// Snapshot the selection. The user can swap files while requests are in
// flight, and selected[i] has to stay paired with uploadUrls[i].
const selected = files;
setError(null);
setOrderId(null);
setDownloadUrl(null);
setProgress({});
try {
setStatus('creating order');
const order = await api('/orders/anti-ai', {
method: 'POST',
idempotencyKey: crypto.randomUUID(),
body: {
files: selected.map((file) => ({ fileName: file.name })),
options: { strength: 'high' },
},
});
setOrderId(order.orderId);
setStatus('uploading');
await Promise.all(
selected.map((file, index) =>
putFile(file, order.files[index].uploadUrl, (ratio) =>
setProgress((prev) => ({ ...prev, [index]: ratio })),
),
),
);
setStatus('confirming');
await api('/orders/anti-ai/confirm', {
method: 'POST',
idempotencyKey: crypto.randomUUID(),
body: { orderId: order.orderId },
});
const finished = await pollOrder(order.orderId, { onStatus: setStatus });
// `expired` is terminal too: the cleanup job drops the files after 7 days.
if (finished.status !== 'complete') throw new Error(`ORDER_${finished.status.toUpperCase()}`);
setStatus('fetching download URL');
const { url } = await api(`/orders/${order.orderId}/download`);
setDownloadUrl(url);
setStatus('complete');
} catch (caught) {
setError(caught.message);
setStatus('idle');
} finally {
inFlight.current = false;
}
}
return (
<form onSubmit={protectImages}>
<input
type="file"
multiple
accept={ACCEPT_FORMATS}
disabled={busy}
onChange={(event) => {
setFiles([...event.target.files].slice(0, MAX_FILES));
setDownloadUrl(null);
setError(null);
setProgress({});
}}
/>
<button type="submit" disabled={busy || files.length === 0}>
Protect {files.length} image{files.length === 1 ? '' : 's'}
</button>
{status !== 'idle' && <p>Status: {status}</p>}
<ul>
{files.map((file, index) => (
<li key={`${file.name}-${index}`}>
{file.name} — {Math.round((progress[index] ?? 0) * 100)}%
</li>
))}
</ul>
{downloadUrl && (
<a href={downloadUrl} download>
Download protected images
</a>
)}
{error && <p role="alert">Failed: {error}{orderId && ` (orderId: ${orderId})`}</p>}
</form>
);
}
