An AI-powered smart travel planning application that generates travel itineraries, attraction recommendations, and provides voice narration simply by entering a city name.

• Quick Demo: Enter "Paris", get complete itinerary, map display, and voice narration in seconds
• Modern UI: Beautiful gradient design, responsive layout, excellent user experience
• AI-Driven: Fully powered by Gemini AI for intelligent itinerary planning
• Smart Search: Google Place Picker provides real-time location autocomplete (New)
• Location Verification: Automatically verify city existence, intelligently handle duplicate city names (e.g., Paris, France vs Paris, Texas) (Latest)
• Multi-language Support: Frontend supports multiple languages, easily extensible

+------------------------------------------+
|  TripTeller - AI Tour Guide              |
|  Smart Recommendations · Voice · Routes  |
+------------------------------------------+
|  [Enter city name...]     [Search]       |
|  Popular: Tokyo Paris Toronto...        |
+------------------------------------------+
|  Itinerary        |    Map               |
|  Day 1            |    [Google Maps]     |
|  • Place 1 [Play] |                      |
|  • Place 2 [Play] |                      |
|  Day 2...         |                      |
+------------------------------------------+

• Vue.js 3 - Progressive JavaScript framework
• Vite - Fast frontend build tool
• Google Maps API - Map display

• Flask - Python web framework
• Gemini API - Google's generative AI
• ElevenLabs - AI voice synthesis
• CORS - Cross-origin resource sharing

• Node.js >= 20.19.0
• Python >= 3.8
• The following API keys:
  • Google Gemini API Key
  • Google Maps API Key
  • ElevenLabs API Key

git clone <your-repo-url>
cd newhacks

cd backend

# Create virtual environment
python3 -m venv venv
source venv/bin/activate  # Linux/Mac
# or venv\Scripts\activate  # Windows

# Install dependencies
pip install -r requirements.txt

# Configure environment variables
cp env.example .env
# Edit the .env file and add your API keys

# Run backend server
python app.py

The backend will run on http://localhost:5000

cd vue-project

# Install dependencies
npm install

# Configure environment variables
cp env.example .env
# Edit the .env file and add your Google Maps API Key

# Run development server
npm run dev

The frontend will run on http://localhost:5173

If you need external users to access your application (remote demos, mobile device testing, etc.):

# Start ngrok in a new terminal
./start-ngrok.sh

# Get public URLs and update configuration in another terminal
./get-ngrok-urls.sh
./update-frontend-url.sh

# Restart frontend for changes to take effect

For detailed instructions, see NGROK_SETUP.md or Quick Start Guide

1. Visit Google AI Studio
2. Sign in and create an API key
3. Copy the key to your backend .env file

1. Visit Google Cloud Console
2. Create a project and enable the following APIs:
   • Maps JavaScript API
   • Geocoding API
3. Create credentials and copy the API key
4. Paste into both frontend and backend .env files

1. Visit ElevenLabs
2. Sign up for an account (free tier available)
3. Get your API key from settings
4. Copy to backend .env file

newhacks/
├── backend/                 # Flask backend
│   ├── app.py              # Main application file
│   ├── requirements.txt    # Python dependencies
│   ├── env.example         # Environment variables example
│   └── README.md           # Backend documentation
│
├── vue-project/            # Vue frontend
│   ├── src/
│   │   ├── App.vue         # Main app component
│   │   ├── components/     # Vue components
│   │   │   ├── CityInput.vue        # City input
│   │   │   ├── ItineraryDisplay.vue # Itinerary display
│   │   │   ├── MapView.vue          # Map view
│   │   │   └── AudioPlayer.vue      # Audio player
│   │   └── main.js
│   ├── package.json
│   └── env.example         # Environment variables example
│
└── README.md               # Project documentation

1. Enter City: Type any city name in the search box (e.g., Tokyo, Paris, Toronto)
2. Confirm Location: After clicking search, the system verifies the location
   • If only one match is found, it's automatically confirmed
   • If multiple cities with the same name exist, select the correct country/state
3. Generate Itinerary: Choose travel duration (1/3/5/7 days) and intensity (relaxed/moderate/intensive)
4. View Itinerary: AI automatically generates a customized itinerary
5. View Map: The map on the right automatically marks all attraction locations
6. Listen to Narration: Click the "Play Narration" button for any attraction
7. Enjoy Your Trip: Use the AI-generated itinerary to plan your travel!

Edit in App.vue:

body: JSON.stringify({ city, days: 3 })  // Change to your desired number of days

Modify the styles parameter in the initMap function in MapView.vue.

Modify in the generate_audio function in app.py:

voice="Bella"  # Options: Rachel, Domi, Bella, Antoni, etc.

• Check that the backend is running on http://localhost:5000
• Verify that VITE_API_URL in .env is configured correctly

• Confirm that the Google Maps API Key is properly configured
• Check that the APIs are enabled (Maps JavaScript API and Geocoding API)

• Verify that the ElevenLabs API key is correct
• Ensure your account has sufficient free credits

• The backend will automatically fall back to sample data
• Check if the Gemini API key is valid

• Add user account system
• Save and share itineraries
• Multi-language interface support
• Real-time weather integration
• Hotel and restaurant recommendations
• Mobile app version

Issues and Pull Requests are welcome!

MIT License

• Google Gemini - AI itinerary generation
• ElevenLabs - Voice synthesis
• Google Maps - Map services
• Vue.js - Frontend framework
• Flask - Backend framework

Built for NewHacks 2025 - Let AI be your personal travel advisor!