Build A Complete AI Image Recognition Application with NoCode/FlutterFlow! (FULL TUTORIAL)

surely you might have heard about the concepts such as artificial intelligence machine learning deep learning and neural networks this area of computing is rapidly advancing and allows you to build amazingly useful applications relatively quickly and easily so in today's video I will give you a general overview of machine learning and how it works I'll show you how to build a no code app that uses machine learning to recognize all kinds of different objects and then even test it out on a real device emulator and as an extra bonus later in the video I will also show you how to build your own custom model to recognize any objects that you may deem important furthermore the concepts discussed in today's video touch upon lots of advanced aspects of building Norco apps so even if you're not looking to build this specific app you'll still get a lot of knowledge and a lot of value that will be useful when it comes to building just about any kind of app as always any app that I built in today's video you'll be able to view and or clone from my patreon page which you'll find in the description below alright first let's talk about machine learning what it is exactly and why it's so useful so here we have a diagram which gives you kind of a simple understanding a simple overview of how machine learning is compared to traditional programming now in traditional programming you give the computer two things you give a data and rules or instructions and you get back answers or results and this is the process that is the same with just about any kind of app that you build right whether the app is just processing some text or it's a UI app that interacts with the user you have some data and then you tell the computer what you wanted to do so you know if you're processing some text Maybe you wanna you know remove all the blanks all the spaces or you want to you know add a little bit of extra text somewhere or you want to split a sentence into two parts you are essentially giving the computer instructions and you get back results and that's kind of what is programming really in a nutshell you are essentially telling the computer what to do you look at the results and if it kind of does what you wanted to do uh you're good to go if not you need to find bugs maybe add new features any kind of app that you build with any kind of programming language this is really the flow on the other hand with machine learning it's a completely different process what we're doing is we're giving the computer data but instead of giving it rules and instructions we are giving it answers or results and what we want the computer to do is we want the computer based on those answers and then the data we want the computer to come up with the rules and instruction questions that kind of match up so as an example let's say we're doing image recognition right so um I'm gonna feed it a lot of pictures of cats I'm also going to feed it a lot of pictures of dogs but I'm also going to tell the computer okay this is a picture of cat this is another picture of cat here's you know 10 000 pictures of cats different cats and different environments but these are all cats so the computer knows and now I'm also going to do the same thing for dogs okay here are you know ten thousand dogs uh different environments different breeds different backgrounds different pictures but there are still dogs and what I want the computer to do is I wanted to kind of find those patterns which is going to be nearly impossible in traditional programming right you won't be able to do it with traditional programming because this is a hard problem and you won't be able to kind of capture or all the rules right if I give you two pictures of cats and maybe two pictures of dogs uh you'll be able to probably write a code that you know takes into account those two examples but if I give it 10 000 pictures of cats and 10 000 pictures of dogs uh you're gonna have a relatively hard time to write a computer program using traditional programming and this is where machine learning comes in this is where we're essentially feeding it a lot of stuff and the computer using math and a bunch of algorithms it's able through trial and error find out patterns that connect all of the pictures of cats together and so once you feed the computer 10 000 pictures of cats that next picture let's say that ten thousand and first picture of cat the computer is gonna figure out with a relatively High degree uncertainty that that's a cat even if you've never fed that exact picture of cat before and same thing for dogs or just about any kind of object now how does this work well this works by building something called the neural network and you don't really have to worry about all this I'm just giving you a general overview okay we're not going to go deep into this but in a nutshell we have the input layer right and these are going to be with pictures right so in this case these are going to be like let's say 10 000 pictures of cats we're going to have an output layer and you're gonna label those pictures you're gonna tell the computer these are cats okay and next you're gonna have a bunch of hidden layers and this is where it's essentially trying to figure out it's trying to build those patterns trying to figure out what what you know what do all of these pictures have in common and then you're gonna have the output layer so for instance if you're doing classification where you're feeding um you know a ton of pictures of cats and also ton of pictures of dogs you're gonna have two neurons here in the output layer because you're gonna feed an image and you're either gonna come back with a dog or a cat Okay and this will depend on your specific application if you're let's say you know trying to figure out uh image recognition for let's say five different animals or five different objects you're obviously gonna have five neurons in this output layer okay and if you scroll down you will see that this is kind of how it works with image recognition right we're feeding an image and we're using the pixels of this image as input so if this image is let's say you know 10 pixels by 10 pixels that's 100 pixels total 10 times 10 so you're gonna have a hundred pixels and you're gonna have this hidden layer right and it's basically taking each pixel and comparing it to some of the other pixels trying to get some value and you you have these connections between pixels and these connections are driven by weights so these are weighted connections so if the computer comes up so let's say this is a bird and at the first try things this is a dog but you tell the computer this is a bird you are incorrect it's gonna go back and it's gonna change some of the weights here so that the end result is a bird so it's it's basically learning it's learning so after you feed a lot a lot of data um it's gonna It's Gonna Learn relatively uh at a pretty high level right it's gonna learn at a pretty high level and we'll we'll do some learning a little bit later in the video and so that was a basic overview of machine learning and that is pretty much all you need to know in order to kind of understand it at a higher level obviously there's a lots of more things that we can talk about but for the purpose of this introduction uh this is enough to kind of you know hit the ground running now let's go inside flutter flow and let me show you the kind of app that we built to do image recognition Okay so here we are inside of flutter flow we have two pages here we have a login and we have a home page on the homepage age is where the actual magic is we do need the login because in order to use Firebase storage where we are going to be uploading the images to we need to enable authentication so if we come over here we have authentication enabled okay and if we come to Firebase we also have our Firebase project here and we also have Firebase storage that we're using and the reason for that is that when you are uploading images right so this button right here uploads the image it shows you the image picker and then you choose the image and it uploads and it's going to display it here when you are doing image uploading it it's going to be storing it inside Firebase storage and not only do you obviously need to enable Firebase you need to connect to your Firebase project but you also need to enable authentication because typically for this example we don't really need authentication but because we are you using Firebase storage we need to enable authentication in this app so I have three pieces of elements here I have the image that's going to be displayed once it gets uploaded we have our custom widget that I'm going to show you in a second and then we have the upload button so these two things here right so this image and this button this is standard flutter flow this is our custom widget that's gonna run on the uploaded image and it's going to try to figure out what kind of image it is so whether it's a dog a cat or something else now this thing here once we upload we have several actions so obviously this is our regular flutter flow action that has the upload for a video right this is generally available anybody can do it and then we have a condition that checks if the media is uploaded this condition is provided by flutter flow so anytime you're doing this this kind of action you're going to have access to this condition so we're basically checking are we still in the process of upload if we are if we are still in the process of uploading this image you want to just display uploading okay if we have finished then we want to do something else in this case we want to update our fire base firestore DB with the new URL right so I have this reference of this document and I am basically updating this document with the newly uploaded photo and video and this is my Firebase uh store document this is my firestore database and I have just one Collection image recognition it just has one document with one field and the purpose of this is that we need to know where the image is being stored at what URL because once we upload the image we we get back the URL in our Firebase storage here's my Firebase storage where the images are going to be eventually uploaded I don't have any images there now but as soon as we run the app and upload the image we're gonna have images here and so if we go back to the app here a couple of other things you need to understand if we come to our firestore we have the schema here image recognition which is the collection and we just have one field and obviously we need the schema in order to update those records now if you're going to custom functions and we're going to custom widgets we have something called an image recognition widget okay and the purpose of this custom widget that we have here is really to grab the image that was recently uploaded where the URL is stored in our firestore DB and then run image recognition on that image and then tell us what it thinks that image represents and so here is our very very simple Uh custom widget here this widget is using a couple of built-in packages the main one is called TF flight and this is a machine learning library that allows us to do image recognition among other things as well we're also using an image picker and an image downloader because anytime we are essentially uploading an image that image is stored on the internet and we need to fetch that image and store it locally on our device so that we can do image recognition I'm going to talk more about this in just a second now because the library that we are using to do image recognition is only designed for mobile devices it does not work in a desktop or a web environment we can't preview this app in flutter flow and so what we need to do is we need to run this app on a real device emulator and if you go to flutter flow this is something that you have to do anyway not only is it a good idea to preview the app inside Florida flow but it's also very important to actually test it on a real device or at least a real device emulator and so this is from flutter flow documentation you can just Google for testing on a mobile device and this is the instruction right here and so what you need to do first is you need to go to flutter.dev and you need to download flutter okay so if you scroll down uh you can hit you can click on get started and you can download and install uh flutter for any platform okay so regardless what kind of computer you're using you can easily install it they have very very easy instructions that allow you to do it the next thing that you want to do is you want to search for Android Studio okay this is a free development environment okay and so you can click here download Android studio and you can just download it and you can download it for your environment as well once you've done those two things the next thing you want to do is you you want to go back to flutter flow and you want to click on developer menu and you want to say download code okay so if you click on download code it's going to zip it up and it's gonna essentially allow you to download all of all of the code once you've unzipped your project the code that you downloaded from flutter flow you're gonna see it looking something like this this thing right here is exactly this app here that I downloaded and unzip the next thing you want to do is you want to open this whole project here in Android studio and this is exactly what I did here this is my project test Tab 3 that I downloaded this is test app 3. and now I have it open here in Android studio and right now we are looking at a flutter flow generated flutter project and do not worry we're not going to be doing any coding at all because that has been done for us courtesy or flutter flow and really that's what flutter flow is it's a tool that allows you to generate flutter code because that is what you will eventually be launching as a real app now the beautiful thing about this Android Studio environment is that now instead of previewing this app in flutter flow we can actually run the sap on a real device emulator so you can run it on an iPhone 14 iPhone 13 Max Mini regular etc etc emulator you can also run it on various Android emulators and this is a lot more reliable than previewing the app inside flutter flow if your app runs perfectly inside an emulator you can be very very sure it's going to run perfectly on that specific device now in my custom widget I am specifying some files namely two files the first is model and the second is labels this is very very important because you cannot do image recognition without a model and you need the labels in order to understand what exactly we are looking at so I have these two files and you can get these two files by searching for Tia flight on pop Dev you can just click here go into example go into assets and you have a bunch of files now the files you want to download are these two files mobilenet ending in Tia flight and mobile net ending in txt this is your labels so that way it you will know what to display when it recognize the fish or uh a dog or something else and this is the model and the model is essentially all the rules that the computer figured out when you were training it with lots and lots of data this is really the rules this is really very very important so you're gonna download these two files and once you you've downloaded you want to put it inside the assets folder I just have it inside of images it doesn't really matter where you put it and I am referencing these files as it's Imaging because this is inside assets directory images uh inside my custom widget this is my custom widget right this whole file is my custom widget and that is all you have to do and now we are ready to run this app and get it to do image recognition now the way to run this app is that you need to pick where you want to run this app so if you click here you can run it for on a web uh on a desktop you can open an iOS simulator and then you have various emulators now if you come over here on your right hand side you have a tab called device manager and this is where you can connect either your physical device or create an emulator which is a lot of fun because running an app on the emulator is almost like running your app on a real device now I do not have an Android device and so this is a great way to test my app to see if it works on an Android device so once you're on the screen you're going to click on create device and you're going to pick the kind of device you want to run your app on so I'm just going to pick a pixel 6 Pro here I'm gonna say next I'm gonna say next I'm gonna label it pixel pixel 6 Pro I can change the operating system this is fine and I'm gonna click finish and so now once I see this emulator here I can click this button and I can actually run the emulator and what's that's gonna do is gonna start this instance of the emulator and obviously you can have multiple emulators uh you can have maybe a couple of iPhones an iPad couple of pixels maybe a Nexus here and there a Samsung phone Etc and as you can see we have this pixel 6 Pro emulator that's booting up right now right and these emulators that are built they resemble the true device they're really really awesome and so so here we have this emulator up and running okay it has a couple of apps there you have Google search and now what we can do is we can come to the top area here and we can pick this emulator so you see it's already been selected and we are going to run our app next you want to hit display button and that's going to run your app on this emulator that we specified and so it's compiling the app and it's gonna run it here okay and here is our app it's running inside an emulator which is a million times more reliable than just previewing the app on flutter flow so here we see a login screen let me go ahead and log in and you see it even emulates a real keyboard here okay so I'm gonna go ahead and log in yeah I'm gonna hey I'm gonna click on sign in and now I'm seeing the main page okay so I can click on upload and I can pick an image from a gallery so if I hit gallery and as you can see I have no images here okay I can connect it to Google Drive photos but because this is a brand new emulator I need to put images on this emulator now fortunately I already went ahead and downloaded a bunch of images so here I have a German shepherd and here I have a picture of a very cute cat and all you have to do is drag those images there so I'm going to select them drag them here and they're gonna appear in our download folders and so we're gonna pick one of the images here let's say I want to pick a German Shepherd I'm going to select that it's running it's uploading the file this is the German Shepherd and here's the image recognition custom widget that's running in our emulator and it's telling us the type I guess 236 German shepherd with a probability of 99.9 you have to multi apply this by a hundred okay let's go ahead and upload the cat I'm going to hit upload I'm gonna go to gallery and I'm gonna select the cat okay let's see what happens it's uploading the file it's grabbing the file from fire storage and this is the results we got so it's telling us there's a 37 chance this is a Siamese cat 22 Egyptian cat or 12 Savvy now I'm not really a cat expert so I don't really know if this is a Siamese cat or some other cat but at least it got that right at least it knows this is a cat now let's go ahead and upload a couple of other dog breeds to see if it identifies whether this is a dog and can actually identify the specific breed as well so here I have a couple of other dog breeds I have here what looks to be a Husky and here is another dog and we're gonna select them and just drag him here once you do that you're gonna see in the status that these images have been copied and now you can go into upload you can choose your gallery and now you have these pictures inside of the emulator so let's go ahead and pick the Husky and see if it correctly identifies it okay so here are the results Eskimo dog which is 76 Mala mute 13 or Siberian Husky which is 11 so it recognizes this is a dog and it it's giving us various probabilities to the actual um breed of the dog let's go ahead and try out that second image of the dog we're gonna hit upload gallery and P and select this dog right here it's uploading that file now it's pulling that file showing it to us and this and these are the results Gordon Setter 62 Rottweiler 33 Okay so if you are a dog expert maybe you can comment whether it got this right or not now now do not be too concerned with the accuracy of the prediction when it comes to a specific breed those things are part of the actual model and models are all different some models are more accurate than others some models have you know 100 samples other models have thousands and hundreds of thousands of samples at the end of the day this is going to depend on your computing power this is going to depend on how many images you feed it but here we have a relatively simple model a relatively easily accessible model and that seems to be doing pretty well now if you are wondering well how can I create my own model how can I create a model based on my own input that categorizes uh various pieces of data such as images or anything else according to my own categories well actually that is also very very easy to do and so now I I want to show you how you can create and train your own model according to your own specifications and once we've trained the model and the kind of data that we want to recognize on our own samples we can import that model into our app and later run the app with our new model in order to recognize our own specific images that we want to actually figure out what they are of now in order to create and train your own custom model you want to head to teachable machine and this is a product from Google and you can find it at teachablemachine.withgoogle.com and here you can very very quickly and easily create and train your own custom model and you can do an image project an audio project or a post project okay and they're also going to have more models uh sometime in the future and we're going to do a standard image model and now you need to specify how many classes you're going to have so you can start with two classes meaning you're going to be classifying uh two types of things so maybe cats and dogs or fish and birds or something like this obviously if you want to classify some things that have many categories like different breeds of dogs you're gonna have multiple classes but we're just gonna start with two classes here just to keep things simple now I went ahead and I downloaded a bunch of image samples for different breeds of dogs so I have images for Japanese spaniels Maltese dogs Pekingese etc etc and you can easily find these kinds of images on all kinds of sides that have sample data sets Okay so let's start with the Japanese spaniel we're gonna have a Japanese spaniel so I'm gonna call this uh Japanese spaniel here and I'm going to say upload and it's telling us to drag and drop the images here I'm going to come here I'm going to select all my Japanese spaniels and I have 185 samples I'm gonna drag him right here and it loaded the samples here these are all Japanese spaniels all kinds in different environments different backgrounds etc etc and I'm going to create a second class now for the second class I'm gonna do a Maltese dog okay I also have well in this case I have 252 samples so I'm going to say Maltese dog and I'm gonna say upload and I'm gonna drag and drop them right here and it did the same thing it essentially uploaded them these are pictures in all kinds of environments all kinds of backgrounds and the next thing we need to do is we need to train the model I'm gonna click train my model it's preparing training data and now it's training the model and while it was training the model it's basically trying to figure out all all the things all the patterns that connect all of these images together and same thing for these images and the model is basically a collection of rules and that way anytime we feed it a new image in any one of these two categories so whether a Japanese spaniel or a Maltese dog it's gonna figure out hopefully whether that new image is is a Japanese spaniel or a Maltese dog here we can export the model but before that we can actually preview how the model behaves if we upload any of the images here so let me go ahead and search for an image a random image of a Maltese dogs and I'm gonna hit images and let's say this one right here I'm Gonna Save it and now I'm gonna drag and drop this newly downloaded image right here okay let's see if it recognizes it okay and it's telling us it's a hundred percent chance of a Maltese dog because this model trained on 2 252 samples of Maltese dogs and so now we know that this model kind of works at least to a certain degree we can export this model and here you want to pick tensorflow Lite okay we're going to be running it on mobile devices select that and download my model so now it's converting your model into Cloud this may take a few minutes okay so now it finished processing the model and it even downloaded right so this is the downloaded model which are essentially the rules that allow us to categorize different images in this example this is the model file right here if we double click on it we're going to come here and we have two files here we have the actual model here which is only two megabytes and we have labels which is in our case our two labels whether it's a spaniel or a Maltese dog and if you open it up we see that the first one is a Japanese spaniel 0 and one is a Maltese dog which is kind of what we have here we have only two labels now the next thing that you want to do is you want to go back to your Android studio and you want to drag those two files here okay I'm gonna drag him right here I'm gonna say okay and I'm going to overwrite my old file so now I have this model on quant.tflight and labels okay so now if I go into my custom widget I need to specify that those files so I have assets images assets images and I'm going to say model underscore on Quant right here model tflight and this is labels.txt so now I have these two files that model and the label that we just generated and trained sample images on we have it as part of our project here we have it referencing it here and now I'm going to start this app in our pixel 6 Pro emulator and see if it figures out at the right dog breed so I'm gonna run this app here all right so our app is loading right now now before we can upload we need to drag that image into our emulator and this is this Maltese dog we're gonna drag it right here it tells you mdoc2 is copied we're going to going to upload gallery and we should find it right here if you can't find it simply go here and go into downloads and there it is we're going to select that now it's uploading it and it's telling us Maltese dog and as you can see it's one which is a hundred percent remember you have to multiply by a hundred let's try something else let's find a picture of a Japanese spaniel and see if it detects it as well so I'm gonna say Japanese spaniel here and here is our adorable Japanese spaniel how about this one anyone any one of these should work so let's try this one we're gonna hit save we're gonna save this spaniel this is our spaniel right here we're gonna go back to our Android Studio to our emulator drag and drop this right here it tells you it has been copied we're gonna go to upload gallery and here is our uh image here we're gonna double click on it it's uploading it Japanese spaniel 100 so there you have it we've just created our own custom model that categorizes images of dogs into two breeds either a Japanese spaniel or a Maltese dog and so you have a lot of options when it comes to machine learning image recognition you can create your custom model or you can find publicly available models that have been already trained on hundreds thousands even hundreds of thousands if not even millions of different samples and obviously they're going to be a lot more accurate compared to our custom models that have only been trained on you know 250 Sam samples or 180 samples and so you can create your own custom model or grab one of the publicly available models into your own app and once you grab the model whether you create your own custom model or you are using one of the other publicly available models all you have to do is drag and drop it into the assets folder make sure you reference it here and now you can run it on just about any other emulator you can also run it on multiple emulators if you want you can create another emulator here and once you're happy with how the app runs inside of a real device emulator whether it's an Android emulator or even a iOS emulator the next thing is obviously packaging the app and launching it on a real device and for that I direct you to flutter flows documentation here and remember once the app runs perfectly on a emulator device you can be 100 sure that it's going to run perfectly on a real device as well which is kind of the point of these emulators there's lots and lots of emulators that you can test your app on so for instance if I come over here I have device manager here and I can create another device look at all of these devices that I can create and I can test them on different emulators and following that simply go on to flutter flows documentation and here you can read on actual running and launching the app on a real device which is going to be very very simple very very easy and most importantly you're not gonna see a lot of surprises because you know you've run the app on a real emulator now remember if you are interested in viewing and or cloning this exact app and basically duplicating my whole flow and and testing out the app with with the models here or creating your own custom machine learning model you can get access to this app on my patreon page on my patreon page you will get access to all the apps that I've built inside of flutter flow as well as some of the other no code Builders and this will allow you to save a lot of time and hassle because you will essentially be able to duplicate clone this app and run it inside of an emulator in just minutes because you're essentially going to be getting access to everything that I have here plus I'm also going to include special resources in this project on my patreon page as well and remember on my patreon page you're not only going to get access to all of these apps you're gonna get access to extra content such as q and A's live streams various behind the scenes episodes as well as access to my new Master Class series on in-depth tutorials when it comes to specific features of flutter flows and so if you are interested in taking your no code knowledge a couple of levels up becoming more productive becoming more efficient understanding what works and what doesn't joining my patreon community is a wise choice if you haven't done already so and additionally it's a great way to support my channel and support my work and so if you haven't yet signed up I really do hope to see you there and so that is all that I wanted to show you guys today this is a video that I wanted to make for a very very long time because I knew it's gonna provide you a ton of value and give you a ton of ideas that you can utilize in your own project so I really hope you've gotten value here if you did give this video a fat like leave a comment below and subscribe to this channel if you haven't yet already thank you so much for watching and I'll talk to you real real soon [Music]

Channel: James NoCode

Views: 18,226

Keywords: flutterflow tutorial, flutterflow, flutterflow machine learning, nocode machine learning, image recognition flutterflow, image recognition nocode, how to build an image recognition app, how to do machine learning, tensorflow lite

Id: G0h5DAcvz6U

Length: 36min 12sec (2172 seconds)

Published: Thu Dec 01 2022