10 extra Streamlit widgets you didn't know existed

I've seen some issues around people wanting to put the logo over the Nazi page page section menu well now there's a function for this here's a logo I custom made just for this video and to put it here in the top of the sidebar I use the add logo method which takes as input and URL so I even needed to push this logo to GitHub and get back a static URL I can use you cannot use a local image loaded in Python though with this function and given the source code I think you'll need to wait for the roadmap item named static images that is normally hopefully implemented in January 2023. it's the new where's the code for that function and what's that buy me a coffee button in the bottom right corner I'll tell you later first I mean my coffee I think this is an amazing function let me show you I've put the switch page inside a streamlined button with the name of a page want to jump into and the moment this function is run for example here when I click on the button it will immediately jump to the selected page this can be super useful to control where the user is inside your application for example I could add a configuration page here where it asks me to enter some random file and when I click on enter it will put this in session States and make this button appear now if I switch to this page using the button we can add a condition if the session State doesn't contain the configuration we specified before it will immediately switch back to configuration page and otherwise it will just continue doing its job and if we take a look at the source code for this method we can see it uses some streamlit internal methods that enables us to get the names of all the pages and I think there's even a way in the Forum I saw to actually hide from the internals of streamlit the names of the pages in The sidebar but this is something I need to confirm and I'll get back to you if I find the link I put it in the description for you vertical space finally you can control the vertical spacing between multiple widgets without having to write any St right of white spaces what oh it's actually a loop of St right with empty values well let me tell you the secret location to all those methods it's called stream knit extras and it is maintained by the data science team extremely that is almost a guarantee that this library is going to be maintained in the long run they are regularly adding new Snippets to this Library using the solutions that are produced in the Forum or on the GitHub issues whenever you're missing a functionality in streamlit just ask the Forum or the GitHub issues and maybe until it appears in the roadmap for future integration in streamlined it may appear in the streaming extras so keep an eye on it streaming extras has already got a lot of functions I'm not going to go through all of them but annotate the text the first part here is the integration of a pretty popular component from Thiago one of the founders of streamlit it takes as input a list of words with the associated a color of the the background a border as a CSS and the entity that is to be put on the side and this is very useful for those of you who are doing NLP and NTT recognition to explain the semantics of a sentence and if you're looking for a way to display word importances in a sentence you know before doing those lime explainability sentences what you can use the format word importances which for each word Associates a value between -1 and 1 and it will color the word accordingly to the value a great way to spice up your app with custom links here on the left column you can see those those badges that you usually see in the markdown read me on GitHub for example this Pi Pi package to extremely drawable canvas my repo to streaming e-charts or even this application to open instruments uh oh here's my uh follow me on Twitter if you want to find my latest news and video ideas that's where you need to go you can see those notion like links with customizable icons on the left hand and some text on the right and you can even I'm going to jump to the last column you can put those notion like links into markdown using the markdown let's method here for example you got the Stream It app or they use this instead with some emoji icon here in the markdown lit Library you can also use your own set of colors in markdown written it last but not least if you're adding keyboard shortcuts by using this tutorial for example what you can specify the shortcut in the app with a specific styling I think this one is this one is pretty awesome putting a colored header that is also from the streaming extra as a library but let's get back to our text input usually instrument when you use a text input anytime you type text there's no reaction or there's no update until you press enter Then There You Go enter here fanil hello fanil hi if you if you use the key app widget instead like in the bottom here whatever I type text it immediately reruns the Stream It app so it's got this kind of react feeling or gradual update feeling it's it's quite nice maybe don't abuse it I haven't used it in real condition so you need to ensure that your app is not too heavy and that you properly cached all of the heavy weight functions before using this the first role here do you recognize it it's actually a row of streamlined metrics and there's a specific method in streaming extras that enables you to restyle those metrics to add your specific background color or the color of the Border The Styling of the Border or the size of the Shadow here beware it's a global styling of all the metric cards it would be awesome if you could add as argument a specific extremely Contour like a row or a column but I think here in the source code it's using yeah it's using a metric container so we would need to add a CSS class or an ID inside the Contour Nerf to be able to Target it in CSS that's not possible yet well wait and see if that happens you can also add a card like widget that links back to a specific link and with the picture you want and the text you want and Etc that's yeah fake are you so lazy you don't want to load your own data to build your streamlit application well there's a perfect solution for this thanks to the faker you're able to build a fake SD that you can use as the normal St but whenever you use it it will generate a random instance of a widget for example this faking for fake markdown or fake select box I didn't load anything in there this is generated automatically using the faker Library you even got this seed functionality that when you change the scene it will generate new widgets I think this this is really nice if you're too lazy to to specify the Altair specification or any mad blood clip chart function Explorer this one is still very Alpha it doesn't work with a lot of functions for pandas on Empire for example but but the date Works using it means immediately for any python library before talking about it let me show you the extremely pedantic Library what it does is it generates a stream it form with the widgets that match the typing of the properties in a pythonic model so it for example here we've got some text as a string and some number as an integer it will generate the text box and then number input and some Boolean here and when you submit I think it generates an instance of this model with the values from the widget on the Forum there's somebody that did he did the whole conversion from function signature to pedantic model to submit UI so that means for any function you get the UI immediately now going back to our function Explorer here I wanted to use the function Explorer on the Json load and what you can see you've got the inputs and you've got all the arguments of Json loads here inside text input this is amazing I could put here a name Daniel and then if I press enter it will run the Json loads on this method and we would see the output on in the bottom though so the thing is it doesn't work that way it actually only runs extremely colds in that function uh so I'm sad I think I need to use that I I would try to use that generalized function to stream it from instead buy me a coffee click on this button and go buy me a coffee it will definitely help on my sleepless nights bye

Channel: Fanilo Andrianasolo

Views: 16,593

Keywords: data analysis, how to streamlit, how to use streamlit, learn streamlit, python, python streamlit, python web app, streamlit, streamlit multipage, streamlit release, streamlit tips, streamlit tutorial, cloud, reactjs, streamlit component, streamlit components, streamlit react component

Id: Yd_W0sU1Fx4

Length: 9min 34sec (574 seconds)

Published: Wed Nov 30 2022