00、背景

要实现一个机器学习的算法，我们javaer程序员习惯编写后端代码，经常会遇到nginx配置、NullPointerException、CPU、IO的报警、服务器的不定期扩容，及运维的不可控等等一系列工作和问题。

有没好办法，直接调用云原生的服务，没有专人运维，解决以上痛点？

01、效果

将使用在 MNIST 数据集上训练的手写数字识别模型的演示示例。

静态文件：

可以部署在oss上，执行：

npm install http-server -g

02、ONNX简介

开放神经网络交换ONNX（Open Neural Network Exchange）是一套表示深度神经网络模型的开放格式，由微软和Facebook于2017推出，然后迅速得到了各大厂商和框架的支持。通过短短几年的发展，已经成为表示深度学习模型的实际标准，并且通过ONNX-ML，可以支持传统非神经网络机器学习模型，统一整个AI模型交换标准。

ONNX定义了一组与环境和平台无关的标准格式，为AI模型的互操作性提供了基础，使AI模型可以在不同框架和环境下交互使用。硬件和软件厂商可以基于ONNX标准优化模型性能，让所有兼容ONNX标准的框架受益。目前，ONNX主要关注在模型预测方面（inferring），使用不同框架训练的模型，转化为ONNX格式后，可以很容易地部署在兼容ONNX的运行环境中。

03、再介绍下ONNX.JS

微软开源的，目前已经由ONNX Runtime Web替代

1、ONNX.JS 是一个 JavaScript 库，用于在浏览器和 Node.js 上运行ONNX模型

2、ONNX.JS 采用了 WebAssembly 和 WebGL 技术，为 CPU 和 GPU 提供优化的 ONNX 模型推理 Runtime

04、使用 ONNX.js 在浏览器中运行 PyTorch 模型

共有三步：

1、将 PyTorch 模型转换为 ONNX 格式

2、使用 ONNX.js 在您的网站或应用程序中加载该 ONNX 模型

3、使用 JavaScript 在浏览器中运行 PyTorch 模型

05、在浏览器中运行模型的好处

• 使用较小的模型进行更快的推理
• 易于托管和扩展（仅限静态文件）
• 离线支持
• 用户隐私（可以保留设备上的数据）

06、使用后端服务器的好处

• 加载时间更快（不必下载模型）
• 较大模型的推理时间更快且一致（可以利用 GPU 或其他加速器）
• 模型隐私（如果您想保密，则不必共享您的模型）

07、主要代码

可视化数据集

def main():
train_loader = torch.utils.data.DataLoader(
torchvision.datasets.MNIST(
'data', train=True, download=True,
transform=torchvision.transforms.Compose([
torchvision.transforms.RandomAffine(
degrees=30, translate=(0.5, 0.5), scale=(0.25, 1),
shear=(-30, 30, -30, 30)),

torchvision.transforms.ToTensor(),
])),
batch_size=800)
inputs_batch, labels_batch = next(iter(train_loader))
grid = torchvision.utils.make_grid(inputs_batch, nrow=40, pad_value=1)
torchvision.utils.save_image(grid, 'inputs_batch_preview.png')

训练模型

def main():
# Training settings
parser = argparse.ArgumentParser(description='PyTorch MNIST Example')
parser.add_argument('--batch-size', type=int, default=64, metavar='N',
help='input batch size for training (default: 64)')
parser.add_argument('--test-batch-size', type=int, default=1000, metavar='N',
help='input batch size for testing (default: 1000)')
parser.add_argument('--epochs', type=int, default=14, metavar='N',
help='number of epochs to train (default: 14)')
parser.add_argument('--lr', type=float, default=1.0, metavar='LR',
help='learning rate (default: 1.0)')
parser.add_argument('--gamma', type=float, default=0.7, metavar='M',
help='Learning rate step gamma (default: 0.7)')
parser.add_argument('--no-cuda', action='store_true', default=False,
help='disables CUDA training')
parser.add_argument('--seed', type=int, default=1, metavar='S',
help='random seed (default: 1)')
parser.add_argument('--log-interval', type=int, default=10, metavar='N',
help='how many batches to wait before logging training status')

parser.add_argument('--save-model', action='store_true', default=False,
help='For Saving the current Model')
args = parser.parse_args()
use_cuda = not args.no_cuda and torch.cuda.is_available()

torch.manual_seed(args.seed)

device = torch.device("cuda" if use_cuda else "cpu")

kwargs = {'num_workers': 1, 'pin_memory': True} if use_cuda else {}
train_loader = torch.utils.data.DataLoader(
datasets.MNIST('data', train=True, download=True,
transform=transforms.Compose([
# Add random transformations to the image.
transforms.RandomAffine(
degrees=30, translate=(0.5, 0.5), scale=(0.25, 1),
shear=(-30, 30, -30, 30)),

transforms.ToTensor(),
transforms.Normalize((0.1307,), (0.3081,))
])),
batch_size=args.batch_size, shuffle=True, **kwargs)
test_loader = torch.utils.data.DataLoader(
datasets.MNIST('data', train=False, transform=transforms.Compose([
transforms.ToTensor(),
transforms.Normalize((0.1307,), (0.3081,))
])),
batch_size=args.test_batch_size, shuffle=True, **kwargs)

model = Net().to(device)
optimizer = optim.Adadelta(model.parameters(), lr=args.lr)

scheduler = StepLR(optimizer, step_size=1, gamma=args.gamma)
for epoch in range(1, args.epochs + 1):
train(args, model, device, train_loader, optimizer, epoch)
test(args, model, device, test_loader)
scheduler.step()

torch.save(model.state_dict(), "pytorch_model.pt")

PyTorch 模型转换为 ONNX 格式

def main():
pytorch_model = Net()
pytorch_model.load_state_dict(torch.load('pytorch_model.pt'))
pytorch_model.eval()
dummy_input = torch.zeros(280 * 280 * 4)
torch.onnx.export(pytorch_model, dummy_input, 'onnx_model.onnx', verbose=True)

前端代码

const CANVAS_SIZE = 280;
const CANVAS_SCALE = 0.5;

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const clearButton = document.getElementById("clear-button");

let isMouseDown = false;
let hasIntroText = true;
let lastX = 0;
let lastY = 0;

// Load our model.
const sess = new onnx.InferenceSession();
const loadingModelPromise = sess.loadModel("./onnx_model.onnx");

ctx.lineWidth = 28;
ctx.lineJoin = "round";
ctx.font = "28px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#212121";
ctx.fillText("加载中...", CANVAS_SIZE / 2, CANVAS_SIZE / 2);

ctx.strokeStyle = "#212121";

function clearCanvas() {
ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
for (let i = 0; i < 10; i++) {
const element = document.getElementById(`prediction-${i}`);
element.className = "prediction-col";
element.children[0].children[0].style.height = "0";
}
}

function drawLine(fromX, fromY, toX, toY) {
// Draws a line from (fromX, fromY) to (toX, toY).
ctx.beginPath();
ctx.moveTo(fromX, fromY);
ctx.lineTo(toX, toY);
ctx.closePath();
ctx.stroke();
updatePredictions();
}

async function updatePredictions() {
const imgData = ctx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE);
const input = new onnx.Tensor(new Float32Array(imgData.data), "float32");

const outputMap = await sess.run([input]);
const outputTensor = outputMap.values().next().value;
const predictions = outputTensor.data;
const maxPrediction = Math.max(...predictions);

for (let i = 0; i < predictions.length; i++) {
const element = document.getElementById(`prediction-${i}`);
element.children[0].children[0].style.height = `${predictions[i] * 100}%`;
element.className =
predictions[i] === maxPrediction
? "prediction-col top-prediction"
: "prediction-col";
}
}

function canvasMouseDown(event) {
isMouseDown = true;
if (hasIntroText) {
clearCanvas();
hasIntroText = false;
}
const x = event.offsetX / CANVAS_SCALE;
const y = event.offsetY / CANVAS_SCALE;

// To draw a dot on the mouse down event, we set laxtX and lastY to be
// slightly offset from x and y, and then we call `canvasMouseMove(event)`,
// which draws a line from (laxtX, lastY) to (x, y) that shows up as a
// dot because the difference between those points is so small. However,
// if the points were the same, nothing would be drawn, which is why the
// 0.001 offset is added.
lastX = x + 0.001;
lastY = y + 0.001;
canvasMouseMove(event);
}

function canvasMouseMove(event) {
const x = event.offsetX / CANVAS_SCALE;
const y = event.offsetY / CANVAS_SCALE;
if (isMouseDown) {
drawLine(lastX, lastY, x, y);
}
lastX = x;
lastY = y;
}

function bodyMouseUp() {
isMouseDown = false;
}

function bodyMouseOut(event) {
if (!event.relatedTarget || event.relatedTarget.nodeName === "HTML") {
isMouseDown = false;
}
}

loadingModelPromise.then(() => {
canvas.addEventListener("mousedown", canvasMouseDown);
canvas.addEventListener("mousemove", canvasMouseMove);
document.body.addEventListener("mouseup", bodyMouseUp);
document.body.addEventListener("mouseout", bodyMouseOut);
clearButton.addEventListener("mousedown", clearCanvas);

ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
ctx.fillText("在这里写一个数字!", CANVAS_SIZE / 2, CANVAS_SIZE / 2);
})