Build a PDF Text Extractor App with Streamlit, n8n & Mistral OCR API – Step-by-Step Tutorial

Key Takeaways

Hello everyone. In this video tutorial, we will be creating a stream web application to extract text from any PDF file using MR OCR API and N8N. So we will be creating a complete workflow in Nit end where when the user uploads a PDF file in streamlit web application. This workflow will automatically execute and this will extract a text from that PDF file and then we will display that text into our streamllet application like you can see over here. So this is the for example this is the PDF invoice that I have uploaded in my screen application like you can see over here and you can see that uh this is the completing PDF invoice and we have the bill to information we have the invoice details we have the items like four different items are listed and we have the total amount like $525 with a tax rate of 5%. Okay and no returns and exchange are the terms conditions or instructions. So you can see that we are able to extract this complete invoice which have the bill to information the invoice details like you can see four items are listed as well and we have a text rate of 5% and total is $525 and we have the condition or instructions as no return and exchange. So you can see that uh we are able to upload a PDF file in our stream it web application and and you can see that uh when as the user uploads a PDF file in our stream web application this uh nit workflow will execute uh in this nit workflow we are using ML OCR API to extract text from any PDF file that the user uploads once we are able to extract the text in this nit workflow using ML OCR API then we display that text into our screen read web application. So let me just give you a live demo as well. So first of all I will just click on execute workflow over here. Then I will just go back over here and just refresh this up. So now in the browse files I will just upload a PDF invoice over here. So let's upload this PDF invoice over here. So now it's processing and you can see that we are able to extract the text from that PDF invoice. So this is a PDF invoice uh that I have uploaded like you can see the same PDF invoice and you can see that we are able to extract the complete text from this PDF invoice. So this is a quick demo of a stream web application that we will be creating in this tutorial. So let's go ahead and create this application from scratch. So you can see over here I have created an empty workflow in N8N. So you can simply create your account init and start a free trial. So first of all I will add a trigger. So trigger starts the workflow. So in this tutorial uh we want to uh pull the data or pull the event details from uh the stream web application where the user will upload a PDF file. So we want to get that PDF file. So we uh I will just add a web hook trigger over here. Okay. And uh I will just change the HTTP method to post from here. And over here I will just write respond to use respond to web hookbook node. Okay. So over here I will just pass this test URL into our streaml application that we are building. So when the user uploads a PDF file in our streaml app, we will be able to get the PDF file. Okay. So these are the details authentication net uh we have the path over here and here we have the test URL. Okay. So we have have added up web hook. So this is the trigger. So trigger basically starts the workflow. Now the next thing which will do is I will I will just add an HTTP request over here. So if I just go over here and um I can just write over here m instead of going over here let me just open another go browser. Okay. So I will just write over here rooster go. So I will just click on here. So first of all I will just click on try the API. So here you can get your own API keys. So if you want to create a new API key, you can just click on create new key and you will be able to create a new key like I will just write m o nan. So this is the name of the API key. So you can simply copy this key from here. Okay. And from here I will just go to the documentation. So from here I will just go to document AI and go to basic OCR from here. So here you can see we have all the code for document AI OCR processor. First first we need to post do OCR with the uploaded PDF. So like you can see over here. Okay. So next I will just go back over there. So now I will just change the HTTP request to upload to M2 from here. So first you need to upload the PDF file into the mistrol. Okay. So now I will change the method to post or instead of doing this I will just uh click on import curl from here and here I will add the curl command. So if I just go over here I here I have the code OCR uploaded PDF. You can also upload a PDF file and get the OCR results from the uploaded PDF. So here I will just click on curl from here. And now I will just copy this code. And now I will just go back over here and I will just add this curl command over here. And I will just click on import. Okay. So now here you can see here I will just pass the API key over here. So now I will just add my install OCR API key. So if I just go over here and if I just click on try this API from here and here we have the API keys from here. Okay I uh I can just remove this. So I will just remove all my API keys from here and I will just create new API key mist OCR and I don't know. So I have just created a new key. I will just copy this key from here. Now I will be just going back from here. Okay. So you can add this ML OCR API key over here. But as you know that um we will be after uh now we have created an HTTP request like upload to Mistral. Next we will also create an HTTP request. So in this tutorial we will be creating like three to four HTTP request. So we need to add the MR OCR API key in each HTTP request. So to make things simpler we can just go to authentication and add generic credential type. From generic O type we can choose header O from here. And from here uh we can just over here you can just add the name authorization over here. Okay. And over here you can simply add this API key like here uh from here you can simply copy this complete value from here and you can just go over here and you can just add this complete value over here and click on save. Okay. So once it is saved and then you can just go back over here and you can just close this headers from here. Okay. So that looks quite promising. Next we have the input binary data field name. So uh one thing you can do is uh you can just write the name over here as data. Okay. So this will be the name of the uh PDF file like you can see usually we have the uploaded in binary file data like the binary file usually have the name data. So if the name is different later we will change that name but for now you can just add this. So now we are done with this step. Now next I will just go ahead and uh one thing I just need a body content type is form data. So that's good. So now I will add another HTTP request over here and so this will be uh next after the user uploads the PDF file into our uh MR OCR. Next, we need to get the signed URL. Like we need to get the URL of that PDF file. Okay. So, here I've just added that URL. Okay. So, instead of manually adding this, uh I will just go over here into our documentation. And if I just go below here, you can see we have the curl command to get the URL of the uploaded PDF. So I will just copy this from here and I will just add this over here. Okay, I will just add import from here. Add the URL over here and I will just click on import. inside this ID I will just write over here. So first of all I will just change to expression and over here. All right. Okay. And we have the head authentication as generic credential type. Here we have the header O over here. And we have the header O as Mr. OCR demo. Okay. And uh we will just close this send headers and send body as well. So that looks quite good. And we have the method as get. So we just this. So that looks quite promising. So now we are done with upload to Mistral and we are after uploading a PDF file we are able to get the URL of that PDF file. The next uh we will add another HTTP request which is to get the OCR results. Okay. So now I will just go over here and to get the OCR results I will just copy this port from here G upload a file get get OCR zone. So I will just copy this code from here. [Music] So I will change the method of P of I will just add the O. So now you can see over here again I will just send the generic credential type header O uh MR demo and here we have send headers. So I will just close this up. And here we have the send body using JS body content type JSON set specify body using JSON. Okay. And over here we'll just pass the document URL. So that should be So that looks quite promising and this is what we require. Okay. So we can just delete this response section from here and option we don't require options. Okay. So after extracting the text from the PDF file, we need to uh send that text back to the screen read application. So I will just add another web hook over here respond to web hook. So this return data for the web hook. So we will just uh don't change any settings or parameters. We will keep it by default. Okay. So now you can see that we have we are completed the an workflow. So now I will just go to the pycharm and create a new project over there and I will now write the code to create a stream web application where the user will upload a pdf file and uh then we'll extract the text in the back end we will use naden and mr API to extract the text from that PDF file and you will then send the text back to the streaml application. So we can execute this workflow but currently it will not generate any response uh because once we upload the PDF file in our stream application and then we get the PDF file over here and then we'll able to extract the text and then we will send the text back to the screen read application. So let's go to the uh stream application part and write the code to create a string read web application. So here you can see that I have created a project in PyCharm community edition and you can see that I have only in the requirements txt file we only require uh one package that is streamlid and now I will just start write the code and create a streaml web application where the user will upload a PDF file and then we will call the nine workflow and we will extract the text from that PDF file using visual OCR API and then we will say that extracted text into our streamlate application. Okay. So let's start writing that complete code over here. So first of all uh we will import all the required libraries over here by import stream as ST we will import requests will import Jaw. Okay. Now we'll add title for our streaml application. For this I will just write st.title and I will just write PDF OCR using ministral plus naden. Okay. Next I will upload a PDF file. So I will just write uploaded file is equal to sd do.file-uploader file- uploader upload uh PDF and the type file type will be PDF. Okay. Next uh if the user uploads a PDF file. Next uh we will to perform the pre-processing where we will uh running the anoden workflow in the back end to extract the text from that video file using visual OCR API. So we'll be doing some pre-processing in the back end. Okay. So we'll send the PDF to Canaden web book as I told you. So I will just write files is equal to data uploaded file dot name then we have the uploaded file then we have the application as PDF. Okay. So now first we will add perform some try and uh here I will just add the N10 web hook URL. So you can replace this with your actual NAT web hook URL. I will add my own web hook URL. So I'll just write response is equal to request dot post and over here I will just add the naden web hook URL. So I will just go over here. Okay. So I will just I click over here listen for event. I will just click copy this from here. Stop listening. Go back. And here I'll just add this URL and I will write file is equal to files. Okay. So now I will just write if response dot status dash core is equal to 200 then what we will do is then we'll try data is equal to JSON dotload we convert the data into JSON format and we'll just write response dot text. Okay then we have the markdown test. We'll just get the markdown text from there by writing data pages zero and here we have the markdown text over here. Next I will just add a subheader. Okay. And in this subtractor we have the extracted PDF content. Okay. So we have the markdown as markdown text. Okay. Then we'll add an except condition. Except exception as parse error. We'll just add another error. So if uh we are unable to extract the text from the PDF. So we'll just write fail to parse OCR result. Okay. And here we will just write st.ext response dot. Now uh we can add in the else condition over here st error and here I'll just show the error from nan by just showing the status code so the user can identify what is the error and I will also display the response. responsext. Okay. And now I will just add another exception except exception as a and we'll just write sterror request error. So now you can see that we are able to uh we have created our screen web application. So let's run this now. So we just write streaml run app. So now I will just open this URL. So that's URL is already open. Okay. So first of all I will just go back to our NAL workflow that we have created. And I will just go back over here and execute this workflow now. Okay. And now I will just upload a PDF invoice over here. Okay. Catching passing doesn't have it from basic exception. Okay. So we have an error in stream application. Let's see what that error is. So let's find out. So I am getting an error over here. So it's files. Okay. So let's let's stop this and let's make this a bit clean. So now I will just open the terminal form here and just run the streamlate application again and hopefully uh there will be no error. So so now here you can see we have our streaml web application and first of all I will just go over any workflow and I will just execute this workflow now. Now now I will just click over here and I will upload a invoice over here now. So now I will just upload an invoice. So let me just upload this invoice and let's see if you are able to extract the text from that invoice. So now you can see that we are able to extract the data from that invoice like we have the bill to invoice details information. We have the item details. We have the conditions and instructions. So let me just show you if we are able to extract that correctly from the invoice or not. So I will just go over here and if I just go below down. So let me form. So you can see here we have the invoice. So now you can see over here we have this invoice that we have uploaded. So here you can see we have the build to information. Here we have the invoice details. We have the four items listed over here. We have the total $525 and we have a tax of $25. So now you can see we have a total of $525. We have a tax of $25. We have a tax rate of 5%. And we have I have listed all the four items over here. We have the bill to information. We have the invoice details listed over here. And in the conditions or instructions, we have no return and exchange. Okay. So that works completely fine. So let's upload some other PDF file. But before we upload a PDF file, let's execute this workflow from here. And let's upload some new PDF file. So I can just upload this uh invoice PDF file like this a onepage PDF. So let's see if we are able to extract the data from that PDF or not. So now you can see that we are able to extract the complete tables from that PDF file like you can see that's super like we are able to extract the complete tables like you can see over here. Okay. So now that looks completely impressive like you can see we are able to perform a speed comparison. We are able to extract all the t regular data as well. So in this tutorial we have created a stream web application where the user can upload a PDF file and we are able to extract the data from that PDF file using mistral OCR API and NAN in the NAN we have created a complete workflow that using ML OCR API extract the data from that PDF file and then we display that extracted text in group our streaml web application over here. So that's all from this tutorial. Thank you for watching.