专栏首页MixLab科技+设计实验室用谷歌新开源的deeplearnJS预测互补颜色

用谷歌新开源的deeplearnJS预测互补颜色

本文翻译自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

创建训练数据

Creating Input Examples

我们首先生成训练数据,本教程采用的是在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

构建图

Setting Up the Graph

这部分是令人兴奋的,因为我们将动手构建神经网络模型。

像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,用于运行训练和推理。

4

训练及预测

Train and Predict

为了训练模型,我们一个初始学习率为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、开始训练

  • 编写一个循环训练的函数;
  • 设置好训练次数;
  • 运行。

代码我整理了下,

有兴趣的朋友可以在本文后留言,

我将在留言区抽取10位读者,

这10位读者将获得整理后的代码(可直接在浏览器运行体验?),

同时还可进入本Lab的微信群,交流学习

当然,如果你习惯看英文,

也可以看原版的教程,

作者是用typescript写的。

原文链接:

https://pair-code.github.io/deeplearnjs/demos/complementary-color-prediction/complementary_color_prediction.html

本文分享自微信公众号 - 科技Mix设计Lab(Design-AI-Lab),作者:shadow

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 通过AI,领略皮影戏艺术 | MixLab人工智能

    实验利用 TensorFlow.js,在互动游戏中将用户的手影转换成数字动物。您可通过在笔记本电脑或手机摄像头前摆弄“手型”,形成十二生肖动物的手影。如果手影正...

    mixlab
  • 技术解读《延禧攻略》的色彩搭配

    本文接上一期《用word2vec解读延禧攻略人物关系》,从另外一个角度(色彩),对延禧的剧照及海报的颜色在数据上进行技术解读。通过从网上收集的剧照、海报图片等,...

    mixlab
  • 从技术、设计、AI等角度,谈谈RecordScreen.io

    最近看到艾体验AIUX介绍的一款小工具《录网课的老师,流下了幸福的泪水》,录屏小工具——RecordScreen.io。不需要下载任何安装包,直接浏览器打开就可...

    mixlab
  • 独家科普:谷歌“汉译英”错误率降低60%是怎样算出来的?

    两天前谷歌宣布发布新一代神经网路机器翻译系统(Google Neural Machine Translation),简称GNMT,因为使用当前最先进的训练技术,...

    AI科技评论
  • Science子刊:人脑存在加速学习机制,算力赛过最新AI算法

    机器学习和深度学习算法的起源,是连接大脑中神经元的突触强度的学习机制,它越来越多地影响着当代生活的几乎所有方面。

    新智元
  • 业界 | 谷歌的神经翻译系统并不意味着机器翻译到头了

    AI科技评论按:本文是清华大学教授、中国中文信息学会副理事长孙茂松在MIFS 2016上的演讲实录,AI科技评论编辑整理。此次在北京举办的MIFS 2016是由...

    AI科技评论
  • 并发编程之synchronized VS ReentrantLock

    一、相似点 这两种同步方式有很多相似之处,它们都是加锁方式同步,而且都是阻塞式的同步,也就是说当如果一个线程获得了对象锁,进入了同步块,其他访问该同步块的线程都...

    lyb-geek
  • JS中Arguments对象

    arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数...

    Caleb
  • 八大排序算法稳定性分析,原来稳定性是这个意思...

    2、在一趟选择中,如果当前元素比一个元素小,而该小的元素又出现在一个和当前元素相等的元素后面,那么交换后稳定性就被破坏了;

    谭庆波
  • C++知识点总结篇

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    村雨遥

扫码关注云+社区

领取腾讯云代金券