asset compute 메타데이터 작업자 개발

사용자 지정 Asset compute 작업자는 AEM으로 다시 전송되고 자산에 메타데이터로 저장되는 XMP (XML) 데이터를 생성할 수 있습니다.

일반적인 사용 사례는 다음과 같습니다.

  • 추가 메타데이터를 검색하고 자산에 저장해야 하는 PIM(제품 정보 관리 시스템)과 같은 타사 시스템과의 통합
  • 컨텐츠 및 Commerce AI와 같은 Adobe 서비스와 통합하여 추가 머신 러닝 속성으로 에셋 메타데이터를 증가시킵니다
  • 바이너리에서 에셋에 대한 메타데이터를 파생하고 AEM as a Cloud Service으로 에셋 메타데이터로 저장

수행할 작업

이 자습서에서는 이미지 에셋에서 가장 일반적으로 사용되는 색상을 파생하고 색상 이름을 AEM의 에셋 메타데이터에 다시 작성하는 Asset compute 메타데이터 작업자를 만듭니다. 작업자 자체는 기본이지만 이 자습서에서는 Asset compute 작업자를 사용하여 AEMas a Cloud Service 로 에셋에 메타데이터를 다시 쓰는 방법을 살펴봅니다.

asset compute 메타데이터 작업자 호출의 논리 흐름

asset compute 메타데이터 작업자의 호출은 의 호출과 거의 동일합니다 바이너리 렌디션 생성 작업자를 사용하는 경우, 기본 차이점은 반환 유형이 XMP(XML) 렌디션이며, 이 렌디션의 값도 에셋의 메타데이터에 기록됩니다.

Asset compute 작업자는 Asset compute SDK 작업자 API 계약을 renditionCallback(...) 함수(개념적으로 정의됨):

  • 입력: AEM 자산의 원본 이진 및 처리 프로필 매개 변수
  • 출력: AEM 에셋 및 에셋의 메타데이터로 지속되는 XMP(XML) 렌디션

Asset compute 메타데이터 작업자 논리 흐름

  1. AEM Author 서비스는 Asset compute 메타데이터 작업자를 호출하여 (1a) 원본 이진 및 (1b) 처리 프로필에 정의된 모든 매개 변수.
  2. asset compute SDK는 사용자 지정 Asset compute 메타데이터 작업자의 실행을 조정합니다. renditionCallback(...) 함수, 자산의 바이너리를 기반으로 XMP(XML) 렌디션 가져오기 (1a) 및 모든 처리 프로필 매개 변수 (1b).
  3. asset compute 작업자는 XMP(XML) 표현을에 저장합니다. rendition.path.
  4. 에 작성된 XMP (XML) 데이터 rendition.path 는 Asset compute SDK를 통해 AEM Author 서비스로 전송되고 다음으로 노출됩니다. (4a) 텍스트 렌디션 및 (4b) 에셋의 메타데이터 노드로 지속됨

manifest.yml 구성 manifest

모든 Asset compute 작업자는 manifest.yml.

프로젝트의 을 엽니다. manifest.yml 이 경우 새 작업자를 구성하는 작업자 항목을 추가합니다. metadata-colors.

기억 .yml 은(는) 공백에 민감합니다.

packages:
  __APP_PACKAGE__:
    license: Apache-2.0
    actions:
      worker:
        function: actions/worker/index.js
        web: 'yes'
        runtime: 'nodejs:12'
        limits:
          timeout: 60000 # in ms
          memorySize: 512 # in MB
          concurrency: 10
        annotations:
          require-adobe-auth: true
      metadata-colors:
        function: actions/metadata-colors/index.js
        web: 'yes'
        runtime: 'nodejs:12'
        limits:
          memorySize: 512 # in MB

function 에서 생성된 작업자 구현을 가리킵니다. 다음 단계. 의미상 작업자 이름 지정(예: actions/worker/index.js 이름이 더 나았을 수도 있습니다. actions/rendition-circle/index.js)을 클릭하여 제품에서 작업자 URL 및 다음을 확인합니다. 작업자의 테스트 세트 폴더 이름.

다음 limitsrequire-adobe-auth 작업자마다 개별적으로 구성됩니다. 이 일꾼에서 512 MB 코드가 (잠재적으로) 큰 바이너리 이미지 데이터를 검사함에 따라 메모리 중 일부가 할당됩니다. 기타 limits 을 제거하여 기본값을 사용합니다.

메타데이터 작업자 개발 metadata-worker

경로의 Asset compute 프로젝트에서 새 메타데이터 작업자 JavaScript 파일을 만듭니다. 새 작업자에 대해 정의된 manifest.yml, /actions/metadata-colors/index.js

npm 모듈 설치

추가 npm 모듈(@adobe/asset-compute-xmp, get-image-color, 및 색상 이름) 이 Asset compute 작업자에 사용됩니다.

$ npm install @adobe/asset-compute-xmp
$ npm install get-image-colors
$ npm install color-namer

메타데이터 작업자 코드

이 작업자는 다음과 매우 유사합니다 렌디션 생성 작업자, 주요 차이점은 XMP (XML) 데이터를 rendition.path AEM에 다시 저장하는 방법을 설명합니다.

"use strict";

const { worker, SourceCorruptError } = require("@adobe/asset-compute-sdk");
const fs = require("fs").promises;

// Require the @adobe/asset-compute-xmp module to create XMP
const { serializeXmp } = require("@adobe/asset-compute-xmp");

// Require supporting npm modules to derive image colors from image data
const getColors = require("get-image-colors");
// Require supporting npm modules to convert image colors to color names
const namer = require("color-namer");

exports.main = worker(async (source, rendition, params) => {
  // Perform any necessary source (input) checks
  const stats = await fs.stat(source.path);
  if (stats.size === 0) {
    // Throw appropriate errors whenever an erring condition is met
    throw new SourceCorruptError("source file is empty");
  }
  const MAX_COLORS = 10;
  const DEFAULT_COLORS_FAMILY = 'basic';

  // Read the color family parameter to use to derive the color names
  let colorsFamily = rendition.instructions.colorsFamily || DEFAULT_COLORS_FAMILY;

  if (['basic', 'hex', 'html', 'ntc', 'pantone', 'roygbiv'].indexOf(colorsFamily) === -1) {
      colorsFamily = DEFAULT_COLORS_FAMILY;
  }

  // Use the `get-image-colors` module to derive the most common colors from the image
  let colors = await getColors(source.path, { options: MAX_COLORS });

  // Convert the color Chroma objects to their closest names
  let colorNames = colors.map((color) => getColorName(colorsFamily, color));

  // Serialize the data to XMP metadata
  // These properties are written to the [dam:Asset]/jcr:content/metadata resource
  // This stores
  // - The list of color names is stored in a JCR property named `wknd:colors`
  // - The colors family used to derive the color names is stored in a JCR property named `wknd:colorsFamily`
  const xmp = serializeXmp({
      // Use a Set to de-duplicate color names
      "wknd:colors": [...new Set(colorNames)],
      "wknd:colorsFamily": colorsFamily
    }, {
      // Define any property namespaces used in the above property/value definition
      // These namespaces are automatically registered in AEM if they do not yet exist
      namespaces: {
        wknd: "https://wknd.site/assets/1.0/",
      },
    }
  );

  // Save the XMP metadata to be written back to the asset's metadata node
  await fs.writeFile(rendition.path, xmp, "utf-8");
});

/**
 * Helper function that derives the closest color name for the color, based on the colors family
 *
 * @param {*} colorsFamily the colors name family to use
 * @param {*} color the color to convert to a name
 */
function getColorName(colorsFamily, color) {
    if ('hex' === colorsFamily) {  return color; }

    let names = namer(color.rgb())[colorsFamily];

    if (names.length >= 1) { return names[0].name; }
}

로컬에서 메타데이터 작업자 실행 development-tool

작업자 코드가 완료되면 로컬 Asset compute 개발 도구를 사용하여 실행할 수 있습니다.

왜냐하면 Asset compute 프로젝트에는 두 명의 작업자(이전 서클 렌디션 및 이 metadata-colors 작업자), Asset compute 개발 도구 프로필 정의는 두 작업자의 실행 프로필을 나열합니다. 두 번째 프로필 정의는 새로운 을 가리킵니다 metadata-colors 일꾼.

XML 메타데이터 렌디션

  1. asset compute 프로젝트의 루트에서

  2. 실행 aio app run asset compute 개발 도구를 시작하려면

  3. 다음에서 파일 선택… 드롭다운에서 선택 샘플 이미지 처리 중

  4. 두 번째 프로필 정의 구성에서 다음을 가리킵니다 metadata-colors 작업자, 업데이트 "name": "rendition.xml" 이 작업자는 XMP(XML) 렌디션을 생성합니다. 필요한 경우 colorsFamily 매개 변수(지원되는 값) basic, hex, html, ntc, pantone, roygbiv).

    code language-json
    {
        "renditions": [
            {
                "worker": "...",
                "name": "rendition.xml",
                "colorsFamily": "pantone"
            }
        ]
    }
    
  5. 누르기 실행 XML 렌디션이 생성될 때까지 대기

    • 두 작업자가 모두 프로필 정의에 나열되므로 두 표현물이 모두 생성됩니다. 필요한 경우 맨 위 프로필 정의는 서클 렌디션 작업자 를 삭제하여 개발 도구에서 실행하지 않도록 할 수 있습니다.
  6. 다음 표현물 섹션은 생성된 렌디션을 미리 봅니다. 탭 rendition.xml 를 다운로드하고 VS 코드(또는 즐겨 사용하는 XML/텍스트 편집기)에서 열어 검토합니다.

작업자 테스트 test

메타데이터 작업자는 다음을 사용하여 테스트할 수 있습니다 바이너리 변환과 동일한 Asset compute 테스트 프레임워크. 유일한 차이점은 rendition.xxx 테스트 사례의 파일은 예상 XMP(XML) 렌디션이어야 합니다.

  1. asset compute 프로젝트에서 다음 구조를 만듭니다.

    code language-none
    /test/asset-compute/metadata-colors/success-pantone/
    
        file.jpg
        params.json
        rendition.xml
    
  2. 사용 샘플 파일 테스트 사례로 file.jpg.

  3. 에 다음 JSON 추가 params.json.

    code language-none
    {
        "fmt": "xml",
        "colorsFamily": "pantone"
    }
    

    다음을 참고하십시오. "fmt": "xml" 테스트 세트에 다음을 생성하도록 지시해야 합니다 .xml 텍스트 기반 렌디션.

  4. 에서 필요한 XML을 제공합니다. rendition.xml 파일. 이는 다음과 같은 방법으로 얻을 수 있습니다.

    • 개발 도구를 통해 테스트 입력 파일을 실행하고 (유효성이 확인된) XML 렌디션을 저장합니다.
    code language-none
    <?xml version="1.0" encoding="UTF-8"?><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:wknd="https://wknd.site/assets/1.0/"><rdf:Description><wknd:colors><rdf:Seq><rdf:li>Silver</rdf:li><rdf:li>Black</rdf:li><rdf:li>Outer Space</rdf:li></rdf:Seq></wknd:colors><wknd:colorsFamily>pantone</wknd:colorsFamily></rdf:Description></rdf:RDF>
    
  5. 실행 aio app test 를 Asset compute 프로젝트의 루트에서 시작하여 모든 테스트 세트를 실행합니다.

Adobe I/O Runtime에 작업자 배포 deploy

AEM Assets에서 이 새 메타데이터 작업자를 호출하려면 다음 명령을 사용하여 Adobe I/O Runtime에 배포해야 합니다.

$ aio app deploy

aio 앱 배포

이렇게 하면 프로젝트의 모든 작업자가 배포됩니다. 리뷰 배포 지침 요약 안 함 스테이지 및 프로덕션 작업 영역에 배포하는 방법에 대해 알아봅니다.

AEM 처리 프로필과 통합 processing-profile

새로 만들거나 이 배포된 작업자를 호출하는 기존 사용자 지정 처리 프로필 서비스를 수정하여 AEM에서 작업자를 호출합니다.

처리 프로필

  1. AEM as a Cloud Service Author 서비스에 다음으로 로그인 AEM 관리자

  2. 다음으로 이동 도구 > 에셋 > 처리 프로필

  3. 만들기 새 또는 편집 및 기존, 처리 프로필

  4. 사용자 정의 탭, 탭 새로 추가

  5. 새 서비스 정의

    • 메타데이터 렌디션 만들기: 활성으로 전환

    • 끝점: https://...adobeioruntime.net/api/v1/web/wkndAemAssetCompute-0.0.1/metadata-colors

      • 작업 중에 얻은 작업자 URL입니다. 배포 또는 명령 사용 aio app get-url. URL이 AEM as a Cloud Service 환경을 기반으로 올바른 작업 영역을 가리켜야 합니다.
    • 서비스 매개 변수

      • 누르기 매개 변수 추가

        • 키: colorFamily
        • 값: pantone
          • 지원되는 값: basic, hex, html, ntc, pantone, roygbiv
    • Mime 유형

      • 포함 사항: image/jpeg, image/png, image/gif, image/svg
        • 색상을 파생하는 데 사용되는 타사 npm 모듈에서 지원되는 유일한 MIME 유형입니다.
      • 제외: Leave blank
  6. 누르기 저장 오른쪽 상단에서

  7. 아직 적용하지 않은 경우 AEM Assets 폴더에 처리 프로필 적용

메타데이터 스키마 업데이트 metadata-schema

색상 메타데이터를 검토하려면 이미지의 메타데이터 스키마에 있는 두 개의 새 필드를 작업자가 채우는 새 메타데이터 데이터 속성에 매핑합니다.

메타데이터 스키마

  1. AEM Author 서비스에서 다음 위치로 이동합니다. 도구 > 에셋 > 메타데이터 스키마

  2. 다음으로 이동 기본값 및 선택 및 편집 이미지 생성된 색상 메타데이터를 노출하려면 읽기 전용 양식 필드를 추가하십시오.

  3. 추가 한 줄 텍스트

    • 필드 레이블: Colors Family
    • 속성에 매핑: ./jcr:content/metadata/wknd:colorsFamily
    • 규칙 > 필드 > 편집 비활성화: 선택됨
  4. 추가 다중 값 텍스트

    • 필드 레이블: Colors
    • 속성에 매핑: ./jcr:content/metadata/wknd:colors
  5. 누르기 저장 오른쪽 상단에서

자산 처리 중

자산 세부 사항

  1. AEM Author 서비스에서 다음 위치로 이동합니다. 에셋 > 파일
  2. 폴더 또는 하위 폴더로 이동하면 처리 프로필이 적용됩니다.
  3. 폴더에 새 이미지(JPEG, PNG, GIF 또는 SVG)를 업로드하거나 업데이트된 이미지를 사용하여 기존 이미지를 재처리합니다 처리 프로필
  4. 처리가 완료되면 에셋을 선택하고 을 누릅니다 속성 맨 위 작업 표시줄에서 을 클릭하여 메타데이터 표시
  5. 리뷰 Colors FamilyColors 메타데이터 필드 사용자 지정 Asset compute 메타데이터 작업자에서 다시 기록된 메타데이터용.

에셋의 메타데이터에 색상 메타데이터가 기록된 상태에서 [dam:Asset]/jcr:content/metadata 리소스를 통해 이 메타데이터는 검색을 통해 이러한 용어를 사용하여 향상된 에셋 검색 기능으로 인덱싱되며, 그런 경우 에셋의 바이너리에 다시 쓸 수도 있습니다 DAM 메타데이터 원본에 쓰기 워크플로우가 호출됩니다.

AEM Assets의 메타데이터 렌디션

AEM Assets 메타데이터 렌디션 파일

asset compute 메타데이터 작업자가 생성한 실제 XMP 파일도 에셋에 개별 렌디션으로 저장됩니다. 이 파일은 일반적으로 사용되지 않고, 자산의 메타데이터 노드에 적용된 값이 사용되지만 작업자의 원시 XML 출력은 AEM에서 사용할 수 있습니다.

Github의 메타데이터 색상 작업자 코드

최종 metadata-colors/index.js 의 Github에서 사용할 수 있습니다.

최종 test/asset-compute/metadata-colors 테스트 세트는 Github의 다음 위치에서 사용할 수 있습니다.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69