Browser Agent Guide
Browser Agent Integration Guide
FastAiZip /ai/image/compress is a browser page for Browser agents, not a traditional upload API. It is best suited to workflows that can open pages, execute JavaScript, and inspect DOM output.
Open Compression PageOverview
What this page is really meant to solve
The goal of this page is not to present FastAiZip as a generic API platform. It is to explain that the current integration model is best suited to Browser agents. In practice that means the caller needs to open pages, execute JavaScript, wait for DOM state changes, and read structured output. If a workflow can do that, it can integrate browser-local compression without building a separate upload backend.
If a caller can only send HTTP requests and expects a conventional JSON response, this path is not the right match. Making that limitation explicit helps avoid the wrong implementation assumptions while speeding up integration for Browser agents that actually fit the page-driven model.
Recommended Flow
- 01
Open /ai/image/compress.
- 02
For a quick acceptance check, start with /ai/image/compress?sample=tiny-png&quality=80&output=webp.
- 03
For a more visual built-in demo, try /ai/image/compress?sample=tiny-emoji&quality=80&output=webp.
- 04
Use query for smaller images and URL hash for larger payloads to avoid request-length limits.
- 05
If needed, paste a data URL or raw base64 into the image field, then set quality and output.
- 06
Wait until data-ai-compress-status becomes done or error.
- 07
Read data-ai-compress-result-json or data-ai-compress-output once finished.
Copy-Ready Acceptance Snippet
After opening /ai/image/compress?sample=tiny-png&quality=80&output=webp, paste the snippet below into the browser console to get a pass/fail report.
(() => {
const selectors = {
status: "[data-ai-compress-status]",
error: "[data-ai-compress-error]",
sample: "[data-ai-compress-sample]",
resultJson: "[data-ai-compress-result-json]",
output: "[data-ai-compress-output]",
};
const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
const readText = (selector) => document.querySelector(selector)?.textContent?.trim() ?? "";
const readValue = (selector) =>
document.querySelector(selector) instanceof HTMLTextAreaElement
? document.querySelector(selector).value
: "";
const readStatus = () =>
document.querySelector(selectors.status)?.getAttribute("data-ai-compress-status") ?? "";
const readSample = () =>
document.querySelector(selectors.sample)?.getAttribute("data-ai-compress-sample") ?? "none";
async function run() {
const startedAt = Date.now();
let status = readStatus();
while (status !== "done" && status !== "error" && Date.now() - startedAt < 20000) {
await wait(250);
status = readStatus();
}
const resultJson = readValue(selectors.resultJson);
const output = readValue(selectors.output);
const error = readText(selectors.error);
const sample = readSample();
let parsedResult = null;
try {
parsedResult = resultJson ? JSON.parse(resultJson) : null;
} catch {
parsedResult = null;
}
const report = {
ok:
status === "done" &&
Boolean(resultJson) &&
Boolean(output) &&
output.startsWith("data:image/"),
status,
sample,
hasResultJson: Boolean(resultJson),
hasOutputDataUrl: Boolean(output),
outputLooksLikeImageDataUrl: output.startsWith("data:image/"),
savedPercent: parsedResult?.savedPercent ?? null,
outputFormat: parsedResult?.outputFormat ?? null,
error,
};
console.table(report);
console.log("FastAiZip Browser agent acceptance report:", report);
return report;
}
return run();
})();Stable Selectors
Image Input
[data-ai-compress-image-input]
Quality Slider
[data-ai-compress-quality-input]
Output Format
[data-ai-compress-output-format-input]
MIME Input
[data-ai-compress-mime-input]
Filename Input
[data-ai-compress-filename-input]
Submit Button
[data-ai-compress-submit]
Status
[data-ai-compress-status]
Sample Source
[data-ai-compress-sample]
Error Text
[data-ai-compress-error]
Structured Result
[data-ai-compress-result-json]
Output Data URL
[data-ai-compress-output]
Protocol JSON
[data-ai-compress-agent-protocol-json]