Build Mistral LLM Chrome Extension | Ollama | JS | HTML

hi guys in this video we are going to learn how we can create a Chrome extension which will integrate with mrra large language model through a olama framework we are also going to develop a use case where let's say a user is browsing a website and selects a text from that website the text will get extracted using this browser extension and goes to the large language model now the large language model will summarize this text and sends it back to the browser so this will be our end to endend use case to download AMA you either have to come to ama.com or you can go to GitHub in both the pages you will get the download link so once you download and install it you can go to models in the models you can see all the list of models it supports we'll go to mistal so if you run AMA run Mel and this is the first time you are are downloading and installing mral then it will download the whole large language model and then basically it'll you know ask you to input The Prompt but in my case because the myal has been already downloaded and installed it is directly asking me to provide the prompt so I can say 1 + one goes to question mark and basically it is going to answer but in this example we are not going to use it like this we are going to use it like uh API so we are going to use API to interact with the mral large language model so that we can provide a prompt and we get the output from it so to make it available through the API what we are going to do is we are going to open a command and we're going to Type L serve and here you can see that it is listening on 1274 34 so what we have done is basically we are running mistal on on AMA and then we are so basically we are going to consume this API to interact with the mistal language mod so we have covered everything from the AMA site we have the API ready we will now work on the Chrome extension creation for that we are going to uh use vs code so before I start explaining the code I just wanted to tell you that whatever code I have written 99% code I have taken from chat GPT if you go to chat GPT and give a very basic prompt let's say write a code to exension which will number of words and select text use plus as a we service and you'll get flask you'll have the manifest.json then you'll have the background.js you will have the popup HTML and popup.js so we are going to see all these files in my code here all these files which have been given by chat DPT is here so we're going to talk about each and every file and try to understand how we can build a Chrome extension but before that we can create a virtual environment so that we can install all the required packages so there are three main packages which we have to install first one is flas the other one is FL C and the third one is request so these are the three things which we need so you can can install it using install I have done it so I'm not going to do it again then yeah so we can talk about the use case and Par we can explain like I can explain all all the files so think of it like you are going through a website in this case we are browsing Wikipedia and we are on large language model page and you want to you know get a condens form or a summarization of a huge chunk of text so let's say in this example I have taken these three paragraphs and the moment I click and select these three paragraphs what should happen is if we go back to code and go to popup.js this event listener should get fire and you can see here window. getet selection. TW string. trim with will have the information or the text which I have selected it will be save in the text selected text and it'll check whether the selected test is empty or length is 50 if it is less than 50 then it's not going to come to this portion of the code if it is more than 50 then only it will go it'll come here so once it comes here it will basically call this API so what is this API this is uh nothing but the app.py right this is you can see um a summary API call which we have uh defined here so this is the route which is going to get execute the moment we have selected the text in the website page okay so think of it like it came here and then it has called this API this API will call the app.py text summarizer which we have defined under the flask API so once it reaches here we can see that we are getting the data from the request. Json and then we are selecting the text and then here also we are checking whether the selected test length is 10 so this is basically I would say the duplication of the condition so either you can use the selected. text length here or you can use here in both the ways it should work similar way and once this condition gets fulfilled the flow the control flow will come to llm service. generate text so this is a second file second python file which we have created so in the generate text once the selected text comes we are basically printing it out just for the sake of uh you know seeing it and then we are creating a payload so in the payload Lo we are providing the name of the model the model which we want to use and we are providing the PRS summarize the text inside the square bracket not more than 10 words okay and we are keeping the stream equals to false and um this is the API which we have created in the initial part of our video where we were talking about the AMA and uh basically this is how we are going to interact with the Mr Large language model okay so we'll have the request. poost and then we are passing this payload with the prompt and in the prompt we are also passing the selected text and we have this code which will basically uh do the formatting of the response and we'll get the summarized text of the selected text okay and we are passing it back to here not here but popup.js here we are passing it back so because I wanted to keep things very simple so I just wanted to use alert so that we can see the summarized version of the selected test but think of it like someone who is working on a POC or who who really want to push this feature in their production they can't use this alert just because this is just a you can say a python print statement right so in that case one can uh you know can utilize something in popup HTML here what we are doing is we are creating a HTML page and we can create a body and basically whatever the summarization which we are showing in the summary right we can pass it on to the popup HTML and show it here so so that is mostly the advanced version of it and if you guys like to you know explore those things you can definitely do that okay so let's talk about manifest.json so this is nothing but the metata of your Chrome extension you are providing all the information we are providing name version description permissions the permission we are giving for the active tab background we have to um right now in our case we are we don't want any kind of task to be uh to get execute in background so we don't want to provide anything here we'll keep it empty and then you can provide the default icons so there are three icons three size of icons if if you don't have it what you can do is basically you can have one PNG and then you can repeat it in all these cases and we can provide the content script so in the content script as you can see we are providing the JavaScript popup.js which I have already explained we have gone through it and then we are passing the run at document idle okay so now that we have covered the code part what we'll do is we'll quickly understand and like how we can package this whole code into a Chrome extension so for that we will go to the Chrome browser this is the Chrome browser we have and there are two ways to go to extension so either you can go here and go to manage extensions and you will end up here the other way is you can go to the three dots and click on the extensions and from there you can come to manage extensions how you can add the extens or code which we have uh created is you have to click on load unpacked and then you have to go to the project of it so I clicked on llm Chrome extension summarizer and once I select the folder it will you can see that the extension is already added here and you can go to the detail part where you can see the detailing which we have given in the metadata so this is the manifest.json and this is the metadata which we have defined here and you can see the same one in the details of it so let's have an example what we are going to do here is we are going to select this text and we want a summarization of this text so the moment I'll select this text the code here in popup.js will get execute this event listener Mouse up event will get file and selected text will have the text which I have selected from the VII page and what will happen is you can see this console.log it will show the selected text so how I'll see this text how I'll see the selected text what I can do is in the Chrome if you click control shift I you can see so many times it has been fired so what I'll do is I'll quickly do it again the moment I'll select this you can see selected text and the text which I have selected can be seen here so how we are getting it we are getting it because we are logging it okay and because we have logging it that means after this this line of code is getting executed which is calling the Local Host 5 summary but as you know I have not run I have not initiated I have not started this flask server yet so I'll quickly start this server so now our flask application is running so let's quickly run it again we'll clear out all these logs we will refresh the page and the moment you click and select the text we can see that pop do popup.js has worked and we can see the logs here we can see that the flask API fun function has also worked fine the calling of summary has worked that's why the control has reached here and you can see inside gener text that means the llm service gener text is also it got executed you can see inside generate text inside generate text here so basically this has also executed that means this whole request to mistal is also done so let's quickly go to terminal we can see that the call to mistal has happened here's the call to the mistel and we can see 200 it's a success post API generate so this is the summary this is the summarized version of whatever we have selected here large language models are neuron networks that learn learn statistical relationship from text document for national language processing task and blah blah blah so all these information the summarized information you have it okay and this is the alert which we have written here so you see this alert so this is the alert which we can see here in this popup okay that's it guys for this video I hope you like this video I just wanted to mention one thing so instead of alert right if you want to take this use case to the next level if you want to make a PC or you want to productionize this kind of solutions instead of alert you can use popup HTML you can use uh this div or maybe you can basically use a bootstrap CSS make it beautify so that you know it would look much better than you know just alerting the user with the summarization basically you would pass the data out summary to that particular diff so that would have been much better solution you can just go to chat GPT and if you give a prompt it would give you whatever I have told you because CH GPT can do a lot of things so go and try and instead of using alert use the poop. HTML and make it a better solution I hope you have liked this video guys thanks a lot have a nice day bye

Channel: Ayaansh Roy

Views: 651

Keywords: #ChromeExtension, #LLMs, #AIIntegration, #Tutorial, #WebDevelopment, #ChromeBrowser, #GPT4, #WebSecurity, #ActiveTabPermission, #AIInnovation, #SoftwareDevelopment, #MachineLearning, #ArtificialIntelligence, #DeepLearning, #NeuralNetworks, #NaturalLanguageProcessing, #AIDevelopment, #ModelIntegration, #AIProjects, #AIApplications, #AIProgramming

Id: gHhnS2FpSIk

Length: 15min 31sec (931 seconds)

Published: Thu Mar 07 2024