Как создать приложение для непрерывного машинного обучения

Это проще, чем вы думаете!

Введение:

Вы задавались вопросом, как показать миру свои навыки и знания и, вероятно, иметь в своем резюме потрясающий проект?

У вас может быть идея или даже реализация указанной идеи, будь то на Kaggle или в вашем локальном рабочем пространстве. Хорошо !, но как вы это покажете кому-то еще - отправьте им ссылку на свой блокнот Kaggle или репозиторий GitHub?

Звучит громоздко, разве не было бы круто или удобно иметь приложение, чтобы показать им вашу образцовую работу. Поэтому я попытаюсь объяснить, как вы можете построить полный рабочий процесс. Проект, который я взял, - это распознавание рукописных цифр. Идея довольно проста: мы рисуем цифру, а затем угадываем ее значение от 0 до 9. (Ах! Еще одна BS с распознаванием цифр, поверьте мне, это многое объяснит, и вы можете построить что-то намного круче). Развернем наш проект на Heroku. Сообщите мне, как можно улучшить эту статью.

Вы спросите, как мы это сделаем?

Ответ довольно прост: все, что вам нужно, - это некоторые базовые знания HTML, CSS и JavaScript. Это поможет построить наш интерфейс. В качестве бэкэнда мы будем использовать флягу. Все это нормально, но с чего начать, какой архитектуре нужно придерживаться? - это некоторые вопросы, на которые нужно ответить, прежде чем мы даже начнем кодировать это.

С чего начать ?!

Что ж, ответ на этот извечный вопрос - сначала узнать, какова именно наша цель. Я знаю, что задал себе слишком много вопросов: P (большинство из них риторические). Но это действительно необходимо для нашей проблемы. Структура проекта будет:

Итак, это отвечает на оба наших вопроса. Во-первых, мы будем хранить все статические файлы (CSS, JS) в папке с метким названием static, а наш index.html в папке с именем templates . Важно, чтобы эти имена не менялись. На этом мы закончили настройку нашего шаблона.

Во-вторых, архитектура, которой мы будем следовать, является одной из многих, и есть много способов добиться этого. Мы будем использовать следующий поток:

Пользователь рисует цифру на холсте HTML5 и нажимает кнопку отправки.
Это изображение кодируется в base64 на стороне клиента, чтобы уменьшить объем вычислений на сервере.
Закодированная строка будет получена нашим сервером (который находится на Python), затем мы декодируем эту строку, чтобы преобразовать ее в изображение. Мы будем использовать AJAX для взаимодействия клиент-сервер.
Затем мы выполним некоторые базовые операции с этим изображением, чтобы соответствовать нашей модели машинного обучения, которая уже сохранена, поэтому мы не будем тренировать ее снова и снова. Это можно будет сделать в будущем для получения лучших результатов, но мы ограничимся, чтобы сэкономить время на этой статье.

В этом посте я просто расскажу вам, как создать наш интерфейс. Если вам понравился этот пост, следите за обновлениями на стороне сервера! (Вот и мы снова, какой-то парень пытается наладить отношения с пользователями).

Сторона клиента

Итак, я использовал базовый HTML, CSS и JS для создания своего веб-приложения, но для вас нет никаких ограничений, если вы чувствуете себя комфортно в создании лучшего, я говорю, продолжайте и дайте мне знать: P. Я любитель потрясающе выглядящих веб-страниц!

Моя целевая страница (индекс) будет помещена в папку «шаблоны», а файлы CSS и JS будут помещены в «статическую» папку. Мы будем использовать только сценарий JQuery для запуска запросов и ответов. Код для холста выглядит так

var canvas = document.getElementById(‘myCanvas’);
var ctx = canvas.getContext(‘2d’);
var painting = document.getElementById(‘paint’);
var paint_style = getComputedStyle(painting);
canvas.width = parseInt(paint_style.getPropertyValue(‘width’));
canvas.height = parseInt(paint_style.getPropertyValue(‘height’));
var mouse = { x: 0, y: 0 };
canvas.addEventListener(‘mousemove’, function (e) {
mouse.x = e.pageX — this.offsetLeft;
mouse.y = e.pageY — this.offsetTop;
}, false);
ctx.lineWidth = 10;
ctx.lineJoin = ‘round’;
ctx.lineCap = ‘round’;
ctx.strokeStyle = ‘white’;
ctx.fillStyle = ‘black’;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
var onPaint = function () {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};

Приведенный выше код создаст нужный холст с черным фоном и белым цветом обводки. Мы устанавливаем фон, если мы этого не сделаем, тогда результатом будет изображение только с штрихами, что может затруднить предсказание цифры. Теперь основной код можно найти на моем GitHub.

Для обработки кнопок Отправить и Очистить нам необходимо добавить JavaScript для их обработки.

Код для этого может быть похож на

На данный момент наш холст может обнаруживать только движения мыши, но не касания. Также можно добавить сенсорные движения, но это уже отдельная история.

Что я делаю, так это добавляю EventListener для движений мыши - при наведении курсора мыши слушатель закрывается, поэтому штрихи не меняются. Функция clearArea () очистит холст, и это произойдет всякий раз, когда мы нажимаем кнопку «Очистить» или «Отправить». Использование innerHTML будет объяснено позже. Функция toDataURL () закодирует холст в base64: который будет использоваться FLask.

Надеюсь, вам понравилась эта статья, следите за новостями, и скоро я опубликую еще одну для обучения нашей модели и бэкэнда.

Как создать приложение для непрерывного машинного обучения