@nyris/nyris-webapp 0.3.4 → 0.3.5

package/src/page/result/index.tsx

@@ -10,15 +10,6 @@ import React, { useEffect, useState } from "react";
 import IconWhatsApp from "common/assets/icons/Icon_whatsapp.png";
 import IconEmail from "common/assets/icons/icon_email.png";
 import IconWeChat from "common/assets/icons/Icon_wechat.png";
-// import FilterComponent from "components/FilterComponent";
-// import {
-//   dataFieldFive,
-//   dataFieldFour,
-//   dataFieldOne,
-//   dataFieldSix,
-//   dataFieldThree,
-//   dataFieldTow,
-// } from "./MockData";
 import ItemResult from "components/results/ItemResult";
 import { useAppDispatch, useAppSelector } from "Store/Store";
 import { debounce } from "lodash";
@@ -33,9 +24,8 @@ import { RectCoords } from "@nyris/nyris-api";
 import {
   setSearchResults,
   loadingActionResults,
-  searchFileImageNonRegion,
   selectionChanged,
-  updateResultChangePosition,
+  updateResultChangePosition, setRegions, setSelectedRegion,
 } from "Store/Search";
 import { showFeedback, showResults } from "Store/Nyris";
 import algoliasearch from "algoliasearch/lite";
@@ -46,37 +36,35 @@ import {
   Configure,
 } from "react-instantsearch-dom";
 import CustomSearchBox from "components/input/inputSearch";
-import { feedbackClickEpic } from "services/Feedback";
+import {feedbackClickEpic, feedbackSuccessEpic, feedbackTextSearchEpic} from "services/Feedback";
 import {
-  searchImageByPosition,
-  serviceImage,
-  serviceImageNonRegion,
+  createImage, findByImage, findRegions,
 } from "services/image";
-import NyrisAPI from "@nyris/nyris-api";
 import LoadingScreenCustom from "components/LoadingScreen";
 import { Preview } from "@nyris/nyris-react-components";
+import {AlgoliaResult, AlgoliaSettings} from "../../types";
 
 interface Props {}
 
+const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
 function ResultComponent(props: Props) {
   const dispatch = useAppDispatch();
-  const StateGlobal = useAppSelector((state) => state);
+  const stateGlobal = useAppSelector((state) => state);
   const [showColLeft, setToggleShowColLeft] = useState<boolean>(false);
   const [showImageCanvas, setShowImageCanvas] = useState<boolean>(true);
   const [isOpenModalImage, setOpenModalImage] = useState<boolean>(false);
   const [numberResult, setNumberResult] = useState<number>(0);
   const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
-  const { search, settings }: any = StateGlobal;
-  const { results, requestImage, regions, selectedRegion }: any = search;
+  const { search, settings } = stateGlobal;
+  const { results, requestImage, regions, selectedRegion } = search;
   const { valueTextSearch } = search;
   const [dataResult, setDataResult] = useState<any[]>([]);
   const [dataImageModal, setDataImageModal] = useState<any>();
   const [searchStateInput, setSearchStateInput] = useState<any>({});
-  const apiNyris = new NyrisAPI(settings);
   const [isLoading, setLoading] = useState<any>(false);
-  const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
-  const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
-  const index = searchClient.initIndex(indexNameAlgolia);
+  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
+  const searchClient = algoliasearch(appId, apiKey);
+  const index = searchClient.initIndex(indexName);
 
   useEffect(() => {
     if (!valueTextSearch) {
@@ -127,102 +115,64 @@ function ResultComponent(props: Props) {
   const handlerRectCoords = debounce((value: any) => {
     dispatch(selectionChanged(value));
     setLoading(true);
-    return onSearchOffersForImage(value);
+    return findItemsInSelection(value);
   }, 500);
 
   // TODO: Search offers for image:
-  const onSearchOffersForImage = (r: RectCoords) => {
+  const findItemsInSelection = (r: RectCoords) => {
     if (!requestImage) {
       return;
     }
     const { canvas }: any = requestImage;
-    if (settings.regions) {
-      searchImageByPosition(canvas, StateGlobal, r).then((res: any) => {
-        const payload = {
-          ...res,
-          requestImage: requestImage,
-        };
-        dispatch(updateResultChangePosition(payload));
-        setLoading(false);
-        return dispatch(showFeedback());
-      });
-    } else {
-      serviceImageNonRegion(canvas, StateGlobal, null).then((res: any) => {
-        const payload = {
-          ...res,
-          requestImage: requestImage,
-        };
-        dispatch(updateResultChangePosition(payload));
-        return dispatch(showFeedback());
-      });
-    }
+    findByImage(canvas, stateGlobal.settings, r).then((res) => {
+      const payload = {
+        ...res,
+      };
+      dispatch(updateResultChangePosition(payload));
+      setLoading(false);
+      return dispatch(showFeedback());
+    });
   };
 
   // TODO: Search text
   const searchTextByApiAndFilter = async (searchState: any) => {
     try {
       if (searchState?.query !== "") {
-        const data = await index.search(searchState.query, {});
-        const productIds = data.hits.map((hit: any) => hit.sku);
-        const eventData = {
-          query: data.query,
-          page: data.page,
-          product_ids: productIds,
-        };
-        const textSearchEvent: any = { event: "text-search", data: eventData };
-        await apiNyris.sendFeedback(
-          search?.sessionId,
-          search?.requestId,
-          textSearchEvent
-        );
+        const data = await index.search<AlgoliaResult>(searchState.query, {});
+        const productIds = data.hits.map((hit) => hit.sku);
+        await feedbackTextSearchEpic(stateGlobal, data.query, data.page, productIds);
       }
-    } catch (error: any) {
+    } catch (error) {
       console.log("searchTextByApi", error);
       return;
     }
   };
 
-  // TODO: Handler like dislike
-  const sendFeedBackAction = async (type: string) => {
-    try {
-      const action = type === "like" ? true : false;
-      const payload: any = {
-        event: "feedback",
-        data: {
-          success: action,
-        },
-      };
-      await apiNyris.sendFeedback(
-        search?.sessionId,
-        search?.requestId,
-        payload
-      );
-    } catch (error) {}
-  };
+  const sendFeedBackAction = async (type: string) =>
+    feedbackSuccessEpic(stateGlobal, type === "like");
 
   // Search image with url or file
-  const getUrlToCanvasFile = (url: string, position?: number) => {
+  const getUrlToCanvasFile = async (url: string, position?: number) => {
     dispatch(showResults());
     dispatch(loadingActionResults());
+    let image = await createImage(url);
     if (position) {
-      feedbackClickEpic(StateGlobal, position);
+      feedbackClickEpic(stateGlobal, position);
       return;
     }
+    let searchRegion : RectCoords | undefined = undefined;
     if (settings.regions) {
-      serviceImage(url, settings).then((res ) => {
-        console.log("res", res)
-        dispatch(setSearchResults(res));
-        setLoading(false);
-        return dispatch(showFeedback());
-      });
-
-      return;
-    } else {
-      serviceImageNonRegion(url, StateGlobal, undefined).then((res) => {
-        dispatch(searchFileImageNonRegion(res));
-      });
-      return;
+      let res = await findRegions(image, settings);
+      searchRegion = res.selectedRegion;
+      dispatch(setRegions(res.regions));
+      dispatch(setSelectedRegion(searchRegion));
     }
+
+    findByImage(image, settings, searchRegion).then((res ) => {
+      dispatch(setSearchResults(res));
+      setLoading(false);
+      return dispatch(showFeedback());
+    });
   };
 
   // Todo: item result.
@@ -248,12 +198,12 @@ function ResultComponent(props: Props) {
     );
   };
 
-  const nonEmptyFilter: any[] = !search?.requestImage
+  const nonEmptyFilter: any[] = !requestImage
     ? []
     : ["sku:DOES_NOT_EXIST<score=1>"];
   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 ");
@@ -268,10 +218,10 @@ function ResultComponent(props: Props) {
           </Box>
         )}
         <InstantSearch
-          indexName={indexNameAlgolia}
+          indexName={indexName}
           searchClient={searchClient}
           searchState={searchStateInput}
-          onSearchStateChange={(state: any) => {
+          onSearchStateChange={(state) => {
             setSearchStateInput(state);
             searchTextByApiAndFilter(state);
           }}
@@ -314,7 +264,7 @@ function ResultComponent(props: Props) {
                               return;
                             }}
                             image={requestImage?.canvas}
-                            selection={selectedRegion}
+                            selection={selectedRegion|| defaultSelection}
                             regions={regions}
                             maxWidth={400}
                             maxHeight={500}

package/src/services/Feedback.ts

@@ -1,65 +1,64 @@
-import NyrisAPI from "@nyris/nyris-api";
+import NyrisAPI, {FeedbackEventPayload, NyrisAPISettings, RectCoords} from "@nyris/nyris-api";
+import {RootState} from "../Store/Store";
 
-export const feedbackSuccessEpic = async (state: any, success: boolean) => {
+export const feedbackSuccessEpic = async (state: RootState, success: boolean) => {
   const { search, settings } = state;
-  try {
-    const api = new NyrisAPI(settings);
-    const sessionId = search.sessionId || search.requestId;
-    return await api.sendFeedback(sessionId, search.requestId, {
-      event: "feedback",
-      data: { success },
-    });
-  } catch (error) {
-    console.log("error feedbackSuccessEpic", error);
-  }
+  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
+    event: 'feedback',
+    data: { success }
+  });
+};
+
+export const feedbackClickEpic = async (state: RootState, position: number) => {
+  const { search, settings } = state;
+  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
+    event: "click",
+    data: { positions: [position] },
+  });
 };
 
-export const feedbackClickEpic = async (state: any, position: number) => {
+export const feedbackTextSearchEpic = async (state: RootState, query: string, page: number, productIds: string[]) => {
   try {
     const { search, settings } = state;
-    const api = new NyrisAPI(settings);
-    const sessionId = search.sessionId || search.requestId;
-    if (sessionId && state.search.requestId) {
-      await api.sendFeedback(sessionId, state.search.requestId, {
-        event: "click",
-        data: { positions: [position] },
-      });
-    }
+    const eventData = {
+      query,
+      page,
+      product_ids: productIds,
+    };
+    const textSearchEvent = { event: "text-search", data: eventData };
+    // @ts-ignore
+    return await sendFeedbackByApi(settings, search.sessionId, search.requestId, textSearchEvent);
   } catch (error) {
-    console.log("error feedbackClickEpic", feedbackClickEpic);
+    console.log("error feedbackTextSearchEpic", error);
   }
 };
 
-export const feedbackRegionEpic = async (state: any, region: any) => {
-  try {
-    const { search, settings } = state;
-    const api = new NyrisAPI(settings);
-    const sessionId = search.sessionId || search.requestId;
-    const { x1, x2, y1, y2 } = region;
-    if (sessionId && search.requestId) {
-      await api.sendFeedback(sessionId, search.requestId, {
+export const feedbackRegionEpic = async (state: RootState, region: RectCoords) => {
+  const {settings, search} = state;
+  const {sessionId, requestId } = search;
+  const { x1, x2, y1, y2 } = region;
+  const payload : FeedbackEventPayload = {
         event: "region",
-        data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } },
-      });
-    }
-  } catch (error) {
-    console.log("error feedbackRegionEpic", error);
-  }
+        data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } }
+  };
+  return await sendFeedbackByApi(settings, sessionId, requestId, payload);
 };
 
 export const sendFeedbackByApi = async (
-  settings: any,
-  sessionId: any,
-  requestId: any,
-  payload: any
+  settings: NyrisAPISettings,
+  sessionId: string | undefined,
+  requestId: string | undefined,
+  payload: FeedbackEventPayload
 ) => {
   const api = new NyrisAPI(settings);
-  try {
-    const dataByApi = await api
-      .sendFeedback(sessionId, requestId, payload)
-      .then((res) => {});
-    console.log("dataByApi", dataByApi);
-  } catch (error) {
-    console.log("error sendFeedbackByApi321", error);
+  if (sessionId && requestId) {
+    try {
+      const dataByApi = await api
+        .sendFeedback(sessionId, requestId, payload)
+        .then((res) => {});
+      console.log("dataByApi", dataByApi);
+    } catch (error) {
+      console.log("error sendFeedbackByApi321", error);
+    }
   }
 };

package/src/services/image.ts

@@ -1,107 +1,40 @@
-import {ImageSearchOptions, NyrisAPISettings, selectFirstCenteredRegion, urlOrBlobToCanvas} from "@nyris/nyris-api";
+import {
+  NyrisAPISettings,
+  RectCoords,
+  selectFirstCenteredRegion,
+  urlOrBlobToCanvas
+} from "@nyris/nyris-api";
 import NyrisAPI from "@nyris/nyris-api";
-import { fileOrBlobToCanvas, rectToCrop } from "./nyris";
+import {isEqual} from "lodash";
 
-export const serviceImage = async (file: any, settings: NyrisAPISettings) => {
-  try {
-    const nyrisApi = new NyrisAPI(settings);
-    const randomId = Math.random().toString();
+export const defaultRect = {x1: 0, x2: 1, y1: 0, y2: 1};
 
-    const image = await fileOrBlobToCanvas(file);
-    const imageFileCanvas = { canvas: image, id: randomId };
+export const createImage = async (fileOrUrl: File|string|HTMLCanvasElement) => {
+  const image = fileOrUrl instanceof HTMLCanvasElement ? fileOrUrl : await urlOrBlobToCanvas(fileOrUrl);
+  return image;
+}
 
-    const regions = await nyrisApi.findRegions(image);
-    const searchRegion = selectFirstCenteredRegion(regions, 0.3, {x1: 0, x2: 1, y1: 0, y2: 1});
+export const findRegions = async (image: HTMLCanvasElement, settings: NyrisAPISettings) => {
+  const nyrisApi = new NyrisAPI(settings);
+  let regions = await nyrisApi.findRegions(image);
 
-    let options : ImageSearchOptions = {
-      ...settings,
-      cropRect: searchRegion
-    };
-
-    const { results, requestId, duration, categoryPredictions, codes } =
-      await nyrisApi.findByImage(image, options);
-    const payload = {
-      results,
-      requestId,
-      categoryPredictions,
-      codes,
-      duration,
-      regions,
-      requestImage: imageFileCanvas,
-      selectedRegion: searchRegion
-    };
-
-    return payload;
-  } catch (error) {
-    console.log("error serviceImage", error);
-    return;
+  const selectedRegion = selectFirstCenteredRegion(regions, 0.3, defaultRect);
+  return {
+    selectedRegion: isEqual(selectedRegion, defaultRect) ? undefined : selectedRegion,
+    regions
   }
 };
 
-export const serviceImageNonRegion = async (
-  file: any,
-  stateStore: any,
-  rectCoords: any
-) => {
-  const { settings } = stateStore;
-  const api = new NyrisAPI(settings);
-  const image = await urlOrBlobToCanvas(file);
-  const randomId = Math.random().toString();
-  const imageFileCanvas = { canvas: image, id: randomId };
-  let options: ImageSearchOptions = {
-    cropRect: rectCoords,
-  };
-  try {
-    const { results, duration, requestId, categoryPredictions, codes } =
-      await api.findByImage(image, options);
-    return {
-      results,
-      requestId,
-      duration,
-      categoryPredictions,
-      codes,
-      requestImage: imageFileCanvas,
-    };
-  } catch (e) {
-    console.warn("search failed serviceImageNonRegion", e);
+export const findByImage = (image: HTMLCanvasElement, settings: NyrisAPISettings, region?: RectCoords) => {
+  const nyrisApi = new NyrisAPI(settings);
+  let options = {};
+  if (region) {
+    options = { cropRect: region };
   }
+  return nyrisApi.findByImage(image, options);
 };
 
-export const searchImageByPosition = async (
-  image: HTMLCanvasElement,
-  stateStore: any,
-  region?: any
-) => {
-  try {
-    const { settings } = stateStore;
-
-    let options = settings;
-    const nyrisApi = new NyrisAPI(settings);
-    if (region) {
-      let { x1, x2, y1, y2 } = region;
-      let crop = rectToCrop({
-        x1: x1 * image.width,
-        x2: x2 * image.width,
-        y1: y1 * image.height,
-        y2: y2 * image.height,
-      });
-      options = {
-        ...options,
-        crop,
-      };
-    }
-    const { results, duration, requestId, categoryPredictions, codes } =
-      await nyrisApi.findByImage(image, options);
-    const payload = {
-      results,
-      requestId,
-      categoryPredictions,
-      codes,
-      duration,
-      regions: region,
-    };
-    return payload;
-  } catch (error: any) {
-    console.log("error searchImageByPosition", error);
-  }
+export const findByCadFile = (file: File, settings: NyrisAPISettings) => {
+  const nyrisApi = new NyrisAPI(settings);
+  return nyrisApi.findByCad(file, {});
 };

package/src/services/session.ts

@@ -5,16 +5,13 @@ const httpClient = axios.create();
 
 export const createSessionByApi = async (settings: NyrisAPISettings) => {
   const { apiKey, baseUrl} = settings;
-  try {
-    let headers: any = {
-      "X-Api-Key": apiKey,
-    };
-    return await httpClient.request({
-      method: "POST",
-      url: `${baseUrl}/find/v1/session`,
-      headers,
-    });
-  } catch (error: any) {
-    console.log("error createAction:", error);
-  }
+  let headers = {
+    "X-Api-Key": apiKey,
+  };
+  let response = await httpClient.request({
+    method: "POST",
+    url: `${baseUrl}/find/v1/session`,
+    headers,
+  });
+  return response.data.session;
 };

package/src/services/types.ts

@@ -27,27 +27,6 @@ export interface SearchServiceSettings {
     useRecommendations: boolean
 }
 
-export interface ImageSearchOptions {
-    geoLocation?: { lat: number, lon: number, dist: number };
-    crop?: { x: number, y: number, w: number, h: number };
-    maxWidth: number;
-    maxHeight: number;
-    useRecommendations: boolean;
-    jpegQuality: number;
-}
-
-export interface RectCoords {
-    x1: number,
-    y1: number,
-    x2: number,
-    y2: number
-}
-
-export type Region = {
-    className?: string,
-    confidence?: number
-} & RectCoords
-
 export interface Crop {
     x: number,
     y: number,
@@ -60,23 +39,12 @@ export interface WH {
     h: number
 }
 
-// export type AppState = {
-//     search: SearchState,
-//     settings: SearchServiceSettings,
-//     nyrisDesign: NyrisAppState
-// };
-
-// export type AppAction =
-//     | SearchAction
-//     | NyrisAction
-
-
 export interface Result {
     position: number,
     sku?: string,
     title?: string,
     l?: string,
     img?: { url?: string },
-    // There can be also any other ddata
+    // There can be also any other data
     [x: string]: any
 }

package/src/types.ts

@@ -1,7 +1,6 @@
 import {NyrisAPISettings} from "@nyris/nyris-api";
-import { NyrisAction } from "Store/common";
 import { NyrisAppState } from "Store/Nyris";
-import { SearchAction, SearchState } from "Store/Search";
+import { SearchState } from "Store/Search";
 
 export interface MDSettings {
     customFontFamily?: string,
@@ -21,6 +20,12 @@ export interface MDSettings {
     active?: boolean
 }
 
+export interface AlgoliaSettings {
+    apiKey: string,
+    appId: string,
+    indexName: string
+}
+
 export interface AppSettings extends NyrisAPISettings {
     exampleImages: string[],
     preview: boolean,
@@ -29,7 +34,8 @@ export interface AppSettings extends NyrisAPISettings {
     resultTemplate?: string,
     regions: boolean,
     instantRedirectPatterns: string[],
-    themePage: ThemeChoice
+    themePage: ThemeChoice,
+    algolia?: AlgoliaSettings
 }
 
 export interface DefaultThemeSettings  {
@@ -52,10 +58,6 @@ export type AppState = {
     nyrisDesign: NyrisAppState
 };
 
-export type AppAction =
-    | SearchAction
-    | NyrisAction
-
 export interface CanvasWithId {
     canvas: HTMLCanvasElement
     id: string
@@ -84,3 +86,6 @@ export interface SearchServiceSettings {
     useRecommendations: boolean
 }
 
+export interface AlgoliaResult {
+    sku: string
+}