@nyris/nyris-webapp 0.3.64 → 0.3.66

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.64",
+  "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.64",
-    "@nyris/nyris-react-components": "^0.3.64",
+    "@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/public/js/settings.example.js

@@ -78,7 +78,6 @@ var settings = {
   experienceVisualSearch: false,
   experienceVisualSearchImages: [],
   simpleCardView: false,
-  clarityId: '',
   noSimilarSearch: false,
   showFeedback: false,
   rfq: {

package/src/Store/Store.ts

@@ -12,6 +12,7 @@ settings.algolia.enabled = true;
 settings.preview = true;
 settings.showFeedbackAndShare = false;
 settings.multiImageSearch = false;
+settings.clarityId = '';
 
 if (settings.rfq?.enabled && settings.support?.enabled) {
   settings.support.enabled = false;

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/landingPage/Home.tsx

@@ -1,42 +1,42 @@
+import React from 'react';
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
-import React, { useEffect } from 'react';
 import 'typeface-roboto';
 import 'index.css';
 
 import AppMD from 'page/landingPage/HomeDesktop';
 import AppMobile from 'page/landingPage/HomeMobile';
-import { useAppSelector } from 'Store/Store';
+// import { useAppSelector } from 'Store/Store';
 
 function Home(): JSX.Element {
-  const clarityId = useAppSelector(state => state.settings.clarityId);
+  // const clarityId = useAppSelector(state => state.settings.clarityId);
 
-  useEffect(() => {
-    if (clarityId) {
-      clarify(window, document, 'clarity', 'script', clarityId);
-    }
-  }, [clarityId]);
+  // useEffect(() => {
+  //   if (clarityId) {
+  //     clarify(window, document, 'clarity', 'script', clarityId);
+  //   }
+  // }, [clarityId]);
 
-  const clarify = function (
-    c: any,
-    l: Document,
-    a: string,
-    r: string,
-    i: string,
-  ) {
-    c[a] =
-      c[a] ||
-      function () {
-        (c[a].q = c[a].q || []).push(arguments);
-      };
-    const t: any = l.createElement(r);
-    t.async = true;
-    t.src = `https://www.clarity.ms/tag/${i}`;
-    const y = l.getElementsByTagName(r)[0];
-    if (y.parentNode) {
-      y.parentNode.insertBefore(t, y);
-    }
-  };
+  // const clarify = function (
+  //   c: any,
+  //   l: Document,
+  //   a: string,
+  //   r: string,
+  //   i: string,
+  // ) {
+  //   c[a] =
+  //     c[a] ||
+  //     function () {
+  //       (c[a].q = c[a].q || []).push(arguments);
+  //     };
+  //   const t: any = l.createElement(r);
+  //   t.async = true;
+  //   t.src = `https://www.clarity.ms/tag/${i}`;
+  //   const y = l.getElementsByTagName(r)[0];
+  //   if (y.parentNode) {
+  //     y.parentNode.insertBefore(t, y);
+  //   }
+  // };
 
   return (
     <>

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,