【webAI】deeplearn.js的线性回归

最新推荐文章于 2024-08-09 07:09:35 发布

原创最新推荐文章于 2024-08-09 07:09:35 发布 · 993 阅读

3 ·

CC 4.0 BY-SA版权

Web 同时被 2 个专栏收录

29 篇文章

订阅专栏

web技术实验室

26 篇文章

订阅专栏

本文通过一个简单的线性回归实例介绍了如何使用deeplearn.js进行数据拟合。该实例首先生成了一组带有随机偏移的数据点，然后利用deeplearn.js构建了一个线性模型，并通过随机梯度下降法进行训练。最后使用Highcharts绘制了原始数据点及训练得到的回归直线。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Github

https://github.com/ns2250225/deeplearnjs-examples/tree/master/linear%20regression

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 引入deeplearn.js 库 -->
    <script src="https://unpkg.com/deeplearn@latest"></script>
    <!-- 引入highcharts.js 库 -->
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
</head>
<body>
    <div id="container" style="width: 600px;height:400px;"></div>

    <script src="app.js"></script>
</body>
</html>

app.js


// 初始化图形数据
const data1 = [] 
for (let i=0; i<100; i++) {
    let tmp_x = Math.random() * 10
    let offset = Math.random() * 10
    let tmp_y = tmp_x * 3 + offset
    data1.push({
        x: tmp_x,
        y: tmp_y
    })
}


/**
 * 以下部分为deeplearn.js
 */
const x_list = []
const y_list = []

for (let elem of data1) {
    x_list.push(elem.x)
    y_list.push(elem.y)
}

const x_data = dl.tensor1d(x_list)
const y_data = dl.tensor1d(y_list)

const Weights = dl.variable(dl.randomUniform([1]))
const Biases = dl.variable(dl.zeros([1]))

// 定义模型和损失函数
const f = x => Weights.mul(x).add(Biases)
const loss = (pred, label) => pred.sub(label).square().mean()
// 定义优化器，这里用sgd
const learningRate = 0.01
const optimizer = dl.train.sgd(learningRate)

// 训练模型
for (let i = 0; i < 100; i++) {
    optimizer.minimize(() => loss(f(x_data), y_data))
}


// 得出预测后的Weights和Biases
const w_predict = Weights.dataSync()
const b_predict = Biases.dataSync()

// 散点图数据
const data_scatter = []
for (let elem of data1) {
    data_scatter.push([elem.x, elem.y])
}
// 直线数据
const data_line = [
    [0, parseFloat(0 * w_predict + b_predict)],
    [10, parseFloat(10 * w_predict + b_predict)]
]

// 绘出结果直线-散点图
var options = {
    title: {
        text: 'deeplearn.js的线性回归'                 
    },
    xAxis: {
        min: 0,
        max: 10
    },
    yAxis: {
        min: 0,
        max: 60
    },
    series: [
        {
            type: 'line',
            data: data_line
        },  
        {
            type: 'scatter',
            marker: {
                symbol: 'cross',  
                radius: 4         
            },
            data: data_scatter
        }
    ]
}
// 图表初始化函数
var chart = Highcharts.chart('container', options);