if you looking for a place where you could learn how to build different types of powerful applications without writing any code using Furlow you are welcome to this channel my name is Benjamin and today we are going to be taking you behind the scenes of how we build our latest project for the hash flutter flow imagine contest it's an LMS assistant and powered by AI That's GPT and um the idea was simple we want to take students um you know universities lecturers normal processes and automate them in one app so assessments grading learning um attendance things like this want to automate it inside our application and make things simpler for them so we were not able to finish this application for the contest but we decided to finish it and bring it to you on this channel so that you can learn how to build the features that we've built for this app right just in case you have an idea that is similar to it now um if you have any feature that you are interested in that we do not cover in this video you can comment down below and we'll make a video specially for you right and um let's make a deal if this video helps you in any way make sure you leave a thumbs up you comment subscribe if you also need help to from us to build an application for you our WhatsApp link is down below now in the next video you're going to see a preview of the app and its features then we'll teach you how to do it introducing Echo the education assistant built in flutter flow celebrating the hashtag flutter flow imagine take a guided tour through the remarkable features that enhance the educational experience with Echo let's explore further as users step into Echo their Journey kicks off with a userfriendly onboarding page the homepage serves as their Command Center neatly organizing all class deadlines and school activities on a comprehensive Message Board integrated within a library section offers access to books provided by the University or lecturers the AI section takes it a step further by summarizing those library books for more effective study sessions moving forward the course section provides users with a bird's eye view of their academic performance echo's AI system delivers a verdict based on their performance offering valuable insights clicking on a specific course opens up a world of information from recommended books to quizzes and assignments everything they need is at their fingertips but the exploration doesn't stop there as users delve deeper into a course they discover lectures from their professors clicking on a specific lecture gives them access to detailed information including lecture notes Echo demonstrates how it becomes even more interactive ever wished studying could be more engaging with Echo it can be click the quizme button and an automatic quiz related to that lecture is generated once AED users receive real-time feedback and now the grand finale echo's AI feature imagine conversing with the AI receiving responses in natural language thanks to the gpta API eeko introduces a whole new level of interaction to the learning experience that wraps up the journey through Ekko the ultimate education companion designed to make learning seamlessly enjoyable thank you for joining Echo today to give you a quick rundown of what we're able to do and how we're able to do it build this application now firstly I want to celebrate FL FL flow FL flow is so amazing that's changing the games the game in in which people build applications and ship it out to the market really quickly right because you can see how many pages we have here we started the contest quckly late I think like 5 days into it and we had 6 days to think of a new design and work up on a design and then actually start building the application and we're able to do that in FL flow really really quickly so um firstly you can see I'm sure you've already seen the preview of the application but while we going to take this slowly so if You' seen any feature that you saw on that preview and you want us to do a video on that on how we actually did it we will make a video on that and we would help help you out with it so we can keep helping the community right but for now we're going to focus on the AI features of the application there are two AI features of the application main AI features of application which is the echo assistant you know that we trained with GPT we using Char GPT openi calls and we're going to recommend that you actually use or study how open a Works how charp works so that you can really understand how to you know work with it right and one of the fastest ways for you to understand API calls with charp is is just to go to um the playground right section Playground open here and once you go to the playground you are going to see uh this section here where you can go to chats right so you have to have an account first so for example I can say something like uh hey um act act as a comedian or whatever right comedian B basically giving it an instruction for how we should act throughout this this entire chat right and let's say act as a comedian you know what whatever you want to say that's the first came to my head so you say hello right how are you are you and um yeah so if I say submit right um hey well I'm AI I don't have feelings I'm programmed to make people laugh you see you see so basically this system instruction is how the AI should work from then on right no matter what this is how it should work and if you click on view code you'll see that this is the body this is the information we're actually sending to the AI chat board right now this is going to be helpful on your own you can do more information you can read up on it you can even use sh to try and explain things for you tell it to break things down for you say okay please what does this mean in case you need more help but this just this is the structure of API calls with ch GPT now if I go the second feature that we also worked with was when it comes to AI in this particular project was generating automatic qu quiz questions so the idea was you know um you can click on a quiz button right in any lecture because you can have as a student you can have multiple lectures many many lectures so you can just go over and then click on a click on a quiz button about that particular lecture and after watching the lecture it automatically Create a quiz for you that you can use to test your knowledge and you know practice right so once you do that um you will see a review section where you can actually review your answer whether you got it right or wrong and the cool thing about this is that we use a lot of interactive elements graphics and this is why you typically need a uiu designer right we and I'm really thinking C show UI designer for this and in case you need one or you want want to work with us to build applications you can shoot us a DM remember our WhatsApp handle is down below all right so yeah um if you notice there are a lot of interactive Graphics here this preview if you see here a lot of interactive Graphics I I'm not sure if is actually playing yeah so you can see in Cas a congratulations and stuff so we actually be an entire personality for this for this um contest right which is called Echo all right now to build this quiz feature we needed 10 questions that will be automatically generated from open AI from whatever lecture material lecture note a teacher upload so how did we do that we did that very simply very easily right we used a feature called function calling and um you the flutter flow like they already have a tutorial on it and that tutorial is quite helpful the only issue with that tutorial is we we actually are working with 10 questions and not only working with one question from the um API call so go and watch it first if you watch it and you need help with maybe trying to create functions or you need a video on functions we can actually help you with another video on that how it works but function calling is basically a feature in with Char GPT where you can tell Char GPT to perform an action and return structured data right in like in adjacent format exactly what you want because sometimes when you ask to just return plain text like as a chat but it can be unpredictable it might not tell return exactly what you want and we want you to return questions exactly we want you to return answers you know we want it to be in an exact location so that every single time charp sends it back to us we know exactly what to extract and then show our users right and it works perfectly you know so watch that tutorial from FL FL and you'll know how we were able to also do this particular feature but let me just give you like a quick tip one thing that we did to make our to make function calling very very fast for us is that we you know um kaj has a feature called assistants and you can actually train your own assistant we uploaded all the files from like let me show you what I mean for example we uploaded different files right from open AI documentation about function calling if you watch that video I told about you will see what I'm open a has documentations about how to do function calling with charp so if I click on this PDF so we copied all the text and everything and then made it into a PDF um let me see if I still have that PDF here uh let's see I'm not sure it should be here uh so I'm not sure if I can find the PDF though it's been a while let me group this by um kind let me it by kind so your function calling you'll see that we just copied the entire structure of like the documentation how function calling works right and you caned a no code approach to it how it works so you see it's normally going to return you tell it what to return for you exactly what you want and you can use it to build different kind of applications right there are so many things you can do with it so many things it is really an amazing feature right let me I didn't want to talk too much about that but once we uploaded all the documentation into charb into our assistant we were able to allow the assistant build up the function for us right so this the function that we use for the um quiz feature was done by by training our chat bot on the data that open I provided so if I go over to the um if I go over to the uh open the API section you see that we have something called API quiz function calling and this is way it works if you go to the body this is how the body looks so like I said watch that FL flows video and you can also use that tip I gave you train your own chatboard but this is basically what we have here you can just copy it if you want but this particular one is different from flutter flow's own that flutter flow's own just generates one quiz top topic and we tried working with only one quiz um you know like what we wanted to do at first was we were generating one question and then we have our system in a loop go back and make an API call to charp and then try and add another question then go to to you know call Char again to generate another question and then you know save it in it was not working it kept on failing it was obviously not going to work so right now instead we're generating we're just calling charity and generating 10 questions so let me give an example how it works if I go to response and test and I click on test API call it's going to generate 10 questions for us now if you a new beginner to um API calls in F flow you can comment down below we will make a video on API calls right for total beginners for no code developers very soon right and it's going to really be really be informative okay so I have the returned answer right and you see you see the questions this is the list of questions all of everything goes down to 10 right answer question answer question answer you see that the test notes writing here is a test note about flutter flu this is just the power of of flutter flu right so amazing anyways that's what we did for the API SE for the um quiz section now like I said if you want a more a bre a breakdown video you tell us and we can easily provide it for you all right um so this particular section is where I want to really dwell on for now for this particular video and um well I was already working on the design of the AI assistant how we were able to build it so I'm going to go over to the project section here uh and I'm going to click on all pages so I can check all the pages so right now we have a blank canvas that I created so that I can show you so basically once you create a new project in F flow you have a blank canvas you can work with it so if I go to what you call the widget tree the widget tree is the structure of all the elements you putting now remember fur flow is a place to build application so imagine if you're building a house you're going to have different element different blocks different things together you can put and stack on top of each other to be able to make that home or that building and so and so on and so forth if you want to write a song right now you have to start with the first sentence right it's a song or a or a collection of speech is different words put together right if you break it down it's all words so this is how building apps here in FF flow is it's a anything you seeing visually on your page is a colle is a collection of different what we call Widgets or elements that you can drag and drop to your page and make something work so right now we just need to know that there are two types of elements and I think I have a video on that I think there's another video I think I spoke about that a lot there is what you call the parent and there's child widgets so parent widgets help to hold a lot of elements inside of the canvas right child widgets are the elements that the parent wiet to hold so for example now we have a column we have a container first and containers are for styling we have this particular application has a kind of stylized background the background is it it's um glass morphism basically that was the look we're going for um when we told our designers to work on it glass morphism and to get this particular type of gradient in FL is not going to be easy so what we did we just put a container and containers are your go-to choice for styling when you want to do styling this this is what the container is you can Dr it on your page so we put it on the background of the page and then we also now imported an asset now to import an asset is quite simple very very easy one of the things I do this is why it's really good to have like a design before you start building right so one of the things I do when I see what designer has already designed for me I will just go and paste the design maybe copy design and paste it somewhere then I will delete you know so like all the elements I'm seeing all the elements on the page just keep deleting deleting right I just keep deleting like that so once I'm done with deleting next thing I'm just going to do is I'll just click on the the head of the page and probably I'll have to remove this particular um you know border right so by the time I'm done I've done that you see down here here I have something called export a assistant so I can export this particular picture as a PNG as a as a picture and import it into my project so I'll just delete this because we don't need that right now so I'll click on projects and right now I've already done that so once you want to import import it you can just come over here and click on upload you can upload that particular picture from your file folder awesome so I'm going to click on cancel right now and let's continue so if we go over to this other section here um you will see let me see you go back to this other section here we see that we have two icons here and these icons are going from left to right left to right so read the documentation about you know C rows because it's a row that's going to allow us to align icons from left to right because it can hold more than one icon and yes that's that's it that's basic function of a row so um 18 18 I think that's the distance between the two um the left and right section so I'm just going to click on padding I'm going to put 18 I'm going to click on padding here I'm going to click 18 awesome okay so now that I'm done with that I'm going to quickly go to this Element Section here all right and I am going to add an icon so I'm going to drag icon to the to the page all right drag it to the page and um I'm going to duplicate that icon okay so yeah I have the icon here and I can duplicate so let's go back to this design here um okay so let's click on this icon click settings outline um arrow for now I'm just going to pick C then I'll duplicate this right click on the row and I'll click on Main a alignment I will do a space between now main AIS alignment is how you can is like calling the main function of that particular rowle right the main function of the rowle right now here is to align elements from left to right so these are the different ways in which you can align elements from left to right in that particular um parent widget even the column to has his own alignments from top to bottom right so once I click here I can go here and I can click on settings right to know to get that design but I think I believe that we change this this feature because we change it from instead of settings to I asked how to change it instead of settings it was a voice icon if I can remember correctly yeah because we wanted it to be a section where you could click on it and change the voice of the AI assistant that was what we wanted that to do for us so I'm just going to click there and instead of using an icon because we might not have that type of asset there you know in Flor flow we are going to use something different we're going to use a container right so I'm going to add a container to the project container we'll check for the size of this asset here is 2424 right so this container is going to be 24 width and 24 height 24 24 so I'm going to go to background image I'm going to go to uh asset then I'm going to upload so I'm not sure if I already exported the um I think we already even have it already in the asset section so see um this is the voice so you can import your own from any project you're working on and boom you have it so I've imported this asset here and the next thing I work on is this section here right and um if you notice this section has some kind of um you know it has like some like a shadow coming out of it right that's how the designer made it to be so what I did was I asked her that's why he good to work with a UI designer when you're building I asked her to separate this section here for me like to bring it out to like give me I think it was around this page somewhere around here let me check a section where she um she separated yeah so you can sit here right so that section there where there's that that shadow I she just separated it from me as an asset separate asset and I just imported into flow so typically what I'm going to do here is this um I'm going to go back to that design and um we measure this section from here to here so it's 59 right so we just come over to this section here and we would add another row inside the column now this row let's see the distance of this section from here to here it's no that's not from let me click on this icon this icon and then click on option uh so I'll say 40 right so distance from there to there is 40 but for me I just put 30 instead I delete this delete this and I'm going to remove the um 188 padding from left and right next thing I'm going to do is I'm going to add a container I'm going to spread that container right with an expansion an expansion makes a widget inside of it spread along the entire width of whatever element is inside the parent element that is inside right now we want the container to take up the entire width of the row on the page and the row is always going to take take up infinite you know um horizontal space so right now we have the container and the height of the container is going to be 59 all right now what we'll do next is we going to go down to background image I'm going to go to asset and we are going to go to um let's see I think we should have that design here already I don't know if this one I don't think so so what I'll do is I'm going to come over here and I will check for the name of that particular file that we had here it's called Echo so we would go over to so just search for Echo right this is it here good so we have defile now you can see that we have that shame Shadow now the next thing is that when you come over to this section here you're going to see a um so let's go back you're going to see that there's the element we have two elements text here text here so that they St on top of each other right distance from here to here is is 12 so two text top of each other so we know that because they on top of each other we're going to use a column right please as you're going as you keep gr you're going to familiarize yourself with some of these things so I'm going to click on a column right and we are going to put two text boxes inside we have the first text box and we're going to go over to the figma design once you click on the text you see that we have have a semi board 24 right semi board 24 two text one so click on it s here and we're working on this particular text here right and um if we look at this text on the AI section here you can see that the text here is Echo um the size of the text should be 24 semi bold so we go here 24 semibold then the color we can just copy the color from here copy come over here and we paste so I can copy the text from here and come over here and paste the text here so we're done with that section now we just duplicate the text and I think the distance from here to here is four if I'm not mistaken oh it's 12 12 actually then this section here the size of the text is 13 and 400 for the width so we would just change that so 13 400 for the weight right then I think distance between those two elements so on this column here we can actually write something called item spacing so click on the column there's something called item spacing we can make the element inside of the column have some spacing so this is um white and we can copy this and paste this here good so very simple now um for this section or this portion we are going to have all the messages show up it's quite simple what we did here um what we did was we have to separate this the the screen into two sections right uh this section is the main column which we can call the parent column the main column that's going to hold every single thing together right and then we can have a bottom section so what I'm going to do here is I'm going to add another another column here inside of it right and that column is going to I'm going to use expansion expansion means it should take up as much space as the parent wiet which is this parent column here right now this will be maybe second parent or something you can call it anything you want to call it just make sure that you you can easily be able to reference it uh or something or you can say parent two I'm also start with a number forgot parent two you know column all right so by after I've done that I can add two columns inside so one will be so one column right that will be the top section so basically like I said if you noticing what I'm doing here it's just breaking things down into smaller pieces you know knowing you're using different widgets on inside of widget inside of widgets to create what you want to see on your page so I have a row right and I can click on this column here and I can make it expanded then I have this bottom section down here and that bottom section is going to be for things like the text box right so for that text box all we just need to do is is we just need to put in a container and that container is you know the distance from here to here is 22 22 so I just going to put I think it's 221 I saw we go back it's 22 and this section is 10 right um so we click on this row which is going to be the bottom section all right and we would put a padding 22 um 10 I think so yeah 10 all right so we have then we click on the container and then we can you know spread the container around we can put the Border color around the container which going to be white so we can at least be able to observe it on the page right so this is the container here and um let's scroll here the container here there is a border the B is 20 202 so radius 20 20 202 and then um as you can see uh let's see so it is not actually white the Border I think it's I think it's white too let me see I remember um okay the stroke is 50% white you know it's not fully white so we're going to put it like 49% or 50% so it's giving us the color that we want and I think the the weight of the Border color based on what we're seeing from the figma design is 1.5 right and then um the next thing we'll do is I'm not going to give it any fixed Heights we'll just put a row and add what we need we have a text box and the icon here so for the container here we're just going to put put a row inside right and then we remove the um height from this container here okay and then we're going to add a um so what we'll do is this I'm going to add a minimum height so this is going to be the text box text text box structure you know right that's the textbox structure so that's this container here now what we want to do is we just want to give we'll give it the minimum height the minimum height will be 60 65 right that be the minimum height and the maximum height will just leave it like that I think maximum we can make it at 100 so what this does is that the text box inside as you're typing inside of it it can keep expanding expanding but it w go past 100 and that's how you can have like a dynamic text box as they typ in it to keep add like increasing in height right which is really really cool so what we'll do here is we just click here and then we'll add what we need first things first we'll add the text input or text field right I always call it text inut now we're going we're going to go over to um the design I measure the distance from here to here which is eight the distance from here to here is eight also so we're going to put um on the row that is holding the elements we going to put eight eight right now the next thing we're going to do is we'll click on this text field we're going to remove the padding from it and we would add the we add AOW a column a column is going to hold things from top to bottom right just remember that now for me you can add anything you want if you doing a design like this for me I'm just adding a column and that column is going to have two elements two icons because this we're going to have like this button here here right and also going to have like a text a button to send like messages like physical messages um so I will click on this text field here and I am going to remove the um underline none all right so you can see the way the text box is already increasing now I'm going to add now for this text box first before I do anything extra right let me click on it I am going to fix a few things so the max lines will not be one the max lines will be at least three and then the mean lines will be sorry Max lines will be three and then is not responding three the main line will be one so what that means is that it would you know be as small as one like the the minimum line and then the max line it can go is three so that is this is the TCH actually going to expand the container when a user is typing a lot of information inside now the next we're going to add is going to be the um you can add the uh container or the icon whatever you doing I'm going to use a container obviously right so um we'll click this is 2424 right um so we just put 24 24 24 so at least you're getting a Gras of how we're designing the application this is why I actually started working on this U so you see how we've taken a blank page and we are taking something that we we have already planned out on figma and making something beautiful out of it which is really cool with assets and all the widgets that flutter FL has given us now in less than I I think this is like 15 minutes or something so with this container here we're going to remove the fuel color from the background and um use color then I'm going to go over to the background image and and we're going to go to assets and we are going to um choose a particular asset um so let me see the name of that particular um icon this is called icon pack voice so uh let's type icon so probably we see what we're looking for so I'm not seeing what I'm looking for so probably that's not the name um so I can't find it yet so let's just scroll through I'm sure I already imported can it here group it's called group so um yeah I've done that now now you can click on the container and then you can choose a particular box fit size that fits your preferences this is like contain contains as much as the element as possible so this is it but I think I want to increase the size of this 24 seems too small in my opinion so I'll make it 30 and 30 so now we fix this in what we just need to do is we click here click here and we come over here and we can measure that from here to here is 44 so we are just going to put 44 there and um right now it still looks a bit weird our um our the text box still seems so big right so maybe we would reduce if I think if we remove this Max height that's the issue that was the issue let me see so that's what's causing the problem uh minimum I'm wondering why just give me a second uh let me see okay okay yeah you can leave the max height off remember that's I did it you can leave the max height off then this text field will not make it expand more than three lines of of text inside now on your own when you're are doing something like this you can make sure that you write this ask me anything as a label text here right I'll just skip over that right for now and I just wanted to show you how you can actually work on designing an application right based on what you're seeing the other things I want to show you from the project how we were able to do them um but the next thing I will talk about is the messages now I'm not going to design this you can also Design This yourself using containers rows and text something like that I'm just showing you the design how we able to break it down in FL flow now for something like this we did something really really interesting so I'm going to go to the original page right and for this list of messages we are reading the information from a data type now let me break it down for you I know I've spoken about it a bit we are using an API call to open ey um this is the API code here and pass in a list of messages as context right so a whole list of messages but right now in the variables it's a single string that's what we're doing so we're passing a list of messages there and the way we're doing it is that we have created a data type called open AI message which role and content which is the same way that that asks you to you know sending your API calls now keeping that in mind you know that when you're using data types you can reference it anywhere in your application if you have more questions about that you can ask that below but what what what happens here is that we can we just reference the data types as a page States variable and once we do that we can go on this list View and we can read from a variable so instead of getting information from the back end we are not going to any external platform actually getting information from within the application because everything is being stored any message that we send and Char if is sent is being stored in the page State that's one of the ways in which you can store data in flutter flow just click on ADD field and you add you have information so you can store information in in the page State App State or in your server that which is fire base or your own personal backing now once we do that I think I've already spoken about how um this section here it only shows um when the message that was sent is equal to user so we put a column and and this column so basically I'll just copy that here from here um let me just show you what I what I'm talking about here we'll go to the other AI page AI page and we will paste um we'll paste that here now instead of using a a column for this we use a list view rep place going to use a list view list views why because list views are made to hold a lot of data inside of it you know they can basically they are made to hold a a lot of data when or a lot of widgets when you're generating it dynamically right and I will show you what dynamic generation means shortly but right now we just have two elements inside our page we have a column that holds two rows with containers that have text inside right and one container will represent the the user that is sending the message to the to our to our AI system is the text and the other one will represent the message that the AI system sends back to us right that's it now what we just did was we went to the page date here we created something called you know AI messages AI message list right which is going to be a list of let's say is going dat type it's going to be um open AI message let's see open AI okay open ey message found sorry took me a while then list so it's a list of this type of messages where there will be a ro and content R and content as we created in data type if you remember so all we just need to do is we just click here so we're trying to now get information from the page date all the lists you want to show it here on this section here so messages right we just click here and um we'll go to page State we'll go to AI message list and confirm confirm and voila we've done that so all we just did was we just added some spacing we click on the on the top section you know then go to item spacing I think it's 12 all right and then we'll click here on this um I think okay I think is apply the spacing there you can apply whatever spacing you want so now we've done that now what we are doing here is this any time I'm making the call to J gbt or whatever we are passing the entire message to open like we're passing the entire context of this list of messages to open through our API call remember the API call is this the the structure of the API call is very simple if you go over to the um messages open you see that firstly we have the link this this is the chat completions link from open that was given to us our content type application Jing authorization and the body very simple body right but it's in a text based format and we sending an a custom instruction to GPT if you want more information about API like said just ask then message list so that's what I was sending to it now um we we have two different modes in the AI system we have both the chat mode where we can send in text and we have both the um you know the assistant mod when you can actually talk to the assistant right like this and um let's quickly make it work so for the mic I'm let me name it mic a mic so will not get I will not get it confused with any other thing and I'm going to add on that um icon inside that icon is going to be a simple icon um to Icon okay so cyon will be um sent so that I'm going to we look for yeah something like this right and um on your own you can customize it but you understand what I'm what I'm working with you can make make it this same purple color whatever whatever you're working with right so I'm just going to leave it like this for now but the idea here is this you want this um button to show when they typing this particular button to show when they're typing and this one to show when they're not typing anything so FL flow has a very cool feature remember there's a feature for to hide or show widget at any moment which is called conditional visibility right you can read more more about it or check documentation for more information right but conditional visibility you have to set a condition to make it work right or not so basically what we're going to do is that we just want to check whether this text here is focused right so F flow has a feature right in sorry it's called widget Focus state so if this text field here is focused then this button will show but if the text if the text field is not let Focus me when they tap on it on they want they start typing but the text field is not focused right what we can do is we can just show this one instead the mic so let's come over here and work on Magic paste so just say if is not focused confirm now now with that said and done that feature has been done in real in the real life lifetime like like live application we're not going to have any problem like that right and um to toggle between the speech and the the the text mode we use we created another page State variable called Speech mode speech sorry speech mode you can call it whatever you want if if you're building an app similar right that going to be a b which is true or false and basically this entire SE plus the text section we made it invisible if the bull is equal to speech mode and equal to True right and basically what we're doing here is we are just changing or um updating the entire page or the page State value so if they click on this mic will make Speech modood true so we're going to say update update um page State and what we updating in page state is speech mode so we say rebuild current page the update type so it's going to rebuild the entire page if there when this has been updated so that it can it can it can show us the changes in real time so we going to upate it to true so that means we want to talk so there we can do with that for example we can make this entire section you know disappear based on whether that thing was true or false right which is schol okay and that's what exactly what we did on the main um design right but let's talk about what we are sending to open which is something I won't talk about in the next uh modu we are going to talk about how we are able to pass a lot of context data to chat GPT to can remember the past conversations without us having to while while working with open strict rules around you know API calls right and you know the limits right now one let me just explain what I mean what what the limits and I think I've done that already but just remember that when you're sending messages to open right you the message the all the messages the past messages and the current ones you are sending all together is what you call context window right or context data and you can send with GPT 4 which is what we use for this particular training you can send up to I believe um 120,000 tokens which four characters is one token you can calculate it like that up to 12,000 tokens which is a lot of information but still when you're sending a new message or us sending a new message that user is limited to 4,000 tokens so that was that a limitation um charity gives you so you can work with his API now putting that in mind after integrating your API call the same way we did it here all you just need to do is um you let's look at how we are structuring our data here API sorry ai ai support page here as you can see so this is where we are doing everything now one thing I didn't add in the other page is this um loty animation which activates after you send a message and it just shows that oh um there's a like the AI is waiting to reply you and it's being controlled by a another page variable called New Message a replying and it's a bullying right which is false but once you send the message at some point we make it we updates the page to true and it shows this and then when the message has comeing then it's it's it's it's automatically removed or it's updated to false so let me show you what we're doing in the background so firstly when you send a message we validate the form and validating the form is a feature or if it's a widget that you can actually add in FL flow it looks like this right and once you add it you can actually um click on any text fil field or any field you're requiring some kind of input and you can make sure that oh before a user does anything on the app the um that that um text box is not empty because right now this entire logic works that based on the fact that oh the user must have imputed something here but the thing about floter is that or flutter flow is that if you do not add um precautions like this even though the click the button here and there was no text field here the function will execute you will see some kind of maybe black bubble or some kind of bubble or something happen and it w't work properly because there was no text here so we once you do that you add a validate form action you can read more about that in the documentation and then the next Fe feature we added is this is the htic feedback and then from there update app States we the App State that's the we storing some information in the app memory right and what we're storing is what did the user type what did the user ask for this is coming from the text field that is on the page what is the user asking for and then we're adding we not even adding anything but the page State variable of all the message list right we're taking it as it is and updating the app state to with it or these are all the messages that are there currently right and it's the data open air message that the data type open a message like I showed you before with role and content inside of it now the next thing we did here is we're now adding to list so what what are we doing now that we have um we've saved what what I did here was that I'm saving the message that the user uh has so far and I'm also say saving the old messages too there's a reason I'll show you shortly but now after I've saved the old messages like the and all the messages in the page State message list as it was at that moment before we add add the new message that the user is is sending after we see that we now add the new message that the user is sending right so we are creating a new adding to list we're adding to the um page State you know the page St message list and we're adding the when so when you add when when you are creating a new data type we are we are updating the role and the content so the role is user right just like open here ask we need from us and then the content is the text from the what was being typed now when we go over to this other action this action is to clear the text field clear text fields or pin code then the next one is to update the page date that the a is thinking like I showed you before earlier true then there's an action block and action blocks are ways to create actions outside of your current action editor so you can create actions that can be reused anywhere in your app or just to organize your your um your your this thing your workspace now if you want more information about action blocks on how to use them you can also comment down below and I will be sure to help you so if you click on check check this one is an action block that we created elsewhere called check log data match now there's a feature in the app where um if you ask the AI what's my schedule for today or what what I what do I have to do tomorrow do I have any assignment that is due and so on and so forth you know this um action block does all that work for us that's why we made it as an action block so we could reference it somewhere else and do all the work there so what it does for us if I go to the action block and say check log data match you first know that we are saving in our database all the logs of a user so if a user saves a schedule or does something update something in the app we're always saving information about that in our database right and what we're doing is we are just um we are updating we are checking all the messages is like the user logs I'm not sure if I've already shown this in this in this demonstration already but you see that in the users collection right we have something called user log right let's let's let me show you the colle first we have user log user log is a collection where we are storing everything that all the activities that the user does for example if a if a leur or a teacher you know schedules a new assignment and it says that the end date is in the next one week or something right we will save the date and everything for that user under the user log with his user ID so that we can know all the things that the user is doing in an app or shedules that the user has things like that so what we're doing here but right now we are not activating we're not actually using this collection right now what we're using is um a list of of that data type called just for testing purposes this will not if we ever going live search an app we never do we not do something like this but for now just for now what we're doing is we're using a list of user logs in the user document right and every single time user has an activity or something like that we are saving that entry in this users document right for example to give you context let me open the manage content window and I'll show you how we saved it okay so this is one of the users in our app and if I click on users document and scroll down and you go to user logs this is just one user log that we saved just for testing and shedu that's the type this this the time then you see activity study session uploaded at this is the time it was uploaded right and um this this is the time is going to you know this just the time it was uploaded right and content document is pro productive study session for reference you know for reference now let me explain what how we're doing this right in our app we didn't we didn't actually build this feature right yet but it was just for a concept in an app Sometimes some you know when a user for example Shades an activity so let's go to the shades page you want to user for example Shades an activity like oh I want to study or something I want to study has title and everything we're going to save the the date right and we're going to have the study time two down and we're going to now compose a text using a combined text feature so go to and use a combined text feature and that combined text feature let me show you an example what I mean I'm just using this as an example that's not not we're not going to change what we have there already so we just use a combined text feature right and we're going to write all those things word for word so for example um this this new activity or activity at this the activity is expiring by this time so we didn't add that in this in this particular design here you know but if you wanted to to tweak it a bit you can say okay this activity expires at then we now put the we add the text here it expires that then we now pick the end date of it so even if a lecture is is um sheding a new a new class we just say new activity atart you know then this activity expires at then the title of the activity is this or that you know we just pass whatever context you know that um you know activity is based off of that's what we're doing right so whether it's a schedule or it's an assignment or whatever we are forming a text by ourself but we're adding very variables from whatever is happening at that moment right so once we do that we have a list of all the user has to work with or is doing at that moment and there now let me now explain what we're doing here so what that um user logs um action does for us or what we made it do is if I click on the open Action editor and I go to um actions and I go to user log let's see um check log data match right so firstly we're updating an up state to we created we added a section in the UP State where we could save all the users logs so updating all the users logs to the UP State there then after doing that we also have another upate update where we're updating um so we are basically updating um another up state that is for data type um this thing uh let me explain so we're updating another app state that is of data type open ey message you remember the open ey message is the message section with role and content but I wrote a custom function now this was done with AI um with the uh let me show you edit function now this was done with let me just see this was done with the Cod Code Pilot so FL has a Code Pilot where you can actually make the AI right code for you just describing text and everything but the thing about custom functions in the way you need to think about custom functions in case you're a beginner and you're hearing it for the first time is that custom functions is basically a way to you know convert you know data right you have you pass arguments or you pass information and then you have a return value based on the information you passed and what you're trying to do that's basically what custom function is because if you come here you see there's a return value which is typically needed or important and then you have arguments you can have a lot of arguments and those arguments are to get a return value back you right so for example you can you want I want to do ma a mathematical equation right and you have two numbers maybe two and two and you want to say 2 plus 2 and then the return value is going to be four so that's an example of arguments so in the talk example the arguments are going to be you know number one and number two right and then you just go to the Code Pilot and say you know create a um sum up the two sum up number one and number two or add number one and number two together and to create a custom function for you so the custom function I created here was just to transit or change the user log data type that I created now I'm not sure if I show you how that user log data type looks like but I'm sure you should see it on the screen right now this is how it looks so basically what we're doing with this custom function is to what we're doing with this custom function is to convert this user logs data type to an open AI message data type which is crazy right so what we're doing is that we are adding the role automatically as user and then the the body or the content is going to be the log body the the body from this particular um logs right it's going to be the body from the log so the content of the body which if you look at our um our save what we're saving here that is the is the content that actually holds the information right that's why we formatted it way we formatted it so let's scroll down a bit and you re check user logs and you go to item one you'll see that the this is the where we have most the B of the information right so if you come back here to our build you see that yes so you R user log. body that's what we're now saving up here and with that we can now pass all the user logs all the activities that the user has as you know context data all right and that's the power of open a remember with open AI you can actually um remember I showed you an example here earlier hello right context data um you know hello how can I assist today um let me just write assistant sorry assistant something know this is the prompt of how you want it to behave right so if I go to view code whatever message keeps coming in will have like this this is the entire tree this is the array or list of messages from the user you know from the user from the AI and it will keep going on and on and on and on if I send oh um you know uh how many stars you know do we have I don't know that's the random question I just came to my head but let's see so submit so you know I can do this and saying there's an estimated 100 B billion to 400 billion stars in the M Galaxy alone right and a view code you see that that message has added here too so it's a context so right now we're passing a context of Ro user Ro user Ro user Ro user Ro user many messages which contain the body of the user's activity to our open our call our API call which is so cool so we're converting to open message which we can now use to send to that API call so basically this custom function is now passing or updating the app state with you know the user logs and converting it to the open air message which is so cool in my opinion is really cool so once we do once we do that we have another API code that we created right that API call if I'm to edit the API call and you check it out this API call here is still a call to the chat completions Endo right and all we are doing if you go to the body you see what we're doing so it say your tax is to se through the logs provided below that are related to the user's query right and provide your response wait um you know ensure that the responses prioritize recent data based on timestamps right added to logs right you know that's why we formatted it the way we did particularly when it pertains to questions about sheds don't return dat unless asked right then return only the log or logs that most closely match the users request I kept on testing that kept on seeing weaknesses in the model kept adding more text to tell it exactly what to do what not to do right then for more help right the current date today is November 20th you know this this this this this now for me I think I forgot to actually make this a variable I forgot to make it that a variable because what I mean by making it a variable one of the things I could have done would have been to go to this variable section here right and I should have added something like the date right the date today the current date today that should be a string so we just format the date whatever time current time we have then to a string so I all I should have done would have been to come to this section here you know so you know he needs to know what date it is because Char cannot tell the time so you need to know what date it is at that moment so that you can now say Okay based on the time stamps that it's saying all the shedules that were passing to it in the you know in the call right oh this is the one that matches your schedule or this activity is going to end by this time it's very really like in my opinion is really cool so I can drag this date here oh my God I know what to do sorry I'll just instead of doing that right um the day today is what I'll just do is I'm just going to put this brackets like this and date close bracket so that I have it there so that's another way to you know attach it there so we say R user content inst instruction so this is the query of the user now on your in your own you can actually do something like this query or users query right whatever you want to write then you cannot put the instruction at the end well you know um but for this one I think if you look at the test of the API call user squ we we already passing it what is my schedule for tomorrow you know then I'm not passing that activity session thing that I did uploaded at content you know and so on and so for but I think we should have added the end date too that would have made it better right but like I said this is just experimental this are just our ideas how we were able to pass it into FL flow and build what we wanted to build so basically once we that's what this entire section is doing it to make the API call you know check which one is necessary and then to it to return a value right if you check out if you check um um action blocks you can actually return a value in action block so when you create a new action block you can add a return value and that is string and that return value over here now there's a documentation on this you can follow documentation we passing the content of what this AI message did and if there was nothing we're going to say that oh the the API call failed right to fetch any data something like that um yeah so let me go back to the I button and so basically after this this check action block check we're checking whether the the information is sent in the text the return value is empty or not if it is if it's not empty then we continue right so we basically so it's looking through all the logs so I we use it to just to create a search function it's looking through all the logs of data that we sent to it and it's passing is giving us back the log that closely matches what we want now in your own model you can do something better than this we just did this just for fun right in a real application what we would have done is that we would have used a Firebase collection for the user logs and we just search the collection for any text and closely matches what we doing so we will not spend so much money we can just search the collection and then once we get information back we now pass it to the API call so basically at the end of the day we're getting the logs plus the users new message the query that user just um created so let me show you what I mean um so the log message the one that this the log message we getting from that action block right this is it here the log message we getting from it um we are now getting the information so that that mean that's the information that closely matches what the user is asking for so the user says what's my schedule for today it might send us a bunch of logs that match what the user is saying and then we now get it and then um I think I made a mistake here activity log for context okay so basically the next thing we're doing is um after we have the we get the log message we're now saying oh this is users query right users query we're getting from let me check the input so we saying this is users query so remember up above we actually updated what the user was asking for into an up state so passing the UP State so users query call to the UP State they were saying activ activity log for context if need be so you know this is like a query are making to char a new a new API call right so we passing the activity log that we got back from that action output right that action block so we now passing so this is the right activity log plus the users new question is asking again and then um we are now adding it to another list of open AI message data type which is an Upstate also so what we are doing with this new list is that we're adding the new the users new um query plus the log data but we're not adding this on the main page state that the users see we're not adding it here right so we're doing this one in the background that's why we created another open a message list and um we passing all that data as the message list here but here's the thing we created a custom function right which what this custom function does is that it changes or it converts a list of open a message right the message data type to a string right it converts it to a string which is a string which is what we need for the IPI call but the string is formed as a um as ajing is as ajing structure but it's a string that's what we're doing we're just taking everything and we're forming it like this so roll message roll message roll sorry roll content roll content roll content as is even though it's not going to work because it needs to go as like a Jon structure even though it's a string but that's just how we structured the API call so this another custom fun now these custom functions if you need them we can provide them in the comment section below to help you out so by the time we do that we now wait for a successful response and then um we have two functions here so this this this is not even necessary here I think I was just playing around with something but we wanted to be that while a message is being passed we have after you've sent a message it can talk back to you but that's not necessary here I think I even disabled it um we go over to this section here called add users message so what we're now doing is that we are getting the response from the API call here right and we are updating the main page state where we see all the messages and everything while upating the main page state with the um the the assistant role and then the message we got back from the API call response it's it's it's quite simple so yeah then we scroll to the bottom so that we can have a c transition after you send the message so that's a breakdown of what we're doing here now there's another thing that we did but we did not actually integrate it into um our build right now remember there's a context window what if the user is chatting with the AI and they've kept they chatting they're chatting they chatting and they break or they they they move past the 120,000 character um token character limit so we created an API call or sorry a custom function that would help us to divide the text and if you need this custom function you can actually ask for it so we create a custom function just for that this custom function it checks the open AI message data type right it takes in the list of open a message data type that we have in our application and it takes in a Max token limit so you know I think I put my Max token limit at 16,000 I didn't actually put it at the 120,000 right if I was going to build it I would have put it at 16,000 because I tested it and it works perfectly so what what we do here is we pass that entire list and if that list so basically first things we're counting if you don't understand the code here don't even it was a that generated for us but what we do is counting um all the text that we get from this open a message data type list and we're checking it based on four characters equal to one token four characters equal to one token and we're now matching it with this Max tokens that we have here so if you have 120,000 the moment all this message list passes 120,000 what this custom function will do is it will divide the message in half and then return the second half of the message so you know the old messages will not be counted for so that is just a fail safe just in case you know at some point while sending why the user has been chatting with the AI chat but you know the message gets too long so we're assuming that the ones the very very old messages are up up there are not necessary that is what we are doing in the background so I didn't really incorporate this but it was cool working with this particular function and testing it out just in case you want to use it so this is just just a simple breakdown of how we're able to do the um chat chatting feature right very very simple breakdown if there's anything I've missed anything you would like to know you can ask us and we'll make others other videos talking about this application now one other thing that we built was the text to speech feature uh yes so when we actually sorry when we actually talk to the a chat but and it it talks back to us so that was a really really unique feature that we actually added and if you watch FL um guide right you know this particular guide here you'll see how we were able to incorporate something like that because it's similar and we don't really need to emphasize on how we did that because that um you know tutorial is already there but the only thing that I would mention is that they did not add a code for um mobile devices right so that you can actually have speech text for a mobile device they didn't add that code and um they only added it for you know if you're on you know HTTP or like on online on web if you notice if you tried using that if you try watching that tutorial you notice that it's it's flawed you can use it for phone for mobile devices right so what we did was we created our own call or our own function which is also a custom action if you watch that video even if you're a beginner at least you have some understanding what we're doing but we created a custom action that works for mobile devices right and the cool thing about the custom function is that we can also change the voice because open has about um four or five voices let me check AI so they have about four VI voices that they they have saved Echo Fable alloy Onix Nova Shima so these different voices have different sounds obviously and you can switch between them so I'll explain what you're seeing here just in case you want to replicate this now if you want the code you can mention I'll also copy it and paste it in the in the in the in you know in the comment section for anybody that needs it um so let me just go to the custom code section and show you this is it here very simple we are just doing an API call to the um the text to speech feature of of of open right and um this is why passing in the prompt text the text that we want it to talk or speak out and then we are passing in an API key and then we are passing in the type of voice that we want this is where we can Define the voice that we want this section here so if the the the voice is equal to alloy it to speak you know it to sound like alloy if you know there just there are predefined voices that you can actually select so to change the voice remember this you can you notice this is a string is a string or actually passing into it a string so to change the voice what we did was we saved all the different types of voices that you could actually work with in um in an up state right AI voice so that is where we're saving all information so Echo Fable is a list of strings called AI voice list and then we have another string called AI voice which is the current voice we're using so we have you can call or display all these um different type of voices and if they tap on any one of the voice you update this field here and anytime we're doing we're passing call or we using that custom function is this particular field that we now use to determine which current voice are we using at that moment so yeah if you want that code you can ask for it now anything else you want to know about this project just message us or DM or comment and we would answer you thank you very much
