@nyris/nyris-webapp 0.3.4 → 0.3.9

package/src/page/result/index.tsx

@@ -1,468 +0,0 @@
-import {
-  Box,
-  Button,
-  IconButton,
-  InputBase,
-  Paper,
-  Typography,
-} from "@material-ui/core";
-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";
-import KeyboardArrowRightOutlinedIcon from "@material-ui/icons/KeyboardArrowRightOutlined";
-import KeyboardArrowLeftOutlinedIcon from "@material-ui/icons/KeyboardArrowLeftOutlined";
-import FooterResult from "components/FooterResult";
-import DefaultModal from "components/modal/DefaultModal";
-import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
-import DetailItem from "components/DetailItem";
-import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
-import { RectCoords } from "@nyris/nyris-api";
-import {
-  setSearchResults,
-  loadingActionResults,
-  searchFileImageNonRegion,
-  selectionChanged,
-  updateResultChangePosition,
-} from "Store/Search";
-import { showFeedback, showResults } from "Store/Nyris";
-import algoliasearch from "algoliasearch/lite";
-import {
-  InstantSearch,
-  Hits,
-  Pagination,
-  Configure,
-} from "react-instantsearch-dom";
-import CustomSearchBox from "components/input/inputSearch";
-import { feedbackClickEpic } from "services/Feedback";
-import {
-  searchImageByPosition,
-  serviceImage,
-  serviceImageNonRegion,
-} from "services/image";
-import NyrisAPI from "@nyris/nyris-api";
-import LoadingScreenCustom from "components/LoadingScreen";
-import { Preview } from "@nyris/nyris-react-components";
-
-interface Props {}
-
-function ResultComponent(props: Props) {
-  const dispatch = useAppDispatch();
-  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 { 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);
-
-  useEffect(() => {
-    if (!valueTextSearch) {
-      return;
-    }
-    setSearchStateInput(valueTextSearch);
-  }, [valueTextSearch]);
-
-  useEffect(() => {
-    if (results?.length === 0) {
-      setDataResult([]);
-      return;
-    }
-    setDataResult(results);
-  }, [results]);
-
-  useEffect(() => {
-    if (!showColLeft) {
-      return setShowImageCanvas(true);
-    }
-    return setShowImageCanvas(false);
-  }, [showColLeft]);
-
-  // TODO: hanlder modal:
-  const handlerToggleModal = (item: any) => {
-    setDataImageModal(item);
-    return setOpenModalImage(true);
-  };
-
-  const onNextItem = () => {
-    if (numberResult === results.length) {
-      return;
-    }
-    setNumberResult(numberResult + 1);
-  };
-
-  const onPrevItem = () => {
-    if (numberResult === 0) {
-      return;
-    }
-    setNumberResult(numberResult - 1);
-  };
-
-  // TODO: rectCoords
-
-  const debounceRectCoords = (value: any) => handlerRectCoords(value);
-
-  const handlerRectCoords = debounce((value: any) => {
-    dispatch(selectionChanged(value));
-    setLoading(true);
-    return onSearchOffersForImage(value);
-  }, 500);
-
-  // TODO: Search offers for image:
-  const onSearchOffersForImage = (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());
-      });
-    }
-  };
-
-  // 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
-        );
-      }
-    } catch (error: any) {
-      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) {}
-  };
-
-  // Search image with url or file
-  const getUrlToCanvasFile = (url: string, position?: number) => {
-    dispatch(showResults());
-    dispatch(loadingActionResults());
-    if (position) {
-      feedbackClickEpic(StateGlobal, position);
-      return;
-    }
-    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;
-    }
-  };
-
-  // Todo: item result.
-  const Hit = (hit: any) => {
-    return (
-      <ItemResult
-        dataItem={hit?.hit}
-        handlerToggleModal={() => {
-          handlerToggleModal(hit?.hit);
-        }}
-        handlerToggleModalShare={() => setOpenModalShare(true)}
-        indexItem={hit.__position}
-        isHover={false}
-        onSearchImage={(url: any) => {
-          setSearchStateInput({});
-          getUrlToCanvasFile(url);
-          setLoading(true);
-        }}
-        handlerFeedback={(value: string) => {
-          sendFeedBackAction(value);
-        }}
-      />
-    );
-  };
-
-  const nonEmptyFilter: any[] = !search?.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)}>`
-      )
-    : "";
-  const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");
-  return (
-    <Box className={`wrap-main-result loading`}>
-      <>
-        {isLoading && (
-          <Box className="box-wrap-loading">
-            <Box className="loadingSpinCT">
-              <Box className="box-content-spin"></Box>
-            </Box>
-          </Box>
-        )}
-        <InstantSearch
-          indexName={indexNameAlgolia}
-          searchClient={searchClient}
-          searchState={searchStateInput}
-          onSearchStateChange={(state: any) => {
-            setSearchStateInput(state);
-            searchTextByApiAndFilter(state);
-          }}
-        >
-          <Configure filters={filtersString}></Configure>
-          <Box className="box-wrap-result-component">
-            <div className="box-search">
-              <Box>
-                <CustomSearchBox />
-              </Box>
-              {/* <Box className="box-filter">
-                <FilterComponent />
-              </Box> */}
-            </div>
-            <Box className="box-result">
-              <>
-                {settings.preview && requestImage && (
-                  <Box className={`col-left ${showColLeft && "toggle"}`}>
-                    <Box className="box-preview">
-                      <Button
-                        className="button-toggle"
-                        onClick={() => {
-                          setTimeout(() => {
-                            setToggleShowColLeft(!showColLeft);
-                          }, 500);
-                        }}
-                      >
-                        {showColLeft ? (
-                          <KeyboardArrowRightOutlinedIcon />
-                        ) : (
-                          <KeyboardArrowLeftOutlinedIcon />
-                        )}
-                      </Button>
-                      {requestImage && showImageCanvas && (
-                        <Box className="preview-item">
-                          <Preview
-                            key={requestImage?.id}
-                            onSelectionChange={(r: RectCoords) => {
-                              debounceRectCoords(r);
-                              return;
-                            }}
-                            image={requestImage?.canvas}
-                            selection={selectedRegion}
-                            regions={regions}
-                            maxWidth={400}
-                            maxHeight={500}
-                            dotColor="#FBD914"
-                          />
-                        </Box>
-                      )}
-                    </Box>
-                    <Box className="box-title_col-left">
-                      <Typography style={{ fontSize: 11, color: "#fff" }}>
-                        Adjust the selection frame for better results.
-                      </Typography>
-                    </Box>
-                  </Box>
-                )}
-
-                <Box
-                  className={`col-right ${
-                    settings.preview && "ml-auto mr-auto"
-                  }`}
-                >
-                  <Box
-                    className={`box-item-result ${
-                      requestImage && showImageCanvas
-                        ? "mr-auto"
-                        : "ml-auto mr-auto"
-                    }`}
-                  >
-                    <LoadingScreenCustom>
-                      <Hits hitComponent={Hit} />
-                    </LoadingScreenCustom>
-                  </Box>
-                </Box>
-              </>
-            </Box>
-            <Box>
-              <Box className="box-panigation">
-                <Pagination />
-              </Box>
-              <Box className="box-notify">
-                <FooterResult search={search} />
-              </Box>
-            </Box>
-
-            {/* TODO: Component modal image */}
-            <DefaultModal
-              openModal={isOpenModalImage}
-              handleClose={(e: any) => {
-                setOpenModalImage(false);
-              }}
-            >
-              <DetailItem
-                handlerCloseModal={() => {
-                  setOpenModalImage(false);
-                }}
-                onPrevItem={onPrevItem}
-                onNextItem={onNextItem}
-                dataItem={dataImageModal}
-                results={dataResult}
-                onHandlerModalShare={() => setOpenModalShare(true)}
-                onSearchImage={(url: string) => {
-                  setLoading(true);
-                  getUrlToCanvasFile(url);
-                }}
-              />
-            </DefaultModal>
-
-            {/* TODO: Component modal share */}
-            <DefaultModal
-              openModal={isOpenModalShare}
-              handleClose={() => setOpenModalShare(false)}
-            >
-              <Box className="box-modal-default box-modal-share">
-                <Box
-                  className="ml-auto"
-                  style={{ width: "fit-content", marginRight: 5 }}
-                >
-                  <Button
-                    style={{ padding: 0 }}
-                    onClick={() => setOpenModalShare(false)}
-                  >
-                    <CloseOutlinedIcon
-                      style={{ fontSize: 12, color: "#55566B" }}
-                    />
-                  </Button>
-                </Box>
-                <Box className="box-content-box-share">
-                  <Typography className="text-f12 text-gray text-bold">
-                    Share
-                  </Typography>
-                  <Paper component="form" className="box-input">
-                    <InputBase
-                      className="text-f9 text-gray"
-                      style={{ width: "100%" }}
-                      value={"https://www.go..."}
-                    />
-                    <IconButton
-                      color="secondary"
-                      aria-label="directions"
-                      style={{ padding: 0 }}
-                    >
-                      <FileCopyOutlinedIcon style={{ fontSize: 8 }} />
-                    </IconButton>
-                  </Paper>
-
-                  <Box mt={1} className="box-media-share">
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconEmail} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with e-Mail
-                        </Typography>
-                      </Box>
-                    </Button>
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconWhatsApp} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with WhatsApp
-                        </Typography>
-                      </Box>
-                    </Button>
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconWeChat} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with WeChat
-                        </Typography>
-                      </Box>
-                    </Button>
-                  </Box>
-                </Box>
-              </Box>
-            </DefaultModal>
-          </Box>
-        </InstantSearch>
-      </>
-    </Box>
-  );
-}
-
-export default ResultComponent;

package/src/services/Feedback.ts

@@ -1,65 +0,0 @@
-import NyrisAPI from "@nyris/nyris-api";
-
-export const feedbackSuccessEpic = async (state: any, 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);
-  }
-};
-
-export const feedbackClickEpic = async (state: any, position: number) => {
-  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] },
-      });
-    }
-  } catch (error) {
-    console.log("error feedbackClickEpic", feedbackClickEpic);
-  }
-};
-
-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, {
-        event: "region",
-        data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } },
-      });
-    }
-  } catch (error) {
-    console.log("error feedbackRegionEpic", error);
-  }
-};
-
-export const sendFeedbackByApi = async (
-  settings: any,
-  sessionId: any,
-  requestId: any,
-  payload: any
-) => {
-  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);
-  }
-};

package/src/services/findByImage.ts

@@ -1,24 +0,0 @@
-import NyrisAPI from "@nyris/nyris-api";
-
-export const findByImage = async (image: any, options: any, settings: any) => {
-  
-  try {
-    const api = new NyrisAPI(settings);
-    const {
-      results,
-      duration,
-      requestId,
-      categoryPredictions,
-      codes,
-    } = await api.findByImage(image, options);
-    return {
-      results,
-      duration,
-      requestId,
-      categoryPredictions,
-      codes,
-    };
-  } catch (error) {
-    console.log("error findByImage", error);
-  }
-};

package/src/services/findRegionsCustom.ts

@@ -1,15 +0,0 @@
-import {
-  ImageSearchOptions,
-  Region,
-  Result,
-  SearchServiceSettings,
-} from "./types";
-// import {canvasToJpgBlob, getElementSize, getThumbSizeArea, toCanvas} from "./nyris";
-import axios, { AxiosInstance } from "axios";
-import {
-  canvasToJpgBlob,
-  getElementSize,
-  getThumbSizeArea,
-  toCanvas,
-} from "./nyris";
-

package/src/services/image.ts

@@ -1,107 +0,0 @@
-import {ImageSearchOptions, NyrisAPISettings, selectFirstCenteredRegion, urlOrBlobToCanvas} from "@nyris/nyris-api";
-import NyrisAPI from "@nyris/nyris-api";
-import { fileOrBlobToCanvas, rectToCrop } from "./nyris";
-
-export const serviceImage = async (file: any, settings: NyrisAPISettings) => {
-  try {
-    const nyrisApi = new NyrisAPI(settings);
-    const randomId = Math.random().toString();
-
-    const image = await fileOrBlobToCanvas(file);
-    const imageFileCanvas = { canvas: image, id: randomId };
-
-    const regions = await nyrisApi.findRegions(image);
-    const searchRegion = selectFirstCenteredRegion(regions, 0.3, {x1: 0, x2: 1, y1: 0, y2: 1});
-
-    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;
-  }
-};
-
-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 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);
-  }
-};