Fix mockup preview doesnt work when batch uploading

public/image_process.py

@@ -2,7 +2,7 @@
 import io
 import os
 
-from js import Uint8Array, imageUploadList
+from js import Uint8Array, imageUploadList, previewJobQueue
 from PIL import Image
 
 
@@ -29,7 +29,7 @@ async def upload_single_image(origin_image, file_name):
 
 
 async def upload_file():
-    from js import imageUpload
+    imageUpload = previewJobQueue.shift()
 
     # Since we will update `imageUpload` when calling this function,
     # need to re-import it to force update to new value

public/scripts/preview_worker.js

@@ -1,6 +1,6 @@
 importScripts("https://cdn.jsdelivr.net/pyodide/v0.23.4/full/pyodide.js");
 
-async function initianPyodide() {
+async function initiatePyodide() {
   console.log("start startup");
   const pyodide = await loadPyodide();
   await pyodide.loadPackage(["numpy", "opencv-python", "pillow", "micropip"]);
@@ -28,7 +28,7 @@ async function runPreviewMockup(pyodide) {
     `
       import mockup
       import image_process
-      from js import locationKey, imageUpload, deviceInfo, deviceId
+      from js import locationKey, deviceInfo, deviceId
       origin_image_path = await image_process.upload_file()
       print("start preview", origin_image_path)
       output_img = await mockup.previewMockup(locationKey, deviceId, origin_image_path, deviceInfo)
@@ -45,18 +45,18 @@ async function runPreviewMockup(pyodide) {
 }
 
 async function main() {
-  let pyodideObject = initianPyodide();
+  let pyodideObject = initiatePyodide();
+  self["previewJobQueue"] = [];
   self.onmessage = async (event) => {
     pyodideObject = await pyodideObject;
 
     self["imageUploadList"] = undefined;
-    self["imageUpload"] = event.data.imageUpload;
+    self["previewJobQueue"].push(event.data.imageUpload);
     self["locationKey"] = event.data.location;
     self["deviceId"] = event.data.deviceId;
     self["deviceInfo"] = event.data.deviceInfo;
 
     try {
-      // TODO: Handle preview loading state in widget
       let results = await runPreviewMockup(pyodideObject);
       console.log("preview results", results);
       self.postMessage({ ulid: event.data.ulid, results: results });

public/scripts/upload.js

@@ -3,7 +3,6 @@ Require: mobx,
          utils/images.js, utils/scroll.js, services/presign.js, models/image-upload.js
 */
 let dragZoneCounter = 0; // https://stackoverflow.com/a/21002544/19287186
-const isDebug = false;
 const MAX_FILE_SIZE_BYTE = 104857600;
 const MAX_FILE_SIZE_READABLE = "100 MB";
 const MAX_MOCKUP_WAIT_SEC = 1000000000;
@@ -181,11 +180,7 @@ class FileListViewModel {
           scrollToElementTop(fileListSection, HEADER_HEIGHT);
         }
       }
-      // Avoiding read same image file
-      setTimeout(() => {
-        this._imageUploads.push(imageUpload);
-        window.viewModel.generatePreviewMockup(imageUpload);
-      }, i * 10);
+      this._imageUploads.push(imageUpload);
     }
   }
 
@@ -581,9 +576,6 @@ function main() {
   );
   handleColorPickers(viewModel);
   window.viewModel = viewModel;
-  if (isDebug) {
-    window.viewModel = viewModel;
-  }
 
   preventDefault(htmlNode, [
     "drag",
@@ -731,6 +723,24 @@ function main() {
     },
   );
 
+  // observe fileListViewModel: imageUploads[].length increase
+  // side effect: generate preview mockup
+  mobx.reaction(
+    () => viewModel.fileList.imageUploads.length,
+    (newLen, oldLen) => {
+      // we only want to trigger preview when the length increase
+      if (newLen <= oldLen) {
+        return;
+      }
+      if (viewModel.fileList.imageUploads.length !== newLen) {
+        console.error("unexpected mobx error, image upload length not matched");
+        return;
+      }
+      const newImage = viewModel.fileList.imageUploads[newLen - 1];
+      viewModel.generatePreviewMockup(newImage);
+    },
+  );
+
   // observe viewModel: selectedPreviewImageULID
   mobx.reaction(
     () => viewModel.selectedPreviewImageULID,
@@ -770,19 +780,4 @@ function main() {
       }
     },
   );
-
-  if (isDebug) {
-    // observe fileListViewModel: imageUploads, imageUploads[].state
-    mobx.autorun(() => {
-      console.log("file list:", mobx.toJS(viewModel.fileList.imageUploads));
-      console.log(
-        "read states:",
-        viewModel.fileList.imageUploads.map((imageUpload) => imageUpload.state),
-      );
-    });
-  }
-}
-
-function sleep(delay) {
-  return new Promise((resolve) => setTimeout(() => resolve(), delay));
 }

src/pages/type/_device.js

@@ -4,7 +4,6 @@ const { createLocalStorageRecentSearchesPlugin } =
 import * as autocompleteJsPkg from "@algolia/autocomplete-js";
 const { autocomplete } = autocompleteJsPkg;
 
-const isDebug = false;
 const NUM_DEFAULT_MODEL_ITEMS_TO_DISPLAY = 0;
 const NUM_DEFAULT_BRAND_ITEMS_TO_DISPLAY = 0;
 const MAX_SEARCH_HISTORY_ITEM = 5;