Building a Flask Application with a Decision Tree Classifier for the Iris Dataset
Tags: chatgpt, webdev, python, machinelearning
Published: 2023-04-06 05:00:49

### **_This blog is fully powered by ChatGPT 3.5. Application process tested._**

In this tutorial, we will be building a web application using Flask that uses a decision tree classifier to predict the species of an iris flower based on its sepal length, sepal width, petal length, and petal width. We will be using the Iris dataset from scikit-learn to train the decision tree classifier.

## **Prerequisites**
Before we begin, make sure that you have the following installed on your machine:

- Python 3
- Flask
- scikit-learn
- pandas

## **Getting Started**
First, let's create a new directory for our project and navigate into it:

```
mkdir flask-iris-prediction
cd flask-iris-prediction
```
Next, create a new Python file called `app.py` and open it in your favorite text editor:

```
touch app.py
```

In `app.py`, import the necessary modules:

```
from flask import Flask, render_template, request
from sklearn.datasets import load_iris
from sklearn.tree import DecisionTreeClassifier
```

Create a new Flask application:

```
app = Flask(__name__)
```

Define a route for the home page:

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

Define a route for the prediction page:

```
@app.route('/predict', methods=['POST'])
def predict():
    # Load iris dataset
    iris = load_iris()
    X = iris.data
    y = iris.target

    # Train decision tree classifier
    clf = DecisionTreeClassifier()
    clf.fit(X, y)

    # Get user input from HTML form
    sepal_length = float(request.form['sepal_length'])
    sepal_width = float(request.form['sepal_width'])
    petal_length = float(request.form['petal_length'])
    petal_width = float(request.form['petal_width'])

    # Make prediction
    prediction = clf.predict([[sepal_length, sepal_width, petal_length, petal_width]])

    # Return result to HTML page
    return render_template('index.html', prediction=prediction)
```

Finally, add a check to make sure that the application is being run directly and not imported:

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

## **Creating the HTML Templates**

Create a new directory called `templates`:

```
mkdir templates
```

Inside the `templates` directory, create a new HTML file called `index.html`:

```
touch templates/index.html
```

Open `index.html` in your text editor and add the following code:

```
<!DOCTYPE html>
<html>
<head>
    <title>Iris Prediction</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <h1>Iris Prediction</h1>
    <form method="POST" action="{{ url_for('predict') }}">
        <label for="sepal_length">Sepal Length:</label>
        <input type="text" name="sepal_length" id="sepal_length" required>
        <br>
        <label for="sepal_width">Sepal Width:</label>
        <input type="text" name="sepal_width" id="sepal_width" required>
        <br>
        <label for="petal_length">Petal Length:</label>
        <input type="text" name="petal_length" id="petal_length" required>
        <br>
        <label for="petal_width">Petal Width:</label>
        <input type="text" name="petal_width" id="petal_width" required>
        <br>
        <button type="submit">Predict</button>
    </form>
    {% if prediction %}
    <p>The predicted species is {{ prediction[0] }}</p>
    {% endif %}
</body>
</html>
```
Here we have a simple HTML form with input fields for the four features of the Iris dataset, and a "Predict" button that will send the form data to our Flask application. If a prediction has been made, the result will be displayed below the form.

## **Adding Some Style**

Create a new directory called `static`:

```
mkdir static
```

Inside the `static` directory, create a new CSS file called `style.css`:

```
touch static/style.css
```

Open style.css in your text editor and add the following code:

```
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

form {
    max-width: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

button {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #3e8e41;
}

p {
    text-align: center;
    margin-top: 20px;
}
```

This will add some style to our HTML form and make it look more visually appealing.

## **Running the Application**

To run the application, execute the following command:

```
python app.py
```

This will start the Flask development server on `http://localhost:5000/`.

Open your web browser and navigate to `http://localhost:5000/` to see the home page.

Enter some values for the four features of the Iris dataset and click the "Predict" button. The predicted species will be displayed below the form.

## **Demo**

Here is a quick demo of the application in action:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l52s4taiksfli95vc9x.png)

In this demo, we can see that the user has entered values for the four features of an iris flower, and clicked the "Predict" button. The application then displays the predicted species of the iris flower based on the input values.

This is just a small example of what you can do with Flask and machine learning. With a little bit of creativity and knowledge, you can build powerful applications that can make predictions based on data.

## **Conclusion**

In this tutorial, we have built a simple Flask application that uses a decision tree classifier to predict the species of an iris flower based on its features. We have also added some style to the HTML form using CSS. Flask is a powerful web framework that makes it easy to build web applications with Python. With a little bit of knowledge about web development and machine learning, you can create powerful applications that can make predictions based on data.