1 00:00:00,340 --> 00:00:03,180 So, in this video, we'll be testing out the 2 00:00:03,180 --> 00:00:05,560 image-based travel suggestion search feature 3 00:00:05,560 --> 00:00:06,800 we just built. 4 00:00:06,800 --> 00:00:08,080 Let's begin. 5 00:00:08,080 --> 00:00:09,860 First, you need to make sure that your server 6 00:00:09,860 --> 00:00:10,660 is running. 7 00:00:10,660 --> 00:00:12,620 So let us pull up our command line. 8 00:00:12,620 --> 00:00:13,940 Our server is still running. 9 00:00:13,940 --> 00:00:15,560 Our frontend runs the same. 10 00:00:15,560 --> 00:00:17,280 So we're good. 11 00:00:17,280 --> 00:00:19,760 We have tested the current state of our server 12 00:00:19,760 --> 00:00:20,660 and it works fine. 13 00:00:20,660 --> 00:00:23,580 So this should give us the fresh copy. 14 00:00:23,580 --> 00:00:26,680 And now we can head over to our browser and 15 00:00:26,680 --> 00:00:28,340 test our application. 16 00:00:28,340 --> 00:00:30,020 So let's do that. 17 00:00:30,020 --> 00:00:31,620 Back in the browser, first, let us make sure 18 00:00:31,620 --> 00:00:33,340 that we have reloaded the application to make 19 00:00:33,340 --> 00:00:35,060 sure that all our new changes have kicked 20 00:00:35,060 --> 00:00:36,220 in. 21 00:00:36,220 --> 00:00:37,920 And to test this feature, we need to head 22 00:00:37,920 --> 00:00:40,500 over to the search by image tab. 23 00:00:40,500 --> 00:00:43,120 That's where we get our image search form. 24 00:00:43,120 --> 00:00:46,080 And first, let us try to submit this form 25 00:00:46,080 --> 00:00:48,220 without selecting anything, without selecting 26 00:00:48,220 --> 00:00:51,740 an image or preferences. 27 00:00:51,740 --> 00:00:54,540 As you can see, the browser blocks us from 28 00:00:54,540 --> 00:00:56,020 doing that. 29 00:00:56,020 --> 00:00:58,740 And we also have logic written in our handler 30 00:00:58,740 --> 00:01:00,980 to ensure that even if our browser does not 31 00:01:00,980 --> 00:01:03,920 support this automatic validation, we can 32 00:01:03,920 --> 00:01:06,320 still make sure that it is in effect and a 33 00:01:06,320 --> 00:01:08,480 message is shown to the user. 34 00:01:08,480 --> 00:01:10,140 Now let us select an image and perform our 35 00:01:10,140 --> 00:01:12,360 image-based search. 36 00:01:12,360 --> 00:01:13,720 Click Choose File. 37 00:01:13,720 --> 00:01:17,240 Go to selecting the London Eye image. 38 00:01:17,240 --> 00:01:20,040 And as you can see, we have our preview showing 39 00:01:20,040 --> 00:01:22,180 as expected. 40 00:01:22,180 --> 00:01:26,520 Let us conduct a search without any preferences, 41 00:01:26,520 --> 00:01:30,680 so let's say find similar destinations and 42 00:01:30,680 --> 00:01:34,240 just in time, we get some destinations back. 43 00:01:34,240 --> 00:01:36,680 We want destinations that have this ferris 44 00:01:36,680 --> 00:01:40,300 wheel and if we scroll down, we can see the 45 00:01:40,300 --> 00:01:41,640 Singapore Flyer. 46 00:01:41,640 --> 00:01:43,700 It says similar to the London Eye, the Singapore 47 00:01:43,700 --> 00:01:45,860 Flyer is a giant observation wheel offering 48 00:01:45,860 --> 00:01:48,220 panoramic views of the city. 49 00:01:48,220 --> 00:01:50,900 We also have one in Hong Kong, says while 50 00:01:50,900 --> 00:01:53,460 not an observation wheel, the Star Ferry offers 51 00:01:53,460 --> 00:01:56,140 iconic views of Hong Kong's skyline, including 52 00:01:56,140 --> 00:01:58,380 impressive architecture along the waterfront 53 00:01:58,380 --> 00:02:01,180 reminiscent of the Thames views from the London 54 00:02:01,180 --> 00:02:01,680 Eye. 55 00:02:01,680 --> 00:02:06,240 So we're getting destinations that are similar 56 00:02:06,240 --> 00:02:09,740 or offer similar features to the image we 57 00:02:09,740 --> 00:02:10,479 uploaded. 58 00:02:10,479 --> 00:02:11,280 How amazing is that? 59 00:02:11,280 --> 00:02:13,260 And as you can see, Tyne Bridge, Newcastle 60 00:02:13,260 --> 00:02:16,960 is on budget, but principality of Sealand 61 00:02:16,960 --> 00:02:18,180 is luxury. 62 00:02:18,180 --> 00:02:21,180 So you want to plan your pocket accordingly. 63 00:02:21,180 --> 00:02:23,500 Now let's get a closer look by checking the 64 00:02:23,500 --> 00:02:24,640 DevTools. 65 00:02:24,640 --> 00:02:27,740 Let us see what we are sending and receiving 66 00:02:27,740 --> 00:02:29,860 behind the scenes. 67 00:02:29,860 --> 00:02:32,700 Let me straighten it out a little bit. 68 00:02:32,700 --> 00:02:33,920 Okay. 69 00:02:33,920 --> 00:02:35,660 I think I'll have to do the search once again. 70 00:02:35,660 --> 00:02:38,680 So let us just click this again. 71 00:02:38,680 --> 00:02:40,920 And we see our request being sent. 72 00:02:40,920 --> 00:02:43,320 Let's wait for the response to come back. 73 00:02:43,320 --> 00:02:45,120 And then we get our responses. 74 00:02:45,120 --> 00:02:46,840 And as you can see, they are nicely animated. 75 00:02:46,840 --> 00:02:50,180 Like I said, some of our CSS is doing that 76 00:02:50,180 --> 00:02:54,720 for us, all the clean animations. 77 00:02:54,720 --> 00:02:57,900 Now when we check this, if we go to the payload, 78 00:02:57,900 --> 00:03:00,800 we can see our file, and it's a binary file. 79 00:03:00,800 --> 00:03:02,940 And if we go to preview, we can see our list 80 00:03:02,940 --> 00:03:05,680 of destinations, just as we saw in the text 81 00:03:05,680 --> 00:03:06,920 based search. 82 00:03:06,920 --> 00:03:09,180 Now let us try this search, but this time, 83 00:03:09,180 --> 00:03:10,960 let us select some preferences. 84 00:03:10,960 --> 00:03:16,480 Let's say we want Adventure and Sports and 85 00:03:16,480 --> 00:03:20,720 Mountains and Hiking, yeah, those two. 86 00:03:20,720 --> 00:03:24,660 Let's click Find Similar Destinations. 87 00:03:24,660 --> 00:03:27,940 As you can see, we get some back. 88 00:03:27,940 --> 00:03:30,540 We still get the Singapore Flyer because it 89 00:03:30,540 --> 00:03:32,620 still has the features from the preferences 90 00:03:32,620 --> 00:03:34,460 and the one in Las Vegas. 91 00:03:34,460 --> 00:03:35,660 We still get these two. 92 00:03:35,660 --> 00:03:38,260 If we scroll down, we no longer get the Tyne 93 00:03:38,260 --> 00:03:40,440 Bridge that was in Newcastle. 94 00:03:40,440 --> 00:03:42,760 So now we have the wheel of Liverpool in the 95 00:03:42,760 --> 00:03:43,600 UK. 96 00:03:43,600 --> 00:03:45,880 We also have one in Vienna here. 97 00:03:45,880 --> 00:03:48,040 And if we look at the request, if we look 98 00:03:48,040 --> 00:03:51,240 at the payload, now we have not just our file, 99 00:03:51,240 --> 00:03:56,100 but we also have our preferences list here. 100 00:03:56,100 --> 00:03:58,440 We have mountains and hiking, adventure, and 101 00:03:58,440 --> 00:03:59,360 sports. 102 00:03:59,360 --> 00:04:00,640 How interesting is that? 103 00:04:00,640 --> 00:04:04,380 Now let us try to see what happens if we click 104 00:04:04,380 --> 00:04:05,940 more than three references. 105 00:04:05,940 --> 00:04:07,800 Now we have two selected. 106 00:04:07,800 --> 00:04:10,740 click wildlife and let us click relaxation 107 00:04:10,740 --> 00:04:11,840 and wellness. 108 00:04:11,840 --> 00:04:13,580 As you can see it says maximum 109 00:04:13,580 --> 00:04:15,220 of three preferences allowed. 110 00:04:15,220 --> 00:04:17,120 If I try to click another one again it tells 111 00:04:17,120 --> 00:04:18,079 me maximum of three 112 00:04:18,079 --> 00:04:19,300 preferences allowed. 113 00:04:19,300 --> 00:04:21,560 Now if I deselect one of them unless I pick 114 00:04:21,560 --> 00:04:23,580 art and culture everything is still 115 00:04:23,580 --> 00:04:24,320 fine. 116 00:04:24,320 --> 00:04:27,480 But if I try to add beach and ocean it still 117 00:04:27,480 --> 00:04:30,100 warns me and doesn't even select that option 118 00:04:30,100 --> 00:04:30,420 at 119 00:04:30,420 --> 00:04:31,380 all. 120 00:04:31,380 --> 00:04:33,740 Everything working just as we planned. 121 00:04:33,740 --> 00:04:40,120 So now we have the image based search alternative 122 00:04:40,120 --> 00:04:41,000 feature working and it's looking pretty good.