@nyris/nyris-webapp 0.3.65 → 0.3.66

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.65",
+  "version": "0.3.66",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
-    "@nyris/nyris-api": "^0.3.65",
-    "@nyris/nyris-react-components": "^0.3.65",
+    "@nyris/nyris-api": "^0.3.66",
+    "@nyris/nyris-react-components": "^0.3.66",
     "@reduxjs/toolkit": "^2.2.1",
     "@splidejs/react-splide": "^0.7.12",
     "@testing-library/jest-dom": "^5.17.0",

package/src/components/ImagePreview.tsx

@@ -180,6 +180,7 @@ function ImagePreviewComponent({
         settings,
         imageRegion: r,
         showFeedback: true,
+        compress: false,
       }).then((res: any) => {
         dispatch(updateStatusLoading(false));
 

package/src/hooks/useImageSearch.ts

@@ -46,23 +46,29 @@ export const useImageSearch = () => {
       showFeedback = true,
       imageRegion,
       newSearch,
+      compress = true,
     }: {
       image: any;
       settings: AppSettings;
       showFeedback?: boolean;
       imageRegion?: RectCoords;
       newSearch?: boolean;
+      compress?: boolean;
     }) => {
       let region: RectCoords | undefined = imageRegion;
       let res: any;
       let compressedBase64;
 
-      try {
-        compressedBase64 = await compressImage(image);
-      } catch (error) {}
+      if (compress) {
+        try {
+          compressedBase64 = await compressImage(image);
+        } catch (error) {}
+      }
 
       let canvasImage = await createImage(compressedBase64 || image);
 
+      let requestImage = await createImage(image);
+
       if (!imageRegion) {
         dispatch(setRequestImage(canvasImage));
         setRequestImages([canvasImage]);
@@ -70,7 +76,7 @@ export const useImageSearch = () => {
 
       if (regions && !imageRegion) {
         try {
-          let res = await findRegions(canvasImage, settings);
+          let res = await findRegions(requestImage, settings);
           setDetectedObject(res.regions, 0);
           dispatch(setRegions(res.regions));
           region = res.selectedRegion;
@@ -89,7 +95,7 @@ export const useImageSearch = () => {
 
       try {
         res = await find({
-          image: canvasImage,
+          image: requestImage,
           settings,
           filters: !isEmpty(preFilter) ? preFilterValues : undefined,
           region,

package/src/page/result/index.tsx

@@ -152,7 +152,12 @@ function ResultComponent(props: Props) {
     }
     dispatch(loadingActionResults());
 
-    singleImageSearch({ image: url, settings, showFeedback: true }).then(() => {
+    singleImageSearch({
+      image: url,
+      settings,
+      showFeedback: true,
+      compress: false,
+    }).then(() => {
       dispatch(updateStatusLoading(false));
     });
   };
@@ -189,12 +194,12 @@ function ResultComponent(props: Props) {
     }
     dispatch(updateStatusLoading(true));
     dispatch(loadingActionResults());
-
     if (requestImages.length === 1) {
       singleImageSearch({
         image: requestImages[0],
         settings,
         imageRegion: imageRegions[0],
+        compress: false,
       }).then(res => {
         dispatch(updateStatusLoading(false));
       });

package/src/utils.ts

@@ -41,22 +41,34 @@ export function getThumbSizeLongestEdge(
   };
 }
 
-export const compressImage = (blobOrImage: any) => {
-  let blob: any;
+export const compressImage = async (input: string | Blob): Promise<string> => {
+  let blob: Blob;
 
-  if (typeof blobOrImage === 'string' && !blobOrImage.startsWith('https:')) {
-    const byteString = atob(blobOrImage.split(',')[1]);
-    const mimeString = blobOrImage.split(',')[0].split(':')[1].split(';')[0];
-    const ab = new ArrayBuffer(byteString.length);
-    const ia = new Uint8Array(ab);
-    for (let i = 0; i < byteString.length; i++) {
-      ia[i] = byteString.charCodeAt(i);
+  if (typeof input === 'string') {
+    if (input.startsWith('https:')) {
+      // Fetch the image from the URL and convert it to a Blob
+      const response = await fetch(input);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch image: ${response.statusText}`);
+      }
+      blob = await response.blob();
+    } else {
+      // Convert base64 string to Blob
+      const byteString = atob(input.split(',')[1]);
+      const mimeString = input.split(',')[0].split(':')[1].split(';')[0];
+      const ab = new ArrayBuffer(byteString.length);
+      const ia = new Uint8Array(ab);
+      for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+      }
+      blob = new Blob([ab], { type: mimeString });
     }
-    blob = new Blob([ab], { type: mimeString });
+  } else {
+    blob = input;
   }
 
   return new Promise<string>((resolve, reject) => {
-    new Compressor(blob || blobOrImage, {
+    new Compressor(blob, {
       quality: 0.91,
       maxHeight: 1024,
       maxWidth: 1024,