@nyris/nyris-webapp 0.3.31 → 0.3.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.31",
+  "version": "0.3.32",
   "homepage": "./",
   "dependencies": {
     "@algolia/autocomplete-js": "^1.7.1",
@@ -12,8 +12,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.31",
-    "@nyris/nyris-react-components": "^0.3.31",
+    "@nyris/nyris-api": "^0.3.32",
+    "@nyris/nyris-react-components": "^0.3.32",
     "@reduxjs/toolkit": "^1.6.1",
     "@splidejs/react-splide": "^0.7.12",
     "@types/blueimp-load-image": "^2.23.4",
@@ -30,6 +30,7 @@
     "blueimp-load-image": "^2.24.0",
     "classnames": "^2.2.6",
     "framer-motion": "^4.1.17",
+    "heic2any": "0.0.4",
     "history": "^4.10.1",
     "i18next": "^22.4.14",
     "jotai": "^1.4.7",
@@ -40,7 +41,7 @@
     "qs": "^6.10.3",
     "react": "^17.0.0",
     "react-dom": "^16.13.1",
-    "react-dropzone": "^10.1.8",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.27.1",
     "react-hot-toast": "^2.4.0",
     "react-i18next": "^12.2.0",

package/src/components/DragDropFile.tsx

@@ -19,6 +19,7 @@ import { useState } from 'react';
 import IconUpload from 'common/assets/images/Icon_Upload.svg';
 import { RectCoords } from '@nyris/nyris-api';
 import { useTranslation } from 'react-i18next';
+import heic2any from 'heic2any';
 
 interface Props {
   acceptTypes: any;
@@ -37,55 +38,74 @@ function DragDropFile(props: Props) {
   } = searchState;
   const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
   const { t } = useTranslation();
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      history.push('/result');
-      dispatch(updateStatusLoading(true));
-      dispatch(loadingActionResults());
-      onChangeLoading(true);
-      let payload: any;
-      let filters: any[] = [];
-      setLoadingLoadFile(true);
-      console.log('fs', fs);
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      const preFilter = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: [`${keyFilter}`],
-        },
-      ];
-      let region: RectCoords | undefined;
-      if (settings.regions) {
-        let res = await findRegions(image, settings);
-        dispatch(setRegions(res.regions));
-        region = res.selectedRegion;
-        dispatch(setSelectedRegion(region));
-      }
+  const handleVisualSearch = async (blob: Blob) => {
+    history.push('/result');
+    dispatch(updateStatusLoading(true));
+    dispatch(loadingActionResults());
+    onChangeLoading(true);
+    let payload: any;
+    let filters: any[] = [];
+    setLoadingLoadFile(true);
+    dispatch(setImageSearchInput(URL.createObjectURL(blob)));
+    // @ts-ignore
+    let image = await createImage(blob);
 
-      return findByImage({
-        image,
-        settings,
-        region,
-        filters: keyFilter ? preFilter : undefined,
-      }).then((res: any) => {
-        res?.results.map((item: any) => {
-          filters.push({
-            sku: item.sku,
-            score: item.score,
-          });
+    dispatch(setRequestImage(image));
+    const preFilter = [
+      {
+        key: settings.visualSearchFilterKey,
+        values: [`${keyFilter}`],
+      },
+    ];
+    let region: RectCoords | undefined;
+    if (settings.regions) {
+      let res = await findRegions(image, settings);
+      dispatch(setRegions(res.regions));
+      region = res.selectedRegion;
+      dispatch(setSelectedRegion(region));
+    }
+
+    return findByImage({
+      image,
+      settings,
+      region,
+      filters: keyFilter ? preFilter : undefined,
+    }).then((res: any) => {
+      res?.results.map((item: any) => {
+        filters.push({
+          sku: item.sku,
+          score: item.score,
         });
-        payload = {
-          ...res,
-          filters,
-        };
-        dispatch(setSearchResults(payload));
-        setLoadingLoadFile(false);
-        onChangeLoading(false);
-        dispatch(updateStatusLoading(false));
-        return dispatch(showFeedback());
       });
+      payload = {
+        ...res,
+        filters,
+      };
+      dispatch(setSearchResults(payload));
+      setLoadingLoadFile(false);
+      onChangeLoading(false);
+      dispatch(updateStatusLoading(false));
+      return dispatch(showFeedback());
+    });
+  };
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: async (fs: File[]) => {
+      var file = fs[0];
+      if (file.type === 'image/heic') {
+        heic2any({
+          blob: file as Blob,
+          toType: 'image/png',
+          quality: 1.0,
+        })
+          .then(function (resultBlob) {
+            handleVisualSearch(resultBlob as Blob);
+          })
+          .catch(function (error) {
+            console.error('Error converting HEIC to PNG:', error);
+          });
+      } else {
+        handleVisualSearch(fs[0]);
+      }
     },
   });
 

package/src/components/input/inputSearch.tsx

@@ -31,6 +31,7 @@ import PreFilterComponent from 'components/pre-filter';
 import { RectCoords } from '@nyris/nyris-api';
 import { truncateString } from 'helpers/truncateString';
 import { useTranslation } from 'react-i18next';
+import heic2any from 'heic2any';
 
 const SearchBox = (props: any) => {
   const { refine, onToggleFilterMobile }: any = props;
@@ -87,58 +88,76 @@ const SearchBox = (props: any) => {
     }, 500),
     [],
   );
+  const handleVisualSearch = async (blob: Blob) => {
+    dispatch(updateStatusLoading(true));
+    dispatch(loadingActionResults());
+    if (history.location.pathname !== '/result') {
+      history.push('/result');
+    }
+    let payload: any;
+    let filters: any[] = [];
+    let region: RectCoords | undefined;
+    dispatch(setImageSearchInput(URL.createObjectURL(blob)));
+    // @ts-ignore
+    let image = await createImage(blob);
+    dispatch(setRequestImage(image));
+    const preFilter = [
+      {
+        key: settings.visualSearchFilterKey,
+        values: [`${keyFilter}`],
+      },
+    ];
 
-  const { getInputProps } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      dispatch(updateStatusLoading(true));
-      dispatch(loadingActionResults());
-      if (history.location.pathname !== '/result') {
-        history.push('/result');
-      }
-      let payload: any;
-      let filters: any[] = [];
-      let region: RectCoords | undefined;
-      dispatch(setImageSearchInput(URL.createObjectURL(fs[0])));
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      const preFilter = [
-        {
-          key: settings.visualSearchFilterKey,
-          values: [`${keyFilter}`],
-        },
-      ];
-
-      if (settings.regions) {
-        let res = await findRegions(image, settings);
-        dispatch(setRegions(res.regions));
-        region = res.selectedRegion;
-        dispatch(setSelectedRegion(region));
-      }
+    if (settings.regions) {
+      let res = await findRegions(image, settings);
+      dispatch(setRegions(res.regions));
+      region = res.selectedRegion;
+      dispatch(setSelectedRegion(region));
+    }
 
-      return findByImage({
-        image,
-        settings,
-        filters: keyFilter ? preFilter : undefined,
-        region,
-      })
-        .then((res: any) => {
-          res?.results.map((item: any) => {
-            filters.push({
-              sku: item.sku,
-              score: item.score,
-            });
+    return findByImage({
+      image,
+      settings,
+      filters: keyFilter ? preFilter : undefined,
+      region,
+    })
+      .then((res: any) => {
+        res?.results.map((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
           });
-          payload = {
-            ...res,
-            filters,
-          };
-          dispatch(setSearchResults(payload));
-          dispatch(updateStatusLoading(false));
-        })
-        .catch((e: any) => {
-          console.log('error input search', e);
-          dispatch(updateStatusLoading(false));
         });
+        payload = {
+          ...res,
+          filters,
+        };
+        dispatch(setSearchResults(payload));
+        dispatch(updateStatusLoading(false));
+      })
+      .catch((e: any) => {
+        console.log('error input search', e);
+        dispatch(updateStatusLoading(false));
+      });
+  };
+  const { getInputProps } = useDropzone({
+    onDrop: async (fs: File[]) => {
+      var file = fs[0];
+      if (file.type === 'image/heic') {
+        heic2any({
+          blob: file as Blob,
+          toType: 'image/png',
+          quality: 1.0,
+        })
+          .then(function (resultBlob) {
+            handleVisualSearch(resultBlob as Blob);
+          })
+          .catch(function (error) {
+            console.error('Error converting HEIC to PNG:', error);
+          });
+      } else {
+        handleVisualSearch(fs[0]);
+      }
     },
   });