Create a ChatGPT clone using Streamlit and LangChain

[Music] thank you good morning everyone how is it going today welcome to this week's new video tutorial in which I'm going to show you exactly how to build this application that you see right here it is a chatbot with a graphical user interface and it is all coded completely using only python we're going to be using launching in order to communicate with our language models and it also has a memory and it displays the entire history of the messages okay this is actually a very simple project so stick to the end so that you can have it in your portfolio and it's pretty impressive okay let me just show you real quick how it works here you have that I already sent a message saying hello my name is Alejandro and it responded hello how can I assist you today then if I say do you remember my name you're going to see that there you have it it remembers my name because it has a memory okay this is especially useful if you're planning to create a a chat a specialized chat but for a PDF or for a CSV file and yeah if you're interested in more videos like this about software development and artificial intelligence don't forget to subscribe so without further Ado let's get right into the video all right so first of all we're going to start by creating our environment and our setup okay um all right so first of all I should mention that we're going to be using python 3.8 okay um since we're going to be working with this this component right here which is an open source component by the streamlit community I mean that has its pros and cons and one of its cons is that at least myself I haven't been able to make it work with python 3.9 and above so yeah just keep that in mind in order to do that you can use Pi INF so I'm going to do PI in local I'm going to set my local variable my local environment python to 3.8 there you go so now that we have our python version set to 3.8 we can actually start creating our virtual environment um just as usual remember that if you have any questions about the setup or the virtual environment creation Etc you can just leave me a comment and I will probably make a video about that but I'm assuming that probably you already know how to do this all right so python Dash M vnf to create my virtual environment and I'm just going to call it vnf and now I have my virtual environment right here with my python version of 3.8 and now all the packages that I install are going to be installed inside of here as well now in order to activate my virtual environment at least in Mac I'm going to do Source then I'm going to go to my VM directory and then I'm going to go to the binaries and then I'm going to go to activate in Windows if I am not mistaken you do the same thing but without saying Source just vnf bin activate okay now we can actually start creating our files and I'm going to start creating my git ignore first um oops it's not like that it's git ignore like that I'm also going to create my VM for sorry my DOT ends for my secrets and my main.py of course there you go now I have my files right here for git ignore I basically all I did was Iggy look for a git ignore template on Google and I copied the most um basic one there you go and now this is going to ignore all the files that I won't don't need to be tracked on GitHub so now I can actually start initialize my git Repository okay and I can just get at everything and git commit and say first comment and setup there you go now everything seems to be working correctly and as usual for my dot m I'm going to add my open AI API key variable save and then this one I'm just going to copy it I mean duplicate it and the second one I'm going to call it example dot of example and this is going to be empty and this is going to actually contain my files now I can save it at dot end of example and I can commit and say at an example there you go and now you can just uh start coding there we go all right so now we're going to actually start coding our application and the first thing that we're going to want to do is we're going to start with the graphical user interface okay as I told you before we're going to be using extremely for that and in order to use streamlit you're going to have to install streamlit first and to install it it's very easy all you have to do is PIP install streamlit like this there you go um it should probably take a little time because I don't have it installed yet just like keep that running in the background while you follow here and then we can actually start coding the first thing that I'm going to do is I'm going to test that name equals main like this stuff like that [Music] and then if that is true then I'm just going to execute the function Main and the function main is going to be up here this basically just tests that my file is being executed directly and not being imported as a dependency it's just a safety measure and now here I can just say print hello world then if I save this and I execute it you should just get Hello World there you go seems to be working correctly and now that streamlit has finished installing we can actually import it as streamlit as um wait yeah like well what happened there you I I don't know what that happened there you go so now I I can start importing extremely and instead of doing this I can just use St set page configuration in order to set some attributes for my page this is going to initialize my streamlined application with the title I'm going to say that page title is going to be your own chat GPT like this I'm just going to add a little Emoji right here for Robert [Music] um now you know what the Rob the Emoji I'm going to set it as a page icon because at extremely you can also set a page icon and right here I'm going to set the emoji of a robot like that there you go and then afterward I can just say St header in order to create an H1 element in the page and I can just say your own chat GPT like that and then just add my robot there you go now in order to run it actually what you're going to want to do is to run streamlit run and the name of your file okay this is not going to run if you just do python python main.py because it's not going to be able to I mean it's this is a streamlined application it's not just a script okay in order to run a streamlined application you have to do streamlit run and then the name of your in of your file and that is going to open my application like that okay now assign them as you saw before we had a sidebar right here with our message and then we had our messages right here in order to do that we can just start doing that right here like this in order to insert a sidebar in in streamlit you use St dot sidebar and actually in order to import to add things inside of it you can just do with SD sidebar like this and then whatever you do you add inside of this indented space it's going to be inside of your sidebar okay so I'm going to say that I'm going to add my user input right here and the user input is going to be another streamlit a component called text input [Music] text input like this and then I'm going to say your message like this this is the label of the input and then I'm just going to give it a key and the key is going to be user input like that there you go now if I refresh this part right here you can see that we have our sidebar with your message right here and now all that we have to do is add our messages right here now that is going to be a little bit more tricky but let me show you real quick how to initialize this component right here all right so now it's actually time to start creating the messages from that you saw in the introduction and in order to do that we're going to be using as I mentioned this component right here so the first thing that we're going to want to do is install is copy the installation command so I'm going to do pip install streamly chat that's what I'm going to paste right here pip install Streamlight chat I already have it installed so it's going to be so it was super fast but to you it might take a little bit longer now once you have it installed what you're going to want to do is you're going to do from streamlit chat like this we're going to import a message like that and once you have that actually that's all you need in order to actually display the messages now all that you have to do is to message then you just display the message of your content it can be I mean the content of your message it can be hello how are you and then we can add another message saying this one takes a a parameter called is user and if you set this one to false this is going to be the robot or no I think this is going to let's set this one to true there you go I'm good there you go now if we run it remember doing streamlit run this should create our messages there you go hello how are you I'm good there you go so just to recap we have the messages that we imported from streamlit chat uh for some reason I there's an importing error but it seems to be working so um yeah and then you have your messages and if you don't add anything or if um if you don't add anything this is user param is going to default to to true to false so if you don't have anything this is going to be the bot message and if you add is user true this is going to be your user message there you go so now we can actually start focusing on building the chat but functionality using Lang chain and using launch in memory as well so let's get right into it all right so now it's time to test that our application has the API key set and just to set that up uh real quick in order to do that we're going to use I don't remember if we already installed it but if you haven't you are going to use you're going to have to pip install python.env like that okay and this is basically the package that is going to allow you to fetch information from this dot dnv file which is not going to be tracked on GitHub but it's going to be in your machine or in your server and that way you can keep your API Keys hidden okay so once that is installed you're going to come right here and you're going to say that from Dot EnV we're going to import load.tnv like that and this you I mean this function basically just allows your application to use information inside of this file and all you have to do is just run it at the beginning of your application and now your file is available from your environment variables so if you do import OS and then you add this code right here I'm not going to type it because it's a little bit long it's going to paste it like this this code is actually reading from our environment variables if openai key is set or not okay so if openai key is not set or it's empty so if this one is if this one doesn't exist or if it is empty like this um this is going to return an error it's going to say open AIP is not set and it's going to exit then else it's going to just say that the the API key is set and that it's going to continue the application that's the first thing you want to do and the second thing you want to do actually is just to start coding the chart GPT I mean the land chain functionality okay um all right let's do that now all right so this is the part when we're going to actually install land chain and we're going to start dealing with the chat capabilities of it okay in order to do this the first thing that you're going to want to do if you haven't already is PIP install blank chain I myself I am going to be using openai as I mentioned before but you can always use hugging hubs hug and face Hub API and in which case you will have to do hugging face Hub like this okay I myself am going to be doing open AI like that and there you go now if you click enter it's going to probably take you a while if you haven't installed it already myself I already have it installed so it was quite fast and now we can already start e saying here from Lang chain dot chat models we're going to import the open AI chat okay and we're also going to import a couple of a few schemas so what are the schemas the schemas are basically just the template that is going to tell our API which kind of message we're going to be sending okay so from langching dot schema we're going to import three different schemes but the first one is system message which is the message that it's going to tell our assistant what it is supposed to be this is the first message that you send in any conversation and it basically just tells the message the language model um what role it is supposed to take for example it can be just a helpful assistant or it can be a translator or something like that so I'm going to say that the second one is a human message which is the message that we humans are going to send to the language model and the third one is AI message like that there you go which is going to be the response from the language model now um we have our setup right here actually you know what I'm going to take this away I'm going to put it in another function right here called init [Music] and then I'm just going to there you go so now we have our init function which has all of our load variables then test it and then initialize the the stream lead configuration and then afterwards we just have our actual graphical graphical user interface so now we can actually start creating our chat in order to do that we're going to say chat equals our chat it's going to be equal to an instance of the of the chat open AI that we imported before and here we don't really have to send to specify an API key inside of it because Lang chain automatically goes to look for it inside of our tnv file so no need to to add anything right here you're just going to have to add the temperature probably if you want to if you want to set it to something different like 0.5 or something like that I'm just going to leave it at zero but the temperature is basically how random you want the response to be or how deterministic okay if you set it to zero it's going to return the same thing every time you send the same prompt if you set it to 1 which is the maximum value it's going to return very different completions for every prompt that you send it so there you go and now we have another thing is that the chat actually takes um it doesn't take just a query I mean like a message it takes a history of messages right um if you if you have seen the if you haven't watched the other video that I made about memory I Rec I mean about memory in line chain I recommend that you watch it if you want to understand what is actually going on here but basically we are working with a type of memory called buffer memory in which we take all of the messages of the conversation and we're going to send them back to the API and that way since we are sending it all of the messages I mean all of the history of the conversation the language model is going to get have all the context it needs to continue the conversation as though it had a memory okay but we're actually resending all of the messages in every request right so that's also one of the reasons why this approach is not going to be able to take conversations that are like a thousand message long right so there you go so in order to actually do this we're going to have to start a new variable called messages [Music] messages and these messages are going to be an array or in Python we call them lists um an array of messages and the first one of course is going to be the system message and this is every message from this schemas have a Content attribute in which you have the actual content of the message so in the system message remember that it is the actual instructions for the language model of what it is supposed to be and in this case it is supposed to be era helpful assistant like that there you go and the idea is that every time the user is going to submit a new message we're going to append it here as a human message and we're going to get the content of it from the input and once we get that we're going to get I mean we're going to also store the value from the AI response which is AI message but I'm not mistaken yeah AI message but we're not going to do that immediately right now all right there we go so now what we are going to want to do is we're going to want to handle whenever the user submits a we're going to want to handle whenever the user submits something from the text input that we have right here okay um so let me show you how our application looks right now so this is our application so far and the idea is that we want to fill in here like hello how are you and then when we click on enter it is going to process that and then it's going to show the messages right here okay how do we do that where first of all here we're inside the cell of the sidebar so we're going to have to do that outside of the sidebar but we're going to say that if the user input if the user input is um is is I mean if the variable user input exists which means that the user input has been filled or someone clicked enter on it we're going to append that message into our messages history okay but first of all actually we're going to show it in the conversation how do we show it so we're going to say message and then we're going to say um user input just like that and then this one is we have to set is user to true just as we did before remember when I showed you how to use streamly chat that's exactly what we're doing right here we're just using the message from stream live chat and we're saying that the user input is going to be the content of the message and then that it is the user so let me show you what it looks like right now if I refresh this and I say hello and I say enter I'm going to have my message right here so far nothing else is happening so if I do how are you we have we still have my message right here but nothing else is happening so what we want to do is we want to take that message and append it to our message history and let's do that right now to do that we do messages dot append and we are going to append the user message but we don't we don't append it just like the content of the message we have to use a schema remember our message history our message history takes in the schemas so it takes the system message and then it's going to take a human message so since since this is the query from the human we're going to say that we're appending a human message and as a Content we are going to be appending the user input now that we have appended the message we can generate the response okay remember that our chat element right here it takes a history of messages in order to complete the next message now we have a messages object um sorry A message it's a list or array that contains all of our that contains our system message it contains our human message and now we're going to send that one to the chat like this and this is going to return the AI message so response equals to this chat and now we're going to show it as a message just like we did right up here for the human message but we're going to do it for the for the AI message I'm just going to come in the response and remember that it deals with the schemas so the actual content of the message is going to be inside the content um [Music] um attribute the content property sorry and there you go so now this should work I'm just going to set this as user to false so there you go so just to recap when the user clicks and sends an input submits an input we're going to show that in the show that in the graphical user interface using our streamlit chat then we're going to append that message to our message history then we're going to send the message history to our chat and we're going to show the response in another message okay so if I save this and I go back here and I refresh I'll be like hello my name is Alejandro you can see my message over there and then you will see the response there you go and now if I say do you remember my name what do we have here do you remember my name it is going to say I'm sorry but I don't have the ability to remember that is because we still haven't set the messages as saying persistent State variable okay so this is re-running every time so we're resetting um the messages variable in in a moment I'm going to show you how to not only make this um not only show all of the messages in the conversation but also make it remember the things by actually keeping the messages the message is viable constant even if the application has to reload okay so let's do that all right so in order to make our to keep our messages um I mean to make them persistent even if we're like submitting things and like making the application rerun because every time we click on submit it is going to rerun certain things and some values from some variables are going to get lost in order to get them persistent what we can do is to link a variable to the state of the application okay this is not exactly um like a reactive application like you would have in react but it gives some sort of reactivity to your application um so what we're going to do here is we're going to set the messages variable to the App State we're going in order to link it we're going to do St set State session State there you go there you go so now from session State we're creating the messages and we're creating them um we're binding our messages variable to the session State okay and this is only going to initialize if the messages variable is not already in the session state so we're going to say that if messages not in St session state [Music] that is if there you go if not in session State then we are going to initialize it with our system message okay but if it's already there we don't want to re-initialize it with a system message um so now we're initializing it with this right here and now instead of using messages just like that we're going to say that we're going to be fetching them from the searching State okay so now every time we click on enter it's not going to reassign justice system message to our application it's going to keep all of the history constant okay so let's see how that looks if I click on enter Then I refresh this part it's going to be like hello my name is Alejandro there you go it's going to be like hello how are you today and then I'm going to like do you remember my name and there you go yes your name is Alejandro because now our message our messages variable is not being reassigned to justice system message every time I click on enter because once I click on enter right here it's going to try to reload the thing but then it's going to arrive here and it's going to be like if it's not if messages has not been initialized in the session State then do this but since it is already initialized in the session State it's going to ignore this part and it's going to continue with the same value that it had before and that way it's going to allow us to keep the history of the conversation inside of this variable okay so there you go that was how to make the the messages persistent I am just going to do something else right here I'm going to wrap the response in a spinner so I'm going to do St dot spinner and say with the spinner and the response of the chat okay what this is going to do basically is it's going to say that um if I mean while we wait for the response it's just going to show a spinner just to show the user that the action the thing is actually thinking actually what I can do here is I'm going to say um thinking and now if I rerun this like hello how are you then you have a little thingy here spinning while you can get the response it just makes it a little bit more um user experience friendly okay so there you go that was how to do that now I'm going to show you how to display all of the messages right here and not only the latest one because so far it's only less than the latest one um um so like if I say something like what is kubernetes we're going to have our thinking but it's going to re I mean it's not going to show all of the history so let's do that in a moment [Music] all right so now it's time to actually uh show all of the history of the messages okay um and we're going to do that here outside of our if input Okay so what we want to do is we want to take all of the contents in our messages variable which is our state variable and we want to display them in a in in a conversation like uh manner like with the extremely chat component that we used before in order to do that we're going to fetch all of the messages from our state from St um session state DOT messages all right so you can do it this way but I'm actually going to do get like this and then get the messages because this allows me to set a default value in case the in case this variable doesn't exist so it's we're setting a default to an empty list and if not we're passing the and if not we're passing the contents of this state variable ones that we have all of our current messages inside of this variable right here we're going to Loop through it and we're going to display all of the messages Okay so basically if it is a if it is an odd number I mean if it's a it's in a nut position we're going to display it as the human message and if it's in a pair position we're going to display it in a as the bot message okay so let's do that right now in order to do that we're going to use for I and message in um instead of message let's use MSG because message is already supposed to be our function that creates our message in the graphical user interface so for I message in enumerate messages we're going to display them okay this basically just enumerates all of the messages and gives them an index for each one of them so now I have the index and the corresponding message inside of the messages array okay and now in order to test if it is the first one I mean if we should display it as a human message or as a bot message we're going to say if my index mod 2. equals zero then we're going to display it as a well first we're going to display it like this remember that we are dealing with schemas and the schemas actually contain the content inside of this content property so let's say that the content right here and since this one is supposed to be the human message we're going to say um we are going to say is user to True like that okay I am right now I'm figuring I'm realizing that we forgot to do something else like remember that up here we showed the message then appended it appended the human message to the history then generated it and then show the the AI message we actually forgot to append the AI message as well so let's do that now in order to append the AI message we're going to say SST session state messages and just as before we're going to append but this time we're going to append an AI message and we are going to say that the content is going to be equal to the response dot content like that now our AI message is going to be inside of our history as well and that way we're going to be able to fetch it right here so now that we have displayed this one right here [Music] we can say that else if we're going to display message dot content is user we're going to set it to false and there you go I'm actually going to add a key attribute right here just to be sure that every message has a different key just a good practice I'm going to say that it's going to be my index plus my user like this and for the other one it's going to be my index Plus AI like that there you go I suppose this should work or not why do we have a problem in here um oh yeah missing a coma there you go so now this is supposed to be working now actually we don't need to display the message right here and on user input and we don't need to display this one either because we are displaying the entire conversation okay so now just as a recap when the user fills in the input we're going to append that input to our messages history which is stored in our state then we're going to generate the response like this then we're going to generate the session State sorry we're going to append the response to our session State as the a message and that way every time the user um submits a question or uh yeah a question to the conversation we're going to have both his question and the and the AI response added to the history okay I'm actually going to be able to add this to the sidebar again because we're not um because we're not displaying anything right here so there you go and now if I click on Save and I will actually have to rerun it there you go all right so you can you see that there is a small problem right here but let me just show you that this is working almost perfectly um hello I am Alejandro now this is going to be displayed Asthma as the robot message right why does this happen Okay because remember that right here we were we were creating the um we're just displaying all of the messages in our history okay but remember that the first message is actually the history the system message right so we have to get rid of that one when we want to display them so in order to do that what we're going to do is we're going to subset our messages right here and we're going to say that we want everything starting from the first one not from the zero but from the I mean the second one so if I click on Save right now and I refresh there you go now I have hello my name is Roberto this time hello and then do you remember my name there you go so now we have our chatbot it works pretty good it has memory and it has what we call Buffer memory let me just show you real quick what we did in the code just repeat some of the things to make sure that everything is clear so basically we initialized our variable our sorry our application used load doten to actually load the environment variables we tested that the environment variables needed are actually there otherwise we close the application and we initialized this streamlit this streamlined application then we initialize the chat object from using the chat GPT model from openai then we create our messages variable inside the session State now what did we why did we do that in the session state that is because every time we click on enter or we submit a text input the application tries to rerun itself right and the variables that we don't want to be Rewritten every time we have to store them in this session state right here this way if messages is not already initialized we initialized it we initialize it with a system message and if it is already initialized that means that there is already a history of conversation we don't do anything right here there you go we have our header for application we added our sidebar with our user input and inside of that type or else as well we are treating the user input so I mean handling the submission of this user input so if the user submits a question we're going to take that question and append it to our messages System state variable as a human message all right then we're going to um generate the completion for that chat passing in the history of all the messages and then we're adding that response to the history itself so the next time that the user asks a question we have all this question and answer in the history as well okay and then last but not least which is what we're doing here right here is we are taking all the messages from the system State variable and We're looping through them so that if it's I mean almost all of them not the first one because remember that the first one is our system a system message because which we don't want to show in our user interface and we're displaying them if it's the first if it's um an odd message we're displaying it as a user and it's if it's a a bot message we're displaying it as the AI right here is user Falls it's user true and there you go I mean this is a very convenient and quick way to create chatbots in Python with a graphical user interface using streamlit I hope that you found this useful and I hope that you have many different applications and ideas of how to use this because I mean yes of course you can use it as a basic chatbot like this but you can also use it to make specialized chatbots for example for the PDF for the PDF chatbot that we created a few videos ago that video is also in this playlist so if you want to check it out don't hesitate to click on somewhere on the screen and yeah I hope that this was useful I hope that you found this educational subscribe for more videos like this and yeah I'll see you next time [Music] [Music] foreign [Music]

Channel: Alejandro AO - Software & Ai

Views: 6,652

Keywords: streamlit tutorial, streamlit python, python chatbot gui, python chatbot, python chatbot tutorial, python chatbot project, python chatbot machine learning, python gui tutorial, python gui project, streamlit, python streamlit, langchain chatbot, langchain chatbot python, langchain chatbot memory

Id: IaTiyQ2oYUQ

Length: 42min 55sec (2575 seconds)

Published: Mon May 22 2023