Create a CSV AI chatbot using Langchain | React Front End + Python (Flask) Backend

on guys today we're going to be going over how to chat with a CSV file using AI so let me just go ahead and demo you this real quick you can see over here we have a python server running as our back end and then we have this next JS app with a simple UI where we can interact with it so we'll go ahead and let me show you what the file has inside first so you can see it has student data just generic information I threw in this file pretty basic stuff so should be able to handle it no problem we'll go ahead and upload the file and then we'll go ahead and ask what grade is Stacy in so you can see the agent get run over here it's observation of the file and then its final answer and then we take that file and we display it on our front end application now please note when we do go through this we're not going to be covering any basic coding information such as environment setup syntax file structure so it's a bit more of an intermediate tutorial just to get you up and running if you do want a more beginner friendly tutorial maybe we can cover that more in depth in future videos so let me know if you do but we're going to go ahead and start in our app.pi file uh we'll go ahead and get rid of this but we'll leave the basic setup uh just make sure you install these Imports like I have here and Define your app and then set your environment Keys up um keep in mind you shouldn't store environment variables like this just for the sake of this video I am but you should never be doing that so the first thing we'll do is set up the route at which we're going to hit the requests so we'll go ahead and set that up we'll call it predict you can call this whatever you like but I'm just going to call it predict and then we'll Define our methods as post if I can type today post then we'll get into our python function and I'm just going to call it the same thing just for Simplicity and then we can go ahead and begin so this is where the first thing we're going to do is get the file that we send over from our front end so we'll go ahead and find the file and we'll get it from the request file called file now it is request dot files I made this mistake earlier and the next thing we're going to do which I don't recommend doing if you're going to do a production build is save the file to our local disk so we're able to read it um you don't want at a production level people sending you files to your local drives that could be a nightmare especially with storage capacity you would want to upload this into a database instead and then pull the files from that database but just for this example we'll go ahead and save them to our local disk after that we're going to go ahead and run our agents so Define our agents as create CSV agent now under the hood if you are familiar with pandas this is how it is reading the data and then using open ai's language model to interpret that data so back here we'll go ahead and Define our model which we're going to use open AI and give it a temperature of zero this means we don't want it to be creative we want it to be super precise with the data it returns and we don't want it to deviate at all so we'll go ahead and find that we'll pass in the file and we'll go ahead and set the verbose to true just so we can kind of see how it behaves this is what's going to allow us to see this information very helpful for debugging and just kind of to see how it thinks and runs in the back end and we'll need to print that so we'll do agent.agent LM and underscore chain dot prompt dot template well we got a spell print correctly so agent.agent dot llm underscore chain dot prompt dot template so after we have the file we're going to want to get the question that's going to be the next thing we're looking for and we will get it the same way on that request form and we're going to call it question now that we have the question we're going to be able to store it in a result where we run the agent so we'll go ahead and find what the result is going to be this is where we're going to run the agent on the question and get our result now after we get this result I do like to remove that file remember we downloaded it locally and I don't want it to sit there and forget about it so we'll go ahead and remove it right away as soon as we can remove that and then simply return our results okay now that we have oops I forgot to store this in a object so we'll go ahead and do that oh yeah I was right the first time and we'll go ahead and fix that there we go now after we have that we'll just finish off with our regular python syntax thing for the app to run call it name equals underscore main underscore underscore and then we can run our app run app set debug hold it true and this should be a double equals okay and that is all the code we need to actually make this happen um I know it's shocking I thought it'd be a lot more code when I first did it it was under 35 lines um that means Lang Chang is doing a pretty good job of making its agents pretty easily accessible and easy to get up and running so once we have that let's go ahead and start our server up and now that server is live listening for requests so let's hop into our next JS application um this is a scratch next app I've only added one page so if you just create next app add a page I call it CSV chat call it whatever you'd like and this is where our front end code is going to live now I'm going to keep the return just because it's a lot of CSS and then the rest is just the inputs and the values getting passed to them so you should be able to set that up but here's the code in fact if you'd like I can push this up to a GitHub repo make it accessible and leave the link in the description so let me know if you want that maybe make it a bit easier if you need to refer to it later but we'll go and get rid of this and start from scratch now the first thing we're going to want to do is Define our state variables and we're going to have three remember we're going to have the result the question and the file so let me type these out real quick these are just your regular State hooks so we'll set result you state and then we'll have our question and then we'll have our file file file okay and that's all of our state variables done so now we're going to go into our functions we'll do the first two easy ones which are the handling the change requests so let's do that real quick we'll do handle the question first I am using typescript so of course we have to do event any and then we'll set our question to whatever that value was event.target.value and we'll do the same thing for our file change any and I know I'm going a bit fast again this is not supposed to be beginner tutorial so I'm not explaining everything in depth if you do want that please let me know though and we could probably make that happen and we'll get this from the zeroth index now we're going to handle the submission so this we're gonna a bulk of the code is going to lie we've already got it right there okay now let's start handling this first we're gonna get rid of the default Behavior prevent I believe it's defaults okay so we'll start with our form data uh this is how we're going to handle the file upload so we'll create a new form data and then we're going to Let's have the form data and then we'll check for a file just to be super safe and here's where we're going to append whatever we get from that form data and it's going to be the file and just to follow the same structure we'll go ahead and do a conditional for the question too probably not necessary but just to be safe so we'll do form data dot append question and the question now we have those done we can move on to our fetch so this is where we're going to be hitting that endpoint that we created in our python your url might be different than mine maybe the same you'll have to go ahead and check make sure you're hitting the correct endpoint mine is one two seven zero zero one and we're on Port 5000 you might be on a different port again you need to check that and we called it predict this needs to be the same name that you called it in your python application so if you call it something different yours will be that now next thing we're going to do is pass our method in so it's a post comma we'll pass the body in which is going to be the form data okay pass that in and then we'll go ahead and do some dot then and catches let's get our response response and then let's get that from our response dot Json and then we'll get the data so same thing data and this is where we're going to set our result from whatever that server returns and we'll get that from the data object under result that's what we named it in our python application make sure those do line up or you'll run into problems then we'll catch any errors so I catch air and then we'll just log them out not the best air handling but this will do for now and that is all the code you need to accomplish what we showed in the beginning of this video it is not a lot of code to be honest [Music] um and pretty simple to do once you get the hang of things and you can do a lot lot more with the files and the functionality we're just doing the very Basics but it can perform very complex data analysis and calculations on CSV files that are much much bigger than the ones we're sending but we'll go ahead and take another look at the file um let's go ahead and ask it another question so let's make sure it's working first of all and we'll go ahead what are all the female names okay so we'll submit you'll see the agent run it's running it gets the final answer Stacy in Maryland maybe this was a bad example but uh it did pick Stacy and Marilyn and Oliver Ryan and Graham uh yep you can make your in inferences on which names belong to which but moving on that is it um if you have any questions leave them in the comments below um and I'll see you guys in the next one bye

Channel: Cerum AI

Views: 2,625

Keywords:

Id: 0ModfEMMH2I

Length: 14min 16sec (856 seconds)

Published: Tue Aug 01 2023