커넥터 및 기능을 사용하여 지식 그래프 강화

나는 최근에 우리 팀의 제품 디자이너 중 한 명이 디자인한 React 웹 앱을 개발하고 있었습니다. 그녀는 각 이미지가 밝은 주황색 배경 위에 표시되는 일부 이미지 캐러셀을 특징으로 하는 깔끔한 모양의 홈 화면 디자인을 만들었습니다. 필요한 구성 요소를 작성한 후 원하는 대로 구성되지 않는다는 것을 깨달았습니다.



Answers API에서 반환된 각 이미지는 배경이 투명해야 할 때 흰색 배경을 가졌습니다. Cloudinary가 흰색 배경을 제거하는 데 사용할 수 있는 이미지 변환 API를 제공한다는 것을 알고 있었지만 내 Knowledge Graph . 이 기사에서는 Cloudinary Image Transformation API, a function plugin 및 Data Connector framework 을 사용하여 Knowledge Graph 데이터의 모든 이미지를 변환한 방법을 보여줍니다.

내 함수 플러그인 작성

내 Knowledge Graph의 모든 이미지는 투명 배경을 지원하지 않는 JPEG였습니다. 먼저 Cloudinarychained transformations를 사용하여 convert my images to PNGs을 사용한 다음 remove the white background을 사용해야 했습니다. Cloudinary 계정에 저장한 후 변환된 자산을 즉시 받기 위해 Eager Transformations을 사용하기로 했습니다.

myplugin folder structure을 생성한 후 uploadImageTransform에 mod.ts를 추가하여 변환 요청을 하고 새 URL을 반환합니다.

// Chained, eager tranformation 
const eager = "f_png,e_bgremoval";

const uploadImageAndTransform = async (
  file: string,
  public_id: string,
  signature: string,
  timestamp: number
): Promise<string> => {
  console.log(`Uploading ${public_id} to Cloudinary and transforming ${file}`);

  try {
    const response = await axiod.post(
      "https://api.cloudinary.com/v1_1/yext/image/upload",
      {
        file,
        public_id,
        api_key: CLOUDINARY_API_KEY,
        eager,
        signature,
        timestamp,
      },
      {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      }
    );

    return response.data.eager[0].url;
  } catch (error) {
    if (error.response) {
      console.error(`${error.response.status}: ${error.response.data}`);
    }
    throw error;
  }
};

Cloudinary의 변환 API는 각 요청에 대한 인증을 제공하기 위해 digital signature이 필요합니다. Cloudinary SDK를 사용하지 않기 때문에 web crypto API that is included with Deno을 사용하여 서명을 생성하는 자체 함수를 작성해야 했습니다.

const generateCloudinarySignature = async (params: string) => {
  const data = new TextEncoder().encode(params);
  const digest = await crypto.subtle.digest("sha-1", data.buffer);
  return encodeToString(new Uint8Array(digest));
};

그런 다음 데이터 커넥터가 호출할 수 있도록 removeBackground 함수를 작성했습니다. 이 함수는 '|'로 표시될 것으로 예상되는 문자열을 허용합니다. public_id는 Knowledge GraphentityId로 사용되며 url는 변환이 필요한 사진의 원래 URL입니다.

export const removeBackground = async (input: string) => {
  const timestamp = Math.floor(Date.now() / 1000);
  const [public_id, url] = input.split("|");

  const signature = await generateCloudinarySignature(
    `eager=${eager}&public_id=${public_id}&timestamp=${timestamp}${CLOUDINARY_API_SECRET}`
  );

  if (public_id && url) {
    const imageUrl = await uploadImageAndTransform(
      url,
      public_id,
      signature,
      timestamp
    );

    return imageUrl;
  }
};

test.ts에 함수를 작성하여 내 Knowledge Graph의 이미지 중 하나에 대해 변환이 작동하는지 확인했습니다.

const testInput =
  "beer_60|https://a.mktgcdn.com/p-sandbox/rrK5bxcoVAgkGckDnA7GlhyC1VOpV6eEf4KjjlFumQs/400x600.jpg";

Deno.test("test remove background", async () => {
  const newUrl = await removeBackground(testInput);
  console.log(newUrl);
});

데이터 커넥터에 함수 플러그인 적용

함수 플러그인을 Yext 계정에 업로드한 후 Knowledge Graph Entities: Get API을 사용하여 내 계정에서 엔터티를 가져오기 위한 소스로 "Pull from API"가 포함된 새 데이터 커넥터를 만들었습니다. 또한 Data Connector가 Entities API에 요청할 수 있도록 API 키를 얻기 위해 Developer Console에서 앱을 생성해야 했습니다.

선택기를 자동 생성한 다음 열 병합 변환을 적용하여 entityId 및 primaryPhoto.image.url를 변환된 이미지라는 새 열로 결합했습니다.



새 열을 가져와 내 removeBackground 함수를 적용했습니다.



마지막으로 meta.id를 다시 entityId로 매핑하여 기존 엔터티를 편집하고 있으며 기본 사진 이미지 URL을 새 URL로 대체하고 있음을 커넥터에 알렸습니다.



새로 만든 커넥터를 실행했는데 5분도 안 되어 완료되었습니다. 앱 홈 화면을 새로 고치면 흰색 배경이 사라졌습니다.

결론

변환된 이미지를 가져오고 싶을 때마다 React 애플리케이션에서 Cloudinary에 요청할 수 있는 옵션이 있었습니다. 그러나 저는 이미 Answers API를 통해 지식 정보에서 항목을 가져오고 있습니다. Cloudinary에 추가 요청을 하면 한 달을 잡아먹을 것입니다bandwidth allotment . 이것이 프로덕션 애플리케이션이라면 무료 계정 할당량을 꽤 빨리 검토할 것입니다. 이렇게 하면 커넥터 실행에서 각 이미지에 대한 초기 요청을 할 때만 리소스를 가져옵니다.

이 예제는 더 복잡한 이미지 변환을 적용하도록 확장될 수 있습니다. 추가 지식 그래프 향상을 위해 다른 API를 호출하는 별도의 함수를 업로드할 수도 있습니다.

함수here의 전체 코드를 확인하고 데이터 커넥터here에 대해 자세히 알아볼 수 있습니다.