How to build a PDF summarizer using AI - React JS Next.js

in this video I'm going to show you how to build a PDF summarizer using Ai and large language models I'll build out two examples the first will be a very simple one using nodejs and JavaScript it will run in their terminal with a basic CLI I'll have a files folder where I'll be able to upload or place different types of PDFs and I'll create a prompting system that allows users or myself to select which PDF I want to summarize and select which large language model I want to use to be able to do this summarization once it's done it'll spit out the file as a text document so I can view it in the same files folder this will let me summarize different types of cover letters resumés manuals or documentation with the power of AI and this is perfect if you want to hand it off to another API or application for the second example I'll continue building this out with a web design I'll I'll use some of the latest Frameworks like nextjs and reactjs to build out the front end and backend this design will be minimalistic but allow users to select to upload a PDF have a preview of the content of that PDF and then have a summary that is provided by the AI in the same window all of the code for these two examples will be provided in the description below so without further Ado let me start showing you how to build it the first thing I'll need to get this project up and running is a large language model I'll be using octo AI they're a little bit more accessible and affordable than other AI models they have great documentation including examples in Python and typescript and they're also the sponsor of today's video on their website I'm going to select to sign up and then I'm going to log in with my Google credentials once signed in I'm taken to the dashboard here I can test out some text or image generation but I'm going to generate an API key key for this PDF project I'll select my avatar on the top right and select account settings then under API tokens I'm going to add a description for a PDF summarizer and then I'll select generate I'll copy this access token to a text document and then I'll use it shortly for an environmental key once I set up the project in vs code all right now it's time to open up visual studio code I'm going to select to open a folder and create a new folder here called PDF summarizer nodejs in the terminal I'll run npm in it to initialize the project and fill in the prompts such as the package name version description Etc this has created my package.json file but I don't have any packages installed yet let me install them now I'll first install octo AI running npm install at octo a/ client now that that's done I'll install just a few more packages I'll in install. EnV as well as prompts and Ys this will be for later in the video but mainly to have environmental keys and allow users to prompt the terminal this is enough to get started so let me create the first two files the very first one will be index.js which is where most of the action will happen the other will be the EnV file where we'll store the environmental keys and in this case that is the access token in the EnV file I'm going to create a variable here called octo AI token this will equal the token we created earlier I'll paste this in make sure you keep this secret and don't share it publicly I'll delete mine later at the end of this video I'm going to start building the index.js file first I need to make sure I can access environmental keys so I'll require EnV running. config I also want to import the client from Oto AI so here I'll pass in const D constructing the client and pulling it from require at octo a/ client I'll need to set the token against this client class so I'll create a const lowercase client equals a new client and pass in the environmental Key by passing in process. env. Octo AI token now I'm going to create a function which calls this client to do a simple request to the API to the large language model I'll create this basic asynchronous Arrow function and I'll create a const value here called completion and it's going to await the response back from the API which is called over here calling await space client. chat. completion. create I'll pass in a model this will be the Lama 2 model I'll pass in some messages as an array this will include a system message of how the AI should function and a user message with the content being what I'm asking the large language model to do let me quickly add some semic columns to the end of each line so that they run properly and finally let me console log out the result from this API request to make sure that it's running successfully this will be completion. choices index0 message. content finally I'll open up the terminal run node index.js and sucess I've got a response from the AI model I want to add prompting so that I can select in the terminal exactly what options I'm going to use and you may remember earlier in this tutorial I installed it it's a very popular npm package with over 18 million downloads per week and allows you to create very simple prompts within a single line of code and one package that works perfectly with it is called Ys which I'm going to override and add into prompts so that it can work alongside it allowing me to add colors and P text that the user inputs this repository is even more popular with 70 million weekly downloads let me quickly make a test example to show how it works I'm going to const example prompt equals await prompts I'll create a very simple one with the type of text name of value and the question what is my name then I'll console log out the example prompt. value since I'm not going to be using this completion and console log I'll comment these out for the time being and then I'll just run this function within the terminal this time I get a prompt question what is my name and if I type in Adrien I get the response here that it's Adrien as the value this is useful because it allows me to select which PDF I might want to transcribe but let me do a simple example selecting which model I want to use from a list of models from the chat options I'm going to use a let model equal await client. chat. list models this will pull all the Octo AI models but I'm going to also map through them and then for each model that I receive back I'm going to return an object here and this object will have the title and the value of the model name so that I can pass that into prompts later on I'm going to modify this prompt here from type being text to type select I'll select the value received as model and the con value will be model selected the message I'll select here as which model would you like to use and for the choices available I'll pass in the models which we mapped through just earlier there's one more item I want to add in which is the initial choice you don't always have to add this in but I'm going to set this to seven because I know that that is the model that works the best from these examples I'll also update console log to console log out model selected. model now if I run this in terminal I've got my question which model would you like to use and I can select whichever I want with the initial one being number seven since I now have this value from model selected I can pass that straight into the completion here at the top where their model is predefined I can select model select. model and this can now be a variable option based on the user selection now to add p PDF pausing I'm going to use a library called PDF PA so I'm going to run npm install PDF pause it's a popular library that uses pure JavaScript to extract text from PDFs after it's installed I'm going to add it as a const value I'm going to pass in const PDF equals require PDF pass since PDFs will be located in a folder and there are a file I'm going to also require fs and path now for FS I want to have the promised version of that so I going to wait responses and I'm going to pass in const FS equals require fs/ promise and const path equals require path with these three modules now available to us I'm going to Showcase how to use them to select through a number of PDFs and pick one to Paws first to grab all the PDFs and select one let me create a new section over here and I'm going to call this const all files I'm going to await fs. read directory and pass in the current files directory which I haven't yet created let me do that right now I'll create a new folder called files and in here I'll chuck all my PDFs fs. read directory will actually return back all the files so I'm going to filter only for PDFs here I'm going to pass in let PDFs equal all files. filter and for each file I'm going to use path. EXT name to get the extension name from the file for safety I'm going to make sure that they're all lowercase by using two lowercase and I'm going to double check if it is a PDF now if that is the case this will filter only for files that are PDFs using the promps library we do need a special way to Showcase choices so I'm going to create a custom value here called choices equals pdf. map I'm going to Loop through the PDFs and only return an object here that has both the title as well as the value for the PDF both of which will just be labeled as PDF with the hard part now done I can just just prompt the user now so I'm going to pass in const PDF selected is equal to await prompts for this I'm going to have these prompts as a select prompt with this autocomplete actually filling it out quite well using GitHub co-pilot it's a select with the name PDF and which PDF would you like to use passing in the choices let me console log out the response here and test this out let me open up my files folder and create two fake PDFs one will be called example.pdf and the other one can be called something like another. PDF in the terminal I can run index.js and my second question here is which PDF would I like to use and it gives me the two options from the files folder since these are both empty let me actually paste in a real PDF which we can use as a template here in the folder I'm going to reveal it in my file explorer and I'm going to paste in just this CV one which I'll add in the description below in case you guys want to to use this back in Visual Studio code I'm going to remove this console.log and read the PDF to do this I'm going to pass in cons data buffer which is what happens when we read a file await FS read file I'm going to pass in the file location so it'll be/ files with a dollar sign PDF selected. PDF which gives our file name then I'm going to pull out the text from the file I'm going to pass in conext equals 08 PDF passing in the data buffer then I'm going to return back just the data. text which is the plain text from the PDF then finally I'll conso log this out to make sure it's working let me try this out in terminal right now I'll run node index.js I'll select a model any will do and then I'll select cv- template and here I've got all my plain text from that CV I want to pass this text to the AI model and I previously had this completion so I'm going to uncommented and use it we're already assigning the model but now I need to update the messages for the system message I'm going to write that I wanted to summarize the following PDF then for the user content I'm going to just simply present the PDF in the text version which we earlier got from the PDF paa that's all really now let me console log this out to see if the summary is working for this PDF in terminal I'm going to run node index.js I'll go through the prompts selecting my model which is passed through the completion as well as the PDF which is passed across as well and the response back from the server does in fact give a three sentence summary of what the PDF is about which is a CV template now that I know this is working I'm going to save this PDF summary to a file using fs. write file passing in the path as well as file name and the text that I wanted to print out this should save straight to the files folder that I have and then I'm going to console log out that the summary has written to file in terminal I'm going to run it once more selecting a model selecting the PDF and now I can see in my files folder I have a new text document which is called cv- template. pdf. txt and here is the summary from the AI now I'm going to build the second example and this one will be with a front end and backend using nextjs I'm going to start off by creating a brand new directory so I'll CD out of this one and run npx create next app at latest here I'll create a new project called PDF next with the rest of the details as more or less default while the installation is running I'm going to browse into this brand new directory and I'm going to set it up because since it's fresh it's going to need a few things the very first thing is an environmental key so I'll create a EnV file and I'll paste in my octo AI my token key then I'll want to start up the development server in order to do this I'll open up the terminal and run npm runev this will open up a local server running on Local Host Port 3000 which I can select and preview in a web browser here it is over here next I want to use pdf.js a different package which runs on the client this will offload that heavy task from happening on the server onto the client I'm going to use this CD end package over here and I'll copy the URL and what I'll do is I'll jump into the nextjs app directory head over to layouts and create a script tag on this piece of CDN package so that it loads when the client loads the page the page is just over here it's a default nextjs app page and I'm going to get rid of most of the syntax so that I can start from scratch I'm not going to worry too much about the layout I'm going to keep it simple with a heading that says upload PDF and a file input here that will accept PDF files since nextjs now is service side by default I'm going to type in use client at the top so that it's a client component that can have interactions like use State now I'm going to create my very first function this function is going to be when a file is added or changed on the input I'll link it to my input so I'll call onchange will equal on file change inside the function I'll create a con value called file which will grab the very first file from event Target files index zero then I'll also create a constant file reader which will create a new instance of a file reader using JavaScript next I need to have an unload file function and this will be called when the file is actually read I'll link it over here with file reader. unload and then I'll load it by calling file reader. read as array buffer passing in the file itself this will bring me to the unload file function here I'm going to create a con Conant called typed array and this is going to convert the file into a unit 8 array and this will be used by the pdf.js library which I can call here by calling pdf.js lib doget document I'm going to pass this across with the parameter data and that will equal the typed array after that I'll call promise do then then I'll pull the PDF result that comes out of it and run this inside of an arrow function I'll console out how many pages are in The PDF and then I'm going to Loop through the very first page and I want to get the text from that very first page as a trial so I'll call pdf. getet page number one then I'll pass it into an arrow function pulling that page out and trying to get the text outside of that page in order to do that I'll call page. get text content this will rou through the text and pull it out as content and in order to save this I'm going to create a value Val called text and then I'm going to Loop through each instance of the content and save that to the text value before I send this to the server let me test it out here's the CV and here I can see the text has been printed out using this function I'm going to set up an API route now in nextjs to do this I'm going to create a folder called API and in here I'm going to create a file called route. JS in this file I'm going to import next response which we'll use to respond to clients from the nextjs server library then I'm going to export a cons get method now this get method will just be for testing to make sure that we are getting responses from the API so I'm going to do a simple hello world it's going to return using the next response a Json and in this Json I'm just going to do something like success is true and message is hello world inside of chrome I'm going to browse to the API endpoint and I've got my message here I'll be doing a post request so I'm going to change the get to a post then using const body equals a wait request Json I'm going to pull out the content that the user sends to the server so let me create the front end function for this I'm going to create a function called send to API which will receive some text and then send that text to that API endpoint let me call it here after I get the text from the PDF document then I'll do a simple fetch request passing it to for / API as a post and then passing in the body with the text here that's been stringified wonderful now I think that's more or less everything so I'm going to give this a test let me select the PDF this should send the PDF text to the server and here I can see it's been console loged so it looks like it's working later I'll respond back with a summary of the PDF rather than the PDF itself but for the time being I want to display this summary on the front end so what I'm going to do is import use use state from the react library and I'm going to create some state for it which I'll put in a tag so let me do const summary and set summary is equal to use state currently being empty here at the very bottom I'm going to create a P tag and put the summary to be displayed over here it will start off empty so I'll need to set it let me go back to the function here for the API call and I'll set it here calling set summary and I'll set it from the data. summary which we receive from the API endpoint let actually pass that across so here I'll add a new value summary can equal the body text let me test this out on the front end I'll upload a file which will be paused and sent to the API and the API will send me back the plain text it's not summarized yet but that's the next step in order to do this I'm going to reinstall the library at octo AI for/ client now I'm going to import it into the API route calling import client from at octo a/ client I'll also need to set the API key so here I'll create a con value called client equals a new client passing in the environmental key that we set it earlier in the EnV file inside of the post request underneath the body I'm going to call the completion so I'll create const completion equals await client chat completion do create inside of this object which I'll pass I'll include the model which I actually found this mixl 8 x7b instruct fp16 version quite useful I'll also pass in the messages normally the messages needs to be an array that goes back and forward from the AI but I'm just going to have a single system message here which is going to request the AI to summarize the PDF so here I'll pass in an object with the role of system and here I'm going to pass in the content as summarize the PDF below and then adding the text that we get from the front end to the end of this string so this here I'll do plus body. text with this now done all I need to do is return it as adjacent object which I'm already doing below all I'm going to do is for the summary I'm going to pass in the completion do choices and I'll do the very first choice zero. message. content and that's everything so let me try it out I'll select to upload the PDF here the template. CSV and I I've got the summary now coming back from the large language model I've covered a lot of the basics of how this functions on the front end and the back end how to turn it into a CLI or how to have a visual interface for it but there's a lot more that can be done in my description I've added a link to the GitHub repository where you can try both of these out they also come with a little bit more inline descriptions and error handling such as a catch in case you forgot to add in the API key or inline descriptions to explain what is happening on each line I've also put together a great feature which takes large PDFs and breaks them into smaller chunks this does it by checking how many characters they have in this case I've put in 500 characters and then pushes them to an array this array can then be actually looped through and create a summary for each Chunk from the PDF itself and then each chunk is then recompiled into a chunk of summaries and those summaries are then put together to create one super summary of the entire PDF which is written to the file I've also tried to put together some try catch Loops in case the user tries to leave the application early and therefore it doesn't pass in different values like the model name or the PDF itself it also gives summaries of just how big the actual item is how many characters and how many tokens it would cost to be able to run this API request for the second example where I built it on nextjs I've added a nice user interface it's using Tailwind CSS previewing the existing PDF before it's sent to the API as well as printing out the summary that's received from octo AI this means that there's a lot more front-end code to like use effect and use state which you can utilize or customize to your own needs

Channel: Adrian Twarog

Views: 18,875

Keywords: pdf summary, pdf summarizer, pdf summariser, ai, pdf, octoai, octo ai, nodejs, nextjs, react, js, programming, coding, pdf to txt, pdf summary using ai, pdf ai, ai pdf summary

Id: OIYevBOSMxY

Length: 23min 13sec (1393 seconds)

Published: Tue Mar 05 2024