⛓️ langflow | UI For 🦜️🔗 LangChain

and welcome back to data science Basics I have covered the introduction getting started components and the use cases of Langston so what mixed right what happens generally is you learn something and then you find it difficult to remember or find the ways because you need to go through each and every document parts to find what are the different models that lines and supports what are the prompts what are the indexes what is the memory part and all these things right so I was looking for a way to easily navigate through those different components and I got to know this Lang flow GitHub repo in this video we will go through this little repo installed locally in our computer and see how the UI looks like let's get started go and see what is Lang flow from the GitHub repo right so here it says that Lang flow is a UI for Lang chain design with react flow to provide an effortless way to experiment in Prototype keep the flows right so there is and it is actually developed by log space so you can visit their website and the UI looks like this I will just show you in a while and yeah there is simple instructions how you can download this and then there is also instruction where you can deploy a land flow on Google Cloud platform and then there is also a way I think to create different flows how you can do this and you can even write a normal python script to do the same and you can of course contribute and by the way the GitHub star history like it went all the way in eight weeks now it has over 6000 stars in GitHub so that is really really good now it has 6.8 through the documentation here or the instructions it says beep install length probe here is no instruction of creating a virtual environment but I highly recommend you to create the virtual environment because it isolates this project from your existing projects so there is no conflict between the different python packages that you install locally in your computer and what for that what you can do I have already created a video about how you can create the virtual environment please refer to that if you are new but for that you can just type virtual environment.venv and source and activate this I have already activated the virtual environment as you can see here it is showing Lang flow that is how I have configured my terminal but for you it will maybe show in front there is the virtual environment being created when you create or run this particular command so what do we do next now we can install the necessary package as it is shown here peep install land flow that's all actually what you need to do once you are inside the virtual environment just run peep install lank flow I have already done this so I will not run it again and then you can run the UI so how to run the UI as it says here there is two ways you can do one is python M length flow or you can just type length so what I'm going to do is I will do Python 3 because I'm using a full stop python version 3. and dash M and Lang flow so when I run this command we'll now create a UI and we can run that locally so that is that simple here it says that it started server process and then we can we can access the UI with this particular localhost so if you click this link it will open the new UI so this is how the new UI looks like now I can make this bigger and there is the dark mode I prefer this so this is the UI I will navigate now through the UI how it looks like on the left there are all the components that is what I say that it's easier for you to see what are the components that are in the language so agents you can see there are so many agents already present and there are chains there are different chains and similarly there are embeddings if you click this embedding series open AI meetings only here right now and for llms there is open AI fogging phase nlmcpp and all these things and this is actually improving because if you go to the GitHub repo actually the code you can see 16 hours 20 hours before somebody is still committing there meaning that this repo is constantly improving so when you run this particular repository there might be something change so always refer to these issues part to see if you face some issues when you run this particular repo so now that this is the components part and on the top right here is the code part if you click this there is API and the python core so this is how you can quickly run this flow when you create the flow you can quickly run through the python code and then there is the import part that you can import the flow from the examples and local file I will show you one example from the examples and I will show you one simple example also by creating how you can quickly drag the things here this is the import part and there is this export where you can export your flow once you create this and there is light mode and dark mode things as I said before so yeah that's all in here you can see that there is bigger smaller Zoom parts and here is the chat part on bottom right I will show you what it looks like when we create a inflow now let me show you a simple example with simple chatbot right for that what we need first we need llm right from here I will take the chat open AI so if you just drag tag here this UI is shown here let me make this little bit bigger so you can actually see this so yeah here there is the chat open AI this is the wrapper around open AI chat large language models right so here you can actually choose different models as you want there is GPD 3.5 gpt4 and all these things and there is the temperature open AI key and then there is the maximum tokens you want to give so that is that simple once you have the chat open AI what do you need next right so we need to go to the chains right if you go to the chain let me take for simple example this conversation chain so here this is the conversation chain I have and here is the chat open AI now we need to connect these two pieces together right first let me go to my API Keys part I'm showing you here because I will revoke once I create this video so here in the open AI API key you need to just paste this here that's all now we have the open AI API key and now we need to connect this llm with the conversation chain for that if you go on top of this chat open AI you can just go here and connect this to llm now this is connected to the conversation set that's all you don't need to write anything now if you go to this chat icon down here now you can have a chat so let's say hi or now it says okay hello how can I assist you today and then you can ask as many questions as you want for me let's say what is the capital of Nepal so you can see that we created a simple chart with just dragging two different things from this UI so for writing the code also it's not that hard you can follow my tutorials or my videos earlier but quickly just to see how your application works and for the quick prototyping things this is really really helpful I hope you can go through this and by the way it might show some errors because when I try some of those it is showing some errors because the the repo is constantly updating and maybe something broke somewhere so there are many issues in the GitHub so when you run something here if you face any difficulties please refer to the official GitHub repo and ask question there so someone else might answer your question okay so this is just a simple flow I created right now if you click this code part as you can see here there is this flow name given here new floor TS this is the API if you go to the python code you can download load this flow and then run this locally or anywhere you want if you have this Json file because when you export this it is going to be exported as a Json file let me click the export icon here so here you can give the new name I can just give it here new chat and if you want to give the description just give here I will write test and you can even save with API Keys you can you can do it or you cannot do it it's up to you for me I can just save it for now because it is in my local computer so I can say download flow and then I can just save it locally so that is how I can save and if I want to next import this I can import this and continue where I live from so just to just to show you how it works if I go to the import icon here now and I can do one from example one from the local file if I do the local file and this is the new chat I can just open this now you can see there is two charts being here one I created before and the one that I imported that just I export it right okay input it export it good but you can see that I say that include the open AI API key and now there is also the open air API key now let's go and import one of the flow from the example right if you go to this import and if you go to the example there are many things as you can see here there is buffer memory CSV loader and all the different things you can choose whatever you want and it's actually quite complicated kind of flow is also being provided here if you just go to this Vector store wow as you can see here there is this web-based loader meaning that it is taking the web pages as you can see here and that is passed into the character text splitter and that is passed into the chroma DB and then there is open AI embeddings because we need to do the embedding part and there is this Vector restore information there is this open Ai and there is this Vector restore agent right let's test this actually if it works we have the web path here being provided that is the link to some particular website and this is actually the website is rough compatible with black and all the different things and now if we go here it is asking the open AI API key here is the API here me copy this and if I go back to the flow and here I can just paste the API key and that is for the embeddings right if I do little bit quicker and now we need to also pass the API with the open AI right so here I can go to the API keypad and Ctrl V so now I have provided the necessary things it's just the API key and then we have the website where we want to use the web web base loader and then all the things is handled here right if you look closely there are many things happening behind the scene now let's go and chat with this particular document what we can do now is basically go and have a conversation with this particular website right so what I can do I can just go to this chart icon and I can say what is the document about right so if I say what is the document about now it is being passed to embedding part and then it is going to do the semantic Source in the vector store and find the relevant chunks and provide the answer for us so meaning that it should provide the answer which is in that website as you can see here the recommend is about rough compares to other linking and type checking tools such as black flick 8mypi pyrite and Pi if we just go here it says is rough compatible with black how does a rough compared will flag it and there is also different informations how does rough compare to pilint and all these things so yeah that works right so yeah that's how it works I find it really helpful one is bigger just to see around how different things work and the next thing what I find interesting is that you can see different components of LinkedIn in one UI so it is easier let's say that you are developing something and writing code in Python somewhere and you want to know what kind of different components you need right so you can quickly come here and do some prototyping and use that prototype into the code then it really helps to implement the applications I hope you will enjoy going through this UI and yeah that's all for this video thank you for watching and see you in the next video

Channel: Data Science Basics

Views: 16,793

Keywords: large language models, llm, chat, langchain, lang chain gradio, langchain demo, langchain tutorial, langchain explained, framework, langchain hugging face, langchain chat gpt, llms, chat models, prompt, chain, agents, pandas, chat with data, create chart with llm, documents, pinecone, langchain cookbook, langchain qa documents, openai, lang chain chroma, what is langchain, langflow, ui for langchain, langchain ui, user interface for langchain, chromadb, vectorstore, ui flow for langchain

Id: 18b7u_e5tnM

Length: 12min 9sec (729 seconds)

Published: Fri May 19 2023