@nyris/nyris-webapp 0.3.30 → 0.3.32

package/build/static/media/info-tooltip.5feeef22.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66658 10.9888C3.65328 11.6481 4.81331 12 6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.81331 11.6481 3.65328 10.9888 2.66658C10.3295 1.67989 9.39246 0.910851 8.2961 0.456725C7.19975 0.0025997 5.99335 -0.11622 4.82946 0.115291C3.66557 0.346802 2.59648 0.918247 1.75736 1.75736C0.918247 2.59648 0.346802 3.66557 0.115291 4.82946C-0.11622 5.99335 0.0025997 7.19975 0.456725 8.2961C0.910851 9.39246 1.67989 10.3295 2.66658 10.9888ZM3.14278 1.72387C3.98852 1.15877 4.98284 0.857145 6 0.857145C7.36397 0.857145 8.67208 1.39898 9.63655 2.36345C10.601 3.32793 11.1429 4.63603 11.1429 6C11.1429 7.01716 10.8412 8.01148 10.2761 8.85722C9.71103 9.70296 8.90782 10.3621 7.96809 10.7514C7.02835 11.1406 5.9943 11.2425 4.99668 11.044C3.99906 10.8456 3.08269 10.3558 2.36345 9.63655C1.64421 8.91731 1.1544 8.00094 0.955964 7.00332C0.757526 6.00571 0.859372 4.97165 1.24862 4.03192C1.63787 3.09218 2.29705 2.28898 3.14278 1.72387ZM6 2.57143C5.87285 2.57143 5.74857 2.60913 5.64285 2.67977C5.53713 2.75041 5.45473 2.85081 5.40608 2.96827C5.35742 3.08574 5.34469 3.215 5.36949 3.3397C5.3943 3.4644 5.45553 3.57895 5.54543 3.66885C5.63534 3.75876 5.74988 3.81999 5.87458 3.84479C5.99929 3.8696 6.12854 3.85686 6.24601 3.80821C6.36348 3.75955 6.46388 3.67715 6.53452 3.57144C6.60515 3.46572 6.64286 3.34143 6.64286 3.21429C6.64286 3.04379 6.57513 2.88028 6.45457 2.75972C6.33401 2.63916 6.1705 2.57143 6 2.57143ZM6.42857 8.57143V5.14286H4.71428V6H5.57143V8.57143H4.28571V9.42857H7.71428V8.57143H6.42857Z" fill="white"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.30",
+  "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.30",
-    "@nyris/nyris-react-components": "^0.3.30",
+    "@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/common/assets/icons/info-tooltip.svg

@@ -1,3 +1,3 @@
-<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.16658 10.9888C4.15328 11.6481 5.31331 12 6.5 12C8.0913 12 9.61742 11.3679 10.7426 10.2426C11.8679 9.11742 12.5 7.5913 12.5 6C12.5 4.81331 12.1481 3.65328 11.4888 2.66658C10.8295 1.67989 9.89246 0.910851 8.7961 0.456725C7.69975 0.0025997 6.49335 -0.11622 5.32946 0.115291C4.16557 0.346802 3.09648 0.918247 2.25736 1.75736C1.41825 2.59648 0.846802 3.66557 0.615291 4.82946C0.38378 5.99335 0.5026 7.19975 0.956725 8.2961C1.41085 9.39246 2.17989 10.3295 3.16658 10.9888ZM3.64278 1.72387C4.48852 1.15877 5.48284 0.857145 6.5 0.857145C7.86397 0.857145 9.17208 1.39898 10.1366 2.36345C11.101 3.32793 11.6429 4.63603 11.6429 6C11.6429 7.01716 11.3412 8.01148 10.7761 8.85722C10.211 9.70296 9.40782 10.3621 8.46809 10.7514C7.52835 11.1406 6.4943 11.2425 5.49668 11.044C4.49906 10.8456 3.58269 10.3558 2.86345 9.63655C2.14421 8.91731 1.6544 8.00094 1.45596 7.00332C1.25753 6.00571 1.35937 4.97165 1.74862 4.03192C2.13787 3.09218 2.79705 2.28898 3.64278 1.72387ZM6.5 2.57143C6.37285 2.57143 6.24857 2.60913 6.14285 2.67977C6.03713 2.75041 5.95473 2.85081 5.90608 2.96827C5.85742 3.08574 5.84469 3.215 5.86949 3.3397C5.8943 3.4644 5.95553 3.57895 6.04543 3.66885C6.13534 3.75876 6.24988 3.81999 6.37458 3.84479C6.49929 3.8696 6.62854 3.85686 6.74601 3.80821C6.86348 3.75955 6.96388 3.67715 7.03452 3.57144C7.10515 3.46572 7.14286 3.34143 7.14286 3.21429C7.14286 3.04379 7.07513 2.88028 6.95457 2.75972C6.83401 2.63916 6.6705 2.57143 6.5 2.57143ZM6.92857 8.57143V5.14286H5.21428V6H6.07143V8.57143H4.78571V9.42857H8.21428V8.57143H6.92857Z" fill="white"/>
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.66658 10.9888C3.65328 11.6481 4.81331 12 6 12C7.5913 12 9.11742 11.3679 10.2426 10.2426C11.3679 9.11742 12 7.5913 12 6C12 4.81331 11.6481 3.65328 10.9888 2.66658C10.3295 1.67989 9.39246 0.910851 8.2961 0.456725C7.19975 0.0025997 5.99335 -0.11622 4.82946 0.115291C3.66557 0.346802 2.59648 0.918247 1.75736 1.75736C0.918247 2.59648 0.346802 3.66557 0.115291 4.82946C-0.11622 5.99335 0.0025997 7.19975 0.456725 8.2961C0.910851 9.39246 1.67989 10.3295 2.66658 10.9888ZM3.14278 1.72387C3.98852 1.15877 4.98284 0.857145 6 0.857145C7.36397 0.857145 8.67208 1.39898 9.63655 2.36345C10.601 3.32793 11.1429 4.63603 11.1429 6C11.1429 7.01716 10.8412 8.01148 10.2761 8.85722C9.71103 9.70296 8.90782 10.3621 7.96809 10.7514C7.02835 11.1406 5.9943 11.2425 4.99668 11.044C3.99906 10.8456 3.08269 10.3558 2.36345 9.63655C1.64421 8.91731 1.1544 8.00094 0.955964 7.00332C0.757526 6.00571 0.859372 4.97165 1.24862 4.03192C1.63787 3.09218 2.29705 2.28898 3.14278 1.72387ZM6 2.57143C5.87285 2.57143 5.74857 2.60913 5.64285 2.67977C5.53713 2.75041 5.45473 2.85081 5.40608 2.96827C5.35742 3.08574 5.34469 3.215 5.36949 3.3397C5.3943 3.4644 5.45553 3.57895 5.54543 3.66885C5.63534 3.75876 5.74988 3.81999 5.87458 3.84479C5.99929 3.8696 6.12854 3.85686 6.24601 3.80821C6.36348 3.75955 6.46388 3.67715 6.53452 3.57144C6.60515 3.46572 6.64286 3.34143 6.64286 3.21429C6.64286 3.04379 6.57513 2.88028 6.45457 2.75972C6.33401 2.63916 6.1705 2.57143 6 2.57143ZM6.42857 8.57143V5.14286H4.71428V6H5.57143V8.57143H4.28571V9.42857H7.71428V8.57143H6.42857Z" fill="white"/>
 </svg>

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/appMobile.scss

@@ -176,11 +176,10 @@
 
           .box-item-result {
             height: 100%;
-            padding: 0 11px;
-            gap: 8px !important;
+            // padding: 0 11px;
+            // gap: 8px !important;
             // justify-content: center;
             width: calc(180 * 2px + 30px);
-
             .wrap-main-item-result {
               width: 180px;
               max-width: 180px !important;
@@ -190,6 +189,13 @@
               }
             }
           }
+          @media screen and (max-width: 370px) {
+            .box-item-result {
+              padding: 0 0px;
+              display: flex;
+              justify-content: center;
+            }
+          }
         }
       }
 
@@ -692,13 +698,13 @@
   }
 }
 
-@media screen and (max-width: 375px) {
+@media screen and (max-width: 400px) {
   .box-item-result {
     height: 100%;
     // padding: 0 11px;
-    gap: 8px !important;
+    gap: 12px !important;
     // justify-content: center;
-    width: calc(180 * 2px + 10px) !important;
+    width: calc(180 * 2px) !important;
 
     .wrap-main-item-result {
       width: 170px !important;

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]);
+      }
     },
   });
 

package/src/components/results/ItemResult.tsx

@@ -299,7 +299,7 @@ function ItemResult(props: Props) {
               placement="top"
               arrow={true}
               disableHoverListener={
-                dataItem[settings.field.productName].length < 35 ||
+                dataItem[settings.field.productName]?.length < 35 ||
                 !settings.warehouseVariant
               }
             >

package/src/page/landingPage/common.scss

@@ -1025,7 +1025,7 @@ button {
       align-items: center;
       max-width: 320px;
       .box-preview {
-        padding: 30px;
+        padding-top: 32px;
         width: 100%;
         // border: 2px dashed #55566b;
         display: flex;
@@ -1034,6 +1034,10 @@ button {
         height: 100%;
         position: relative;
         // transition: ease-in-out 0.5s;
+        @media only screen and (max-width: 776px) {
+          padding-bottom: 32px;
+
+        }
         .preview-item {
           // height: 100%;
           display: flex;
@@ -1072,6 +1076,7 @@ button {
         display: flex;
         flex-wrap: wrap;
         gap: 24px;
+        padding-left: 2px;
         .wrap-main-item-result {
           display: flex;
           flex-direction: column;
@@ -1103,7 +1108,7 @@ button {
   }
 
   .box-notify {
-    height: 40px;
+    height: 50px;
     background: #f3f3f5;
     border-top: 1px solid #e9e9ec;
     .select-choose-page {

package/src/page/result/index.tsx

@@ -77,6 +77,9 @@ function ResultComponent(props: Props) {
   const [filterString, setFilterString] = useState<string>();
   const { t } = useTranslation();
   const [showAdjustInfo, setAdjustInfo] = useState(false);
+  const [showAdjustInfoBasedOnConfidence, setShowAdjustInfoBasedOnConfidence] =
+    useState(false);
+
   const imageUploadRef = useRef(null);
 
   useEffect(() => {
@@ -89,7 +92,7 @@ function ResultComponent(props: Props) {
       setAdjustInfo(true);
       const timeout = setTimeout(() => {
         setAdjustInfo(false);
-      }, 5000);
+      }, 4000);
       imageUploadRef.current = imageThumbSearchInput;
       return () => {
         clearTimeout(timeout);
@@ -150,6 +153,15 @@ function ResultComponent(props: Props) {
       const { canvas }: any = requestImage;
       findImageByApiNyris(canvas, r).then((res: any) => {
         dispatch(updateResultChangePosition(res));
+        const highConfidence = res.results.find(
+          (data: { score: number }) => data.score >= 0.65,
+        );
+        if (!highConfidence) {
+          setShowAdjustInfoBasedOnConfidence(true);
+        }
+        setTimeout(() => {
+          setShowAdjustInfoBasedOnConfidence(false);
+        }, 4000);
       });
       return dispatch(showFeedback());
     }, 250),
@@ -376,21 +388,31 @@ function ResultComponent(props: Props) {
                               />
                             </Box>
                           </Box>
-                          {showAdjustInfo && (
+                          {(showAdjustInfoBasedOnConfidence ||
+                            showAdjustInfo) && (
                             <Box
                               className="box-title_col-left"
-                              display="flex"
                               alignItems="center"
-                              style={{ backgroundColor: '#3E36DC' }}
+                              style={{
+                                backgroundColor: '#3E36DC',
+                                display: 'flex',
+                                columnGap: '6px',
+                                padding: '5px',
+                              }}
                             >
-                              <IconInfo style={{ marginRight: 2 }} />
+                              <IconInfo />
                               <Typography
-                                style={{ fontSize: 9, color: '#fff' }}
+                                style={{
+                                  fontSize: 10,
+                                  color: '#fff',
+                                  width: '280px',
+                                }}
                               >
-                                {t(
-                                  'Adjust the search frame around your object for improved results',
-                                )}
-                                .
+                                {showAdjustInfo
+                                  ? t(
+                                      'Adjust the search frame around your object for improved results',
+                                    )
+                                  : 'Use the cropping tool for improved image accuracy and enhanced results'}
                               </Typography>
                             </Box>
                           )}
@@ -451,22 +473,32 @@ function ResultComponent(props: Props) {
                             dotColor={'#FBD914'}
                           />
                         </Box>
-                        {showAdjustInfo && (
+                        {(showAdjustInfoBasedOnConfidence ||
+                          showAdjustInfo) && (
                           <Box
                             className="box-title_col-left"
-                            display="flex"
                             alignItems="center"
                             style={{
                               backgroundColor: '#3E36DC',
-                              marginBottom: '35px',
+                              marginBottom: '25px',
+                              display: 'flex',
+                              columnGap: '6px',
+                              padding: '5px',
                             }}
                           >
-                            <IconInfo style={{ marginRight: 2 }} />
-                            <Typography style={{ fontSize: 9, color: '#fff' }}>
-                              {t(
-                                'Adjust the search frame around your object for improved results',
-                              )}
-                              .
+                            <IconInfo />
+                            <Typography
+                              style={{
+                                fontSize: 10,
+                                color: '#fff',
+                                width: '300px',
+                              }}
+                            >
+                              {showAdjustInfo
+                                ? t(
+                                    'Adjust the search frame around your object for improved results',
+                                  )
+                                : 'Use the cropping tool for improved image accuracy and enhanced results'}
                             </Typography>
                           </Box>
                         )}