Работа с File API для загрузки изображений пользователем

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

Подключение и настройка ml5.js

Для работы с ml5.js достаточно подключить библиотеку через CDN или локально:

<script src="https://cdn.jsdelivr.net/npm/ml5@latest/dist/ml5.min.js"></script>

JavaScript-часть может быть встроена в <script> тег либо вынесена в отдельный файл. Основной объект для работы с изображениями — ml5.imageClassifier, который позволяет классифицировать загруженные пользователем изображения с использованием предобученных моделей (например, MobileNet, Darknet).

Основы File API

File API предоставляет интерфейсы File, FileList и FileReader для получения доступа к локальным файлам. Ключевые моменты:

  • File — объект, представляющий один файл, загруженный пользователем.
  • FileList — коллекция объектов File, например, из <input type="file" multiple>.
  • FileReader — асинхронный инструмент для чтения содержимого файла (в виде Data URL, текста или ArrayBuffer).

Пример HTML для загрузки изображений:

<input type="file" id="imageUpload" accept="image/*">
<img id="preview" src="" alt="Preview" width="300">

Загрузка и отображение изображений

Использование FileReader для отображения изображения перед обработкой:

const imageInput = document.getElementById('imageUpload');
const preview = document.getElementById('preview');

imageInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onl oad = function(e) {
        preview.src = e.target.result;
    };
    reader.readAsDataURL(file);
});

Здесь readAsDataURL преобразует файл в Base64-строку, которую можно использовать в src тега <img>.

Интеграция с ml5.js

После загрузки изображения его можно классифицировать с помощью модели. Пример с MobileNet:

let classifier;

ml5.imageClassifier('MobileNet')
    .then(c => {
        classifier = c;
        console.log('Модель загружена');
    });

imageInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (!file || !classifier) return;

    const reader = new FileReader();
    reader.onl oad = function(e) {
        preview.src = e.target.result;
        preview.onl oad = function() {
            classifier.classify(preview)
                .then(results => {
                    console.log('Результаты классификации:', results);
                })
                .catch(err => console.error(err));
        };
    };
    reader.readAsDataURL(file);
});

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

  • Модель загружается один раз и используется для всех последующих изображений.
  • classifier.classify() принимает элемент <img> или <video> и возвращает массив объектов с label и confidence.
  • Обработка асинхронная, поэтому важно использовать промисы (.then) или async/await.

Поддержка нескольких файлов

File API позволяет загружать несколько изображений одновременно. Используется атрибут multiple:

<input type="file" id="multiUpload" accept="image/*" multiple>
<div id="previews"></div>

Jav * aScript:

const multiInput = document.getElementById('multiUpload');
const previewsContainer = document.getElementById('previews');

multiInput.addEventListener('change', function(event) {
    previewsContainer.innerHTML = '';
    const files = event.target.files;

    Array.from(files).forEach(file => {
        const reader = new FileReader();
        const img = document.createElement('img');
        img.width = 150;

        reader.onl oad = function(e) {
            img.src = e.target.result;
            previewsContainer.appendChild(img);

            img.onl oad = function() {
                classifier.classify(img)
                    .then(results => {
                        const p = document.createElement('p');
                        p.textContent = `${results[0].label} (${(results[0].confidence * 100).toFixed(2)}%)`;
                        previewsContainer.appendChild(p);
                    });
            };
        };
        reader.readAsDataURL(file);
    });
});

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

  • Создаются отдельные <img> для каждого файла.
  • После загрузки изображения происходит классификация.
  • Результаты отображаются под каждым изображением с указанием вероятности.

Рекомендации по производительности

  • Для больших изображений рекомендуется уменьшать размер через Canvas перед классификацией, чтобы снизить нагрузку на браузер.
  • Асинхронная обработка позволяет не блокировать UI при загрузке нескольких файлов.
  • Предзагрузка модели перед загрузкой файлов уменьшает задержку при классификации первого изображения.

Использование Canvas для предобработки

function resizeImage(img, width, height) {
    const canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);
    return canvas;
}

img.onl oad = function() {
    const resized = resizeImage(img, 224, 224);
    classifier.classify(resized)
        .then(results => console.log(results));
};

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

Особенности безопасности

  • File API работает только в контексте браузера, обеспечивая доступ только к файлам, явно выбранным пользователем.
  • Нет прямого доступа к файловой системе без выбора файла.
  • Data URL безопасен для передачи изображения в ml5.js без сохранения на сервере.

Итоговый подход

Комбинация File API, FileReader, Canvas и ml5.js позволяет создавать интерактивные веб-приложения, где пользователь загружает свои изображения, а модель в браузере классифицирует их с визуальной обратной связью. Такой подход минимизирует серверную нагрузку и обеспечивает конфиденциальность данных.

Оглавление