Чтение данных из файловой системы

Основы работы с файловой системой в браузере

Keras.js — это библиотека, позволяющая запускать модели Keras в браузере на JavaScript. В отличие от серверных решений, взаимодействие с файловой системой ограничено стандартами веб-браузеров. Прямой доступ к файловой системе невозможен, но доступны несколько подходов для загрузки данных:

  • File API — взаимодействие с локальными файлами через .
  • Fetch API / XMLHttpRequest — загрузка файлов с сервера.
  • IndexedDB — хранение и последующий доступ к данным в браузере.

Эти механизмы позволяют подготавливать данные для передачи в Keras.js и использовать модели для инференса.

Загрузка локальных файлов через File API

File API предоставляет объект FileList при выборе файлов пользователем:

const inputElement = document.getElementById("fileInput");

inputElement.addEventListener("change", (event) => {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onl oad = function(e) {
        const arrayBuffer = e.target.result;
        // Данные можно использовать для предобработки перед подачей в Keras.js
    };

    reader.readAsArrayBuffer(file);
});

Ключевые моменты:

  • FileReader.readAsArrayBuffer() возвращает бинарные данные, удобные для дальнейшей конвертации в тензоры.
  • Необходимо обрабатывать события onload и onerror для корректного чтения файлов.

Загрузка файлов с сервера

Для моделей, обученных на Keras, часто требуется загрузка весов и конфигураций в формате JSON/HDF5. В Keras.js обычно используют веса в формате .bin и модель в формате .json.

async function loadModel(modelUrl, weightsUrl) {
    const response = await fetch(modelUrl);
    const modelJSON = await response.json();

    const weightsResponse = await fetch(weightsUrl);
    const weightsArrayBuffer = await weightsResponse.arrayBuffer();

    const model = new KerasJS.Model({
        filepaths: {
            model: modelUrl,
            weights: weightsUrl
        },
        filesystem: true
    });

    await model.ready();
    return model;
}

Важные аспекты:

  • Использование fetch с arrayBuffer() для бинарных весов обеспечивает правильное чтение формата, совместимого с Keras.js.
  • Инициализация модели через KerasJS.Model требует указания всех файлов: конфигурации и весов.

Конвертация данных в тензоры

Keras.js работает с объектом Tensor для передачи данных в модель. Для преобразования массивов или бинарных данных используют Float32Array или Int32Array в зависимости от типа входа:

const inputData = new Float32Array([0.5, 0.8, 0.1, 0.2]);
const inputTensor = new KerasJS.Tensor(inputData, [1, 4]); // shape: [batch_size, features]

Особенности:

  • Размерность (shape) должна точно соответствовать ожиданиям модели.
  • Для изображений данные обычно нормализуются и преобразуются в формат Float32Array с размерностью [1, height, width, channels].

Чтение изображений и подготовка данных

Работа с изображениями требует дополнительного преобразования из формата Image или Canvas в тензор:

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

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    const floatData = new Float32Array(canvas.width * canvas.height * 3);

    for (let i = 0, j = 0; i < data.length; i += 4, j += 3) {
        floatData[j] = data[i] / 255.0;       // R
        floatData[j + 1] = data[i + 1] / 255.0; // G
        floatData[j + 2] = data[i + 2] / 255.0; // B
    }

    return new KerasJS.Tensor(floatData, [1, canvas.height, canvas.width, 3]);
}

Ключевые моменты:

  • Канал альфа (A) игнорируется.
  • Нормализация значений пикселей в диапазон [0, 1] обязательна для корректного предсказания моделей, обученных на нормализованных данных.
  • Порядок каналов (RGB или BGR) должен совпадать с тем, что использовалось при обучении модели.

Асинхронная загрузка и обработка больших данных

Для больших файлов или батчей изображений важно использовать асинхронные операции и оптимизировать потребление памяти:

  • Разделение данных на чанки и последовательная загрузка.
  • Использование Web Workers для предобработки без блокировки основного потока.
  • Очистка объектов ArrayBuffer после конверсии в тензоры для предотвращения утечек памяти.
async function processBatch(files) {
    const tensors = [];
    for (const file of files) {
        const arrayBuffer = await file.arrayBuffer();
        const floatData = new Float32Array(arrayBuffer);
        tensors.push(new KerasJS.Tensor(floatData, [1, floatData.length]));
    }
    return tensors;
}

Использование IndexedDB для хранения моделей и данных

IndexedDB позволяет хранить весовые файлы и входные данные между сессиями:

const request = indexedDB.open('kerasjsDB', 1);

request.onupgradenee ded = (event) => {
    const db = event.target.result;
    db.createObjectStore('models');
    db.createObjectStore('inputData');
};

request.onsucc ess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction(['models'], 'readwrite');
    const store = transaction.objectStore('models');
    store.put(weightsArrayBuffer, 'myModelWeights');
};

Преимущества:

  • Сокращение времени загрузки моделей.
  • Возможность работы офлайн.
  • Организация кэширования входных данных для повторного использования.
Оглавление