@nyris/nyris-webapp 0.3.65 → 0.3.67

package/src/hooks/useCadSearch.ts

@@ -0,0 +1,179 @@
+import { RectCoords } from '@nyris/nyris-api';
+import { isEmpty } from 'lodash';
+import { useCallback } from 'react';
+import { findCad, findRegions, getRequestImage } from 'services/image';
+import useRequestStore from 'Store/requestStore';
+import useResultStore from 'Store/resultStore';
+import {
+  setFirstSearchImage,
+  setFirstSearchPrefilters,
+  setFirstSearchResults,
+  setRegions,
+  setRequestImage,
+  setSearchResults,
+  setSelectedRegion,
+  setShowFeedback,
+  updateStatusLoading,
+} from 'Store/search/Search';
+import { useAppDispatch, useAppSelector } from 'Store/Store';
+import { AppSettings } from 'types';
+
+export const useCadSearch = () => {
+  const dispatch = useAppDispatch();
+  const preFilter = useAppSelector(state => state.search.preFilter);
+
+  const { setRequestImages, setImageRegions } = useRequestStore(state => ({
+    setRequestImages: state.setRequestImages,
+    setImageRegions: state.setRegions,
+    requestImages: state.requestImages,
+    regions: state.regions,
+  }));
+
+  const { setDetectedObject } = useResultStore(state => ({
+    setDetectedObject: state.setDetectedObject,
+  }));
+
+  const cadSearch = useCallback(
+    async ({
+      file,
+      settings,
+      showFeedback = true,
+      imageRegion,
+      newSearch,
+    }: {
+      file: File;
+      settings: AppSettings;
+      showFeedback?: boolean;
+      imageRegion?: RectCoords;
+      newSearch?: boolean;
+    }) => {
+      let res: any;
+
+      const preFilterValues = [
+        {
+          key: settings.visualSearchFilterKey,
+          values: Object.keys(preFilter),
+        },
+      ];
+      let filters: any[] = [];
+      // const canvas = document.createElement('canvas');
+
+      // dispatch(setRequestImage(file));
+      // setRequestImages([file as unknown as HTMLCanvasElement]);
+
+      try {
+        res = await findCad({
+          file,
+          settings,
+          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+        });
+
+        res?.responseBody?.results.forEach((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        const payload = {
+          ...res?.responseBody,
+          filters,
+        };
+        dispatch(setSearchResults(payload));
+
+        const queryParams = res?.requestUrl.split('?')[1];
+
+        // Parse the query string
+        const params = new URLSearchParams(queryParams);
+
+        // Get the value of the 'img' parameter
+        const imgValue = params.get('img');
+
+        const image = await getRequestImage({
+          url: encodeURIComponent(imgValue || ''),
+          settings,
+        });
+
+        const blob: Blob = image.data;
+
+        blobToCanvas(blob)
+          .then(async canvas => {
+            dispatch(setRequestImage(canvas));
+            setRequestImages([canvas]);
+            dispatch(setFirstSearchImage(canvas));
+
+            try {
+              let region: RectCoords | undefined = imageRegion;
+
+              let res = await findRegions(canvas, settings);
+              setDetectedObject(res.regions, 0);
+              dispatch(setRegions(res.regions));
+              region = res.selectedRegion;
+              dispatch(setSelectedRegion(region));
+              setImageRegions([region]);
+            } catch (error) {}
+          })
+          .catch(error => {
+            console.error('Error converting Blob to Canvas:', error);
+          });
+
+        if (showFeedback) {
+          dispatch(setShowFeedback(true));
+        }
+        // go back
+        if (newSearch) {
+          dispatch(setFirstSearchResults(payload));
+          dispatch(setFirstSearchPrefilters(preFilter));
+        }
+      } catch (error) {
+        dispatch(updateStatusLoading(false));
+      }
+
+      return res?.responseBody;
+    },
+    [dispatch, preFilter, setDetectedObject, setImageRegions, setRequestImages],
+  );
+
+  return { cadSearch };
+};
+
+function blobToCanvas(blob: Blob): Promise<HTMLCanvasElement> {
+  return new Promise((resolve, reject) => {
+    // Step 1: Create a new Image element
+    const img = new Image();
+
+    // Step 2: Create an Object URL from the Blob
+    const url = URL.createObjectURL(blob);
+    img.src = url;
+
+    // Step 3: Wait for the image to load
+    img.onload = () => {
+      // Step 4: Create a Canvas element
+      const canvas = document.createElement('canvas');
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        reject(new Error('Failed to get canvas context'));
+        return;
+      }
+
+      // Set canvas dimensions to match the image
+      canvas.width = img.width;
+      canvas.height = img.height;
+
+      // Step 5: Draw the image onto the Canvas
+      ctx.drawImage(img, 0, 0);
+
+      // Step 6: Revoke the Object URL to free memory
+      URL.revokeObjectURL(url);
+
+      // Resolve the Canvas element
+      resolve(canvas);
+    };
+
+    // Handle errors
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('Failed to load image from Blob'));
+    };
+  });
+}

package/src/hooks/useImageSearch.ts

@@ -46,23 +46,31 @@ export const useImageSearch = () => {
       showFeedback = true,
       imageRegion,
       newSearch,
+      compress = true,
+      preFilterParams,
     }: {
       image: any;
       settings: AppSettings;
       showFeedback?: boolean;
       imageRegion?: RectCoords;
       newSearch?: boolean;
+      compress?: boolean;
+      preFilterParams?: Record<string, 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 +78,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;
@@ -82,16 +90,18 @@ export const useImageSearch = () => {
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter),
+          values: Object.keys(preFilterParams || preFilter),
         },
       ];
       let filters: any[] = [];
 
       try {
         res = await find({
-          image: canvasImage,
+          image: requestImage,
           settings,
-          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+          filters: !isEmpty(preFilterParams || preFilter)
+            ? preFilterValues
+            : undefined,
           region,
         });
 
@@ -139,16 +149,18 @@ export const useImageSearch = () => {
       settings,
       regions,
       showFeedback = true,
+      preFilterParams,
     }: {
       images: HTMLCanvasElement[];
       regions: RectCoords[];
       settings: AppSettings;
       showFeedback?: boolean;
+      preFilterParams?: Record<string, boolean>;
     }) => {
       const preFilterValues = [
         {
           key: settings.visualSearchFilterKey,
-          values: Object.keys(preFilter),
+          values: Object.keys(preFilterParams || preFilter),
         },
       ];
       let filters: any[] = [];
@@ -158,7 +170,9 @@ export const useImageSearch = () => {
           images,
           settings,
           regions,
-          filters: !isEmpty(preFilter) ? preFilterValues : undefined,
+          filters: !isEmpty(preFilterParams || preFilter)
+            ? preFilterValues
+            : undefined,
         });
 
         res?.results.forEach((item: any) => {

package/src/page/landingPage/Home.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 import 'typeface-roboto';
@@ -6,9 +6,16 @@ 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 experienceVisualSearch = useAppSelector(
+    state => state.settings.experienceVisualSearch,
+  );
+  const experienceVisualSearchImages = useAppSelector(
+    state => state.settings.experienceVisualSearchImages,
+  );
+
   // const clarityId = useAppSelector(state => state.settings.clarityId);
 
   // useEffect(() => {
@@ -38,10 +45,46 @@ function Home(): JSX.Element {
   //   }
   // };
 
+  const [experienceVisualSearchBlobs, setExperienceVisualSearchBlobs] =
+    useState<Blob[]>([]);
+
+  const fetchImage = async (url: string) => {
+    const response = await fetch(url, { cache: 'force-cache' });
+    const blob = await response.blob();
+    return blob;
+  };
+
+  useEffect(() => {
+    const fetchAllImages = async () => {
+      if (experienceVisualSearch && experienceVisualSearchImages?.length) {
+        const randomImages = experienceVisualSearchImages?.slice(
+          0,
+          Math.min(experienceVisualSearchImages?.length, 4),
+        );
+        try {
+          // randomImages.forEach(url => {
+          //   fetchImage(url).then(value => {
+          //     setExperienceVisualSearchBlobs(s => [...s, value]);
+          //   });
+          // });
+
+          const responses = await Promise.all(
+            randomImages.map(url => fetchImage(url)),
+          );
+          setExperienceVisualSearchBlobs(responses);
+        } catch (error) {
+          console.error('Error fetching images:', error);
+        }
+      }
+    };
+
+    fetchAllImages();
+  }, [experienceVisualSearch, experienceVisualSearchImages]);
+
   return (
     <>
-      <AppMobile />
-      <AppMD />
+      <AppMobile experienceVisualSearchBlobs={experienceVisualSearchBlobs} />
+      <AppMD experienceVisualSearchBlobs={experienceVisualSearchBlobs} />
     </>
   );
 }

package/src/page/landingPage/HomeDesktop.tsx

@@ -8,7 +8,11 @@ import { connectInfiniteHits } from 'react-instantsearch-dom';
 import { useAppSelector } from 'Store/Store';
 import { AlgoliaSettings } from '../../types';
 
-function AppMD() {
+function AppMD({
+  experienceVisualSearchBlobs,
+}: {
+  experienceVisualSearchBlobs: Blob[];
+}) {
   const { settings } = useAppSelector(state => state);
   const [isLoading, setLoading] = useState<boolean>(false);
   const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
@@ -54,7 +58,13 @@ function AppMD() {
           isLoading={isLoading}
           onChangeLoading={onChangeLoading}
         />
-        {settings.experienceVisualSearch ? <ExperienceVisualSearch /> : ''}
+        {settings.experienceVisualSearch ? (
+          <ExperienceVisualSearch
+            experienceVisualSearchBlobs={experienceVisualSearchBlobs}
+          />
+        ) : (
+          ''
+        )}
       </div>
     </div>
   );

package/src/page/landingPage/HomeMobile.tsx

@@ -6,7 +6,11 @@ import { useAppSelector } from 'Store/Store';
 import ExperienceVisualSearch from '../../components/Experience-visual-search/ExperienceVisualSearch';
 import { Icon } from '@nyris/nyris-react-components';
 
-function AppMobile(): JSX.Element {
+function AppMobile({
+  experienceVisualSearchBlobs,
+}: {
+  experienceVisualSearchBlobs: Blob[];
+}): JSX.Element {
   const { settings } = useAppSelector(state => state);
   const [isOpenModalCamera, setOpenModalCamera] = useState<boolean>(false);
 
@@ -48,7 +52,13 @@ function AppMobile(): JSX.Element {
           }}
         />
       </div>
-      {settings.experienceVisualSearch ? <ExperienceVisualSearch /> : ''}
+      {settings.experienceVisualSearch ? (
+        <ExperienceVisualSearch
+          experienceVisualSearchBlobs={experienceVisualSearchBlobs}
+        />
+      ) : (
+        ''
+      )}
     </div>
   );
 }

package/src/page/result/index.tsx

@@ -85,7 +85,7 @@ function ResultComponent(props: Props) {
   const isPostFilterEnabled = settings.postFilterOption;
   const history = useHistory();
 
-  const { singleImageSearch, multiImageSearch } = useImageSearch();
+  const { singleImageSearch } = useImageSearch();
 
   const { resetRegions, imageRegions, requestImages } = useRequestStore(
     state => ({
@@ -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));
     });
   };
@@ -183,35 +188,6 @@ function ResultComponent(props: Props) {
     setFilterString(filter);
   }, [preFilter, requestImage, searchQuery, settings.alogoliaFilterField]);
 
-  useEffect(() => {
-    if (requestImages.length === 0 || !isAlgoliaEnabled) {
-      return;
-    }
-    dispatch(updateStatusLoading(true));
-    dispatch(loadingActionResults());
-
-    if (requestImages.length === 1) {
-      singleImageSearch({
-        image: requestImages[0],
-        settings,
-        imageRegion: imageRegions[0],
-      }).then(res => {
-        dispatch(updateStatusLoading(false));
-      });
-    } else {
-      multiImageSearch({
-        images: requestImages,
-        settings,
-        regions: imageRegions,
-      }).then(res => {
-        dispatch(updateStatusLoading(false));
-      });
-    }
-
-    return () => {};
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [preFilter]);
-
   useEffect(() => {
     if (!requestImage) return;
 

package/src/services/image.ts

@@ -89,3 +89,31 @@ export const findMulti = ({
 
   return nyrisApi.findMulti(options, images, regions, filters);
 };
+
+export const findCad = ({
+  file,
+  options,
+  settings,
+  filters,
+}: {
+  file: File;
+  settings: NyrisAPISettings;
+  options?: ImageSearchOptions;
+  filters?: Filter[];
+}) => {
+  const nyrisApi = new NyrisAPI(settings);
+
+  return nyrisApi.findByCad(file, {}, filters);
+};
+
+export const getRequestImage = ({
+  url,
+  settings,
+}: {
+  url: string;
+  settings: NyrisAPISettings;
+}) => {
+  const nyrisApi = new NyrisAPI(settings);
+
+  return nyrisApi.getCadRequestImage(url);
+};

package/src/types.ts

@@ -36,33 +36,33 @@ export interface Field {
   productDetails: string;
 }
 interface CTAButtonSettings {
-  CTAButton?: boolean,
-  CTAButtonText?: string,
-  CTAButtonTextColor?: string,
-  CTAButtonColor?: string,
-  CTAIcon?: boolean,
-  CTALinkField?: string,
+  CTAButton?: boolean;
+  CTAButtonText?: string;
+  CTAButtonTextColor?: string;
+  CTAButtonColor?: string;
+  CTAIcon?: boolean;
+  CTALinkField?: string;
 }
 
 interface SecondaryCTAButton {
-  secondaryCTAButton?: boolean,
-  secondaryCTAButtonText?: string,
-  secondaryCTAButtonTextColor?: string,
-  secondaryCTAButtonColor?: string,
-  secondaryCTAIcon?: boolean,
-  secondaryCTALinkField?: string,
+  secondaryCTAButton?: boolean;
+  secondaryCTAButtonText?: string;
+  secondaryCTAButtonTextColor?: string;
+  secondaryCTAButtonColor?: string;
+  secondaryCTAIcon?: boolean;
+  secondaryCTALinkField?: string;
 }
 
 interface Attributes {
-  productAttributes?: boolean,
-  attributeOneLabelValue?: string,
-  attributeOneValue?: string,
-  attributeTwoLabelValue?: string,
-  attributeTwoValue?: string,
-  attributeThreeLabelValue?: string,
-  attributeThreeValue?: string,
-  attributeFourLabelValue?: string,
-  attributeFourValue?: string,
+  productAttributes?: boolean;
+  attributeOneLabelValue?: string;
+  attributeOneValue?: string;
+  attributeTwoLabelValue?: string;
+  attributeTwoValue?: string;
+  attributeThreeLabelValue?: string;
+  attributeThreeValue?: string;
+  attributeFourLabelValue?: string;
+  attributeFourValue?: string;
 }
 
 export interface AppSettings extends NyrisAPISettings {
@@ -73,9 +73,9 @@ export interface AppSettings extends NyrisAPISettings {
   brandName?: string;
   cadenas?: Cadenas;
   clarityId?: string;
-  mainTitle: string,
+  mainTitle: string;
   productDetails: string;
-  secondaryTitle: string,
+  secondaryTitle: string;
   CTAButton?: CTAButtonSettings;
   secondaryCTAButton?: SecondaryCTAButton;
   attributes?: Attributes;
@@ -92,6 +92,7 @@ export interface AppSettings extends NyrisAPISettings {
   preFilterOption?: boolean;
   preFilterTitle?: string;
   preview: boolean;
+  cadSearch?: boolean;
   refinements?: any;
   regions: boolean;
   rfq?: Rfq;
@@ -103,7 +104,7 @@ export interface AppSettings extends NyrisAPISettings {
   showGroup?: boolean;
   showPoweredByNyris?: boolean;
   simpleCardView?: boolean;
-  support?: Support;
+  support: Support;
   theme: SearchSuiteSettings;
   visualSearchFilterKey?: string;
 }

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,

package/.prettierrc

@@ -1,7 +0,0 @@
-{
-  "singleQuote": true,
-  "useTabs": false,
-  "trailingComma": "all",
-  "proseWrap": "never",
-  "arrowParens": "avoid"
-}