javascript - 如何提高前馈神经网络的准确性？

Question

我想用这个神经网络绘制 StackOverflow 的标志:

NN 应该理想地变为 [r, g, b] = f([x, y])。换句话说，它应该返回给定坐标对的 RGB 颜色。 FFNN 非常适用于圆形或盒子等简单形状。例如，在几千个 epoch 之后，一个圆圈看起来像这样:

自己试试:https://codepen.io/adelriosantiago/pen/PoNGeLw

然而，由于 StackOverflow 的 logo 复杂得多，即使经过数千次迭代，FFNN 的结果也有些差:

从左到右:

StackOverflow 的 logo 有 256 种颜色。

有 15 个隐藏神经元:左 handle 永远不会出现。

50 个隐藏的神经元:总的来说结果很差。

0.03 作为学习率:在结果中显示蓝色(蓝色不在原始图像中)

一个时间递减的学习率:左 handle 出现，但其他细节现在丢失。

自己试试:https://codepen.io/adelriosantiago/pen/xxVEjeJ
一些感兴趣的参数是synaptic.Architect.Perceptron定义和learningRate值(value)。

如何提高此 NN 的准确性？
你能改进片段吗？如果是这样，请解释你做了什么。如果有更好的神经网络架构来解决这类工作，你能提供一个例子吗？
附加信息:

使用的人工神经网络库:Synaptic.js

要在本地主机中运行此示例:See repository

Answer 1

通过添加另一层，您可以获得更好的结果:

let perceptron = new synaptic.Architect.Perceptron(2, 15, 10, 3)

您可以做一些小的改进来提高效率(略微):
这是我的优化代码:

const width = 125
const height = 125
const outputCtx = document.getElementById("output").getContext("2d")
const iterationLabel = document.getElementById("iteration")
const stopAtIteration = 3000
let perceptron = new synaptic.Architect.Perceptron(2, 15, 10, 3)
let iteration = 0

let inputData = (() => {
  const tempCtx = document.createElement("canvas").getContext("2d")
  tempCtx.drawImage(document.getElementById("input"), 0, 0)
  return tempCtx.getImageData(0, 0, width, height)
})()

const getRGB = (img, x, y) => {
  var k = (height * y + x) * 4;
  return [
    img.data[k] / 255, // R
    img.data[k + 1] / 255, // G
    img.data[k + 2] / 255, // B
    //img.data[(height * y + x) * 4 + 3], // Alpha not used
  ]
}
const paint = () => {
  var imageData = outputCtx.getImageData(0, 0, width, height)
  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      var rgb = perceptron.activate([x / width, y / height])
      var k = (height * y + x) * 4;
      imageData.data[k] = rgb[0] * 255
      imageData.data[k + 1] = rgb[1] * 255
      imageData.data[k + 2] = rgb[2] * 255
      imageData.data[k + 3] = 255 // Alpha not used
    }
  }
  outputCtx.putImageData(imageData, 0, 0)

  setTimeout(train, 0)
}

const train = () => {
  iterationLabel.innerHTML = ++iteration

  if (iteration > stopAtIteration) return

  let learningRate = 0.01 / (1 + 0.0005 * iteration) // Attempt with dynamic learning rate
  //let learningRate = 0.01 // Attempt with non-dynamic learning rate
      
  for (let x = 0; x < width; x += 1) {
    for (let y = 0; y < height; y += 1) {
      perceptron.activate([x / width, y / height])
      perceptron.propagate(learningRate, getRGB(inputData, x, y))
    }
  }
  paint()
}

const startTraining = (btn) => {
  btn.disabled = true
  train()
}

编辑:我制作了另一个 CodePen，效果更好:

https://codepen.io/xurei/pen/KKzWLxg
顺便说一句，它很可能是过度拟合的。
感知器定义:

let perceptron = new synaptic.Architect.Perceptron(2, 8, 15, 7, 3)