استفاده از مدل Train شده با Keras در پلتفرم های مختلف

سلام به دوستان عزیز، این آموزش تلاشی برای کاربردی کردن تمارین و مدل های ارائه شده در کلاس تحت پلتفرم های مختلف می باشد. در ادامه روند اجرای مدل تحت وب را با هم میبینیم و سپس شما هم با کمی تغییر در این پروسه می توانید یادگیری عمیق را به پلتفرم خودتان ببرید!

برای شروع، نیاز به ذخیره کردن مدل بعد از عملیات های compile و train می باشد، شما می توانید با استفاده از دستورات زیر به راحتی این کار را انجام دهید و یک فایل خروجی از مدل خود داشته باشید و یا از آن در برنامه ای دیگر استفاده کنید!

from keras.models import load_model

model.save('my_model.h5')  # creates a HDF5 file 'my_model.h5'
del model  # deletes the existing model

# returns a compiled model
# identical to the previous one
model = load_model('my_model.h5')

from keras.models import load_model

model.save('my_model.h5') # creates a HDF5 file 'my_model.h5'

del model # deletes the existing model

# returns a compiled model

# identical to the previous one

model = load_model('my_model.h5')

در مرحله بعد کافیست کمی در اینترنت جستجو کنید و کتابخانه مربوط به زبان برنامه نویسی خود و فریمورک کراس را بیابید، در ادامه ما از کتابخانه Keras.js استفاده خواهیم کرد.

آخرین لحظات در پایتون

لینک دانلود کتابخانه کراس جی اس در اینجا

با اجرای دستور زیر در پوشه python کتابخانه، فایل خروجی خود را برای مدل جاوا اسکریپتی بهینه کنید.

./encoder.py -q /path/to/model.h5

1	./encoder.py -q /path/to/model.h5

جریان اجرایی پروژه

در مرحله اول، نیاز به رسم اعداد و دستخط افراد وجود دارد، اینکار به راحتی با قابلیت canvas در html صورت می پذیرد (توضیحات بیشتر در اینجا)

توابع رسم اعداد

$(document).ready(function(){
		$("canvas").mousedown(function (e) {
        $(this).mousemove(function (e) {
            draw(e)
            
        });
    }).mouseup(function () {
        $(this).unbind('mousemove');
    }).mouseout(function () {
        $(this).unbind('mousemove');
    });

/////////////

 $("canvas").on('touchstart', function(event){
 
        $("canvas").on('touchmove', function(event){
        
        	draw(event,false)

		});

});

////////////



});

var arr = [];
var drawX = [];
var drawY = [];
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle="#000000";
context.fillRect(0,0,100,100);


function draw(e , noTouch = true) {

    var pos = getMousePos(canvas, e, noTouch);
    posx = pos.x;
    posy = pos.y;
    drawX.push(posx);
    drawY.push(posy);
    context.fillStyle = "#FFFFFF";
    context.beginPath();
    context.arc(posx, posy, 3, 0, 2*Math.PI);
    context.fill();

}

function getMousePos(canvas, evt, noTouch = true) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: ((noTouch)?evt.clientX:evt.originalEvent.touches[0].pageX) - rect.left,
      y: ((noTouch)?evt.clientY:evt.originalEvent.touches[0].pageY) - rect.top
    };

}

$(document).ready(function(){

$("canvas").mousedown(function (e) {

$(this).mousemove(function (e) {

draw(e)

});

}).mouseup(function () {

$(this).unbind('mousemove');

}).mouseout(function () {

$(this).unbind('mousemove');

});

/////////////

$("canvas").on('touchstart', function(event){

$("canvas").on('touchmove', function(event){

draw(event,false)

});

////////////

});

var arr = [];

var drawX = [];

var drawY = [];

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.fillStyle="#000000";

context.fillRect(0,0,100,100);

function draw(e , noTouch = true) {

var pos = getMousePos(canvas, e, noTouch);

posx = pos.x;

posy = pos.y;

drawX.push(posx);

drawY.push(posy);

context.fillStyle = "#FFFFFF";

context.beginPath();

context.arc(posx, posy, 3, 0, 2*Math.PI);

context.fill();

}

function getMousePos(canvas, evt, noTouch = true) {

var rect = canvas.getBoundingClientRect();

return {

x: ((noTouch)?evt.clientX:evt.originalEvent.touches[0].pageX) - rect.left,

y: ((noTouch)?evt.clientY:evt.originalEvent.touches[0].pageY) - rect.top

};

}

توابع گرفتن خروجی عکس و ارسال آن به سرور

function exportImg(){

          console.log(Math.max(...drawX),Math.max(...drawY));  
          var img    = canvas.toDataURL("image/png");
          

            $(document).ready(function(){

                    $.post("imageProcessing.php",
                    {
                      img: img,
                      max_x: Math.max(...drawX) + 5,
                      max_y: Math.max(...drawY) + 5,
                      min_x: Math.min(...drawX) - 5,
                      min_y: Math.min(...drawY) - 5
                    },
                    function(data,status){
                        //alert("Data: " + data + "\nStatus: " + status);
                        arr = JSON.parse(data);
                        predict();
                        clear();
                    });

            });

}

function exportImg(){

console.log(Math.max(...drawX),Math.max(...drawY));

var img = canvas.toDataURL("image/png");

$(document).ready(function(){

$.post("imageProcessing.php",

{

img: img,

max_x: Math.max(...drawX) + 5,

max_y: Math.max(...drawY) + 5,

min_x: Math.min(...drawX) - 5,

min_y: Math.min(...drawY) - 5

function(data,status){

//alert("Data: " + data + "\nStatus: " + status);

arr = JSON.parse(data);

predict();

clear();

});

}

اما تصویر ارسال شده به سرور نیاز به کمی تغییرات در سایز (متناسب با مدل) و همچنین برش آن ها دارد. شما در ادامه تابع برش تصویر را میبینید.

function crop(){

	$dst_x = 0;   // X-coordinate of destination point
	$dst_y = 0;   // Y-coordinate of destination point
	$src_x = $_POST['min_x']; // Crop Start X position in original image
	$src_y = $_POST['min_y']; // Crop Srart Y position in original image
	$dst_w = $_POST['max_x'] - $_POST['min_x']; // Thumb width
	$dst_h = $_POST['max_y'] - $_POST['min_y']; // Thumb height
	$src_w = $_POST['max_x']; // Crop end X position in original image
	$src_h = $_POST['max_y']; // Crop end Y position in original image
	// Creating an image with true colors having thumb dimensions (to merge with the original image)
	$dst_image = imagecreatetruecolor($dst_w, $dst_h);
	// Get original image
	$src_image = imagecreatefrompng('number.png');
	// Cropping

	imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h,$dst_w, $dst_h);
	imagepng($dst_image, 'number.png');

}

function crop(){

$dst_x = 0; // X-coordinate of destination point

$dst_y = 0; // Y-coordinate of destination point

$src_x = $_POST['min_x']; // Crop Start X position in original image

$src_y = $_POST['min_y']; // Crop Srart Y position in original image

$dst_w = $_POST['max_x'] - $_POST['min_x']; // Thumb width

$dst_h = $_POST['max_y'] - $_POST['min_y']; // Thumb height

$src_w = $_POST['max_x']; // Crop end X position in original image

$src_h = $_POST['max_y']; // Crop end Y position in original image

// Creating an image with true colors having thumb dimensions (to merge with the original image)

$dst_image = imagecreatetruecolor($dst_w, $dst_h);

// Get original image

$src_image = imagecreatefrompng('number.png');

// Cropping

imagecopyresampled($dst_image, $src_image, $dst_x, $dst_y, $src_x, $src_y, $dst_w, $dst_h,$dst_w, $dst_h);

imagepng($dst_image, 'number.png');

}

در نهایت بعد از انجام عملیات های Preprocessing، حال نوبت به استفاده از کتابخانه کراس جی اس است.

<script src="https://unpkg.com/keras-js"></script>
function predict(){
    const model = new KerasJS.Model({
  filepath: './hoda.bin',
});
model
  .ready()
  .then(() => {
    // input data object keyed by names of the input layers
    // or `input` for Sequential models
    // values are the flattened Float32Array data
    // (input tensor shapes are specified in the model config)

    
    const inputData = {
      "input": new Float32Array(arr)
        //[0.6,0.89,0,0,1,1,0,0.3,1,0,0,1,1,0,0,0,1,0.3,0,0,0,1,0,0,0]
    }
    console.log(inputData,arr);

    // make predictions
    return model.predict(inputData)
  })
  .then(outputData => {
    // outputData is an object keyed by names of the output layers
    // or `output` for Sequential models
    // e.g.,
    // outputData['fc1000']
    
    outputData = outputData.output;
    let maxIndex = 0;
    let max = outputData[0];
    for (var i = 0; i < outputData.length; i++) {
        if(outputData[maxIndex] <= outputData[i]){
            maxIndex = i;            
        }
        

    }
    document.getElementById("message").textContent = 'Number is : ' + maxIndex;
    //alert('Number is : ' + maxIndex);
    //console.log(maxIndex,outputData);
  })
  .catch(err => {
    // handle error
    console.log(err);
  })
}

function predict(){

const model = new KerasJS.Model({

filepath: './hoda.bin',

});

model

.ready()

.then(() => {

// input data object keyed by names of the input layers

// or `input` for Sequential models

// values are the flattened Float32Array data

// (input tensor shapes are specified in the model config)

const inputData = {

"input": new Float32Array(arr)

//[0.6,0.89,0,0,1,1,0,0.3,1,0,0,1,1,0,0,0,1,0.3,0,0,0,1,0,0,0]

}

console.log(inputData,arr);

// make predictions

return model.predict(inputData)

})

.then(outputData => {

// outputData is an object keyed by names of the output layers

// or `output` for Sequential models

// e.g.,

// outputData['fc1000']

outputData = outputData.output;

let maxIndex = 0;

let max = outputData[0];

for (var i = 0; i < outputData.length; i++) {

if(outputData[maxIndex] <= outputData[i]){

maxIndex = i;

}

document.getElementById("message").textContent = 'Number is : ' + maxIndex;

//alert('Number is : ' + maxIndex);

//console.log(maxIndex,outputData);

})

.catch(err => {

// handle error

console.log(err);

})

}

همانطور که ملاحضه کردید این سری عملیات ها قابلیت تکرار به کمک زبان های برنامه نویسی مختلف و پلتفرم های مختلف را داراست.

منابع

Keras – Keras.js – Canvas – ImageResizePhp

بینایی کامپیوتر.

استفاده از مدل Train شده با Keras در پلتفرم های مختلف

آخرین لحظات در پایتون

جریان اجرایی پروژه

توابع رسم اعداد

توابع گرفتن خروجی عکس و ارسال آن به سرور

منابع

Moh3n95

آشنایی با سرویس ابری Google Colab

مقدمه‌ای بر پیاده سازی شبکه‌های عصبی ترتیبی در کراس

مطالب مرتبط:

پروژه ترجمه ماشین

Voice Style Transfer

درباره ما

مطالب اخیر

تبدیل Jupyter Notebook به Rest API Endpoint

تراز کردن کارت ملی هوشمند

Chatbot with Voice

music box

استفاده از مدل Train شده با Keras در پلتفرم های مختلف

آخرین لحظات در پایتون

جریان اجرایی پروژه

توابع رسم اعداد

توابع گرفتن خروجی عکس و ارسال آن به سرور

منابع

فلش‌های ناوبری پست

مطالب مرتبط:

اسلایدر سایدبار

درباره ما

شبکه های اجتماعی

مطالب اخیر