Streamlit is an open-source Python library that makes it easy to build and share custom web applications for machine learning<\/strong> and data science<\/strong>projects.<\/p>\n You can visualize your data with different Streamlit elements and also you can use Html, CSS, and JavaScript codes in your Streamlit app. This means that you can develop professional web applications.<\/p>\n Okay, we can dive into the details for the app web application! I often use Streamlit. Today, I will introduce you to the features I often encounter and share my own tips and some detailed information.<\/p>\n With this Medium Blog, we will develop a Streamlit page together, step by step. I will explain all the steps in detail. We will create a home page consisting of two tabs and sidebars, Lightside and Darkside. On this page, we will list our data in different formats, show it with graphs, and see how different pieces of code are added to our Streamlit code.<\/p>\n Streamlit presents so many features such as buttons, sidebar, page design, checkbox, and more. You can also visit Streamlit\u2019s tutorial <\/a>on the website.<\/p>\n Today’s goal is to meet with Streamlit and develop the first data web page!<\/p>\n I created a small dataset by collecting my own Twitter statistics. I will create a web page with Streamlit and display this dataset on this page. We will look at visualizing, presenting, and displaying the dataset on our web page by interfering with the dataframe. You can reach this data and code on my GitHub repo.<\/em><\/a><\/p>\n This image is an excel data part and I will use only some columns.<\/p>\n First, I should import my data to code with a CSV file for more than readability.<\/p>\n I added a CSV file and next is going to Streamlit!<\/p>\n Only I added streamlit and used the \u201cwrite\u201d function, and I have a web page on my local! I am seeing my data with this write function. You can use Streamlit website<\/a> for installing and creating env.<\/p>\n We can organize our own web page and Streamlit is presenting some features about it. We can split cells, and web pages inside and we can group images, texts, and elements.<\/p>\n It is possible to create more organized page structures with the elements we will use in layouts and containers. With the sidebar we will use in our example below, we can decide how to visualize our data with quick actions on the left while we can visualize our data on the right. This means pages where we can take real-time actions and see our data clearly!<\/p>\n We can create an area for our page elements like text, buttons, etc.<\/p>\n I used a sidebar func with Streamlit and I wrote a text. You can see the result below.<\/p>\n You can see the tabs\u2019 default function below.<\/p>\n I will create special tabs with my design. I will create these tabs with markdown but I will show the design tabs in detail in the next steps.<\/p>\n I am creating 2 tabs and the names are \u201cLight Side\u201d and \u201cDark Side.\u201d And I am showing my data frame result in Light Side tabs.<\/p>\n Another step of being organized is the use of columns. We can add images, text, and different content by dividing our page into columns.<\/p>\n In this step, I made an example with two columns and full of text. I performed the column separation process in the second tab (Dark Side).<\/p>\n With Streamlit you can add different elements to your application. Button, slidebar, checkbox, and more.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n The most important thing to keep in mind when building and deploying your model? Understanding your end-goal. Read our interview<\/a> with ML experts from Stanford, Google, and HuggingFace to learn more.<\/p><\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n I think one of the features I use the most is the Button. You can visualize your data, get in-page printouts and show different data by adding different prerequisites.<\/p>\n Yes or no? It\u2019s the checkbox\u2019s job to look for the answer to this question.<\/p>\n I created a code sample for checkbox and button usage. If users like this app and wanna get results, we can show our data! I included text, a checkbox, and a button in the sidebar area.<\/p>\n Streamlit supports different content such as tables, data frames, and text. You can print it in Streamlit according to the entity you will give.<\/p>\n In this title, I will give an example of a Dataframe:<\/p>\n We have seen that with the write function we can print a data frame as if it were printing text. We can get data frame output on the screen with both the write function and the data frame function. You can use these functions ready-made in Streamlit, and you can easily get printouts for Data Science projects.<\/p>\n You can see our data output for the write function and data frame function below. We can take our data and the fields we want our data to be displayed specifically from the data frame and produce special output.<\/p>\n With the help of Charts, we can visualize our data, analyze our data, and get summary information. When we say \u201cPython\u201d and \u201cData,\u201d we can think of charts, which are part of data analysis and data visualization. With Streamlit, we can also use charts and quickly include them in our code. Let\u2019s examine the examples!<\/p>\n When I say data visualization, I think of features such as Plotly, Pyplot, and mapping. The great news is that Streamlit supports them. Let\u2019s exemplify Pyplot from these features!<\/p>\n Here I drew a line chart for the Tweets column in our data.<\/p>\n The output is very clean, very visual and very modern!<\/p>\n We added the Markdown code to our Streamlit code that we give examples of. Streamlit supports different types including Markdown.<\/p>\n The support I want to talk about is the support it provides for HTML, CSS, and Javascript codes. While developing data science projects and working with Python, we may need to add HTML, CSS, and Javascript codes to our code in order not to compromise some visual and functional features. This can be for the visual elements we need to add, or it can be for customizing a component in Streamlit. Streamlit supports us to add different pieces of code<\/p>\n This is my favorite part! Streamlit supports different theme features and I love that.<\/p>\n You can change the background, text color, and font. Streamlit uses some default elements and you can design this.<\/p>\n For web site theme<\/strong>, the default is your computer’s default. This means that if you are using the dark theme, your page will be dark. That’s awesome! Also, directly you can select a theme, and then you can design your website page.<\/p>\n Also, you can color texts, change fonts, and you can create your contents like a rainbow.<\/p>\n The part where I\u2019m going to publish an app is the hardest part. Choosing where to publish, looking at cloud environments, and determining publishing details according to needs. One of the things that makes Streamlit special is that it hosts the Streamlit Cloud feature and offers options for those who will deploy their application.<\/p>\n You can publish your Data Science projects with Streamlit Cloud and benefit from Docker and Kubernetes tools.<\/p>\n I\u2019ve added the code that contains the whole sample code snippet to my GitHub repository<\/strong><\/a>. You can get the results I gave in the example by downloading the code and installing Streamlit on your computer.<\/p>\n![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*yh52I03YVQq9JjYDVmSzag.png\")
<\/figure>Meet with Streamlit<\/h1>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*HSECAKfDTKEccYI4yopYBw.png\")
<\/figure>import pandas as pd\n\ndata = pd.read_csv(\"twitter.csv\", sep=\";\")<\/pre>\n
import pandas as pd\nimport streamlit as st\n\ndata = pd.read_csv(\"twitter.csv\", sep=\",\")\nst.write(data)<\/pre>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*IZrsONSA3xEDx6TY3Xi57w.png\")
<\/figure>Layout and Containers<\/h1>\n
\n
Sidebar<\/h2>\n
import pandas as pd\nimport streamlit as st\n\ndata = pd.read_csv(\"twitter.csv\", sep=\",\")\nst.write(data)\n\nwith st.sidebar:\n st.write(\"Here is sidebar\")<\/pre>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*MTnEmyrdFANf1fwzYd41aA.png\")
<\/figure>Tabs<\/h2>\n
\n
st.tabs(tabs)<\/span><\/pre>\ndef tabs(default_tabs = [], default_active_tab=0):\n if not default_tabs:\n return None\n\n active_tab = st.radio(\"\", default_tabs, index=default_active_tab, key='tabs')\n child = default_tabs.index(active_tab)+1\n\nactive_tab = tabs([\"Light Side\", \"Dark Side\"])\n\nif (active_tab == \"Light Side\"):\n st.write(data)<\/pre>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*T0wIRFtKcnZ4Ua-Pq-AaRw.png\")
<\/figure>Column<\/h2>\n
st.columns(spec, *, gap=\"small\")<\/span><\/pre>\nif (active_tab == \"Light Side\"):\n st.write(data)\n\nelse:\n layout = st.columns([1, 2])\n with layout[0]:\n st.write(\"Column A\")\n\n with layout[-1]:\n st.write(\"Column B\")<\/pre>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*9GYB9mRahzQGOHW5Odz88Q.png\")
<\/figure>Elements<\/h1>\n
Buttons:<\/strong><\/h2>\n
st.button(label, key=None, help=None, on_click=None, args=None, kwargs=None, *, disabled=False)<\/span><\/pre>\nif st.sidebar.button('Get Results'):\n if (active_tab == \"Light Side\"):\n st.write(data)\n else:\n layout = st.columns([1, 2])\n with layout[0]:\n st.write(\"Column A\")\n with layout[-1]:\n st.write(\"Column B\")<\/pre>\n<\/div>\n![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*z_UJQdPAxmoBP0jO8S8vYQ.png\")
<\/figure>Checkbox:<\/h2>\n
st.checkbox(label, value=False, key=None, help=None, on_change=None, args=None, kwargs=None, *, disabled=False)<\/span><\/pre>\nwith st.sidebar:\n st.write(\"Do you like this app?\")\n cbox = st.checkbox('yes')\n\nif st.sidebar.button('Get Results'):\n if cbox:\n if (active_tab == \"Light Side\"):\n st.write(data)\n else:\n layout = st.columns([1, 2])\n with layout[0]:\n st.write(\"Column A\")\n\n with layout[-1]:\n st.write(\"Column B\")<\/pre>\n![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*iO8SQJlHKaQ5gO2F8c9yCA.png\")
<\/figure>DataFrame, Table and Different Versions with Streamlit<\/h2>\n
st.dataframe(data=None, width=None, height=None, *, use_container_width=False)<\/span><\/pre>\nif st.sidebar.button('Get Results'):\n if cbox:\n if (active_tab == \"Light Side\"):\n st.write(data)\n st.dataframe(data[\"Tweet Impressions\"])<\/pre>\n![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*r6y87mrQ-1fcZ5IppVmpCA.png\")
<\/figure>Chart\/Visualize with Streamlit<\/h1>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*Uw3IaV-wHnYkMUrLBVTfpg.jpeg\")
<\/figure>st.line_chart(data['Tweets'])<\/pre>\n
<\/figure>Code in Streamlit<\/h1>\n
Theme<\/h1>\n
Deploy App<\/h1>\n
![\"\"](\"https:\/\/miro.medium.com\/v2\/resize:fit:700\/1*6eI8tSUjjEa1wRKuz_aTQQ.png\")
<\/figure>