10. Update model prediction with text and an image

Now that your machine learning model is connected to the web app, let's make things fancy by sending back the Iris classifiaction with text and an image.

To do this, create a dictionary that maps the numeric classification with the Iris name and an image of the Iris online. Put this after the iris/views.py file makes the prediction:

prediction = loaded_model.predict(model_features)[0]

prediction_dict = [{'name': 'setosa',
                    'img': 'https://alchetron.com/cdn/iris-setosa-0ab3145a-68f2-41ca-a529-c02fa2f5b02-resize-750.jpeg'},
                    {'name': 'versicolor',
                    'img': 'https://wiki.irises.org/pub/Spec/SpecVersicolor/iversicolor07.jpg'},
                    {'name': 'virginica',
                    'img': 'https://www.gardenia.net/storage/app/public/uploads/images/detail/xUM027N8JI22aQPImPoH3NtIMpXkm89KAIKuvTMB.jpeg'}]

prediction_name = prediction_dict[prediction]['name']
prediction_img = prediction_dict[prediction]['img']

return render(request, 'home.html', {'form': form, 'prediction': prediction,
                                        'prediction_name': prediction_name,
                                        'prediction_img': prediction_img})

Now add the new context variables to iris/views.py. (<p> The model predicted: <b>{{ prediction_name }}</b></p> <img src={{ prediction_img }} style="max-width:400px">)

{% extends 'base.html' %}

{% block content %}
<form action="" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit">
</form>

{% if form.is_valid %}
<p> The model predicted: <b>{{ prediction_name }}</b></p>
<img src={{ prediction_img }} style="max-width:400px">

{% endif %}

{% endblock %}

Now you will see an image and the iris name when the model makes a prediction!