API integration Course – Modern Python with FastAPI

freeCodeCamp.org · Beginner ·🔧 Backend Engineering ·1y ago

Key Takeaways

This video course covers API integration with Python using FastAPI, including building a real-time translation service with GPT-4 and integrating with PostgreSQL, JavaScript, and other tools. It also covers full stack development, event-driven architecture, and asynchronous tasks.

Full Transcript

learn modern web development with python and fast API by building five projects Zach is an experienced software engineer and in this course he'll teach you how to build apps using an event driven architecture that manages different tasks all implemented using fast API welcome to this modern python course we will be building web applications that utilize fast API and some other modern libraries that will help you build full stack development projects my name is Zach and I am a software engineer based in London I wanted to design a course that will demonstrate some of the modern usage of Python's web development Frameworks and I believe that with this type of project building you can really practice relevant portfolio skills that can help you progress your career in this particular industry before we dive in let's talk about what you need to know to get the most out of this course course you should have a basic understanding of Python Programming as well as some familiarity with some front-end Technologies like HTML CSS and basic JavaScript additionally a fundamental knowledge of HTTP networking is a requirement here as we don't really go into the details of how these certain protocols work we will review some of the key Concepts as they needed throughout the course since I wanted for this project to be useful for developers trying to learn their first job as a python backend engineer I implemented some of the more advanced topics like example of using multi-threading for dealing with asynchronous tasks when doing API Integrations if I could summarize the importance of this entire course in one sentence I would say that in a way you are building some kind of a event driven architecture and managing different tasks with in the implementation of fast API framework I did my best to to implement without too much redundancy things like database Integrations so that the coders here can get some hands-on experience with various apis and databases first we'll build a real-time translation service using fast API and gp4 this project will show you how to harness the power of language models to create an application that can translate text in real time for our second project you will learn how to create a tool that not only generates content but it also analyzes the sentiment the third project we use fast API and open AI where you will learn how to interact with external apis and process data to create a functional and useful web application in the fourth project we'll switch Gaz a bit and create an image to text web app with P Tesseract and flask you'll see how to integrate OCR technology into a web app to extract text from images and finally we'll wrap up with the KV app for downloading videos this project will introduce you to KV for building multitouch applications and you'll learn how to integrate it with virus apis to download video content I feel like these five projects will definitely help you use Python for some Modern application so let's get started and bring these projects to life we will build a translation service application it will be a web based tool designed to translate text into multiple languages for our backend we'll use fast API we'll have a database in postgress and for the translation we'll communicate with open AI CH GPT 4 model this is what the end result will be the user can input a desired text for the translation here and also in any number of languages that they want their text translated to they can hit translate and this will execute a post request to our API service and fast API will then try to communicate with ch GPT to provide a translation whilst this is happening we want to inform the user that we have received their request so it will return a 200 whilst is asynchronously processing the translation and waiting for that to come back so once the results have landed back onto our fast API app we want to display them dynamically without the user having to click anything so we will be building this event driven architecture and this is in my opinion the most important aspect of the video we also added a search functionality here which will allow the user to query the database and check the status of any particular translation order also by querying the ID they'll be able to check the content so they can historically browse through any of the previous translations so this is what the project structure will look like and it's pretty straightforward so this is our web app so it's our fast API fast API izing conventional file structure this will be our front end and almic will handle all the database migrations this will be our configuration files and because we in the end we will also create a Docker image for easy deployment so we are moving to our vs code now and we will start coding the project so you want to create your main folder and inside you want to create another sub folder we'll call it app inside of that folder you want to create your main py and this will be our fast API client now we will make sure that we have our virtual environment running let me zoom in a bit here you want to make sure that you're in your main folder and we will create a new environment once this is completed you want to activate this environment so we can install our dependencies so I'm going to use Powershell for that so you want to navigate into your requirement scripts and I believe here should be your activate. PS1 and once you see this prefix it means you have activated your virtual environment so now we can install our dependencies that we'll be using for this project so for that we'll create a requirements text file and I'm just going to copy everything that I know we need here keep in mind very important we have to use a specific version of open AI for this to to work so it has to be open AI 028.0 we also need a limic and now we can install all of the dependencies so you want to navigate back to your main working directory and you can type in P install our requirements.txt once this is completed I came back too quick oh it wasn't saved so you want to type in PIP install all requirements and once this is completed we can start writing the code so it might take a minute we can start writing something in our main py file from Fast API import fast API this is something we will use later on but you might as well do it now background tasks HTTP exception request and Depends we'll also import HTML responses we will import cost middle bear and to be able to render an HTML page we will import Ginger to templates with that being said we'll say that fast API is in our app variable and we can create a templates folder inside of this app folder so you want to make sure that you're in the right place go see the app make sure that you're type in PWD which stands for print workking directory you want to see that you're in app and then type in make directory templates inside of the templates we'll create our index.html file and for now we can just put in an exclamation mark to generate an automatic HTML file and we'll just say hello so we can test that our app is running and rendering a page so we want to Define our first endpoint to do that we'll start the with The Decorator and we will call our first path index and the response class will be HTML response called the function index and you can take in a request which is going for the request fast API library and it will return the rended version of the index HTML file so we'll say return templates template response so template response and we want to name our file that we want rendered and we'll give it the request to be the request that was passed on to our main function here so you can see that it's showing me the S template template is not defined so we need to make sure our fast API app knows where to find this file so we will have to set this up set up for new templates so we will say that our templates is and then we will give it the directory file path and that will be templates so this now is looking for the template folder which we have just created so typ of there we need a colum so if we run this now we should be able to see our index.html file on a local host so if you go to your terminal and you make sure that you're in your app folder and you type in uvicorn main colon app reload it didn't save restarting and we can see that it's running if we go to the browser and we type in Local Host give it Port 8,000 and index we can see this is what our index.html file has so if I was to save this put all these exclamation marks refresh this you can see that it gets updated so this means our fast API web server is running so we will go back to our index.html file and start writing some front end code to create the basic structure of this web app so this is our translation service that will be the title we can delete this and I'm going to add a bootstrap Link in the head segment so you want to do the same just have this copy pasted other than looking at the video and having to type all of this in the link just go to my GitHub the link will be in description and on index HTML file you can just find this link this particular link and copy paste it and you should do the same for the style as well so we're not going to do to explain the basics of CSS in this video this video is more about API integration especially with the new services like the J gpts AP and uh and it's pretty self-explanatory if you just read through it you will immediately know what everything does here so we're just defining some of these aesthetic properties for our HTML elements that we will build right now so we will create some kind of a nav bar at the top these will be the properties and we can add some kind of a text we say with the class bar and the top of of it will be translation service this can be anything you want really so next we'll open a new container and inside of this div will open a form so this is where the important part in regards to the front end comes starting our form that we will submit to our fast API for translation so we'll give label here to be for text to translate so this later on we will write our JavaScript functions within this one index.html file file that will do all the front end processing towards the back end the fast API so that's in my opinion another positive aspect of this project that you will actually write some backend with python and still touch upon the front end aspects written in Java Script as well there's no need for D and we type in that this is the text to translate when this and will close the label this will be the text area and we will give it a class form control I will give it the ID that to translate you can have four rows and we'll give it this placeholder and close the so just make sure you close this text area tag after giving it the placeholder to be end the text here close the tag we move on we want to close this div or not the form yet just a div we can copy paste this and just slightly modify it to now include the input for the languages that the user wants the translation for so it's again form group oh I forgot to put that on the top top as well just a second we don't want to move on without including that so you want to go back Above This translation form and in here we will give the form ID that's a double one so just this line was missing we are opening a form group here so we're doing that again now to include the languages input and after you finish with the placeholder you can close the tag and close the div and underneath of this there will be a submit button so it's just a button type button but the important aspect now is to just identify this point that the on click for this button will be a JavaScript function that we will write pretty soon so that'll be at the bottom of our file here and this is our form so we can close the form here just make that consistent there so now we want to write the HTML element for displaying the translation results so we'll create some space here for readability so this particular div will be the HTML element that displays the result make sure that you have the ID in this particular syntax here so pre ID translation results this will be important for the event architecture make sure that div is closed and we're starting a new div so this will be the progress container so as we said earlier we want to make sure that the process of translation and display for the user is being transparent towards the user so in case they have a very long file that they want to translate they'll have to wait for it we want to make sure that the user is aware that that request has been accepted it's in progress so this particular div will be a display function for that and it will include some kind of a visual representation of the progress bar and now we want to include our search functionality but before that let's see how this or HTML file looks so if we go back to our browser and refresh this it looks a bit messy at the moment this will all fall into place as we build rest of the HTML elements but we can see that this is a part of the N Navar bar at the moment we didn't close the main div that we open so everything is being chucked into the single at the moment that will that'll be sorted in a minute but we can see that everything else is in place so we'll just continue with our work so now we want the search functionality so we will open a new div here and add the text of check translation by ID so we want to be able to query the database and then return the state so keep in mind in my opinion the only important thing to really take away from this is that inside of this particular input or the form will be interacting with our JavaScript so the onclick functions for our buttons are very important and this is why we write here on click equals and then these two particular functions that we'll write at the bottom of the page right now so make sure that div is closed and we'll open a new div and this will be the translation status so we want to display the actual text from the database that the translation is still in progress or if it's completed and then finally we want to display if user clicks this button so the second button which will call the function that queries the database for the content of the translation this will be the div that will display it so when it comes to our HTML elements that's it we just now need to write the functions the JavaScript functions and we have pretty much completed our front end so we will open a script tag here and this is where our JavaScript will go before that make sure you get the links for the bootstrap that we're using for this front end so once again it's important that you don't just try to type what you're about to see by looking this video rather go to my GitHub the first link you'll see in the description and locate this file you will see then at this particular line that will be this we can align that back so make sure that you copy paste this from the actual file right other than trying to write it but by all means if you feel like it you can just retype it from the video so now we want to start writing our JavaScript before we type some JavaScript let's see how does the updated front end look now so if we go back to our browser and we refresh this still looks like a mess so we want to go back and make sure we find where I made a mistake and fix it so going back to our code this was our CSS move on so as I said we haven't closed one of the elements so everything got bundled I briefly talked about it but forgot to type the text so we'll close the nav bar here and go back to our browser and see yep there we go so this is our front end finished now and as you can see inputs for the users are here the translate button is here and everything then will be displayed underneath the translate button so now we can write the logic in JavaScript that will take this data so if I want to translate this is what I want to translate and in here I type in engl so it's already in English German and French if I click the button I want the translation to appear here once it's done but keep in mind in case the text is long and we will test that version as well where we are trying to translate a huge amount of text and it will take time I don't want to just have nothing happening what I'm waiting we don't want the user having to click anything or refresh the page manually themselves so just to make sure if if you do search for axio JavaScript you'll be able to get more information about this and what it does but as you can see it's a promise based HTTP client so by using it we'll be able to do requests so we didn't have to install it in npm because we are we put this link in our script so we are able to use it through that through the link of the script so we'll go back to our codes and we'll finish off the front end officially with the JavaScript functions that we need so we will do a async function we'll call it submit translation and we'll give it text variable that will extract the user's text by using get element by ID and we will give it the ID text to translate. Value so this will grab this text so from this HTML element and it will store it in our text variable so we can copy paste this and we'll do the same to have our languages stored uh as an array in this variable called languages so the different ID will be languages like so and we want to format this to be an array of strings so in here you want to do do split and a map that will trim it so just have a look at this text and rewrite it yourself because this is just a simple logic to do some formatting to have a comma separated array of strings for our languages choice of the user I want to write some logic that will prevent the user from submitting an empty input we don't want to query the database or just to create this unnecessary Network traffic to chat GPT if the user is submitting an empty text empty array basically so we'll say if not text languages length be zero and languages to have to be empty and then we'll write just to return an alert in the browser that will say please provide both text and target language and we can just return so I want to implement the progress bar if the user has to wait for a significant amount of time it's just nice to have this more interactive experience in terms of the interface the user is working with so we will create this progress bar and keep in mind this is not just about the visual about implementing something new and nice to see visually we also need to write our own logic that will synchronize the progress bar with the actual backend process so this is where axios comes in so handy and we'll make sure that these events happen happen in the same time in real time for the user we'll create some space here and we'll will Define our progress bar and we will say that this is document can get it by ID the ID will be progress bar and we'll do the text on the progress bar be the same but here with the ID change it to progress text and we want to make sure that the progress bar can get restarted if the user gives a new request so we'll say progress bar plus list and remove if it was successful like so and we want to add this primary and this will be style would give it the style width style. width to be for the style of 0% and then we'll also have progress. text that we want displayed and it will be text cont content soorry this doesn't have a DOT so delete that so progress progress text content and this will say that the translation is in progress so now we'll write the xos function that will execute the post request with the payload so we will say try this will be con response and it will await post and here will be the link of our endpoint which we will we still haven't built that so this will be what we'll do on our fast API file so we will call this Endo uh translate so after giving the endpoint open the C braces so we can give it the payload and we will say that the text is the variable text and the languages are the variable languages so oh this is not capital I don't know why I did that and we will close this so I made a typo here you need to go back to where I provided the endpoint link and delete these parentheses here so that we can close them here hope you can see my cursor make sure you close them here all right moving on now we'll Define the task ID to be to go into the response object and get the parameter of task ID and we'll give it the alert that will say that the task ID is and give it dollar sizing it's the task ID so the reason why we have this here keep in mind we said it'll be important for the user to receive a confirmation that the request that they've sent we have received it and we are processing it this is to cover the case where the input is large and it will take time to translate all of this and return it back to the user so we want to instantiate some objects here so we'll change the display so this will be the part that dynamically changes the display so initially in this process at this stage we want to set all of this to none so feel free to either pause and rewrite this from the video or go to my GitHub and copy paste this particular bit and then from here we'll say that translation result is null and the progress is zero and we will say whil progress is zero is less than 100 sorry and we'll write some logic saying await a new promise which will resolve through the timeout and we'll set time out at a th000 so by the way these are millisecond so this is 1 second so 1,000 milliseconds so with this polling technology we want to make sure that this is constantly awaiting the the response from the back end and it will check for that every second and then we will say that constant result response will be the get request and again we'll give it the Local Host the end point of translate and use this syntax to make sure that it gets the exact ID of the entry oh May the typo here so this needs access so we want to declare that our translation result then is the result response of data and writing translation result status then being changed to completed this will also mean that our progress has reached 100 AKA 100% or else we'll give this the interval of 50% so our Progress power will do increments or either zero meaning nothing has started yet if something is in progress it'll be at 50% and then the third state will be a complete state which is 100% so we say that the width of the progress bar in this case would be 50% so now I just wanted to add some extra visual components to it so we want to change the color to green and text according to the events that happen so we'll Target progress bar and once it's successful we can dynamically update the text by saying translation complete oh you want to write another document get element by ID this one will Target translation results and we want to stringify the the the data there and we will do another document get element by ID this one will Target the results and we want to make sure that this display now is set at block and we can close the curly braces and write hatch error statement and we can display this in our console so this is just for debugging in case something goes wrong error submitting translation and we want to see that error so we can display it there and we'll also give an alert in the actual browser and we'll say an error but while translating let's try again C braces are closed and now we'll we'll use another two functions so we want to add search functionality component and with this we can do this later so we don't want to forget that but we will have two functions so I'm just going to open the structure for it and we'll return to this so this will be our check translation Styles and for now we'll give it is there a pass just something that won't cause an error and there will be another one that checks for Content so it'll be check translation content so we will return to this data so I believe that should be it so all of our front end is completed other than the last two functions where we want to add the search functionality and we can deal with that practically at the end so once we actually have everything up and running we'll add this ability to go through our database and historically retrieve any of the completed or not completed translations so with that being said we'll move on to our back end so this is where we left off we defined the endpoint that through a get request renders an index.html page so the first thing that we will do is set up our database so you want to create these files now you want to do database. py you want to do models py create crud py and create schemas py now a good point to discuss how does this process actually work with the front end communicating with backend and what are the roles of these individual files here so if we go back to to do some drawing we'll go down here so I'm going to create some some boxes here and we're going to say this is our front end this will be our our database and this will be our fast API service so this is our back end so as you saw there is a particular input that the user will give us in the front end so this is the input just for the sake of this wonderful diagram I'm going to call I'm going to refer to this as a payload so instead of I is going to be P which stands for payload we already know that this payload will be text and language so text that they wish to be translated into these languages so this will be our payload we'll send this as a Json we have this HTML that allows the user to input this text to create this payload and then with the axio code that we written to execute a post request this post request will go to our fast API endpoint so more specifically that's the translate endpoint then we want our fast API service to First make sure that it knows what to do with this data and that it also can receive this data so this is why we created this schemas py so what we're going to do in the schemas py is to make sure that the data is validated so that it lands on our fast API service in a format that we can work with it as you saw we want to implement this search functionality by using idid so we will then write some logic that will take the payload from this point and store it into our database so I'm just going to mark that this payload has initially been given to the front end with a post request this payload now has reached the back end and then the back end gives it to a database so it can receive a unique ID so now this payload here will have some kind of an ID so let's just give it a random numeric value let's say this is now number four P4 so payload with an ID 4 we will have some further logic that will send the payload to chat GPT so this will be our external API here so we will say open API for translation so our fast API service will will need some logic that does that once that is returned we will have our fast API stored in a database so this flow now has another line we can say that once it reaches that place it needs to go into the database so initially this part was just storing the payload and giving it so it was ID and payload which was text and languages but on the second entry as you can see this blue line this becomes the translated payload and it will just be the text and then once this event has been confirmed there has to be some logic that will inform the front end of data that you originally sent to me as a payload well I've done what you asked of me and it's ready for you to use and then in that case the back end will deliver the payload payload with the ID and with the translation of the text so I'm just going to put TT translated text so then all of this can be displayed on our front end so this ugly looking diagram is an explanation of this event architecture so first things first something that I like to get out of the way and it's pretty much the standard for me in the development process keep in mind for deployment this requires a little bit more talk based on specific circumstances of how you want to deploy your project but for now for this project we want to make sure that once we do run it locally if we want to thinker around with certain things I don't want errors to come up so I'm going to make course not a problem immediately by adding this middleware so we imported that in the beginning of the tutorial and we're going to use it like this not the most important aspect of this video so we will move on so remember I want to have my endpoints for handling data so we'll say app. post and this is our main translate end point and we'll give it a response class oh sorry response model and we will have a schema for this so this will be the moment where we write our validations with pantic so stop this for a second and open your schemas piy file and in here you want to import pantic space model and you want to get from typing list and dictionary and we will have three classes one will be translation request test and it will inherit from base model and this will be the string of the text that the user has given us for translation and then the list of languages this will be a list of strings next is the task response this will also inherit from no base base model not base exception and this will be the ID that we are returning to the front end as soon as the request has been made lastly we have translation Styles and this will also get base model I'll have task ID integer status string and translations should be dictionary of strings so these are our schemas and the purpose of them will be to valid the data to make sure that the data before getting processed before we assign it all sorts of work to do is in the format of how we want it to be so you can close your schemas pii that's all we're going to do with that I'm we think before we deal with the rest of the schema implementation you also want to create a file here called init oh in case then you want to have a different way of importing for example instead of saying here import schemas we'll be able to import from schemas and then give it the exact names of the requests so in order for that to work you would need this init file but even if you leave it just with import schemas all of the schemas would work that's up to you now for your preference so we want to make sure that the incoming data which is a part of our request variable here so that's our p Lo is validated by by our translation request schema and then what we returning is Task response schemas so if I open a second tab here just for you to have a quick look the incoming payload is going according to the request so the input from the user which is text and the languages they want translation in and the task response will just be the ID so all that will send back to the user is the ID keep keep in mind this goes along with what we decided to do that once the user has clicked translate this for me what they will receive immediately is a 20000 or this is your process it has an ID and once it's actually processed and the bar reaches 100% you will get a translation so that's the reason why we have this schema order so after we have defined the schemas we can move this we want to start modifying how the database will be set up and how this CR system operations will be done so the pseudo code for it would look like something like defining that within our task we will have a crud file that will hold all of our operations all of our methods for doing create read update delete operations and we will call this function we can call it create translation task so we don't have this yet but we will create it in a second and this function will have certain parameters so we can have two parameters three parameters because it will also have the languages XY z p then we will add it to the background tasks and this is something that I believe is fundamentally important to understand in order to proceed so we will go to the browser and read something about the documentation so I just want to make sure that you know where to look for to understand this particular technology so if you go on Google and type in fast API documentation and in the search bar you want to look for background tasks so this is where you'll be able to find all the documentation related to this particular concept can use it to schedule the execution of background tasks after the response is sent and you can pretty much see where where I'm going with this so I want to be able to have my web app process these asynchronous tasks so by all means if you need any further familiarization open this particular document and you can find all the details you need there in the meantime now we'll go back to our code so we want to now add once we are creating the translation so this is our create translation function which we still have not created will create it now we are going to add to the background tasks task we'll do perform translation askask ID and the request variables so request text and request languages and we'll pass the B again and we will return as we said the return schema as we said for what we decided to return to the user would just be the ID so now to create we don't need this so so now to create these methods so we want to go in our Crow file and create this method for creating translation task and then we're going to deal with our perform translation method for our background tasks so we can copy this and we'll go into our crowd file and from here you want to import Q Alchemy M at the session and we will import models because this is how we will fill out our tables but we'll build the database after this first let's define this method so you can copy paste the name and this will be this will have a connection to our database and it will take as we said it it three parameters database and then the payloads components so this will be languages which is a list and we want to say the task is a models translation task and languages are languages so after that we want to go into our DB session and use it to this to the base every time you do that you need to do commit and refresh so this is how SQL Alchemy this particular RM handles this this will be always a part of any CR operation but I'm going to pass the task here and say return task then the second method we want is the method that will fetch the translation task it will also able to go into the database and work with the ID that's an integer and it will just return the qu according to the ID that we pass it so it will go translation task and you want to pass this so models translation task ID so find the models that has the ID same as the ID that we passed in this parameter and return the first TCH and then the last thing we want in our croud operations methods will be to update the translation task so once again this part will be the same so I can copy paste this from above but this now Returns the translations as well so if you remember when we actually had our diagram I'm going to pull it up so you can see exactly where and this method where they appear on our diagram so take it in mental memory for now this is Method number one and this is Method number two so if you remember our not so good-looking diagram here we were talking about the backend processing this particular payload so the method number one is the payload that has the text and the languages as a parameter so they will still share the same ID the red text here and the blue text here representing two different aspects that work within the same table so this is all one table but on two different instances we are doing a either create or update request to it so in the red one which corresponds to our when I said red I'm referring to this line here it corresponds with our first method here create translation task and this line and so this particular secets of event here is just updating the translation so adding the translation so that's the update and it needs the ID parameter to know where to add that translation to because it's returning after so these are two separate events that are operating in the same table so as you can see we need to pass task ID so that it knows how to find the table where it will check in is the translation of this text here from the first function and in the Lang ages of the first function so I hope that's clear and that's quite important to understand for this particular type of system so we'll say that the task it can go and find according to the ID so it will filter models and it will be the same way of quering like the one above and then we want to say to translations and the status now changes to complet it and again after every CR operation you want to do commit and refresh and return task that's that's it for our crowd operations we won't have to open this anymore I believe now we want to create our database so we're going to talk about how to set up this database and create our table so first you want to go into your database. py then here you want to import OS you want to import create engine from SQL Alchemy session maker and in order to keep our varibles safe the ones that contain sensitive data that's important here you want to import EnV load. EnV so we will load this. EnV and what this means so what that means you want to go in the main directory so if you go print working directory inside here so you want to make sure you are in your main working directory so outside of the main app folder and we will do touch. EnV and in this file we will have our database URL and we will have our open AI key so for now you can leave this empty but this will this will be the file that we hold your sensitive information and then we're going to load this file with our dependency here EnV so that will allow us to say OS using the input OS Library get EnV and then particular variable called database URL which is which you can see corresponds with this here so this is the way you keep it safe then below that you want to say that the engine is create engine and we will pass the parameter of the previously defined connection string sensitive information that we stored in ourv file so it travel all the way through this in such Manner and lastly we want to add the session maker I'm not sure does this have to be here but for now let it remain I doubt that it can hurt so that's all we need for our database. py we'll move on to our models.py where we will be defining our table so you want to import these from SQL Alchemy so column integer string text and Json those will help us create different types of data types in our database and then after that you want to get Clarity base from this particular dependency also SQL Alchemy so here we will call Base Clarity base and now we will create our table so we'll say that the translation task creates a table called translation tasks and now we will actually Define all the the rows so we'll say that the ID is a column which will be an integer and a primary key true and we'll have text which is type text nullable false so it can't be empty and we'll do that for languages but languages will are a list so that will be adjacent here and there will be status which is a column string and the default is in progress so if you remember we only had to in our CR file we only had to have an alternative of can be change to completed now because here we can set the default to be in progress and then we are adding the translations finally that's a Json and the default is just an empty Json and that's our models py I don't think we will need to go back to this but I'll still leave this open because I might have to talk about it a bit later so now we can go to our main.py and write a cleaner version of this so you want to go to the top and import the CR file and now this function actually exists we just created it so we can pass the genuine parameters so this will be the database this will be the the text parameter of the request and this will be the languages parameter of the request so the only thing missing Within These parameters is our DB so you will go here above the course and we will Define this function actually we can Define this in our database file so we can say ITB I'm sure you can copy paste this just from the fast API documentation but I have it here in front of me as well and we can say try yield this DB so this now turns into a generator TB close and then we will import this so if we go back to main py we can say from database import now we should be able to use this if we say DB so now moving on to our background tasks so for this we'll have to write some utility functions so these are the functions that we want to give to our background tasks process to handle asynchronously oh we want to make sure that this is called the same is get DB so we want to create a new file here we'll call it utils.py and what we're going to do now is create this function that will perform the translation but before that there is one thing that I forgot we want to make sure that a database is created so if you go here above app you want to paste this part so you want to say models. base metadata create all and then bind the engine and we will import models and also from database we want to import the engine so now once we start the main file each time my fast API loads up the server it will make sure that a certain B database exists and that a table that's defined in our models exists if it doesn't it's going to create it so next thing we'll do is create our database in PG admin 4 I'm not going to insult your intelligence by showing you how to download PG and admin 4 from internet just Google it download it configure it you will get a username and a password once you configure it and then you will see in your server cluster you can create a database by clicking right click on databases create database and give it a name so I'm going to give it the name translation service you'll just click save and that's it you have your database if you go under schemas and tables if you click refresh here you'll see that there are no tables which is good we will create that from Python and this is the beauty of using an orm which is SQL Alchemy in this case so so what we have to do is Define it here and uh this particular table name with this name will be created once we load our server so in order now to connect your database to this particular project you want to go in your EnV and your username and password will go here this is the address and this is the name of the database so once again here you're defining what SQL here you are giving the username this is the password this is the address and obviously we're working locally so this is Local Host if you're deploying this project these are be these will be credentials of your actual provider and then the translation service is the database so this is the database name over there so this is pretty self-explanatory I have no doubts that you can configure this successfully once you have done that you will go back to your vs code we can delete this and now we are ready to launch our server and this should automatically create our table as well so if you go in the main folder and run this line one think before I move on we need to also make sure that we installed this so I've added I've added it in our requirements.txt but if you need to individually install it do pip install this particular Library the last one here so after You' done that you go your terminal working directory and you run your recall main app reload so everything is running and now if you go back to your PG admin 4 and refresh the tables you will see that the translation tasks table has appeared so now we know that our database is connected our server is running and we can finish the back end by writing the utility functions so just to remind you of where we are if you go into your main.py you'll remember that when we were writing our endpoint we Define this background tasks process and the task that we added was supposed to be a function called perform translation so now we're going to actually write that function that method in our utility. py so here you want to import open AI from SQL Alchemy RM you want to import session to be able to connect to the database from our croud file you want to import the updat ration task and from our environment you want to import load function and also OS here we will pass the API key for open AI we'll use OS to fetch the environment and we will say that this variable is called open AI API key to make sure this is connected you have to go in your EnV file and you have to put in a API key in a variable called open API key like such I'm going to do that off screen so you just copy paste your open API key here or any other llm you want to use but I'll be using open API so once you do that you click save and we move on so when you finish setting up your environment for sensitive data we can write our function so we'll say that perform translation exp parameter of task ID so the integer and the text is string and languages will be a list and we also want to get DB session we will say that translations are an empty dictionary and write a for Loops saying for each element in the languages list by giving in the response open AI chat completion and create model will be gp4 and the messages will be a list an F string that says this or a helpful assistant that translates text into and then the language of each language that'll work and underneath that we'll do roll user content and then the text we give a coma here and we'll say that the max tokens are a th000 but you can adjust this based on your own needs so then we will get the translated text and we will give it in the respond so that's a zero and here we'll write some formatting because we're dealing with a list and we'll give our translations then of each language to be translated text and we're going to we want to do some debugging as well oh in the meantime I forgot you want to go above and load the environment variable and here I made a typo so this is Max tokens like such and now we will write this exception so our exception will print that if there was an error we will get the error back so we can see and we can play around with this if we end up actually having some errors but for now just leave it as such and now we want to call this function the update translation task so if you click on the update translation task and click F12 it will take you back to your Crow file so you can remind yourself of what this actually does so we have already written this function we are just invoking it here now to perform that task so we will say update translation task it will have a parameter of DB to connect to the database and then update the database by finding the particular ID and inserting the translations into the table so we save this and we just now need to finish our end points and that'll be the end of our back end so I'm just going to clean this up a little bit we'll take the core stuff and just put it above our end points so I forgot to pass the background tasks as a parameter so in our translate function here we want to add the background tasks so I've inserted here between the schemas and the DB session so add the to be background tasks with the capital B and then we want to add the connection to the database so we will say that variable DB is session depends get DB and then we don't need this get DB variable so in this line 43 delete get DB and do the same for this line 42 in task first thing after parenthesis delete this as well and now we need to import session so if you go on top and we do from SQL Alchemy import session and that's sqlalchemy.orm import session so we will now write the utility functions for our search functionality and this will be fairly similar so it will be a get request so I copied the previous endpoint I'm just going to modify it so this one will go this get request will have a task I the parameter and the schema is not going to be task response delete that and put translation status delete all of these parameters other than DB and here we will pass in task ID to be an integer and then just have the connection with the database here in the task we'll go into our Crow file and we will get I feel like there's a typo here but we can still get the exact text so get the Translating task DB task ID this line of code we can delete and underneath the task we'll say if nothing returns in task or or better said if task returns empty so if task is null we want to raise an exception so we'll put in HTTP exception and we'll give it the status code of 404 with the detail of task not found but if task is not null then we want to return task ID and the status which is the task. status so it will access that parameter and return entry from the database and the translation will be the variable translation so again we'll access the task translations and then we want to do practically the same thing but for Content so this particular endpoint will correspond to let me show you exactly what so it will correspond exactly to check status button and then now we're going to write a function that will be an endpoint that gets executed once we click check content so we can copy this and we'll slightly modify we can change the endpoint address so we'll say that this is Content slask ID and I forgot one thing we want to change the name so it go back to the previous function for me that's line 60 and here we will just say get translate because they have to be called differently the first one is called translate the second one then should be called get translate and the third one can be called get translate content something like that as long as they have unique names it's fine and this will remain all the same the task line will also remain the same and this will remain same as well but when we return we do not need to return the ID we just want to return the task Al together a

Original Description

Learn about API integration with Python, plus full stack development. The technologies you will learn include FastAPI, third parti API's integration, PostgresQL, JavaScript, and more. ⭐️ Projects ⭐️ ➡ 1. Real-Time Translation Service with FastAPI and GPT-4 Code: https://github.com/zakariyahali/translation-service-final ➡ 2. AI-Powered Content Generator and Analyzer with FastAPI Code: https://github.com/zakariyahali/sent-analysis-start Finished project: https://github.com/zakariyahali/sentiment-analysis-app ➡ 3. FastAPI and OpenAI API | Build a Lyrics Extraction Web App Code: https://github.com/zakariyahali/lyrics-start Finished project:https://github.com/zakariyahali/lyrics-extract-final ➡ 4. Image to Text Web App with PyTesseract & Flask Code: https://github.com/zakariyahali/image-to-text-buildit Finished project: https://github.com/zakariyahali/image-to-text-app ➡ 5. Kivy app for downloading videos Code: https://github.com/zakariyahali/yt-download-app Zak on LinkedIn @ https://www.linkedin.com/in/zakariyah-ali/ Zak on YouTube @ https://www.youtube.com/@1stcode ❤️ Try interactive React courses we love, right in your browser: https://scrimba.com/freeCodeCamp-React (Made possible by a grant from our friends at Scrimba) ⭐️ Contents ⭐️ ⌨️ (0:00:00) Intro & breakdown of course projects ⌨️ (0:03:07) Real-Time Translation Service with FastAPI and GPT-4 ⌨️ (1:10:27) AI-Powered Content Generator and Analyzer with FastAPI ⌨️ (1:43:57) FastAPI and OpenAI API | Lyrics Extraction Web App ⌨️ (2:28:08) Image to Text Web App with PyTesseract & Flask ⌨️ (3:09:32) Kivy App for downloading videos
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from freeCodeCamp.org · freeCodeCamp.org · 0 of 60

← Previous Next →
1 React: Production Server Setup Part 2 - Live Coding with Jesse
React: Production Server Setup Part 2 - Live Coding with Jesse
freeCodeCamp.org
2 cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
cookies vs localStorage vs sessionStorage - Beau teaches JavaScript
freeCodeCamp.org
3 Browser history tutorial - Beau teaches JavaScript
Browser history tutorial - Beau teaches JavaScript
freeCodeCamp.org
4 Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
Graph Data Structure Intro (inc. adjacency list, adjacency matrix, incidence matrix)
freeCodeCamp.org
5 React: Parameterized Routing with Next.js - Live Coding with Jesse
React: Parameterized Routing with Next.js - Live Coding with Jesse
freeCodeCamp.org
6 React: Dealing with jQuery Issues - Live Coding with Jesse
React: Dealing with jQuery Issues - Live Coding with Jesse
freeCodeCamp.org
7 setInterval and setTimeout: timing events - Beau teaches JavaScript
setInterval and setTimeout: timing events - Beau teaches JavaScript
freeCodeCamp.org
8 Browser and Device Testing - Live Coding with Jesse
Browser and Device Testing - Live Coding with Jesse
freeCodeCamp.org
9 Last Minute Updates - Live Coding with Jesse
Last Minute Updates - Live Coding with Jesse
freeCodeCamp.org
10 Post Launch Updates - Live Coding with Jesse
Post Launch Updates - Live Coding with Jesse
freeCodeCamp.org
11 React: Setting Up Google Analytics - Live Coding with Jesse
React: Setting Up Google Analytics - Live Coding with Jesse
freeCodeCamp.org
12 React: Masonry Layout - Live Coding with Jesse
React: Masonry Layout - Live Coding with Jesse
freeCodeCamp.org
13 Load Balancing Digital Ocean Droplets - Live Coding with Jesse
Load Balancing Digital Ocean Droplets - Live Coding with Jesse
freeCodeCamp.org
14 try, catch, finally, throw - error handling in JavaScript
try, catch, finally, throw - error handling in JavaScript
freeCodeCamp.org
15 Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
Load Balancing: SSL Passthrough Setup - Live Coding with Jesse
freeCodeCamp.org
16 Graphs: breadth-first search - Beau teaches JavaScript
Graphs: breadth-first search - Beau teaches JavaScript
freeCodeCamp.org
17 React: Masonry Layout Part 2 - Live Coding with Jesse
React: Masonry Layout Part 2 - Live Coding with Jesse
freeCodeCamp.org
18 React: WordPress API Live Search - Live Coding with Jesse
React: WordPress API Live Search - Live Coding with Jesse
freeCodeCamp.org
19 Creating WordPress Custom Post Types - Live Coding With Jesse
Creating WordPress Custom Post Types - Live Coding With Jesse
freeCodeCamp.org
20 Dates - Beau teaches JavaScript
Dates - Beau teaches JavaScript
freeCodeCamp.org
21 Miscellaneous Front End Updates - Live Coding with Jesse
Miscellaneous Front End Updates - Live Coding with Jesse
freeCodeCamp.org
22 Merging a Pull Request from GitHub - Live Coding with Jesse
Merging a Pull Request from GitHub - Live Coding with Jesse
freeCodeCamp.org
23 React + Prettier + Standard JS - Live Coding with Jesse
React + Prettier + Standard JS - Live Coding with Jesse
freeCodeCamp.org
24 React: Sortable Responsive Table - Live Coding with Jesse
React: Sortable Responsive Table - Live Coding with Jesse
freeCodeCamp.org
25 Geolocation Sorting by Distance - Live Coding with Jesse
Geolocation Sorting by Distance - Live Coding with Jesse
freeCodeCamp.org
26 Tradeoff Matrix - Agile Software Development
Tradeoff Matrix - Agile Software Development
freeCodeCamp.org
27 The Definition of Ready - Agile Software Development
The Definition of Ready - Agile Software Development
freeCodeCamp.org
28 Getting first React job without experience - Ask Preethi
Getting first React job without experience - Ask Preethi
freeCodeCamp.org
29 React: Google Analytics Click Tracking - Live Coding with Jesse
React: Google Analytics Click Tracking - Live Coding with Jesse
freeCodeCamp.org
30 Submitting a PR to an Open Source Project - Live Coding with Jesse
Submitting a PR to an Open Source Project - Live Coding with Jesse
freeCodeCamp.org
31 Should I go back to school to get CS degree? - Ask Preethi
Should I go back to school to get CS degree? - Ask Preethi
freeCodeCamp.org
32 Hero Section CSS Changes - Live Coding with Jesse
Hero Section CSS Changes - Live Coding with Jesse
freeCodeCamp.org
33 Working Agreement - Agile Software Development
Working Agreement - Agile Software Development
freeCodeCamp.org
34 A day at Pennybox with Co-Founder Reji Eapen
A day at Pennybox with Co-Founder Reji Eapen
freeCodeCamp.org
35 React: Sorting and Filtering Data - Live Coding with Jesse
React: Sorting and Filtering Data - Live Coding with Jesse
freeCodeCamp.org
36 React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
React: Sorting and Filtering Data Part 2 - Live Coding with Jesse
freeCodeCamp.org
37 React: Building a New UI - Live Coding with Jesse
React: Building a New UI - Live Coding with Jesse
freeCodeCamp.org
38 Definition of Done - Agile Software Development
Definition of Done - Agile Software Development
freeCodeCamp.org
39 Getting started with jQuery (tutorial) - Beau teaches JavaScript
Getting started with jQuery (tutorial) - Beau teaches JavaScript
freeCodeCamp.org
40 Making a React Blog with WordPress Content - Live Coding with Jesse
Making a React Blog with WordPress Content - Live Coding with Jesse
freeCodeCamp.org
41 React, NextJS, CSS - Live Coding with Jesse
React, NextJS, CSS - Live Coding with Jesse
freeCodeCamp.org
42 jQuery events - Beau teaches JavaScript
jQuery events - Beau teaches JavaScript
freeCodeCamp.org
43 React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
React/NextJS Routing and WordPress API Custom Types - Live Coding with Jesse
freeCodeCamp.org
44 React: Working with API Data - Live Coding with Jesse
React: Working with API Data - Live Coding with Jesse
freeCodeCamp.org
45 React: Refactoring Components - Live Streaming with Jesse
React: Refactoring Components - Live Streaming with Jesse
freeCodeCamp.org
46 jQuery effects - Beau teaches JavaScript
jQuery effects - Beau teaches JavaScript
freeCodeCamp.org
47 More React Refactoring - Live Coding with Jesse
More React Refactoring - Live Coding with Jesse
freeCodeCamp.org
48 animate in jQuery - Beau teaches JavaScript
animate in jQuery - Beau teaches JavaScript
freeCodeCamp.org
49 "Finishing" My React Site - Live Coding with Jesse
"Finishing" My React Site - Live Coding with Jesse
freeCodeCamp.org
50 Starting a New React Project (P2D1) - Live Coding with Jesse
Starting a New React Project (P2D1) - Live Coding with Jesse
freeCodeCamp.org
51 React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
React Project 2 Day 2: Learning Material UI - Live Coding with Jesse
freeCodeCamp.org
52 The Agile Manifesto - Agile Software Development
The Agile Manifesto - Agile Software Development
freeCodeCamp.org
53 jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
jQuery: get and set with http, text, val, and attr - Beau teaches JavaScript
freeCodeCamp.org
54 React Project 2 Day 3 - Live Coding with Jesse
React Project 2 Day 3 - Live Coding with Jesse
freeCodeCamp.org
55 The INVEST approach to product backlog items
The INVEST approach to product backlog items
freeCodeCamp.org
56 React Project 2 Day 4 - Live Coding with Jesse
React Project 2 Day 4 - Live Coding with Jesse
freeCodeCamp.org
57 Chickens and Pigs - Agile Software Development
Chickens and Pigs - Agile Software Development
freeCodeCamp.org
58 React Project 2 Day 5 - Live Coding with Jesse
React Project 2 Day 5 - Live Coding with Jesse
freeCodeCamp.org
59 jQuery: add and remove DOM elements - Beau teaches JavaScript
jQuery: add and remove DOM elements - Beau teaches JavaScript
freeCodeCamp.org
60 React Project 2 Day 6 - Live Coding with Jesse
React Project 2 Day 6 - Live Coding with Jesse
freeCodeCamp.org

This video course teaches you how to build a real-time translation service using FastAPI, GPT-4, and PostgreSQL, and how to integrate LLMs with full stack development. You'll learn about API integration, event-driven architecture, and asynchronous tasks, and how to craft effective prompts for LLMs.

Key Takeaways
  1. Build a real-time translation service using FastAPI and GPT-4
  2. Create a full stack application with API integration
  3. Integrate LLMs with PostgreSQL and JavaScript
  4. Use prompts to integrate with external APIs
  5. Create a prompt-based interface for a full stack application
  6. Engineer LLMs for real-time translation tasks
  7. Integrate LLMs with databases and external APIs
  8. Create a scalable LLM-based full stack application
💡 Integrating LLMs with full stack development and API integration can create powerful and scalable applications.

Related AI Lessons

Up next
This Cop Was Held Accountable For His Brutality! #police #lawyer
Hampton Law
Watch →