本文翻译自deeplearnJS的示例教程,并结合了我在学习过程中的理解。
deeplearnJS简介:
deeplearn.js是用于机器学习的开源WebGL加速JavaScript库。
deeplearn.js让您可以在浏览器中训练神经网络,或运行预先训练好的模型。它提供了与TensorFlow一致的数据流图(data flow graphs)的API,及用于数值计算的函数库。

本教程模型的超参数还需要再优化,比如可以添加更多的层,产生更接近互补颜色的预测,我们没有花费大量时间优化超参数,我们更希望开源社区的参与。
hyper-parameters
超参数:包括学习率learning rate、正则化系数、mini-batch size、网路的层数、每一层的neurons个数等等。
应用场景:
用户随机输入一个颜色,神经网络自动生成其互补颜色。
预测效果:
第一个颜色为随机输入的颜色originColor;
第二个为神经网络预测的互补颜色predictedColor;
第三个为使用算法计算的互补颜色computeComplementaryColor,作为标准答案;
我们可以对比下,第二个跟第三个之间的差异。

上图为训练次数10次以内的结果,可以看到预测结果跟标准答案之间还存在较大的差异。

上图为训练次数100次以内的结果,预测跟标准答案之间已经差距越来越小了。

上图为训练次数500次以上的结果,预测结果与标准答案之间已基本没有区别了。
接下来,我们动手一步步进行实验:
1
准备环境
本教程采用的是纯前端的方式,直接在script引用deeplearn.js文件即可,
为了使得使用更方便,我把deeplearn对象下的所有方法、属性添加到window对象了,方便引用。

2
创建训练数据
我们首先生成训练数据,本教程采用的是在RGB空间中生成随机颜色,并根据Stack Overflow上Edd的算法生成对应的互补颜色。
https://stackoverflow.com/a/37657940随机生成颜色的函数:

计算互补颜色的函数:

Stack Overflow上Edd的答案,可以通过上文的链接访问,按其思路写一个。
这里我们归一化处理训练数据,通过将每个颜色通道除以255来归一化。

normalizeColor是归一化颜色的函数,denormalizeColor是对归一化的颜色,处理成正常颜色数值的方法。
通过exampleCount控制生成的训练数据数量,调用generateRandomChannelValue函数生成rawInputs颜色数组。
我们把训练数据rawInputs归一化后,存储为Array1D的数据形式,作为deeplearn.js中的输入。
在这里,inputArray和targetArray是由0和1之间数值组成的长度为3的一维矩阵(相当于JS里的数组)。

deeplearn.js中用于神经网络计算的数据类型是NDArray。一个NDArray 是由一组浮点值组成的任意数量的数组。NDArray有一个shape属性来定义它的shape。有5种子类型: Scalar,Array1D,Array2D,Array3D,Array4D。
我们可以在控制台里实验下,打印出来理解下:

2x3 的二维矩阵:
[
1.0 2.0
3.0 10.0
20.0 30.0
]
在使用之前还要进行随机打乱的操作shuffle,这里deeplearnJS已经封装好了一个方法,直接调用即可。

创建用于将数据传递到模型的Feed条目

3
这部分是令人兴奋的,因为我们将动手构建神经网络模型。
像TensorFlow一样,deeplearn.js是一个基于图的库:我们先设计一个神经网络模型,再使用sessions来运行它。
我们创建一个Graph对象和2个Tensor:
1个Tensor为输入颜色,
另1个Tensor为目标颜色。
目标颜色仅在训练期间使用 ;
在预测阶段,我们只能输入输入颜色。
我们把构建图的过程写到setupSession函数里。

我们编写一个全连接层的功能graph.layers.dense。

全链接层(Dense Layer,dense)的每一个结点都与上一层的所有结点相连,用来把前边提取到的特征综合起来,主要对特性向量执行分类操作。由于其全相连的特性,一般全连接层的参数也是最多的。
使用该功能,我们创建了具有64,32和16个节点的3个全链接层。

再创建一个输出预测互补颜色的图层predictionTensor,它有3个输出,每个通道1个输出;
还要定义一个损失函数(Loss Function),用于衡量预测值与真实值不一致的程度。损失函数又称为代价函数(Cost Function)。

损失函数选择的是 mean squared,即使用欧式距离作为误差度量(即Mean squared error, MSE),主要有以下几个原因:
简单,计算方便;
欧氏距离是一种很好的相似性度量标准;
在不同的表示域变换后特征性质不变。
最后,我们创建一个sessions,用于运行训练和推理。

为了训练模型,我们一个初始学习率为0.042的梯度下降优化器对象。

然后写一个训练一批颜色的功能。

创建一个根据输入颜色预测其互补颜色的方法
5
开始训练

编写一个循环训练的函数,并设置好训练次数,初始化即可在控制台看到神经网络的输出啦。
最后,
总结一下整体的思路:
1、创建训练数据
归一化处理数据、
随机打乱训练数据shuffle;
将数据传递到Feed
2、构建图
创建1个Graph对象;
创建2个Tensor:1个Tensor为输入颜色,另1个Tensor为目标颜色。
创建具有64,32和16个节点的3个全链接层;
创建一个输出预测互补颜色的图层predictionTensor;
定义一个损失函数;
创建一个sessions,用于运行训练和推理;
3、训练及预测
初始学习率为0.042的梯度下降优化器对象;
写一个训练一批颜色的函数;
创建一个根据输入颜色预测其互补颜色的方法;
4、开始训练
编写一个循环训练的函数;
设置好训练次数;
运行。

原文来自:设计Mix科技实验室O自在园
声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com
提供多种拟人音色,支持多语言及方言,并可在同一音色下输出多语言内容。系统可自适应语气,流畅处理复杂文本。
Nano Banana(gemini-2.5-flash-image 和 gemini-3-pro-image-preview图像模型)是图像生成与编辑的最佳选择,可集成 Nano Banana API,实现高速预览。
支持通过自然语言文本智能生成高质量短视频。用户只需输入一段描述性文字,即可自动合成画面连贯、风格鲜明、配乐匹配的定制化视频内容。适用于短视频创作、广告预演、社交内容生成、游戏素材制作等场景,为开发者与创作者提供高效、灵活、富有想象力的视频生产新范式。
先进的图像理解和分析能力,它能够快速准确地解析和理解图像内容。无论是自然风景、城市建筑还是复杂的场景与活动,都能提供详细的描述和深入的分析。
根据文本提示(prompt)和图片公网访问链接,编辑原图按照特定风格、场景和氛围感的输出新的图像。广泛应用于电商营销、广告设计、创意灵感等领域,为用户带来高效且个性化的AI图像创作体验。