Rendering a Basic HTML Page with Flask

Welcome back! In this lesson, we will focus on creating a basic HTML interface for our travel planner application. This interface will allow users to input their travel preferences and view the generated itinerary. By the end of this lesson, you will have a foundational understanding of how to render HTML pages using Flask, which is a crucial step in transitioning from backend API functionality to a user-facing application. This lesson builds on the RESTful API we developed in the previous lesson, and it sets the stage for creating a more interactive and engaging user experience.

In our previous lesson, we explored the creation of a RESTful API using Flask. We learned how to set up a Flask application, define routes, handle requests, and manage errors. We also integrated the API with the CrewAI travel planner to generate personalized travel itineraries.

This API serves as the backbone of our application, processing travel planning requests and delivering structured itinerary responses. As we move forward, we will transition from focusing solely on backend functionality to developing a user-facing interface that interacts with our API.

Our project is organized to support both backend and frontend development. Here's a visual representation of the structure:

app/
├── main.py
├── travel_planner/
│   ├── travel_planner_crew.py
│   ├── models/
│   ├── tools/
│   └── config/
└── templates/
    └── index.html

The templates folder is a key component of this structure, as it stores all the HTML files that our Flask application will render. Within this folder, you will find the index.html file, which serves as the main interface for our travel planner application. This file will be the focus of our customization efforts as we build a user-friendly interface.

To serve our HTML page, we need to define a route in our Flask application that renders the index.html file. This is done by setting up a home page endpoint using the @app.route decorator. Flask provides a powerful function called render_template that allows us to serve HTML files to users. This function is essential for rendering HTML pages and dynamically inserting data into templates. When a user accesses a specific route in our Flask application, render_template locates the corresponding HTML file in the templates folder and serves it to the user. This process enables us to create dynamic web pages that can display data from our backend API.

from flask import Flask, render_template, request, jsonify
from travel_planner.travel_planner_crew import TravelPlannerCrew

# Initialize Flask application
app = Flask(__name__)

# Route for the home page
@app.route('/')
def index():
    # Render the HTML template
    return render_template('index.html')
    
# Travel planning route and configurations to start the server...

In this code snippet, the index function is associated with the root URL ('/'). When a user accesses this URL, Flask will call the index function, which in turn uses render_template to serve the index.html file. This integration allows us to seamlessly connect our backend logic with the frontend interface.