Code Editor Input & Output to your Streamlit App with {streamlit-ace}

Key Takeaways

hey friends when you are building a streamlight application if you have to collect code as an input wouldn't be nice if you actually can show a code editor to your user where they can type the code instead of a normal text input so usually you might have a blank box they might be typing something they don't have syntax highlighting you cannot validate what they're typing it but what if you can actually show coded just like what you're seeing on the screen to your user and then the user could actually type the code and then you collect it and then do something with it yes that's exactly possible with streamlit ace which is a component for streamlight and in this video i'm going to show you how to install streamlates how to use streamlytes to collect code as an input and how to show an output with that so let's go ahead and get started so like i usually say if you like this open source project please go ahead and start this repository this could mean a lot to the developer so how do we install it it's quite simple pip installs framelit ace and then we have got a class there so let's start with a new file uh let me save it as app.py and i would say import streamlet and import okay i should install if i do not have already so but i have it already so i would yeah all the requirement is satisfied you need to just do streamlit from streamlit streamlet ace import sts you could see that vs code is already suggesting you collect the code as an input st dot code sorry st underscore ace and we've got the thing that we need to see is you've got a lot of lot of arguments that you can pass we'll see one by one what is it but right now just plain start with that so and we can say sd.write code whatever we get as input let's write and before we write we can say um okay maybe in this case let's say i want to do just two columns i can say st dot um beta columns first comma second okay and i can say with first code and with second you can say um st dot right code let's hope it works fingers crossed streamlet app dot py okay sorry stream later on app.py let's see if it runs copy the url go to the browser paste it okay it says st is not defined that's a shame because i didn't define it okay let's go back run it re-run it okay beta columns one position is missing because i didn't define how many columns i want once again okay so you've got the code editor let's type something import pois so you could see as i type it's appearing import tensorflow as tf import um pytorch import let's say numpy so you could see everything just coming one by one but you like if you notice it is not exactly the way you want right to import find us you could see like and again you cannot see the syntax highlighting for python maybe you have you want a python code or sometimes you know you want to do something in html but what to do in that case so that's where the arguments that we just looked at would come into picture and what are those arguments before we see what are those arguments let's quickly go ahead and see the source code of this demo application which will actually tell us a lot of information so first of all these are the languages that are supported you can actually see a lot of languages for example do you want python you see python over there do you want r you see r over there do you want uh javascript you see javascript over there do you want html uh whereas html html oh yeah yeah you have got html over there so these are the languages or syntaxes that are supported by this code editor so you can actually have any language that you want so let's quickly go ahead and then say language is equal to python okay and save it go back to our application re-run our application and then right now let's write python tensorflow as tf and i can say import re so and you can actually see the syntaxes that get you know like uh the suggestion that you could import pandas as pd and you can you can see like how the syntax highlighting has changed um just just ignore the output for a moment like i'll i'll show you how to fix that output um but input is sorted so let's quickly try another language before we shift to something else like other another language that i like a lot just r so let me rerun it and then say library tidy words and if i want to write follow for i n i dot 10 print one i so you can see uh the text editor works just fine um but what if you want to change it aesthetically again go back to the example and you can see these are the themes that you have got like you can change your themes you can change your key bindings you can change a lot of things like font size tab size uh if you want to give a sidebar the user can you know select all these things you can do it but right now what i'm going to do is i'm going to just show you a couple of theme changes then we are going to jump into the final section which is to show how to show the code output so in this case uh let's say i've got the python and i want to select the theme which is cobalt so go back run the application i think probably i should um i should do this this is this is slightly better right okay um is it visible even let me reduce the size yeah i don't need the files yeah i think this is decent okay um let's re-run it sorry let's re-run it python and you can see the code editor has changed import pandas as pd so you can see the theme has changed uh i can i can still change it i can say solarized dark i think that's the thing let me quickly check solarize dog underscore i haven't missed um yep go back read okay i just selected always read and you can see import pandas as pd so you can see how how it has changed like maybe one final theme um if you are familiar with uh let's say xcode and then you go here and say xcode save it come back you can see it has changed import pandas as pd so you can see that you know the theme changes it's quite quite good and you can also see how it's helpful so let's put a title first of all there is no title code okay what am i doing st dot title code editor on streamlet save it it should rerun so it's rerunning you can see that there is a title now and you can see uh so what do we want to do next uh like our output doesn't look good right so the output looks um slightly crap so what do we do there are two ways we can show a decent code output one is using markdown the second one is actually using the code editor only in read-only mode so let's go ahead and then first see what can i do with markdown i can say uh markdown sorry mark down and then say code inside it save it then let's see what happens go back here and import pandas as pd uh let's write a small i in range of one to ten yeah let me give some time print off i i you can see uh it has still not changed the reason is because when we are doing markdown we need to have the code syntax and what is that it means okay use double quotation trip three curly code plus plus three query code and save it ideally um it should have the syntax that we wanted in fact you can actually add the language that you want like right now you can see that there is no syntax highlighting you like if you're familiar with markdown you know like you can just add python there then you can ideally it should it should change so let's check yeah you can see that there is a this is syntax highlighting now you can see everything has been highlighted so this is this is a good way um but what if i don't want to do markdown i want to do the same code editor and that's possible too um what i can do is i can do st dot write uh i'm sorry st dot or i can i'm sorry like what am i doing i should do st dot ace code which is my default uh and i should say what am i even doing i think and probably i'm sleepy st underscore is and if you see the parameters so the first one is your value by default what you have got and you also see another argument where you could make it only read only so you can actually make this read only and usually by default read only is hit fault so what i can do is i can say value is equal to code like whatever we are getting as an input i want to display the same and then say read only is equal to true save it and then let's see the output it is re-running tada you've got it so whatever you have at an input it has got the same output so now you can you can just to show the difference you can say like uh um the language that i want language i want us python because you know that you are getting python input from the user what am i doing and um you want to show a different theme uh theme is equal to let's say uh is there any good theme pastel on dark okay i missed a comma save it okay that's an invalid syntax yeah i know i just missed a comma let's run it okay probably it's not showing anything because my theme name okay it shows i mean like i was not patient enough so you can see that uh we have got all these themes and you can select any theme now you know that there is an input and there is an output like if you want a different title you can even further you know like because we have got two columns um so i can just say like uh sd data markdown and i can say title is input and i can copy paste it and say this is output the idea should work let's see so now you have got a code editor on both the side but one side is your input the other side is your output it has got very similar features like you can you can you can just copy it uh you you just cannot edit it you've got line number you've got a very coded um output but at the same time you know you cannot somebody cannot edit it but on the other hand on your left hand side you've got actual input like you can you can change it you can do anything you want print um subscribe to um let me let me do an advertisement to my channel one little button subscribe to one little quarter so you can do anything you want uh and then you know like on the output you can process it you you if you want to show just directly like that you can you can still do it so basically the objective of this video is to introduce you to streamlit ace and what you can do with streamlining and how to show the code as an output uh different features of stimulates so the output that we saw on using markdown one using code on you know a little bit of hack to use code editor as um as it is but with read-only option so i hope this video was helpful to you especially if you're building something for a code input rather than getting it on text text area text input this should be really really much better for your user experience and and it looks really awesome um and thanks to the developer if you like this package please go and then start their repository give them a shout out it would mean a lot to them and if you like this video please let me know in the comment section i'll be really happy and share this video with your friends and subscribe if you have not thank you so much see you take care