開發Asset compute中繼資料背景工作

自訂Asset compute背景工作可產生XMP (XML)資料,這些資料會傳回AEM並儲存為資產上的中繼資料。

常見使用案例包含:

  • 與協力廠商系統(例如PIM (產品資訊管理系統))的整合,其中必須擷取其他中繼資料並儲存在資產上
  • 與Adobe服務(例如內容和Commerce AI)整合,使用其他機器學習屬性來增強資產中繼資料
  • 從資產的二進位檔取得資產的相關中繼資料,並將其儲存為AEM as a Cloud Service中的資產中繼資料

您將要執行的動作

在本教學課程中,我們將建立Asset compute中繼資料背景工作,它會衍生影像資產中最常使用的顏色,並將顏色名稱寫入回AEM中的資產中繼資料。 雖然背景工作本身至關重要,但本教學課程將利用此背景工作來探索如何使用Asset compute工作程式將中繼資料回寫至AEM as a Cloud Service中的資產。

asset compute中繼資料工作者引動處理的邏輯流程

asset compute中繼資料背景工作程式的引動方式與產生背景工作程式的二進位轉譯的引動方式幾乎相同,主要差異在於傳回型別是XMP (XML)轉譯,其值也會寫入資產的中繼資料。

asset compute背景工作在renditionCallback(...)函式中實作Asset computeSDK背景工作API合約,其概念為:

  • 輸入: AEM資產的原始二進位檔與處理設定檔引數
  • 輸出: XMP (XML)轉譯持續儲存至AEM資產作為轉譯,並儲存至資產的中繼資料

Asset compute中繼資料工作者邏輯流程

  1. AEM Author服務會叫用Asset compute中繼資料背景工作,提供資產的​ (1a) ​原始二進位檔,以及​ (1b) ​處理設定檔中定義的任何引數。
  2. asset computeSDK會根據資產的二進位​ (1a) ​和任何處理設定檔引數​ (1b),協調自訂Asset compute中繼資料背景工作之renditionCallback(...)函式的執行,以衍生XMP (XML)轉譯。
  3. asset compute背景工作將XMP (XML)表示儲存至rendition.path
  4. 寫入至rendition.path的XMP (XML)資料會透過Asset computeSDK傳輸至AEM Author Service,並將它公開為​ (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是分別設定給每個背景工作程式。 在這個Worker中,512 MB的記憶體配置給程式碼檢查(可能)大型二進位影像資料。 其他limits已移除以使用預設值。

開發中繼資料背景工作 metadata-worker

在Asset compute專案中建立新的中繼資料背景工作JavaScript檔案,路徑為定義新背景工作,路徑為/actions/metadata-colors/index.js

安裝npm模組

安裝此Asset compute工作者使用的額外npm模組(@adobe/asset-compute-xmpget-image-colorscolor-namer)。

$ 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專案包含兩個背景工作(先前的circle轉譯和此metadata-colors背景工作),Asset compute開發工具的設定檔定義會列出兩個背景工作的執行設定檔。 第二個設定檔定義指向新的metadata-colors背景工作。

XML中繼資料轉譯

  1. 從Asset compute專案的根目錄

  2. 執行aio app run以啟動Asset compute開發工具

  3. 在​ 選取檔案…… ​下拉式清單中,挑選要處理的範例影像

  4. 在指向metadata-colors背景工作程式的第二個設定檔定義設定中,當此背景工作程式產生XMP (XML)轉譯時更新"name": "rendition.xml"。 選擇性地新增colorsFamily引數(支援的值basichexhtmlntcpantoneroygbiv)。

    code language-json
    {
        "renditions": [
            {
                "worker": "...",
                "name": "rendition.xml",
                "colorsFamily": "pantone"
            }
        ]
    }
    
  5. 點選​ 執行,然後等待產生XML轉譯

    • 由於兩個背景工作都列在設定檔定義中,因此兩個轉譯都會產生。 可選擇性地刪除指向circle轉譯背景工作的上層設定檔定義,以避免從開發工具執行它。
  6. 轉譯 ​區段會預覽產生的轉譯。 點選rendition.xml以下載它,然後以VS Code (或您最愛的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. rendition.xml檔案中提供預期的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. 從Asset compute專案的根目錄執行aio app test以執行所有測試套裝。

將背景工作部署至Adobe I/O Runtime deploy

若要從AEM Assets叫用這個新的中繼資料工作程式,必須使用命令將其部署到Adobe I/O Runtime:

$ aio app deploy

aio應用程式部署

請注意,這將部署專案中的所有背景工作。 檢閱未刪節的部署指示,瞭解如何部署至中繼和生產工作區。

與AEM處理設定檔整合 processing-profile

透過建立新的或修改現有的自訂處理設定檔服務來從AEM叫用背景工作程式,此自訂處理設定檔服務會叫用這個已部署的背景工作程式。

正在處理設定檔

  1. 以​ AEM管理員 ​身分登入AEM as a Cloud Service作者服務

  2. 導覽至​ 工具> Assets >處理設定檔

  3. 建立 ​新的處理設定檔,或​ 編輯 ​現有的處理設定檔

  4. 點選​ 自訂 ​標籤,然後點選​ 新增

  5. 定義新服務

    • 建立中繼資料轉譯:切換為使用中

    • 端點: https://...adobeioruntime.net/api/v1/web/wkndAemAssetCompute-0.0.1/metadata-colors

      • 這是在部署期間或使用命令aio app get-url取得的背景工作程式的URL。 根據AEM as a Cloud Service環境,確保URL指向正確的工作區。
    • 服務引數

      • 點選​ 新增引數

        • 索引鍵: colorFamily
        • 值: pantone
          • 支援的值: basichexhtmlntcpantoneroygbiv
    • Mime型別

      • 包含: image/jpegimage/pngimage/gifimage/svg
        • 這是第三方npm模組唯一支援的MIME型別,用來衍生顏色。
      • 排除: Leave blank
  6. 點選右上方的​ 儲存

  7. 將處理設定檔套用至AEM Assets資料夾(如果尚未套用)

更新中繼資料結構 metadata-schema

若要檢閱色彩中繼資料,請將影像中繼資料結構描述上的兩個新欄位,對應到背景工作填入的新中繼資料屬性。

中繼資料結構

  1. 在AEM作者服務中,導覽至​ 工具> Assets >中繼資料結構

  2. 導覽至​ 預設值,選取並編輯​ 影像,並新增唯讀表單欄位以公開產生的色彩中繼資料

  3. 新增​ 單行文字

    • 欄位標籤Colors Family
    • 對應到屬性./jcr:content/metadata/wknd:colorsFamily
    • 規則>欄位>停用編輯:已核取
  4. 新增​ 多值文字

    • 欄位標籤Colors
    • 對應到屬性./jcr:content/metadata/wknd:colors
  5. 點選右上方的​ 儲存

正在處理資產

資產詳細資料

  1. 在AEM Author服務中,導覽至​ Assets >檔案
  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背景工作代碼

Github上的最終metadata-colors/index.js位於:

Github上的最終test/asset-compute/metadata-colors測試套件位於:

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