开发Asset compute元数据工作程序

自定义Asset compute工作程序可以生成XMP(XML)数据,这些数据会发送回AEM,并作为元数据存储在资产上。

常见用例包括:

  • 与第三方系统集成,例如PIM(产品信息管理系统),其中必须检索其他元数据并将其存储在资产上
  • 与Adobe服务(如Content和Commerce AI)集成,以使用其他机器学习属性来扩充资产元数据
  • 从资产的二进制文件派生资产的元数据,并将其作为资产元数据存储在AEM中作为Cloud Service

您将执行的操作

在本教程中,我们将创建一个Asset compute元数据工作程序,该工作程序派生图像资产中最常用的颜色,并将颜色名称写回AEM中资产的元数据。 虽然工作程序本身是基本的,但本教程会使用它来探索如何使用Asset compute工作程序将元数据写回AEM中的资产作为Cloud Service。

asset compute元数据工作程序调用的逻辑流

asset compute元数据工作程序的调用与生成工作程序🔗的二进制呈现程序的调用几乎相同,主要区别在于返回类型是XMP(XML)呈现,其值也写入资产的元数据。

asset compute工作人员在renditionCallback(...)函数中实施Asset computeSDK工作人员API合同,从概念上讲,该合同是:

  • 输入: AEM资产的原始二进制文件和处理配置文件参数
  • 输出: XMP(XML)呈现版本作为呈现版本保留到AEM资产和资产的元数据

asset compute元数据工作程序逻辑流

  1. AEM创作服务会调用Asset compute元数据工作程序,并提供资产的​(1a)​原始二进制文件和​(1b)​处理配置文件中定义的任何参数。
  2. asset computeSDK协调自定义Asset compute元数据工作程序renditionCallback(...)函数的执行,该函数根据资产的二进制文件​(1a)​和任何处理配置文件参数​(1b)​导出XMP(XML)呈现。
  3. asset compute工作程序将XMP(XML)表示形式保存到rendition.path
  4. 写入rendition.path的XMP(XML)数据通过Asset computeSDK传输到AEM创作服务,并将其显示为​(4a)​文本呈现,以及保留到资产元数据节点的​(4b)

配置manifest.yml

必须在manifest.yml中注册所有Asset compute工作程序。

打开项目的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 指向在下一步中创建的 worker实施。从语义上命名工作程序(例如,actions/worker/index.js可能更好地命名为actions/rendition-circle/index.js),如worker URL中所示,并且还确定worker的测试包文件夹名称

limitsrequire-adobe-auth分别按工作程序进行配置。 在此工作器中,内存的512 MB被分配,因为代码会检查(可能)大的二进制图像数据。 其他limits将被删除以使用默认值。

开发元数据工作程序

在Asset compute项目中为新工作程序🔗定义的清单.yml路径(/actions/metadata-colors/index.js)的下,为新工作程序创建新的元数据工作程序JavaScript文件

安装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 will be 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参数(支持的值basichexhtmlntcpantoneroygbiv)。

    {
        "renditions": [
            {
                "worker": "...",
                "name": "rendition.xml",
                "colorsFamily": "pantone"
            }
        ]
    }
    
  5. 点按​运行 ,然后等待XML呈现版本生成

    • 由于配置文件定义中列出了两个工作程序,因此两个演绎版都将生成。 (可选)可以删除指向圆呈现工作程序的顶部配置文件定义,以避免从开发工具中执行该定义。
  6. 演绎版​部分预览生成的演绎版。 点按rendition.xml以下载它,然后在VS代码(或您最喜爱的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呈现版本。
    <?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

要从AEM Assets调用此新元数据工作程序,必须使用命令将其部署到Adobe I/O Runtime:

$ aio app deploy

aio应用程序部署

请注意,这将部署项目中的所有员工。 请查看未删节的部署说明,了解如何部署到暂存和生产工作区。

与AEM处理配置文件集成

通过创建新的或修改调用此已部署工作程序的现有自定义处理配置文件服务,从AEM中调用工作程序。

处理配置文件

  1. 以​AEM Administrator​的身份登录AEM as a Cloud Service创作服务
  2. 导航到​工具>资产>处理配置文件
  3. ____ 创建新的或编辑的 ____ 现有处理配置文件
  4. 点按​Custom​选项卡,然后点按​Add New
  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. 点按右上方的​Save
  7. 将处理配置文件应用到AEM Assets文件夹(如果尚未应用)

更新元数据架构

要查看颜色元数据,请将图像元数据架构上的两个新字段映射到工作人员填充的新元数据数据属性。

元数据架构

  1. 在AEM创作服务中,导航到​工具> Assets >元数据架构
  2. 导航到​default,然后选择并编辑​image,并添加只读表单字段以显示生成的颜色元数据
  3. 添加​单行文本
    • 字段标签: Colors Family
    • 映射到属性: ./jcr:content/metadata/wknd:colorsFamily
    • 规则>字段>禁用编辑:已选中
  4. 添加​多值文本
    • 字段标签: Colors
    • 映射到属性: ./jcr:content/metadata/wknd:colors
  5. 点按右上方的​Save

处理资产

资源详细信息

  1. 在AEM创作服务中,导航到​Assets > Files
  2. 导航到文件夹或子文件夹后,处理配置文件即会应用到
  3. 将新图像(JPEG、PNG、GIF或SVG)上传到文件夹,或使用更新的处理配置文件重新处理现有图像
  4. 处理完成后,选择资产,然后点按顶部操作栏中的​属性​以显示其元数据
  5. 查看从自定义Asset compute元数据工作程序写回的元数据的Colors FamilyColors 元数据字段

[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上获取,网址为:

在此页面上