Создайте предиктор 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”