企业官网建设流程全解析

• 人工智能
• 机器学习
• 深度学习
• 计算机视觉
• NLP

导读

本文围绕 ml5.js 内置的 DCGAN（Deep Convolutional Generative Adversarial Networks，深度卷积生成对抗网络）模块，介绍如何在 Web 项目中加载预训练 GAN 模型、调用.generate()生成全新图像，并通过"潜空间向量（latent vector）"操控生成结果，实现随机生成、潜空间滑动插值与随机漫步等交互式创作。读完本文，你将掌握ml5.DCGAN()的初始化参数、manifest.json模型清单格式、generate()的回调与 Promise 两种用法，以及结果对象中raw/blob/tensor/p5Image各字段的用途，并能对照仓库源码理解其底层实现。

什么是 DCGAN

生成对抗网络（Generative Adversarial Network，GAN）是一种机器学习架构，其中两个神经网络互为对手进行对抗训练：一个叫"生成器（generator）"，负责制造新图像；另一个叫"判别器（discriminator）"，负责判断一张图像是"假的"（由生成器产出）还是"真的"（来自训练数据）。当判别器再也无法正确区分真伪时，说明生成器已经学会了以假乱真——模型训练完成！

DCGAN 即"深度卷积生成对抗网络"，是 GAN 的一种经典实现：它把卷积层引入生成器与判别器，从而能对图像数据建模，生成具有视觉真实感的新内容。

从源码结构看，ml5.js 的 DCGAN 实现位于 src/DCGAN/index.js，其文件头注释明确标注"This version is based on alantian's TensorFlow.js implementation: https://github.com/alantian/ganshowcase"，即该实现移植自 alantian 的 TensorFlow.js GAN Showcase 项目，底层完全构建于 TensorFlow.js 之上（源码通过import * as tf from '@tensorflow/tfjs'引入）。

ml5.js 为 DCGAN 提供了一些默认的预训练模型，例如生成 64×64 人脸的模型，以及生成智利圣地亚哥城市航拍图的模型。当然，你也可以考虑训练自己的 DCGAN，用来生成你感兴趣的内容。

关于训练自有模型

ml5.js 官方文档给出了训练自有 DCGAN 模型的资料入口（位于 ml5js 的 training-dcgan 仓库）。需要说明的是，自行训练需要具备 Python 知识，并且通常要使用云 GPU 服务；同时该训练仓库已不再积极维护。若想获得更新的思路，还可以参考 Gene Kogan 在 ITP 开设的 Neural Aesthetic 课程笔记。

快速上手：从加载模型到生成图像

下面是最小的可运行示例。假设你的模型清单文件位于model/geo/manifest.json：

const dcgan = ml5.DCGAN('model/geo/manifest.json', modelReady); // 当模型加载完成后 function modelReady() { // 生成一张新图像 dcgan.generate(gotImage); } function gotImage(err, result) { if (err) { console.log(err); return; } // 生成的图像数据在 result 中 console.log(result); }

仓库中 examples/p5js/DCGAN/DCGAN_Random/sketch.js 给出了 p5.js 版本的完整实践：在preload()中用ml5.DCGAN('model/geo/manifest.json')加载模型，随后在setup()中创建按钮，点击即调用dcgan.generate(displayImage)，最终用image(result.image, 0, 0, 200, 200)把生成的图像绘制到画布上。

初始化：ml5.DCGAN()

基本语法

const dcgan = ml5.DCGAN(modelPath, callback);

参数说明

其中modelPath指向的manifest.json是一个 JSON 对象，必须包含模型描述、模型文件地址、输出尺寸与潜空间维度等信息。以仓库示例使用的model/geo/manifest.json为原型，典型结构如下：

{ "description": "Aerial Images of Santiago, Chile 64x64 (16 MB)", "model": "model/geo/model.json", "modelSize": 64, "modelLatentDim": 128 }

各字段含义：

• description：模型的文字描述，说明该模型生成什么内容以及输出规格；
• model：指向 TensorFlow.js 格式的model.json文件的 URL，也可以指向绝对 URL，例如"https://raw.githubusercontent.com/ml5js/ml5-data-and-models/master/models/dcgan/face/model.json"；
• modelSize：生成图像的单边尺寸（像素），上例为 64，即生成 64×64 的图像；
• modelLatentDim：潜空间向量（latent vector）的维度，上例为 128，即每次生成需要输入一个长度为 128 的向量。

源码依据：在 src/DCGAN/index.js 中，DCGAN()工厂函数先通过handleArguments(modelPath, optionsOrCb, cb)解析参数。若没有传入模型路径字符串，会直接抛出错误，并提示你必须指定一个manifest.json路径、同时给出该文件的 JSON 结构示例。传入合法路径后，内部会创建DCGANBase实例；若提供了回调则返回实例本身，否则返回instance.ready（一个 Promise），这也是纯 JavaScript 场景中可以用await ml5.DCGAN(...)的原因。

模型加载流程（源码级解析）

在 src/DCGAN/index.js 的loadModel()中，加载过程分为两步：

1. 使用 src/utils/modelLoader.js 中的modelLoader(this.modelPath, 'manifest')构造一个ModelLoader，其loadManifestJson()通过 axios 拉取manifest.json，解析出modelInfo（即上文的model、modelSize、modelLatentDim等字段）；
2. 调用loadLayersModel(this.modelInfo.model)，把 manifest 中的model字段作为相对路径传给 TensorFlow.js 的tf.loadLayersModel(url)，加载完整的model.json权重文件，赋值给this.model。

加载完成后this.modelReady会被置为true。此外modelLoader.js的getModelPath()会把相对路径基于当前window.location.pathname解析成绝对路径，因此你既可以用相对路径（如model/geo/manifest.json），也可以直接传完整的 https 绝对 URL。

属性（Properties）

初始化得到的dcgan实例暴露了以下属性：

方法：generate()

语法

dcgan.generate(callback, ?latentVector);

输入参数

• callback：必填，Function。用于处理.generate()结果（通常是拿生成的图像数据去做展示）的回调函数。
• latentVector：可选，Array。用于在模型的潜空间中探索特定"位置"的向量。若未提供，则返回潜空间中一个随机的"位置"。

输出结果

generate()返回一个对象（Object），包含以下字段：

• raw：Uint8ClampedArray类型，所有像素值的数组；
• blob：图像 Blob 对象；
• tensor：TensorFlow.js 张量；
• p5Image：如果当前环境加载了 p5.js，还会额外返回p5.Image类型的图像对象。

源码依据：结果对象由 src/utils/generatedImageResult.js 统一构造。它先用tf.browser.toPixels(tensor)把生成张量转为像素数组raw，再通过 src/utils/p5Utils.js 的rawToBlob()/blobToP5Image()得到blob与image。若构造函数传入的 options 中returnTensors: true，则返回结果中会保留原始tensor；否则张量会被tensor.dispose()释放以回收显存/内存。

生成过程的底层实现

从 src/DCGAN/index.js 可以看到生成链路为generate()→generateInternal()→compute()：

• generateInternal()从modelInfo中取出modelLatentDim（潜空间维度），传入compute()；
• compute(latentDim, latentVector)中：
  • 若latentVector不是数组，则用tf.randomNormal([1, latentDim])采样一个标准正态分布的随机潜向量；
  • 若传入数组，则校验长度后把数组值逐个写入tf.buffer([1, latentDim])构造张量；
  • 随后执行this.model.predict(z).squeeze().transpose([1, 2, 0]).div(2).add(0.5)：让生成器网络对潜向量做前向推理，并把输出张量从[-1, 1]范围线性映射到[0, 1]的像素值范围；
• 最终把张量交给generatedImageResult()转换为多格式结果对象。

这也解释了为什么latentVector的元素通常应取值在-1到1之间——这正是潜空间的标准采样区间，仓库所有示例中的随机向量都使用random(-1, 1)填充。

用潜空间向量实现交互式创作

潜空间是 DCGAN 最值得玩味的部分：向量中每个维度都可视为一种"生成风格旋钮"。仓库提供了三个 p5.js 示例，分别演示了潜空间的不同操控方式：

1. 随机生成（DCGAN_Random）

examples/p5js/DCGAN/DCGAN_Random/sketch.js 是最基础的玩法：不传潜向量，每次generate()都采样一个全新随机位置，持续获得不同的随机图像。

2. 潜空间插值（DCGAN_LatentVector_Slider）

examples/p5js/DCGAN/DCGAN_LatentVector_Slider/sketch.js 演示了潜空间插值：先初始化两个随机向量a、b（各 128 维），再用一个滑杆控制插值比例amt（0 到 1，步长 0.01），对每个维度执行lerp(a[i], b[i], amt)得到中间向量c，传给dcgan.generate(displayImage, c)。拖动滑杆即可看到图像在两张"风格"之间平滑过渡——这正是潜空间连续性的直观体现。

3. 潜空间随机漫步（DCGAN_LatentVector_RandomWalk）

examples/p5js/DCGAN/DCGAN_LatentVector_RandomWalk/sketch.js 演示"随机漫步"：维护一个当前向量，每次生成前对每个维度加上random(-0.01, 0.01)的微小扰动（walk()函数），使潜空间位置连续漂移，图像随之产生类似电影逐帧演变的流动效果。

纯 JavaScript 写法：若不用 p5.js，可参考 examples/javascript/DCGAN/DCGAN_Random/index.html。它展示了await ml5.DCGAN("model/geo/manifest.json")的 Promise 式加载，以及await dcgan.generate()的 Promise 式调用，并用new ImageData(result.raw, 64, 64)配合 Canvas 2D 的putImageData()把raw像素数据直接绘制到<canvas>上——64 这个尺寸对应 manifest 中的modelSize。

模型与数据溯源（Provenance）

根据官方文档的模型传记（Model Biography）记录：

• 架构来源：DCGAN 架构由 indico Research 与 Facebook AI 的研究者在 2015 年提出；
• ml5 实现：基于 alantian 的 TensorFlow.js 实现（GAN Showcase）移植，TensorFlow.js 是 Google 开源机器学习平台 TensorFlow 的 JavaScript 库；
• 移植贡献：由 YG Zhang、Rui An 与 Joey Lee 于 2019 年移植进 ml5.js；
• 托管位置：预训练模型由 YG Zhang 托管。

数据传记（Data Biography）方面，文档说明各预训练 DCGAN 模型的训练数据来自不同来源：航拍图生成器的训练数据来自 Mapbox Satellite，人脸生成器的训练数据来自好莱坞名人数据集。

示例与进一步探索

仓库内与 DCGAN 相关的可直接运行的完整示例包括：

p5.js 示例

• DCGAN_LatentVector_RandomWalk
• DCGAN_LatentVector_Slider
• DCGAN_Random

纯 JavaScript 示例

• DCGAN_Random

每个示例目录都包含index.html（引入 p5.js 或 ml5.js 与 sketch.js）和sketch.js（核心逻辑）。注意示例 HTML 中通过http://localhost:8080/ml5.js引用本地构建产物，因此需要先构建 ml5.js 并在本地 Web 服务器（如http-server）环境下运行；模型文件位于各示例的model/子目录中。

若想继续深入源码，建议重点阅读：

• DCGAN 核心实现：工厂函数、参数校验、模型加载与生成链路；
• generatedImageResult.js：生成结果的raw/blob/image/tensor多格式转换；
• modelLoader.js：manifest.json与model.json的 URL 解析与加载；
• p5Utils.js：像素数组到 Blob、再到 p5.Image 的转换细节。

在浏览器控制台运行ml5.DCGAN相关示例，配合result.raw、result.blob、result.image的日志输出，即可直观验证本指南中描述的每一步行为。

• 人工智能
• 机器学习
• 深度学习
• 计算机视觉
• NLP