（p5.jsの部分は前のケースを参照できます）
1.ニューラルネットワークに基づく線形回帰
ニューラルネットワークモデル
ニューラルネットワークで線形方程式を表現する方法
tf.sequential（シンプルなレイヤーごとのネットワークオーバーレイ）を使用する
公式サイト：https : //js.tensorflow.org/api/latest/#sequential
効果：画面上のマウスクリック、およびトレーニング後の線形フィッティング
コードと設計のアイデア：test.js
xs = [];
ys = [];
// 1. 搭建神经网络结构
const model = tf.sequential();
model.add(tf.layers.dense({ // 添加神经网络层；dense层相当于FC（全连接层）
units: 1, // 输出层神经元的个数
inputShape: [2] // 输入层神经元个数，只在第一层使用
}));
// model.predict(tf.ranndomNormal([1,2])).print()
// 2.训练准备工作：声明optimizer和loss
const Optimizer = tf.train.sgd(0.2) // learning rating=0.2
const config = {
optimizer: Optimizer,
loss: tf.losses.meanSquaredError, // 自带的loss函数
}
model.compile(config);
// 3. 输入点
function mousePressed() {
let x = map(mouseX, 0, width, 0, 1); // format
let y = map(mouseY, 0, height, 0, 1);
xs.push([x, 1]); // 鼠标点击值x1，以及一个不变量1
ys.push(y);
console.log(xs);
}
function setup() {
createCanvas(400, 400); // 创建画布
background(0); // 设置背景颜色
}
function draw() {
background(0, 0, 0);
stroke(255, 255, 255);
strokeWeight(15);
// 4. 在画布上画点
for (let i = 0; i < xs.length; i++) {
let x = map(xs[i][0], 0, 1, 0, width);
let y = map(ys[i], 0, 1, 0, height);
point(x, y);
}
if (xs.length >= 5) { // 输入数据大于5才进行操作
// 把xs,ys转化为tensor类型
const inputs = tf.tensor2d(xs);
outputs = tf.tensor1d(ys);
// 5. 使用fit训练模型
async function train() {
for (let i = 1; i < 500; i++) {
const h = await model.fit(inputs, outputs,{
// await：下一个的结果是在上一个结果的基础上进行优化
// （如果没有await就会有多个fit线程）
batchSize: 2, // 一次训练的数目
epochs: 1 // 所有数据训练一遍
});
console.log("Loss after Epoch " + i + " : " + h.history.loss[0]);
}
}
// 6. 画线（训练完成之后才会进行其他操作）
train().then(() => {
linex = [[0, 1], [1, 1]];
tflinex = tf.tensor2d(linex);
output_tem = model.predict(tflinex);
output_tem = output_tem.dataSync(); // 类型转换
x1 = map(linex[0][0], 0, 1, 0, width);
x2 = map(linex[1][0], 0, 1, 0, width);
y1 = map(output_tem[0], 0, 1, 0, height);
y2 = map(output_tem[1], 0, 1, 0, height);
strokeWeight(5);
line(x1, y1, x2, y2);
})
noLoop()
}
}index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style> body {padding: 0; margin: 0;} </style>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js">
</script>
<script src="../p5.js"></script>
<script src="../addons/p5.sound.js"></script>
<script src="test.js"></script>
</head>
<body>
</body>
</html>
2.ニューラルネットワークを使用して多項式回帰を行う
アイデア：中間にあるより多くの非表示ノード（最も重要なのはアクティベーション機能です）
非表示のレイヤーを追加する
類似アイテムを単純化してマージした後、これは実際には線形モデルであり、実用的な意味がないため、アクティベーション関数が必要です。
パラメータを調整して、変化を観察します。
- アクティベーター活性化関数のシグモイド、relu、tanhを調整します
- 学習率0.2、0.1、0.01の学習率を変更
- オプティマイザを調整します：sgd、adam
- ネットワーク層の数を増やす
（Reluは十分にスムーズではありません。多くのレイヤーを追加した後、Reluポリラインを使用するとより多くなり、Sigmoidを使用するとグラデーションが消えて表示される場合があります。また、ネットワークが複雑であるほど優れています）
エフェクト表示：
1.使用relu、adam、学習率= 0.01
2.使用relu、adam、learning rate = 0.1
3. tanh、adam、learning rate = 0.01を使用
4.使用シグモイド、アダム、学習率= 0.01
5. tanh、sgd、学習率= 0.01
xs = [];
ys = [];
// 1. 搭建神经网络结构
const model = tf.sequential();
model.add(tf.layers.dense({
units: 10,
inputShape: [2],
activation: 'sigmoid' // 激活函数可以选择sigmoid,relu,tanh
}));
model.add(tf.layers.dense({
units: 10,
activation: 'sigmoid'
}));
model.add(tf.layers.dense({
units: 1, // 输出为一维
}));
// 2.训练准备工作：声明optimizer和loss
const Optimizer = tf.train.sgd(0.01) // learning rating=0.2
/* 注意：
sgd一般没有adam好
1. sgd收敛慢 抖动较大 但是比较通用
2. adam对于训练数据的拟合能力比较强 */
const config = {
optimizer: Optimizer,
loss: tf.losses.meanSquaredError, // 自带的loss函数
}
model.compile(config);
// 3. 输入点
function mousePressed() {
let x = map(mouseX, 0, width, 0, 1); // format
let y = map(mouseY, 0, height, 0, 1);
xs.push([x, 1]); // 鼠标点击值x1，以及一个不变量1
ys.push(y);
console.log(xs);
}
function setup() {
createCanvas(400, 400); // 创建画布
background(0); // 设置背景颜色
}
function draw() {
background(0, 0, 0);
stroke(255, 255, 255);
strokeWeight(15);
// 4. 在画布上画点
for (let i = 0; i < xs.length; i++) {
let x = map(xs[i][0], 0, 1, 0, width);
let y = map(ys[i], 0, 1, 0, height);
point(x, y);
}
if (xs.length >= 10) { // 输入数据大于5才进行操作
// 把xs,ys转化为tensor类型
const inputs = tf.tensor2d(xs);
outputs = tf.tensor1d(ys);
// 5. 使用fit训练模型
async function train() {
for (let i = 1; i < 500; i++) {
const h = await model.fit(inputs, outputs,{
// await：下一个的结果是在上一个结果的基础上进行优化
// （如果没有await就会有多个fit线程）
batchSize: 2, // 一次训练的数目
epochs: 1 // 所有数据训练一遍
});
console.log("Loss after Epoch " + i + " : " + h.history.loss[0]);
}
}
// 6. 画线
train().then(() => {
let linex = [];
for (let x = 0; x < 1; x += 0.01) {
linex.push([x, 1]);
}
tflinex = tf.tensor2d(linex);
output_tem = model.predict(tflinex);
output_tem = output_tem.dataSync(); // 类型转换
beginShape();
noFill();
stroke(255);
strokeWeight(5);
for (let i = 0; i < linex.length; i++) {
let x = map(linex[i][0], 0, 1, 0, width);
let y = map(output_tem[i], 0, 1, 0, height);
vertex(x, y);
}
endShape();
})
noLoop()
}
}3.ニューラルネットワークを使用して分類
ラウンドの場合、出力を1として、三角形の出力を0として近似してみてください。
目標：最初の3つのフィッティング効果は1に近く、最後の4つのフィッティング効果は0に近い
結果は示す：
xs = [];
ys = [];
const model = tf.sequential();
model.add(tf.layers.dense({
units: 10,
inputShape: [2],
activation: 'sigmoid'
}));
model.add(tf.layers.dense({
units: 10,
activation: 'sigmoid'
}));
model.add(tf.layers.dense({
units: 1,
}));
const Optimizer = tf.train.adam(0.1)
const config = {
optimizer: Optimizer,
loss: tf.losses.meanSquaredError,
}
model.compile(config);
const inputs = tf.tensor2d([[1, 1], [2, 1], [3, 2], [1, 2],[2, 3], [1, 3], [3, 1]]);
const outputs = tf.tensor2d([[1], [1], [1], [0], [0], [0], [0]]); // 标签
function setup() {
createCanvas(400, 400);
background(0);
}
function draw() {
model.predict(inputs).print();
async function train() {
for (let i = 1; i < 500; i++) {
const h = await model.fit(inputs, outputs,{
batchSize: 100,
epochs: 1
});
console.log("Loss after Epoch " + i + " : " + h.history.loss[0]);
}
}
train().then(() => {
model.predict(inputs).print(); // 输出预测结果
})
noLoop()
}
