The world’s leading publication for data science, AI, and ML professionals.

Developing Rebound Probability Predicting App using ML and Flask

In this article, I am going to introduce how I develop an ML-based web application that can predict the odds of individual players and…

A Full-Stack Machine Learning Web App that Predicts Rebounding Probabilities


First of all, let me show what the app eventually looks like:

Go check out http://okc-thunder-rebounds.herokuapp.com/ (image by author)
Go check out http://okc-thunder-rebounds.herokuapp.com/ (image by author)

As is indicated from the image above, users will be able to get the probability for each player/side to get the rebound, which is useful to Basketball operators when they need to arrange tactics about rebounding. And some of the takeaways from the GIF above are:

  1. We need an interface in the frontend that allows users to place the players on the court by dragging the items;
  2. we need a kernel in the backend that can predict any individual probability for a player to grab the rebound (and the summed probability for a team) based on their location on the court;
  3. we need to have a server that hosts the website 24/7.

In the rest of the article, I’m going to describe my ideas in that order.


Frontend design

There are two main difficulties we need to tackle during the development:

  1. how can we enable users to place the players by dragging the elements on the panel?
  2. how should I transport the data from the frontend to the backend so that our model uses it for prediction?

For Difficulty #1, I fortunately found this useful link which enables any elements are draggable on the web page. What I updated is that I confined the div elements representing the players within the panel:

For difficulty #2, my workaround is to insert an invisible