Визуализация предсказаний в браузере

Для работы с Keras.js необходимо иметь модель, экспортированную из Keras в формате JSON вместе с весами в бинарных файлах .bin. Эти файлы загружаются в браузер и используются для выполнения инференса на клиентской стороне. Подключение библиотеки производится через <script> или через пакетный менеджер:

<script src="https://cdn.jsdelivr.net/npm/keras-js@0.8.0/dist/keras.min.js"></script>

Инициализация модели выполняется следующим образом:

const model = new KerasJS.Model({
  filepath: 'model.json',
  gpu: true  // использование WebGL для ускорения вычислений
});

await model.ready();

Флаг gpu: true позволяет использовать WebGL, что значительно повышает производительность при работе с большими сетями. В случае его отсутствия библиотека автоматически переключится на CPU.

Подготовка входных данных

Модель Keras.js ожидает данные в виде TypedArray. Для изображений чаще всего используется формат Float32Array с нормализованными значениями от 0 до 1. Преобразование изображения из элемента <img> или <canvas> в массив выполняется через CanvasRenderingContext2D:

const canvas = document.createElement('canvas');
canvas.width = 224;
canvas.height = 224;
const ctx = canvas.getContext('2d');
ctx.drawImage(imgElement, 0, 0, 224, 224);

const imageData = ctx.getImageData(0, 0, 224, 224);
const data = new Float32Array(224 * 224 * 3);

for (let i = 0; i < 224 * 224; i++) {
  data[i * 3 + 0] = imageData.data[i * 4 + 0] / 255; // R
  data[i * 3 + 1] = imageData.data[i * 4 + 1] / 255; // G
  data[i * 3 + 2] = imageData.data[i * 4 + 2] / 255; // B
}

Важно правильно упорядочивать каналы и учитывать формат модели: многие модели Keras используют channels_last (HWC).

Выполнение предсказаний

После подготовки данных модель принимает объект, где ключи соответствуют именам входов, указанным в Keras:

const inputData = { input_1: data };
const outputData = await model.predict(inputData);

outputData — объект, где ключи соответствуют именам выходов. Если модель имеет один выход, можно получить массив вероятностей или значений напрямую.

Визуализация результатов

Визуализация классификации

Для задач классификации часто требуется отобразить вероятности классов или выбрать класс с максимальной вероятностью:

const classProbabilities = outputData['output_1'];
const maxIndex = classProbabilities.indexOf(Math.max(...classProbabilities));
console.log(`Предсказанный класс: ${maxIndex}`);

Для визуального представления можно использовать бар-графики, где высота колонок отражает вероятность:

const canvas = document.getElementById('chartCanvas');
const ctx = canvas.getContext('2d');
const width = canvas.width / classProbabilities.length;

classProbabilities.forEach((prob, i) => {
  ctx.fillStyle = 'steelblue';
  ctx.fillRect(i * width, canvas.height * (1 - prob), width - 2, canvas.height * prob);
});

Визуализация регрессии

Для моделей регрессии или генеративных моделей результат чаще всего представлен в виде массива значений, который можно отображать как график или изображение:

const outputArray = outputData['output_1'];
const imgCanvas = document.getElementById('outputCanvas');
const imgCtx = imgCanvas.getContext('2d');
const imgData = imgCtx.createImageData(28, 28);

for (let i = 0; i < 28 * 28; i++) {
  const value = Math.floor(outputArray[i] * 255);
  imgData.data[i * 4 + 0] = value;
  imgData.data[i * 4 + 1] = value;
  imgData.data[i * 4 + 2] = value;
  imgData.data[i * 4 + 3] = 255;
}

imgCtx.putImageData(imgData, 0, 0);

Такой подход используется, например, для вывода сгенерированных рукописных цифр или картинок из генеративных моделей.

Интерактивная визуализация

Для улучшения восприятия результатов можно объединить предсказания с взаимодействием пользователя, позволяя обновлять визуализацию в реальном времени при изменении входного изображения или параметров модели:

document.getElementById('inputImage').addEventListener('change', async (e) => {
  const img = new Image();
  img.src = URL.createObjectURL(e.target.files[0]);
  img.onl oad = async () => {
    const inputData = preprocess(img); // функция преобразования изображения
    const outputData = await model.predict(inputData);
    renderOutput(outputData); // функция отрисовки на canvas
  };
});

Особенности работы с браузером

  • Использование WebGL через Keras.js ускоряет выполнение инференса, но требует совместимых драйверов и браузеров.
  • При работе с большими моделями необходимо учитывать ограничения памяти браузера, чтобы избежать сбоев.
  • Для асинхронной работы лучше применять async/await и разделять обработку данных и визуализацию.

Интеграция с библиотеками визуализации

Для сложной визуализации удобно комбинировать Keras.js с графическими библиотеками, такими как:

  • D3.js — интерактивные графики вероятностей.
  • Chart.js — простое построение диаграмм для классификации.
  • PixiJS или Three.js — для визуализации изображений и 3D-моделей, полученных из генеративных сетей.

Правильная интеграция обеспечивает плавную работу интерфейса, отображение изменений в реальном времени и интерактивное исследование данных без необходимости обращения к серверной части.

Оглавление