You’ve already built a web page where users can draw, and you’ve made the canvas interactive with JavaScript. Now, it’s time to bring everything together by connecting your drawing canvas to a real AI model. In this lesson, you’ll learn how to send your drawing to the server, have a Convolutional Neural Network (CNN) analyze it, and display the AI’s guess right on your web page.

In this section, you will:

• Load a trained CNN model in your Flask app.
• Process the drawing sent from the browser so it’s ready for the model.
• Use the model to predict what the user drew and show the result in the UI.

First we'll load the trained CNN model in the Flask app like this:

This should be done once, typically at the top of your Flask app, so the model is ready to use for predictions.

Next, let's see how the server receives the image from the browser, decodes it, and prepares it for the model:

If the image has transparency, you’ll learn how to handle it so the model gets a clean input:

You’ll also see how to convert and resize the image to match the model’s training data:

And how to prepare the image for prediction:

Finally, you’ll use the model to predict and display the result:

You’ll also learn how to display the AI’s guess and confidence back to the user, making your app feel smart and interactive.

This is where your project truly comes to life. By integrating your UI with a real AI model, you’re not just building a drawing app — you’re creating a tool that can “see” and “understand” what users draw. This skill is valuable for many modern applications, from games to educational tools to real-world AI products.

Let’s get started and see your AI in action!