AI视觉对话助手

一款基于Web的多模态AI对话应用，支持摄像头视频流和语音输入，集成阿里云通义千问VL模型进行智能视觉理解和自然语言交互。

核心功能

• 📹 实时摄像头访问 - WebRTC视频流捕获和显示
• 🎤 语音识别 - 实时语音转文字（Web Speech API）
• 🖼️ 智能帧捕获 - 时间/运动检测触发，减少API调用
• 🤖 通义千问VL集成 - 多模态AI理解（图像+文本）
• 💬 自然对话 - 上下文感知的对话管理
• 💰 成本优化 - 端云协同策略降低90%+ API成本

技术栈

前端

• React 18 + TypeScript
• Vite 5 (构建工具)
• Zustand (状态管理)
• CSS Modules (样式)
• WebRTC & Web Speech API

后端

• Node.js + Express
• TypeScript
• 阿里云通义千问VL API
• Winston (日志)
• Zod (验证)

快速开始

前置要求

• Node.js 18+ 和 npm
• 阿里云账号和通义千问API密钥

安装步骤

1. 克隆项目

cd /Users/xitong.han/Desktop/vedio_program

2. 配置后端

cd backend
cp .env.example .env

编辑 .env 文件，填入你的阿里云API密钥：

ALIBABA_CLOUD_ACCESS_KEY_ID=your_access_key_id
ALIBABA_CLOUD_ACCESS_KEY_SECRET=your_access_key_secret

3. 安装依赖并启动后端

cd backend
npm install
npm run dev

后端将运行在 http://localhost:3001

4. 启动前端

cd frontend
npm install
npm run dev

前端将运行在 http://localhost:5173

5. 访问应用

打开浏览器访问 http://localhost:5173，允许摄像头和麦克风权限即可开始使用。

项目结构

ai-visual-chat-assistant/
├── frontend/                    # React前端
│   ├── src/
│   │   ├── components/         # UI组件
│   │   │   ├── CameraView/     # 摄像头视图
│   │   │   ├── ChatInterface/  # 对话界面
│   │   │   └── Controls/       # 控制面板
│   │   ├── hooks/              # 自定义Hooks
│   │   │   ├── useCamera.ts
│   │   │   ├── useFrameCapture.ts
│   │   │   └── useSpeechRecognition.ts
│   │   ├── store/              # 状态管理
│   │   ├── services/           # API服务
│   │   └── utils/              # 工具函数
│   └── package.json
│
├── backend/                     # Node.js后端
│   ├── src/
│   │   ├── services/           # 业务逻辑
│   │   │   ├── qwenService.ts  # 通义千问API
│   │   │   └── costOptimizer.ts # 成本优化器
│   │   ├── controllers/        # 控制器
│   │   ├── routes/             # API路由
│   │   └── middleware/         # 中间件
│   └── package.json
│
└── README.md

成本优化策略

边缘处理（客户端）

1. 帧采样优化

   • 可配置时间间隔：1s/3s/5s/10s/30s/手动
   • 默认5秒间隔，减少83%调用频率

2. 运动检测

   • 像素差异算法检测画面变化
   • 仅在变化超过阈值时捕获（减少60-80%调用）

3. 图像压缩

   • 客户端压缩至1280x720
   • JPEG质量0.6-0.85可调
   • 典型压缩率：2-3MB → 100-300KB

云端处理

1. 帧去重

   • 哈希比对跳过重复帧
   • 5分钟TTL缓存

2. 自适应采样

   • 根据用户活跃度动态调整

3. 预算控制

   • API用量追踪和预警

预期效果

优化策略	减少API调用
时间采样（5s间隔）	~83%
运动检测	额外40-60%
帧去重	额外10-20%
综合效果	>90%

API文档

POST /api/chat

发送消息到AI助手

请求体：

{
  "message": "请描述这张图片",
  "image": "data:image/jpeg;base64,...", // 可选
  "conversationHistory": [               // 可选
    {
      "role": "user",
      "content": "之前的消息"
    }
  ]
}

响应：

{
  "message": "这是一张...",
  "processingTime": 1234,
  "tokenUsage": {
    "promptTokens": 100,
    "completionTokens": 50,
    "totalTokens": 150
  },
  "optimization": {
    "skippedFrames": 5,
    "deduplicationRate": 45.5
  }
}

GET /api/health

健康检查端点

响应：

{
  "status": "ok",
  "timestamp": "2026-06-12T..."
}

环境变量

前端 (.env)

VITE_API_BASE_URL=http://localhost:3001/api

后端 (.env)

PORT=3001
NODE_ENV=development
ALIBABA_CLOUD_ACCESS_KEY_ID=your_key_id
ALIBABA_CLOUD_ACCESS_KEY_SECRET=your_key_secret
QWEN_VL_MODEL=qwen-vl-max
QWEN_VL_API_ENDPOINT=https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation
RATE_LIMIT_WINDOW_MS=60000
RATE_LIMIT_MAX_REQUESTS=30
CORS_ORIGIN=http://localhost:5173
LOG_LEVEL=info

浏览器兼容性

功能	Chrome	Firefox	Safari	Edge
摄像头	✅	✅	✅	✅
麦克风	✅	✅	✅	✅
语音识别	✅	❌	⚠️	✅

注意：语音识别需要Chrome/Edge或Safari 15+

故障排除

摄像头无法访问

1. 确保浏览器有摄像头权限
2. 检查是否有其他应用正在使用摄像头
3. 尝试刷新页面重新授权

语音识别不工作

1. 确认使用Chrome/Edge浏览器
2. 检查麦克风权限
3. 确保在HTTPS或localhost环境下

API调用失败

1. 检查.env中的API密钥是否正确
2. 确认阿里云账号有通义千问访问权限
3. 查看后端日志获取详细错误信息

性能问题

1. 降低图像质量设置
2. 增加帧捕获间隔
3. 启用运动检测

部署

Vercel + Railway方案

1. 前端部署到Vercel

   cd frontend
   npm run build
   # 推送GitHub后连接Vercel自动部署

2. 后端部署到Railway

   # 连接GitHub仓库
   # 配置环境变量
   # Railway自动构建部署

Docker方案

创建 docker-compose.yml:

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
  backend:
    build: ./backend
    ports:
      - "3001:3001"
    env_file:
      - ./backend/.env

许可证

MIT

贡献

欢迎提交Issue和Pull Request！