Как соединить мои две HTML-страницы с помощью колбы - PullRequest
0 голосов
/ 07 февраля 2019

Я пытаюсь связать две html-страницы «home.html» и «result.html», используя флеш-фреймворк, но это не работает.Также изменения, которые я делаю на html-странице, не отражаются при открытии страницы с помощью фляги.

Вот код для 'home.html':

<!doctype <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IRIS PREDICTOR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
    <h1 class="text-info">IRIS PREDICTION</h1>
    <form action="/result" method="POST">
    <div class="col-2" id="abc">
        <label for="ex2">Sepal Length</label>
        <input class="form-control" id="ex2" type="text" name="s_length">
      </div>
      <div class="col-2">
        <label for="ex2">Sepal Width</label>
        <input class="form-control" id="ex2" type="text" name="s_width">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Length</label>
        <input class="form-control" id="ex2" type="text" name="p_length">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Width</label>
        <input class="form-control" id="ex2" type="text" name="p_width">
      </div>
      <button class="btn btn-outline-secondary" type="button" id="button-addon1">Predict</button>
    </form>
</body>
</html>

Код для 'result.html':

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>PREDICTION RESULT</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/style.css" />
    <script src="main.js"></script>
</head>
<body>
    <p>Sepal Length: {{sepal_length}}</p>
    <p>Sepal Width: {{sepal_width}}</p>
    <p>Petal Length: {{petal_length}}</p>
    <p>Petal Width: {{petal_width}}</p>
    <p>Species: {{predict_result}}</p>

</body>
</html>

И код для script.py:

from flask import Flask,render_template,request
from sklearn.externals import joblib

app=Flask(__name__)
@app.route('/')

def home():
    return render_template('home.html')

@app.route('/predict',methods=['POST'])
def show():
    if request.method=='POST':
        sepal_length=request.form['s_length']
        sepal_width=request.form['s_width']
        petal_length=request.form['p_length']
        petal_width=request.form['p_width']
        data=[[float(sepal_length),float(sepal_width),float(petal_length),float(petal_width)]]
        model=joblib.load('iris_model.pkl')
        predict_result=model.predict(data)

    return render_template('result.html',sepal_length=sepal_length,sepal_width=sepal_width,petal_length=petal_length,petal_width=petal_width,predict_result=predict_result)

if __name__=='__main__':
    app.run(debug=True) 

Что мне теперь делать?

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Поместите оба шаблона в каталог 'templates', где находится файл scripts.py.Поиск шаблонов файлов в каталоге 'templates'.
Удаление пробела между @ app.route и def home ().

0 голосов
/ 07 февраля 2019

У меня работает ваш код.Ваш @ app.route для функции показа был для /result, но home.html отправлял данные в /result/ Также ваша кнопка на home.html не была кнопкой отправки, поэтому она никогда не публиковала форму.

Полный список файлов ниже

script.py - я закомментировал элементы JobLib

from flask import Flask,render_template,request
#from sklearn.externals import joblib

app=Flask(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/predict',methods=['POST'])
def show():
    if request.method=='POST':
        sepal_length=request.form['s_length']
        sepal_width=request.form['s_width']
        petal_length=request.form['p_length']
        petal_width=request.form['p_width']
        data=[[float(sepal_length),float(sepal_width),float(petal_length),float(petal_width)]]
        #model=joblib.load('iris_model.pkl')
        #predict_result=model.predict(data)
        predict_result="TEST"

    return render_template('result.html',sepal_length=sepal_length,sepal_width=sepal_width,petal_length=petal_length,petal_width=petal_width,predict_result=predict_result)

if __name__=='__main__':
    app.run() 

home.html

<!doctype <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>IRIS PREDICTOR</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/static/main.css" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</head>
<body>
    <h1 class="text-info">IRIS PREDICTION</h1>
    <form action="/predict" method="POST">
    <div class="col-2" id="abc">
        <label for="ex2">Sepal Length</label>
        <input class="form-control" id="ex2" type="text" name="s_length">
      </div>
      <div class="col-2">
        <label for="ex2">Sepal Width</label>
        <input class="form-control" id="ex2" type="text" name="s_width">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Length</label>
        <input class="form-control" id="ex2" type="text" name="p_length">
      </div>
      <div class="col-2">
        <label for="ex2">Petal Width</label>
        <input class="form-control" id="ex2" type="text" name="p_width">
      </div>
      <button class="btn btn-outline-secondary" type="submit" id="button-addon1">Predict</button>
    </form>
</body>
</html>

result.html не отличается от вашего примера

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...