1 00:00:03,330 --> 00:00:10,740 Okay, so now let's start talking about the key elements of the front end of a professional LM application. 2 00:00:13,040 --> 00:00:16,400 We have been talking about this before. 3 00:00:17,210 --> 00:00:26,660 A like most artificial intelligence related tools, our orchestration frameworks and chain and lambda 4 00:00:26,660 --> 00:00:29,900 index were initially written in Python. 5 00:00:31,200 --> 00:00:37,560 On the other hand, most tools related to web applications are written in JavaScript. 6 00:00:38,480 --> 00:00:47,210 And as a result of this reality, both Lang Chen and Lama Index have been translated into JavaScript 7 00:00:47,210 --> 00:00:51,080 to make it easier to create web applications with them. 8 00:00:53,030 --> 00:00:59,150 So if you remember, traditional artificial intelligence is based on Python. 9 00:01:00,290 --> 00:01:09,530 And Lan, Chen and Mendes, as they have been built by traditional machine learning engineers, so they 10 00:01:09,530 --> 00:01:10,700 are used to Python. 11 00:01:10,700 --> 00:01:15,770 So Python was their original language, but the moment they. 12 00:01:16,790 --> 00:01:25,100 Went to the market, they realized that the wall of full stack applications is full of JavaScript engineers, 13 00:01:25,100 --> 00:01:31,370 because this is how traditional web applications are built. 14 00:01:31,400 --> 00:01:33,440 JavaScript in the front and in the back. 15 00:01:33,590 --> 00:01:42,500 That's why long chain and Lambda index translated their initially Python version to a JavaScript version. 16 00:01:42,500 --> 00:01:44,390 So now we have both of them. 17 00:01:44,390 --> 00:01:45,290 Okay. 18 00:01:47,700 --> 00:01:57,030 In the llama index and a long chain websites, you will see that the JavaScript version of the platform, 19 00:01:57,030 --> 00:02:02,250 the framework is referred as the TypeScript version. 20 00:02:02,820 --> 00:02:03,870 Why is that? 21 00:02:04,320 --> 00:02:11,310 TypeScript is a way of writing JavaScript a bit more structure than pure JavaScript. 22 00:02:11,880 --> 00:02:12,870 This variant. 23 00:02:12,900 --> 00:02:20,490 TypeScript is used in many modern web applications and has been adopted by long chain and Lambda I index 24 00:02:20,490 --> 00:02:22,140 for the JavaScript version. 25 00:02:22,140 --> 00:02:29,970 So when you see when you read, when you hear the TypeScript version of lambda index or lang or lang 26 00:02:29,970 --> 00:02:33,810 chain, this means the JavaScript version, okay. 27 00:02:36,290 --> 00:02:43,790 The most popular solution for creating a web applications front end is Next.js. 28 00:02:44,120 --> 00:02:48,410 I know Next.js with the Vercel. 29 00:02:48,800 --> 00:02:50,660 So what is Next.js? 30 00:02:51,380 --> 00:02:57,650 Next.js is a framework based on react, which in turn is based on JavaScript. 31 00:02:57,650 --> 00:03:03,830 So probably most of you are familiar with react if you come from the web application development world 32 00:03:03,830 --> 00:03:06,350 and are also familiar with JavaScript. 33 00:03:07,690 --> 00:03:10,330 So next year is just a. 34 00:03:11,460 --> 00:03:13,710 Flavor of react. 35 00:03:13,710 --> 00:03:16,650 You can think of it like that. 36 00:03:16,650 --> 00:03:24,270 And for the ones that are not familiar with react and JavaScript, I'm just telling you Next.js is a 37 00:03:24,270 --> 00:03:36,150 framework that is built on the JavaScript language, and it is used to build front end a front, the 38 00:03:36,150 --> 00:03:38,700 front end, part of a full stack application. 39 00:03:38,910 --> 00:03:48,690 And Vercel is a hosting service created by the creators of Next.js and specifically designed to host 40 00:03:48,690 --> 00:03:50,400 applications of this framework. 41 00:03:50,400 --> 00:04:00,000 So the creators of Next.js were using react, and they realized that, okay, so we can improve this, 42 00:04:00,450 --> 00:04:06,930 we are going to build a new version of react, and we are going to call it Next.js, and we are going 43 00:04:06,930 --> 00:04:10,500 to build this version of react. 44 00:04:10,500 --> 00:04:13,470 Just with web applications in mind. 45 00:04:13,650 --> 00:04:21,510 And since we have built this special kind of react, now we are going to build a special kind of hosting 46 00:04:21,510 --> 00:04:24,990 service just for this kind of web applications. 47 00:04:24,990 --> 00:04:26,760 This was many years ago. 48 00:04:26,760 --> 00:04:35,790 From then, Next.js has become the popular, I would say, the de facto standard in the in the front 49 00:04:35,790 --> 00:04:37,530 end area of web application. 50 00:04:37,530 --> 00:04:42,990 And Vercel right now is almost the de facto standard in the hosting area. 51 00:04:43,760 --> 00:04:52,880 So these are the the most popular elements we are going to find in the front end, uh, part of the 52 00:04:52,880 --> 00:04:55,430 LM professional applications. 53 00:04:55,790 --> 00:05:02,090 So long chain and lambda index a web applications usually use. 54 00:05:03,120 --> 00:05:04,440 In the front end. 55 00:05:04,800 --> 00:05:05,520 Next. 56 00:05:05,520 --> 00:05:07,110 Next is Marcel. 57 00:05:07,620 --> 00:05:12,300 And in the back end fast API, which is based on Python. 58 00:05:13,500 --> 00:05:22,860 And usually the server is going to be rendered or a another one render for the medium sized websites 59 00:05:22,860 --> 00:05:24,270 and we can use another ones. 60 00:05:24,270 --> 00:05:29,850 For the biggest one we are going to use render because it's I think it's going to be easier and better 61 00:05:29,850 --> 00:05:31,320 for this program. 62 00:05:31,320 --> 00:05:37,950 Then in the back end we will use a vector database and other elements like for example, the cloud hosting 63 00:05:37,950 --> 00:05:41,880 service of Amazon Web Services, S3, etc., etc.. 64 00:05:41,880 --> 00:05:51,240 Okay, so how to learn these two key elements Next.js and Vercel the best way and. 65 00:05:52,260 --> 00:06:00,120 Again, our recommendation is do as software engineers and artificial intelligence engineers do. 66 00:06:00,150 --> 00:06:10,200 If we teach you one technique, this technique is going to be obsolete in three, six, one month. 67 00:06:10,440 --> 00:06:16,500 If we teach you a way of working, this is going to be with you forever. 68 00:06:17,140 --> 00:06:24,640 So this is what we are teaching you in this program how to work as an artificial intelligence engineer. 69 00:06:24,670 --> 00:06:28,450 So what is the best way of learning Nextjs. 70 00:06:28,930 --> 00:06:37,690 You go to the website of Nextjs and you go to their Quick Start tutorial. 71 00:06:37,720 --> 00:06:44,380 This is the URL where you are going to find it because the the previous URL that we are included in 72 00:06:44,380 --> 00:06:48,670 the in the notebook I think is is is not working. 73 00:06:48,670 --> 00:06:49,930 They have changed the URL. 74 00:06:49,930 --> 00:06:58,720 So the current URL as of today is nextjs.org/learn/react hyphen foundations. 75 00:06:58,750 --> 00:07:05,410 Okay so here you will find the a quick tutorial to learn Next.js. 76 00:07:05,560 --> 00:07:08,890 It's very interesting because they tell you about react. 77 00:07:08,890 --> 00:07:10,360 You know how they develop. 78 00:07:10,360 --> 00:07:10,960 Next. 79 00:07:10,960 --> 00:07:12,790 What is the relationship with JavaScript. 80 00:07:13,120 --> 00:07:18,520 It's very easy, very quick to learn about Next.js. 81 00:07:18,550 --> 00:07:24,190 So once you are here you are going to learn how to develop a Next.js application. 82 00:07:24,190 --> 00:07:25,030 Very easy. 83 00:07:25,030 --> 00:07:31,180 And once you do that, you will be able to deploy your application to a virtual server. 84 00:07:31,180 --> 00:07:33,730 And here you have in Vercel. 85 00:07:33,760 --> 00:07:37,330 Com slash docs slash getting started with Vercel. 86 00:07:37,330 --> 00:07:40,450 Remember Vercel and next are the same company. 87 00:07:40,780 --> 00:07:48,130 So here you are going to learn how to deploy a Next.js application into Vercel. 88 00:07:48,160 --> 00:07:50,770 This is going to do to to be free. 89 00:07:50,770 --> 00:07:53,830 Don't worry about the cost of both things okay. 90 00:07:53,830 --> 00:07:56,260 So Vercel has a free plan. 91 00:07:57,030 --> 00:07:58,530 That is the plan we are going to use. 92 00:07:58,530 --> 00:08:02,520 Then they have, you know, paid plans, but don't worry about them now. 93 00:08:02,940 --> 00:08:11,550 So these are the two, uh, main places for you to continue this lesson. 94 00:08:11,550 --> 00:08:18,600 Go to the tutorial of next year, and when you finish it, go to the tutorial of Vercel. 95 00:08:18,780 --> 00:08:21,990 This is going to be easy and fast for you. 96 00:08:22,020 --> 00:08:26,310 You also have the Nextjs main documentation page. 97 00:08:27,660 --> 00:08:32,700 This in my opinion, is is more recommended later. 98 00:08:32,700 --> 00:08:39,120 Right now, just get familiar with the language, get familiar with the server, and be aware that you 99 00:08:39,120 --> 00:08:42,030 have the documentation page whenever you need it. 100 00:08:42,450 --> 00:08:45,210 So a. 101 00:08:46,990 --> 00:08:56,590 These are the the the best ways to get familiar with next and with every cell in the in the A notebook 102 00:08:56,590 --> 00:09:02,530 you have some notes that can be interesting, but in my opinion best ways are the documentation. 103 00:09:02,530 --> 00:09:08,860 You also have, uh, some code in the GitHub repository, but this is the code. 104 00:09:08,860 --> 00:09:12,730 This is the code you are going to build when you complete these two tutorials. 105 00:09:12,730 --> 00:09:13,450 Okay. 106 00:09:14,200 --> 00:09:24,670 So all this you are going to to see also in the in the tutorial when when you are comfortable with these 107 00:09:24,670 --> 00:09:32,680 two tutorials, then you will be ready to go to the next step which is going to be how to use Llama 108 00:09:32,680 --> 00:09:37,270 Index, one of our orchestration frameworks with this key elements. 109 00:09:37,270 --> 00:09:39,940 Okay, we will see this in the next lesson.