@nyris/nyris-webapp 0.3.1 → 0.3.4

package/src/modules/LandingPage/common.scss

@@ -574,6 +574,8 @@ button {
     }
     .exampleImages {
       padding-bottom: 0px !important;
+      display: flex;
+      justify-content: center;
     }
     .useExampleImg {
       margin-top: 0px !important;
@@ -652,8 +654,13 @@ button {
     width: 100%;
     height: 100%;
     position: relative;
-    // background: #1e1f31;
-    // padding: 21px;
+    @media screen and (min-width: 2047px)  {
+      position: initial;
+      .loadingSpinCT{
+        top: 0;
+        bottom: 0;
+      }
+    }
 
     .box-content-drop {
       display: flex;
@@ -677,6 +684,9 @@ button {
       animation: gradient 15s ease infinite;
       position: relative;
       background-size: 100% 100%;
+      @media screen and (min-width: 2047px)  {
+        position: initial;
+      }
       @keyframes gradient {
         0% {
           background-position: 0% 50%;
@@ -693,6 +703,9 @@ button {
       background: #1e1f31;
       padding: 21px;
       height: 100%;
+      @media screen and (min-width: 2047px)  {
+        position: inherit;
+      }
     }
     .box-border {
       border: 2px dashed #aaabb5;
@@ -861,6 +874,9 @@ button {
       // overflow: auto;
       .box-item-result {
         max-width: 714px;
+        @media screen and (min-width: 2047px) {
+          max-width: 1300px;
+        }
         margin: 16px 0;
         // margin-right: auto !important;
         ul {

package/src/modules/LandingPage/index.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    RectCoords,
+    cadExtensions,
+    isCadFile,
+    isImageFile,
+    ImageSearchOptions,
+} from "@nyris/nyris-api";
+
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import {
+    loadCadFileLoad,
+    setSearchResults,
+    loadFileSelectRegion,
+    loadingActionRegions,
+    loadingActionResults,
+    searchFileImageNonRegion,
+} from "Store/Search";
+import {
+    feedbackNegative,
+    feedbackSubmitPositive,
+    hideFeedback,
+    showCamera,
+    showFeedback,
+    showResults,
+    showStart,
+} from "Store/Nyris";
+import { serviceImage, serviceImageNonRegion } from "services/image";
+import { findByImage } from "services/findByImage";
+import { debounce, isEmpty } from "lodash";
+import { feedbackClickEpic } from "services/Feedback";
+import AppMD from "./AppMD";
+import App from "./App";
+import {AppHandlers, AppProps} from "./propsType";
+import {defaultMdSettings} from "../../defaults";
+
+const LandingPageApp = () => {
+    const dispatch = useAppDispatch();
+    const searchState = useAppSelector((state) => state);
+    const [rectCoords, setRectCoords] = useState<any>();
+    const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
+    const [selection, setSelection] = useState<RectCoords>(defaultSelection);
+
+    const { settings, search, nyris } = searchState;
+    const {
+        fetchingRegions,
+        fetchingResults,
+        requestImage,
+        selectedRegion,
+    } = search;
+    const { showPart } = nyris;
+
+    const isDefaultRect = (r: RectCoords) => r.x1 === 0 && r.x2 === 1 && r.y1 === 0 && r.y2 === 1;
+
+    // update selection, if it is not the default one
+    useEffect(() => {
+        if (!isDefaultRect(selectedRegion)) {
+            setSelection(selectedRegion);
+        }
+    }, [selectedRegion]);
+
+
+    useEffect(() => {
+        if (isEmpty(rectCoords)) {
+            return;
+        }
+        onSearchOffersForImage(rectCoords);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rectCoords]);
+
+    const acceptTypes = ["image/*"]
+        .concat(settings.cadSearch ? cadExtensions : [])
+        .join(",");
+
+
+    function scrollTop() {
+        // TODO might require polyfill for ios and edge
+        window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+    }
+
+    const onLinkClick = (_position: number, url: string) => {
+        feedbackClickEpic(searchState, _position).catch(console.warn);
+        if (url) {
+            window.open(url);
+        }
+    };
+    // TODO: search image file home page
+    const isCheckImageFile = (file: any) => {
+        dispatch(loadingActionResults());
+        dispatch(showResults());
+        dispatch(showFeedback());
+        if (isImageFile(file) || typeof file === "string") {
+            return serviceImage(file, searchState.settings).then((res) => {
+                dispatch(setSearchResults(res));
+            });
+        }
+        if (isCadFile(file)) {
+            return dispatch(loadCadFileLoad(file));
+        }
+    };
+    //
+
+    const searchByUrl = (url: string, position?: number) => {
+        dispatch(loadingActionResults());
+        dispatch(showResults());
+        if (position) {
+            feedbackClickEpic(searchState, position);
+        }
+
+        if (settings.regions) {
+            serviceImage(url, searchState.settings).then((res) => {
+                dispatch(setSearchResults(res));
+                dispatch(showFeedback());
+            });
+        } else {
+            serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
+                dispatch(searchFileImageNonRegion(res));
+                dispatch(showFeedback());
+            });
+        }
+    };
+
+    const handlerRectCoords = debounce((value) => {
+        return setRectCoords(value);
+    }, 1200);
+
+    const debouncedSetRectCoords = useCallback(
+        (value) => handlerRectCoords(value),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    );
+
+    const onSearchOffersForImage = (r: RectCoords) => {
+        const { canvas }: any = requestImage;
+        let options: ImageSearchOptions = {
+            cropRect: r,
+        };
+        dispatch(loadingActionRegions());
+        return findByImage(canvas, options, settings).then((res) => {
+            dispatch(loadFileSelectRegion(res));
+            return dispatch(showFeedback());
+        });
+    };
+
+    const handlers : AppHandlers = {
+        onExampleImageClick: url => searchByUrl(url),
+        onCameraClick: () => dispatch(showCamera),
+        onCaptureCanceled: () => dispatch(showStart),
+        onCaptureComplete: (i) => isCheckImageFile(i),
+        onCloseFeedback: () => dispatch(hideFeedback),
+        onFileDropped: (f) => isCheckImageFile(f),
+        onImageClick: (position, url) => searchByUrl(url, position),
+        onLinkClick: onLinkClick,
+        onPositiveFeedback: () => {
+            dispatch(feedbackSubmitPositive());
+            // TODO submit positive feedback to the api
+        },
+        onNegativeFeedback: () => {
+            dispatch(feedbackNegative());
+            // TODO submit negative feedback to the api
+        },
+        onSelectFile: (f) => isCheckImageFile(f),
+        onSelectionChange: r => {
+            setSelection(r);
+            debouncedSetRectCoords(r);
+        },
+        onShowStart: () => {
+            dispatch(showStart());
+            scrollTop();
+        }
+    };
+
+    let props : AppProps = {
+        search: {
+            ...search,
+            previewSelection: selection
+        },
+        settings,
+        previewImage: search.requestImage,
+        acceptTypes,
+        showPart,
+        handlers,
+        loading: fetchingRegions || fetchingResults,
+        mdSettings: settings.themePage.materialDesign || defaultMdSettings,
+        feedbackState: nyris.feedbackState,
+
+    };
+
+    return settings.themePage.materialDesign?.active? <AppMD {...props}/> : <App {...props}/>;
+
+};
+
+export default LandingPageApp;

package/src/modules/LandingPage/indexNewVersion.tsx

@@ -14,39 +14,30 @@ import {
 } from "react-instantsearch-dom";
 import algoliasearch from "algoliasearch/lite";
 import CustomSearchBox from "components/input/inputSearch";
-import NyrisAPICT from "services/findRegionsCustom";
+import {createSessionByApi} from "../../services/session";
 
 interface Props {}
 
 function AppNewVersion(props: Props) {
-  // const searchClient = algoliasearch(appId, apiKey);
-  // const index = searchClient.initIndex(indexName);
   const dispatch = useAppDispatch();
   const history = useHistory();
   const searchState = useAppSelector((state) => state);
   const { settings, search }: any = searchState;
   const [searchStateInput, setSearchStateInput] = useState<any>({});
   const [isLoading, setLoading] = useState<boolean>(false);
-  const nyrisApi = new NyrisAPICT(settings);
   const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
   const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
   searchClient.initIndex(indexNameAlgolia);
 
   useEffect(() => {
-    const createSecssion = async () => {
-      try {
-        await nyrisApi.createSession().then((res: any) => {
-          const payload: any = {
-            sessionId: res.data.session,
-            requestId: res.data.id,
-          };
-          dispatch(setUpdateSession(payload));
-        });
-      } catch (error) {}
+    const createSession = async () => {
+      let payload = await createSessionByApi(searchState.settings);
+      dispatch(setUpdateSession(payload));
     };
 
-    createSecssion();
-  }, [dispatch, nyrisApi]);
+    createSession().catch(console.log);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const acceptTypes = ["image/*"]
     .concat(settings.cadSearch ? cadExtensions : [])
@@ -65,9 +56,10 @@ function AppNewVersion(props: Props) {
   const nonEmptyFilter: any[] = !search?.requestImage
     ? []
     : ["sku:DOES_NOT_EXIST<score=1>"];
+  // Build filter using reverse position for stable item order
   const filterSkus: any = search?.results
-    ? search?.results.map(
-        (f: any) => `sku:'${f.sku}'<score=${Math.round(100 * f.score)}>`
+    ? search?.results.slice().reverse().map(
+        (f: any, i: number) => `sku:'${f.sku}'<score=${i}>`
       )
     : "";
   const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");

package/src/modules/LandingPage/propsType.ts

@@ -0,0 +1,43 @@
+import {CategoryPrediction, Code, RectCoords, Region} from "@nyris/nyris-api";
+import {AppSettings, CanvasWithId, MDSettings} from "../../types";
+import {NyrisAppPart, NyrisFeedbackState} from "../../Store/Nyris";
+
+export interface AppHandlers {
+    onExampleImageClick: (url: string) => void;
+    onImageClick: (position: number, url: string) => void;
+    onLinkClick: (position: number, url: string) => void;
+    onFileDropped: (file: File) => void;
+    onCaptureComplete: (image: HTMLCanvasElement) => void;
+    onCaptureCanceled: () => void;
+    onSelectFile: (f: File) => void;
+    onCameraClick: () => void;
+    onShowStart: () => void;
+    onSelectionChange: (r: RectCoords) => void;
+    onPositiveFeedback: () => void;
+    onNegativeFeedback: () => void;
+    onCloseFeedback: () => void;
+}
+
+
+export interface AppProps {
+    search: {
+        results: any[];
+        requestId?: string;
+        duration?: number;
+        categoryPredictions: CategoryPrediction[];
+        codes: Code[];
+        filterOptions: string[];
+        errorMessage?: string;
+        regions: Region[];
+        previewSelection: RectCoords;
+        toastErrorMessage?: string;
+    };
+    acceptTypes: string,
+    previewImage?: CanvasWithId;
+    settings: AppSettings;
+    loading: boolean;
+    showPart: NyrisAppPart;
+    feedbackState: NyrisFeedbackState;
+    handlers: AppHandlers;
+    mdSettings: MDSettings;
+}

package/src/page/result/index.tsx

@@ -31,7 +31,7 @@ import DetailItem from "components/DetailItem";
 import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import { RectCoords } from "@nyris/nyris-api";
 import {
-  loadFile,
+  setSearchResults,
   loadingActionResults,
   searchFileImageNonRegion,
   selectionChanged,
@@ -52,9 +52,9 @@ import {
   serviceImage,
   serviceImageNonRegion,
 } from "services/image";
-import Preview from "components/preview/preview";
 import NyrisAPI from "@nyris/nyris-api";
 import LoadingScreenCustom from "components/LoadingScreen";
+import { Preview } from "@nyris/nyris-react-components";
 
 interface Props {}
 
@@ -144,7 +144,7 @@ function ResultComponent(props: Props) {
         };
         dispatch(updateResultChangePosition(payload));
         setLoading(false);
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     } else {
       serviceImageNonRegion(canvas, StateGlobal, null).then((res: any) => {
@@ -153,7 +153,7 @@ function ResultComponent(props: Props) {
           requestImage: requestImage,
         };
         dispatch(updateResultChangePosition(payload));
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     }
   };
@@ -202,17 +202,18 @@ function ResultComponent(props: Props) {
 
   // Search image with url or file
   const getUrlToCanvasFile = (url: string, position?: number) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
+    dispatch(showResults());
+    dispatch(loadingActionResults());
     if (position) {
       feedbackClickEpic(StateGlobal, position);
       return;
     }
     if (settings.regions) {
-      serviceImage(url, StateGlobal).then((res: any) => {
-        dispatch(loadFile(res));
+      serviceImage(url, settings).then((res ) => {
+        console.log("res", res)
+        dispatch(setSearchResults(res));
         setLoading(false);
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
 
       return;
@@ -256,8 +257,6 @@ function ResultComponent(props: Props) {
       )
     : "";
   const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");
-  console.log("isLoading", isLoading);
-      
   return (
     <Box className={`wrap-main-result loading`}>
       <>
@@ -284,14 +283,7 @@ function ResultComponent(props: Props) {
                 <CustomSearchBox />
               </Box>
               {/* <Box className="box-filter">
-                <FilterComponent
-                  dataFieldOne={dataFieldOne}
-                  dataFieldTow={dataFieldTow}
-                  dataFieldThree={dataFieldThree}
-                  dataFieldFour={dataFieldFour}
-                  dataFieldFive={dataFieldFive}
-                  dataFieldSix={dataFieldSix}
-                />
+                <FilterComponent />
               </Box> */}
             </div>
             <Box className="box-result">
@@ -322,13 +314,7 @@ function ResultComponent(props: Props) {
                               return;
                             }}
                             image={requestImage?.canvas}
-                            initialRegion={
-                              !selectedRegion
-                                ? regions[0]
-                                  ? regions[0]
-                                  : { x1: 0, x2: 1, y1: 0, y2: 1 }
-                                : selectedRegion
-                            }
+                            selection={selectedRegion}
                             regions={regions}
                             maxWidth={400}
                             maxHeight={500}
@@ -390,8 +376,8 @@ function ResultComponent(props: Props) {
                 results={dataResult}
                 onHandlerModalShare={() => setOpenModalShare(true)}
                 onSearchImage={(url: string) => {
-                  setLoading(true)
-                  getUrlToCanvasFile(url)
+                  setLoading(true);
+                  getUrlToCanvasFile(url);
                 }}
               />
             </DefaultModal>

package/src/services/findRegionsCustom.ts

@@ -13,200 +13,3 @@ import {
   toCanvas,
 } from "./nyris";
 
-export interface RegionData {
-  rect: {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-  };
-}
-
-interface SearchResult {
-  results: Result[];
-  requestId: string;
-  categoryPredictions: any[];
-  codes: any[];
-  duration: number;
-}
-
-export default class NyrisAPICT {
-  private readonly httpClient: AxiosInstance;
-  private readonly imageMatchingUrl: string;
-  private readonly regionProposalUrl: string;
-  private readonly responseFormat: string;
-  private imageMatchingUrlBySku: string;
-  private imageMatchingSubmitManualUrl: string;
-  private feedbackUrl: string;
-
-  constructor(private settings: SearchServiceSettings) {
-    this.httpClient = axios.create();
-    this.imageMatchingUrl =
-      this.settings.imageMatchingUrl || "https://api.nyris.io/find/v1";
-    this.imageMatchingUrlBySku =
-      this.settings.imageMatchingUrlBySku ||
-      "https://api.nyris.io/recommend/v1/";
-    this.imageMatchingSubmitManualUrl =
-      this.settings.imageMatchingSubmitManualUrl ||
-      "https://api.nyris.io/find/v1/manual/";
-    this.feedbackUrl =
-      this.settings.feedbackUrl || "https://api.nyris.io/feedback/v1/";
-    this.regionProposalUrl =
-      this.settings.regionProposalUrl ||
-      "https://api.nyris.io/find/v1/regions/";
-    this.responseFormat =
-      this.settings.responseFormat || "application/offers.nyris+json";
-  }
-
-  /**
-   * Find significant sections in the image.
-   * @param canvas Canvas, video or image to search with.
-   * @param options See [[ImageSearchOptions]].
-   * @returns A list of regions, see [[Region]].
-   */
-  async findRegions(
-    canvas: HTMLCanvasElement | HTMLVideoElement | HTMLImageElement,
-    options: ImageSearchOptions
-  ): Promise<Region[]> {
-    let [origW, origH] = getElementSize(canvas);
-    let { w: scaledW, h: scaledH } = getThumbSizeArea(
-      options.maxWidth,
-      options.maxHeight,
-      origW,
-      origH
-    );
-    let resizedCroppedCanvas = toCanvas(canvas, { w: scaledW, h: scaledH });
-    let blob = await canvasToJpgBlob(resizedCroppedCanvas, options.jpegQuality);
-
-    const headers = {
-      "Content-Type": "image/jpeg",
-      "X-Api-Key": this.settings.apiKey,
-    };
-    let response = await this.httpClient.request<any[]>({
-      method: "POST",
-      url: this.regionProposalUrl,
-      data: blob,
-      headers,
-    });
-    let regions: any[] = response.data;
-    return regions.map((r) => ({
-      className: r.className,
-      confidence: r.confidence,
-      x1: r.region.left / scaledW,
-      x2: r.region.right / scaledW,
-      y1: r.region.top / scaledH,
-      y2: r.region.bottom / scaledH,
-    }));
-  }
-
-  private async prepareImage(
-    canvas: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement,
-    options: ImageSearchOptions
-  ): Promise<{ bytes: Blob; region?: RegionData }> {
-    let [w, h] = getElementSize(canvas);
-    let crop = options.crop
-      ? options.crop
-      : {
-          x: 0,
-          y: 0,
-          w: w,
-          h: h,
-        };
-    let region: RegionData | undefined = undefined;
-    if (options.crop) {
-      region = {
-        rect: {
-          w: Math.min(1, crop.w / w),
-          h: Math.min(1, crop.h / h),
-          x: Math.min(1, crop.x / w),
-          y: Math.min(1, crop.y / h),
-        },
-      };
-    }
-    let scaledSize = getThumbSizeArea(
-      options.maxWidth,
-      options.maxHeight,
-      crop.w,
-      crop.h
-    );
-    let resizedCroppedCanvas = toCanvas(canvas, scaledSize, undefined, crop);
-    let bytes = await canvasToJpgBlob(
-      resizedCroppedCanvas,
-      options.jpegQuality
-    );
-
-    return { bytes, region };
-  }
-
-  async findByImage(
-    canvas: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement,
-    options: ImageSearchOptions
-  ): Promise<SearchResult> {
-    const image = await this.prepareImage(canvas, options);
-
-    if (this.settings.customSearchRequest)
-      return this.settings.customSearchRequest(image.bytes, this.httpClient); // TODO check if the interface is ok for hooks
-
-    let headers: any = {
-      "Content-Type": "image/jpeg",
-      "X-Api-Key": this.settings.apiKey,
-      "Accept-Language": "de,*;q=0.5",
-      Accept: this.responseFormat,
-    };
-    const xOptions = [];
-    if (this.settings.xOptions) xOptions.push(this.settings.xOptions as string);
-    if (options.useRecommendations) xOptions.push("+recommendations");
-    if (xOptions.length > 0) headers["X-Options"] = xOptions.join(" ");
-    let params = options.geoLocation
-      ? {
-          lat: options.geoLocation.lat.toString(),
-          lon: options.geoLocation.lon.toString(),
-          dist: options.geoLocation.dist.toString(),
-        }
-      : {};
-    // console.log("p", params, image.bytes);
-    let res: any = await this.httpClient.request<any>({
-      method: "POST",
-      url: this.imageMatchingUrl,
-      data: image.bytes,
-      params,
-      headers,
-      responseType: "json",
-    });
-    // console.log(res);
-    const categoryPredictions = Object.entries(
-      res.data.predicted_category || {}
-    )
-      .map(([name, score]) => ({
-        name: name,
-        score: score as number,
-      }))
-      .sort((a, b) => b.score - a.score);
-    let codes = res.data.barcodes || [];
-
-    let responseData = this.settings.responseHook
-      ? this.settings.responseHook(res.data)
-      : res.data;
-
-    let results: Result[] = responseData?.results.map(
-      (r: Result, i: number) => ({
-        ...r,
-        position: i,
-      })
-    );
-    const requestId = res.headers["x-matching-request"];
-    const duration = res.data.durationSeconds;
-    return { results, requestId, duration, categoryPredictions, codes };
-  }
-
-  async createSession(): Promise<{ data: any }> {
-    let headers: any = {
-      "X-Api-Key": this.settings.apiKey,
-    };
-    return await this.httpClient.request({
-      method: "POST",
-      url: `${this.imageMatchingUrl}/session`,
-      headers,
-    });
-  }
-}