تبدیل مدل یادگیری ماشین به برنامه وب

0 13 خواندن این مطلب 7 دقیقه زمان میبرد

تبدیل مدل یادگیری ماشین به برنامه وب

در این مطلب، روش تبدیل مدل یادگیری ماشین به برنامه وب همراه با ارائه یک مثال کامل و کاربردی و کدهای پیاده‌سازی آن، آموزش داده شده است. زیبایی «تنسورفلو دات جی‌اس» (TensorFlow.js) در آن است که کاربر می‌تواند یک مدل «یادگیری ماشین» (Machine Learning) را در «زبان برنامه‌نویسی پایتون» (Python Programming Language) با استفاده از «کرس» (Keras) یا «تنسورفلو» (Tensorflow) آموزش دهد و آن را با استفاده از TensorFlow.js در مرورگر وب مستقر کند. کاربر برای این منظور نیازی به اجرای یک سرویس خارجی برای اجرای کوئری‌ها ندارد.

تبدیل مدل یادگیری ماشین به برنامه وب

برنامه کاربردی جالب و ساده‌ای که در این مطلب آموزش داده می‌شود، به کاربر اجازه ترسیم یک رقم در مرورگر را – به کمک موس – می‌دهد و سپس، با استفاده از یک مدل یادگیری ماشین ساده، تشخیص می‌دهد که عدد نوشته شده چیست. کارهای لازم برای ساخت این دمو، شامل موارد زیر است. شایان توجه است که سایر کدهای این پروژه از اینجا در دسترس است.

داده‌های مورد نیاز برای آموزش مدل
محیط آموزش
پیش‌پردازش داده‌ها
یادگیری ماشین
تبدیل یک مدل کرس بهjs
کنواس اچ‌تی‌ام‌ال۵
یکپارچه‌سازی

تصویری از این برنامه در مرورگر وب، در زیر آورده شده است.

داده‌های مورد نیاز برای آموزش مدل

هر مدل یادگیری ماشین، نیازمند داده‌های با کیفیت (برای آموزش دیدن) است. در این مطلب، از مجموعه داده MNIST استفاده شده که مجموعه داده‌ای از اعداد دست نویس است.

در این مجموعه داده، ۶۰,۰۰۰ تصویر وجود دارد که همه در ابعاد 28×2828×28، به صورت سیاه و سفید و با مقادیر پیکسل از ۰ تا ۲۵۵ هستند. قطعه کد زیر، برای بارگذاری و مشاهده مجموعه داده MNIST است.

[php]

%tensorflow_version 2.x
from tensorflow.keras.datasets import mnist
import matplotlib.pyplot as plt

[/php] [php]

(X_train, y_train), (X_test, y_test) = mnist.load_data()
print ("X_train.shape: {}".format(X_train.shape))
print ("y_train.shape: {}".format(y_train.shape))
print ("X_test.shape: {}".format(X_test.shape))
print ("y_test.shape: {}".format(y_test.shape))

[/php]

خروجی قطعه کدهای بالا به صورت زیر است.

X_train.shape: (60000, 28, 28)

y_train.shape: (60000,)

X_test.shape: (10000, 28, 28)

y_test.shape: (10000,)

[php]

plt.subplot(161)
plt.imshow(X_train[3], cmap=plt.get_cmap(‘gray’))
plt.subplot(162)
plt.imshow(X_train[5], cmap=plt.get_cmap(‘gray’))
plt.subplot(163)
plt.imshow(X_train[7], cmap=plt.get_cmap(‘gray’))
plt.subplot(164)
plt.imshow(X_train[2], cmap=plt.get_cmap(‘gray’))
plt.subplot(165)
plt.imshow(X_train[0], cmap=plt.get_cmap(‘gray’))
plt.subplot(166)
plt.imshow(X_train[13], cmap=plt.get_cmap(‘gray’))

plt.show()

[/php]

خروجی قطعه کد بالا، به صورت زیر است.

محیط آموزش

«گوگل کُلَب» (Google Colab) به کاربران این امکان را می‌دهد که کدهای پایتون را در مرورگر بنویسند و اجرا کنند. Colab یک پلتفرم پایتون «ژوپیتر نوت‌بوک» (Jupyter Notebook) است که از پیش، با بسیاری از کتابخانه‌های یادگیری ماشین مورد نیاز کاربر، بارگذاری شده است. این گزینه روشی بی‌دردسر برای اجرای سریع پروژه‌های یادگیری ماشین است. شایان توجه است که گوگل کلب در حال حاضر دسترسی رایگان به GPU/CPU را نیز برای کاربر فراهم می‌کند.

پیش‌پردازش داده‌ها

پیش‌پردازش‌های اندکی باید روی مجموعه داده MNIST انجام شود که در ادامه بیان شده‌اند.

نرمال‌سازی ورودی‌ها؛ داده‌ها با مقادیری از ۰ تا ۲۵۵ ارائه می‌شوند و باید آن‌ها را به مقیاسی از ۰ تا ۱ نرمال کرد.
«کدبندی وان هات» (One-Hot Encoding)خروجی‌ها.

# Normalize Inputs from 0–255 to 0–1x_train = x_train / 255x_test = x_test / 255# One-Hot Encode outputsy_train = np_utils.to_categorical(y_train)y_test = np_utils.to_categorical(y_test)num_classes = 10

یادگیری ماشین

در نهایت، کاربر می‌تواند فعالیت‌های مربوط به ساخت و پیاده‌سازی یادگیری ماشین را انجام دهد. کار با یک مدل بسیار ساده آغاز می‌شود. در این راستا، از یک «شبکه عصبی» (Neural Network) ساده با تنها یک لایه پنهان استفاده شده است. این مدل ساده برای گرفتن خروجی با صحت ٪۹۸ کافی است.

[php]

x_train_simple = x_train.reshape(60000, 28 * 28).astype(‘float32’)
x_test_simple = x_test.reshape(10000, 28 * 28).astype(‘float32’)
model = Sequential()
model.add(Dense(28 * 28, input_dim=28 * 28, activation=’relu’))
model.add(Dense(num_classes, activation=’softmax’))
model.compile(loss=’categorical_crossentropy’, optimizer=’adam’, metrics=[‘accuracy’])
model.fit(x_train_simple, y_train, validation_data=(x_test_simple, y_test), epochs=30, batch_size=200, verbose=2)

[/php]

می‌توان با استفاده از یک مدل «یادگیری عمیق» (Deep Learning) صحت را تا ٪۹۹ افزایش داد.

[php]

x_train_deep_model = x_train.reshape((60000, 28, 28, 1)).astype(‘float32’)
x_test_deep_model = x_test.reshape((10000, 28, 28, 1)).astype(‘float32’)
deep_model = Sequential()
deep_model.add(Conv2D(30, (5, 5), input_shape=(28, 28, 1), activation=’relu’))
deep_model.add(MaxPooling2D())
deep_model.add(Conv2D(15, (3, 3), activation=’relu’))
deep_model.add(MaxPooling2D())
deep_model.add(Dropout(0.2))
deep_model.add(Flatten())
deep_model.add(Dense(128, activation=’relu’))
deep_model.add(Dense(50, activation=’relu’))
deep_model.add(Dense(num_classes, activation=’softmax’))
deep_model.compile(loss=’categorical_crossentropy’, optimizer=’adam’, metrics=[‘accuracy’])
deep_model.fit(x_train_deep_model, y_train, validation_data=(x_test_deep_model, y_test), epochs=30, batch_size=200, verbose=2)

[/php]

البته به طور کلی می‌توان گفت که مدل ارائه شده در اینجا بهترین خروجی ممکن را ندارد و می‌توان از مدل‌های جایگزین بهتری استفاده کرد.

تبدیل مدل Keras به Tensorflow.js

اکنون که مدل آموزش داده شد، باید به منظور استفاده از آن با Tensorflow.js، آن را تبدیل کرد. ابتدا باید مدل را در یک مدل HDF5 ذخیره کرد.

[php]

model.save(“model.h5”)

[/php]

پس از آن، کاربر می‌تواند به فایل‌های ذخیره شده، با کلیک روی آیکون پوشه در قاب سمت چپ، دسترسی داشته باشد.

راه‌هایی برای تبدیل کردن مدل وجود دارد. یک راهکار ساده در نوت‌بوک، استفاده از دستور زیر است.

[php]

!pip install tensorflowjs
!tensorflowjs_converter –input_format keras ‘/content/model.h5’ ‘/content/model’

[/php]

content/model.h5‎/ ورودی و خروجی ذخیره شده در پوشه content/model/ است.

TensorFlow.js باید به فایل JSON (یعنی model.json) اشاره کند و نیاز به یک فایل هم‌نیا به نام «group1-shard1of1.bin» نیاز دارد. به هر دو این فایل‌ها نیاز است، بنابراین باید هر دو آن‌ها را دانلود کرد.

کنواس اچ‌تی‌ام‌ال۵

در ادامه، یک صفحه HTML ساده که از مولفه کنواس اچ‌تی‌ام‌ال۵ استفاده می‌کند باید ساخته شود. کد این صفحه HTML در ادامه آمده است.

[php]

<!doctype html>
<html lang="en">
<head>
<!– Global site tag (gtag.js) – Google Analytics –>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-H0NW5Z2MYC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());

gtag(‘config’, ‘G-H0NW5Z2MYC’);
</script>
<title>Digit Recognition WebApp</title>
<meta name="description" content="Simple Machine Learning Model into an WebApp using TensorFlow.js">
<meta name="keywords" content="Machine Learning, TensorFlow.js">
<meta name="author" content="Carlos Aguayo">
<style>
body {
touch-action: none; /*https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action*/
font-family: "Roboto";
}
h1 {
margin: 50px;
font-size: 70px;
text-align: center;
}
#paint {
border:3px solid red;
margin: auto;
}
#predicted {
font-size: 60px;
margin-top: 60px;
text-align: center;
}
#number {
border: 3px solid black;
margin: auto;
margin-top: 30px;
text-align: center;
vertical-align: middle;
}
#clear {
margin: auto;
margin-top: 70px;
padding: 30px;
text-align: center;
}
</style>
</head>
<body>
<!–<script type="text/javascript" src="http://livejs.com/live.js"></script>–>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.5.2/dist/tf.min.js"></script>
<h1>Digit Recognition WebApp</h1>
<div id="paint">
<canvas id="myCanvas"></canvas>
</div>
<div id="predicted">
Recognized digit
<div id="number"></div>
<button id="clear">Clear</button>
</div>
<script>
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (isMobile) {
$(‘#paint’).css({‘width’: ‘60%’});
$(‘#number’).css({‘width’: ‘30%’, ‘font-size’: ‘240px’});
$(‘#clear’).css({‘font-size’: ’50px’});
} else {
$(‘#paint’).css({‘width’: ‘300px’});
$(‘#number’).css({‘width’: ‘150px’, ‘font-size’: ‘120px’});
$(‘#clear’).css({‘font-size’: ’35px’});
}

var cw = $(‘#paint’).width();
$(‘#paint’).css({‘height’: cw + ‘px’});

cw = $(‘#number’).width();
$(‘#number’).css({‘height’: cw + ‘px’});

// From https://www.html5canvastutorials.com/labs/html5-canvas-paint-application/
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

var compuetedStyle = getComputedStyle(document.getElementById(‘paint’));
canvas.width = parseInt(compuetedStyle.getPropertyValue(‘width’));
canvas.height = parseInt(compuetedStyle.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);

context.lineWidth = isMobile ? 60 : 25;
context.lineJoin = ’round’;
context.lineCap = ’round’;
context.strokeStyle = ‘#0000FF’;

canvas.addEventListener(‘mousedown’, function(e) {
context.moveTo(mouse.x, mouse.y);
context.beginPath();
canvas.addEventListener(‘mousemove’, onPaint, false);
}, false);

canvas.addEventListener(‘mouseup’, function() {
$(‘#number’).html(‘<img id="spinner" src="spinner.gif"/>’);
canvas.removeEventListener(‘mousemove’, onPaint, false);
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0, 28, 28);
data = context.getImageData(0, 0, 28, 28).data;
var input = [];
for(var i = 0; i < data.length; i += 4) {
input.push(data[i + 2] / 255);
}
predict(input);
};
img.src = canvas.toDataURL(‘image/png’);
}, false);

var onPaint = function() {
context.lineTo(mouse.x, mouse.y);
context.stroke();
};

tf.loadLayersModel(‘model/model.json’).then(function(model) {
window.model = model;
});

// http://bencentra.com/code/2014/12/05/html5-canvas-touch-events.html
// Set up touch events for mobile, etc
canvas.addEventListener(‘touchstart’, function (e) {
var touch = e.touches[0];
canvas.dispatchEvent(new MouseEvent(‘mousedown’, {
clientX: touch.clientX,
clientY: touch.clientY
}));
}, false);
canvas.addEventListener(‘touchend’, function (e) {
canvas.dispatchEvent(new MouseEvent(‘mouseup’, {}));
}, false);
canvas.addEventListener(‘touchmove’, function (e) {
var touch = e.touches[0];
canvas.dispatchEvent(new MouseEvent(‘mousemove’, {
clientX: touch.clientX,
clientY: touch.clientY
}));
}, false);

$(‘#clear’).click(function(){
context.clearRect(0, 0, canvas.width, canvas.height);
$(‘#number’).html(”);
});
</script>
</body>
</html>

[/php]

این مورد، امکان نوشتن را برای کاربر فراهم می‌کند. در واقع، در صفحه مرورگر وب، قسمتی (بوم) وجود دارد که کاربر با استفاده از موس، می‌تواند در آن عددی را بنویسد. با استفاده از مولفه HTML5 Canvas می‌توان با استفاده از موس، در بوم نوشت.

[php] canvas.addEventListener(‘mousedown’, function(e) {
context.moveTo(mouse.x, mouse.y);
context.beginPath();
canvas.addEventListener(‘mousemove’, onPaint, false);
}, false);
var onPaint = function() {
context.lineTo(mouse.x, mouse.y);
context.stroke();
};
[/php]

همچنین، Touch Events نیز به آن اضافه می‌شود تا روی موبایل نیز کار کند. touch-action نیز برای غیر فعال کردن اسکرول صفحه، اضافه می‌شود. هنگامی که قابلیت ترسیم فراهم شد، باید تصویر ترسیم شده با موس، واکشی شود. سپس، ابعاد آن به 28×2828×28 کاهش پیدا می‌کند تا با مدل آموزش دیده، تطبیق پیدا کند.

[php] canvas.addEventListener(‘mouseup’, function() {
$(‘#number’).html(‘<img id="spinner" src="spinner.gif"/>’);
canvas.removeEventListener(‘mousemove’, onPaint, false);
var img = new Image();
img.onload = function() {
context.drawImage(img, 0, 0, 28, 28);
data = context.getImageData(0, 0, 28, 28).data;
var input = [];
for(var i = 0; i < data.length; i += 4) {
input.push(data[i + 2] / 255);
}
predict(input);
};
img.src = canvas.toDataURL(‘image/png’);
}, false)
[/php]

سپس، داده‌ها دریافت، در آرایه «input» نگهداری و در نهایت، به تابع پیش‌بینی که در ادامه تعریف خواهد شد، پاس داده می‌شوند.

data یک آرایه تک‌بُعدی با مقادیر RGBA است. مدل تنها مقادیر ۰ تا ۱ (یا ۰ تا ۲۵۵ در حالت سیاه و سفید) را دریافت می‌کند. با توجه به اینکه در بوم به رنگ آبی نوشته می‌شود (با موس و توسط کاربر)، می‌تواند آرایه را به ۴ بخش تقسیم و دومین عنصر هر بخش را دریافت کرد.

یکپارچه‌سازی کلیه موارد

در نهایت، باید TensorFlow.js را بارگذاری و پیش‌بینی را اجرا کرد.

[php]

[/php]

کاربر باید فایل‌های model.json و group1-shard1of1.bin را دانلود و در پوشه‌ای به نام model در پوشه مشابهی که فایل HTML در آن وجود دارد، ذخیره کند. هنگامی که بارگذاری انجام شد، می‌توان مدل آموزش دیده را تنها با استفاده از دستور زیر، بارگذاری کرد.

[php] tf.loadLayersModel(‘model/model.json’).then(function(model) {
window.model = model;
});
[/php]

بعد از ترسیم با موس، وقتی که داده‌ها فراهم شد، می‌توان آن را به عنوان خوراک به مدل داد.

[php] window.model.predict([tf.tensor(input).reshape([1, 28, 28, 1])]).array().then(function(scores){
scores = scores[0];
predicted = scores.indexOf(Math.max(…scores));
$(‘#number’).html(predicted);
});
[/php]

تست کردن برنامه به صورت محلی کار ساده‌ای است و می‌توان یک سرور HTTP را به سادگی برای تست با پایتون راه‌اندازی کرد.

[php] python3 -m http.server 8080
[/php]

برای تست کردن این برنامه با استفاده از تلفن هوشمند، می‌توان از یک ابزار عالی به نام ngrok استفاده کرد.

[php] $ ngrok http 8080
[/php]

این موجب می‌شود که یک تونل به URL زده شود تا کاربر بتواند از طریق گوشی خود دسترسی داشته باشد. هنگامی که کاربر به نتایج مورد نظر خود دست یافت، می‌تواند HTML را در یک سایت میزبانی وب مستقر کند. یک گزینه راحت برای این کار، «گیت‌هاب» (Github) است.

گردآوری توسط: تحقیقستان