Building Portfolio using Streamlit

It can’t get easier for a Data Scientist

My Portfolio: https://share.streamlit.io/mehulgupta2016154/resume_builder/main

Github repo:

GitHub - mehulgupta2016154/portfolio_builder

Portfolio review:

My debut book “LangChain in your Pocket” is out now

LangChain in your Pocket: Beginner's Guide to Building Generative AI Applications using LLMs

I have been in the Data Science space for some 3–4 years now & one common problem I usually find with any personal project is my inability to add an interface for users to use over any model/solution quickly. Though you can push your code on Github but still, adding an interface with it helps in many ways:

The non- DS guys can also play around hence wider audience

Provides data abstraction.

An Interface on top of ML stuff does look like a complete product in itself.

Effective demos.

On the other side of the coin, being a data guy, I really don’t wish to deep dive in either Front-end or Back-end stuff & focus more on the data things. So, ideally, what I was looking for was

Something that provides decent front-end back-end facilities without learning any frameworks.

Very quick to develop. It shouldn’t take more than a few hours to develop an interface.

Easy deployment.

While exploring, I came to know about Streamlit & since then, I have been a fan. Why?

• Easy to deploy. You just need to push your code to git !! no environment setup is required from the developer's end. It took me ~10 minutes for my 1st deployment
• Commonly used front-end components as in-built functions. For eg: If you wish to add a button, you need to add a snippet: streamlit.button()
• A single script gets all your work done !!
• Integrates well with primary libraries used by data scientists be it pandas or numpy or plotly or matplotlib.
• If needed, some complex functionalities can be integrated

I tried this to build out a portfolio for myself & I am amazed at the ease of it. The rest of the post is majorly around the different components used in the portfolio & how they were built.

1. Import all prerequisites

import streamlit as st
import numpy as np 
import pandas as pd
from PIL import Image
from streamlit_timeline import timeline
import plotly.express as px
import plotly.figure_factory as ff
import requests
import re
import io
import matplotlib.pyplot as plt
import streamlit.components.v1 as components
import tensorflow as tf

The sidebar

1. To add any element (be it a button or some text) on the left pane, this can very easily be embedded using streamlit.sidebar.feature_name. This feature name can be replaced by write() or button(). For eg:

• streamlit.sidebar.button()
• streamlit.sidebar.write()

2. The download resume button is a special type of button using which we can provide a download option for any file using streamlit.download_button(). What we need to do is mention what to display, the file content & file type (mime)

st.sidebar.caption('Wish to connect?')
st.sidebar.write('📧: xyz@gmail.com')
pdfFileObj = open('abc.pdf', 'rb')
st.sidebar.download_button('text_to_display',pdfFileObj,file_name='abc.pdf',mime='pdf')

3. LinkedIn & Stackoverflow badges have been generated by following two steps:

• Get an HTML snippet from the respective website for the badge. You can get your profile badge by following the links in the readme
• Integrate these badges using streamlit.components.html(‘HTML Code’).

components.html(embed_component['linkedin'],height=310)

where embed_component[‘linkedin’] holds my profile HTML snippet.

Do refer to the below vlogs for a better understanding over embedding Stackoverflow & LinkedIn profiles

Career Snapshot

A very interesting feature helps you to build an interactive timeline (the right pane on the above image). This can be generated in 2 steps

• Generate a JSON file using the given format & sample here.
• Call timeline() imported from streamlit_timeline

with open('timeline.json', "r") as f: 
       data = f.read()        
timeline(data, height=500)

Unable to understand, the below video will help you

Skills & Tools

It has been generated by some hack around streamlit buttons & streamlit.columns(). To place 2 elements side by side rather than one below the other, you can initialize a variable like

columns = st.columns(5)

where 5 is the number of elements I wish to fit in within a single line. Once done, of calling st.button(), call columns[index].button() to place a button.

columns = st.columns(3)
columns[0].button('Yes')
columns[1].button('No')
columns[2].button('Don't know')

This will place 3 buttons side by side with each other. You can arrange buttons, text, images, etc. like this.

Education

Creating such a table isn’t very problematic. You just need to define a dataframe object & call

st.table(dataframe)

Though, to add some aesthetics not provided by st.table(), I tried Plotly & integrated Plotly graph with streamlit using st.plotly_graph()

import plotly.graph_objects as go
fig = go.Figure(data=[go.Table(  header=dict(values=list(df.columns),                fill_color='paleturquoise',               align='left',height=65,font_size=20),    cells=dict(values=df.transpose().values.tolist(),               fill_color='lavender',               align='left',height=40,font_size=15))])
fig.update_layout(width=750, height=400)
st.plotly_chart(fig)

As told earlier, streamlit provides a lot of basic functionalities, but if you wish to add some spice, streamlit always gives you the space to do that as well.

Research Papers

The components of interest here are

• st.markdown(‘HTML snippet’): To add basic HTML code. For eg: To underline the paper name, I used:

st.markdown('<h5><u>'+'xyz' + '</h5>' , unsafe_allow_html=True)

• st.expander() : To add collapse feature. All the details around both the papers have been encapsulated using st.expander()

with st.expander('detailed description'):
                    ......

On collapsing 1st paper description:

• To write any text, you can use st.write() or st.caption()
• Images can be added using st.image()
• The last section of the image uses st.metrics() & st.columns() to add multiple metrics side by side.

st.metrics('Overall',10,delta=0.1)

A delta helps to determine whether there is an increase (green, up arrow) or decrease(red, down arrow). Interestingly, the colors are assigned based on the sign of the number assigned against delta. If it is negative, the color changes to red.

2nd paper’s detailed description looks pretty much the same with a few Plotly bar plots added in a similar way we did for the education dataframe.

Achievements

As discussed earlier, this is completely an HTML snippet integrated using st.markdown() as we did earlier.

Medium profile

This one is really interesting !!

It involved

• Basic web scraping & regex to get follower counts.

page1 = requests.get('medium profile url')
page2 = requests.get('publication url') 
followers = re.findall('(\d+) Followers',page1.text)[0]
following = re.findall('(\d+) Following',page1.text)[0]
pub_followers = re.findall('Followers (?:\w+\s+){4}(\d+)', re.sub('\W+',' ', page2.text ))[0] 
cols = st.columns(3)
cols[0].metric('Followers',followers)cols[1].metric('Following',following)
cols[2].metric('Publication followers',pub_followers)

• An HTML snippet was generated using a Medium widget generator. It also gives a snippet similar to StackOverflow flair & LinkedIn badge that can be integrated using st.components.html() as we did.

Daily routine

This section was built using Graphviz library where you need to provide edges & conditions & based on that the library outputs a graph which is integrated using st.graphviz_chart(graph)

import graphviz as graphviz 
graph = graphviz.Digraph()
graph.edge('a','b',label='if rain happens')
graph.edge('a','c',label='if sun shines')
st.graphviz_chart(graph)

This will lead to a 2 edged graph.

The ML models

Components of interest used in this section are

• st.radio(‘text to display’,[option1,option2,…]): To choose between multiple options
• st.slider(‘text to display’,min_value,max_value): To select from a given range
• st.multiselect(‘text to display’,[option1,option2…]): To select image for translation in 2nd GAN model.

The two GAN models are developed using tensorflow 2.0 in the same way as we build any normal model. The models integrate perfectly with streamlit.

Deployment

Do follow the readme of my git repo for deployment purposes.

In all, building out using streamlit has been an enriching experience & one must try it especially if you are in the data field. You won’t be disappointed !!