99999久久久久久亚洲,欧美人与禽猛交狂配,高清日韩av在线影院,一个人在线高清免费观看,啦啦啦在线视频免费观看www

熱線電話：13121318867

登錄
首頁精彩閱讀Python實(shí)現(xiàn)機(jī)器學(xué)習(xí)前后端頁面的交互
Python實(shí)現(xiàn)機(jī)器學(xué)習(xí)前后端頁面的交互
2022-04-01
收藏

作者： 俊欣

來源：關(guān)于數(shù)據(jù)分析與可視化

對于機(jī)器學(xué)習(xí)愛好者而言，很多時(shí)候我們需要將建好的模型部署在線上，實(shí)現(xiàn)前后端的交互，今天小編就通過Flask以及Streamlit這兩個(gè)框架實(shí)現(xiàn)機(jī)器學(xué)習(xí)模型的前后端交互。

模型的建立

首先是模型的建立，小編這回為了省事兒建立一個(gè)非常簡單的二分法模型，所引用的數(shù)據(jù)集如下所示 

import pandas as pd

df = pd.read_csv("data.csv")
df.head()

output 

Height Weight Species 0 88.9 48.3 Dog 1 90.2 47.4 Dog 2 82.7 44.8 Dog 3 81.4 48.2 Dog 4 83.5 39.9 Dog

所涉及到的特征也就兩列分別是“Hight”以及“Weight”也就是身高和體重，我們需要通過這兩個(gè)特征來預(yù)測它到底是“貓”還是“狗”，代碼如下 

X = df[["Height", "Weight"]] y = df["Species"]

clf = GaussianNB() 
clf.fit(X, y)

當(dāng)然小編為了省事兒這里并沒有進(jìn)行訓(xùn)練集和測試集的區(qū)分，也沒有進(jìn)行任何的調(diào)參以及模型的優(yōu)化，只是簡單的建立了一個(gè)樸素貝葉斯的二分類模型。接下來我們將建立好的模型保存下來 

import joblib

joblib.dump(clf, "clf.pkl")

Flask框架

前端頁面主要是由一系列的HTML代碼寫成的，代碼如下 

<!DOCTYPE html> <html> <head> <title>Your Machine Learning App</title> </head> <body> <form name="form", method="POST", style="text-align: center;"> <br> Height: <input type="number" name="height", placeholder="Enter height in cm" required/> <br><br> Weight: <input type="number" name="weight", placeholder="Enter weight in kg" required/> <br><br> <button value="Submit">Run</button> </form> <p style="text-align: center;">{{ output }}</p> </body> </html>

輸出結(jié)果如下：

Python實(shí)現(xiàn)<a href='/map/jiqixuexi/' style='color:#000;font-size:inherit;'>機(jī)器學(xué)習(xí)</a>前后端頁面的交互

我們可以看到有兩個(gè)輸入框分別代表的是身高與體重，以及運(yùn)行的按鈕鍵。接下來我們來寫后端的邏輯代碼，當(dāng)前端傳過來數(shù)據(jù)的時(shí)候，也就是身高與體重的數(shù)據(jù)的時(shí)候，后端的代碼來調(diào)用已經(jīng)訓(xùn)練好的模型并且做出預(yù)測，然后顯示在前端的頁面上。在Flask框架中后端的業(yè)務(wù)代碼大致如下 

from flask import Flask, request, render_template import pandas as pd import joblib # 聲明是一個(gè)Flask應(yīng)用 app = Flask(__name__) # 主要業(yè)務(wù)邏輯 # ------------------ # 運(yùn)行整體的應(yīng)用 if __name__ == '__main__':
    app.run(debug = True)

那么在本篇文章的項(xiàng)目背景下，代碼如下 

@app.route('/', methods=['GET', 'POST']) def main(): # 表單數(shù)據(jù)提交，POST請求 if request.method == "POST": # 調(diào)用已經(jīng)訓(xùn)練好的模型 clf = joblib.load("clf.pkl") # 從輸入框中獲取身高與體重?cái)?shù)據(jù) height = request.form.get("height")
        weight = request.form.get("weight") # 轉(zhuǎn)變成DataFrame格式 X = pd.DataFrame([[height, weight]], columns = ["Height", "Weight"]) # 獲取預(yù)測值 prediction = clf.predict(X)[0] else: prediction = "" return render_template("website.html", output = prediction)

然后我們運(yùn)行整個(gè)腳本，效果如下

Python實(shí)現(xiàn)<a href='/map/jiqixuexi/' style='color:#000;font-size:inherit;'>機(jī)器學(xué)習(xí)</a>前后端頁面的交互

我們試著輸入一些身高與體重的值，看一下返回的結(jié)果，效果如下

Python實(shí)現(xiàn)<a href='/map/jiqixuexi/' style='color:#000;font-size:inherit;'>機(jī)器學(xué)習(xí)</a>前后端頁面的交互

Streamlit框架

下面我們來看一下將模型部署在Streamlit框架下該如何來操作。在Streamlit框架中沒有特別明顯的前后端代碼的分離，代碼如下 

import streamlit as st import pandas as pd import joblib # 標(biāo)題 st.header("Streamlit Machine Learning App") # 輸入框 height = st.number_input("Enter Height")
weight = st.number_input("Enter Weight") # 點(diǎn)擊提交按鈕 if st.button("Submit"): # 引入訓(xùn)練好的模型 clf = joblib.load("clf.pkl") # 轉(zhuǎn)換成DataFrame格式的數(shù)據(jù) X = pd.DataFrame([[height, weight]],
                     columns=["Height", "Weight"]) # 獲取預(yù)測出來的值 prediction = clf.predict(X)[0] # 返回預(yù)測的值 st.text(f"This instance is a {prediction}")

最后生成的頁面如下

Python實(shí)現(xiàn)<a href='/map/jiqixuexi/' style='color:#000;font-size:inherit;'>機(jī)器學(xué)習(xí)</a>前后端頁面的交互

我們在終端中運(yùn)行以下命令 

streamlit run streamlit_model.py

最后我嘗試在輸入框中填入一些虛構(gòu)的數(shù)字，看一下出來的結(jié)果是什么樣的，如下

Python實(shí)現(xiàn)<a href='/map/jiqixuexi/' style='color:#000;font-size:inherit;'>機(jī)器學(xué)習(xí)</a>前后端頁面的交互

數(shù)據(jù)分析咨詢請掃描二維碼

若不方便掃碼，搜微信號(hào)：CDAshujufenxi

數(shù)據(jù)分析師資訊
更多

OK
客服在線
立即咨詢
客服在線
立即咨詢
') } function initGt() { var handler = function (captchaObj) { captchaObj.appendTo('#captcha'); captchaObj.onReady(function () { $("#wait").hide(); }).onSuccess(function(){ $('.getcheckcode').removeClass('dis'); $('.getcheckcode').trigger('click'); }); window.captchaObj = captchaObj; }; $('#captcha').show(); $.ajax({ url: "/login/gtstart?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 type: "get", dataType: "json", success: function (data) { $('#text').hide(); $('#wait').show(); // 調(diào)用 initGeetest 進(jìn)行初始化 // 參數(shù)1：配置參數(shù) // 參數(shù)2：回調(diào)，回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對象，之后可以使用它調(diào)用相應(yīng)的接口 initGeetest({ // 以下 4 個(gè)配置參數(shù)為必須，不能缺少 gt: data.gt, challenge: data.challenge, offline: !data.success, // 表示用戶后臺(tái)檢測極驗(yàn)服務(wù)器是否宕機(jī) new_captcha: data.new_captcha, // 用于宕機(jī)時(shí)表示是新驗(yàn)證碼的宕機(jī) product: "float", // 產(chǎn)品形式，包括：float，popup width: "280px", https: true // 更多配置參數(shù)說明請參見：http://docs.geetest.com/install/client/web-front/ }, handler); } }); } function codeCutdown() { if(_wait == 0){ //倒計(jì)時(shí)完成 $(".getcheckcode").removeClass('dis').html("重新獲取"); }else{ $(".getcheckcode").addClass('dis').html("重新獲取("+_wait+"s)"); _wait--; setTimeout(function () { codeCutdown(); },1000); } } function inputValidate(ele,telInput) { var oInput = ele; var inputVal = oInput.val(); var oType = ele.attr('data-type'); var oEtag = $('#etag').val(); var oErr = oInput.closest('.form_box').next('.err_txt'); var empTxt = '請輸入'+oInput.attr('placeholder')+'！'; var errTxt = '請輸入正確的'+oInput.attr('placeholder')+'！'; var pattern; if(inputVal==""){ if(!telInput){ errFun(oErr,empTxt); } return false; }else { switch (oType){ case 'login_mobile': pattern = /^1[3456789]\d{9}$/; if(inputVal.length==11) { $.ajax({ url: '/login/checkmobile', type: "post", dataType: "json", data: { mobile: inputVal, etag: oEtag, page_ur: window.location.href, page_referer: document.referrer }, success: function (data) { } }); } break; case 'login_yzm': pattern = /^\d{6}$/; break; } if(oType=='login_mobile'){ } if(!!validateFun(pattern,inputVal)){ errFun(oErr,'') if(telInput){ $('.getcheckcode').removeClass('dis'); } }else { if(!telInput) { errFun(oErr, errTxt); }else { $('.getcheckcode').addClass('dis'); } return false; } } return true; } function errFun(obj,msg) { obj.html(msg); if(msg==''){ $('.login_submit').removeClass('dis'); }else { $('.login_submit').addClass('dis'); } } function validateFun(pat,val) { return pat.test(val); }