@nyris/nyris-webapp 0.3.86 → 0.3.88

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.86",
+  "version": "0.3.88",
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
     "@emailjs/browser": "^4.3.3",
-    "@nyris/nyris-api": "^0.3.86",
-    "@nyris/nyris-react-components": "^0.3.86",
+    "@nyris/nyris-api": "^0.3.88",
+    "@nyris/nyris-react-components": "^0.3.88",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-popover": "^1.1.4",

package/public/js/settings.example.js

@@ -89,6 +89,7 @@ var settings = {
   showFeedback: false,
   geoLocation: false,
   geoLocationMessage: '',
+  showImageDetails: false,
   rfq: {
     enabled: '',
     emailTemplateId: '',

package/src/components/Carousel/ImagePreviewCarousel.tsx

@@ -84,7 +84,7 @@ export const ImagePreviewCarousel = (props: Props) => {
         }}
         options={mainOptions}
         ref={mainRef}
-        style={{ maxWidth: '100%', height: isMobile ? '80%' : '' }}
+        style={{ maxWidth: '100%', height: isMobile ? '80%' : 'calc(100% - 48px);' }}
       >
         {renderSlides()}
       </Splide>

package/src/components/CustomCameraDrawer.tsx

@@ -18,6 +18,9 @@ import {
 } from './Drawer/Drawer';
 import { useCadSearch } from 'hooks/useCadSearch';
 import { isCadFile } from '@nyris/nyris-api';
+import { clone } from 'lodash';
+import { getFilters } from '../services/filter';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   show: boolean;
@@ -35,18 +38,42 @@ function CustomCamera(props: Props) {
   const location = useLocation();
   const { singleImageSearch } = useImageSearch();
   const { cadSearch } = useCadSearch();
+  const { t } = useTranslation();
 
   const requestImages = useRequestStore(state => state.requestImages);
-
+  const specifications = useRequestStore(state => state.specifications);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const setRequestImages = useRequestStore(state => state.setRequestImages);
+  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
+  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const setPreFilter = useRequestStore(state => state.setPreFilter);
+  const setShowLoading = useRequestStore(state => state.setShowLoading);
+  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
+  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
   const [capturedImages, setCapturedImages] = useState<HTMLCanvasElement[]>([]);
   const [currentIndex, setCurrentIndex] = useState(0);
   const [imageCaptureHelpModal, setImageCaptureHelpModal] = useState(false);
+  const [resultFilter, setResultFilter] = useState<any>([]);
 
   const videoConstraints = {
     width: 1080,
     aspectRatio: 1.11111,
   };
 
+  const getPreFilters = async () => {
+    getFilters(1000, settings)
+      .then(res => {
+        setResultFilter(res);
+      })
+      .catch((e: any) => {
+        console.log('err getDataFilterDesktop', e);
+      });
+  }
+
+  useEffect(() => {
+    getPreFilters()
+  }, []);
+
   const handlerFindImage = async (image: any) => {
     if (location.pathname !== '/result') {
       navigate('/result');
@@ -65,8 +92,51 @@ function CustomCamera(props: Props) {
       settings,
       newSearch,
       showFeedback: true,
-    }).then(() => {});
-    handleClose();
+    }).then((singleImageResp) => {
+      const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
+      const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+      if (specificationPrefilter) {
+        setRequestImages([]);
+        setShowNotMatchedError(false);
+        if (hasPrefilter.length) {
+          setSpecifications(clone(singleImageResp.image_analysis.specification));
+          setNameplateImage(image);
+          setPreFilter({[singleImageResp.image_analysis?.specification?.prefilter_value]: true});
+          setAlgoliaFilter(`${settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`);
+
+          setShowLoading(false);
+          handleClose();
+
+          setNameplateNotificationText(t('We have successfully defined the search criteria', { prefilter_value: specificationPrefilter, preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 5000);
+        }
+        if (!hasPrefilter.length && window.settings.preFilterOption) {
+          setSpecifications(clone({...singleImageResp.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+          setPreFilter({});
+          setAlgoliaFilter('');
+          setShowLoading(false);
+          handleClose();
+          setShowNotMatchedError(true);
+          setTimeout(() => {
+            setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 6000);
+        }
+      } else {
+        if (specifications?.is_nameplate) {
+          setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
+        } else {
+          setSpecifications({...specifications, is_nameplate: false});
+        }
+        setShowLoading(false);
+        handleClose();
+      }
+    });
+    
   };
 
   const handleClose = () => {

package/src/components/DragDropFile.tsx

@@ -1,15 +1,17 @@
-import { memo } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { useTranslation } from 'react-i18next';
 
-import { Icon } from '@nyris/nyris-react-components';
-
 import Loading from './Loading';
 import { useImageSearch } from 'hooks/useImageSearch';
 import useDragAndDrop from 'hooks/useDragAndDrop';
 import { useNavigate } from 'react-router';
 import { useCadSearch } from 'hooks/useCadSearch';
 import { isCadFile } from '@nyris/nyris-api';
+import Hint from './Hint';
+import { clone } from 'lodash';
+import useRequestStore from '../stores/request/requestStore';
+import { getFilters } from '../services/filter';
 
 interface Props {
   onChangeLoading?: any;
@@ -24,8 +26,33 @@ function DragDropFile(props: Props) {
   const { singleImageSearch } = useImageSearch();
   const { cadSearch } = useCadSearch();
 
+  const [resultFilter, setResultFilter] = useState<any>([]);
+
+  const specifications = useRequestStore(state => state.specifications);
+  const setRequestImages = useRequestStore(state => state.setRequestImages);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
+  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
+  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const setPreFilter = useRequestStore(state => state.setPreFilter);
+  const setShowLoading = useRequestStore(state => state.setShowLoading);
+  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
+
+  const getPreFilters = async () => {
+    getFilters(1000, window.settings)
+      .then(res => {
+        setResultFilter(res);
+      })
+      .catch((e: any) => {
+        console.log('err getDataFilterDesktop', e);
+      });
+  }
+
+  useEffect(() => {
+    getPreFilters()
+  }, []);
+
   const handleUpload = (file: File) => {
-    navigate('/result');
 
     if (isCadFile(file)) {
       cadSearch({
@@ -37,11 +64,58 @@ function DragDropFile(props: Props) {
       return;
     }
 
+    setShowLoading(true);
+
     singleImageSearch({
       image: file,
       settings: window.settings,
       showFeedback: true,
-    }).then(() => {});
+    }).then((singleImageResp) => {
+      const specificationPrefilter = singleImageResp.image_analysis?.specification?.prefilter_value || null;
+      const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+      if (specificationPrefilter) {
+        setRequestImages([]);
+        setShowNotMatchedError(false);
+        if (hasPrefilter.length) {
+          setSpecifications(clone(singleImageResp.image_analysis.specification));
+          setNameplateImage(file);
+          setPreFilter({[singleImageResp.image_analysis?.specification?.prefilter_value]: true});
+          setAlgoliaFilter(`${window.settings.alogoliaFilterField}:'${singleImageResp.image_analysis?.specification?.prefilter_value}'`);
+
+          setShowLoading(false);
+          navigate('/result');
+
+          setTimeout(() => {
+            setNameplateNotificationText(t('We have successfully defined the search criteria', { prefilter_value: specificationPrefilter, preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 6000);
+        }
+        if (!hasPrefilter.length && window.settings.preFilterOption) {
+          setSpecifications(clone({...singleImageResp.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+          navigate('/result');
+          setPreFilter({});
+          setAlgoliaFilter('');
+          setShowLoading(false);
+          setShowNotMatchedError(true);
+          setTimeout(() => {
+            setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+          }, 1000);
+          setTimeout(() => {
+            setNameplateNotificationText('');
+          }, 6000);
+        }
+      } else {
+        if (specifications?.is_nameplate) {
+          setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
+        } else {
+          setSpecifications({...specifications, is_nameplate: false});
+        }
+        setShowLoading(false);
+        navigate('/result');
+      }
+    });
   };
 
   const { isDragging, dragProps } = useDragAndDrop({
@@ -49,52 +123,53 @@ function DragDropFile(props: Props) {
   });
 
   return (
-    <label
-      htmlFor="select_file"
-      className={
-        'flex flex-col items-center justify-center mt-8 px-4 bg-[#fafafa]'
-      }
-    >
-      {isLoading && <Loading />}
-
-      <div
-        className={'relative flex flex-col items-center justify-center w-full'}
-        {...dragProps}
+    <>
+      <label
+        htmlFor="select_file"
+        className={
+          'flex flex-col items-center justify-center mt-8 bg-[#fafafa] drag-n-drop-label'
+        }
       >
+        {isLoading && <Loading />}
+  
         <div
-          className={twMerge([
-            'flex flex-col items-center w-full cursor-pointer pb-4 pt-4 rounded-[60px]',
-            'text-[#cacad1] hover:text-primary',
-            'border-2 border-dashed border-transparent hover:border-[#e0e0e0]',
-            isDragging && 'text-primary border-[#e0e0e0]',
-          ])}
+          className={'relative flex flex-col items-center justify-center w-full'}
+          {...dragProps}
         >
-          <div style={{ marginBottom: 16 }}>
-            <Icon name="drop" width={48} height={48} />
-          </div>
-          <div className="" style={{ fontSize: 14 }}>
-            <span className="font-bold text-sm pr-1">{t('Drag and drop')}</span>
-            {t('an image here')}
+          <div
+            className={twMerge([
+              'drag-n-drop-inner',
+              'flex flex-col items-center w-full cursor-pointer pb-4 pt-4 rounded-[12px]',
+              'text-[#cacad1] hover:text-primary',
+              'border-2 border-dashed border-transparent hover:border-[#e0e0e0]',
+              isDragging && 'text-primary border-[#e0e0e0]',
+            ])}
+          >
+            <div className="" style={{ fontSize: 14 }}>
+              <span className="font-bold text-sm pr-1">{t('Drag and drop')}</span>
+              {t('an image here')}
+            </div>
+            <Hint />
+            <input
+              onChange={e => {
+                e.stopPropagation();
+                if (e.target.files && e.target.files[0]) {
+                  handleUpload(e.target.files[0]);
+                  e.target.value = '';
+                }
+              }}
+              style={{}}
+              type="file"
+              name="file"
+              id="select_file"
+              className="absolute z-[-1] opacity-0"
+              placeholder="Choose photo"
+              accept={'.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,.pdf,image/*'}
+            />
           </div>
-          <input
-            onChange={e => {
-              e.stopPropagation();
-              if (e.target.files && e.target.files[0]) {
-                handleUpload(e.target.files[0]);
-                e.target.value = '';
-              }
-            }}
-            style={{}}
-            type="file"
-            name="file"
-            id="select_file"
-            className="absolute z-[-1] opacity-0"
-            placeholder="Choose photo"
-            accept={'.stp,.step,.stl,.obj,.glb,.gltf,.heic,.heif,.pdf,image/*'}
-          />
         </div>
-      </div>
-    </label>
+      </label>
+    </>
   );
 }
 

package/src/components/Header.tsx

@@ -19,6 +19,7 @@ function Header() {
 
   const reset = useRequestStore(state => state.reset);
   const resetResultStore = useResultStore(state => state.reset);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
 
   const showSearchBar = location?.pathname === '/result';
 
@@ -42,8 +43,9 @@ function Header() {
     >
       <div
         className={twMerge([
+          'w-full',
           'flex',
-          'justify-between',
+          'justify-center',
           'items-center',
           'relative',
           'h-full',
@@ -51,10 +53,11 @@ function Header() {
       >
         <NavLink
           to="/"
-          style={{ lineHeight: 0 }}
+          style={{ lineHeight: 0, position: 'absolute', left: 0 }}
           onClick={() => {
             reset();
             resetResultStore();
+            setSpecifications(null);
           }}
         >
           <img
@@ -68,16 +71,18 @@ function Header() {
           />
         </NavLink>
 
-        <div
-          className={twMerge(['hidden', showSearchBar && 'desktop:block'])}
-          style={{
-            position: 'absolute',
-            left: '50%',
-            top: '50%',
-            transform: 'translate(-50%, -50%)',
-          }}
-        >
-          <TextSearch />
+        <div>
+          <div
+            className={twMerge(['hidden', showSearchBar && 'desktop:block'])}
+            style={{
+              // position: 'relative',
+              // left: '50%',
+              // top: '50%',
+              // transform: 'translate(-50%, -50%)',
+            }}
+          >
+            <TextSearch />
+          </div>
         </div>
 
         {auth0.enabled && isAuthenticated && (

package/src/components/Hint.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Icon } from '@nyris/nyris-react-components';
+import { useTranslation } from 'react-i18next';
+
+const Hint = () => {
+  const { t } = useTranslation();
+  return (
+    <div
+      style={{
+        width: 'max-content',
+        minWidth: 240,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        marginTop: 16,
+        fontSize: 9,
+        fontWeight: 700,
+        whiteSpace: 'nowrap',
+        gap: 16,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          flex: 1,
+        }}
+      >
+        <Icon
+          name="typeplate"
+          width={24}
+          height={24}
+          style={{
+            marginBottom: 8,
+          }}
+        />
+        {t('Type plates')}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          flex: 1,
+        }}
+      >
+        <Icon
+          name="part"
+          width={24}
+          height={24}
+          style={{
+            marginBottom: 8,
+          }}
+        />
+        {t('Parts')}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          flex: 1,
+        }}
+      >
+        <Icon
+          name="label"
+          width={24}
+          height={24}
+          style={{
+            marginBottom: 8,
+          }}
+        />
+        {t('Labels')}
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          flex: 1,
+        }}
+      >
+        <Icon
+          name="barcode"
+          width={24}
+          height={24}
+          style={{
+            marginBottom: 8,
+          }}
+        />
+        {t('Barcodes')}
+      </div>
+    </div>
+  );
+};
+
+export default Hint;

package/src/components/ImagePreview.tsx

@@ -1,6 +1,6 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 
-import { debounce } from 'lodash';
+import {clone, debounce} from 'lodash';
 import { twMerge } from 'tailwind-merge';
 import { useNavigate } from 'react-router';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,7 @@ import { DEFAULT_REGION } from '../constants';
 import { useImageSearch } from 'hooks/useImageSearch';
 import useRequestStore from 'stores/request/requestStore';
 import useResultStore from 'stores/result/resultStore';
+import { getFilters } from '../services/filter';
 
 function ImagePreviewComponent({
   showAdjustInfo = false,
@@ -23,6 +24,7 @@ function ImagePreviewComponent({
 }) {
   const [showAdjustInfoBasedOnConfidence, setShowAdjustInfoBasedOnConfidence] =
     useState(false);
+  const [resultFilter, setResultFilter] = useState<any>([]);
 
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -30,11 +32,19 @@ function ImagePreviewComponent({
   const isMultiImageSearchEnabled = settings.multiImageSearch;
 
   const requestImages = useRequestStore(state => state.requestImages);
+  const specifications = useRequestStore(state => state.specifications);
   const resetRegions = useRequestStore(state => state.resetRegions);
   const setRequestImages = useRequestStore(state => state.setRequestImages);
   const regions = useRequestStore(state => state.regions);
   const updateRegion = useRequestStore(state => state.updateRegion);
   const resetRequestStore = useRequestStore(state => state.reset);
+  const setSpecifications = useRequestStore(state => state.setSpecifications);
+  const setShowLoading = useRequestStore(state => state.setShowLoading);
+  const setNameplateNotificationText = useRequestStore(state => state.setNameplateNotificationText);
+  const setAlgoliaFilter = useRequestStore(state => state.setAlgoliaFilter);
+  const setPreFilter = useRequestStore(state => state.setPreFilter);
+  const setNameplateImage = useRequestStore(state => state.setNameplateImage);
+  const setShowNotMatchedError = useRequestStore(state => state.setShowNotMatchedError);
 
   const detectedRegions = useResultStore(state => state.detectedRegions);
   const resetResultStore = useResultStore(state => state.reset);
@@ -48,6 +58,20 @@ function ImagePreviewComponent({
 
   const previewWrapperRef = useRef<any>(null);
 
+  const getPreFilters = async () => {
+    getFilters(1000, settings)
+      .then(res => {
+        setResultFilter(res);
+      })
+      .catch((e: any) => {
+        console.log('err getDataFilterDesktop', e);
+      });
+  };
+
+  useEffect(() => {
+    getPreFilters()
+  }, []);
+
   const onImageRemove = () => {
     resetRegions();
     setRequestImages([]);
@@ -55,6 +79,7 @@ function ImagePreviewComponent({
     navigate('/');
     resetResultStore();
     resetRequestStore();
+    setSpecifications(null);
   };
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -69,15 +94,59 @@ function ImagePreviewComponent({
         showFeedback: true,
         compress: false,
       }).then((res: any) => {
-        const highConfidence = res.results.find(
-          (data: { score: number }) => data.score >= 0.65,
-        );
-        if (!highConfidence) {
-          setShowAdjustInfoBasedOnConfidence(true);
+        const specificationPrefilter = res.image_analysis?.specification?.prefilter_value || null;
+        const hasPrefilter = resultFilter.filter((filter: any) => filter.values.includes(specificationPrefilter));
+        if (specificationPrefilter) {
+          setRequestImages([]);
+          setShowNotMatchedError(false);
+          if (hasPrefilter.length) {
+            setSpecifications(clone(res.image_analysis.specification));
+            setNameplateImage(image);
+            setPreFilter({[res.image_analysis?.specification?.prefilter_value]: true});
+            setAlgoliaFilter(`${settings.alogoliaFilterField}:'${res.image_analysis?.specification?.prefilter_value}'`);
+
+            setShowLoading(false);
+            navigate('/result');
+
+            setTimeout(() => {
+              setNameplateNotificationText(t('We have successfully defined the search criteria', {
+                prefilter_value: specificationPrefilter,
+                preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase()
+              }));
+            }, 1000);
+            setTimeout(() => {
+              setNameplateNotificationText('');
+            }, 6000);
+          }
+          if (!hasPrefilter.length && window.settings.preFilterOption) {
+            setSpecifications(clone({...res.image_analysis.specification, prefilter_value: '', specificationPrefilter}));
+            setPreFilter({});
+            setAlgoliaFilter('');
+            setShowLoading(false);
+            setShowNotMatchedError(true);
+            setTimeout(() => {
+              setNameplateNotificationText(t('Extracted details from the nameplate could not be matched', { preFilterTitle: window.settings.preFilterTitle?.toLocaleLowerCase() }));
+            }, 1000);
+            setTimeout(() => {
+              setNameplateNotificationText('');
+            }, 6000);
+          }
+        } else {
+          if (specifications?.is_nameplate) {
+            setSpecifications({...specifications, prefilter_value: '', specificationPrefilter: ''});
+          } else {
+            setSpecifications({...specifications, is_nameplate: false});
+          }
+          const highConfidence = res.results.find(
+            (data: { score: number }) => data.score >= 0.65,
+          );
+          if (!highConfidence) {
+            setShowAdjustInfoBasedOnConfidence(true);
+          }
+          setTimeout(() => {
+            setShowAdjustInfoBasedOnConfidence(false);
+          }, 2000);
         }
-        setTimeout(() => {
-          setShowAdjustInfoBasedOnConfidence(false);
-        }, 2000);
       });
       return;
     }, 1500),