Trip Teller

A personalized trip iterary planner with vocal narration

Comment

TripTeller: AI-Powered Travel Planning Assistant

Inspiration

The inspiration for TripTeller came from a common travel planning pain point: information overload. When planning a trip, travelers face countless blog posts, videos, and reviews, making it overwhelming to create a coherent itinerary. We envisioned an AI-powered solution that could:

  • Generate personalized travel itineraries in seconds
  • Provide voice narration for an immersive planning experience
  • Visualize routes and attractions on an interactive map
  • Adapt to different travel styles (relaxed, moderate, intensive)

Our goal was to transform travel planning from a stressful research task into an exciting preview of the journey ahead.

What It Does

TripTeller is an intelligent travel planning application that combines multiple AI services to create comprehensive, personalized travel itineraries:

Core Features

  1. Smart City Search - Google Place Picker with autocomplete and location verification
  2. AI-Generated Itineraries - Gemini AI creates customized day-by-day travel plans
  3. Interactive Maps - Google Maps integration showing all attractions and routes
  4. Voice Narration - ElevenLabs text-to-speech for attraction descriptions
  5. Weather Integration - Real-time weather forecasts for travel dates
  6. Event Discovery - Local events and activities during your visit
  7. Customization Options - Choose travel duration (1-7 days), intensity level, and preferences

User Flow

Enter City → Confirm Location → Select Preferences → Generate Itinerary
                                                              ↓
                                                    View Map + Play Audio

How We Built It

Technology Stack

Frontend:

  • Vue.js 3 with Composition API
  • Vite for fast development and building
  • Google Maps JavaScript API for visualization
  • Responsive CSS with modern gradients and animations

Backend:

  • Flask (Python) REST API
  • Multiple AI providers with automatic fallback:
    • Primary: Gemini 2.0 Flash (google-genai SDK)
    • Backup: Cerebras Cloud SDK
    • Fallback: OpenRouter API
  • ElevenLabs for voice synthesis
  • OpenWeather API for weather data

APIs & Services:

  • Google Gemini API for itinerary generation
  • Google Maps API (Geocoding + Maps JavaScript)
  • ElevenLabs for voice narration
  • OpenWeather for weather forecasts

Architecture

┌─────────────┐         ┌──────────────┐         ┌─────────────┐
│   Vue.js    │ ──HTTP─→│ Flask API    │ ──AI──→ │ Gemini API  │
│  Frontend   │         │   Backend    │         │             │
└─────────────┘         └──────────────┘         └─────────────┘
      │                        │
      │                        ├──────→ Google Maps API
      │                        ├──────→ ElevenLabs API
      └────────────────────────┴──────→ OpenWeather API

Key Implementation Details

AI Service Priority System: We implemented a cascading fallback system to ensure reliability:

$$\text{AI Service} = \begin{cases} \text{Gemini} & \text{if } K_{\text{Gemini}} \neq \emptyset \ \text{Cerebras} & \text{if } K_{\text{Gemini}} = \emptyset \land K_{\text{Cerebras}} \neq \emptyset \ \text{OpenRouter} & \text{if } K_{\text{Gemini}} = \emptyset \land K_{\text{Cerebras}} = \emptyset \ \text{Sample Data} & \text{otherwise} \end{cases}$$

Where $K_i$ represents the API key for service $i$.

Location Disambiguation: To handle cities with duplicate names (e.g., Paris, France vs Paris, Texas), we:

  1. Use Google Geocoding API to fetch all matches
  2. Extract locality, state, and country from address components
  3. Present users with a selection modal if multiple matches exist
  4. Auto-confirm if only one match is found

Prompt Engineering: We crafted detailed prompts for Gemini to generate structured JSON output:

  • Specified exact JSON schema with examples
  • Included travel intensity parameters (relaxed/moderate/intensive)
  • Added user preference filtering (historical, food, culture, etc.)
  • Requested ticket information and booking URLs

Challenges We Faced

1. API Migration: Gemini SDK Update

Challenge: The original Google Generative AI SDK (google-generativeai) was outdated.

Solution:

  • Migrated to the new google-genai SDK
  • Updated from gemini-pro to gemini-2.0-flash-exp model
  • Rewrote API client initialization:
# Old approach
import google.generativeai as genai
genai.configure(api_key=KEY)
model = genai.GenerativeModel('gemini-pro')

# New approach
from google import genai
client = genai.Client(api_key=KEY)
response = client.models.generate_content(model="gemini-2.0-flash-exp", ...)

2. JSON Parsing from AI Responses

Challenge: AI-generated responses sometimes included markdown code blocks or extra text.

Solution:

  • Implemented robust text cleaning: python if response_text.startswith('json'): response_text = response_text[7:] response_text = response_text.strip() ```
  • Added try-catch with fallback to sample data
  • Included clear JSON schema instructions in prompts

3. Location Ambiguity

Challenge: Multiple cities share the same name globally (Paris, Springfield, London, etc.).

Solution:

  • Implemented a location confirmation modal
  • Display country, state, and formatted address for each match
  • Used Google's Place ID for unique identification
  • Auto-confirm when confidence is high (single result)

4. Voice Synthesis Reliability

Challenge: ElevenLabs API requires proper audio file handling and streaming.

Solution:

  • Created temporary audio storage folder
  • Implemented direct audio playback in the frontend
  • Added fallback to sample audio when API is unavailable
  • Cached generated audio files to reduce API calls

5. Cross-Origin Resource Sharing (CORS)

Challenge: Frontend (port 5173) couldn't communicate with backend (port 5000).

Solution:

  • Enabled Flask-CORS with proper configuration
  • Set up environment-based API URL configuration
  • Added ngrok support for external access and mobile testing

6. Mobile Optimization

Challenge: Google Place Picker was causing issues on mobile devices.

Solution:

  • Implemented mobile detection
  • Disabled Place Picker autocomplete on mobile
  • Used touch-optimized input with manual search
  • Responsive grid layout: 3-column desktop → 1-column mobile

7. API Rate Limiting & Costs

Challenge: Multiple API calls could exceed free tier limits.

Solution:

  • Implemented multi-provider fallback system
  • Cached weather and event data
  • Used efficient Gemini Flash model for cost optimization
  • Rate limit formula: $\text{Cost} = \sum_{i=1}^{n} (T_i \times P_i)$ where $T_i$ = tokens, $P_i$ = price per token

What We Learned

Technical Skills

  1. API Integration - Working with multiple AI services and handling fallbacks
  2. Prompt Engineering - Crafting effective prompts for structured output
  3. Vue.js Composition API - Modern reactive programming patterns
  4. Flask REST API Design - Creating scalable backend endpoints
  5. Error Handling - Graceful degradation when services fail

Best Practices

  • Always have a fallback: Multiple AI providers ensure reliability
  • User experience first: Auto-confirm when possible, ask when necessary
  • Mobile-first design: Test on actual devices, not just browser DevTools
  • Clear documentation: Well-documented code helps team collaboration
  • Environment-based config: Never hardcode API keys

Problem-Solving Approaches

  • Start simple, iterate: Built basic features first, then added enhancements
  • Test frequently: Caught API migration issues early through continuous testing
  • Read documentation thoroughly: Saved hours by understanding new SDK patterns
  • User feedback: Tested with real travel planning scenarios

Accomplishments We're Proud Of

  1. Seamless AI Integration - Successfully migrated to Gemini 2.0 with fallback system
  2. Beautiful UI/UX - Modern, gradient-based design with smooth animations
  3. Complete Feature Set - From search to narration, everything works together
  4. Smart Location Handling - Solved the duplicate city name problem elegantly
  5. Mobile Optimization - Works flawlessly on phones and tablets
  6. Comprehensive Testing - Built API test scripts for reliability
  7. Documentation - Clear setup guides and troubleshooting docs

What's Next for TripTeller

Short-term Enhancements

  • [ ] User Accounts - Save and share itineraries
  • [ ] Export Options - PDF/Calendar downloads
  • [ ] Offline Mode - Cache itineraries for offline viewing
  • [ ] Multi-language - Support for non-English destinations

Long-term Vision

  • [ ] Collaborative Planning - Group trip planning with voting
  • [ ] Budget Tracking - Real-time expense estimation
  • [ ] Hotel/Flight Integration - Direct booking capabilities
  • [ ] AR Navigation - Augmented reality city tours
  • [ ] Social Features - Share experiences and recommendations
  • [ ] Mobile App - Native iOS/Android applications

Research Directions

  • Personalization Algorithm: $U_{\text{pref}} = \alpha H + \beta F + \gamma C$ where $H$=historical data, $F$=feedback, $C$=current context
  • Route Optimization: Implement traveling salesman problem (TSP) solver for efficient daily routes
  • Sentiment Analysis: Analyze user reviews to improve recommendations

Try It Yourself

  1. Clone the repository
  2. Set up API keys (Gemini, Google Maps, ElevenLabs)
  3. Run backend: cd backend && python app.py
  4. Run frontend: cd vue-project && npm run dev
  5. Visit http://localhost:5173 and start planning!

Conclusion

TripTeller demonstrates the power of combining multiple AI services to solve real-world problems. By leveraging Gemini's language understanding, Google Maps' geographic data, and ElevenLabs' voice synthesis, we created an immersive travel planning experience that would have taken hours to build manually.

The project taught us valuable lessons about API integration, error handling, and user experience design. Most importantly, it showed us that with the right tools and persistence, we can build sophisticated applications that genuinely help people.

Travel planning should be exciting, not exhausting. With TripTeller, it finally is.

Built with ❤️ for NewHacks 2024

Built With

Share this project:

Updates