@nyris/nyris-webapp 0.3.3 → 0.3.6

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

package/src/services/image.ts

@@ -1,110 +0,0 @@
-import { ImageSearchOptions, urlOrBlobToCanvas } from "@nyris/nyris-api";
-import NyrisAPICT from "./findRegionsCustom";
-import NyrisAPI from "@nyris/nyris-api";
-import { fileOrBlobToCanvas, rectToCrop } from "./nyris";
-
-export const serviceImage = async (file: any, stateStore: any) => {
-  try {
-    const { settings } = stateStore;
-    let options = settings;
-    const nyrisApi = new NyrisAPICT(settings);
-    const randomId = Math.random().toString();
-
-    const image: any = await fileOrBlobToCanvas(file);
-    const imageFileCanvas = { canvas: image, id: randomId };
-
-    const searchServiceSettings: any = {
-      ...settings,
-      responseHook: (r: any) => ({ offerInfos: r.results }),
-    };
-
-    const regions: any = await nyrisApi.findRegions(
-      image,
-      searchServiceSettings
-    );
-    const { results, requestId, duration, categoryPredictions, codes } =
-      await nyrisApi.findByImage(image, options);
-    const payload = {
-      results,
-      requestId,
-      categoryPredictions,
-      codes,
-      duration,
-      regions,
-      requestImage: imageFileCanvas,
-    };
-
-    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 NyrisAPICT(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);
-  }
-};

package/src/services/nyris.ts

@@ -1,123 +0,0 @@
-import loadImage from "blueimp-load-image";
-import { Crop, WH } from "./types";
-
-export function getElementSize(
-  elem: HTMLImageElement | HTMLVideoElement | HTMLCanvasElement
-) {
-  const img = elem as HTMLImageElement;
-  const video = elem as HTMLVideoElement;
-  return [
-    img.naturalWidth || video.videoWidth || elem.width,
-    img.naturalHeight || video.videoHeight || elem.height,
-  ];
-}
-
-export function getThumbSizeArea(
-  maxWidth: number,
-  maxHeight: number,
-  originalWidth: number,
-  originalHeight: number
-): WH {
-  const targetArea = maxWidth * maxHeight;
-
-  const aspectRatio = originalWidth / originalHeight;
-  const width = Math.sqrt(targetArea * aspectRatio);
-  return {
-    w: width,
-    h: width / aspectRatio,
-  };
-}
-
-// TODO get rid of crop type
-export function toCanvas(
-  elem: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement,
-  newSize?: WH,
-  canvas?: HTMLCanvasElement,
-  crop?: Crop
-): HTMLCanvasElement {
-  let [ow, oh] = getElementSize(elem);
-  if (!crop) {
-    crop = {
-      x: 0,
-      y: 0,
-      w: ow,
-      h: oh,
-    };
-  }
-  const sx = crop.x;
-  const sy = crop.y;
-  const sw = crop.w;
-  const sh = crop.h;
-
-  const dw = (newSize && newSize.w) || ow;
-  const dh = (newSize && newSize.h) || oh;
-
-  if (!canvas) canvas = document.createElement("canvas");
-
-  canvas.width = dw;
-  canvas.height = dh;
-  // @ts-ignore
-  canvas.getContext("2d").drawImage(
-    elem,
-    sx,
-    sy,
-    sw,
-    sh,
-    0,
-    0, // dx dy
-    dw,
-    dh
-  );
-  return canvas;
-}
-
-export function canvasToJpgBlob(
-  canvas: HTMLCanvasElement,
-  quality: number
-): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (blob) => {
-        if (blob) {
-          resolve(blob);
-        } else {
-          reject();
-        }
-      },
-      "image/jpeg",
-      quality
-    );
-  });
-}
-
-export const rectToCrop = ({ x1, x2, y1, y2 }: any): Crop => ({
-  x: x1,
-  y: y1,
-  w: x2 - x1,
-  h: y2 - y1,
-});
-
-export function fileOrBlobToCanvas(
-  file: File | string
-): Promise<HTMLCanvasElement> {
-  return new Promise((resolve, reject) => {
-    // File can also be an image element
-    loadImage(
-      file,
-      (data) => {
-        const c = data as HTMLCanvasElement;
-        if (c) {
-          resolve(c);
-        } else {
-          reject();
-        }
-      },
-      {
-        canvas: true,
-        orientation: true,
-        crossOrigin: "anonymous",
-      }
-    );
-    
-  });
-}

package/src/services/session.ts

@@ -1,20 +0,0 @@
-import NyrisAPI from "@nyris/nyris-api";
-import axios, { AxiosInstance } from "axios";
-
-const httpClient = axios.create();
-
-export const createSessionByApi = async (state: any) => {
-  const { search, settings } = state;
-  try {
-    let headers: any = {
-      "X-Api-Key": settings.apiKey,
-    };
-    return await httpClient.request({
-      method: "POST",
-      url: `${settings.imageMatchingUrl}/session`,
-      headers,
-    });
-  } catch (error: any) {
-    console.log("error createAction:", error);
-  }
-};

package/src/services/types.ts

@@ -1,96 +0,0 @@
-// import {SearchAction, SearchState} from "./actions/searchActions";
-// import {NyrisAction, NyrisAppState} from "./actions/nyrisAppActions";
-
-export interface MDSettings {
-    customFontFamily?: string,
-
-    appBarLogoUrl: string,
-    appBarTitle: string,
-    appBarCustomBackgroundColor?: string,
-    appBarCustomTextColor?: string,
-
-    primaryColor: string,
-    secondaryColor: string,
-    resultFirstRowProperty: string,
-    resultSecondRowProperty: string,
-
-    resultLinkText?: string,
-    resultLinkIcon?: string,
-}
-
-export interface SearchServiceSettings {
-    xOptions: boolean | string,
-    customSearchRequest?: ((file: Blob, client: any) => Promise<any>),
-    responseHook?: ((response: any) => any),
-    apiKey: string,
-    imageMatchingUrl?: string,
-    imageMatchingUrlBySku?: string,
-    imageMatchingSubmitManualUrl?: string,
-    regionProposalUrl?: string,
-    responseFormat?: string,
-    feedbackUrl?: string,
-    exampleImages: string[],
-    resultTemplate?: string,
-    noImageUrl?: string,
-    materialDesign?: MDSettings,
-    preview: boolean,
-    regions: boolean,
-    jpegQuality: number,
-    maxWidth: number,
-    maxHeight: number,
-    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,
-    w: number,
-    h: number
-}
-
-export interface WH {
-    w: number,
-    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
-    [x: string]: any
-}