Laravel and OpenAI API - Build a simple application

greetings and in this video we're going to create a really simple larval applications that will work and open AI API so let's begin as a first step it will be creating a new laravel application so let's type here composer create a project and you can use lateral CLI if you want to create a new project but I prefer to use composer command to do that so I will type here that I want to you create a new project with laravel framework and I will name my project maybe lateral open AI so let's create a new project and let's wait until everything will be generated and also I want to say that in this tutorial we're going to use inertia.js in front-end part of the application and also before we gonna start building the application I want to show you open AI platform so you will need to register here your account you can do this with Google or you can just you know register your accounts with the mail and after that when you will register your account you will need to go to Personnel so as you can see here you have your avatar and information about your account and you will need to click VF API keys and here you will need to click on create a new secret key and this is keys that I will use in this tutorial so I will copy this and after I will finish record of this tutorial I will delete this game so yeah now let's open our terminal and let's open our project in Visual Studio code and we will doubled everything that we need for this tutorial for inertia.js I mean and DLC forget to open my project in terminal survival type laravel open Ai and after that I will type code the dot so my project successfully open it in Visual Studio code and let me now show you everything that we will need to install for inertia.js so to use openai API we can use two solutions so for example we can use open AI PHP client that I will show you here so as you can see this is GitHub official page open AI PHP client and we will try to use this client already work with this client and there is nothing hard so for example as you can see you will need to import your client and you will need to get your API key after that you will able to make requests by this way so for example here we type that we want to use DaVinci model we can use Query or add a model or other models that are available in open AI API and after that we type in our prompt and after that we will get result from the openai model so let's install this client let's open Visual Studio code and let's type here this Commons so composer require open AI PHP client and yeah this yeah so this installed successfully so that means that now we can create here a new controller so let's type here um PHP art design made controller that will be named for example I don't know openly I know it's bad name so maybe let's type here um AI controller okay and yes this controller created successfully so so that's means that we can now open this controller and let's go back to GitHub page of the open AI client as you can see here we don't have any instructions how we can import these clients so I think that we can use the next solution for this so let's copy the name of the class and let's go here and we can just type here use backslash so use backslash open AI NZ this will find automatically open AI clients that we installed with composite dependency here let's type index and now let's copy example from the GitHub page so we will copy this example okay and let's paste it and here let's type our API key that I'm using in this lesson so as you as I said you can create a new way back key on official website in on platform.openei.com and on the with API Keys page okay so let's format this code and I will use here text DaVinci model and let's try to make this prompt maybe not PHP so let's type here for example Bitcoin is and yeah I think that's all and now let's go to Rhodes web.php file let's import our AI controller so let's type Here app HTTP app HTTP controllers AI controller and let's type that we want to call index function when we go to home page and now let's type here phpr design serve okay let's copy this and now let's open our browser now we can go over here and type this page and let's see what we will get yeah also we will need to wait some time because uh when we making requests to open AI we need to wait because uh model to need process process our request but I think that we will get error because we just try to import our open AI class with backslash but I think that will that this will not work so we can get back to visual studio code and we can just first let's try to remove this and let's try to use backslash here maybe maybe this will there's ever been of any difference and as you can see our request working so as the first system of cryptocurrency is the first to use blockchain technology yes so we get response from text DaVinci model for our question Bitcoin is so let's try another question maybe we can type ethereum is yes so what is ethereum now let's refresh it and we will send requests by this way to open AI a bad and as you can see we get answer to our question so this is second highest cryptocurrency after the Bitcoin in terms of market capitalization yeah also we can configure that we want to get uh all response or we can just get some short response by default as we see here okay so now it's time to install everything that we need for inertia so I was maybe yeah I will create here a new terminal and first I will install all the pen and this is that I need for the server side and after that I will install all dependencies that I need for the client side and also in this tutorial I'm going to use vgs and we will work with our API of the application but maybe yeah we don't need to use API create to create a API for this application because inertia.js can work with our roads without axios or any other functions that libraries that are used to make API requests on the client side so let's install all dependencies that we need so first we will need to install in rcgs composer dependency and to do that we will type here composer require energy GS inertia lateral and now let's hit enter let's wait until this dependency will be installed and after that we will go to kernel.php file and we will need also to generate middleware for our in rcgs and as you can see I copy this from the official documentation of energy so you can use this to copy all these comments and dependencies that we all need to install and after that I type HPR design inertia middleware so middleware successfully generated so that means that I can now add this middleware in web groups in kernel.php so let's go here let's save it and let's go here and let's copy these files that we will use for the root root blade template so let's open here resources views folder and let's rename this to app app Dot blade.php and let's pass this code and also we can include here a code from the CSS folder from the app.css and also in this tutorial I'm going to use vgs to compile all the squads and yeah also we will use here pgs whitejs plugin so let me first let me get this plugin you know on the official npm website so let me show you this so as you can see we have here a vgs plugin View and we will need to install this but before we gonna do this let's go to client-side installation on the official documentation of the inertia.js and here we will copy all npm commands and also code for the app.js file so first let's go here and yeah we both need to install this dependency by using npm so let's type here inertia Studio 3 view and tell us so name of the VJs view plugins so let me test this package so vgs plugin view okay great let's also yeah okay now let's hit enter and let's wait until uh installation will be finished but before we gonna get back to visual studio code let's copy This chords add to initialize the inertia app and now let's open resources JS and app.js and let's pass this code let's save it and also we don't need to use bootstrap.js file server will delete this file and here we will need to create a new folder that will be name Pages folder and as you can see here we have resolve function and this function is used to get components vue.js components that will be saved in Pages folder and here we can create say our first component that will be named index.view and let's type here template script setup and here just we can just for now let's type hello or yeah so hello world okay and now let's go to vidconfig.js and we will nav to we will need to import here uh plugin that we installed for vgs for view so we type here import view for vgs plugin View and here we have plugins object we will need to type that we want to call view function and I think that's all maybe I'm talking so fast but if I talk very fast you can just make a change speed of this video and maybe it will be better for you okay so now let's go to index.u but no not index.view let's go to AI controller and here I want to grab all these codes and create a new function that will be in process maybe not process it's better to say make request and let's pass this scope code here and it will return response and here we will render in index function we will render components that we created and inside Pages folder named index.view and also let's import here inertia class that will be used to render this component so let's type here render and we will need just to type uh name of the components that we want to render and in our case this is index.view that we successfully created okay and now let's open browser to check that everything's works so let's refresh it and as you can see we have one error white manifested files that means that I forget to run a command and PM run Dev so let's type here here npmram Dev and we just will compile our JS code and view code so let's refresh it and as you can see now we have hello world and that means that if I now open my videos plugin I will see that I have index components so that's really great and that means that now we can make our example so let's close app that plate file and also app.js file let's go to index.u and here I will need to to import use form function from the uh view inertia inertia V3 I mean and here let's type form equals use form and let me Define let me tell you what this function do by using this function you can create a new form in inertia.js uh in some components for example in our case we creating a new forms that we will use to send data to our AI controller and here I can Define fields that will be inside this form and we will have only one field that will name prompt and it will be empty by default and here let's create a new form and maybe we can just we can now type changes this title and let's type here your prompt your prompt okay and here we will need to Define submit events so submit prevent and when we will submit this form we want to make requests uh post requests to road test it will be named uh AI request so AI requests or maybe cycle the name maybe it's better to say just AI so we will need to create this first road inside web.php file and it will be named Ai and when we will call this request our AI controller will call functions that we already created and this is make request function okay let's get back to AI controller because here I need to create say request variable to get the itself from the form and here we will type our prompt so we will just type here request prompt and in this tutorial I don't make any validation we just building a simple app this that works with open Ai and now let's get back to index.view and here let's create a new input field uh with type text and let's define model of this of this remodel of this field and it will be form prompt and just to test that this Pro this v-model works we were we're going to render here uh form dot prompt so we will get and render this field so let's try to enter here and as you can see our prompt we change it prompt fill let's change it so that's great so let's get back again here and let's create it here now submit buttons that will that will make requests to our AI controller and after that when we will get some requests uh we are going to get uh we're going to show off this answer so we can now type submit of the type of the button submit and we can just type here sent request and maybe some people have questioned well how we can get uh answer from the form and I think that will be not a problem but for now let's try this example so be prepared everything that we need to test this form so let's refresh it and now let's make a question to ask questions to our text DaVinci model and maybe it will be what is Cambodia okay and let's click Send request and as you can see we have progress bar let's wait uh when requests will be processed maybe we will get some error or maybe everything will be fine so let's wait until we will get a response from the open AI API and yeah it's it can take some time so let's wait okay so I wait uh some time some seconds and I don't get response so that means that we will need to go to our AI controller here let's change this to a DDD so DDD choices text let's save it and tell so let's check our storage logs and let's see that maybe we have some errors here so let's see white mini fast not found white benefits and stuff so yes it's all all terrorists let's uh clear our log and let's refresh this page again how maybe it will Noble not to refreshed so we can go here yeah I think that they have really big problems with our application because it's trying to make this request maybe in the ground but um we can try to restart our app server of the application so I will try to type your page party's answer again and as you can see okay now we have everything that we need so let's try to make requests again so what is Cambodia let's check that opening eye API note about about this Quantum country so let's click Send request and let's wait and as you can see we get response from the open AI in the back but we get this response and if you want we can also save this information to our database we can save all our conversations with openai module but what we have in this response so we have that our model thinks that we ask questions about what is language of the Cambodia and many people know this is the official language and national language of the company this is command linkage and here we get uh answered for our questions so let's refresh it and now let's try to make another let's try to ask another question and maybe it will be it will be better to ask Maybe uh where is Thailand yes where is Thailand so send request and let's wait until okay so as you can see now we get also response successfully and we see our answer answer from the model is Talent is insulting Asia located in the region known as and as I said here we can configure that we want to get a full response and to do that we can we will need to go to AI controller and here we will type Max tokens and for example 20 and let's try again our let's try to ask again some questions so maybe what is more so what is Moon send request and as you can see now we get um yeah money search okay so as as you can see everything works fine so if you want to Define that we want to get a bigger response from the model you can use max tokens Pro or option inside client and you know if that's all for this lesson it was really simple a really simple application without any design so thanks for watching and soon I'm gonna make more videos about artificial intelligence and lateral so thanks for watching

Channel: Fire Camp Courses

Views: 3,658

Keywords: Laravel, OpenAI API, PHP Frameworks, Natural Language Processing, AI Development, Machine Learning, Web Development, Programming Tutorials, Backend Development, AI Integration, API Development, RESTful APIs, Building Intelligent Applications, Developing Chatbots, Neural Networks, Deep Learning, Model Training, Predictive Analytics, Data Science

Id: iiPJBSXoxnY

Length: 19min 20sec (1160 seconds)

Published: Mon Mar 20 2023