Простой способ создать веб-приложение для машинного обучения с помощью Flask

простой и легкий способ создания веб-приложения машинного обучения с использованием flask и фреймворка w3css

веб-приложения обеспечивают прагматичную концепцию искусственного интеллекта и науки о данных, предоставляя учащимся, специалистам по данным и исследователям возможность развертывать и тестировать свои алгоритмы/модели и направлять свои решения в реальные сценарии и на практике.

части учебника:

1 – создать и обучить модель
2 – создать веб-приложение с использованием инфраструктуры Flask.
3 – запустить и протестировать приложение

Вот ссылка на веб-приложение https://titanic-model1.herokuapp.com, я использовал w3css для стилизации своего приложения, но вы можете использовать bootstrap, CSS или другие CSS-фреймворки, чтобы оно выглядело более презентабельно. вы можете скачать файлы из моего репозитория github https://github.com/alaminmagaga/titanic-web-app

ШАГ 1: Создайте модель

//model name:titanic.py
import pandas as pd
import numpy as np
import pickle
df=pd.read_csv('titanic_train.csv')
df.drop('Cabin',axis=1,inplace=True)
df['Age']=df['Age'].fillna(df['Age'].mode()[0])
df['Embarked']=df['Embarked'].fillna(df['Embarked'].mode()[0])
sex_mapping={'male':1,'female':2}
df['Sex']=df['Sex'].map(sex_mapping)
embark_mapping={'S':1,'C':2,'Q':3}
df['Embarked']=df['Embarked'].map(embark_mapping)
survival_mapping={1:'survived',0:'Did not survived'}
df['Survival']=df['S'].map(embark_mapping)
df.drop(['PassengerId','Name','Ticket','Survived'],axis=1,inplace=True)
x=df.drop('Survival',axis=1)
y=df.Survival
from sklearn.preprocessing import MinMaxScaler
scaler=MinMaxScaler()
x=scaler.fit_transform(x)

Обучите модель

from sklearn.model_selection import train_test_split
x_train,x_test,y_train,y_test=train_test_split(x,y,test_size=0.3,random_state=42)
from sklearn.ensemble import RandomForestClassifier
rfc_classifier = RandomForestClassifier()
rfc_classifier.fit(x_train, y_train)

теперь мы сохраняем модель как titanic_classifier.pkl, используя pickle

pickle.dump(rfc_classifier,open('titanic_classifier.pkl','wb'))
model=pickle.load(open('titanic_classifier.pkl','rb'))

файл titanic_classifier.pkl, который будет использоваться позже.

ШАГ 2. Создайте веб-приложение с помощью среды Flask.

есть и другие фреймворки Python, которые можно использовать для создания веб-приложений, но мы используем flask, потому что он очень гибкий и простой в использовании. на этом этапе мы собираемся создать три файла:

index.html
результат.html
app.py

файлы index.html и result.html — это наша домашняя страница и страница результатов (прогнозирования), которая содержит HTML-шаблоны и стили веб-приложения, а app. py содержит API фляги и прогнозируемые значения модели.

теперь давайте напишем наши файлы index.html и result.html

index.html

<!DOCTYPE html>
<html >

<head>
  <meta charset="UTF-8">
  <title>ML API</title>
  
  <link rel="stylesheet"  href="{{ url_for('static', filename='w3.css') }}">
 <style type="text/css">
    
.mySlides {display:none;}
</style>
</head>
<body>
<div class='w3-padding w3-teal w3-center'><h1>Titanic prediction model</h1></div>
  <div class="w3-container">
  <div class="w3-padding-18 w3-content w3-section w3-threequarter">
  <img class="mySlides" src="{{url_for('static', filename='a1.jpg')}}" style="width:100%;height: 400px;">
  <img class="mySlides" src="{{url_for('static', filename='a2.jpg')}}" style="width:100%;height: 400px;">
  <img class="mySlides" src="{{url_for('static', filename='a3.jpg')}}" style="width:100%;height: 400px;">
  <img class="mySlides" src="{{url_for('static', filename='a4.jpg')}}" style="width:100%;height: 400px;">
</div>
<div class="w3-container w3-padding-24 w3-quarter">
<div class="w3-card-4 w3-padding-32" style="width:100%;height: 100%;" >
    <header class="w3-container  w3-center">
      <h5 class="w3-center">Alamin Magaga</h5>
    </header>
    <div class="w3-container">
      
      <hr>
      <img src="{{url_for('static', filename='a5.jpg')}}" alt="Avatar" class="w3-left w3-circle w3-margin-right" style="width:60px">
      <p>Founder of Magtech Dihub,Data scientist,and Web developer</p><br>
    </div>
    <button class="w3-button w3-block w3-dark-grey"><a href="twitter.com" target="_blank" style="text-decoration:none">+ Connect</a></button>
  </div>
</div>
</div>
<div class="w3-container">
  <form class="w3-container w3-card-2" action="{{ url_for('predict')}}"method="POST" style="width: 100%">
  <h2 class="w3-text-blue w3-center w3-text-teal" >Input Form</h2>
  <p>      
  <label class="w3-text-teal"><b>Pclass</b></label>
  <input id="id1" class="w3-input w3-border" name="Pclass" placeholder="Pclass" required="required" type="number" ></p>
  <p>      
  <label class="w3-text-teal"><b>Sex</b></label>
  <input id="id1" class="w3-input w3-border" name="Sex" type="number" placeholder="1:female 0:male" required="required" max="1" min="0"></p>
  <label class="w3-text-teal"><b>Age</b></label>
  <input id="id1" class="w3-input w3-border" name="Age" type="number" placeholder="Age" required="required"></p>
  <p>      
  <label class="w3-text-teal"><b>SibSp</b></label>
  <input id="id1" class="w3-input w3-border" name="SibSp" placeholder="SibSp" type="number" required="required"></p>
  <label class="w3-text-teal"><b>Parch</b></label>
  <input id="id1" class="w3-input w3-border" name="Parch" placeholder="Parch" type="number" required="required"></p>
  <p>      
  <label class="w3-text-teal"><b>Fare</b></label>
  <input id="id1" class="w3-input w3-border" name="Fare" placeholder="Fare" type="number" required="required"></p>
<p>      
  <label class="w3-text-teal"><b>Embarked</b></label>
  <input id="id1" class="w3-input w3-border" name="Embarked" placeholder="Embarked" type="number" required="required"></p>  
  
  
  
  <button onclick="myFunction()" type="submit" class="btn btn-primary btn-block btn-large w3-text-teal w3-border-teal" style="width:100%;">Predict</button>
</form>
</div>
</div>
<script>
var myIndex = 0;
carousel();
function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 2000); // Change image every 2 seconds
    
    
    
}
</script>
</body>
</html>

результат.html

<!DOCTYPE html>
<html>
<head>
 <title></title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='w3.css') }}">
</head>
<body>
<div class="w3-card-4 w3-teal w3-center w3-padding-32 w3-xxlarge w3-animate-bottom">Titanic Survival Result</div>
  
 </div>
<br>
 <div class="w3-card-4 w3-opacity w3-hover-opacity-off w3-animate-top">
   <img class="mySlides" src="{{url_for('static', filename='a2.jpg')}}" style="width:100%">
</div>
<br>
<div class="w3-center w3-card-4 w3-teal w3-xxlarge w3-padding-24 w3-text-black" > 
<h2>{{ prediction_text }}</h2></div>
   
  
 
 </div>
</body>
</html>

давайте также создадим файл app.py

import numpy as np
from flask import Flask, request, jsonify, render_template
import pickle
app = Flask(__name__)
model = pickle.load(open('titanic_classifier.pkl', 'rb'))
@app.route('/')
def home():
    return render_template('index.html')
@app.route('/predict',methods=['POST'])
def predict():
    '''
    For rendering results on HTML GUI
    '''
    int_features = [int(x) for x in request.form.values()]
    final_features = [np.array(int_features)]
    prediction = model.predict(final_features)
return render_template('result.html', prediction_text='The Passenger {}'.format(prediction[0]))
if __name__ == "__main__":
    app.run(debug=True)

Результаты:

titanic-web — моя основная папка, содержащая вложенные папки static и template, а также app.py,titanic.py,titanic_classifier и набор данных. файл titanic_classifier.pkl был создан из модели (titanic.py)