Anyone can build production-ready SaaS application with Machine learning | Bring ML to life

Build your SaaS application with machine learning with all necessary tools and frameworks. It is easier than you think!

Shyam BV
Towards Data Science

--

In my career, I have built different Software as a Service(SaaS) applications. One of my recent SaaS product is Social Image AI. As part of #buildinpublic, I wanted to show case the tech stack which I have used for the product. It is a combination of the various tech stack, including machine learning. I have come up with this stack after multiple attempts in my different products. In this article, I am going to talk about the tech stack which I have used. So this can help you in creating your product.

Image created from socialimageai.com

Where do you even start? It is the first question you usually get when you have not built any products before. The recent surge of no-code platforms is changing the complete landscape. However, after trying out different no-code products, I felt none satisfies all my needs, and it is not flexible as marketed.

Before you even build any product, off-course, you need to have an idea of what you are planning to build. I am going to walk you through the lens of social image AI. Below are the different parts for developing web applications.

  1. Front-end
  2. Front-end deployment
  3. Backend
  4. Backend Deployment
  5. Payment gateway
  6. Authentication
  7. Model training/tuning package
  8. Model deployment
  9. Integrating model results into application

It might seem a lot. But most of it is pretty standard architecture. I will walk through it one by one.

Front-end (React)

Being a python advocate, I have tried out different front-end frameworks, such as Flask, HTML, PHP, Django, etc. Hands-down reactjs is the best. As an ML engineer, you might think that one more language to learn? Because you are skilled at python, you would like to build everything in python and use frameworks like Django or Flask. But those frameworks are suitable only to a certain extend for web applications.

React Front-end folder structure

A considerable advantage of react is the power of community. Many no-code platforms are available to create different components using react for internal pages and include them in your application. Also, a ton of different templates is available to start your front end. So you don’t need to start from scratch.

Front-end deployment

One of the common problems is how do you deploy. But in my opinion, the most challenging issue is how to deploy it in a cheaper way with CI/CD. You likely wanted scalable services and minimum downtime.

After trying out different services like render, Heroku, and other services, I felt the best and easiest way to host your application is via AWS Amplify. Yes, it might be a little odd to go with AWS, and this service has been there for a while. But it is so easy to deploy a website with AWS amplify.

AWS Amplify

Particularly with react, vuejs, gatsby, or any other major java script apps can be easily hosted. Some advantages are

  1. Easy to add a free SSL certificate
  2. Build-in CI/CD pipeline. Push from your code repo
  3. Add development branch
  4. Create a pull-request

Best of all, it is server-less, and the pricing is almost equal to static website hosting. So try out aws amplify today for your SaaS app.

Backend

If you have worked on any machine learning(ML) applications, you might be familiar with python. When you select python for the server-side, you have some advantages. You can efficiently perform any data transformations for your ML apps. Also, you have some options

  1. Serverless
    - AWS chalice
    - Serverless using Lambda
  2. Server
    - Flask
    - Django
    - FastAPI

Once you select python for server-side apps, you need to decide whether to use FastAPI or Flask. FastAPI is a rapidly growing framework that has a ton of benefits. However, Flask is still mature, and it can be easily maintained with a proper folder structure. It also matters how you structure the Flask application. You can group all the keys and configurations in one file so it can be updated easily.

Flask folder structure

Backend Deployment

Similar to the front-end, we need to deploy our backend in a scalable environment. When it comes to the backend, there are a ton of options.

  1. Serverless deployment with Lambda
  2. AWS Elastic Beanstalk deployment
  3. Render or Heroku Deployments

Off-course the advantages of going serverless are low maintenance and fewer server costs. However, in most cases, for an application, we might need a server; else, it takes some time to set up via serverless.

Elastic beanstalk can be used to deploy your application in a scalable fashion. All you require is a profile and do eb init. The command will guide you through the steps to perform. One advantage and disadvantage of this using beanstalk is using a load balancer. It is the one that drives up the cost, but it can prevent or handle any unseen spikes in the application. We can use it without a load balancer, and then we are missing out on the benefits of a free certificate and involved in other configurations.

An alternative approach to elastic beanstalk is to use EC2 or AWS Lightsail machine and perform your configurations. Here we need to an apache web server and create a certificate using LetsEncrypt. Configurations are not huge; however, it involves some setup work.

Render, or Heroku options are cheaper to host flask application. It also provides free SSL certificates. However, if your complete stack is AWS or any cloud provider, I would recommend to go with the same provider to reduce some latency.

Payment gateway

Many of us require a payment gateway, and most of us are aware of stripe. Stripe is the best payment gateway that you can use. It is cheap if you use stripe directly. Best of all, it is easier to integrate when you don’t have any authentication. Little complex if you have multiple plans.

Stripe subscription

Several services wrap stripe and provide an extremely easier option to integrate like Gumroad, or check out this article for more details.

Authentication

Authentication used to be one big headache if you wanted to build a product with simplified login options with different payment options. However, recently there are a ton of services which has simplified the approach. One beauty of using AWS Amplify is you can simply add authentication with a line of command for a hosted UI.

Add authentication

When you use AWS Amplify, it will use AWS Cognito service behind the scenes. However, the login design from AWS is not great. So we might need to customize it for our application. If it is react front-end, we need to update react code. Social image AI is using react based login screen using Cognito in the backend. Cognito is almost free (up to 50k MAUs) if you are starting out. Other options are using okta, Firebase Auth, Auth0 and etc. Most of the authentication service will satisfy the basic needs. As Cognito is more straightforward to add via amplify, we will use it as an authentication provider.

Model training/tuning package

Model is probably your brain of the application. Often you need to train or fine-tune a model. In recent days most of the models are not trained from scratch. For fine-tuning, I generally prefer an AWS sagemaker notebook and import the previous NLP/vision model. I am a big fan of PyTorch, so most of my models are in PyTorch.

Let’s say you are going to fine-tune a BERT model. Below are the checklist

  1. Do you have your dataset to fine-tune?
  2. Is the dataset big enough to fine-tune?
  3. Can you download the pre-trained BERT model?
  4. Can you create the fine-tuning code and transformations?
  5. Were you able to fine-tune the model successfully?

If you need some help in fine-tuning, please check out the article.

Model Deployment

You can’t have a brain without connecting to it. In this section, the brain is connected to the body. In this section, we will deploy the model. Again the sagemaker is the scalable way to deploy your model. Below is the checklist for deployment

  1. Are you satisfied with the model performance?
  2. How big is the model?
  3. What is the acceptable latency of the model?
  4. Do you need GPU’s for inference?
  5. Do you want the model as an endpoint or batch?
  6. How will be model be consumed in an application?
  7. Do you have multiple models?
  8. If multiple models, how to deploy them on a single server?

Sometimes, depending on the model, these steps may take a lot of time. Due to different retries. Here is an article that shows how to deploy a model in AWS sagemaker.

Multi-model deployment

If the model training code is structured as per sagemaker functions, it will be easier to deploy it. Else, the model deployment structure needs to be created and then deployed.

Integrating model results into application

If your server-side is a python framework (FastAPI or Flask), and in AWS, it is probably easy to invoke the model. Below is a sample code to invoke a summarization model.

Fetching Sagemaker data

If the model will be consumed other than Python, it is best to integrate with API gateway and lambda function. As a first step, you will write similar code in the lambda function, and then the lambda function will be called from the API gateway.

Whats next?

Now think of your idea and start creating your product. If you wanted to learn in detail, please subscribe below for the book/tutorials.

Learn from tutorials — created from socialimageai.com

Currently I am in process of writing a book and video tutorials with all the required code to create a SaaS product from scratch. It will walk you through the steps to build the building blocks of a product with machine learning. If you are interested please subscribe here to get notified about it.

Get Code

Please subscribe to my newsletter to get the free working code for my articles and other updates.

--

--