Google Gemini AI Is FINALLY Here! (Better Than GPT4 Turbo?)

so Google yesterday released their long awaited AI model and this model supports text it supports images it supports code it's a multimodal model that's a direct competitor to gp4 and so in today's video we are going to be talking about this model we are going to learn how it works we're going to try some examples see how it performs and then a little bit later in the video I'm going to be showing you a fully functioning proof of concept client that mimics this whole model's behavior and this app works with text it works with images it has history and you'll be able to view and or clone this app as well now before we get started as always if you want to level up your no code knowledge you want to get more content you want to get access to all kinds of apps and you want to join an amazing Community as well as support this Channel then you definitely need to check out our amazing patreon community and you can learn more about it using the link in the description below the video so if you head over to cloud.google.com you should see a page that looks something like this and here's what they say try gemin prompt our new AI model with text images video or codes and so this is Google's latest multimodel AI model that works with all of this in and some people have been saying that it even outperforms gp4 and so if you click on goto console you're going to be redirected to Google AI studio and so let's quickly talk about this Google AI studio and then test out some interesting promp example so if you check out this left hand pane you have a couple of options so first you can get your API key so if you click here you can generate a brand new key that you can use for your your own apps if you're going to be using this as an API now if you click on create new you can interact with this model and you can do that via several different ways so you have something called a free form prompt you have something called a structured prompt you have something called a chat prompt and last but definitely not least you have something called a tune model and here you also have a library which is going to be a collection of different prompts that you've been working with and you want save for a later use so that you can tune them later and so what we're going to do is we're going to click on create new and let's start with a free form prompt so if you click here you can enter a prompt and see how the model performs so for instance you can enter something like you know tell me the five reasons why the Roman Empire failed okay this is your prompt and you also have a couple of options here so you can choose the model that you're working with and Google gives us two models so you have gemin Pro and you have geminy Pro Vision okay so if you're just working with text then you should be choosing this model if you're working with images then you're going to be selecting this model and we're going to be covering this model in just a second as well so right now I'm just going to leave this right here and I'm going to leave all of this on default okay so exactly how it is I'm just going to leave it there and I'm going to click on run and see what the model comes up with so the model is thinking right now and as you can see it's generating text it's generating the answer and it's doing it streaming right so it's generating one sentence or like a part of a paragraph instead of you know letting you wait while it thinks of the entire answer right so it's very very similar to chat GPT although with chat GPT you're actually seeing a word by word response right you're seeing that word word word sometimes it's a a couple of words but with Google's geminy model I've noticed that you know it's responding like with sentences so you're going to be seeing like multiple sentences a paragraph here and there so that's a minor difference in the streaming Behavior not a big deal but something that I noticed okay and so this is the answer that it came up with right so we have five reasons economic problems political problems etc etc and you know you can come back down here and you can ask it something else right you can ask it something else what was the main what was what was the number one reason okay and you can say run and it's going to go ahead and run and it's going to give you economic problems okay and another thing that I noticed with Google is that if you are not training a model right so if you're working with an existing model you're not giving it examples the answers that it comes up with are very very short okay so with Chad GPT if you did that it would give you like a sentence or maybe even a paragraph but with Google what frequently happens is that if you give it like if you ask it a very um you know a very direct question right a question that doesn't need like a lot of explanation essentially uh it's going to give you a very short answer that's that's kind of how it is right you can kind of ask it to expand on that you can say something like uh expand on that point okay and let's see if it you know comes up with a bigger answer okay and so now it's it's actually expanding on it okay so the Roman Empire faced a number of economic problems that contributed to its decline okay so that's one thing that I noticed okay if you ask it a very direct question that doesn't need a lot of text to kind of explain it it's not going to give you a lot of text it's going to answer it uh very very succinctly okay so something like you're seeing here okay now you can also add an image right so if you come over here and you switch it to Gemini Vision you can upload an image and ask something about the image Okay so so let's go ahead and upload an image so we have some sample images you can also upload an image of your choosing but let's say we upload this pizza right here okay so we uploaded the pizza here and now I can ask it something about the image uh describe this image okay hit run and let's see how it performs now when you're working with images it's going to take a little bit longer okay so don't be alarmed it is taking a little bit longer I noticed but this is the answer it is a pepperoni pizza it's on a wooden table there's a pizza cutter on the table there are tomatoes lettuce and peppers on the table so I noticed the pizza I did not notice the pizza cutter okay so it's going to be noticing things that you may not notice but it's pretty accurate right no complaints here okay so this is one way to kind of interact with this model another thing that you can do is you can click here create new and you can do a structured prompt okay and a structure prompt is actually pretty cool right so if you click here uh we're going to exit out and so what you're looking at right now is a structured prompt setup okay and what's Happening Here is you're going to Prime this model with some input and output examples okay so if you like your model to kind of expand on things you don't you're not used to a model kind of um answering in a very very succinct fashion you want the model to kind of expand you can give your model examples and it's going to do just that so as an example let's say we do not give it any examples okay so we're just working with a stock model okay this is called a zero shot right CU we're not giving it anything if we give it a couple of examples that's called a few shot okay so let's say I ask it something like what's the capital of France okay so something like this and we run this guess what it's going to do it's going to come up with just one word okay and this is exactly what I was talking about Chad gbt at least in my experience would respond with at least a sentence uh if you have not trained a model or at least gave it a couple of examples so let's try again what's the capital of Mexico okay so if I run this again guess what we see we see Mexico City now if you don't like how it's doing it right I was you know I'm used to seeing a sentence okay I'm used to seeing a sentence but I could see the benefit of this as well right if you're building an app you just need just the answer right just the answer this could be really good but if you are looking if you want the model to respond in a different way then you can train it or like like prime it I call it priming because this is not really training the model right so here's what you can do you can do something like this what's the capital of France and here you can give it a sample answer so you can do something like the capital of France is Paris okay and you can do the same thing here what what's the capital of Portugal give it a couple of examples let's just copy and paste that and Portugal is Lisbon and let's go ahead and give it one last example I like to work in threes so let's do one more so how about Argentina and we can say the capital of Argentina is Buenos Iris okay so now we've given it three inputs and three outputs okay so now let's go ahead and try this again let's go ahead and give it uh one question so what's the capital of Canada okay so the answer should be you know very very differently right so let's go ahead and delete that what's the capital of Canada and we should expect an answer that looks something like this okay so I'm going to run that and see where it comes up with okay so there you have it right so you know it took all of this priming right these uh these examples into account and so let's give it one more what's the population of France okay let's go go ahead and run that and see what it comes up with okay so you see it says the population of France as of is estimated to be now if you did not prime it if you didn't prime it guess what it would answer guess what the answer would be well the answer would be just this I guarantee you right so if we delete all this and I delete all of this here and I delete all of this as well and let's go ahead and rerun it and see what happens okay there you see it okay so I knew that's going to happen because that's how the model is built that's how the model was trained it it gives you very very brief answers and what was cool about it is that we gave it examples on a different thing on on the capitals right and it understood that we're looking for a longer answer so this is uh so it understood kind of what we were looking for even though we were talking about something different so this is one way that you can kind of interact with your model and you can kind of tell it how you want this model to behave and when you're done so let's say we have what's the cap capital of France let's say we bring that back and let's say Paris and when you're done with your examples you're kind of happy with the model you can save this prompt right so you can say something like Capital uh prompt about Capital something like this and you you can hit save and now this prompt is going to be in your library here okay and as you can see I have a few prompts here so if you click on this prompt right here I have another prompt here capitals as well and then I have another prompt here also capitals okay so I was just kind of t testing testing and playing around with it okay now you can click on create new and you can do a chat prompt and a chat prompt is uh it simulates a back and forth conversation with a model so if you're using chat GPT you know exactly what a chat prompt is so if we click here uh you can write your prompt examples and then you can chat with the model so let's say as the model what's the size of Portugal okay so something like this and and it's probably going to respond just the answer okay there you have it just the answer so I can give it a couple of prompt examples I can do something like this what's the size of Mexico okay and I can say something like this the size of Mexico is something like this is uh square kilomet and I can give it another example what's the size of Chile the size of Chile okay so something like this and let's go ahead and I fix this right here okay something like this and let's go ahead and uh test this model again so I can ask it something like what's the size of Portugal and there you have it the size of Portugal is square kilometers so you saw how it changed the response even though we did not give it exact numbers we just kind of told it okay look I know you're very very succinct you get very very short direct you know direct to the point answers but we need something longer we need a little bit longer right and you can kind of prime it and now we you can give it more examples you know you can uh you can give it as many as you want you can do all kinds of interesting things but what's cool about it is that it actually learns it actually understands and you can clear all of this right so you can clear all of that tested with this or you can create a new test right so you can create a new test all together without clearing the existing test or you can delete it and now we have this prompt here so this is really really cool and right here you can change some of the settings like the temperature you can add a stop sequence uh you have your safety settings you have all of these things and you guys can learn more about like what all of these things mean I know when you regulate temperature the model is going to either be more creative or be more predictable so you can kind of play with it you can kind of change some of the settings now the last thing that I want to show you is if you click on create new and you go to tune model and once you're on the screen what you can do is you can tune a model from an existing structure prompt or create one by importing from Google Sheets or a CSV right tuning only works with text at this time we recommend at least 100 to 500 examples and so if we select this prompt right here we only have one example here and it needs 100 to 500 examples okay so you can either you know create your prompts here with the examples manually or you can just import a file that you probably created uh in Google Sheets or a CSS V now probably it'd be easier to do all of this in Google Sheets that way you can just you know import it directly here instead of kind of working with your examples now these examples here are better for priming the model right so you're looking to make slight changes you don't like how it answers uh like what I was talking about how I like the answer to be a little bit longer at least that's that's what I was used to and when I gave it few examples it correctly started to respond with longer answers but if you're looking to tune a model right you need to give it lots and lots of examples okay and so these examples here are just not going to be enough right this is going to be a different kind of task and so once you upload your data here with your examples the more the better obviously you can fill all of this out and choose a model that you want it to be based on okay and you also have some advanc settings etc etc and you can just click here and you're going to be tuning it now all of this is awesome but what excites me the most is the ability to integrate an app that I'm going to be building perhaps or or an app that I've already built with a model here so something that I was doing with Chad GPT and you can easily do that via an API and so what's cool about it is let's say you you click here you're working with this prompts you have this model here well regardless of where you click you can simply click here on get code and you will have uh a little code snippet in different languages for different platforms that essentially allows you to access this model to work with these examples that you're using to prime your model and so for instance if you're working with JavaScript it gives you a little code snippet where you just need to enter your API key that you get here and you have a little app that has already the examples that it's going to be sending to the model and essentially it's plug in place right you can simply copy all of this and you have a little app that's going to be working for a specific platform okay so this is really really awesome because let's say I'm working with this model right here you know I I've created my prompts I have you know all of these examples here I like I've tested the model I like how it's answering me okay so now I want to build an app I want to build an app for users right for end users maybe for businesses maybe for consumers I want to build an app so all I need to do is click on get code and now I will have access to this exact model and as you can see it already has this chat history right which includes all the prompts that you know I've used to Prime the model right these these form the beginning of the chat history essentially which is the right approach and everything is done for me so whether I'm doing python Android Swift JavaScript or for curl like for simple request it's all done for me all right so now that I've given you an overview of this new AI model from Google we talked about some of the ways that you can prime this model by giving it examples inputs and outputs let me show you a fully working proof of concept app that I built with a tool called flutter flow which is my favorite no code Builder right now it's a tool that essentially allows you to build pretty much any kind of app that you want so right now we're going to jump into flut flow so that I can show you how this app works all right so here we are inside a flutter flow and the app that I want to show you is a fully functioning proof of concept app that I built that accesses this new Google Gemini AI model and so you can chat with this app you can do all kinds of things and so before I show you how actually build this model let's go ahead and run this app so that you can see how it works all right so here's our app and what you're looking at is a chat screen where you can interact with this model so for instance you can ask it a question so let's say what is what's the meaning of life so a very very general question hopefully the model can guide us in the right direction so I'm going to click on send and the model is thinking right now and so as you can see this model also supports streaming just like chat GPT and as a result we have this beautiful streaming Behavior we can also ask it something else what are the five major reasons for the collapse of the Roman Empire okay so another very very important question that the model needs to think about and it needs to synthesize an answer that's going to be longer than just a sentence so I'm going to hit send we're going to wait it's thinking as you can see it's streaming already right it's filling this out it's generating text there we have five reasons okay so we have 1 2 3 4 5 now this app supports history as well so as you're talking to it it's tracking all the previous messages and so you can ask it something uh about one of the messages that you asked before without repeating yourself uh from the start so I can ask it something like what's the main reason okay so something like this it's thinking there's no single definitive answer to the question of what was the main reason okay so there it is now obviously the only reason it was able to answer was because it knew one of the previous questions okay so it's tracking his history and we can uh ask it something else give me another reason okay and it's going to go ahead and refer to its previous answers and questions and it's going to come up with another another major reason okay so there's the reason it's uh streaming which gives the user that nice feeling that you know instant gratification that they're getting the answer in real time right and in my view that's a lot better than you know apps that make the user weight now another thing this app supports is images so remember the Google Gemini AI model is multimodal it supports many different ways that you can interact with it one of them is text and other is images so if you click here we can actually upload an image and so let's go ahead and pick this bear image here select this bear and now as you can see this icon change and that means there's an image that's part of the context so now you can ask it something about the image and it will hold hopefully reply so we can say something like describe the image in great detail okay so let's go ahead and send it and we see the image it's thinking let's see what it comes up with and this is going to take a little bit longer because um it's obviously processing the image and in this case it described it fairly succinctly like it typically does and the responses the picture shows a large brown bear in the forest okay so even though we asked it to describe it in great detail uh it still came up with just one sentence so this kind of has been my experience uh when it comes to this model in general but also with images uh unless you kind of prime the prompt you kind of give it some examples etc etc it tends to come up with shorter answers than for instance chat GPT does okay but maybe your experience will differ and so obviously you can continue to interact with this model you can upload new images you can ask it other questions about things that you've asked it before it works very very similar to chat GPT so now that you've seen this proof of concept app let's go ahead and jump back into FL flow so that I can show you how I build this app all right so here we are in flut oflow and the first thing that I want to show you is that I am not using any API calls right so if you click here uh this is where you define your API calls and typically if you're dealing with AI mod mod s you're dealing with you know third party um resources some kind of apps or tools somewhere typically you're going to be connecting to them via an API but I'm not doing that here because I had to create my own custom module so that we can talk to this model and support streaming because if you would have used apis to access this model you would not have that streaming behavior and so as a result I needed to to do it another way which I'm going to show you in just a second so if you click on this widget tree you going to see all the pages and this app only has one page where the user is interacting with this model via that familiar chat screen and so we have this homepage here and what I'm doing here is I am listing all the messages and at the bottom we have the input okay so what kind of messages am I listing right so if you click here we have here a way that you can define a data type right so if you remember you have uh these primitive data types or these simple data types such as string integer double etc etc but a data type allows you to combine all of these simple ones into a more complex structure okay so in this case I have a message type that holds a specific message so this is going to be a message that I may be sending as a user this may be a message that I'm going to be getting back from the AI from the model essentially what you're you're looking at when you're looking at a chat screen you're looking at a list of messages right some are going to be from me some are going to be to me right and each of these messages has these fields so we have the type of message the role the actual message content the image data as well as the timestamp so that we know when the message was sent and I'm using this in order to sort the messages so that the newest messages appear at the bottom okay now that you've seen this data type if we go into App Store I have just one app State variable and app state allows me to store an Access Data anywhere in my app while the app is running so when the user starts the app this app state is empty and when the user closes the app exits the app this app state is destroyed this is very very helpful to me uh when I need various pieces of data and I need to display it I need to update it anywhere in my app very very useful to me and we just have one messages uh appstate variable that's essentially a list of these messages and there's no data here because uh when we start running the app we have no messages right we start with no messages and as the user is interacting with the model uh we are going to be adding more and more messages okay so now that you've seen kind of the data that we're working with uh this UI is going to make a lot more sense so the first thing that I'm doing I have just the basic UI my screen I have a list view here and this is a list view that displays all the messages in the App State so when the app loads there are no messages and in fact I I just thought of something is that when the app loads you can display uh basically a message that says there are no messages start chatting with the um with the app now and you can do that by configuring uh this uh show empty list widget okay so this is something that you can do later on for the future and this would be good behavior right so if you're part of our amazing patreon Community you're going to be able to view and or clone this app and this is one of the things that I would add right I would create a an image either upload an image or upload a component create a component that displays a message if there are no messages because when you load the app it's just an empty screen which is fine for testing but probably not ideal for production okay so we have a list of different messages and here I have a stack which means that I want to display different things condition so anytime you use a stack you can put a lot of stuff and you are essentially putting one widget on top of the other right if you don't have a stack you're going to be aligning those widgets next to next to each other right either horizontally or vertically but if you have a stack they're going to be aligning one on top of the other and you don't want that behavior right well maybe you do in some situations but in this case I definitely do not want and so what I'm doing is I'm creating a stack but I also have different rows and these rows are going to be displayed conditionally so we have this row other that's going to be displayed for messages from the AI right so other messages not my messages other messages and we have R mine that will display my messages and the reason I decided to do it this way is because I want these messages to be aligned either left Justified left aligned or right aligned depending on you know whose message it is right so if it's my message I want I want it to be right aligned if it's the ai's message the model message I want it to be left align this is kind of what we're doing here right we have two rows and they're never going to be displayed at the same time they're only going to be displayed one or the other and this row other as you can see it's left aligned right this main axis alignment is left whereas row mine is Right align and if you scroll up you can see that both of them have a conditional so roll equals model which means this is not my message this a message from the AI we have this uh condition here whereas R mine is user okay so that way I have this nice behavior and that's very very common uh with any of the text messaging apps you see your messages on the right hand side you see the other person's messages on the left hand side now inside the row we have a card to make it a little bit nicer with a nice kind of um shading and this kind of um this background uh background color this background kind of border and all of these things make it really nice and then I have a container because I need to limit the size of the text I don't want the text to go all the way you know to the right and you know take up the whole space I wanted to take up a little bit so I'm giving it a width of 300 which is almost the entire screen but not really right almost the entire screen I don't want it to go beyond and then I have the actual message this is the actual message and the same thing I'm doing here we have the column but except when it comes to my messages I also have an image here which displays the image that the user is dealing with with now right so if the user uploads the image and they're chatting with the image we're going to be showing that image so that they can ask questions about that particular image now on the bottom is the second half of the functionality of the page right where we have a part here on this this top part where we're displaying the messages but on the bottom is where the user is going to be entering the messages right so if we scroll down we have this one row where lots of things are happening right so uh the user can enter a new message they can hit send and there's lots of things happening I'm going to show you all of that in a second but this first thing here is if they click here they're going to be uploading an image and here they just simply upload the image to the app we're not storing the image anywhere in superbase or Firebase like I do with some of the other apps we're simply uploading it into memory right because we're going to be using it we don't really need to upload it anywhere uh we need that image to be with us right so that we can kind of send it to the model here and this icon here C clears all of the images right uh so if you upload an image and you're deal you're talking to the model you're going to be asking about that image cuz the image is part of the context if you click here you essentially clear all the uploaded images so it's like you've never uploaded anything the model does not see any images and that's kind of the behavior right you either you know have a text conversation about life the meaning of life or a Roman Empire as in as it happens to be in our case or you're talking about an image you upload an image want to ask various questions about the image so you upload the image here you remove all the state here is where the input for the messages and this send this is where the magic happens okay so if you open this up and you click over here what we're doing here is the first thing that we're doing is the user enters the message we need to create that message and add it into our app State because remember our app state is a list of messages so this thing here it saves user message message okay so we have this messages up State we add it to the list but we're not adding just a string or number we actually create a message type and we fill it in all right so we fill it in with all of these things and that way we have a one message we have the one message that's part of the App State cuz when the app loads there are no message now this second action is where all the magic happens okay this is a custom action that I've built uh that supports streaming supports text supports images and what's nice about it is that if you can if you are going to be cloning this app you don't have to worry about all the custom code right cuz all you need to do is fill in all of these things so you need to specify your API key you just need to connect it to the rest of your app right so it needs a message which is going to be your input message it needs to know the type the image data all of this uh should be left alone the only thing you really need to do when you're going to be cloning your app and I know some people are going to be asking me hey my app is not working etc etc the only thing you really need need to to worry about is this API key right this API key is my API key and there are no guarantees it's going to work for you so you need to go out you need to come back here and need to get your own API key that's the only thing you need to do if you're going to be using this app that I built here now this is a custom action it's essentially a rectangle that you see on the screen right so these two are built-in actions right this is a built-in action this is a built-in action this is an action that I built myself and that's one of the you know of the nicest things about FL flow is that lots of built-in stuff but if you want to you know go above and beyond like in this case with streaming and a couple of other things uh you have to build your own custom action cuz there's no uh built-in way to to do it right now in flutter flow so if you click here edit custom action you see this custom action now you don't have to worry about all this this is just a black box for you right you don't have to worry about any of this here uh this is where we send the request the actual model where we get the requests as you can see I I just want to show you like right here we have a stream request you don't have to worry about all that right this is a noode channel and this is just a way to make our app behave a certain way and what's nice about it is that if you clone this app you don't have to worry about it right you don't have to worry about it but you can also build it if you want uh if you know a little bit of coding uh you're willing to research etc etc you can extend FL of flow you can extend it make it do something special which is always a benefit but it's an optional step you don't need to do that but of course if you can clone this app by joining our amazing patreon Community then you you're going to have all of this here and you're going to have a fully working uh proof of concept app and furthermore you can obviously customize it uh you can personalize it you can do all kinds of interesting things uh with the help of chat GPT or what have you uh to get this to work exactly how you want want it to work but right now it has some basic functionality as you've seen in the demo all right so this is our custom action and Les but not least we have a very very uh simple action here that clears uh the text fuel so in this case we're just clearing the input message because you know when the user enters a query they sent it it's common Behavior accepted behavior that they want that uh you know that text box to be empty all right so this is the app right here lots and lots of stuff is baked into this app and you can easily clone this app and experiment with it and kind of play around with it by becoming a member of our amazing patreon community and obviously when you join our patreon community not only are you going to get access to this app right here you're going to get access to all the apps that I build are all there I'm not hiding any apps every single app that I build are on patreon so that means you can easily View and or clone them start kind of working with them start modifying them start tinkering with them or simply just look at them and see how I build a certain piece of functionality and that's not all you're also going to get access to extra content so things like q&as behind the scenes content our patreon supported masterclass Series where I do deep Dives on specific topics that the community wants to know more about and in fact just like a week ago I did a very very thorough and very very long extensive Q&A session and and a little bit later I also did a deep dive on a very very popular upand cominging integration tool that a lot of people really really likeed and if you've been watching my channel you probably know exactly which tool I am talking about and also when you join our amazing patreon Community you're going to be supporting this Channel and supporting my work and that's highly highly appreciated and so if you've gotten any value from my channel maybe i' you've learned something or something click or you didn't know about this particular tool or you didn't know how to connect it to another tool then you're going to get aan more value by joining our amazing patreon community and you can learn more about this amazing Community via the link in the description below this video

Channel: James NoCode

Views: 5,933

Keywords: google gemini, google ai, flutterflow nocode app, flutterflow code nocode

Id: 5Z6f2VIHHHo

Length: 36min 16sec (2176 seconds)

Published: Fri Dec 15 2023