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

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

常見的使用案例包括:

  • 與協力廠商系統的整合,例如PIM(產品資訊管理系統),其中必須擷取額外中繼資料並儲存在資產上
  • 與Adobe服務(例如內容與商務AI)整合,以透過其他機器學習屬性增加資產中繼資料
  • 從資產的二進位衍生資產的中繼資料,並將其儲存為AEM as a Cloud Service中的資產中繼資料

你將做什麼

在本教學課程中,我們將建立Asset compute中繼資料背景工作,該背景工作衍生影像資產中最常使用的顏色,並將顏色名稱寫回AEM中資產的中繼資料。 雖然背景工作是基本的,但本教學課程會使用此工具來探索如何使用Asset compute背景工作將中繼資料回寫至AEMas a Cloud Service中的資產。

asset compute元資料工作器調用的邏輯流

調用Asset compute元資料工作幾乎與調用 二進位轉譯產生程式,主要差異為傳回類型是XMP(XML)轉譯,其值也會寫入資產的中繼資料。

asset compute背景工作實作Asset computeSDK背景工作API合約,位於 renditionCallback(...) 功能,其概念上:

  • 輸入: AEM資產的原始二進位和處理設定檔參數
  • 輸出: XMP(XML)轉譯會以轉譯形式持續存在AEM資產,以及保存在資產的中繼資料

asset compute元資料工作邏輯流

  1. AEM製作服務會叫用Asset compute中繼資料背景工作,提供資產的 (1a) 原始二進位和 (1b) 處理設定檔中定義的任何參數。
  2. asset computeSDK可協調自訂Asset compute中繼資料背景工作的執行 renditionCallback(...) 函式,根據資產的二進位檔衍生XMP(XML)轉譯 (1a) 和任何處理設定檔參數 (1b).
  3. asset compute工作器將XMP(XML)表示保存到 rendition.path.
  4. 寫入的XMP(XML)資料 rendition.path 會透過Asset computeSDK傳輸至AEM作者服務,並依 (4a) 文字轉譯及 (4b) 保存至資產的中繼資料節點。

設定manifest.yml

所有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 會移除以使用預設值。

開發中繼資料背景工作

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

安裝npm模組

安裝額外的npm模組(@adobe/asset-compute-xmp, get-image-colors,和 顏色名稱),此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; }
}

在本機執行中繼資料背景工作

工作程式碼完成後,即可使用本機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)。

    {
        "renditions": [
            {
                "worker": "...",
                "name": "rendition.xml",
                "colorsFamily": "pantone"
            }
        ]
    }
    
  5. 點選 執行 並等待XML格式副本生成

    • 由於兩個背景工作都列在設定檔定義中,因此兩個轉譯都會產生。 (可選)指向 社交轉譯工作人員 可刪除,以避免從開發工具執行。
  6. 轉譯 區段會預覽產生的轉譯。 點選 rendition.xml 若要下載,請在VS Code(或您最喜愛的XML/文字編輯器)中開啟它以進行檢閱。

測試工作人員

中繼資料背景工作可使用 與二進位轉譯相同的Asset compute測試架構. 唯一的差別是 rendition.xxx 測試案例中的檔案必須是預期的XMP(XML)轉譯。

  1. 在Asset compute專案中建立下列結構:

    /test/asset-compute/metadata-colors/success-pantone/
    
        file.jpg
        params.json
        rendition.xml
    
  2. 使用 範例檔案 作為測試案例 file.jpg.

  3. 將下列JSON新增至 params.json.

    {
        "fmt": "xml",
        "colorsFamily": "pantone"
    }
    

    請注意 "fmt": "xml" 需要,才能指示測試套裝產生 .xml 文字轉譯。

  4. rendition.xml 檔案。 這可透過下列方式取得:

    • 透過開發工具執行測試輸入檔案,並儲存(已驗證)XML轉譯。
    <?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

若要從AEM Assets叫用此新中繼資料背景工作,必須使用命令將其部署至Adobe I/O Runtime:

$ aio app deploy

aio app deploy

請注意,這將部署項目中的所有員工。 檢閱 未刪除的部署說明 以了解如何部署至預備和生產工作區。

與AEM處理設定檔整合

通過建立新的或修改調用此已部署工作器的現有自定義處理配置檔案服務,從AEM中調用該工作器。

處理設定檔

  1. 登入AEMas a Cloud Service作者服務,作為 AEM管理員
  2. 導覽至 工具>資產>處理設定檔
  3. 建立 新的,或 編輯 和現有,處理設定檔
  4. 點選 自訂 標籤,然後點選 新增
  5. 定義新服務
    • 建立中繼資料轉譯:切換為作用中
    • 端點: https://...adobeioruntime.net/api/v1/web/wkndAemAssetCompute-0.0.1/metadata-colors
      • 這是工作人員在 部署 或使用命令 aio app get-url. 根據AEMas a Cloud Service環境,確定URL點位在正確的工作區。
    • 服務參數
      • 點選 新增參數
        • 關鍵: 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資料夾(如果尚未這麼做的話)

更新中繼資料結構

要查看顏色元資料,請將影像元資料結構上的兩個新欄位映射到工作人員填充的新元資料資料屬性。

中繼資料結構

  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上提供測試套裝:

本頁內容