Update js/app.js

js/app.js

@@ -45,6 +45,57 @@ const ui = {
   showThinker: $("show-thinker"), thinker: $("thinker"), thinkerStep: $("thinker-step"),
 };
 const thinkerView = new ThinkerView($("plan-canvas"), $("pred-canvas"));
+
+/* Reference image upload and preview */
+const referenceInput = $("reference-image");
+const referencePreview = $("reference-preview");
+const referencePreviewWrap = $("reference-preview-wrap");
+const clearReferenceButton = $("clear-reference");
+const imageStrength = $("image-strength");
+const imageStrengthValue = $("image-strength-v");
+
+let referenceImageUrl = null;
+
+referenceInput.addEventListener("change", () => {
+  const file = referenceInput.files?.[0];
+
+  if (!file) return;
+
+  if (!file.type.startsWith("image/")) {
+    referenceInput.value = "";
+    setProgress(0, "Please select an image file", "");
+    return;
+  }
+
+  // Release the previous preview URL, if one exists.
+  if (referenceImageUrl) {
+    URL.revokeObjectURL(referenceImageUrl);
+  }
+
+  referenceImageUrl = URL.createObjectURL(file);
+  referencePreview.src = referenceImageUrl;
+  referencePreviewWrap.hidden = false;
+
+  setProgress(0, "Reference image selected", file.name);
+});
+
+clearReferenceButton.addEventListener("click", () => {
+  referenceInput.value = "";
+  referencePreview.removeAttribute("src");
+  referencePreviewWrap.hidden = true;
+
+  if (referenceImageUrl) {
+    URL.revokeObjectURL(referenceImageUrl);
+    referenceImageUrl = null;
+  }
+
+  setProgress(0, agate ? "Ready" : "Idle", "");
+});
+
+imageStrength.addEventListener("input", () => {
+  imageStrengthValue.textContent = Number(imageStrength.value).toFixed(2);
+});
+
 ui.showThinker.checked = store.get("agate-thinker") !== "0";
 ui.showThinker.onchange = () => { store.set("agate-thinker", ui.showThinker.checked ? "1" : "0"); if (!ui.showThinker.checked) ui.thinker.hidden = true; };