taiwo

Posted on Aug 28 • Edited on Sep 13

Building Travel Lens AI: Image Analysis With Gemini on Google Cloud

#beginners #programming #tutorial #ai

Have you ever wanted to build an intelligent application that can see and understand images? Yes? Me too! I was recently inspired by a fellow dev and created my own Colab Notebook for an AI-powered Travel Blogger Assistant. But then I thought, why stop at a notebook? What if we took this idea a step further and built a complete, full-stack web application that anyone could actually use?

That's exactly what we're going to do! We'll transform the core logic from my notebook into Travel Lens AI; a real web app that analyzes your travel photos, identifies landmarks, and gives you personalized recommendations, all powered by Google's Gemini model. And the best part? We'll build and deploy everything using only Google Cloud Shell in our browser.

It was a blast creating this, and now I want to show you how to take an AI concept from notebook to live application, all without leaving your browser!

By the end of this tutorial, you'll have a working full-stack application that you can share with your circle of fellow cool devs. This project demonstrates full-stack development, AI integration, and cloud deployment. Perfect for your portfolio.

Let's cook!👩🏼‍🍳

Step 1: Setting Up Your Google Cloud Environment

We need a place to build our app. We'll use Google Cloud's free tier. (You have a Google account, obviously.) This gives you everything you need to build this app.

Create or Select a Project.

Head over to the Google Cloud Console. Create a new project (you can name it travel-lens-ai) or select an existing one.

Enable the Vertex AI API.

This is the magic that gives us access to Gemini. In the search bar at the top, type Vertex AI API and select it. Click the blue Enable button. This might take a minute.

Link Billing.

Don't worry. Even though Google requires a billing account for API access (and spam prevention), you won't be charged anything for this project. You can use an existing billing account or create a new one to access the generous free trial credits. Just head to the Billing menu on the sidebar.

Launch Cloud Shell.

In the top right corner of the console, click the >_ icon to Activate Cloud Shell. Once it's running, click the Open Editor button to launch the VS Code-like editor in your browser.

An "Authorize Cloud Shell" prompt might pop up, please do not reject haha

Step 2: Creating the Project Structure

Now that we're in the editor, let's set up our project structure. You'll see the Cloud Shell terminal at the bottom of the editor. If it's not visible, just hit ctrl/cmd + J to toggle it open. Run these commands one by one to create our files:

# Create the main project folder and navigate into it
mkdir travel-lens-ai && cd travel-lens-ai

# Create our Python backend file
touch app.py

# Create a file to list our Python libraries
touch requirements.txt

# Create a folder for our HTML file
mkdir templates && touch templates/index.html

Your file explorer on the left should look like this:

Step 3: Building the Python Backend with Flask

Our backend will be a simple web server using Flask. It will have one job: to receive an image, send it to the Gemini model for analysis, and return the results.

Define Dependencies.

Open the requirements.txt file and add the libraries our app needs:

Flask
flask-cors
google-cloud-aiplatform
Pillow
google-auth

Install the Libraries.

In the terminal, run this command:

pip install -r requirements.txt

Write the Flask App.

Now, open app.py and paste the following code into it. This code sets up the server, defines the AI analysis logic, creates the API endpoint and sets the frontend route.

Setting up & initializing

# app.py
from flask import Flask, request, jsonify, render_template
from flask_cors import CORS
import vertexai
from vertexai.generative_models import GenerativeModel, Part
import os
import google.auth

# Initialize the Flask application
app = Flask(__name__)
CORS(app)

# --- Configuration ---
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024 # Allow up to 16MB images

PROJECT_ID = "travel-lens-ai"  # <-- IMPORTANT: REPLACE WITH YOUR PROJECT ID
LOCATION = "us-central1"
MODEL_NAME = "gemini-2.0-flash-exp"

Core AI analysis logic

def analyze_image_from_bytes(image_bytes):
    try:
        credentials, project_id = google.auth.default()
        vertexai.init(project=PROJECT_ID, location=LOCATION, credentials=credentials)

        multimodal_model = GenerativeModel(MODEL_NAME)
        image_part = Part.from_data(image_bytes, mime_type="image/jpeg")

# --- Prompting. You can customize to how you want it ---
        prompt = """
        You are a travel expert. Analyze the image provided and provide the following information in a JSON format:
        - "landmarkName": The name of the landmark, city, or place.
        - "description": A captivating and interesting description of the place.
        - "location": A JSON object with "city" and "country".
        - "personalizedRecommendations": An array of 3-4 actionable travel tips.
        - "photoTips": A creative tip for taking a great photo at this location.
        """

        response = multimodal_model.generate_content([prompt, image_part])
        response_text = response.text.strip().replace("```

json", "").replace("

```", "")

        return json.loads(response_text)

    except Exception as e:
        print(f"An error occurred during AI analysis: {e}")
        return {"error": f"An internal AI error occurred. Details: {e}"}

API endpoint & frontend route

@app.route('/analyze', methods=['POST'])
def analyze_image_endpoint():
    if 'image' not in request.files:
        return jsonify({"error": "No image file provided"}), 400

    image_file = request.files['image']
    analysis_result = analyze_image_from_bytes(image_file.read())

    if "error" in analysis_result:
        return jsonify(analysis_result), 500

    return jsonify(analysis_result), 200

# --- Frontend Route ---
@app.route('/')
def home():
    return render_template('index.html')  # <-- IMPORTANT: remember our setup in the beginning

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8080)), debug=True)

Fear not! You're not just blindly copying a long a** code blocks. I have broken it down with comments so you understand exactly what each section does. This way, you're actually learning, not just following instructions. Remember to replace YOUR_PROJECT_ID with your actual Google Cloud Project ID (unless you're using travel-lens-ai).

Step 4: Creating the UI

Now the fun part. Let's build the user interface. This will be a single HTML file that uses Tailwind CSS for styling and JavaScript to connect with our backend.

Open templates/index.html and you can either build your own custom interface or use my implementation as a starting point. The key elements you'll need are:

styled file input for uploading travel photos
submit button to trigger the AI analysis
results section to display Gemini's insights

Whether you customize it or use my code as-is, make sure you understand the JavaScript, as that's what sends your images to the AI for analysis.

Step 5: Run Your Application!

This is the moment we've been waiting for. With our backend logic and frontend interface in place, it's time to bring Travel Lens AI to life.
In the Cloud Shell terminal, (again, make sure you are in your travel-lens-ai) directory and run this command:

python app.py

After a few seconds, the terminal will show that the Flask server is running. Now, look at the top-right corner of the Cloud Shell window for a Web Preview button. Click it and select Preview on port 8080.

A new browser tab will open, and your application will be live! Go ahead, upload a photo of your favorite travel spot and watch Gemini work its magic.

Troubleshooting Checklist

If you run into an error, don't panic! Here are the most common fixes:

Permissions Error? The most common issue is authentication. Force Cloud Shell to re-authenticate by running gcloud auth application-default login in the terminal, follow the link to authorize, and then restart your python app.py server.
"Project Not Found"? Make sure the PROJECT_ID in your app.py file exactly matches the ID of the project where you enabled the Vertex AI API. You can also reconfirm the project in Cloud Shell by running gcloud config set project PROJECT_ID in your terminal.
Dependencies Missing? If you see an "import error," you may have forgotten to install the libraries. Just run pip install -r requirements.txt again.

Congratulations!🥳 You've just built and deployed a powerful, full-stack AI application using nothing but your web browser. How cool is that?!

You've learned how to set up a cloud environment, build a Python backend, create a modern frontend, and integrate with the powerful Gemini model.

But this is just the beginning. You could expand this project by saving analysis history, adding user accounts, or even generating entire travel itineraries.

A huge shoutout to the dev whose Colab Notebook sparked this entire project! It's incredible how inspiration can transform a simple notebook into a full-stack application. That's the beauty of open development and sharing knowledge.

I hope this tutorial has shown you how simple(👀), accessible and powerful modern AI development can be. Happy hacking!