So, in this video, we'll be testing out the
image-based travel suggestion search feature
we just built.
Let's begin.
First, you need to make sure that your server
is running.
So let us pull up our command line.
Our server is still running.
Our frontend runs the same.
So we're good.
We have tested the current state of our server
and it works fine.
So this should give us the fresh copy.
And now we can head over to our browser and
test our application.
So let's do that.
Back in the browser, first, let us make sure
that we have reloaded the application to make
sure that all our new changes have kicked
in.
And to test this feature, we need to head
over to the search by image tab.
That's where we get our image search form.
And first, let us try to submit this form
without selecting anything, without selecting
an image or preferences.
As you can see, the browser blocks us from
doing that.
And we also have logic written in our handler
to ensure that even if our browser does not
support this automatic validation, we can
still make sure that it is in effect and a
message is shown to the user.
Now let us select an image and perform our
image-based search.
Click Choose File.
Go to selecting the London Eye image.
And as you can see, we have our preview showing
as expected.
Let us conduct a search without any preferences,
so let's say find similar destinations and
just in time, we get some destinations back.
We want destinations that have this ferris
wheel and if we scroll down, we can see the
Singapore Flyer.
It says similar to the London Eye, the Singapore
Flyer is a giant observation wheel offering
panoramic views of the city.
We also have one in Hong Kong, says while
not an observation wheel, the Star Ferry offers
iconic views of Hong Kong's skyline, including
impressive architecture along the waterfront
reminiscent of the Thames views from the London
Eye.
So we're getting destinations that are similar
or offer similar features to the image we
uploaded.
How amazing is that?
And as you can see, Tyne Bridge, Newcastle
is on budget, but principality of Sealand
is luxury.
So you want to plan your pocket accordingly.
Now let's get a closer look by checking the
DevTools.
Let us see what we are sending and receiving
behind the scenes.
Let me straighten it out a little bit.
Okay.
I think I'll have to do the search once again.
So let us just click this again.
And we see our request being sent.
Let's wait for the response to come back.
And then we get our responses.
And as you can see, they are nicely animated.
Like I said, some of our CSS is doing that
for us, all the clean animations.
Now when we check this, if we go to the payload,
we can see our file, and it's a binary file.
And if we go to preview, we can see our list
of destinations, just as we saw in the text
based search.
Now let us try this search, but this time,
let us select some preferences.
Let's say we want Adventure and Sports and
Mountains and Hiking, yeah, those two.
Let's click Find Similar Destinations.
As you can see, we get some back.
We still get the Singapore Flyer because it
still has the features from the preferences
and the one in Las Vegas.
We still get these two.
If we scroll down, we no longer get the Tyne
Bridge that was in Newcastle.
So now we have the wheel of Liverpool in the
UK.
We also have one in Vienna here.
And if we look at the request, if we look
at the payload, now we have not just our file,
but we also have our preferences list here.
We have mountains and hiking, adventure, and
sports.
How interesting is that?
Now let us try to see what happens if we click
more than three references.
Now we have two selected.
click wildlife and let us click relaxation
and wellness.
As you can see it says maximum
of three preferences allowed.
If I try to click another one again it tells
me maximum of three
preferences allowed.
Now if I deselect one of them unless I pick
art and culture everything is still
fine.
But if I try to add beach and ocean it still
warns me and doesn't even select that option
at
all.
Everything working just as we planned.
So now we have the image based search alternative
feature working and it's looking pretty good.