Custom GUI App for Open-Assistant API - Tutorial | Step by step Guide

By the end of the video, you will be able to create an app like this. So for example, you can ask a question and the assistant will reply to you. In this video, we're going to be using Streamlit with LangChain and everything is going to be powered by Open Assistant. A similar model powers the Hugging Chat Chatbot from Hugging Face. The goal is to show you how you can integrate these powerful large language models with with your own applications. So let's get started. Okay, so now let's look at the architectural diagram or of our Chatbot. Now, in terms of the chat, so we're going to be developing both the front end as well as the backend at the back end. We are going to be using Open Assistant as our LLM. That's going to be our large language model which will generate the responses at the front end. We're going to be using Streamlit's graphical user interface to accept inputs from the user in the form of text. Then using the Streamlit chat interface, they are going to be sent to the Open Assistant and through the Open Assistant API, we are going to generate a response and send it back using the Streamlit chat manager. And that's going to be displayed as a message to the user. If some of these components do not make sense, that's okay. When we walk through the code, everything is going to be much clearer. Don't know what Streamlit is? It's a Python package that actually let you create powerful graphical user interface for data analysis within Python. It's very similar in functionality to Radio, which powers most of the apps that you see on Hugging Face. So let's dive into the code. So the app that you saw, we will create this under 90 lines of code. I'm going to be running this in Visual Code Studio, but you can even run this on Google Colab. Now, first and foremost you need to make a virtual environment so that you don't mess up your Python on your machine. Then I will provide this Requirements txt. So it simply has four different packages that you need to install in order to run this. We actually probably need LangChain and Hugging Face Hub as well. But. But I will update this requirements file before uploading the video. Type in PIV install R& then requirements TXT. If you run this, it will install all the required packages. I already have installed it, so I'm not going to do this step. Next I would recommend to create a env file and within that you need to have Hugging Face Hub API Token. So this has to be exactly like Shown here. Otherwise it's not going to work. After that you want to go to your Hugging Face account, click on Settings and then click on Existence Tokens and copy your token and simply come here and paste that token and just save the file. Okay, now let's look at the main code. So if you're not familiar with Streamlit, do not worry. I'm going to give you a crash course while we are walking through the code. Okay, so the first section we're simply importing all different packages that we'll need. So the first one is Streamlit and that is imported as st. Right. That's going to be used for creating all the graphical elements of our app. Then there's a streamlit chat that we install and Streamlit Extras. Then we have actually we don't need this. Okay. And then a few things pretty that we need from LangChain. So the prompt template, Hugging face hub and LLM chain and this one, this load env, it's going to be used for loading our environment variables. So the hugging face token that we just stored, that's going to be loaded using this function. Next we will be setting some configurations using Streamlit. So if you look at my, there is a title bar and and it says Open Assistant Power Chat app. Now that is set using ST set page configuration and that's the page title that we give. Another element that you see is this sidebar and it has a whole bunch of text and links. Now that is set using this Streamlit sidebar. Right. So then we give it a title. Right? Right. And you can actually include emojis. That's pretty nice. And within Markdown. So the links that you saw, they are here. So you have like Streamlit, the corresponding link. Right. LangChain, the corresponding link. And then Open Assistant and I added vertical spaces of three and then there is a small text made with love by Prompt Engineer to explain the rest of the code. So I'm going to just click on that. Right. And now we. We are left with the actual interface only. Right. So then after that we are adding the header and the header is your personal assistant. So the header is basically the header of the page. Okay. Before walking through the rest of the code, let me show you how you can actually run this. If you want to learn more, I would recommend you to watch my previous video. So here is going to be a link somewhere in that. I covered everything in a lot more detail. But in order to run a Streamlit app, you need to write streamlit, then run and then the name of the file. So in this case, this is going to be huggingchat py. Okay, so click Enter and then you will see this localhost web server. So simply copy this link, go to your browser, hit enter, you will have your app here. Now, in order to explain the rest of the code, we will be referring back to this interface quite a bit. So as a good software engineering practice, in your script, you want to put this render name equal to main. So that's going to be the entry point in your code. All right? So whenever we run this file, this code is going to be executed. And here is what's going to happen. Now, within this app, we are going to be controlling everything using streamlit sessions. So initially when you enter and there's no communication from the user or the chat, the assistant, right? So we're using the session to create these two different responses. So the first one is session, where the user input is going to be represented by user and we generate a response of hi. So you see here just, we just ran the app and there is this hi. And then assistant response is I am an assistant. How may I help you? Right, so it's coming from here. It's actually not generated by the assistant, but it's just a placeholder that we used in the start of the script. Now, the layout is controlled by these two containers, which are divided by this color head, right? So response container is basically all the section above this blue line, and the input container is everything below this blue line, right? And the blue line is being generated using this color header. So we can change the colors if you want. So let's say, just to give you an example, if you say green, so we need to just rerun it here. Now it became green, right? Now you can even change the layout. So for example, if I copied this and let's say boost it here, right? And then took the input above, right? So it's probably going to change the order, right? So now you see that the user input is going to be above the line and the output is going to be here. But I liked it the way it was before, so I'm going to go back to that. Rerun it. So next let's look at how we are processing input from the user. So for that we have this small function called get text, right? And it's using an element from streamlit. So streamlit text input, right? So that's. You see this U. So that's coming from here. And then when you click enter after text, so that's going to go as A text input. Now then we use the input container to display the text using the custom input function that we wrote. Now, in order to get responses from our LLM, we are using this custom function and generate responses. So it receives question or prompt or input from the user and then a corresponding LLM chain and it runs that chain to get a response or generate response and then returns it. We're going to look at this in a little bit, but let's look at how we are defining the chain. Now if you're not familiar with LangChain, I would recommend you to watch my video which gives you a cache course on LangChain. Let's look at how the chain is defined. So the chain is defined within this chain setup function. So let's go and look at it. What is going on in here? So it has three different components. First is the prompt template, right? So this is the template that we pass on to the prompt template and it will generate a prompt that you can put it as a part of LLM chain. For this specific case we are using open assistant, the path here, 12 billion parameter model as our LLM. Now this LLM expect the input or the prompt in a very specific format. So let's have a look at that. Here is how you need to format your input or your prompt. So it's going to start with this special characters prompter. Then you will put your actual question, query or prompt, right? And then it's going to have end of the text and then another special special token after which the LLM will start generating responses. Now that's exactly what what we are doing in here, right? So if you see we have a special token which indicates the start of the prompt, then a question that we will get from the user, then end of the prompt token, right? So that's the prompt part. And then here's a special token for the assistant and the assistant will simply start generating responses. After that we take this template, put it as a prompt template, as part of the prompt template, right? And then we are creating a custom LLM chain and that expects LLM, which is our open assistant, and then the prompt template, and then it simply returns that LLM chain. We will get our LLM chain when we call this function. If you are a visual learner like me, you will love brilliant.org Brilliant is a fantastic website and app that dives deep into the world of stem. For example, they offer courses related to STEM in fields such as mathematics, software development, statistics and even data science. What's great about Brilliant is that they Believe in learning by doing so. No more boring lectures or endless textbooks. They make it interactive. Since we are talking about LLMs in this video, they have a course on artificial neural networks. You can clearly understand the concepts that are being presented using visual aids. Brilliant carefully curates their problems, gradually increasing their difficulty as you progress. And don't worry if you get stuck. There is always helpful hints to nudge you in the right direction. To try everything that Brilliant has to offer, free for full 30 days, visit brilliant.org promptengineering or click the link in the description. The first 200 of you will get 20% off Brilliant's annual premium subscription. Okay, so the last part is the response container, which simply generates all the responses from the model. And put this as a input from the user, output from the assistant. Input from the user, output from the assistant. Okay, so let's have a look at it. What is actually happening? So first, if there is a user input, right? Then it's going to take that user input along with the LLM that we just created, right? And call the generate response function. So then within the generate response function, we are running the chain on the question. So basically it will pass on the question here to the prompt and it will go to the template and replace this part with the user question or user input, right? And generate a response. So you get a response. Then what we do is we go and append this as a part of the user variable that we defined in the start. That's the part of the streamlit session. So it was defined here. Right? And then the generated response is going to be also appended to the session as a generated variable. Now once we get a response, after this checks if there is a response or not. So if there is a response, then it will simply go and actually create messages both for the user input as well as the generated responses. Okay? And those are going to be appended in here. So for example, we can ask it something. Let's say we say what is the capital of France? Right? And let's see what it can come up with. Now the, it says the capital of France is Paris. Is Paris the capital of France? Now just keep in mind that this is not bi directional, so it doesn't have any memory. Okay, so this is from the LLM, so it has nothing to do with app, but it says, no, Paris is not the capital of France. The capital of France is Paris. But let's say if I say what is its population? So it's not going to have any memory of our conversation, right? So it's just one way communication. Let's see. So which city are you talking about now? In the subsequent radio, I will show you how you can add memory so that the model has a context of it will know what was the previous communication and it will continue that communication. So I hope this video is useful. If you have if you guys have any questions or comments, put them in the comment section below and I'll try my best to address those now. As you may know, we now have a Discord server as well, so come join us. If you like what you're seeing here and you can support the work, please consider joining the Patreon if you're new here, so consider subscribing to the channel and liking the video. As always, thanks for watching. See you in the next one.