Meritshot Tutorials

  1. Home
  2. »
  3. Creating a Simple HTML Form for User Input
SQL
R-Overview
Python
Cyber Security
Tableau
Flask

Flask Tutorial

Creating a Simple HTML Form for User Input

To allow users to interact with your machine learning model through the web interface, you need to create an HTML form where they can input data. This form will send the data to your Flask backend, which will process it and return a prediction based on the input.

1. Creating the HTML Form

You can create a simple HTML form inside your Flask template where users can enter their data. The form should use the POST method to send the data to the backend.

Example index.html form:

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>ML Model Prediction</title>

</head>

<body>

    <h1>Enter Data for Prediction</h1>

    <form method=”POST” action=”/predict”>

        <label for=”input_data”>Enter a feature (e.g., house size or sepal length):</label>

        <input type=”text” id=”input_data” name=”input_data” required><br><br>

        <button type=”submit”>Predict</button>

    </form>

    {% if prediction %}

        <h3>Prediction: {{ prediction }}</h3>

    {% endif %}

</body>

</html>

Explanation of the HTML Form:

  • <form method=”POST” action=”/predict”>: This is the form tag. The method=”POST” specifies that the form will use the POST method to submit the data to the server, and action=”/predict” specifies that the data will be sent to the /predict route.
  • <input type=”text” id=”input_data” name=”input_data” required>: This is the input field where the user will enter their data. The name attribute (input_data) is crucial because it will allow Flask to access the value of the input via request.form[“input_data”].
  • <button type=”submit”>: This is the button that submits the form.
  1. Handling the Form Data in Flask

In your Flask app, you need to create a route that will handle the POST request when the user submits the form. This route will take the input data, pass it to the model for prediction, and return the result.

Example Flask code to handle form submission:

from flask import Flask, render_template, request

import pickle  # or any other library for loading models

app = Flask(__name__)

# Load the trained model (replace with your actual model)

model = pickle.load(open(‘model.pkl’, ‘rb’))

@app.route(“/”, methods=[“GET”, “POST”])

def index():

    prediction = None

    if request.method == “POST”:

        # Retrieve data from the form

        input_data = float(request.form[“input_data”])

        # Use the model to make a prediction

        prediction = model.predict([[input_data]])[0]  # Modify based on your model input format

    return render_template(“index.html”, prediction=prediction)

if __name__ == “__main__”:

    app.run(debug=True)

Explanation of the Flask Code:

  • @app.route(“/”, methods=[“GET”, “POST”]): This route handles both GET (when the page is loaded) and POST (when the form is submitted) requests. When the form is submitted, Flask processes the data.
  • request.form[“input_data”]: This retrieves the value entered in the input field from the form.
  • model.predict([[input_data]]): This sends the input data to the trained machine learning model for prediction. The input data might need to be formatted in a specific way depending on the model (e.g., reshaping or scaling).
  • render_template(“index.html”, prediction=prediction): This sends the prediction back to the HTML template, where it will be displayed.
  1. Displaying the Prediction

In the HTML template, the prediction will be displayed after the form is submitted and the backend processes it. The prediction is passed to the template as a variable, which is then inserted in the {{ prediction }} placeholder.

For example, if the model predicts a value based on the input data, it will be displayed below the form in the browser.

Key Concepts to Remember:

  • HTML Forms: Use the POST method to send user input to the server.
  • Form Handling in Flask: Flask handles the data submitted through the form using request.form.
  • Dynamic Prediction: After receiving the form data, Flask uses the trained ML model to generate a prediction, which is then displayed on the same page.

By using this approach, you can easily create a frontend for your ML model, allowing users to input data and receive predictions directly in their browser.

Frequently Asked Questions

  1. How do I create a form in Flask?
    • Answer: In Flask, you can create a form using HTML <form> tags. The form should include input fields where users can provide data. When the form is submitted, it sends the data to the server using either GET or POST methods. Example:

<form method=”POST” action=”/predict”>

    <input type=”text” name=”input_data”>

    <button type=”submit”>Submit</button>

</form>

  1. How do I retrieve the user input in Flask?
    • Answer: Flask provides the request.form dictionary to retrieve data from a form. You can access form values by using the field name as the key:

input_data = request.form[“input_data”]

This will get the data entered by the user in the form’s input field named input_data.

  1. What is the difference between GET and POST methods in Flask forms?
    • Answer:
      • GET: The GET method sends form data as part of the URL. It is typically used for fetching data, such as loading a webpage or retrieving data from the server.
      • POST: The POST method sends form data in the request body, making it more secure and suitable for submitting sensitive data or large data payloads, such as when users are submitting a form to make a prediction.
  2. Can I use a model to make predictions based on user input in a Flask form?
    • Answer: Yes, you can use a trained machine learning model to make predictions based on the data entered in a form. After the user submits the form, Flask retrieves the input, processes it, and feeds it to the model to generate a prediction. The prediction is then displayed back to the user.
  3. How do I display the prediction after the form is submitted?
    • Answer: After processing the user input, you can pass the prediction back to the template using Flask’s render_template function. In the HTML template, you can use Jinja2 syntax to display the prediction. For example:

{% if prediction %}

    <h3>Prediction: {{ prediction }}</h3>

{% endif %}

  1. How do I handle errors or invalid input in the form?
    • Answer: You can use Flask’s error handling to display a message if the user provides invalid input. For instance, check if the form data is correct or if it’s empty. You can display an error message in the template like this:

if not input_data.isdigit():

    error_message = “Please enter a valid number.”

    return render_template(“index.html”, error=error_message)

❮ Previous
Next ❯
ads website