Легко выбирайте параметры для слоев свертки в нейронных сетях.

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

Здесь вы можете найти онлайн-калькулятор:



Калькулятор свертки для CNN
Простое проектирование слоев свертки для нейронных сетей.www.oliver-ernst.com



Вы также можете встроить его на свой веб-сайт — это проект JS с зависимостями от jQuery, Bootstrap и значков материалов Google. Вы можете следовать инструкциям по встраиванию его на свой веб-сайт со страницы проекта на GitHub:



GitHub — smrfeld/convolution-calculator: Калькулятор свертки для CNN
Это калькулятор, который поможет вам построить слои свертки в нейронных сетях. Посмотреть готовый продукт можно на…github.com



Я оставлю краткое объяснение калькулятора на его о странице. В оставшейся части этой статьи я объясню, как я это сделал.

Как я это сделал

Попробуйте 1/4

Я сделал первые демонстрации в блокнотах Mathematica. Самое замечательное в Mathematica то, что, в отличие от Python, невероятно легко смешивать графики и трехмерные объекты, такие как кубы. Недостатком является, конечно, то, что он в основном останется в вашей записной книжке Mathematica (на самом деле есть способ поделиться контентом Mathematica в Интернете, но он используется недостаточно).

Попробуйте 2/4

Затем я переключился на Python. Я подумал, что могу сделать веб-приложение, используя Dash and plotly, которое показывает 3D-модели на основе кубов и позволяет пользователю изменять параметры свертки. Изучив это, мне не понравился вывод 3D-моделей таким образом — конечный продукт выглядел несуразно и не вел себя плавно, так как пытался выдать сюжет за интерактивную графику.

Попробуйте 3/4

Затем я подумал, что могу использовать Python для создания изображения SVG, которое показывается пользователю. SVG — отличный формат файла для Интернета, потому что у вас могут быть разные части, которые вы можете скрыть непосредственно из JS. SVG по сути является XML, поэтому он выглядит как HTML-код и напрямую «встраивается» в конечную статическую HTML-страницу.

Чтобы быстро писать и отлаживать код, я использовал pycairo для создания файлов SVG непосредственно из Python. Это аккуратный проект, хотя для работы только с файлами SVG в Python он не нужен.

Недостатком всей этой забавы с Python является то, что конечный продукт не может быть статической веб-страницей — Python должен где-то работать, поэтому Dash, Flask или чему-то еще нужен сервер. Для небольших проектов Heroku может быть хорошим выбором для размещения вашего веб-приложения Python, но это все же гораздо более головная боль, чем статическая страница. Статические страницы можно размещать на страницах GitHub, что бесплатно, а бесплатность — это круто.

Попробуйте 4/4

В конечном итоге это привело к реализации JS в конечном продукте. Он построен с использованием jQuery, а также использует значки Bootstrap 4 + Google Material (которые вы можете поискать здесь). Это оказалось гораздо большей головной болью, чем я ожидал, пытаясь сделать так, чтобы 3D-объект выглядел красиво через 2D-изображения SVG, включая изменение размера в окне браузера и затенение для внутренних и внешних частей, но я думаю, что конечный результат того стоит.

Вставьте его на свой сайт

Калькулятор выпущен под лицензией MIT, поэтому вы можете встроить его на свой сайт.

  1. Добавьте зависимости: иконки jQuery, Bootstrap 4 и Material:
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- Google Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. Добавьте JS-файл калькулятора свертки. Я наткнулся на эту замечательную опцию jsDelivr CDN (которая даже делает для вас уменьшенную версию), так что вы можете просто использовать:

<script src="https://cdn.jsdelivr.net/gh/smrfeld/convolution-calculator/convCalc.min.js"></script>

3. Вставьте div, в который будет загружен контент:

<div id='ccContainer'></div>

4. Наконец, запустите JS для вставки рисунка в div при загрузке страницы:

<script>
    $(document).ready(function() {
        // Set up
        ccSetUp();
    });
</script>

Это заполнит div ccContainer.

Спасибо за прочтение — оставляйте критические замечания в комментариях или вносите свой вклад в GitHub, если вы готовы — только не будьте слишком строги к моему JS-коду :)