5 Things I Wish I Knew Before Learning Streamlit

a speaking up stream need to quickly build interactive web apps a good idea hello data fans the first time you sprinkle stream commands in your python script your mind will go you're a wizard Harry you can deploy a python web app to billions of devices connected to the worldwide web in an hour without your python brain touching any line of HTML CSS nor JavaScript so what's the catch in this video I'll summarize my two years of breaking stream to tell you what I wish I knew I couldn't implement easily that way you won't get disappointed halfway through learning it by some of its self-imposed limitations and you know what I will even offer some streamlet Alternatives in each case for you to test and my first big problem with streamlet is a year ago I was watching the Adobe Max life conference it's one of the biggest events bringing together over 10,000 creative professionals around the Adobe ecosystem quite a big mainstream event now if you used stream for more than than 5 minutes here are some recordings of the Adobe Max sneak peek talks and again we generated a new image matching my pose and yes this yellow dress is really adorable and uh choose some languages let's just do Spanish and German this is exactly what you use stre it for in front of large audiences like the European Parliament and maybe the CTO of your dream company but but could you tell those are Adobe streid projects there's no Adobe branding no logo no fiery color to make them look distinct they just look like any other of the million apps deployed over streid cloud and it's not like it's impossible to customize your app a little here's a streid app that doesn't really look like a streid app it does take some anofficial hacks I'm about to share with you and unfortunately a tiny bit of HTML CSS and JavaScript you can change the primary secondary color theme of the app through the theme menu in the top right toolbar feel free to purchase this these changes in the street/c config Tel file but this will change the color of every streamnet widget that's a bit of a shame if you want your buy me a coffee button to stay yellow amongst all of the red buttons now unlike gradio or Solara there's no official way to use a background color or border color or any CSS property as an argument of a particular stream widget if you wish to pass uncommon CSS styes like dark shadow you'll need a streamit widget that renders as HTML and can contain your malicious SC CSS that will infect your button you can pass CSS code that hijacks specific widgets with a given CSS class through markdown with the unsafe allow HTML argument markdown doesn't accept JavaScript though but your JavaScript code can break out of a streamid iframe to browse and hijack a very specific streamid widget I have like two or three videos about sabotaging the structure of your streaming app I'm I'm sure you will love them now how about moving widgets around streaming as layout methods to position elements you you can for example include widget in an accordion with st expander you can reorder the appearance of elements with stmt placeholders or use St columns to sort widgets in a horizontal layout but you won't get the more advanced CSS layouts like like grid layout or Flex box align items or justifi text so sometimes you do get those misaligned labels if you're a pixel peeper you have no control of padding and margins between elements technically you can add a blank sized column and new lines to make space between elements but if you want horizontal margin to be specifically 62.7 pixels because I don't know your figma designer say it so well streaming won't help you much and while you can create your own HTML blocks through unsafe markdown HTML the St HTML method or even integrate any Javas scrip react ugsv libraries through the streamy components framework any of those will be strictly imprisoned inside its side frame so no model window no notification popup no right sidebar no loading backdrop Etc at least Dash Solara or reflex provide you with boundless Freedom over how you design your HTML CSS structure in your app in short you're stuck with the elegant modern refined streamate look where any CSS styling any JavaScript moving any HTML building you force into the app feels like someone in the world thinks TriMet has a very Y2K aesthetic those are the years where we were building those kikass 16 Bar drum machine beats but if you're tagging yourself an instrument music player writing down bits on a 16 bar grid feels way too rigid I want to groove outside the 16 Bar Loop and that's how I make sense of stream it's a python looping machine that reruns the script every time you interact with a widget it is very easy to use until you want to break out of that Loop even the documentation tells you features to work around the linear top to bottom model are considered Advanced features of streamlit you will find Solutions like session state to store us interactions as python variables that don't disappear after a rerun unchange and unclick callbacks from stute widget that patch session state with new values before rerunning the full script the SD cach decorator to prevent an expensive function from rerunning if its argument didn't change forms that prevent the rerun of an app for widgets inside it until you click on the submit button even the session State topic inst stream has a lot of magic in it you're a wizard you can associate widget value to a session State key using the key argument so when you interact with a widget session state is updated automatically with the new value but it doesn't go the other way around you can't reinitialize the widget value by changing the session State key instead you'll have to completely erase the widget by changing the key to a new one this makes reloading widget state from a database a little peculiar those ways of breaking out of the Matrix look great but they don't interact well with other pythonic ways of breaking out of the loop like multi threads or multiprocessing or ainio for example if you want external threads to call stream widgets you'll need to register the threads with the ad report context method which by the way is an undocumented private method we're not really supposed to use but hey this video is about using streamit outside of what it was designed for so what CF caping method or open AI streaming response would expose you its running background threads so you can pass it into add report context mixing it with stream's own event Loop and and I've done that for some real-time applications you're basically running concurent event Loops Without Really controlling how they interact with each other streaming apps are vulnerable to scope cre when you put too much features into this single rerun sequence here's our typical streid freelance project goes your Streit app starts as a small content focused MVP you show to your stakeholders they get so impressed they tell you to put it into production and then add a new slider a loging form an about page Google authentication pay subscription post to social media export as PDF add a chatboard each of those add a new nested dependency inside the top to bottom Loop and it just becomes a build your streaming apps the uni way focus on demonstrating a single but highly valuable idea at least that's my Philosophy for using streamlets if you know your app is going to grow bigger and bigger both in scope and size or maybe you just want call back I'd switch out from stream to panel for more complex and approachable apps or h2o wave for realtime dashboards but maybe all of this is going to change very soon because we're seeing some partial rerun comits which sound very Loop breaking so stay tuned by subscribing to my channel we've G along long way for hosting llms on our machine as Solutions like LM Studio orama can expose a local llm behind a rest API there have been times where I wanted to configure a ml model from a streamit app and declare a new web route from the backhand server to serve predictions from it or maybe presenting static assets like AI generated images or custom map ties from the streamid server at this time you can enable static file serving from a folder by adding the enable static serving equals true configuration and any files in the static folders are now served by the app static file name URL though you're limited to image file types sorry no video nor folders with an index. HTML to serve as a static blog but hey we are not backend developers we have no reason to access and derail streamid backend server right no if you dare not follow my previous advice and try to keep growing your streaming app for you will eventually want to play around the tornado backend server for for backend stuff and there's a lot of backend stuff you'll want to add plugging in new URLs integrating o authentication managing cookies reacting to custom headers from the request adding Google analy ICS backend subscription management just to name a few the community has figured hacks for each problem just look into the gup issues for COD Snippets that edit the installed server.py script yes you're totally smashing the stream installation now other Solutions involve adding a reverse proxy like n inks in front of your streamid apps because you have control over this n n and then you can use that n n to add authentication or cookies or custom headers but it's yet another component to configure for web socket passing and sticky sessions and https certificates and plus you'll probably need to spin up some do compost to debug it locally I'm sorry if you came into this video as a data scientist thinking I thought stet would transform me into a full stack engineer without having to be one why are you showing me so much front end and backend stuff my point is you'll want to play with the tornado server behind streamlet but it doesn't let you access it just like you know libraries won't let you access its background threads encapsulation rule don't let it see your your heart streid being acquired by snowflake means it's probably reworking the backend front end connection to swap between multiple back ends if you had a PR for Native Google analytics for example this solution must work locally on streamid cloud h face spacers snowflake possibly web assembly Solutions like St light that is a lot of deployment platforms to take to to care about how do other libraries work around it greato shiny nice guy let you mount an app as a sub app of a standalone fast API app I think you can configure the parent fast API Behavior through plugins like authentication cookies management and custom headers and you get the side effects from the those plugins on the gradio shiny nice guy Etc sub app so you basically have the full Fast API ecosystem working on your smaller app in any case any backend service you want to add to streamlit would be better off as an complimentary engine in front of the app streamlet is primarily designed as a front end for your python script you can inject backend features but I'd rather not break any more streamlets since backend engineering is outside my comfort zone I decided to learn Google Cloud platform and pass it professional architect certification and I discovered something very random do you know what's the common point between Healthcare Providers government public sector and financial services I'll let you 5 Seconds to guess 10 seconds later they all appear on a specific Google Cloud platform page the compliance page those Industries have some of the the harshest data security and privacy laws and sharing your delightful yet sensitive streamy data apps over the Internet or even on an internal air gap server with no internet connection is absolutely out of the question so yes there are a few cases where you want to send an app to your marketing colleague that doesn't rely on messing up a computer with wsl2 and Docker something like a native desktop or mobile streamid app and there are other advantages to building a desktop or mobile version from working offline to accessing the device Hardware like camera or notifications plus imagine the monetization opportunities if you could push a streamit app into the app store or the Play Store to be fair you know it's hard to call this a paino trying to build an executable out of a web app it's a little like here is your very powerful interactive bi tool to visualize multi-dimensional data do of chart time AI driven user friendly easy to share super expensive sounds great can I download the data in explorative Exel wait what there is work around building executables out of a python app with libraries like py installer py oxidizer or cx3 they have very detailed tutorials about how to correctly package all python dependencies way too long and way too detailed for me to do a video about it I'll be honest I have no clue how to explain any those solutions to myself so I won't even try for this channel but foral everybody has a web browser how about we get rid of the tornado server we don't have access to it anyway and run stream it entirely in the browser what and so I'm very very excited to announce a project called py Script some developers are bringing pyone to run entirely in the browser using the power of web assembly with initiatives like pyodide or py script youo one of the streid ambassadors has built the site Library which runs streamlet inside the pyite runtime entirely in the browser you can try it out in the St light sandbox without having to install anything in your computer put your streamlet script inside the HTML file under a site tag send that HTML file to your colleague and let it be enjoyed with some effort you can embed a stream it app inside a full react project and then you know what web Library can build crossplatform desktop app out of a fully bundled web app electron the library to build crossplatform desktop apps from web apps which enables the terrifying yet one of the easiest ways to convert a streamlet app to an executable streamlit to site to electron Builder to electron executable desktop apps that has limitations don't expect to send an entire local llm with the HTML file and have it work on the MacBook Pro a colleague if there's none of the llmc C+ dependencies that have been built with pyodide on Mac OS and we haven't even talked about deployment on mobile and smartphones for the Gen Z that are stuck on their mobile and personally I have no clue how to build a native mobile app for my web app there's probably a framework for this but I I you know I've never tried so I wouldn't know just rely on streaming it being mobile responsive if a smartphone accesses the URL for your deployed app it adapts its or onal layout to fit the phone screen honestly if you really cannot deploy a streamit app on a local server or a Docker swarm kubernetes cluster and building a distributable application like this is your top priority H maybe you should go for a dedicated technology there's a python framework similar to streamlit but that relies on flutter a Google open source UI library that cross builds into desktop and mobile apps it's called Flat I haven't dug into it but I've been recommended flat in my comments a few times already may maybe you know let's stop using streamid for things that are way out of what it was meant to be used for you know if you browse through the streamit landing page you'll find this section streamit is compatible with basically everything your python script can manipulate Panda Seaborn plotly hugging face open AI it doesn't really matter well what if there was a whole python ecosystem not usable in streamlet but are in Shin your panel the plotly library is one of my favorite libraries for interactive plotting with a single plotly express code I can generate a stacked bar chart from a pandas column then and then display it with st plotly chart widget then I can interact with it hover over data points to see the tool tip zoom in or scrolling and hide charts by clicking on the Legend So the next step for a data analyst is can I select some of the data points to filter for a drill down analysis the plotly documentation does have an interaction documentation to react to click and hover events it uses a component called plotly widget that that sounds like what I need plotly widget is a Jupiter widget they are interactive controls initially designed to run under Jupiter notebooks and just like streamlets you have Jupiter widget for basically everything sliders checkboxes accordion Maps they're displayed inside notebooks and synchronize the state back into python code similarly to streid components there is a plug-in system to integrate any JavaScript library into a Jupiter widget and you know Jupiter notebooks being the Superstar python coding interface for data specialist has grown a massive number of external widgets like IP leaflet or pyre GS or plotly widget while streamlit has streamlit plotly events and an official streamlit component that links plotly GS back into the python figure plotly widget is the official interactive widget for Jupiter and it is able to react to any plotly event to edit the figure without you touching any actual JavaScript so can't we just embed plotly figure widget into a streamit app n this video is already too long for an explanation do you want to do the explanation let me do it for you go read this article it explains how integrating Jupiter widgets into streamlit would work tldr need to build a streamlit component whose front end spawns a widget manager which communicates with a new object with custom Comm logic linked back to the streamlit rerun from top to bottom event Loop thank you mrat all in all we cannot integrate IP widgets in streamate apps yet to voila it's supposedly doable there was tentative work on the Forum but someone needs to take on the r that's a big bummer because it seems each JavaScript library now needs to bring a Jupiter widget and a streid component and a grual component and any data app component not a lot of Library will do this instrumed components are usually maintained by one person only who sometimes don't have the bandwidth nor the motivation to update it inflexible layout and styling hidden event Loop and backend server missing on jupit widgets with all of those flows streamit keeps growing at a fast pace and is still widely popular today now don't get me wrong you can build very expressive and advanced interactivity within streamlet but I feel streamlet falls upon the content side it's designed for you to create interactive data science content without spending ing mental energy on flashy design well I will bring my worst comparison ever stream it is to data science what WordPress is to web developers both are excellent choices for quick userfriendly websites that focus on the value of the content and then you can add your custom JavaScript code to extend the library for example here's how to create a component for your own interactive plotly figure in streamlet you will learn just enough JavaScript to have the hidden power to extend any other data app Library you want and and for the others I'll see you around bye

Channel: Fanilo Andrianasolo

Views: 21,842

Keywords: how to use streamlit, learn streamlit, python, python streamlit, python web app, streamlit, streamlit multipage, streamlit release, streamlit tips, streamlit tutorial

Id: IOYHVPPbZII

Length: 21min 34sec (1294 seconds)

Published: Sun Feb 11 2024