${escapeHtml(body)}
`; dom.toastStack.appendChild(toast); setTimeout(() => toast.remove(), 4200); } function setResponse(message = "", isError = false) { if (!message) { dom.responseBanner.hidden = true; dom.responseBanner.textContent = ""; dom.responseBanner.classList.remove("error"); return; } dom.responseBanner.hidden = false; dom.responseBanner.textContent = message; dom.responseBanner.classList.toggle("error", isError); } function setProgress(text) { dom.progressPill.textContent = text; } function renderStepChips(steps = []) { dom.pipelineSteps.innerHTML = ""; steps.forEach((step) => { const chip = document.createElement("span"); chip.className = "step-chip"; chip.textContent = step.replaceAll("_", " "); dom.pipelineSteps.appendChild(chip); }); } function renderCapabilityTags() { dom.capabilityTags.innerHTML = ""; const suggestions = { edit: [ { label: "✨ Warm Sunset", prompt: "Apply warm cinematic golden hour sunset lighting with gorgeous glowing highlights" }, { label: "📸 Glamour Editorial", prompt: "Create a high-end luxury fashion editorial, DSLR photography, shallow depth of field, magazine-cover quality" }, { label: "🌃 Cyberpunk Neon", prompt: "Transform the scene into a vibrant cyberpunk night style with glowing neon lights and high clarity" }, { label: "🎭 Dramatic Matte", prompt: "Enhance image with dramatic matte curves, lifted shadows, and moody ambient colors" } ], generate: [ { label: "🏝️ Sunset Beach", prompt: "A gorgeous luxury tropical beach resort at sunset with towering palm trees, cinematic DSLR photography" }, { label: "🚀 Neon Future", prompt: "A futuristic cyberpunk skyline at night with neon signs, wet rainy streets reflecting lights, high detail" }, { label: "🌄 Alpine Lake", prompt: "A serene pristine mountain lake mirroring snowy alpine peaks at sunrise, warm morning sun" } ], inpaint: [ { label: "👚 Change Outfit", prompt: "change the outfit of the person in the masked region to elegant high-fashion designer wear" }, { label: "🚫 Remove Object", prompt: "remove the object in the masked region completely, inpaint and blend the background seamlessly" }, { label: "🎨 Add Custom Patch", prompt: "add a custom visual design element inside the masked region, matching the lighting" } ], style: [ { label: "🌅 Golden Warmth", prompt: "Apply warm rich color harmony matching a gorgeous golden hour landscape" }, { label: "🌌 Cyber Neon", prompt: "Match the style to a cold neon city night look with high teal and magenta saturation" } ], background: [ { label: "🌴 Sunset Shoreline", prompt: "seamlessly replace the background with a tropical sunset beach and palm trees at golden hour" }, { label: "🌆 Cyberpunk Street", prompt: "replace the background with a vibrant cyberpunk neon street at night, wet asphalt reflections" }, { label: "📸 Portrait Studio", prompt: "replace the background with a soft, warm dreamy studio backdrop, high-end portrait lighting" } ], upscale: [ { label: "✨ Super Details", prompt: "Enhance high-frequency textures, restore micro-contrast, and sharpen edges naturally" } ], batch: [ { label: "🌅 Warm Grade Batch", prompt: "Apply warm color grade, soft contrast, and subtle vignettes across all images" } ] }[state.mode] || []; suggestions.forEach((item) => { const chip = document.createElement("button"); chip.type = "button"; chip.className = "mini-chip suggestion-chip"; chip.textContent = item.label; chip.addEventListener("click", () => { dom.promptInput.value = item.prompt; showToast("Suggestion Applied", item.label); updateRunButton(); }); dom.capabilityTags.appendChild(chip); }); } function renderPresets() { dom.presetGrid.innerHTML = ""; state.presets.forEach((preset) => { const card = document.createElement("button"); card.type = "button"; card.className = "preset-card"; const tags = (preset.steps || []).slice(0, 3).map((step) => `${escapeHtml(step.name.replaceAll("_", " "))}`).join(""); card.innerHTML = `${escapeHtml(preset.description)}
`; card.addEventListener("click", () => { dom.promptInput.value = preset.name + " look"; setResponse(`Loaded preset "${preset.name}". You can run it directly or adapt the prompt.`); renderStepChips((preset.steps || []).map((step) => step.name)); showToast("Preset Loaded", preset.name); updateRunButton(); }); dom.presetGrid.appendChild(card); }); } function renderLayers(steps = []) { dom.layerList.innerHTML = ""; if (!steps.length) { dom.layerList.innerHTML = `Pipeline steps from the next result will appear here.
${escapeHtml(step.replaceAll("_", " "))}
`; dom.layerList.appendChild(item); }); } function saveHistory() { localStorage.setItem(state.storageKey, JSON.stringify({ history: state.history.slice(-24), historyIndex: state.historyIndex, })); } function loadHistory() { try { const raw = localStorage.getItem(state.storageKey); if (!raw) return; const parsed = JSON.parse(raw); state.history = Array.isArray(parsed.history) ? parsed.history : []; state.historyIndex = typeof parsed.historyIndex === "number" ? parsed.historyIndex : state.history.length - 1; } catch { state.history = []; state.historyIndex = -1; } } function renderHistory() { dom.historyList.innerHTML = ""; if (!state.history.length) { dom.historyList.innerHTML = `Your recent outputs will be stored locally here.
${escapeHtml(entry.prompt || "No prompt")}
Result ${index + 1}`;
dom.batchResultGrid.appendChild(card);
});
}
function setupUploadTile(tile, input, onFiles, multiple = false) {
tile.addEventListener("click", () => input.click());
tile.addEventListener("dragover", (event) => {
event.preventDefault();
tile.style.borderColor = "rgba(255, 179, 106, 0.55)";
});
tile.addEventListener("dragleave", () => {
tile.style.borderColor = "";
});
tile.addEventListener("drop", async (event) => {
event.preventDefault();
tile.style.borderColor = "";
const files = multiple ? [...event.dataTransfer.files] : [event.dataTransfer.files[0]];
await onFiles(files);
});
input.addEventListener("change", async () => {
const files = multiple ? [...input.files] : [input.files[0]];
await onFiles(files);
});
}
function ensureMaskBase() {
if (!dom.maskCanvas.width || !dom.maskCanvas.height) {
syncMaskCanvas(true);
}
maskCtx.save();
maskCtx.globalCompositeOperation = "source-over";
maskCtx.fillStyle = "black";
maskCtx.fillRect(0, 0, dom.maskCanvas.width, dom.maskCanvas.height);
maskCtx.restore();
}
function clearMask() {
ensureMaskBase();
state.mask.hasData = false;
dom.maskCanvas.hidden = true;
}
function syncMaskCanvas(force = false) {
if (!state.sourceDataUrl || !state.mask.enabled) {
dom.maskCanvas.hidden = true;
return;
}
const image = dom.sourcePreview;
if (!image.naturalWidth || !image.naturalHeight) return;
if (force || dom.maskCanvas.width !== image.naturalWidth || dom.maskCanvas.height !== image.naturalHeight) {
dom.maskCanvas.width = image.naturalWidth;
dom.maskCanvas.height = image.naturalHeight;
maskCtx.fillStyle = "black";
maskCtx.fillRect(0, 0, dom.maskCanvas.width, dom.maskCanvas.height);
state.mask.hasData = false;
}
dom.maskCanvas.hidden = false;
}
function getCanvasPoint(event) {
const rect = dom.maskCanvas.getBoundingClientRect();
const scaleX = dom.maskCanvas.width / rect.width;
const scaleY = dom.maskCanvas.height / rect.height;
return {
x: (event.clientX - rect.left) * scaleX,
y: (event.clientY - rect.top) * scaleY,
};
}
function drawMaskLine(from, to, pressure = 0.5) {
const size = state.mask.size * Math.max(0.4, pressure || 0.5);
maskCtx.save();
if (state.mask.tool === "erase") {
maskCtx.globalCompositeOperation = "destination-out";
maskCtx.strokeStyle = "rgba(0,0,0,1)";
} else {
maskCtx.globalCompositeOperation = "source-over";
maskCtx.strokeStyle = "white";
}
maskCtx.lineCap = "round";
maskCtx.lineJoin = "round";
maskCtx.lineWidth = size;
maskCtx.beginPath();
maskCtx.moveTo(from.x, from.y);
maskCtx.lineTo(to.x, to.y);
maskCtx.stroke();
maskCtx.restore();
state.mask.hasData = true;
}
function exportMaskBlob() {
return new Promise((resolve) => {
if (!state.mask.hasData) {
resolve(null);
return;
}
dom.maskCanvas.toBlob((blob) => resolve(blob), "image/png");
});
}
function setMaskTool(tool) {
state.mask.tool = tool;
dom.maskBrush.classList.toggle("active", tool === "brush");
dom.maskErase.classList.toggle("active", tool === "erase");
}
function startProgress() {
stopProgress();
const messages = progressMessages[state.mode] || ["Working..."];
let index = 0;
setProgress(messages[index]);
state.progressTimer = window.setInterval(() => {
index = (index + 1) % messages.length;
setProgress(messages[index]);
}, 1800);
}
function stopProgress() {
if (state.progressTimer) {
window.clearInterval(state.progressTimer);
state.progressTimer = null;
}
setProgress("Idle");
}
async function fetchHealth() {
try {
const response = await fetch("/health");
const data = await response.json();
state.info = data;
dom.statusDot.className = "status-dot online";
dom.statusText.textContent = data.model_loaded ? `Ready - ${data.provider_label}` : `Starting - ${data.provider_label}`;
dom.promptHint.textContent = data.prompt_hint || "Describe your edit.";
dom.capabilityCount.textContent = data.capability_count;
dom.presetCount.textContent = data.preset_count;
} catch {
dom.statusDot.className = "status-dot error";
dom.statusText.textContent = "Disconnected";
dom.promptHint.textContent = "The local server could not be reached.";
}
}
async function fetchCapabilities() {
try {
const response = await fetch("/capabilities");
const data = await response.json();
state.capabilities = data.capabilities || [];
renderCapabilityTags();
} catch {
state.capabilities = [];
}
}
async function fetchPresets() {
try {
const response = await fetch("/presets");
const data = await response.json();
state.presets = data.presets || [];
renderPresets();
} catch {
state.presets = [];
renderPresets();
}
}
function buildCommonFormData(formData) {
formData.append("num_steps", dom.stepsSlider.value);
formData.append("text_guidance_scale", dom.textScaleSlider.value);
formData.append("image_guidance_scale", dom.imageScaleSlider.value);
if (dom.seedInput.value) formData.append("seed", dom.seedInput.value);
}
async function runCurrentMode() {
if (state.isBusy) return;
const prompt = dom.promptInput.value.trim();
const seed = dom.seedInput.value;
try {
state.isBusy = true;
updateRunButton();
setResponse("");
startProgress();
renderStepChips([]);
let endpoint = "/edit";
let response;
if (state.mode === "edit") {
const formData = new FormData();
formData.append("image", state.sourceFile);
formData.append("prompt", prompt);
buildCommonFormData(formData);
if (state.referenceFile) formData.append("reference_image", state.referenceFile);
if (state.backgroundFile) formData.append("background_image", state.backgroundFile);
const maskBlob = await exportMaskBlob();
if (maskBlob) formData.append("mask", new File([maskBlob], "mask.png", { type: "image/png" }));
response = await fetch("/edit", { method: "POST", body: formData });
} else if (state.mode === "generate") {
const formData = new FormData();
formData.append("prompt", prompt);
formData.append("width", dom.generateWidth.value);
formData.append("height", dom.generateHeight.value);
buildCommonFormData(formData);
response = await fetch("/generate", { method: "POST", body: formData });
} else if (state.mode === "inpaint") {
const maskBlob = await exportMaskBlob();
if (!maskBlob) throw new Error("Paint a mask before running inpaint.");
const formData = new FormData();
formData.append("image", state.sourceFile);
formData.append("mask", new File([maskBlob], "mask.png", { type: "image/png" }));
formData.append("prompt", prompt || "repair the masked region naturally");
buildCommonFormData(formData);
response = await fetch("/inpaint", { method: "POST", body: formData });
} else if (state.mode === "style") {
const formData = new FormData();
formData.append("image", state.sourceFile);
formData.append("reference_image", state.referenceFile);
formData.append("prompt", prompt);
if (seed) formData.append("seed", seed);
response = await fetch("/style-transfer", { method: "POST", body: formData });
} else if (state.mode === "background") {
const formData = new FormData();
formData.append("image", state.sourceFile);
formData.append("prompt", prompt);
if (state.backgroundFile) formData.append("background_image", state.backgroundFile);
if (seed) formData.append("seed", seed);
response = await fetch("/background", { method: "POST", body: formData });
} else if (state.mode === "upscale") {
const formData = new FormData();
formData.append("image", state.sourceFile);
formData.append("scale", dom.upscaleScale.value);
formData.append("prompt", prompt);
if (seed) formData.append("seed", seed);
response = await fetch("/upscale", { method: "POST", body: formData });
} else if (state.mode === "batch") {
const formData = new FormData();
state.batchFiles.forEach((file) => formData.append("images", file));
formData.append("prompt", prompt);
buildCommonFormData(formData);
response = await fetch("/batch", { method: "POST", body: formData });
}
const data = await response.json();
if (state.mode === "batch") {
if (!data.success) throw new Error(data.message || "Batch request failed.");
renderBatchResults(data.items || []);
if (data.items && data.items[0] && data.items[0].image_base64) {
state.resultDataUrl = `data:image/png;base64,${data.items[0].image_base64}`;
}
renderStage();
setResponse(data.message || "Batch complete.");
renderLayers(((data.items || [])[0] || {}).steps || []);
showToast("Batch Complete", `${(data.items || []).length} result(s) rendered.`);
return;
}
if (!data.success || !data.image_base64) {
throw new Error(data.message || "Request failed.");
}
state.resultDataUrl = `data:image/png;base64,${data.image_base64}`;
renderStage();
renderLayers(data.steps || []);
renderStepChips(data.steps || []);
setResponse(data.message || "Operation complete.");
pushHistory({
mode: state.mode,
prompt,
resultDataUrl: state.resultDataUrl,
sourceDataUrl: state.sourceDataUrl,
steps: data.steps || [],
message: data.message || "",
});
showToast("Completed", `${state.mode} finished successfully.`);
} catch (error) {
setResponse(error.message || "Something went wrong.", true);
showToast("Request Failed", error.message || "Something went wrong.");
} finally {
state.isBusy = false;
stopProgress();
updateRunButton();
}
}
function downloadResult() {
if (!state.resultDataUrl) return;
const link = document.createElement("a");
link.href = state.resultDataUrl;
link.download = `imageeditter_${state.mode}_${Date.now()}.png`;
link.click();
}
function handleKeyboard(event) {
const isModifier = event.ctrlKey || event.metaKey;
if (isModifier && event.key.toLowerCase() === "z" && !event.shiftKey) {
event.preventDefault();
undoHistory();
}
if (isModifier && (event.key.toLowerCase() === "y" || (event.shiftKey && event.key.toLowerCase() === "z"))) {
event.preventDefault();
redoHistory();
}
if (isModifier && event.key.toLowerCase() === "s") {
event.preventDefault();
downloadResult();
}
if (state.mode === "inpaint" && event.key === "[") {
event.preventDefault();
dom.maskSize.value = Math.max(4, Number(dom.maskSize.value) - 2);
updateSliderLabels();
}
if (state.mode === "inpaint" && event.key === "]") {
event.preventDefault();
dom.maskSize.value = Math.min(80, Number(dom.maskSize.value) + 2);
updateSliderLabels();
}
}
setupUploadTile(dom.sourceDrop, dom.sourceInput, async (files) => {
if (files[0]) await loadSourceFile(files[0]);
});
setupUploadTile(dom.referenceDrop, dom.referenceInput, async (files) => {
if (files[0]) await loadReferenceFile(files[0]);
});
setupUploadTile(dom.backgroundDrop, dom.backgroundInput, async (files) => {
if (files[0]) await loadBackgroundFile(files[0]);
});
setupUploadTile(dom.batchDrop, dom.batchInput, async (files) => {
state.batchFiles = files.filter((file) => file && file.type.startsWith("image/"));
renderBatchSources();
updateRunButton();
}, true);
dom.modeTabs.forEach((button) => button.addEventListener("click", () => setMode(button.dataset.mode)));
dom.runButton.addEventListener("click", runCurrentMode);
dom.btnUndo.addEventListener("click", undoHistory);
dom.btnRedo.addEventListener("click", redoHistory);
dom.btnDownload.addEventListener("click", downloadResult);
dom.btnClearAll.addEventListener("click", () => {
state.sourceFile = null;
state.referenceFile = null;
state.backgroundFile = null;
state.batchFiles = [];
state.sourceDataUrl = "";
state.resultDataUrl = "";
dom.sourceMeta.textContent = "Drop or browse PNG, JPG, WebP";
dom.referenceMeta.textContent = "Used for style transfer";
dom.backgroundMeta.textContent = "Optional replacement backdrop";
dom.batchMeta.textContent = "Multiple inputs for batch mode";
dom.batchSourceGrid.innerHTML = "";
dom.batchResultGrid.innerHTML = "";
dom.promptInput.value = "";
clearMask();
renderStage();
renderLayers([]);
renderStepChips([]);
setResponse("");
resetStageTransform();
updateRunButton();
});
dom.btnViewToggle.addEventListener("click", () => {
state.compareMode = !state.compareMode;
dom.btnViewToggle.textContent = state.compareMode ? "Compare" : "Result Only";
applyCompare();
});
dom.btnFullscreen.addEventListener("click", () => {
state.fullscreen = !state.fullscreen;
document.body.classList.toggle("fullscreen-mode", state.fullscreen);
});
dom.compareSlider.addEventListener("input", applyCompare);
dom.stepsSlider.addEventListener("input", updateSliderLabels);
dom.textScaleSlider.addEventListener("input", updateSliderLabels);
dom.imageScaleSlider.addEventListener("input", updateSliderLabels);
dom.upscaleScale.addEventListener("input", updateSliderLabels);
dom.maskSize.addEventListener("input", updateSliderLabels);
dom.promptInput.addEventListener("input", updateRunButton);
const adjustSliders = [
dom.adjustWarmth,
dom.adjustBrightness,
dom.adjustContrast,
dom.adjustClarity,
dom.adjustSharpness,
dom.adjustVignette,
dom.adjustBloom
];
adjustSliders.forEach(slider => {
if (slider) {
slider.addEventListener("input", () => {
updateSliderLabels();
triggerAdjustment();
});
}
});
if (dom.btnResetAdjust) {
dom.btnResetAdjust.addEventListener("click", () => {
dom.adjustWarmth.value = "1.0";
dom.adjustBrightness.value = "1.0";
dom.adjustContrast.value = "1.0";
dom.adjustClarity.value = "1.0";
dom.adjustSharpness.value = "0.0";
dom.adjustVignette.value = "0.0";
dom.adjustBloom.value = "0.0";
updateSliderLabels();
triggerAdjustment();
showToast("Adjustments Reset", "All fine-tuning sliders set to defaults");
});
}
dom.maskMagic.addEventListener("click", async () => {
if (!state.sourceDataUrl) {
showToast("No Source Image", "Please upload a source image first.");
return;
}
try {
state.isBusy = true;
updateRunButton();
showToast("Magic Selecting...", "Segmenting foreground subject using local GrabCut AI...");
const sourceBlob = await dataUrlToBlob(state.sourceDataUrl);
const formData = new FormData();
formData.append("image", sourceBlob, "source.png");
const res = await fetch("/segment", {
method: "POST",
body: formData,
});
const data = await res.json();
if (data.success && data.mask_base64) {
const maskImg = new Image();
maskImg.onload = () => {
syncMaskCanvas(true);
maskCtx.save();
maskCtx.globalCompositeOperation = "source-over";
maskCtx.drawImage(maskImg, 0, 0, dom.maskCanvas.width, dom.maskCanvas.height);
maskCtx.restore();
state.mask.hasData = true;
showToast("Magic Selected!", "Subject successfully isolated! You can now run inpaint or background replace.");
updateRunButton();
};
maskImg.src = `data:image/png;base64,${data.mask_base64}`;
} else {
throw new Error(data.message || "Failed to segment.");
}
} catch (e) {
showToast("Selection Failed", e.message || "Something went wrong.");
} finally {
state.isBusy = false;
updateRunButton();
}
});
dom.maskBrush.addEventListener("click", () => setMaskTool("brush"));
dom.maskErase.addEventListener("click", () => setMaskTool("erase"));
dom.maskFill.addEventListener("click", () => {
syncMaskCanvas(true);
maskCtx.save();
maskCtx.globalCompositeOperation = "source-over";
maskCtx.fillStyle = "white";
maskCtx.fillRect(0, 0, dom.maskCanvas.width, dom.maskCanvas.height);
maskCtx.restore();
state.mask.hasData = true;
});
dom.maskClear.addEventListener("click", clearMask);
dom.maskCanvas.addEventListener("pointerdown", (event) => {
if (!state.mask.enabled || !state.sourceDataUrl) return;
syncMaskCanvas();
state.mask.drawing = true;
dom.maskCanvas.style.pointerEvents = "auto";
state.mask.lastPoint = getCanvasPoint(event);
drawMaskLine(state.mask.lastPoint, state.mask.lastPoint, event.pressure || 0.5);
dom.maskCanvas.setPointerCapture(event.pointerId);
});
dom.maskCanvas.addEventListener("pointermove", (event) => {
if (!state.mask.drawing) return;
const point = getCanvasPoint(event);
drawMaskLine(state.mask.lastPoint, point, event.pressure || 0.5);
state.mask.lastPoint = point;
});
const stopMaskDrawing = () => {
state.mask.drawing = false;
state.mask.lastPoint = null;
};
dom.maskCanvas.addEventListener("pointerup", stopMaskDrawing);
dom.maskCanvas.addEventListener("pointercancel", stopMaskDrawing);
dom.maskCanvas.addEventListener("pointerleave", () => {
if (!state.mask.drawing) return;
stopMaskDrawing();
});
dom.stageFrame.addEventListener("wheel", (event) => {
if (state.mask.enabled && state.mask.drawing) return;
event.preventDefault();
const direction = event.deltaY > 0 ? -0.08 : 0.08;
state.stageScale = Math.min(4, Math.max(0.6, state.stageScale + direction));
applyStageTransform();
});
dom.stageFrame.addEventListener("pointerdown", (event) => {
if (state.mask.enabled) return;
state.stageDragging = true;
state.stageDragOrigin = {
x: event.clientX - state.stageOffsetX,
y: event.clientY - state.stageOffsetY,
};
});
window.addEventListener("pointermove", (event) => {
if (!state.stageDragging || !state.stageDragOrigin) return;
state.stageOffsetX = event.clientX - state.stageDragOrigin.x;
state.stageOffsetY = event.clientY - state.stageDragOrigin.y;
applyStageTransform();
});
window.addEventListener("pointerup", () => {
state.stageDragging = false;
state.stageDragOrigin = null;
});
dom.stageFrame.addEventListener("dblclick", resetStageTransform);
document.addEventListener("keydown", handleKeyboard);
dom.sourcePreview.addEventListener("load", () => {
syncMaskCanvas(true);
renderStage();
});
updateSliderLabels();
loadHistory();
renderHistory();
renderLayers([]);
renderCapabilityTags();
updateModeUI();
renderStage();
updateRunButton();
fetchHealth();
fetchCapabilities();
fetchPresets();
setInterval(fetchHealth, 12000);
});