Streamlit Tutorial - Build AI Web Apps with ONLY Python!

Welcome to this Streamlit tutorial. This tutorial is for everyone who wants to get started with building applications with Streamlit and especially if you want to build applications which are connected to large language models. Now, Streamlit is a popular Python library which lets you build applications with only Python. So, you don't need any knowledge about front-end development such as JavaScript or HTML. Now, Streamlit is not a new library. Since its introduction in 2019, it received more than 40,000 stars on GitHub. Now, in this video, you will learn the basics of working with Streamlit. And we're going to do that by building together three applications. We're going to start by building a translator application, which is very similar to Google Translate. Then, we will move on with the next application, which let you ask questions about a PDF file. Now, make sure to watch this video till the end because at the end of this video, we're going to build a real chatbot with Streamlit and Python. As we will be using Lang Chain, we can connect all the applications that we are building in this video to any large language model. So you can connect them to open J GPT to entropic models or if you're running Olama locally to any local model running on your machine. Now in a second I'm going to show you exactly how you can connect streamlit applications with lang chain to any large language model. But first let's get started with streamlit. Okay. So let's get started by building our first application the translator. So as you can see here there is already some code on my screen. So I am importing the OS library. I'm importing the env library and of course I'm importing a streamlit SST. Then you see here that I'm importing a file that's called languages. So this is referring to the file languages py. And the only thing that this file includes is a list with all the languages or at least the majority of the languages spoken in the world. So that we can select the language that we want to translate to um from this list. So let's navigate back to the application. Then you see that we are importing from lang chain. We are importing chat models and prompts. And um if you have been working with lang chain before you probably have seen something like um chat openai or chat entropic and if you've been working with these I would say vendor specific objects before. I would like to introduce you to init chat model. And this is basically a universal way uh to talk to large language models. So this is where we uh define the chat model that we want to work with. for example, GPT40 mini. And then this is where we are referring to the provider which could be either entropic um open AI or for example. And then this is where I define the temperature. And then you have to know that the third parameter and the second parameter those are optional parameters because even if you do not specify the model provider in most cases lang chain knows for example that if you want to refer to um GPT4 mini that this is a model um created by openai okay then let's open myv file that's this file and the only thing you have to do here um if you're working withama like me in this case and you have to just specify the model that you want to work with here you have to specify AMA. Now, if you want to work with OpenAI, the only thing that you have to do here is provide uh the chat model, the provider, which is OpenAI, and then of course you have to provide here your OpenAI um key, which starts with SK. And if you want to work with Entropic, then of course you have to um command out these lines. uh you have to provide here the model that you want to work with the model provider which is entropic and of course you as well have to specify your API key right here. So, I'm going to work with Olama because I know a lot of you like to work with Olama. Okay? And I just specified those three models because I know these model providers and Tropic OpenAI and Ola are among the most popular ones. But of course, you can connect these applications to any large language model you want. And if you want to connect with another model than those three model providers, then you can find the exact way on how to do that on the Langchain website. Now before I proceed, you can find all the codes that I'm referring to in this tutorial on my GitHub including a requirements.txt file. So just navigate to the link in the description of this video. Then you see here streamlit tutorial and this is the GitHub repository and you find as well here an entire explanation on how exactly you have to um install this script. Now let's navigate back to VS code and let's get started. Now before I'm going to start by explaining how to integrate with streamllet, I first want to make sure that the large language model that we are using is working as expected. So let's define output is llm invoke and let's indeed say hello world and then let's put output.content on the screen. Let's make sure that we save our script. So just press ctrl s and let's open a terminal uh activate a virtual environment. So, VMV scripts /activate like this. And then we're going to type streamlit run one and then press tap. And this is of course if you um are naming your file different then of course you're going to just put the name of the file here. This is the name of my file um and then press enter. And if you are working with Streamlit then you cannot just um type Python file name. py anymore. And that's because you have to then execute the Python file from the Streamlit application. So let's just press enter. And this will then automatically open Streamlit. And then you see here that the output of the large language model is hello, it's nice to meet you blah blah blah. So it seems that the large language model is working as expected. Now there is one thing that I would like to show you and I think it's quite important. If you click here on the three dots and navigate to settings, then of course you can here um change the colors of Streamllet. So um you can change all the colors if you prefer here but the thing that is really important is that you click here on run on save and this will make sure that as soon as you save your Python file this will automatically um refresh the streamllet application. So just toggle this checkbox and then close it. Let's navigate back to VS Code and let's remove this part because we're going to build an actual translator application. Indeed I would like to start with uh std.title. This is going to uh provide a title and then let's give the title translator application just like this. Now the way that our translator application is going to work is you can always translate from English. You can then choose your language and of course you can as well provide the text that you would like to translate. So let's first of all start with the source text. So this is the text that you would like to translate from English. So source text is the text area. So this is the text that's going to be above this text box. Then this is the placeholder. So what is basically in the text box. And then this is the height here. And then let's add as well the language that we want to um translate to. So that's then the target language. Target language is the checkbox. Um so as you see here we are referring to languages which is the list with all the languages that we have saved in languages. py. I'm just going to remove this one. So now we have a source text and we have a target language. So we have everything that we need and the only thing that we still need is a button to click on to make the actual translation. So let's define button is equal to st button st sorry st dot button translate and you see here disabled is equal to not source text text or not target language and and this line makes sure that as soon as the target language or the source text has not been provided you cannot click on the button and then um this is why I really like stream it's really simple now you can just say if button and this is then the code that is being executed as soon as the button is pressed and you will see that GitHub copilot is already providing the entire text. So I'm just going to go ahead with it and then check whether it's correct. So you see here prompt um prompt template from template translate the following text to target language and this is not correct because target language should be like this target language exactly and then you see here the text um that we are translating and the only thing that I want to add to this prompt and that's because if you only provide this prompt um The large language model is going to say something like um this text in English is this in Dutch and I don't want all this fuss around it. I just want the translation. So I'm going to say something like only provide the translated text without any additional information exactly like this. Okay. So this is the prompt. Then you see here executed prompt uh is equal to prompt invoke. So we are providing a target language. This is referring to how we can basically take this variable here in the prompt. So target language and the name of the actual variable is also target language. Um that's referring to this one right here. And then you see here text. So indeed this one is called text in the prompt here which is then referring to source text which is then coming from this variable. And then you see here output is lm.invoke executed prompt. and then rewrite the output to the screen. So, um let's just save our script. We shouldn't um have to restart Streamlit because we are still running Streamlit. What I really like to do with Streamlit is of course um this is the URL. This is like your local URL. So, you can just put this URL in your browser if it doesn't pop up automatically. Uh but you can as well like email this text to your mobile phone or something. And if you're then on the same Wi-Fi network, then you can as well open the Streamlit application on your mobile phone to see if it's working there correctly as well. So let's navigate back to the browser. And you see now that we have the full application here on the screen. So let's just um try it out. How are you? And I would really like to make you aware of the following. Uh I am using the following model. I'm using lama 3.2 3 billion parameters model. And before I recorded this video, I also think I was using the 1 billion parameter uh model. And this model of course is way lower in terms of performance. And what the model actually did, it didn't translate the text, how are you, for example, to um let's just translate to Dutch in this case, but it started responding to the question like, hey, I'm doing well. So if you are using um ulam and if you're using a really small model then one of the things that you are going to see is that it's not translating but it is it's not responding to the text. So let's just try out if that's the case here. H you see in this case translate the text. So I hope you were able to build this together with me. Congratulations on building your first application with Streamlit and let's continue with the next one. So the second application that we're going to build today with streamlit is an application where you can upload a PDF file and then you can ask questions about this PDF file. As you can see the first lines of this piece of code are entirely the same. There is only one difference and that's that we are importing pi PDF and from PI PDF we are importing PDF reader and of course this is necessary because we are reading from a PDF file. So let's as well start with building this application by setting a title. Um I like the suggestion from GitHub copilot file question answering application and then of course the first thing that we want to have is the uploaded file. So let's create a variable uploaded file which is SD file upload upload a PDF file and as you can see here and this is really important that the type should be PDF because this will ensure that people can only upload PDF files. Then after we have um created this variable uploaded file, we also want the user to ask a question. And then the second parameter that we need here is of course the question that the user wants to ask. So let's define question right here. Question is equal to SD dot uh text area. I want to go for text area. So I can ask a bit longer questions. Ask a question about the file. And what I would like to add here is disabled not uploaded file. So um in case you haven't uploaded a file yet, then you can also not ask a question. Now in this example, I'm not going to add a button because what I would like to show you is that if you just type a question here and then you press enter, then you're also able to submit the question and the document. So let's again use co-pilot and see what it's going to make. If uploaded file is not none. So we can as well just make this if uploaded file like this. And of course we also have to add question and question because we both need the uploaded file and the question. Let's just add some space here. And then PDF reader is PDF reader uploaded file. And let's make sure that we add here the column. And what we're basically doing here is you see a PDF reader. So of course here we are reading the PDF file. And then what PDF reader is doing it's going to give us all the pages from this PDF file and not an entire string. So um because of this we have to loop through this file and then we have to add every page to this uh variable text. So at the end this entire PDF file will be stored in the variable text. And this is exactly why I sometimes don't want to use gith copilot because here it's for example putting the entire text on this page. I'm not interested in this text. I'm just interested in the answer. So I'm just going to remove this. And the prompt template was also well way different at least from what I normally work with. So what I'm going to do here is let's just steal the prompt from our previous script. So this was the prompt that we have worked with before. Let's just put it right here. And let's remove the content. Let's use get copilot again. Answer the following question based on the provided text. So this is correct. Uh we of course should provide the question first. So question let's do it like this. question like this and then text document. So now you see that the input variables for this prompt are question and text. So let's now invoke this prompt. So let's say executed prompt uh prompt.invoke question is question and text is text and let's just check whether this is correct. So we have question and we have text here. So that's correct. Output is lm.invoke executed. This is not correct. I'm not sure why it's providing this name. So let's just call it prompt prompt like this. And then this should be executed prompt exactly. And then of course we put on the screen the um answer with output.content. And I don't really need answer here. So let's just remove it and see what we get. So let's open a terminal. The PDF file that I'm going to work with in this demo is the one that you can find here in the GitHub repository. So, you're able to download it from my GitHub. So, let's browse files, navigate to my desktop, and let's select the paper. And the question that I want to ask is what is attention? And now you can see that I cannot really press enter to submit because I'm typing in this text area. Streamlit is providing a solution. You have to press Ctrl Enter to apply. But I think this doesn't really um make sense. This is not really user friendly. So I'm just going to click on run on save. Let's navigate back to the code. And then let's say uh submit is equal to stubmit disable not uploaded file or not question. So if the question uh or the file are not present, we cannot submit. And then let's just change this one to if submit. I think this solution is a bit more user friendly. So make sure that you save it and then this should automatically refresh the application. Uh as you can see um the the application is now refreshed. So browse files, select the paper. Let's keep the question what is attention and submit. And then you can find the entire text. So you really see that this answer is coming from the document is it's not coming from the internal knowledge of the large language model. So this really makes sense. Now there is one thing that I'm going to warn you for. If the PDF file is too long, it's going to be longer than the context window um of the large language model and then um the large language model is not going to be able to do its work properly anymore. And what I did in order to make sure that at least the question is received is I'm first asking the question and then I'm providing the text. So in case we are going over the context window, at least we have then asked the question and this will then um result in that a part of the PDF file is not being processed by the large language model. Um this is not the best outcome but it's still a better outcome um than the large language model missing the question. So congratulations with building this application and let's now continue with building the last application of this video which is a real chatbot with Python lang chain and streamllet. So the code in front of me looks very similar um to the first lines of code that you have seen in the previous application. So we are importing all the necessary libraries. We are importing in a chat model. And now you see here that we are not importing the prompt message but instead we are importing system message, human message and AI message. So we will be providing this chatbot with a memory and then we will use human message to indicate that the human is asking a question and we will use AI message to indicate that the the large language model is answering to the question of the human. So let's see what that looks like. As you can see, I'm starting here with providing a title to the page. So, the chatbot that we are going to build is going to act like an astronaut. And I've also added an icon here, which is just a UTF8 icon. So, let's get started by first adding the text field where the human can um basically ask a question. So, prompt is equal to st chat input like this. And I can provide a placeholder which is something like ask a question to the chatbot like this. And I'm going to make this a bit more uh motivational. Ask me anything about yeah the universe. This looks way better. Let's remove the comma. Okay. So in case the user is asking a question then I'm going to say if prompt. Okay. So in case the uh user asks a question the first thing I want to do is put this message on the screen. So with ST chat message user. Okay. And this with ST message user. This is basically going to give the uh question from the user a different color than the response from the AI. So I'm going to show that exactly in a second. So everything that you put under with SD chat message user is going to be part of this message of the user. And then um as soon as the user is going to ask a question um I also want the assistant uh to answer. And in this case, the assistant is just going to say ST dot markdown. Yeah, in this case the um large language model is just going to say something like thinking because I just want to illustrate how this chatbot is going to work. So let's save our script. Let's um open the application. So you see that the application has already refreshed automatically. And then I'm going to say hello. And I see that the chatbot is going to respond with thinking. And now let me show you something else. Hi. And in this case, you see that this message is going to overwrite the previous message instead of adding to the chain of messages and and basically expanding the conversation. So let me show you how you can um get rid of this and build an actual conversation. Okay. before continuing with um adding an actual response from the large language model. Um the reason that we um at this moment every message is overwriting the previous message is that we do not have memory yet. So let's build memory first. So if messages not in session state, so this is how we are going to basically initiate memory. So we're going to say std. session state do messages and um we can use this to actually keep track of the entire conversation in streamllet. So we're going to set a system message which is you are an astronaut. Answer the user questions about the universe. I'm just going to change this to act like an astronaut like this. And now we have created memory. And what we also have to do now, so at this moment we are adding these messages to the screen, but we also now have to add them to our memory. So let's say ST session state messages do append human message. So first of all, we are putting the message of the human on the screen. But we also have to add it to the memory here. And uh we want to do the same with the large language model. And I'm going to add the actual large language model right here. So lm.invoke uh but this time we are not going to um invoke the llm uh with only the message from the human but we are going to invoke the lm with the entire chain of every of every message. So you see here lm.invoke invoke st session state do messages and this is actually referring to the uh memory of the chatbot that we have um initiated right here and then we just need to put the actual output of the large language model on the screen so here I'm just going to mark down output content exactly like this and then of course we also have to add the um meshes from the chatbot to our memory and You see here that we are adding human message and in this case we are adding AI message and this is to show the large language model that this is the question from the user and this is the answer from the AI. Now let's just navigate to our application. Um let's just refresh it just to be entirely sure. Run and save. Okay. Hello. I still see thinking as a response. So that is not correct. And this is because I and this is because I forgot to save it. So let's make sure that we save the script. Let's navigate back here. The application is reloaded. Hello. And then you see here that we get the response from the large language models. So you see I'm asking hello and then the um LLM is answering with um whatever it's saying. Hi. Okay. And now you see that we are getting an actual response from the large language model but we are still overwriting the um question that we asked before instead of appending it to a longer chain of messages. So in order to avoid that we have to make sure that we actually put on the screen. So the way that this application works that streamlet works every time every time I ask a question this application is entirely reloaded. So as soon as we have reloaded this application, we have to put all the previous messages from the memory on our screen and let me just show you how to do that. So this is where we are um initiating the memory and then we also have to put all the messages on the screen. Hey, I just want to share a new Chrome extension that I recently discovered and which has been proven to be really beneficial. As you can see, I'm on the website of NumPy, quite a popular Python library. And like many other Python websites, this website is full of code snippets. And if I just um click with my mouse, right click on one of these code snippets, click run in Python, this will automatically run those code snippets in Clip Run, and I do not have to export them to VS Code, etc., etc. So, if I want to run this code snippet, just right click, run Python. It will automatically run the script and show the result. Now, if you want to get your hands on this very helpful extension as well, just navigate to cliprun.com and click here on extension. It's entirely free, no strings attached. And we can do that with four message. Um, okay. So, this is actually putting all the messages on the screen. So, let's imagine that you are adding one new message. Um, there are already two or three other messages in the memory. Then this is actually putting these messages on the screen. So, you see here that the um that here with if is instance message human message um the script is checking whether the message is a human message. If that is the case, it is showing it as a user message. If that is not the case, if it's an AI message, it's showing it as an AI message. So, let's save the script again. Let's navigate back. Let's um refresh our application entirely just to be sure. Run and save. And now our chatbot should be working and it should as well have memory. So, let's test if the memory is actually working. My name is Thomas. And then the chatbot is responding with nice to meet you Thomas and blah blah blah. And I just want to check if the memory is actually working or whether it's just replying to every um new message that I'm sending it. I'm not being aware of the entire conversation. So I'm going to ask what's what's my name? And now you see that the chatbot is responding with your name is Thomas. you told me that earlier. I'm happy to remind you of it. Um, so you see that the chatbot knows the entire conversation and if you ask questions about um, uh, previous messages, it is aware of those previous messages. And in our previous example, we built an application that could answer questions based on a PDF file. Now, this works really well if you just have one PDF file and if it's really small. But if you have more documents and if the documents get a bit larger, you're going to need retrieval augmented generation. And retrieval augmented generation at this moment is one of the most popular techniques to work with large language models.