Библиотека ml5.js предоставляет удобные инструменты для работы с машинным обучением в браузере на языке JavaScript. Одной из ключевых возможностей является визуализация процесса обучения моделей, что позволяет наблюдать за изменением показателей и состоянием сети в реальном времени. Это особенно важно при обучении нейронных сетей, когда понимание динамики ошибки и точности помогает корректировать гиперпараметры и предотвращать переобучение.
Для работы с визуализацией обучения необходимы:
или npm.callback для отслеживания процесса обучения.Пример создания модели регрессии:
const options = {
task: 'regression',
debug: true
};
const nn = ml5.neuralNetwork(options);
Ключевой момент: debug: true
автоматически включает вывод статистики обучения в консоль. Это
простейший способ визуализации, но для более наглядного контроля
требуется собственная обработка событий
trainingProgress.
Функция train() модели принимает объект с параметрами
обучения и колбэки:
const trainingOptions = {
epochs: 50,
batchSize: 12,
learningRate: 0.01
};
nn.train(trainingOptions, whileTraining, finishedTraining);
function whileTraining(epoch, loss) {
console.log(`Эпоха: ${epoch}, Потеря: ${loss.loss}`);
}
function finishedTraining() {
console.log('Обучение завершено');
}
Объяснение:
epoch — номер текущей эпохи.loss.loss — значение функции потерь на текущей
эпохе.whileTraining вызывается после каждой эпохи, что
позволяет обновлять графики или визуальные индикаторы на странице.finishedTraining вызывается после завершения всего
обучения.Для более наглядного отображения процесса используется библиотека Chart.js или p5.js. В сочетании с ml5.js можно строить графики изменения функции потерь или точности на каждой эпохе.
Пример с использованием p5.js для построения
динамического графика потерь:
let losses = [];
function whileTraining(epoch, loss) {
losses.push(loss.loss);
}
function drawGraph() {
background(255);
stroke(0);
noFill();
beginShape();
for (let i = 0; i < losses.length; i++) {
let x = map(i, 0, losses.length - 1, 0, width);
let y = map(losses[i], 0, max(losses), height, 0);
vertex(x, y);
}
endShape();
}
Особенности подхода:
drawGraph() вызывается в цикле отрисовки
p5.js, обеспечивая реальное обновление графика на каждой
эпохе.losses хранит историю изменений функции потерь,
что позволяет анализировать скорость сходимости и колебания.ml5.js также позволяет получать доступ к слоям и весам сети, что важно для анализа внутреннего состояния модели.
const layerWeights = nn.model.layers[0].getWeights();
console.log(layerWeights);
Можно строить визуализацию активаций нейронов, особенно полезную при работе с convolutional neural networks (CNN):
Помимо графиков, удобно выводить текущие значения в текстовые поля:
Эпоха:
Потеря:
function whileTraining(epoch, loss) {
document.getElementById('epochDisplay').textContent = epoch;
document.getElementById('lossDisplay').textContent = loss.loss.toFixed(4);
}
Преимущество такого подхода: мгновенный визуальный контроль без использования сторонних библиотек.
На практике часто комбинируют:
Такой подход позволяет получить полное представление о ходе обучения и вовремя корректировать параметры модели, предотвращая проблемы переобучения или медленной сходимости.