AI 旅行规划助手 🌍✈️

2025-05-10T10:00:36.png

一个基于人工智能的旅行规划助手，利用大语言模型和高德地图API为用户定制个性化的旅行计划。 🔗 项目地址

📝 在线体验 Demo

✨ 功能特点

🤖 AI驱动的旅行规划：基于硅基流动Qwen/Qwen3-235B-A22B模型智能生成详细的多日旅程
🗺️ 高德地图集成：准确显示景点位置和路线规划
🌦️ 实时天气信息：获取目的地的准确天气预报
🏨 完整旅行建议：包含住宿、交通、餐饮和景点游览时间推荐
💾 智能缓存机制：减少API调用，提高响应速度
📱 响应式设计：适配各种设备尺寸，提供良好的移动端体验

🚀 快速开始

前提条件

Node.js 16.x 或更高版本
高德地图API密钥
大语言模型API密钥 (如DeepSeek API)

安装步骤

克隆仓库

git clone https://github.com/Drfccv/AI-Trip-Planner.git
cd AI-Trip-Planner

安装依赖

npm install

创建环境配置在项目根目录创建.env文件，添加以下内容：

export const ENV = {
  AMAP_API_KEY: 'YOUR_AMAP_KEY',
  AMAP_SECURITY_KEY: 'YOUR_AMAP_SECURITY_KEY',
  DEEPSEEK_API_KEY: 'YOUR_SILICONFLOW_KEY'
};

启动开发服务器

npm run dev

打开浏览器访问 http://localhost:5173

🏗️ 技术栈

前端框架: React + TypeScript
构建工具: Vite
UI组件库: Ant Design
地图服务: 高德地图 JavaScript API
状态管理: React Hooks
HTTP客户端: Axios
AI服务: 硅基流动API (Qwen/Qwen3-235B-A22B模型)

📝 使用指南

在首页填写旅行信息表单:
- 目的地城市
- 旅行日期和天数
- 交通方式偏好
- 住宿偏好
- 旅行风格标签
点击"生成旅行计划"按钮
系统将调用AI生成详细的旅行计划并展示:
- 每日行程安排
- 景点信息与推荐游览时间
- 交通与住宿建议
- 餐饮推荐
- 天气预报
- 互动地图
可以随时返回调整参数重新规划

🧩 项目结构

src/
  ├── assets/        # 静态资源
  ├── components/    # 可复用组件
  │   ├── AmapComponent.tsx    # 高德地图组件
  │   ├── LoadingPage.tsx      # 加载页面组件
  │   ├── TripInputForm.tsx    # 旅行输入表单
  │   └── TripPlanResult.tsx   # 旅行计划结果展示
  ├── pages/         # 页面组件
  │   ├── HomePage.tsx         # 首页
  │   └── ResultPage.tsx       # 结果页
  ├── services/      # API服务
  │   └── api.ts              # API调用函数
  ├── types/         # TypeScript类型定义
  │   └── index.ts            # 类型定义文件
  └── utils/         # 工具函数
      └── mockData.ts         # 模拟数据