In this section, we'll be developing the image-based
search feature for our travel
companion application.
And in this video, we'll be discussing how
the feature will be implemented on both the
front-end and the back-end.
Starting with the user interface, we'll need
an image upload field for the user to
upload the image of a landmark or feature
they want in places they would like to visit.
Below the File Upload widget, we'll have a
section where the user will be able to preview
a selected image.
Next we'll have a set of checkboxes for the
user's preferences, just as we did with the
text search feature.
The user will also be limited to 3 preferences
that can be selected.
Just as with the search feature, we'll also
be displaying suggested destinations below
the form.
This will contain the same details as we have
seen with the text search,
and also a button to check the weather.
Now let's discuss the backend.
At the backend, we'll be receiving an image
from our frontend form
and requesting destination suggestions from
Gemini.
Our backend endpoint will be a POST endpoint,
and we'll be giving the name
API slash suggestByImage.
This will take two parameters.
a file parameter that is the image file data
for the image uploaded by the user,
and a preferences parameter, which is an optional
list of comma-separated string of preferences.
This endpoint will take this data, prepare
it into a prompt,
and send it over to the Gemini API.
The image file will also be included along
with the prompt.
This is why we have selected Gemini 2.5
Flash, a multimodal model, for our LLM operations.
The API will then return a JSON output with
all the data we need for the front-end to
display.
This result will be based on the image sent
to the model
and any other preferences the user may have
submitted.
So that's the plan.
In the next video,
we'll start developing this feature by building
the back-end endpoint.