BP神经网络3D可视化实战：从数据降维到交互式呈现

1次阅读

共计 2075 个字符，预计需要花费 6 分钟才能阅读完成。

在深度学习的模型调试和教学过程中，BP 神经网络常常因其黑箱特性而让人感到难以理解。传统的可视化方法，如二维热力图，虽然简单直观，但在展示高维权重空间时存在明显的信息损失。更不用说静态图像缺乏交互性，无法让使用者从不同角度观察网络结构。本文将介绍一种基于 PCA 降维和 Three.js 的 3D 可视化方案，帮助大家更直观地理解神经网络的工作原理。

信息损失严重：二维热力图只能展示权重的绝对值或变化趋势，无法呈现高维空间中的分布特征。
缺乏交互性：静态图像无法旋转、缩放，难以从多角度观察网络结构。
层次关系模糊：传统方法难以清晰展示不同层之间的连接关系。

在权重可视化中，常用的降维方法有 t -SNE 和 PCA：

t-SNE：擅长保留局部结构，但计算复杂度高，不适合实时交互
PCA：计算效率高，能保留主要方差，适合实时渲染

我们选择 PCA+Three.js 组合，因为：

PCA 能快速将高维权重降到 3 维
Three.js 提供强大的 WebGL 渲染能力
组合方案可实现实时交互

import torch
import torch.nn as nn

class Net(nn.Module):
    def __init__(self):
        super(Net, self).__init__()
        self.fc1 = nn.Linear(784, 256)
        self.fc2 = nn.Linear(256, 10)

# 注册钩子获取权重
weights = {}

def get_weights(name):
    def hook(model, input, output):
        weights[name] = model.weight.detach().cpu().numpy()
    return hook

model = Net()
model.fc1.register_forward_hook(get_weights('fc1'))
model.fc2.register_forward_hook(get_weights('fc2'))

from sklearn.decomposition import PCA

# 合并所有层的权重
all_weights = np.concatenate([w.flatten() for w in weights.values()])

# PCA 降维
pca = PCA(n_components=3)
weights_3d = pca.fit_transform(all_weights)

# 查看方差解释比例
print(f'解释方差比例: {pca.explained_variance_ratio_}')

// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

// 添加控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

// 创建权重点云
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.Float32BufferAttribute(weightsData, 3));

const material = new THREE.PointsMaterial({
    size: 0.1,
    color: 0x00ff00
});

const points = new THREE.Points(geometry, material);
scene.add(points);

面对大规模数据点时，WebGL 渲染可以考虑以下策略：