Vue.js(Vue-CLI 3) + flask, 機械学習の評価結果を出力する SPA開発(16) #Vue.js #web #SPA #flask #機械学習 #MachineLerning

index:

概要:

前のSPA (Vue.js/ Vuec CLI 3)関連で、flask + 機械学習で
クロスドメインの機械学習API サービスと接続し
評価結果を出力する機能と、なります。

・機械学習は、予測問題で、回帰モデルを使用して予測します。

環境

flask
vue.js
Vue-CLI 3
python3

参考のコード

API 側
github.com

Vue 側
github.com

準備

ajax は、flask の、クロスドメイン通信となるので
通常のflask構成で、通信できない為。
対策の、　flask-corsを追加

pip3 install -U flask-cors

__init__.py

https://github.com/kuc-arc-f/flask_ML_2/blob/master/flaskr/__init__.py

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
app.config.from_object('flaskr.config')


import flaskr.views

実装など

views.py
https://github.com/kuc-arc-f/flask_ML_2/blob/master/flaskr/views.py

post で、受信し。ＭＬの評価処理、出力

@app.route('/api_test', methods=['GET', 'POST'])
def api_test():
    from flaskr.include.pred_price import  PredPrice
    if request.method == "POST":
        ret = "len :"+ str(len(request.form))
        print(request.form['siki_price'])
        #return  ret
        siki_price=request.form['siki_price']
        rei_price =request.form['rei_price']
        menseki   =request.form['menseki']
        nensu     =request.form['nensu']
        toho      =request.form['toho']
#        print(request.form )
        #param
        params = {"siki_price" : siki_price
        , "rei_price" : rei_price
        , "menseki" : menseki
        , "nensu"   : nensu
        , "toho"    : toho
        }
        print("#POST")
        pred =PredPrice()
        model =pred.load_model()
        df = pred.load_data( params )
        price = model.predict(df )
        price_int = np.array( price , np.int32)        
        print( price_int[0] )
        dic = {"price" : str(price_int[0]) }
        return jsonify(dic)
    else:
        return "0"

Vueコンポーネント

check.vue
https://github.com/kuc-arc-f/vue_2_pred/blob/master/src/components/predict/check.vue

・不動産の、評価条件を入力し。APIサービスに
　送信する。

<template lang="html">
    <div>
        <h1>predict Input: </h1>
        <ul>
            <li>
                敷金 (n月分):
                <input type=text size=10 v-model="siki_price" value="0" /><br />
                <br />
            </li>
            <li>
                礼金(n月分):
                <input type=text size=10 v-model="rei_price" value="0" /><br />
                <br />
            </li>
            <li>
                面積:
                <input type=text size=10 v-model="menseki" value="0" /><br />
                <br />
            </li>
            <li>
                建築年数:
                <input type=text size=10 v-model="nensu" value="0" /><br />
                <br />
            </li>
            <li>
                駅 徒歩(分):
                <input type=text size=10 v-model="toho" value="0" /><br />
                <br />
            </li>
            <li>
                <button v-on:click="proc_check()">予測する</button>
            </li>
        </ul>

    </div>
</template>

<script>
import {Mixin} from '../../mixin'
import jQuery from 'jquery'

export default {
    mixins:[Mixin],
    created() {
        this.baseUrl = this.sysConst.API_BASE;
        console.log(this.baseUrl);
    },
    data() {
        return {
            siki_price: 0,
            rei_price: 0,
            menseki : 0,
            nensu : 0,
            toho : 0,
            user_id: '',
            baseUrl : '',
        }
    },
    methods: {
        proc_check: function() {
            var hostUrl= this.baseUrl + 'api_test';
            var siki_price = this.siki_price;
            var rei_price = this.rei_price;
            var menseki = this.menseki;
            var nensu = this.nensu;
            var toho = this.toho;
//            var content = this.content;
            console.log(hostUrl);
            jQuery.ajax({
                url: hostUrl,
                type:'POST',
                dataType: 'json',
                data : {
                     'siki_price' : siki_price ,
                     'rei_price' : rei_price ,
                     'menseki' : menseki,
                     'nensu' : nensu ,
                     'toho' : toho ,
                },
                timeout:3000,
            }).done(function(data) {
                console.log("ajax-ok");
                console.log(data.price );
                alert(data.price )
            }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
                console.log("ajax-error");
                console.log( errorThrown );
            })		
        },
    }
}
</script>

関連のページ

機械学習 + flask WEBアプリの実装
knaka0209.hatenablog.com

機械学習で、重回帰分析(2) 家賃を予測する
knaka0209.hatenablog.com