Quickly share ML WebApps from Google Colab using ngrok for Free | by AbdulMajedRaja RS | Towards Data Science

There’s a joke on the Internet about how most Machine Learning Models end up in a Powerpoint presentation. If you are a data scientist, probably you can’t deny that fact. But things have started changing, especially with solutions like Voila, Streamlit, Dash by Plotly. These are part of a niche within ML and Data Science community enabling Data scientists and Machine learning Engineers — who’s no Web Developer — to develop and deploy Machine Learning Applications (as Web apps — like SaaS).
Their main pitch is that you can write web applications simply with your familiar syntax of Python (that means, no javascript required ). As this sort of ML Web App development is kicked off, many data scientists are still used to and like to code on Jupyter Notebooks, unlike Web Developers/Software Engineers who mostly prefer a full-fledged IDE like VSCode or Sublime Text. That’s also the case with Hobbyists who use Google Colab to develop such Machine Learning Web App Prototypes — either as a hobby project or as an assignment for a potential job opportunity. Ironically most of the time, those things are shared as Jupyter Notebook or screenshots or someone has to take the pain of deploying them in pythonanywhere or Heroku
If you are in such a situation, This hack would come very handy because you’d be able to share your ML Web Application using a Public URL with anyone in the world(temporarily). This hack uses a very popular secure tunneling solution called ngrok You can read more about what ngrok is and what it does here.
Basically, ngrok takes something available/hosted on your localhost and exposes it to the internet with a temporary public URL (Note: you can get a permanent ngrok URL with their paid service). All this in a secure manner. To proceed further with this hack, you’d need an ngrok (free is fine) account and the authtoken of your account from your dashboard.
While it’s quite possible to install ngrok on Google Colab and then move forward, I’ve taken the shortest path of using a Python wrapper called pyngrok which does a lot of basic setup for us and also lets us access ngrok in command line/shell. This means you can use ngrok commands on Google Colab cell with !ngrok (just like how you’d access system commands)
pyngrok — https://github.com/alexdlaird/pyngrok
Install pyngrok python package on your Google Colab Session
!pip install pyngrok
Set up your ngrok Authtoken
!ngrok authtoken xxxxxxxxxxxxx
For this use-case, let’s consider a sample web app built using jupyterdash
!pip install jupyter-dashimport plotly.express as pxfrom jupyter_dash import JupyterDashimport dash_core_components as dccimport dash_html_components as htmlfrom dash.dependencies import Input, Output# Load Datadf = px.data.tips()# Build Appapp = JupyterDash(__name__)app.layout = html.Div([    html.H1("1littlecoder deploy ML App Colab ngrok Demo"),    dcc.Graph(id='graph'),    html.Label([        "colorscale",        dcc.Dropdown(            id='colorscale-dropdown', clearable=False,            value='plasma', options=[                {'label': c, 'value': c}                for c in px.colors.named_colorscales()            ])    ]),])# Define callback to update graph@app.callback(    Output('graph', 'figure'),    [Input("colorscale-dropdown", "value")])def update_figure(colorscale):    return px.scatter(        df, x="total_bill", y="tip", color="size",        color_continuous_scale=colorscale,        render_mode="webgl", title="Tips"    )# Run app and display result inline in the notebook
Run the web app (on external mode for us to get the localhost port details)
app.run_server(mode='external')
In my case, The web app is running on localhost port: 8050
Invoke ngrok from Python and start tunneling/connecting
from pyngrok import ngrok# Open a HTTP tunnel on the default port 80public_url = ngrok.connect(port = '8050')
Print the public_url (object) to get the actual public URL where the web app is being tunneled
public_url
Voila! Your Web App is now available on the Internet — running on Google Colab and URL exposed with the help of ngrok!
Time to share your URL with your friends/colleagues or on Social media and get feedback for your ML Web App!
The objective of this tutorial is to help Machine Learning Engineers and Data Scientists to share their Web App Development with the world (temporarily) without much hassle — actually, just with a few lines of Python code and minimum dependency. Please note, this is not a production solution and you might want to know a lot more than simply tunneling in that case. But hey, this is a good first step to begin your journey of ML Web App development and sharing it! Let me know your thoughts!
References
Jupyter Notebook used here— https://github.com/amrrs/youtube-r-snippets/blob/master/temporarily_deploy_ML_webapp_with_Google_Colab_and_ngrok.ipynb
pyngrok — https://github.com/alexdlaird/pyngrok
ngrok — https://ngrok.com/