انشر نموذج تعلم الآلة الخاص بك عبر الويب باستخدام Python

بعد الانتهاء من بناء نماذج تعلم الآلة هناك عدة طرق لاستخدام النموذج احد هذه الطرق هي نشر النموذج عبر صفحة ويب

بهذه المدونة بشرح خطوات نشر النموذج عبر صفحة ويب باستخدام flask

flask هو اطار عمل مكتوب بلغة البايثون لتطوير تطبيقات الويب ويوجد به العديد من المميزات لجعل عملية التطوير اسهل للمبرمج

قمت ببناء نموذج تعلم آلة بسيط لكي اوضح المسالة بشكل افضل ، النموذج يستخدم خوارزمية K-nearest neighbor لكي يتنبئ بفصيلة نوع معين من الورود

تستطيعون القاء نظرة على الكود من خلال هذا الرابط

بعد الانتهاء من بناء النموذج يجيب عليك تخزينه بصيغة pkl لكي تتمكن من استخدامه في صفحة الويب

import pickle
with open('/content/irisModel.pkl', 'wb') as file:
     pickle.dump(knn, file)

اذا كنت محمل بيئة بايثون في جهازك يجب عليك تحميل فلاسك ، وتتم عملية التحميل لاخر نسخة من فلاسك عن طريق وضع هذا الامر في Terminal :

pip install -U Flask

واذا كنت ما حملت بيئة بايثون بهذا الرابط شرح لكيفية التحميل https://www.youtube.com/watch?v=VWgs_iTojoA

بعد ان يتم حفظ النموذج بصيغة pkl تبدا مرحلة بناء صفحة الويب

سيكون لدينا ملفين

1-app.py يحتوي على الكود الذي يجعل النموذج يتنبا

2-index.html صفحة الويب الذي تمكن المستخدم من ادخال القيم وتظهر له التنبؤ من قبل النموذج

نبتدي بملف app.py

احضار المكتبات التي سيتم استخدامها

import flask
import pickle
import pandas as pd

فتح النموذج بصيغة pkl وتخزينه بمتغير

with open(f'irisModel.pkl', 'rb') as f:
model = pickle.load(f)

اخبار كود فلاسك بان التغييرات ستحدث في مجلد templates وهو المجلد الذي قمت بتخزين فيه صفحة HTML

app = flask.Flask(__name__, template_folder='templates')

تحديد مسار الصفحة و الميثود التي سيتم استخدامها

@app.route('/', methods=['GET', 'POST'])

الفنشكن التي سيتم تنفيذها عندما يدخل المستخدم المتغيرات ، لكي يكون الشرح متسق قمت بشرح الامور هامه على شكل تعليقات داخل الكود في هذي الفنشكن:

def main():
# اذا كانت الميثود GET يعيد المستخدم الى صفحة HTML او صفحة الويب
if flask.request.method == 'GET':
return(flask.render_template('index.html'))
# اذا كانت الميثود POST يتم استقبال المدخلات من المستخدم من صفحة HTML لتتم عملية التنبؤ من قبل النموذج
if flask.request.method == 'POST':
# ملاحظة: يجب ان يكون كل اسم مطابق name attribute في input tag في صفحة HTML
sepal_length = flask.request.form['sepal_length']
sepal_width = flask.request.form['sepal_width']
petal_length = flask.request.form['petal_length']
petal_width = flask.request.form['petal_width']
# تحويل المدخلات الى داتا فريم لكي يتمكن النموذج من قرائتها و فهم كل   متغير يشير الى اي عمود ، من الممكن استخدام داتا ستركشتر اخرى مثل dictionary
input_variables = pd.DataFrame([[sepal_length, sepal_width, petal_length,petal_width]],
columns=['sepal_length', 'sepal_width', 'petal_length','petal_width'], dtype=float)
# البدء بعملية التنبؤ من قبل النموذج
prediction = model.predict(input_variables)[0]
# العودة الى صفحة HTML بعد اسناد المتغيرات للنموذج واظهار القيمة التي تنبئ فيها النموذج والتي هي مخزنه في متغير (result)
return flask.render_template('index.html',
original_input={'sepal_length':sepal_length,
'sepal_width':sepal_width,
'petal_length':petal_length,
'petal_width':petal_width,
},
result=prediction,
)

والان ننتقل الى شرح صفحة index.html

كذلك هنا قررت ان اجعل الشرح داخل الكود على شكل تعليقات لكي يكون اوضح برايي

<!-- تعريف الفنشكن التي سيتم استخدامها في المدخلات والفنشكن هي (main) -->
<form action="{{ url_for('main') }}" method="POST">
<fieldset>
<legend>Input values:</legend>
<!-- name في input يجب ان يكون مطابق مع كود فلاسك -->
Sepal Length:
<input name="sepal_length" type="number" required>
<br>
<br>
Sepal Width::
<input name="sepal_width" type="number" required>
<br>
<br>
Petal Length:
<input name="petal_length" type="number" required>
<br>
<br>
Petal Width:
<input name="petal_width" type="number" required>
<br>
<br>
<input type="submit">
</fieldset>
</form>
<br>
<div class="result" text-algin="center">
<!-- فصائل الورود في النموذج مخزنه على شكل ارقام وليس اسماء ، فلذلك اقوم بعملية تحقق من كل نوع واسنده الى اسم الفصيلة الحقيقي بدال الرقم ويوجد لدينا ثلاث فصائل ، فلذلك ستكون هناك ثلاث عمليات تحقق -->
{% if result == 0 %}
<br>
<br> <h1 style="text-align: center;"> Predicted Flower species: </h1>
<p style="font-size:50px; text-align: center;">Setosa</p>
{% endif %}
</div>
<div class="result" text-algin="center">
{% if result == 1 %}
<br>
<br> <h1 style="text-align: center;"> Predicted Flower species: </h1>
<p style="font-size:50px; text-align: center;">Versicolor</p>
{% endif %}
</div>
<div class="result" text-algin="center">
{% if result == 2 %}
<br>
<br> <h1 style="text-align: center;"> Predicted Flower species: </h1>
<p style="font-size:50px; text-align: center;">Virginica</p>
{% endif %}
</div>
</html>

وهكذا تظهر صفحة الويب التي بنينها سويا قبل قليل

تجدون هنا النموذج وجميع العمل اللي قمنا ببناءه بالاعلى سويا

GitHub - HamadAlAssafi/DeployMLModel: Deploy Machine Learning Model in HTML Web Page using Flask

ولمن اراد ان يقوم بنشر المودل عبر احد السحابات لكي يكون في مرحلة الانتاج او يشتغل على مدار اليوم في الاسفل مصدر يشرح الموضوع بشكل جميل

Simple way to deploy machine learning models to cloud

لمن اراد ان يفهم ما هي GET & POST هنا شرح مبسط وجيد لهم

https://lazaroibanez.com/difference-between-the-http-requests-post-and-get-3b4ed40164c1

بالنهاية اتمنى ان المدونة كانت ذا فائدة. وشكرا جزيلا للجميع

تحياتي

حمد سامي سليمان العسافي

AlAssafiHamad@gmail.com