Я хочу напечатать вывод flask чуть ниже моей кнопки прогнозирования. Но я не могу этого сделать. Мой вывод отображается на новой странице - PullRequest
0 голосов
/ 21 марта 2020

Я хочу напечатать свой вывод из flask чуть ниже кнопки прогнозирования. Но я не могу этого сделать. Мой вывод печатается на новой странице без каких-либо компонентов.

Это мой прогноз. js файл

import React, { Component } from "react";

class Predict extends Component {
  constructor() {
    super();
    this.state = {
      //initialize all default values
      output: "",
      num_preg: "",
      glucose_conc: "",
      diastolic_bp: "",
      thickness: "",
      insulin: "",
      bmi: "",
      diab_pred: "",
      age: "",
      skin: ""
    };
  }
  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
  };
  handleSubmit = event => {
    //sending values for prediction
    return fetch("/predict", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify()
    })
      .then(response => {
        return response.json();
      })
      .then(json => {
        this.setState({ output: json[0] });
      })
      .catch(err => console.log(err));
  };

  predictForm = (
    num_preg,
    glucose_conc,
    diastolic_bp,
    thickness,
    insulin,
    bmi,
    diab_pred,
    age,
    skin
  ) => (
    <form method="post">
      <div className="form-group">
        <label className="text-muted">Num_Preg</label>
        <input
          onChange={this.handleChange("num_preg")}
          name="num_preg"
          type="text"
          className="form-control"
          value={num_preg}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">Glucose_Conc</label>
        <input
          onChange={this.handleChange("glucose_conc")}
          name="glucose_conc"
          type="text"
          className="form-control"
          value={glucose_conc}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">Dialostic_bp</label>
        <input
          onChange={this.handleChange("diastolic_bp")}
          name="diastolic_bp"
          type="text"
          className="form-control"
          value={diastolic_bp}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">Thickness</label>
        <input
          onChange={this.handleChange("thickness")}
          name="thickness"
          type="text"
          className="form-control"
          value={thickness}
        />
      </div>

      <div className="form-group">
        <label className="text-muted">Insulin</label>
        <input
          onChange={this.handleChange("insulin")}
          name="insulin"
          type="text"
          className="form-control"
          value={insulin}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">BMI</label>
        <input
          onChange={this.handleChange("bmi")}
          name="bmi"
          type="text"
          className="form-control"
          value={bmi}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">Diab_pred</label>
        <input
          onChange={this.handleChange("diab_pred")}
          name="diab_pred"
          type="text"
          className="form-control"
          value={diab_pred}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">Age</label>
        <input
          onChange={this.handleChange("age")}
          name="age"
          type="text"
          className="form-control"
          value={age}
        />
      </div>
      <div className="form-group">
        <label className="text-muted">Skin</label>
        <input
          onChange={this.handleChange("skin")}
          name="skin"
          type="text"
          className="form-control"
          value={skin}
        />
      </div>

      <button
        type="submit"
        onClick={this.handleSubmit}
        className="btn btn-raised btn-primary"
      >
        Predict
      </button>
    </form>
  );
  render() {
    const {
      num_preg,
      glucose_conc,
      diastolic_bp,
      thickness,
      insulin,
      bmi,
      diab_pred,
      age,
      skin
    } = this.state;

    return (
      <div className="container">
        <h2 className="mt-5 mb=5">Check For Diabetes</h2>
        {this.predictForm(
          num_preg,
          glucose_conc,
          diastolic_bp,
          thickness,
          insulin,
          bmi,
          diab_pred,
          age,
          skin
        )}
        //sending values to form //I want to my print output here
        <h1>{this.state.output}</h1>
      </div>
    );
  }
}
export default Predict;

Это мой flask файл

    import numpy as np
    from flask import Flask, request, jsonify, render_template
    import pickle
    from flask_cors import CORS
    app = Flask(__name__,static_folder='./static')
    #app.config['SERVER_NAME']='localhost:3001'
    CORS(app)
    model = pickle.load(open('model.pkl', 'rb'))//This is my pickle file
    @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)

        output = prediction[0]
        if output==1:
            return "True"
        else:
            return "False"
    if __name__ == "__main__":
        app.run(debug=True)

Пожалуйста, помогите мне. Я просто новичок. Я буду рад, если кто-нибудь из вас поможет мне разобраться в проблеме,

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