通过烧瓶在网页上显示预测

时间:2019-08-10 15:44:46

标签: html machine-learning flask

我正在尝试显示从网页上的下拉菜单中提供的功能所生成的预测。我已经训练,测试并选择了最佳的ML模型。我创建了烧瓶路径,以便当您从下拉菜单中选择ID时,它会自动吐出预测值,这部分工作正常。但是,我无法在网页上显示它。

def features(patientID):
    """Returns list of features for given patient ID"""

    # Create list of feature names
    feature_names = ["Radius (worst)", "Texture (worst)", "Perimeter (worst)",\
        "Area (worst)", "Smoothness (worst)", "Compactness (worst)", \
        "Concavity (worst)", "Concave points (worst)", "Symmetry (worst)", \
        "Fractal dimension (worst)"]

    row = int(patientID) - 19000

    # Load dataset from sklearn and set X to feature array
    X = load_breast_cancer().data
    feature_values = X[row]

    # Select only features to be displayed
    feature_values = feature_values[20:]

    # Create dictionary of keys feature names and values
    features_dict = dict(zip(feature_names, feature_values))

    return jsonify(features_dict)


@app.route("/analyze/<patientID>")
def analyze(patientID):
    """Submit data to calculator"""

    # Translate patient ID to row
    row = (int(patientID) - 19000)

    # Load features, model, and scaler 
    X = load_breast_cancer().data
    model = load("rf_model.joblib")
    scaler = load("scaler.out")

    # Get features for selected row and scale
    row = np.array([row])
    feature_values = X[row]
    feature_values = scaler.transform(feature_values)

    # Predict diagnosis
    prediction = model.predict(feature_values)
    if prediction == 0:
        diagnosis = "Benign"
    else:
        diagnosis = "Malignant"

    # return jsonify(diagnosis)
    return render_template("calculator.html",diagnosis=diagnosis)```

# HTML code below.

      <div class="demo-container">
          <div class="grid-container">
            <div class="grid-x align-middle grid-margin-x" id="app">
              <div class="cell large-6 text-center">
                <h3>Select Patient ID</h3>
                <form>
                <select id="selPatient" onchange="selectPatient(this.value)"></select>
                <table>
                    <thead>
                      <tr>
                        <th>Measurement</th>
                        <th>Value</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                </form>
                <button type="submit" class="large button expanded" id="analyze">Analyze</button>
              </div>
              <div class="cell large-6">
                <div class="result text-center">
                  <h3 id="diagnosis">Diagnosis: {{ diagnosis }} </h3>
                </div>

1 个答案:

答案 0 :(得分:0)

  /**
    /* Creates dropdown menu of patient ID's
    */

  // Create list of patient ID's
  var patientList = [];
  for (var i = 19000; i <= 19010; i++) {
    patientList.push(i);
  }

  // Add first dropdown item
  d3.select("#selPatient")
    .append("option")
    .text("");

  // Create dropdown menu of patientID's to populate the select options
  patientList.forEach(patientID => {
    d3.select("#selPatient")
      .append("option")
      .text(patientID)
      .property("value", patientID);
  });
}

function submitdropdownvalue(newvalue) {
  d3.select("#analyze").property("value", newvalue);
}

function selectPatient(patientID) {
  /**
    /* Populates form with features from selected patient
    /* @param {string}    patientID    ID of selected patient 
    /* patient in feature array
    */

  // Saving the table and results as variables
  var table = d3.select("tbody");
  var resultDisplay = d3.select("#diagnosis");

  // Clear values for existing feature table and diagnosis
  table.html("");
  resultDisplay.html("&nbsp;");

  var featuresURL = `/features/${patientID}`;
  var analysisURL = `/analyze/${patientID}`;

  // Fetch dictionary of the name of the features and corresponding values
  d3.json(featuresURL).then(function(patientFeatures) {
    // For each feature, enter the feature name and the feature value into a row
    Object.entries(patientFeatures).forEach(([key, value]) => {
      var tableRow = table.append("tr");
      tableRow.append("td").text(key);
      tableRow.append("td").text(value);
    });
  });

  // Fetch results and display in #diagnosis
  d3.json(analysisURL).then(function(results) {
    resultDisplay.html(results);
  });
}

// Create drop down
createDropdown();