ChatGPT & Streamlit

icon picker
Sec 4 - AI Travel Planner

Building an Interactive AI-Powered Travel Planner with Streamlit and OpenAI GPT-3.5

In the realm of travel planning, integrating artificial intelligence can significantly enhance the personalization and efficiency of itinerary creation. The "AI Travel Planner" is a prime example of how developers can leverage OpenAI's GPT-3.5-turbo model within a Streamlit web application to deliver tailored travel suggestions. This article explores the development process of such an application, emphasizing the prompt structure and AI interaction.

Step 1: Setting Up the Development Environment

Install Necessary Libraries:
Begin by installing Streamlit, OpenAI, and other required Python libraries:
pip install streamlit openai

Step 2: Configure OpenAI API

Set the OpenAI API key in your application to authenticate requests to the GPT-3.5-turbo API:
import openai
openai.api_key = os.getenv("OPENAI_API_KEY")

Step 3: Define AI Interaction Functions

Create two functions to interact with the AI model. One handles standard requests, and the other manages streaming outputs for ongoing, real-time content generation:
def ask_gpt3_turbo(start_message, prompt):
# Append the user's prompt to the start message
start_message.append({"role": "user", "content": prompt})
# Call the OpenAI API
response = openai.chat.completions.create(
model="gpt-3.5-turbo",
temperature=0.5,
max_tokens=4010,
top_p=1,
frequency_penalty=0,
presence_penalty=0,
messages=start_message,
)
return response.choices[0].message.content
def ask_gpt3_turbo_stream(start_message, prompt):
# This function is similar but optimized for streaming responses
start_message.append({"role": "user", "content": prompt})
completion = openai.chat.completions.create(
model="gpt-3.5-turbo-16k",
temperature=0.5,
max_tokens=12000,
top_p=1,
frequency_penalty=0,
presence_penalty=0,
messages=start_message,
stream=True,
)
return completion

Step 4: Streamlit User Interface Setup

The user interface collects input from the traveler, such as destination, travel dates, and preferences, and utilizes these to generate a customized travel itinerary:
def main():
st.title("AI Travel Planner")
# Collect user inputs
destination = st.text_input("Destination")
start_date = st.date_input("Start Date")
end_date = st.date_input("End Date")
preference = st.multiselect("Preferences", ["Nature", "Architecture", "History and Culture", "Halal", "Culinary", "Local Events", "Workshops"])
preference = ", ".join(preference)
# When the user submits their preferences
if st.button("Submit"):
# Use the streaming function for dynamic response generation
completion = ask_gpt3_turbo_stream(trip_start_message, prompt_trip.format(destination, start_date, end_date, preference))
display_itinerary(completion, st)

Step 5: Handling Real-Time AI Responses

As the AI generates the itinerary, the application processes and displays each part in real-time, allowing the user to see their itinerary build out as the AI works:
def display_itinerary(completion, st_container):
chunks = ""
res_box = st_container.empty()
for chunk in completion:
if chunk.choices[0].finish_reason is None:
chunks += chunk.choices[0].delta.content
res_box.markdown(chunks, unsafe_allow_html=True)

Step 6: Deployment

Once fully tested locally, deploy your application on platforms like Heroku or AWS to make it accessible online, following specific guidelines provided by these platforms for deploying Streamlit apps.

Conclusion

The "AI Trip Planner" showcases how to effectively blend AI with web technologies to create dynamic, user-friendly applications. By utilizing Streamlit for the frontend and OpenAI's powerful GPT-3.5 model for backend processing, developers can provide users with enriched, personalized travel planning experiences, demonstrating a practical application of AI in everyday scenarios.

Prompt

The provided code snippet and accompanying helper text define a Streamlit-based web application designed for interactive travel planning using OpenAI's GPT-3.5-turbo model. Below, we explore the step-by-step breakdown of how the prompt construction and overall function operate within the "Detiktravel Trip Planner" app.

Understanding the Prompt Structure

1. Prompt Construction

The prompt in this context is structured to guide the AI in generating a travel itinerary based on user-defined inputs like destination, date range, and preferences for the trip. The prompt includes specific instructions that encapsulate both the system's expected behavior and the user's queries or commands.

2. Helper Components

System Role: Outlines the capabilities of the AI as an expert trip planner, including its understanding of geography, accommodation preferences, and ability to recommend day-wise itineraries formatted in HTML.
User Instructions: Defines how the AI should structure the itinerary, focusing on segmenting activities into morning, afternoon, evening, and night, and providing links to locations on Google Maps. It emphasizes the need for detailed, HTML-formatted outputs.
Assistant Responses: The helper includes predefined responses to illustrate how the assistant should react to a correct or incorrect destination input. It provides examples of formatted itineraries for a trip to Bandung and a rejection message for an invalid destination like Gotham.

3. Example of a Dynamic Prompt

The prompt_trip string is a template used to generate dynamic prompts based on real-time user input, allowing for personalized travel suggestions:
python
Copy code
prompt_trip.format(destination, start_date, end_date, preference)

This templating mechanism helps in crafting detailed and specific requests to the AI, enhancing the relevance and accuracy of the itinerary suggestions.

Function of the Prompt in AI Interaction

The prompt acts as a crucial interface between the user inputs collected via the Streamlit app and the GPT-3.5-turbo AI model. Here’s how it functions:
Dynamic Prompting: After collecting inputs on the destination, dates, and preferences, the application formats these into a detailed prompt that instructs the AI on generating a tailored itinerary.
Streaming API Usage: The ask_gpt3_turbo_stream function is designed to handle real-time, continuous output from the AI, suitable for generating longer responses like travel itineraries that may evolve as more input is processed.
Iterative Display: As the AI generates parts of the itinerary, the Streamlit application captures these in real-time and updates the display. This allows the user to see their itinerary build progressively, enhancing interaction and engagement.

Practical Example of Usage

When a user specifies a trip to a certain destination with specific preferences, the app:
Collects and formats these preferences into a prompt.
Sends this prompt to the AI via the streaming function.
Displays the AI-generated itinerary as it is being created, providing an interactive and dynamically updating interface.
This guide demonstrates the structured and thoughtful integration of AI to generate personalized travel itineraries, showcasing the potential for sophisticated, user-friendly applications using Streamlit and OpenAI technology.

Full Code

App
import streamlit as st
import openai
from helper.trip_planner_assistant import trip_start_message, prompt_trip

# Set the OpenAI API key
openai.api_key = "sk-proj-IIzp0SNx3rAuwPPSCax4T3BlbkFJFrK7NpFaZuH7lIqjxbTN"


# Define the function to call GPT-3.5-turbo API
def ask_gpt3_turbo(start_message, prompt):
start_message.append({"role": "user", "content": prompt})
response = openai.chat.completions.create(
model="gpt-3.5-turbo",
temperature=0.5,
max_tokens=4010,
top_p=1,
frequency_penalty=0,
presence_penalty=0,
messages=start_message,
)
return response.choices[0].message.content


def ask_gpt3_turbo_stream(start_message, prompt):
start_message.append({"role": "user", "content": prompt})
completion = openai.chat.completions.create(
model="gpt-3.5-turbo-16k",
temperature=0.5,
max_tokens=12000,
top_p=1,
frequency_penalty=0,
presence_penalty=0,
messages=start_message,
stream=True,
)
return completion


def main():
st.title("AI Travel Planner")

destination = st.text_input("Tempat Tujuan")
start_date = st.date_input("Tanggal Mulai Perjalanan")
end_date = st.date_input("Tanggal Akhir Perjalanan")
preference = st.multiselect(
"Preferensi Tujuan",
[
"Alam",
"Arsitektur",
"Sejarah dan Budaya",
"Halal",
"Kuliner",
"Local Event",
"Workshop",
],
)
preference = ", ".join(preference)
button = st.button("Kirim")

if button:
chunks = ""
res_box = st.empty()
completion = ask_gpt3_turbo_stream(
trip_start_message,
prompt_trip.format(destination, start_date, end_date, preference),
)
for chunk in completion:
if chunk.choices[0].finish_reason is None:
chunks = chunks + chunk.choices[0].delta.content
res_box.markdown(body=chunks, unsafe_allow_html=True)


if __name__ == "__main__":
main()

helper
# flake8: noqa
prompt_trip_system = """
Anda adalah trip planner yang andal, tahu bagaimana membuat itinerary yang baik dan benar sesuai dengan destinasi, durasi, dan waktu yang ditentukan.
Anda juga sangat mengerti dan memahami preferensi destinasi dari orang atau client anda.
Anda juga mengerti hotel dan penginapan yang sesuai dengan client, dan anda selalu merekomendasikan hotel pada hari pertama dan waktu Siang untuk check-in.
Anda juga sangat mengerti akan geografi, tahu letak kota, tahu provinsi dan region, juga tahu semua negara di dunia. Anda juga mengerti hubungan antar kota, provinsi, region, dan negara. Jadi jika sebuah destinasi yang diajukan client adalah bukan sebuah nama daerah, kota, region, atau provinsi, anda harus mengatakan bahwa destinasi tersebut adalah bukan sebuah nama daerah.
Dalam memahami destinasi, anda juga mengerti jarak antar destinasi.
Dalam memahami destinasi, anda perlu mendahulukian Indonesia jika destinasi tersebut mirip dengan yang ada di selain Indonesia.
"""

prompt_trip_user_instruct = """
Anda memiliki kemampuan untuk melakukan tindakan berikut berdasarkan permintaan untuk membuat rekomendasi itinerary dari destinasi dan waktu yang ditentukan. Itinerary yang dibentuk harus dibagi per hari dan kemudian dibagi per waktu Pagi, Siang, Sore, dan Malam. Format rekomandasi itu dibuat ke dalam format HTML, yaitu:

<div class="flex flex-col rounded-[20px] p-4 gap-4 bg-white">
<span class="text-base leading-[150%]">Your Trip to[in english]</span>
<h3 class="text-2xl leading-[150%] font-medium">{destination}, [provinsi dari {destination} jika ada], [negara dari {destination}]</h3>
</div><br />
[jumlah html di bawah sesuai dengan jumlah hari]
<div class="">
<input type="checkbox" name="panel" id="panel-1" class="hidden" checked="">
<label for="panel-1" class="relative block bg-[#E8F1FF] text-base leading-[150%] font-medium rounded-[20px] p-4 mb-2 shadow border-b border-grey">Hari ke-[urutan hari]: [tanggal format (day month year) ex: 7 Juli 2023]</label>
<div class="accordion__content overflow-hidden bg-white rounded-[20px]"><br />
<div class="accordion__body p-5 result__content" id="panel1">
<p>Pagi</p>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.