Update script.js

script.js

@@ -2,6 +2,12 @@
   "use strict";
 
   const destination = "https://www.socialsleuth.xyz/face-search";
+  const handoffEndpoint = "https://www.socialsleuth.xyz/api/face-search/handoff";
+  const maxDimensionPx = 1600;
+  const targetMaxBytes = 1.5 * 1024 * 1024;
+  const backendMaxBytes = 2 * 1024 * 1024;
+  const uploadHardLimitBytes = 50 * 1024 * 1024;
+  const jpegQualitySteps = [0.82, 0.75, 0.68, 0.6, 0.5, 0.42];
   const uploadCard = document.getElementById("upload-card");
   const photoInput = document.getElementById("photo-input");
   const uploadEmpty = document.getElementById("upload-empty");
@@ -13,6 +19,8 @@
   const startSearch = document.getElementById("start-search");
 
   let previewUrl = "";
+  let selectedFile = null;
+  let isSubmitting = false;
 
   const isSupportedImage = (file) => {
     if (!file) return false;
@@ -22,10 +30,12 @@
   };
 
   const openFilePicker = () => {
+    if (isSubmitting) return;
     photoInput.click();
   };
 
-  const showError = () => {
+  const showError = (message = "Please choose a JPG or PNG image.") => {
+    uploadError.textContent = message;
     uploadError.hidden = false;
   };
 
@@ -38,8 +48,13 @@
       showError();
       return;
     }
+    if (file.size > uploadHardLimitBytes) {
+      showError("That photo is too large to process. Please choose another image.");
+      return;
+    }
 
     clearError();
+    selectedFile = file;
     if (previewUrl) URL.revokeObjectURL(previewUrl);
     previewUrl = URL.createObjectURL(file);
 
@@ -79,16 +94,112 @@
   });
 
   uploadCard.addEventListener("drop", (event) => {
+    if (isSubmitting) return;
     displayFile(event.dataTransfer.files && event.dataTransfer.files[0]);
   });
 
   changePhoto.addEventListener("click", (event) => {
     event.stopPropagation();
+    if (isSubmitting) return;
     openFilePicker();
   });
 
-  startSearch.addEventListener("click", () => {
-    if (!startSearch.disabled) window.location.href = destination;
+  const loadImage = (file) =>
+    new Promise((resolve, reject) => {
+      const url = URL.createObjectURL(file);
+      const image = new Image();
+      image.onload = () => resolve({ image, url });
+      image.onerror = () => {
+        URL.revokeObjectURL(url);
+        reject(new Error("IMAGE_DECODE_FAILED"));
+      };
+      image.src = url;
+    });
+
+  const canvasToBlob = (canvas, quality) =>
+    new Promise((resolve, reject) => {
+      canvas.toBlob(
+        (blob) => (blob ? resolve(blob) : reject(new Error("CANVAS_ENCODE_FAILED"))),
+        "image/jpeg",
+        quality
+      );
+    });
+
+  // Converted from production's validated imageCompression.js settings so
+  // common phone photos fit the existing 2MB temporary-session limit.
+  const prepareImageForHandoff = async (file) => {
+    if (file.size <= 1024 * 1024) return file;
+
+    let sourceUrl = "";
+    try {
+      const loaded = await loadImage(file);
+      const image = loaded.image;
+      sourceUrl = loaded.url;
+      const longEdge = Math.max(image.naturalWidth || 0, image.naturalHeight || 0);
+      const scale = longEdge > maxDimensionPx ? maxDimensionPx / longEdge : 1;
+      const width = Math.max(1, Math.round((image.naturalWidth || maxDimensionPx) * scale));
+      const height = Math.max(1, Math.round((image.naturalHeight || maxDimensionPx) * scale));
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const context = canvas.getContext("2d");
+      if (!context) return file;
+      context.imageSmoothingEnabled = true;
+      context.imageSmoothingQuality = "high";
+      context.drawImage(image, 0, 0, width, height);
+
+      let blob = null;
+      for (const quality of jpegQualitySteps) {
+        blob = await canvasToBlob(canvas, quality);
+        if (blob.size <= targetMaxBytes) break;
+      }
+      if (!blob || blob.size >= file.size) return file;
+
+      const baseName = String(file.name || "photo").replace(/\.[^./]+$/, "") || "photo";
+      return new File([blob], `${baseName}.jpg`, {
+        type: "image/jpeg",
+        lastModified: Date.now(),
+      });
+    } finally {
+      if (sourceUrl) URL.revokeObjectURL(sourceUrl);
+    }
+  };
+
+  startSearch.addEventListener("click", async () => {
+    if (startSearch.disabled || isSubmitting || !selectedFile) return;
+
+    isSubmitting = true;
+    startSearch.disabled = true;
+    startSearch.textContent = "OPTIMIZING PHOTO…";
+    clearError();
+
+    try {
+      const preparedFile = await prepareImageForHandoff(selectedFile);
+      if (!isSupportedImage(preparedFile) || preparedFile.size > backendMaxBytes) {
+        throw new Error("IMAGE_TOO_LARGE");
+      }
+
+      startSearch.textContent = "TRANSFERRING PHOTO…";
+      const form = new FormData();
+      form.append("image", preparedFile, preparedFile.name || "photo.jpg");
+      const response = await fetch(handoffEndpoint, {
+        method: "POST",
+        body: form,
+        credentials: "omit",
+      });
+      const data = await response.json().catch(() => null);
+      if (!response.ok || !data?.ok || typeof data.handoffToken !== "string") {
+        throw new Error(data?.error || "HANDOFF_FAILED");
+      }
+
+      startSearch.textContent = "OPENING SEARCH…";
+      window.location.assign(`${destination}?handoff=${encodeURIComponent(data.handoffToken)}`);
+    } catch (_) {
+      isSubmitting = false;
+      startSearch.disabled = false;
+      startSearch.textContent = "START SEARCH";
+      showError("We couldn't transfer that photo. Please try again.");
+    }
   });
 
   document.querySelectorAll(".faq-question").forEach((button) => {
@@ -115,4 +226,4 @@
   window.addEventListener("beforeunload", () => {
     if (previewUrl) URL.revokeObjectURL(previewUrl);
   });
-})();
+})();