TravelBird - AI Audio Tour Guide

See the demo here: https://www.youtube.com/watch?v=eQwhlSy6yC0

TravelBird is a location-aware web application that acts as your personal AI tour guide. It uses real-time geolocation to generate personalized audio stories, historical facts, and visual enhancements based on your surroundings and specific interests.

Features

• Real-time Location Tracking: Tracks your movement using GPS to identify nearby points of interest.
• Personalized Content: Generates unique scripts and recommendations based on your selected interests (e.g., History, Architecture, Ghost Stories).
• AI-Powered Audio: Integrates with ElevenLabs for high-quality conversational AI narration.
• Dynamic Visuals: Uses Google Gemini to generate atmospheric "vibe" images of your current location.
• Manual Teleportation: "Demo mode" allows you to manually type a location to test the experience without moving.
• Map Interface: Interactive map built with Leaflet.js.

Technologies & Open Source Tools

This project utilizes the following open-source libraries, APIs, and data providers:

Open Source Libraries & Frameworks

• React: Used for the user interface (MIT License).
• Leaflet.js: An open-source JavaScript library for mobile-friendly interactive maps (BSD-2-Clause License).
• FontAwesome: Icon library used for UI elements (Free License).

Data Providers

• OpenStreetMap: Map tiles and geographical data © OpenStreetMap contributors (ODbL License).

APIs & SDKs

• Google Gemini API: Powered by the @google/genai SDK. Used for:
  • Contextual location analysis.
  • Generating tour scripts and recommendations.
  • Geocoding (Manual location search).
  • Image generation (Visualizing locations).
• ElevenLabs Conversational AI: Powered by the @elevenlabs/client SDK. Used for the real-time, interactive audio tour guide agent.

Build Tools

• esm.sh: A modern CDN that allows using ES Modules directly in the browser without a local bundler or build step.

Setup & Requirements

Prerequisites

1. A modern web browser with support for Geolocation and Microphone access.
2. Google GenAI API Key.
3. ElevenLabs Agent ID (configured in index.tsx).

Environment Variables

The application expects the following environment variable to be available at runtime:

• API_KEY: Your Google GenAI API key.

Running the App

1. Serve the project root using a static file server (e.g., python3 -m http.server, live-server, or VS Code Live Server).
2. Open index.html in your browser.
3. Permissions:
   • Allow Location Access when prompted (required for tracking).
   • Allow Microphone Access when prompted (required for the conversational agent).

Usage

1. Onboarding: Select your interests (e.g., History, Food) to customize the tour.
2. Start Tour: Click "Start Journey" to begin.
3. Exploration:
   • Walk around! The app tracks your location.
   • When you move significantly (~300m), the AI analyzes your new surroundings and the audio agent will provide updates.
4. Manual Mode: Click the Location icon in the top bar to switch to "Manual Mode". Type a city or landmark name and press Enter to "teleport" there.
5. Visuals: Toggle between the Map view and the AI-generated "Vibe" image using the image icon in the top right.

File Structure

• index.html: Main entry point, loads dependencies via CDN/ESM.
• index.tsx: Core application logic (React components, Map logic, AI integration).
• metadata.json: Configuration for permission requests.