HopNgo - AI Travel Assistant

HopNgo is a sophisticated web application featuring Travi, an autonomous AI travel agent that helps users find the best travel options through natural conversation.

Features

• Voice and Text Input: Interact with Travi using voice commands or text input
• Autonomous Web Navigation: Watch as Travi navigates travel websites to find options
• Smart Recommendations: Receive personalized travel recommendations based on your preferences
• Elegant UI: Futuristic interface with visual feedback for voice interactions
• Comprehensive Logging: Detailed logging system for debugging and monitoring
• Mock LLM Support: Fallback to mock LLM when OpenAI API is unavailable

Project Structure

hopNgo/
├── frontend/               # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   │   └── VoiceVisualizer.js
│   │   ├── App.js          # Main application component
│   │   ├── index.js        # React entry point
│   │   └── index.css       # Global styles with Tailwind
│   ├── package.json        # Frontend dependencies
│   └── tailwind.config.js  # Tailwind CSS configuration
│
├── backend/                # Flask backend
│   ├── app.py              # Main server with API endpoints
│   ├── llm_handler.py      # LLM integration for decision making
│   ├── automation_controller.py  # Playwright automation
│   ├── logger.py           # Centralized logging configuration
│   ├── .env                # Environment configuration
│   └── requirements.txt    # Python dependencies
│
└── README.md               # Project documentation

Setup Instructions

Frontend Setup

1. Navigate to the frontend directory:

   cd hopNgo/frontend
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

Backend Setup

1. Navigate to the backend directory:

   cd hopNgo/backend
   

2. Create a virtual environment (optional but recommended):

   python -m venv venv
   venv\Scripts\activate  # Windows
   source venv/bin/activate  # macOS/Linux
   

3. Install dependencies:

   pip install -r requirements.txt
   

4. Install Playwright browsers:

   playwright install
   

5. Configure environment variables:

   • Copy .env.example to .env (if exists) or create a new .env file
   • Add your OpenAI API key:

     OPENAI_API_KEY=your-api-key-here
     

   Note: The application will fall back to mock LLM responses if the API key is not set.

6. Start the Flask server:

   python app.py
   

Usage

1. Open your browser to http://localhost:3000

2. Click on the central orb to activate voice input or use the text field

3. Ask Travi to find travel options, for example:

   • "Find me a train from New York to Boston next Friday"
   • "I need a flight from Delhi to Mumbai on October 15th"
   • "What's the cheapest way to get from Chicago to Detroit tomorrow?"

4. Watch as Travi navigates travel websites and returns with personalized recommendations

Logging System

The application includes a comprehensive logging system for debugging and monitoring:

• Frontend Console Logs: Track speech recognition, API calls, and UI interactions
• Backend Logs: Monitor API endpoints, LLM interactions, and automation processes
• Log Categories:
  • app_logger: API endpoints and general application flow
  • llm_logger: LLM interactions and responses
  • automation_logger: Web automation and scraping processes

Logs are stored in the backend/logs directory with different files for each category.

Technologies Used

• Frontend: React, Tailwind CSS, Web Speech API
• Backend: Flask, Flask-CORS
• AI: LangChain, OpenAI API
• Web Automation: Playwright, BeautifulSoup
• Logging: Python's logging module, Browser Console API
• Environment: python-dotenv for configuration management