ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

ml5.js DCGAN 深度指南:在浏览器中用生成对抗网络生成新图像

ml5.js DCGAN 深度指南:在浏览器中用生成对抗网络生成新图像 人工智能机器学习深度学习计算机视觉NLP【免费下载链接】ml5-libraryFriendly machine learning for the web! 项目地址https://gitcode.com/gh_mirrors/ml/ml5-library点击查看免费下载导读本文围绕 ml5.js 内置的 DCGANDeep Convolutional Generative Adversarial Networks深度卷积生成对抗网络模块介绍如何在 Web 项目中加载预训练 GAN 模型、调用.generate()生成全新图像并通过潜空间向量latent vector操控生成结果实现随机生成、潜空间滑动插值与随机漫步等交互式创作。读完本文你将掌握ml5.DCGAN()的初始化参数、manifest.json模型清单格式、generate()的回调与 Promise 两种用法以及结果对象中raw/blob/tensor/p5Image各字段的用途并能对照仓库源码理解其底层实现。什么是 DCGAN生成对抗网络Generative Adversarial NetworkGAN是一种机器学习架构其中两个神经网络互为对手进行对抗训练一个叫生成器generator负责制造新图像另一个叫判别器discriminator负责判断一张图像是假的由生成器产出还是真的来自训练数据。当判别器再也无法正确区分真伪时说明生成器已经学会了以假乱真——模型训练完成DCGAN 即深度卷积生成对抗网络是 GAN 的一种经典实现它把卷积层引入生成器与判别器从而能对图像数据建模生成具有视觉真实感的新内容。从源码结构看ml5.js 的 DCGAN 实现位于 src/DCGAN/index.js其文件头注释明确标注This version is based on alantians 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.jsonconst 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是String指向manifest.json的路径相对路径或绝对 URL 均可该 JSON 文件描述了预训练 GAN 的信息并给出model.json的 URLcallback是Function模型加载完成后执行的回调函数其中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.jsonmodelSize生成图像的单边尺寸像素上例为 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()中加载过程分为两步使用 src/utils/modelLoader.js 中的modelLoader(this.modelPath, manifest)构造一个ModelLoader其loadManifestJson()通过 axios 拉取manifest.json解析出modelInfo即上文的model、modelSize、modelLatentDim等字段调用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实例暴露了以下属性属性类型说明.modelReadyBoolean布尔值标识模型是否已加载完成.modelObject一个对象保存模型属性即加载后的 TensorFlow.js 模型对象.modelPathString正在用于生成图像的模型名称/路径方法generate()语法dcgan.generate(callback, ?latentVector);输入参数callback必填Function。用于处理.generate()结果通常是拿生成的图像数据去做展示的回调函数。latentVector可选Array。用于在模型的潜空间中探索特定位置的向量。若未提供则返回潜空间中一个随机的位置。输出结果generate()返回一个对象Object包含以下字段rawUint8ClampedArray类型所有像素值的数组blob图像 Blob 对象tensorTensorFlow.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_Randomexamples/p5js/DCGAN/DCGAN_Random/sketch.js 是最基础的玩法不传潜向量每次generate()都采样一个全新随机位置持续获得不同的随机图像。2. 潜空间插值DCGAN_LatentVector_Sliderexamples/p5js/DCGAN/DCGAN_LatentVector_Slider/sketch.js 演示了潜空间插值先初始化两个随机向量a、b各 128 维再用一个滑杆控制插值比例amt0 到 1步长 0.01对每个维度执行lerp(a[i], b[i], amt)得到中间向量c传给dcgan.generate(displayImage, c)。拖动滑杆即可看到图像在两张风格之间平滑过渡——这正是潜空间连续性的直观体现。3. 潜空间随机漫步DCGAN_LatentVector_RandomWalkexamples/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_RandomWalkDCGAN_LatentVector_SliderDCGAN_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.jsmanifest.json与model.json的 URL 解析与加载p5Utils.js像素数组到 Blob、再到 p5.Image 的转换细节。在浏览器控制台运行ml5.DCGAN相关示例配合result.raw、result.blob、result.image的日志输出即可直观验证本指南中描述的每一步行为。赞分享人工智能机器学习深度学习计算机视觉NLP【免费下载链接】ml5-libraryFriendly machine learning for the web! 项目地址https://gitcode.com/gh_mirrors/ml/ml5-library点击查看免费下载相关推荐用 DCGAN 生成逼真图像d2l-en 深度卷积生成对抗网络实战用 DCGAN 生成逼真图像d2l en 深度卷积生成对抗网络实战 本篇技术指南基于开源交互式深度学习书籍 d2l en 中的 深度卷积生成对抗网络DCGA文档教程人工智能深度学习NLP计算机视觉强化学习Chainer项目中的DCGAN实现使用深度卷积生成对抗网络生成图像Chainer项目中的DCGAN实现使用深度卷积生成对抗网络生成图像 引言 生成对抗网络 GAN 是近年来深度学习领域最具突破性的技术之一它通过对抗训练的方深度学习机器学习生成对抗网络DCGAN终极实战fast.ai课程中的图像生成完整指南生成对抗网络DCGAN终极实战fast.ai课程中的图像生成完整指南 欢迎来到生成对抗网络DCGAN的终极实战教程本指南基于fast.ai课程中的精华内示例工程上一篇终极PS4金手指管理器免费开源的游戏修改神器下一篇Obsidian终极模板指南3步掌握Templater插件的完整解决方案创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表