Building the Netflix AI Recommendation System with Supabase

what's up not just developers welcome back to a new tutorial and today I have prepared something very special for you today we're going to build an AI movie recommendation system using rack native and super base Vector what we're going to do is a very similar system how Netflix recommendation system is working or HBO Max or Disney and so on we're going to focus on two main features the first one is recommending similar movies and and this can be seen uh basically based on a movie we can recommend similar movies to to that one based on the text and the way we um categorize them then using the next feature that is very interesting is the semantic search and this one will allow us to based on a user prompt that has that is very human readable like I don't know let's say in this situation if you're asking it a movie for the first date the system that we're going to build will understand the what do you mean by the the question that you are asking by The Prompt that you are giving and based on that and having all the trained data on our database it will go ahead and find the best matching movies for the specific prompt we're not going to leave everything uh in the CLI we're going to put it together in a easy to ous mobile application so to to be able to visualize everything and the general goal of this tutorial is to help you understand how you can work with AI vectors with embeddings uh in order to be able to implement these kind of systems for any uh situations basically it's not only about movies it's going to help you understand how you can generate embeddings how you can find similar items how you can build your knowledge database based on what you already have and build an an AI system that knows the data or knows the content of your application and is able to answer questions based on it so in a way you're building your own chbt but this is uh to be clear this is not a chbt wrapper we're not going to use chbt we're going to train our own uh data and generate our own embeddings the text T for this tutorial is going to be react native and Expo on the front end but this is just the client side so basically you can connect from anything like from nextjs from a web application mobile and uh so on the juicy part the meat of this tutorial is going to be on the backand side and there we are using super base and the most interesting part is the superbase vector which is the product uh that will allow us to store vectors of our Tex embeddings that will power our uh AI recommendation system and this is going to be done in a vector database connected directly with uh stored directly in postgress so we're going to be able to store we're going to be able to query like similar items and a lot more so very excited about this one um thank you very much super base for sponsoring this video they invited me for their content storm specifically for AI content and I couldn't say no because this is so much so valuable and yeah it was very very easy to prepare for it and I'm pretty sure you'll love it so let's get [Music] started all right so before we actually get started here are the things that you're going to need the step-by-step guide on our website you can access it at uh in the description below we're going to we're going to leave the the link I can paste it in the chat as well and there you will also find the asset bundle with some data sets for for movies that I have prepared for you so let's go ahead and open this URL and open it somewhere here put it in the code mode maybe should do it here just like that and here is the step-by-step guide that you need to follow along this tutorial the best way to learn is to actually implement it yourself and he this is what will help you do that so go ahead and download the asset bundle this will as I said contain some uh data that you need and maybe also some Source codes source code that we will need and yeah let's get started I want to say hello everyone who is joining us live let me know where are you joining us from and if you're excited about this one because I'm uh really excited and and I think we should get started because we have quite a few things to do today starting with a data set um for this tutorial I found a data set with basically 45,000 movies uh from the movie lens and this data set contains a file here movie metadata with the data about movies so if we look at the columns it contains information like the genre the URL the ID uh for example the title this is very important for us the overview which is actually the the description of a movie and the overview is very important for us because we are going to use it um to train our knowledge database uh to be able to recommend similar movies so where is it column should be yeah what else like title the vote voting like how much how how how much vote does it have and so on so you can download this one but this is not required because I already processed cleaned a bit and only selected with the most popular 2,000 or 2500 uh movies so in the uh Dy data in the asset bundle you're going to find give me just one second to to find it as well yeah here is the asset bundle so what you should see is the movies CSV you can have a look at it by opening opening it in Visual Studio code and here are all our movies with there I only left the important columns that we need like title tagline overview and something about the popularity anyway we're we're going to need that in a moment but now let's continue uh with our guide and the next step is to set up our superbase project so as I said for the backend we're going to use superbase we offer a postgress uh database out of a box for every project that you create and we're going to use superbase to store the data the information about the movies that we're going to display in our application you can create an account for free and you can also create two uh projects for free in and under the fre tier uh I'm going to connect with my GitHub account and from our dashboard let's go ahead and create our new project I'm going to give it a name for example AI movies at database password uh yes I'm using a very simple one with ABC will allow me to do that I think no um recommend me a database password so I'm going to take a suggested one from here I'm going to copy it create a new project and I'm going to save it somewhere where hopefully I'm not going to forget where I saved it now after we are doing this we will see that our project is being initial initialized our database is being created for us behind the scenes and probably in a couple of seconds that should be uh finished uh how many hours will this be this is a very good question I always say like this is going to be like one or two hours and after that we end up with four hours but I don't think it's going to be more than 3 hours from 2 to 3 hours it should be good and also depending on how many features or extra features you want at the end will be working with exper router uh yes we're going to use exper router but as I said the client side is not the focus like the the rec native is not the focus of this tutorial and we're going to use exper router to be able to navigate from two screens from the list of movies to the details of a movie hello s from New Zealand how are you doing hello chesa from Kenya from Somali hello Oliver all right so uh as we can see our project has finished initializing is it or no let's see setting up project no I think it's still initializing yeah let's let's wait a couple of seconds more but while we are waiting for this thing I actually have a uh where is it give me just one second yes while we are waiting for that datab way to be initialized I have a very small favor for you guys if you're watching this and if you're enjoying what we are doing here on no just. Dev Channel I would highly I would really ask you to consider subscribing to the channel we have set a huge milestone for this year to achieve 100,000 subscribers and we are very close to it uh we are at 83 right now and there is only 17 more so if you can consider subscribing that would mean a lot to us and uh yeah I know that's possible because most of you like 98.8% of people watching our tutorials are not subscribed to the channel so it literally takes you two seconds to do that and it will mean a lot for us thank you very much and let's check if our project has finished yes we see a welcome to to your project that means that it finished installing now what we have to do is go ahead and create a table for that let's go to the table editor and as I said every superbase project comes with a postgress SQL database and we can go ahead and here create a new table I really like that we can create them visually so we don't have to write a lot of SQL um so for the name is going to be movies description you can leave it empty I will leave all the options as it is and here under the color colums let's go ahead and have a look at the columns from the guide so what we need there is the IMDB ID let's choose that IM DB ID the type of this is going to be a text and actually let me let me bring this one here just not to have to go back and forth so many times let me find the columns yes so after IMDb uh we don't want to discard we we need to add more columns and to make sure that you see them properly I will do it like this okay so uh we're also going to have a title of a movie which is also going to be a text so let's find text what else the overview is the description of a movie so that's also a text besides that we're also going to have what the popularity popularity and this is going to be a float eight um it's going to be um yeah a float eight after that what do we have the poster path um yeah I expected the database the the data set that we are using to have some posters because when you have posters in the user interface it looks much better but this poster path they are almost all of them are outdated some of them are still working so at then we're not going to use it but just add it to to have it in the database we need all of this fields in then exact like with the exact same same names to be able to import the data in The Next Step so make sure you don't have any typos and you select the proper data types for all the fields that we have to Define so we have two more vote average the vote average is going to be a float 4 and the vote count is going to be an INT 8 so let me double check if we have everything ID created at then I am I think this is incorrect it should be IMDb Not BD IMDb ID this I think we Define it as varar but should work with text as well but let's make sure it's how it was in our guide title text overview text popularity float poster puff text tagline text vote average float vote count integer okay we are ready to save our table and this will create our table uh with postgress it's adding all the columns what have I missed so far not much we are just setting up our superbase project and that's the only thing that you need to do so far set up the superbase project and create a table movies with the columns that you can find of course in the guide and once that is done we don't have any data here but we see the the button import data via CSV so let's select that one and we're going to use the CSV file that I provided through the asset bundle so here it is you can download of course from the from the link in the description and in the guide and after unzipping the asset bundle you're going to find the movie CSV this movie CSV let's drag it here contains only the titles that match the titles of our database and it contains the first 2500 movies like the most popular ones also yeah let's after doing that you're going to see some items here here some data and we can press import data if you don't have any errors if you have some typos in the in the column names you're going to see some errors here so just go back update that table uh and the column names to match the ones from movies CSV and after that try to import it again uh as they saying this data set is also contains movies before 2017 so if you're going to search some new movies you're not going to find them uh but it's like a great data set to train uh and to build like AI applications all right so what do we have right now we have a table in our database with 20 almost 2500 records of movies uh toy storage hit and so on one do they have here and we are interested in is in the title The overview is basically a short description of a movie we're going to use this overview to build our knowledge data set and to train our AI model with it um also the poster puff as I said like it's quite outdated and most of them are not you're not able to display them uh And the tagline is maybe something that we can display in the user interface okay so now that we have our uh super base uh project we have created the movies table uh we imported a list of movies there what we can do is we can move to our client side set up our basic application that will be able to query the movies from the database have that ready and only then we're going to get into the AI into the embeddings and so on so there is one more step before we get into the AI but stay with me it's going to it's going to be worth it so um also make sure to follow the the guide here it has all of this information the next step is to generate and to build our Expo application we're going to do that with uh the create Expo application command line so that means that we don't actually need anything in the environment other than no GS this is the easiest way to build R native applications so if you haven't done this before U yeah basically you don't need anything in the environment other than noest which I think you already have so let me actually go into some projects YouTube uh Netflix recommendation and what do we have here yes I think this one is good so let's go ahead and using npx Create Expo up I'm going to add at latest to make sure that we are selecting the latest version of create Expo application if we don't have that one already and let's give it a name uh AI movies and- T to be able to select a template I would like to go with a typescript template um we're not going to focus too much on the typescript if we have time I'm going to show you how we can add uh autogenerated super based types for our database but yeah that's this not the point of this tutorial and at the same time I'm not going with tabs because it comes with a lot of the the template is too bloated like it has too many things and if you are just getting started it might confuse you more than help you so I'm going to start with a blank one we're going to set up everything ourselves because the application that we're going to build is not that complicated it will have a list of movies as you can see here and the movie Details page that will display a list of recommended movies based on that one so now that our uh Expo project is ready let's go ahead and open it in Visual Studio code AI movies I'm going to close the terminal because we can open it already in Visual Studio code for easier for managing it easier and let's do that by going to terminal at the top let's open a new terminal and before we jump into the code I will like to start our development server and run our application to see what we already do we already have so by running npm start uh we will start the Metra server from where we can run our project on different devices and clients the easiest way here is uh to go ahead and use the expoo application on your physical device it's available both on IOS and Android and simply scan this QR code with your phone uh I have an emulator so I'm going to press I here to open on iOS simulator in order for you to also be able to to see our result something like that and and yeah that's that's what you should see a simple text in the middle open up TSX to start working on your application Okay let's listen to what it says to us and let's open up. TSX from our root folder and here is basically our very small initial application if you change this text to hello world uh save it if you don't have Autos safety enabl you should see our application automatically reloading to show the new data here uh perfect let me see what our next step and our next step is to link our XO project with super base you can see more details about that following the this URL in superbase documentation but what we are interested in is um running this command npx super base link uh to basically yeah link our local or our Rea native side our client side with our super base let's go ahead and paste this command npx super base link but as you can see we need a variable we need the project reference how do we get that let's go to our superbase dashboard and somewhere here under project settings we should see their reference ID under general settings so let's copy this one let's paste it here and let's press enter what V uh cannot read what can it read yeah open super base have uh should I do super basy nit first I think so let's go ahead and do npx super base init first and we can do yes because we are using vs code and what do we have here we have super base with very empty ever thing now we can go ahead and do the link command to link our local super based project with our remote superbase that we created through the dashboard enter your database password this is where our database password is going to help us so if you don't have if you forgot it and if you um don't have a database password saved you can easily uh change the password through the project settings database and here you can reset database password and generate a new one that's easy to do now what we see is that our project has been linked correctly and now what we can do is pull that database schema from our dashboard from the project we created in the superbase dashboard to pull it locally to do that we're going to run npx super base uh npx super base DB pool and this will yeah basically cannot detect do Docker H uh for that we need that Docker running but yeah for that we need Docker running uh and that will allow us to run our project locally and for more information you can go to super base local development and here is an explanation how you can set up uh to develop with super base locally uh yeah I'm going to leave this uh in the comments and now after our Docker with the superbase is running we can do npx superbase database pool now I'm thinking if you actually need this for the following tutorial because if you don't have the the super base set up locally which is not very hard but you need like Docker and you need just to download the images um yeah it's it's not that that complicated you just need Docker and after you do Docker init and Docker start it automatically downloads what it needs but I think you're also going to be able to follow along the tutorial even if you don't have super Bas set up locally we're going to just do the code publish it and try it uh in the dashboard update the remote migration history table yes we can do that and it finished setting uh pulling the database and now to to check like what happened is uh we can open the superbase project and here under migrations you'll be able to see a file an SQL file that will have our movies database so this is simply saying like how can we set up the database the same way as we set it up here from the user interface how we can set it up programmatically using SQL so everything is done for us and we can close everything and we can also do git ad git commit link super base and get yeah I don't have G push yet but this step is uh finished for us the next step is going to be to connect from our R native application to super base for that we need to create a client and we also need some um some dependencies so let's go ahead in the superbase client here and copy the install command that installs the superbase GS client and some other dependencies that we will need let's copy this one in our in our terminal and let's install the superbase GS client while we're waiting for this to happen I'm we're going to go ahead and create the source directory and in the source directory let's create another one called lib where we will keep all the code related to like external libraries in this lib I want to create a file called superbase dogs or let's do it TS where we will set up our superbase client from the documentation of super base if you open it here you're going to see how easy is to set up the super based client so we can copy the code from the from from this part initializing a r native application and vest super based TS let's get this code and what it does it it creates a client based on our URL and the API key let's go ahead and see how to find the superbase url and we're going to do that from the dashboard all also from the project settings and under the API here first of all we're going to find the url of a project let's copy this one and paste it for our super base URL and for the anonymous key this is the one that we are interested in the project API keys and this key is safe to use in browser or in client side applic ations uh because we have like roow level security on our database and we will be able to prevent people having this key or having only this key to be able to query something that they don't they shouldn't have access to but anyway uh here is our super base we created the client everything is good now using this super based client we can already start quering our database so let's see how we can do that the first the first step is going to be to fetch um to fetch movies from our table that we have created from the user interface there is also like if we go to the movies table here under table editor hope I didn't break it yeah everything is fine uh there is a nice little feature in super base uh if you go to a table you can open this tab API and it will show you how you can use super base to to query informations uh what I'm interested in is read rows so this shows us how we can read movies all the rows from movies in our application let's go ahead and open ab. TSX and instead of executing this code where I'm going to copy this code and instead of putting it here which will also work H let let's start with with this way uh we're going to have to import the super base from the client that we just created this super base client now let's go ahead and do console log error to see if there is any error and console log uh movies to see the the movies we're going to open back the development the the developer console and see what we receive back from the super base I'm going to objects are not a valid why is that happening if I comment this out does it still did make any typos here application let me see maybe I should close the other servers and see what what's up with this error would this work with flatter as a client yes that would work actually uh I'm wondering if you should check if superbase has a a flatter client like U client Library what did I do here application think it has something to do with this code workspace if I simply return null from here that basically means that we're not R rendering anything so reload what up I'm very confused npm start maybe clear to clear the cache and maybe I can close this one but for some reason I cannot do that okay now I oh I see I see I see for some reason yeah my my location function became a sync when I um imported this function away super base so that's why I was receiving that Pro that issue because functional components cannot be a sync anyway um and also I did that just to simplify a little bit the things but actually the way we are supposed to query the movies is not in the body of our function because this will be called every time we rerender the application in fact we should call this in a use effect that will only be executed when we Mount the application so to to fetch them only once and to do that we're going to define a use effect with um empty dependency array here we can define a function called Fetch movies that we can Define it as a syn and inside this fetch movies that we will call right away we're going to inside the fetch move this function body we're going to do this super base thing so let's console log right away here and uncomment the import of super base now if I do reload we should see null for the error and then empty array for the movies there is no error but at the same time there is no movies why is that happening that is happening because of the policies of our uh table by default uh if I put add a table we see that we have enabled row level security which means that the way the security is managed like who is um authorized to do what operations is managed by table policy IES so let's go ahead and by default no one is allowed to do anything not read not update not insert and so on to allow users to perform some operations we're going to go to the movies table and let's press here view policies by default no policy created so let's create a new policy we can use the get started quickly and there is the first one enable read ACC to everyone for the sake of this tutorial this is going to be very good for us it will allow anyone to be able to read read movies let's press save policy and after this is done we can go back to our terminal we can refresh the project to to query the movies again and we see already a lot of them what we can do is in the guide I showed you how we can this display the movies in a better format using json. stringify we pass their movies uh the second parameter is null and the third one is two and this way we're going to see them a little bit better formatted but at the same time there are a lot of movies qued what we can do is um specify how many do we want to select so we can specify the range to be from the item with number zero with index zero until 25 and this way we will only query 25 movies here now it's better if you do c and then reload you're going to see only 25 movies here perfect so uh what do we do with these movies let's go ahead and save them in a state variable because we're going to use them to render on the screen on the user interface so let's create the movies set movies State using the use State hook initially it's going to be an empty array and after we uh fetch the movies we can uh check here first of all if there is an error or maybe yeah let's say if movies is defined then we can set them in state now what we should do is render them on the screen how can we do that well we need a flat list from Rec native so let's import a flat list and under this text or instead of this text because we don't need the text we can use flatlist and the data for the flatlist is going to be our movies and their render item we can I will start with showing you at least something for example rendering the tip of of the movie like this and we should already see a list of titles like 25 movies from our database in order to display them um to to to to to have a better user interface I have uh what we have to do is create a separate component that will render one of his movie items let's go ahead in our source folder and create our components folder component and here let's create the movie item. TSX the code for movie item uh you can find in the guide here it is display movies so let's copy this one from here and it will receive the item the mov the item it will receive a index and will simply render the title And the tagline let's go ahead in our up TSX let's import movie item from our source components movie item and instead of all of these function that we have here in the render item of the flat list we can simply send there the movie item itself it's not yet very uh it doesn't look very good just because of the way our root container in up. TSX is styled let's remove the Align items and justify content from here and now they will look a little bit better and we can also change the color of our up. TSX let me see where we have it the color uh it was a dark gray like this for the background that's already looking better and in order to as you can see the first item on the screen is actually displayed behind the notch to solve this issue we can import the safe area view from RE native and wrap it around our flat list save area View and we close it after we finish the flat list now now the flat list will be displayed in a safe area view which means that it will not go below the notch so now we can scroll and all the items will be here on the screen yes 26 items because we are looking for yeah from 0 to 25 if you want to query more you can do that here and yes this is going to be all the movies in the list all right so um yes so far we have this list of uh items that's perfect for us it's going to help us um when opening the application it's going to show us some movies later on we're going to have like the search on top that will be the semantic search powered by the artificial intelligence and also another type of recommendation that we will Implement in this application is going to be uh similar movies so for example if you go to Toy Story and you liked it below it you want you want to see a couple of other movies that are similar to this one that you just watched so for that reason we're going to need the detail screen uh of of a movie where we will be able to display the recommendations so let me go ahead and do git add git commit minus m movie list um and in order to have a separate screen what what we will do is we will set up exper router to have basic navigation system with two screens one is going to be a list of movies and the second one is going to be the movie details um I'm going to make sure to provide the source code for the user interface so that you can move faster um if if you're interested in that uh and it's also going to be put in the asset bundle now let's follow the setup exper rter let's open the getting started guide from the documentation of export router uh and here where yeah not in the quick start but in the manual installation let's follow some of the steps that we have to to do to set up exper router so we're going to start from the Second Step install dependencies and I'm going to copy the npx Expo install Expo router and the other dependencies that we need here let's go back in our project and execute this then we need to set up the entry point to point to the Expo router and this is in our package.json so go to package.json you're going to see the main here let's remove this one and let's paste the main with exper router SL entry now following uh this one we need to specify the scheme in our app config this is for deep links but we're not going to need it but let's make sure to add it under the app. Json somewhere after the slug we can add the scheme and you can provide a custom scheme like I don't know AI movies again we're not going to need it but let's do it to make sure everything works uh if you want to support web you can install that here we are not going to focus on the web and the step is in b. config we need to add this plugins line with exper router so let's copy it from here let's go let's open it in our project and after the presets let's add the plugins with xer router I think that should be everything yes and that should be everything in order to set everything up but the way exper router is working is it's a file based navigation system and all the files in a in the app directory will become screens so that means that we need to Define this up directory so we're going to create a new folder in the source called up this is very important with a name because that's how explorator understand where we keep our screens and for the home screen let's go ahead and drag and drop our app do TSX under the application move it there update the import and rename it to index. TSX the index. TSX is the home screen it's no longer up. GS that we had before the home screen is the index. TSX from the app directory now let's go ahead and restart our server in this time make sure to add the the clear using Das Das space-- clear to clean the metro bundler to make sure everything is running clean let's press I to open it on iOS and in a moment we should see our list of movies on the home screen all right we already see something uh it doesn't look good uh at the top and the bottom but we will adjust that later the good thing is that we have the the screen and using exper router now having this exper router set up we can go ahead and create one more uh file for the detailed of a movie so a new screen in exper router is created by simply creating a new file in our up directory and I'm going to use a very specific uh syntax to exporter with square parentheses to add a dynamic puff parameter we're going to see how that helps us in a moment um I'm going to generate a simple component here called movie details and yeah that's a simple component exported from our ID TSX and the next question is how can we navigate to this page and when we should do that we want to navigate to this P page when we press on one of these movie items in the list so let's open movie item here and uh we're going to wrap the whole component in a component called link that is imported from exper router and this way we can link and when the user presses on this one we want to redirect somewhere pay attention where we import the link from the link expects the HRA and the HRA should be for example ABC let's say SL ABC if and also uh I'm going to provide the the as child property here in order to let the child pressable handle the Press events now if I'm going to press on one of these items nothing happens but if I'm going to refresh the page and do that again we are redirected to the movie Details page not sure if we can go back here but if you're interested to go back we can simply add the header from the stack navigation on top and to do that we're going to create the layout the root layout file in our application layout. TSX and we can simply do export where is it let's define it as root layout as a functional component that will simply export the stack component imported from export router in this way we are defining that hey all of the pages in the application they should be managed inside the stack Navigator let's make sure to export root layout here at the end as default export default and just like that we have the header at the top coming from the stack Navigator we can go back here and we are landed on the index page uh perfect um what's up with this square brackets and ID and why do we need it this is the dynamic parameter from the from the puff from the URL that we are navigating to and this way we will be able to identify what movie do we want to render to get the value of this Dynamic parameter we can use the hook called use local search params and the name of a variable is going to match the name that we provided here in the file between the square brackets so if I'm going to display the ID here after the movie details you're going to see now ABC to any movie that we are redirecting to why because in the movie item that's what we have here in the puff we hardcoded the ABC see here if instead of that we're going to add the actual movie ID using the a dynamic part like this if I'm going to go here I need to refresh to to take this to take in effect if I'm going to go to the first one we see movie details one if I'm going to go to the second one movie details two and so one perfect that means that now using this ID we can go ahead and query the details of a movie I'm not going to bore you with this one um in the yeah this is the movie details so we can go ahead and basically copy everything from here yeah let's go ahead and copy the whole component for the movie detail screen because the rest of the things we already know how to do we know how to use superbase to query for a movie based on ID using the do equal operator uh the lib super base lib super base what's going on here oh it should be one more I think like this Le super base it's exactly what we had okay this is the homepage if I go to the Toy Story yes it renders The Toy Story go back here it renders it perfect but the last step is uh to to play a little bit with the themes because right now uh the navigation part of our application is still working with light FS but we can adjust that in the layout here by uh using the theme Provider from from where from not from where from react navigation native and also we will use the Dark theme if we go ahead and wrap our stch navigation with the theme provider and the theme where is it value dark F we will see that everything everywhere where we use the the theme here it's render with black so now it works better now we have a Details page with information about the movie later on we're going to render the recommendations here for the movie when we implement the AI part in a moment and yeah that's that's everything that we need so far uh Additionally you can also adjust um for example the headers and the titles uh using the this Tack and by default it will render the name of a file but if we want to change the title for example on the details page from ID to something to like a movie details we can use tech. screen and using the name of a file here name equal name of a file which is the ID we can add react navigation options as you are used to for example we can add a title here saying movie details so if I'm going to go here we see movie details we can do the same for the first screen for the index but for the index what we can do is we can say header shown false and this will hide the header from the first screen perfect I think that's everything that we need for now as the layout of our application so what we have is the home screen that renders a list of movies and the detail screen where we can get by pressing on one of these movies and it will display the information about the movie for example besides the tagline we can also render here the overview so overview like this uh to to see more information about the movie yeah and we can even add some Styles here to the overview color I don't know gains borrow and maybe margin top 20 I'm focusing on very small things but we are basically done we need to so if we go to to different movies we're going to see the information about the the the movies more details about it yeah something like this and later we're going to have we're going to have a text here saying similar movies that will render a list of similar movies similar I can style it very similar to our title but I'm going to also add I don't know margin top 20 so that's our front end side I'm going to go ahead and do a get OD here um Expo router and movie Details page and I'm going to include in the source code uh the the code for at this step um so that you can take it from here and focus on the AI part because that's the focus of today's tutorial and we are finally at the point to implement the AI features in our application here um and oh actually I want to do one more thing on the home screen I want to add a search search input not to waste time on it later so that's going to be quite easy but let's do it now and so that you will also have it there what I'm going to do is above a flat list I'm going to render a text input text input make sure that it's imported from RE native like this now the text input will have a placeholder saying I know AI what are you search for movies uh the placeholder text color can be gray yes and I'm going to add some style styles do input let's go ahead and add the Styles here for the input I'm going to start with border uh with one and Border color of gray uh I'm going to add some pading like 10 or even 15 and maybe some margin 10 and some border Rus to make it round 10 yeah 10 I think is is good or five no let's go with 10 okay and the last step is to bind this text input to a state variable to be able to use what to to know what the user is searching so I'm going to use it as a query set query or prompt and initially it's going to be an empty string now all we have to do is to assign the value to our text input the value of our query and when the user changes on change text we want to update the state set query just like that we're going to be able to ask and search for queries I need to make sure to change the color to gain bot here yes and we also need the button right so if I we'll simply add here a button from react native button from react native let's go ahead and give it a title search and that's how it looks on iOS we can also put them into the same line not to use so much vertical Space by wrapping them inside the view and and if we give the style justify content not justify content but Flex Direction row they will put it into the same row and we can also say what uh for the text input I will say Flex one to make sure that it takes all the space available and on this view I can align item in the center to make sure they are everything is centered okay now we are good and probably if you also want to do like the last step would be the on press function that will be executed when we press on the actual on press for now we can we can reset the query to empty string and later we're going to use this so if you assign the on press to the on press here we can write something press search and it should remove and later it should actually call a method on our back end to G get semantic search and recommendation based on WE prompt that the user set um wres so it's not going to work like specifically about uh using the uh like titles and description it's going to understand the meaning of what you're writing and we'll try to recommend the best movies for that so yeah it's going to be fun like give me give me just one second and we will Implement that all right so uh let me not forget to do git ad git commit search uh input all right so this is uh we're done with setting everything up we have created our super based project we created our database V we added a data set of movies then on the client side we implemented our R native application that is able to query the data about movies from our database render it in a visually pleasing list and now everything is ready for us to implement the AI features that we all came for so let's go ahead and look at what tools we're going to use to implement that um so for a disclaimer I'm no expert in Ai and so on I was invited by superbase to participate in their content storm for the for the AI and Vector database and I was very excited to learn more about that and I was pretty impressed by how easy it is to generate embeddings and to implement vcii features using them uh using the super base Vector to to store it so I will try to make it as easy as possible for you as well I will explain things the way I understood them and all the things that we need to know and I think it's going to be easy for you to understand because I'm somewhere close to you and it's going to make a lot of sense what are everything uh that that we need in order to make this possible so let's go ahead in our guide um and first of all yeah let's go ahead and open the documentation where is it all the vector columns here so uh we're going to use the AI and vectors from super base and from their documentation what this is is a toolkit with a lot of um useful tools for us to implement AI features the one that we're going to use is this Vector store that basically allows us to store vectors in directly in postgress not only store them but also query them now what are vectors uh let me actually open the some diagramming to try to make this one easier for you to understand come on how to do a new one delete everything so first of all yeah like basically what are vectors vectors when you first look at them they look like uh they look like an array of numbers for example we have like I don't know 0.5 then uh let's say 0 .7 this one looks like an array of numbers but what makes it a vector is the the operations that we can perform on it so this is actually a representation in space of a vector for example uh this one in particular because it has two numbers is a two-dimensional vector and it can be visualize on a graph if we draw it like this so this is y- Axis this is XA AIS and if here is one and also here is one this point will be uh if this is for example the X representation and this is y this is going to be 0.5 somewhere here y 0.7 let's say here so this is our DOT 0.5 0.7 now this is a very simple Vector with two diens iions you can also visualize a 3D dimensional Vector like this where there will be one more value here if I re erase this one for example you'll be able to to visualize that 0.8 H yeah probably I cannot draw it but yeah basically you can map it visualize it it's very hard when we increase this amount of Dimensions to visualize that but at the end of the day think about vectors as a way to represent uh uh in space like um yeah basically vectors now um the the part where AI is using vectors is the um the vector operations like cinus and so one and this will help us Define like how close are two points uh to to each other so the representation of two points this one is for example 1.2 0.3 and so one I'm going to stick to two dimensional vectors for now um and yeah basically based on some math operations that I did didn't have time to look uh into and I don't remember from my math classes we can Define the basically the difference or the distance between these two vectors by knowing their coordinates uh this is helpful in the next scenario let's go back to our documentation and slowly we're going to understand everything that we have to understand uh the second part yeah let's go to to the concepts uh and a very important concepts for for us to understand is the embeddings what are the embeddings in the context of AI because they are used a lot uh to power Ai and Vector applications and uh in general embeddings is a way to represent any data as a vector so let's say we have a text computers do not understand the meaning of a text they understand character but we do not we cannot put them together to understand the meaning so by using a machine learning model we can generate a vector that represents the meaning of uh of the text for us this Vector doesn't tell us a lot but with having two of these vectors we can use some math calculations to find how similar are two different texts from each other and this is actually what uh embeddings are helping us do they capture the relatedness like how related are two pieces of information like texts images videos or any other type of information and this uh relatedness is very useful when we have uh to implement semantic search for example when a user writes something we can go through all of the data in our database through their embeddings and see which embedding is closer with a meaning and the context to what user is searching exactly that we're going to implement a little bit later uh we can also Implement recommendations using this embeddings because we can take the embeddings of two products or of two items in our database and see how related are they to each other and for recommendation we're going to sort by the most related items and we're going to recommend that classification is how do we how to categorize a body of text for example you can create uh using a machine learning that is trained to understand the I don't know the uh if an email is Spam or not we can generate embeddings and we can classify them we can see uh like visually uh visually let me try to to to show you that I'm going to again keep it very simple uh and let's say what we have a two-dimensional a two-dimensional uh Vector for our embeddings and let's say we're developing here I'm explaining probably the the classification let's say that uh we train a model that knows that anything that I don't know is here this is Spam and anything that is here this is not spam and anything in between it's going to be like how how spam is it right so now if we have a body of text like an email and we generate the embedding using the same embeddings that we trained our uh machine learning model here we can plot it here so for example uh an email that will have a vector somewhere here it's going to be unclear if it's p or not if it's going to be here for example I don't know one and one the we can say that this is classified as spam if it's going to be here we can understand that it's not spam and again this is a very simple representation with two dimensions in in reality our vectors contain a lot more because they need to keep track of a lot more information to be able to categorize them correctly um so here is a very good example for understanding better for example let's say we have three phrases the Cat chases a mouse the kitten hunt rodents and I like ham sandwiches our goal is to try to understand uh like how what are the similar phrases from these three phrases we as a human for us it's very easy to understand because we can understand that cat and kitten is basically the same chases and hunts is the same Mouse and Rance is the same but for a m for a machine for a computer these two are completely two different phrases because the only uh the only word that is repeating in these two phrases is the everything else is different so using embeddings we can basically capture the meaning of the phrases not the actual words and uh by generating the embeddings and trying to see the similarity between these two we will find find that they are very close to each other and they will be quite far from I like ham sandwiches so yeah basically this is the explanation here as well if we plot the vector of our embeddings for these two texts we can see that they are quite close to each other and V one is quite far away um so another thing is yeah like uh for for this project that we're are going to use we are going to use a model called GT e small uh developed by super base that produces an output of 384 Dimensions might sound a lot but I think chbt has way more I mean the the models behind Char BT from open AI has way more and um but yeah for for our example 384 is going to be more than enough uh Dimensions to provide very useful information so yeah that's our embeddings I hope I made it a little bit more clear uh the way I understood them and with the vector columns with the vector extension from super base what we can do is we can store these vectors that we talked about we can store them directly in our database and then we can query we can query them using operations like uh Ean distance negative inner product and cosine distance to be honest I still don't understand them very uh well but depending on different uh scenarios we would use different operation basically this operation is helping us understand this is a way to understand how close are uh like the vectors from each other and it it uses different operations like math operations uh for us it's going to be very easy so I think uh we are done with the fury side let's go ahead and implement it and the and we will try to understand them better as we use them and Implement them all right so the first step is to go ahead and set up the vector uh extension and the vector column on our Movie Database to be able to store embeddings about movies directly in the database to do that let me where is it this is our project I'm going to go ahead in our AI movies and let's go ahead in the uh where in the table editor is it in the table editor or where do we enable extensions table no yeah yeah yeah not on the table editor but down below to the database here under the database where are extensions let's go to the extension and the extension that we are interested in is in the vector it's called vector and as we can see this allows Vector data type inside our table so let's confirm and enable the extension and after that we can go back to our tables and in future it's going to be possible to simply addit the table add here a new column embedding and select from here the way embedding data type the problem is that at this moment it's not yet possible but as I talked with super base it's coming uh in future I hope uh what we can do is we can add uh this column using um this column embedding using the vector type we can add it through the directly through SQL editor so let's go ahead and copy this command from our guide and it simply um is the command alter table movies which says update the movie table and add a new column there called embedding with the type vector and inside here we specify how many uh Dimensions will the model produce so we are choosing 3884 here because we are going to use the GTA small model from super base and as you can see this one produces Dimensions GTA small 384 for example here is no where is it yeah anyway if you're going to use another model to generate embeddings for example for images if you have to process images or text or some other things you're going to need a different model to generate embeddings in a moment I'm going to show you how you can explore them how you can choose from them but the important part is to know how many dimensions the model will generate and use that here in the vector so after we have this one let's press run here and we see success if we go back to the table editor if we select movies and if you scroll all the way to the right all at the end we should see the embedding column of type vector and here we're going to be able to store the vector embedding of our movie and based on it implement the AI recommendations so the next step for us is going to be to generate embeddings uh we're going to use transformer. GS which is a tool to use open source models and it's really easy to to use as you can see we basically need a couple of lines of code to improve a pipeline to Define what model do we want to use and then to send some text to to the pipe in order to get the uh the the embedding uh what we will do is first we're going to see how we can generate embeddings locally in a simple noj server in order not to confuse you with Edge functions and so one but later we're going to also generate them in the cloud on edge in Edge functions but anyway uh what we have to do now is let's for a moment leave aside our rec native project and let's go ahead and create a new empty directory I'm going to navigate somewhere also V project uh or should I do it let me navigate to Netflix I'm actually going to generate this folder inside our R native project just for everyone to have a source code of it but you don't have to this is going to be a separate project that we can create an in a new project so I'm going to create this folder called hm how to to call it um embeddings let's call it eddings let's navigate to this folder eddings and here let's generate let's set up an empty noj project to do that we can simply run npm init minus y this will generate our package and we are ready to to go going to go back actually to our vs code here where is it as I said I ended up implementing uh initializing it inside our project oh one second where is it AI movies here this is our project embeddings but it has its own package.json so if I open a terminal from our Visual Studio code it will open in the road directory of AI movies I would have to go to embeddings in order to be able to install and work with the specific project there so once we are here we are ready to install the transformer. GS and to do that we're going to use npmi xenova SL Transformers and after that is installed let's go ahead and create a new file in our embeddings called um J rate embeding dot I'm going to keep it GS here we're going to import uh pipeline pipe line from Senova trans Transformers and because we are not implementing this inside browser using the EnV I can say EnV do use browser cache equal false usually these Transformers can run in browser uh but we're going to run them inside no just context now we can we should Define our pipe and the pipe is uh all the models through which we want to send our text and in the end to get um uh to get a vector so we can um stack together multiple Mo models and all of them like the data that will we will give it to our uh Transformer we'll go through all the models and Advent will simply give us a vector why is this helpful because there are different models more generic one for example understanding syllables or understanding words will be at the beginning and at the end there will be more specific models basically once we understand words we can understand sentences we can understand meanings we can understand if it's spam or not so um the pipeline that we are going to initialize it with is going to be uh first of all feature extraction and the second one is going to be the model that I was talking about the GTA the actually it's called super base super base SL GTE small these models they are hosted on hugging phase so you can you can search hugging phase for other models that you might need for example here under the models you can look for others super base for example this one is GTA small there can be others as well for example stable diffusion anyway having this pipe let's go ahead and generate a separate function now uh that will generate embedding and this function will simply receive a body of text we'll send it to our pipe and we'll return what it gives us back so let's get the output by calling a weight pipe and here we're going to send first of all the text and then some arguments uh one of the arguments that we're going to send yeah I'm going to take them from here because it's pulling and normalized uh I don't know what pulling means but normalized means that give me a vector uh that is of length of one so this is the normalization and what we're going to do is we're going to generate an array from our output dot data it's as simple as this one to generate an embedding and what I can do is I can call this generate embedding with Hello World here and we can actually do a wait and after that console log to see there response we can execute this function by writing node generate embedding but make sure you are in this embeddings folder we cannot use import statement outside of a module so in package.json uh we need to change it to to mod where is it come on uh one second yeah uh basically what we have to do if we want to use the import from statement uh in the package.json somewhere here we need to define the type of this project is module not common GS and now if I'm going to run the embedding once again it the first time it will download the model so that's why it took uh a little bit more time and at the end we're going to see an array which we learn that it's not an array it's a it's a vector and this Vector uh contains 384 numbers specifying the yeah basically embedding of our hello world text for us it doesn't say a lot but for the computer it empowers it to find similarities between things and if I'm going to do it again as you can see the second time is much faster because uh it already cached this module feature extractions and the GTA small all right so uh what we should do now and what we will do now is go ahead and for all the movies in our database we're going to generate the embedding based on the overview and save it in the database back in the database so let's do that also in embeddings uh folder um and where do we will we do that uh well let's create a new file here called um update movie edings dogs uh the first function that we will need here is to get first of all a list of movies from our super base and for that we will need the super based client so let's go ahead and uh because this is a separate project I'm going to actually create a super base superbase dogs file here and from our source directory ctory from our rec native I can take the client the way we set up the client here I can take it and move it to this super base GS but the only thing is that we don't need the authentication here I can delete this one I can delete the whole options thing I don't need ASN storage I don't need the first poly fill I only need to create the client and probably I will also use not a a non key which is anonymous I will use the master key that will allow me to do different modifications on the table so super base key let me take it from let me show you how we can take it this is important because we will we want to update something in the database and either we add a new policy here to allow anyone to run updates or we can use a master key that will uh allow us to do anything so let's go ahead in the project settings uh in the API this is a service Ro this is a secret and because we are not using actually it in a client side it's okay to use it on the back end we're never going to post this embeddings file anywhere so let's put it here now the super base will allow us to do any kind of operations back to our generating embeddings no update movie embeddings let's go ahead and import super base from super base no no no from uh do super base I think we also need to to to install the super based client here in the dependencies um so again make sure you are in the embeddings folder and let's run npm I superbase slgs let me see how it's called no it's at super base slash superbase GS like this now in the package besides the Transformers we should also have a superbase GS okay perfect and in the get movies what we can do is basically return superbase Dot from our movies we want to select all the columns you can actually select only like ID and overview but yeah and we can also add a filtering to make sure that we only select the ones that do not have an embedding embedding null now we can go ahead and do movies equal get movies let's await actually this will return us data and let's go ahead and console log to see if we actually receive something so I'm going to conso L movies. length if I run the update where is it update movie node update movie embeddings we're going to see what cannot find module um which one update movie embeddings import super based gs do I need to specify GS here yeah import super base I need to destructure it and just like that we have 1,000 rows because that's the limit of uh how many items super base will return from the server so for that reason we're going to have to query the multiple times that's why we added this get me only the one that do not have an embedding um now now um let's actually Define this process all movies which is an a sync function come on come on and I'm going to add it here and simply call at the end process all movies and this way if I run it again we should see 1,000 yes now besides process all movies I'm going to add another one on top here that will add movie embedding embedding it's going to be a sync and it will it will receive a movie and it will go ahead and update it but before updating it let's generate the embedding we already know how to do that we have this generate embedding in the file we can export this function and we should make sure to delete the the last line here we don't need this anymore now that we are exporting the generate embedding we can import it in our file that we are working in and we can do a wait generate embedding and because we generate embedding expect a body of text as a parameter we're going to take the movie overview and based on it generate a a vector embedding overview let's do console log embedding and in order not to overflow our console in the get movies we can go ahead and do a range zero to three to limit only to three movies now we have this ad embedding but we never call it uh we should call it based on the movies that we receive here uh we can actually check if movies. length is not defined with question mark that means that it's either an error or there are no movies yet so we can stop here otherwise for every single movie I want to call this function so that means that I will have to map through the movies and for all of them I will call the add m movie embedding because this is an async function the map the movies. map will give us back an array of promises so what we can do is we can put them inside a promise. all like this and run them in parallel basically like execute all the ad movie embeddings on all the movies and only after you're done like finish it and go to the next line so now let's go ahead and run it again and what we should see is uh yeah we don't have a generate embeddings because we need to import generate embedding from generate embeddings dogs now if I execute this one we should see three vectors one 2 3 four actually because it's 0 to four that me these are the embedded the vectors that we created based on the description of a movie now based on these vectors we will be able to find similar movies between them but before we do that we need to save this embedding in the database uh to to be able to later do the do these queries at the moment all of them are null so to update it it's quite simple we're going to do we're going to also use superbase dot uh from movies we want to update uh and set a new field embedding with a value embedding uh where the to only movie where the ID is equal to movie m. so don't update it to all of the movies only to the one that we currently want to update and just like that if I will run it again we don't see any errors and if I'm going to go here and sort maybe not sort but execute a query like this uh select everything from movies we em embedding is not null let's see if we're going to receive anything yes we see Jumanji golden eye and Toy Story if I'm going to execute this command again I'm going to remove a console log if I'm going to execute it again and run this Square again we should see already eight results the next ones we are generated and at the end you see the vector embedding maybe you don't see it because I block The View but it's here so let's do the following let's REM we know that we generate them correctly we save them correctly now we can remove this range from here and if I execute it will add to 1,000 at the same time in this process all movies I can go ahead and at the end basically right now if I execute it's only going to add it to 1,000 movies so if we have 40K I'm going to have to execute this process 40 times if I want instead to process all the movies from the database I can call at the end here process all movies again which is recursively calling it and because this is very important because we have a stop condition here it's only going to call again and again until there are movies without embeddings and after that it will stop if I execute it now it's going to take a bit of time we see first 1,000 movies being processed we're going to wait a bit then we're going to see another 1,000 another 1,000 until all the movies from our database are processed and have their embeddings this shouldn't take quite a lot it should probably take around 30 seconds let's see it in action guys if you have any questions please ask me and I'm going to try to explain them uh the way I understand and let me know how how is it going so far did they confuse you too much or do you have the same feeling as I have that it's actually not that complicated like all of these things I thought that there should be so much more complicated but generating embeddings look at this file it's one line to gener to create this pipeline by selecting the models that we want and another one to pass a TT and get the the vector the edding that's it so yeah we are uh we are building on top of the shoulders of giants basically companies like super Bas that created all of these features that are easy to integrate and other companies that are investing a lot in the AI tools like they are helping us do that because yeah I remember a couple of years ago uh when I was in university uh I I took an AI course and it was much more complicated but at that time like we learned the fundamentals of it so yeah sounds complicated but in fact if you know know what tools to use it's actually very very possible and if we look our our script updated 1,000 2,000 2,500 movies and if I actually do it again we see that it will not do it again because we have this condition to only add the embeddings when the edding is null so if I go now to our database here for the movies you're going to see that all the movies should have this Vector here Vector with the embedding we are getting there so far we learned about uh vectors embeddings we set up a vector column for our movies in the database and locally in nodejs we generated embeddings using trans form. GS we save these vectors in our database and what this allows us to do next is to run queries on our database to give us for example similar movies to a movie that you already watched that's going to be possible to to do uh let's actually see that in action and move on to to the next step and also we're going to be able to later do semantic search basically writing a sentence and based on that sentence trying to recommend movie that are related to it uh to do that what do we have uh to do let's see our guide again all the code you'll find here getting similar movies uh let's open the documentation besides our guide we're also going to look in the documentation for the vector columns and here we will already have done and stored and so on but at the part of quering a vector here is where we are at right now what we have to do is to query these vectors uh and be able to find similarities there are three supported operators at the moment as I was talking before the one that we are going to use is the cosine distance um the think is that the super based client the super based client Library does not yet support these operators so if I'm going to go here uh let me give me just one second I will do get ad so if we look at our application index here uh the super B client super based just client here we can provide like for example where the title is equal to Jumanji this operation is possible but operations on vectors which are these threee operations they're not yet supported so what we have to do is we have to Simply create a function on the database layer with postgress that's uh quite easy to do and using this RPC method we're going to be able to call that function let's go ahead and take the code of this function from here and go to our AI movies actually it's going to be better if you take the one from our documentation because I updated it specifically for our needs let's take it from the documentation go to our AI movies go to the database and here you'll find functions in these functions we can create functions that will run on the database layer these are not Lambda or Edge functions these are functions on the database the name of a function uh how did we call it match movies match movies uh schema public it's okay return type void wait a second no this is the visual way of creating a function you can do that through here as well but because I prepare the SQL statement let's press cancel and we're going to create that function through code not visually to do that open the SQL editor in the left menu and let's paste the code from our guide I'm going to explain it simply it's uh defining a function called match documents and I failed to copy it correctly because it should be match movies copy back here yes now it looks better so we are creating a function called match movies that will receive three parameters a vector with which we want to compare the match threshold and the match count how many items should we return and what is the threshold that we should consider that the item is uh related we return back and kind of a new table a virtual table that will have an ID a title tagline overview and the similarity score now the logic of how we get the data is here so first we select the information from our Movie Database like ID title tagline and overview now here is where we see our Vector operation this is the vector operation from our database that is the cosine distance so what we are doing here is we are getting the cosine distance as the similarity between the movie embedding from the database and the one that we are sending so it Compares it returns a similarity which is going to be a value from 0o to one where one is a very similar movie Zero is completely opposite later we are simply um we are excluding movies from the list that will be return return we are excluding the ones that are have a lower similarity than the threshold and only keeping the ones that are very similar then we are sorting the table based on the similarity that was calculated here and we are returning only the amount of uh items that we will send through parameters so this is our function let's run it's running and we should see success here at the end now after we have created this function and I created the function based on this example uh we can execute the function using the super based client by calling this RPC if I go back here uh yeah let let's actually take this code from the superbase documentation let's go back to our react application and what should we do let's first Implement uh similar movies so if we go into the details of a movie here we have a fetch movie and that means that if I do console log here movie do embedding we should also have the vector where is our simulator if I go to V here we should also have a vector based on which we can find similar movies so uh use effect here let's go ahead and Define here a similar movie state and in another use effect after we fetch the movie let's add another use effect uh that will fetch similar movies when should that happen that should happen when the movie Dot and question mark dot embedding changes only when we should rryy to fetch similar similar movies let's define the const fetch similar movies equal a sync it's going to be an a sync function that we will call right away now um in this probably we should also check if movie do embedding is null then we should not do anything we we're going to return now instead of a function fetch similar movies what we have to do is we have to call our newly created function called match movies if we go to the database functions we should see this function in this list the name is match movies this Ser arguments and this is the return type uh based on the documentation we see that to execute the function we're going to use the RPC which is remote procedure something controller maybe I don't know and yeah we can execute it this way let's take the code use it in Fetch similar movies in our case it's not superbase client it's simply superbase that will be imported from our lib super base uh match documents the name of our function was match movies so let's replace this one here the query embedd the vector on which we want to find similar movies is going to be movie. eding embedding yes passby embedding you want to compare choose an appropriate fresh hold I'm going to leave it like this maybe we can test it later and choose the number of matches let's go with L let's go with five and here because we have similar movies let's console log similar movies if I go to Jumanji it's null it's null but why oh because we are not doing anything with the data yes we need to set similar movies with let's call them similar movies or let's leave it as data we don't care really much here I'm going to set them in state okay now we see some information here with similar movies what we can do is use these similar movies to give with a flat list and render them on our screen the data is going to be similar movies and render item is going to be our movie item so if I go to Jumanji here we see similar movies the first one is Jumanji because this is the most similar one with this one which is actually true van Peter Pan a space adventure and so on why we have only one here what happened with all the movies in the index what happened oh because we have equal title I don't want this anymore so if we go to which one Mortal Combat similar movies Mortal Combat Con in the Barbarian Rise of Guardians Pacific Rim and golden AR Army uh to be honest I'm not very familiar with movies especially old ones I barely watched any movies in my lifetime so I don't know if what it recommends is actually true but it looks like it the mask from Zero to Hero Ghost The Great Mouse Detective of Frighteners doover and the way it works is basically on this overview we are not including the title or the tagline or the genre or anything else we are only generating embeddings on the overview the text that describes the movie so it tries to find our movie with a same with a overview that has a very similar meaning so that's that's how it works if you want to include the title you can also do that you can have multiple embedding columns for the overview for the title and then generate them separately where you can combine them together into the same string uh that's also possible ghost Drag Me to Hell are you here push 12 rounds I think it makes sense and if I go from Ghost that recommends me Drag Me to Hell if I go to Drag Me to Hell can I go there uh why it's not going there oh I know why because it stays on the same page ID and in the first use effect where we query for the user we only do that once but we should do it every time the ID changes so I will put the ID in the use effect here so Drag Me to Hell the ghost is referred one 50 Shades Darker 50 Shades Darker 50 Shades of Gray Drag Me to Hell I'm not sure if they are exactly the same genre but based on the overview they should have similarities perfect so our similar movie recommendation is already working based on our generated embeddings that we save in the superbase vector database nice so uh The Next Step that we're going to do is be able to provide a semantic search here also based on embedding so if I will ask a movie about assassins it should return return me like probably the second movie assassins I would expect so because it will try to understand the meaning of my sentence and we'll find the movie which overview is closest in meaning to uh the value of a string that I'm searching okay I hope uh you are still managing to follow it along uh and yeah we we can we can move on and by the way guys if you enjoy it so far and if you haven't already make sure to subscribe to our Channel we are trying to reach 100K by the end of a year and it will mean a lot to us if you help us get there thank you and yes let's move on to our last step for the semantic search uh the challenge with a semantic search right now is that when we write something this is still text to get similar movies we need a vector we need an embedding so the similarities between movies we found it because we already have this in our database but what the user is writing it still not embedded we need to put it through the same models it's very important to use the same models generate the embedding and only after that query our database for movies that are similar to our query uh the let's remind ourselves how we generated embeddings we generated them locally in a noj context uh we cannot basically our application will run on users devices so it either has to generate embedding directly on the user device or it should send a request to an API to do that on the backand side based on a text or based on a body of text to give us back the embedding uh this local one is not going to help us uh I was thinking that it might be POS to generate this embeddings directly on uh on our mobile device and because react native is using Hermes as the JavaScript engine I'm not really sure if that's possible if you know a way to run transformer. JS in the context of react native that would help this project a lot because we can generate embedding right away on the device in our case what we're going to do is we're going to create an edge function using superbase B which is a simple function that will be executed in the cloud and we can invoke this function from our client side we can send a text that function will generate the embedding in the back end where it can use the transformer. GS and will give us back the vector which we can use to later query the database so uh this is actually a great way to see how we can all also generate embedding on the edge in the edge function if we go to the superbase documentation uh under the JavaScript example generate embeddings here we will see the documentation for the edge function features we already have a super base initialized what we want to do is we want to add a new uh function called embed let's go ahead in our project uh in a new terminal make sure that now we are not in the embeddings folder make sure we are in the root director of our project if I do LS I should see the for example app. Json and the super based directory now I'm going to go ahead and initialize a new Edge function using super base how's the syntax function new functions new and we're going to call it ined what that uh has done was generated a new function in the super base functions here called ined and you should find it here with the index.ts this function is a Deno function very similar to nodejs uh but yeah we're going to we're going to be able to reuse some of the stuff that we already know uh let's go ahead and import or let's copy everything come back and at the top instead of this import serve actually I'm going to leave it because maybe it's the the new one but it's the same I'm going to Simply paste what we copied and here what we imported is the pipeline from the transformer. JS in theno we don't need to install U uh packages we can provide directly the URL and it will take it from there but it's the same as we saw previously we are using Transformer GS we take the pipeline and environment we are adjusting a little bit this uh environment to say that this is not a browser I'm going to delete this Con so log I don't need it any inside serve we're going to no first of all outside serve I want to uh create the pipeline with the models that we that we want uh here if I take it it's the same pipeline that we use and it's important to use here the same pipeline as we have used to generate embeddings for our data for our movies and if you look in the embeddings generate here we see that we also used feature extraction and GTA small feature extraction GTA small perfect now that we have this pipe uh we can go ahead and based on the input inside the Ser function we can generate basically I'm going to copy the whole function here and replace it with my serve so what it does it takes the input from the request it runs it through the pipe uh it generates the embedding and it returns it as a response now we can go ahead and run our function uh if you have set up uh super base locally if not not we will be able to push it actually yeah let's let's not run it locally let's right away do npx super base push super base it there is no push uh let's see the documentation of edge functions how to push the changes oh functions deploy super base functions deploy or maybe npx super base let's do functions deploy it's building our function deploying function IT band on our project and if we go to our project dashboard under Edge functions we should see this embed function with details about it and command line access I don't think we need it but yeah the function was generated was deployed and it's ready for us to send uh to send requests for example this is the endpoint URL think if we not sure if it's going to be if it's missing no yeah yeah it means authorization header last step is to call the function from our JavaScript side and if I have a look at functions invoke embed body input okay so now our function is deployed what we have to do is based on the data that the user will write here we need to call the function and send the data as the input and back we will receive the embedding let's have a look at how we can do that inside our source application index. TSX we have this information in the query and when the user presses this search uh field what we have to do is to generate the embedding first so what I'm going to do is I'm going to use superbase do functions do invoke I'm going to send the name of a function in bed and the second one is the options so what we need there is the body with our input uh and the input to that function will will be the data that the user writes from our state variable the query let's get back I don't know response and let's try to console log response now I'm going to look in the dev tools here if I write something hello search is anything yes as you can see we get back the vector and the vector is in the data embedding so I can take the data from here and the data do embeding will be the data that I'm looking for what can we do with this embedding we can do the same thing as we did with similarities we can send a request to the database to give me movies that are the closest to what the user is writing so in the ID we saw that we have done that with by invoking the RPC the remote procedure the database function called match movies let's copy this one here as well back in our index. TSX and we are going to let's say match mve this for the query embedding is going to be this data embedding that we get back from our for invoking our function there is a threshold March count it can be even more like 20 and at the end what we're going to do is we're going to update the set movies in the state you with the is it movies here I hope so movies let's see if I write here I don't know Titanic and search we see the first one actually Titanic the second one and the others like triangle is uh is also something about Ocean Atlantic Ocean and that's why it's quite similar to what we are searching here with Titanic uh you can ask it even like questions like I don't know movies for the first date um yeah probably that's good that's already something and it works so based on yeah as I said before it takes what the user is typing as text um horror it takes what the user is writing it uses a uh a machine learning model to transform the text into a an array of numbers which is the vector the edding and then when we press search it looks for movies closer to that embedding so we see Halloween if I look at the Halloween we see scream facing the crowd the cell and so on so that's how simple it is to implement AI movie recommendation based on embeddings if anyone counted how many times did I say embedding in this uh tutorial let me know in the comments below it should be quite a quite a lot but yeah I'm pretty excited about this project uh I think that's everything that I wanted to show you today you can take these Concepts uh to the next level you can uh you can generate embedding for multiple fields for example a separate eding for the title The genre the uh the tagline and so on where you can put them together in order to have a more holistic overview of the of a movie at the moment we're only doing that based on the overview but you can include way more information there something that you might even consider is taking user reviews basically what users said under a movie and generate embeddings based on that and then search uh based on what user is looking for because at the moment I'm not sure but the way I understand like if I say here recommend a movie for the first date it's going to find basically movies where there is date or couples or love in the in the overview it's it's not actually knowing like what is a movie for the first date it's going to find like only yeah basically movies similar to to to to the words that we wrote here but if we take for example user reviews in the user reviews usually people write like oh I watched this with my girlfriend at my first date and it was a nice movie and that would be a better way of matching uh the the meaning and the context and the similarity between the intent of what is the user res searching with the uh with the movie that we want to recommend um but again this this is just the beginning I showed you uh the embeddings and building the knowledge database using a movie data set but you can do this in with any scenario um basically every data that you have in a application if you have let's say a blog or the documentation of a tool what you can do is generate embedding of all the pages of your website or tool or application and then provide a AI search box that user can type something and using eddings you can find the article the page the blog the feature that is very is uh similar to what user is searching based on comparing their edings and recommend that to to to them this is a very powerful search feature you can also Implement recommendations like similar blog posts similar items in a e-commerce you can generate similar uh products uh yeah I don't know sky is the limit let me know what you're going to use this for and uh I I'm really I'm really curious about that once again thank you very much uh super base for sponsoring this video was a pleasure for me to dive more into the AI and I think that this is just the beginning I would really love to do more tutorials about AI because uh it's so powerful yet quite simple to to implement with all the tools that are out there if you're interested in more more AI tutorials let me know in the description below and thank you very much for watching this till the end uh if you would subscribe I would appreciate that we're trying to reach 100K and uh I'm not only asking you I'm doing something on my own I'm trying to do more tutorials so if you're interested in learning and becoming a better developer you're going to enjoy what we have prepare for the next couple of months all right guys have a nice rest of the day bye-bye and I'm is going to see you in the next one have a nice day

Channel: notJust․dev

Views: 3,500

Keywords: vadim savin, not just development, notjust.dev, react native live coding, live coding, javascript, react tutorial, react native tutorial, javascript tutorial, react native ui, react native for beginners, Full-Stack Development, UI/UX design, Supabase Vector, AI recommendation system, Netflix algorithm, movie recommendations, content suggestion algorithm, Supabase tutorial, AI-driven content, machine learning, React Native movie app, Expo development, Supabase integration

Id: MhuWZVF3Ifs

Length: 146min 50sec (8810 seconds)

Published: Wed Oct 11 2023