Создайте предиктор Emoji Digit в записной книжке Юпитера, передавая данные между JavaScript & Python. Как правило, Javascripts используются для визуализации данных в ноутбуках, но его также можно использовать для прототипирования фронтального/пользовательского интерфейса для моделей глубокого обучения.
Краткий ответ:
Поделитесь ноутбуком Deep Learning Model с коллегами из разных команд, таких как Business, Data Science, Front End Developer, DevOps для их мнения до развития реального программного обеспечения.
Notebook Jupyter предназначена для быстрого прототипирования, и все это знают, но многие пропускают, что мы также можем сделать быстрый прототип пользовательского интерфейса. Многие ученые по данным быстро начать Создание большой модели глубокого обучения с любыми небольшими данными, которые они имеют, даже не задумываясь о том, что они развивают и для кого 🤷 ♂ ️. Поверьте мне, первая модель, которой вы удовлетворены (на основе таких показателей, как точность), не будет развернута в производстве по различным причинам, таким как время медленного вывода, без поддержки на устройстве, памяти, снимая бла-бла. Даже опытные менеджеры по проектам/продуктам иногда не будут знать, чего они действительно хотят, поэтому сначала попытайтесь получить рабочий процесс или конвейер от всех вовлеченных игроков, даже если некоторые вещи проскользнут сквозь трещину. « Я ученый для данных, моя работа состоит в том, чтобы создать модели ML – это не правильное мышление, по крайней мере, на мой взгляд. «Немного знания в бизнесе, веб -разработке, DevOps могут помочь вам сэкономить кучу времени в попытках отладить или объяснить, почему модель/рабочий процесс, который вы создали, является лучшим для бизнеса. Лучше быть Джеком всех сделок здесь. Кстати, это не означает, что вы должны взять на себя обязанности своих коллег. Просто попробуйте понять, что происходит вне вашего круга. В этом посте позвольте мне поделиться примером того, как создание простого пользовательского интерфейса для ввода и вывода для модели глубокого обучения может помочь вам увидеть трещины в вашем рабочем процессе и повысить производительность.
Если вы не знакомы с Mnist Набор данных тогда просто знайте, что вы можете построить Digit Emoji Predictor Поскольку набор данных содержит серо-масштабные изображения нарисованных вручную цифр, от нуля до девяти. Таким образом, наш пользовательский интерфейс позволит пользователю провести цифру и отобразить соответствующие смайлики.
Во -первых, мы решим, что мы собираемся построить? Вместо создания с нуля давайте попробуем воссоздать Распознавание цифр В ноутбуке без использования Django. Выбранный нами вариант использования великолепен, потому что мы не можем просто использовать Pywidgets
, это заставляет нас копать глубоко в мир HTML & JavaScript. В более длительном забеге этот маршрут имеет больше преимуществ из-за неограниченных возможностей, свободных ресурсов и, что более важно, ближе к фактическому фронтальному. Конечно, если все, что вам нужно, это слайдер, просто катитесь с Pywidgets
Анкет Сначала мы настроем заднюю часть, а затем вернемся к пользовательскому интерфейсу.
Я обучил модель глубокого обучения CNN, используя Pytorch
, мы просто скачаем модель и веса из Здесь Анкет Это простая модель с 3 Конверные блоки и 2 Полностью соединенный слой Анкет Преобразования, используемые для этой модели, являются Изменение размера
& Fotensor
Анкет Призывая прогнозировать
Функция на изображении мы получим прогнозируемую цифру.
import torch import torch.nn as nn import torch.nn.functional as F from torchvision import transforms # Digit Recognizer model definition class CNN(nn.Module): def __init__(self): super(CNN, self).__init__() self.conv1 = nn.Conv2d(1, 32, kernel_size=5) self.conv2 = nn.Conv2d(32, 32, kernel_size=5) self.conv3 = nn.Conv2d(32,64, kernel_size=5) self.fc1 = nn.Linear(3*3*64, 256) self.fc2 = nn.Linear(256, 10) def forward(self, x): x = F.relu(self.conv1(x)) x = F.dropout(x, p=0.5, training=self.training) x = F.relu(F.max_pool2d(self.conv2(x), 2)) x = F.dropout(x, p=0.5, training=self.training) x = F.relu(F.max_pool2d(self.conv3(x),2)) x = F.dropout(x, p=0.5, training=self.training) x = x.view(-1,3*3*64 ) x = F.relu(self.fc1(x)) x = F.dropout(x, training=self.training) x = self.fc2(x) return x # Predict the digit given the tensor def predict(image, modelName = 'mnist_model.pth'): # Resize before converting the image to Tensor Trfms = transforms.Compose([transforms.Resize(28), transforms.ToTensor()]) # Apply transformations and increase dim for mini-batch dimension imageTensor = Trfms(image).unsqueeze(0) # Download model from URL and load it model = torch.load(modelName) # Activate Eval mode model.eval() # Pass the image tensor by the model & return max index of output with torch.no_grad(): out = model(imageTensor) return int(torch.max(out, 1)[1])
Нам нужна вспомогательная функция, чтобы преобразовать BASE64 Изображение (Область холста, в которой пользователь собирается нарисовать цифру) до PIL Image Анкет
import re, base64 from PIL import Image from io import BytesIO # Decode the image drawn by the user def decodeImage(codec): # remove the front part of codec base64_data = re.sub('^data:image/.+;base64,', '', codec) # base64 decode byte_data = base64.b64decode(base64_data) # Convert to bytes image_data = BytesIO(byte_data) # Convert to image & convert to grayscale img = Image.open(image_data).convert('L') return img
Теперь давайте комбинируем две функции, а именно декодеамаж
и прогнозировать
как отдельная функция. Этот способ проще, потому что вывод функции (emoji HTML -код) может быть непосредственно передан в тег HTML через JavaScript. Пойдите немного, если вы запутались, в следующем разделе все будет намного проще.
# Decode the image and predict the value def decode_predict(imgStr): # Decode the image image = decodeImage(imgStr) # Declare html codes for 0-9 emoji emojis = [ "0️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣" ] # Call the predict function digit = predict(image) # get corresponding emoji return emojis[digit]
Часть HTML & CSS довольно проста, JavaScript позволяет пользователю рисовать внутри холста и вызовов с помощью кнопок Прогнозировать
& Ясно
Анкет Ясно
Кнопка очищает холст и устанавливает результат для 🤔 emoji. Мы настроем Прогнозировать
Кнопка JS функционирует в следующем разделе.
from IPython.display import HTML html = """""" css = """ """ javascript = """ """ HTML(html + css + javascript)Digit Emoji Predictor 🚀
Draw a digit from 0️⃣ - 9️⃣ 🤔
Большой! Мы можем нарисовать внутри холста и, нажав на Ясно
Кнопка, холст очищен. Хитрая часть начинается, когда пользователь нажимает Прогнозировать
кнопка, как мы делаем следующее:
- JS на Python 👉 Возьмите рисунок внутри холста и передайте его на Python
/* PASS CANVAS BASE64 IMAGE TO PYTHON VARIABLE imgStr*/ var imgData = canvasObj.toDataURL(); var imgVar = 'imgStr'; var passImgCode = imgVar + " = '" + imgData + "'"; var kernel = IPython.notebook.kernel; kernel.execute(passImgCode);
- Python to JS 👉 Установите предсказанный смайлик как значение элемента HTML (
#Result
)
/* CALL PYTHON FUNCTION "decode_predict" WITH "imgStr" AS ARGUMENT */ function handle_output(response) { /* UPDATE THE HTML BASED ON THE OUTPUT */ var result = response.content.data["text/plain"].slice(1, -1); document.getElementById("result").innerHTML = result; } var callbacks = { 'iopub': { 'output': handle_output, } }; var getPredictionCode = "decode_predict(imgStr)"; kernel.execute(getPredictionCode, callbacks, { silent: false });
Связывая все вместе.
predictJS = """ """ HTML(predictJS)
У нас есть хорошие и плохие новости, хорошо – это связь с данными между Python и JavaScript, но все значения прогноза ошибочны (сопоставлено с тем же значением – 8). Давайте сравним изображение холста, переданное с изображением набора данных Python и MNIST.
Теперь ясно, что нам нужно инвертировать
Изображение, потому что модель была обучена набору данных с черным фоном и белыми ударами.
# Invert the image as model expects black background & white strokes image = PIL.ImageOps.invert(image)
import PIL.ImageOps # Decode the image and predict the value def decode_predict(imgStr): # Decode the image image = decodeImage(imgStr) # Invert the image as model expects black background & white strokes image = PIL.ImageOps.invert(image) # Declare html codes for 0-9 emoji emojis = [ "0️⃣", "1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣", "6️⃣", "7️⃣", "8️⃣", "9️⃣" ] # Call the predict function digit = predict(image) # get corresponding emoji return emojis[digit]
Потрясающий! Оно работает.
Теперь вы можете быстро поделиться этим ноутбуком со всеми и спросить их мнение. Не забудьте упомянуть о предостережении, что это ранний прототип. Без особых усилий мы как бы воспроизводили функции веб -приложения. Самый большой плюс – мы никогда не оставляли комфорта ноутбука и потенциально преодолевали разрыв между данными обучения и тестирования.
Надеюсь, мне удалось убедить вас в том, что основные навыки веб -разработчика действительно полезны для ученых данных. Доступ к ноутбуку можно получить из Здесь Анкет Не стесняйтесь обращаться через комментарии или Twitter Анкет
Оригинал: “https://dev.to/6aravind/digit-emoji-predictor-build-ui-for-deep-learning-model-in-notebook-2gf0”