OpenCV Python

Adding a web interface to our NFT Search Engine in 3 steps with Flask

Pinterest LinkedIn Tumblr

In this tutorial, we’ll learn how to transform our command-line based NFT Search Engine from the previous tutorial and turn it into a full-blown web application using Python and Flask.

If you are pretty new to Flask, I recommend starting with the official quick start guild. Or, if you love video tutorials, my favorite two are both by Corey Schafer and Feel free to check them out yourself.

Today’s tutorial is part two in our two-part series of building an NFT Search Engine using Python, OpenCV and Flask:

  1. Building an NFT Search Engine in 3 steps using Python and OpenCV (previous tutorial)
  2. Adding a web interface to our NFT Search Engine with Flask (this tutorial)

Configuring your Development Environment

This tutorial on building a web interface for our NFT Image Search Engine uses OpenCV, Flask and other necessary libraries. If you intend to follow this tutorial, I suggest you take at least a few minutes of your time to configure your development environment.

Good thing you don’t have to worry too much about OpenCV’s installation, as I’ve covered them in this tutorial here. Mostly for Linux users. You can easily pip install them, and you’re ready to go.

Project Structure

Before we get started implementing our Python script for our NFT search engine with Python and OpenCV, let’s first review our project directory structure:

The static directory contains static files, like style sheets, images, JavaScript files, etc.

The templates directory houses our application template, as you have seen the wonderfully structured and designed front-end part of the application.

Inside of the neurapsike module, we have three Python scripts for describing our image. Which performs a quick search between the image uploaded by the user and among the already indexed images and, some helper functions for building this project.

The file is our training script, which performs the process of extracting essential features from each image and saving the result into a database (in our case, a CSV file)

The file is the backend script, which lets the user upload their image and then searches among other images, returning the result based on the level of relevance. This means the first image represents the image close to the query image.

Now we have all these details cleared out, let’s head to the implementation section.


Since we’ve already built the NFT search engine in the previous tutorial, we just need to transfer the relevant code already written to our flask application.


For now, we’ll focus on implementing a single route (also known as an endpoint):

  • The main route (“/”): This page only works with POST and GET requests. Once the user uploads an image and clicks the search button (sends a post request), the results are computed before being displayed to the user.

Main Route

This route is meant to perform the following operations:

  • Handle the POST and GET requests.
  • Receive an image uploaded by the user and searches for similar NFT tokens (using the features.csv file)
  • Returns similar NFT tokens (in a JSON format), which are rendered to the user.

Open a new file called, paste the following code:

What’s happening here?

  1. We defined the endpoint (or route), "/" along with both the allowed HTTP request and respond methods: methods=["GET", "POST"]. Then check if a "POST" or "GET" method was made.
  2. If it was a post method, we’ll grab the path to the image, validate if the image was loaded or not; and if it wasn’t, return an error response.
  3. If everything is alright, we’ll check if the uploaded image file is supported; in this scenario, we will be using only: .png, .jpg, and .jpeg files.
  4. Once the checks are done, we’ll further try to load the image while encapsulating it within a try/except block to handle unexpected errors.
  5. Then finally, on Line 62 – 63, the list of results is passed dynamically from our route handler to the template by appending the key/value pair to the render_templates function. Those are the uploaded image and the result from the search.

Next, in the configuration file, defined variables which hold the paths to where certainly files and folders are located within the web application.

In the script, we included a function that validates if the image uploaded includes the following file extensions format: “.jpg”, “.png” and “.jpeg”, before making a query to the database.


With our back-end code written, we need to fix the structure of how the elements are structured and feel of the displayed result using (HTML, CSS and BOOTSTRAP).

Open the index.html template file and paste the following code:


With that covered, let’s add some style sheets to help make the overall user interface of the application more user-friendly and easy for the eyes.

So open the main.css file and type the following code:

Application Demo

Let’s put our NFTs Image Search Engine into action. So fire up your terminal and run the file.


The fronted part of the application was designed by my Friend Vanja Paunović. Who assisted me in making the feel of the application look much more appealing. Also, it will be great to support his YouTube Channel by hitting the subscribe button.

Further Reading

We have listed some useful resources below if you thirst for more reading.

Write A Comment