# LiveInterviewAI

**Repository Path**: Oliver131/live-interview-ai

## Basic Information

- **Project Name**: LiveInterviewAI
- **Description**: 基于数字人实现的的 AI 模拟面试平台，融合流式语音识别、语音合成与虚拟人技术，提供沉浸式数字人交互体验。

目前ASR/TTS/COMP相关的后端已经开源，可以在局域网自行部署
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2026-03-25
- **Last Updated**: 2026-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 数字人, ASR, 视频合成

## README

<div align="center">

<img src="https://img.shields.io/badge/LiveInterviewAI-AI_Powered_Interview_Platform-7c3aed?style=for-the-badge" />

# 🎯 LiveInterviewAI - 下一代 AI 模拟面试平台

**基于 Vue 3 + TypeScript 打造的沉浸式 AI 面试体验**

<p>
  <a href="https://vuejs.org/">
    <img src="https://img.shields.io/badge/Vue_3.5-42b883?style=flat-square&logo=vue.js&logoColor=white"/>
  </a>
  <a href="https://www.typescriptlang.org/">
    <img src="https://img.shields.io/badge/TypeScript-5.9-3178c6?style=flat-square&logo=typescript&logoColor=white"/>
  </a>
  <a href="https://vitejs.dev/">
    <img src="https://img.shields.io/badge/Vite-6.0-646cff?style=flat-square&logo=vite&logoColor=white"/>
  </a>
  <a href="https://pinia.vuejs.org/">
    <img src="https://img.shields.io/badge/Pinia-3.0-ffd54e?style=flat-square"/>
  </a>
  <a href="https://www.naiveui.com/">
    <img src="https://img.shields.io/badge/Naive_UI-2.44-18a058?style=flat-square"/>
  </a>
  <a href="https://tailwindcss.com/">
    <img src="https://img.shields.io/badge/TailwindCSS-3.4-38bdf8?style=flat-square&logo=tailwindcss&logoColor=white"/>
  </a>
</p>

</div>

---

## 🌟 项目亮点

> 💡 **面向真实场景的实时数字人交互系统**

- 🚀 **全链路流式能力** - 支持 **流式 ASR、流式 TTS、流式视频合成**
- ⚡ **低延迟高响应** - 推理速度快，带来更自然的实时交互体验
- 🎯 **低显卡占用** - GPU 资源消耗更低，适合在线部署与持续运行
- 🎬 **真实场景模拟** - 面向真实面试流程，完整还原实时问答与数字人反馈过程
- 🔗 **端到端闭环** - 打通识别、合成、播报与视频驱动，形成完整实时链路
- 
---

## 🌟 后端项目地址

[LiveInterviewAI后端开源地址](https://gitee.com/Oliver131/live-interview-ai-back)

---


## 🏅 使用示例

<p align="center">
  <strong>实时语音识别（Streaming ASR） × 流式视频合成</strong><br/>
  面向低延迟交互场景的端到端演示
</p>

<p align="center">
  <a href="https://www.bilibili.com/video/BV13C95BZEVr" target="_blank">
    <img src="./docx/one.png" alt="Demo Video" width="800" />
  </a>
</p>

<p align="center">
  <sub>点击封面跳转至 Bilibili 观看完整演示</sub>
</p>

## 🎬 功能预览

### 1️⃣ AI 面试页面

<div align="center">

**🎥 沉浸式面试体验**

</div>

- 🤖 **AI 数字人面试官** - 全屏视频背景，打造真实面试场景
- 📹 **实时视频窗口** - 右上角显示用户摄像头画面
- 💬 **智能对话系统** - 气泡式聊天界面，支持文本/语音输入
- 📊 **实时状态监控** - 录制时间、网络延迟、职位信息一目了然
- ⌨️ **快捷交互** - 回车发送、语音按钮、自动滚动
![one](./docx/one.png)
**技术特性：**
```typescript
✅ AI 数字人流式合成
✅ 流式ASR，超顺畅体验
✅ 消息自动滚动到底部
✅ AI 回复模拟（可对接真实 API）
```

---

### 2️⃣ 简历管理页面

<div align="center">

**📄 智能简历库管理**

</div>

- 📂 **简历卡片展示** - 文件名、大小、时间、技能标签清晰呈现
- 🎯 **目标设定** - 输入目标公司和期望职级，AI 定制面试题
- ✅ **一键选择** - 快速选定面试简历
- 🗑️ **删除管理** - 支持删除不需要的简历
- 📤 **拖拽上传** - 支持文件拖拽上传（预留接口）
- 📊 **使用额度** - 实时显示已用面试次数

**UI 细节：**
```typescript
✅ 侧边栏导航菜单
✅ 渐变紫色主题
✅ 卡片悬停动效
✅ 状态标识（已选中/面试中）
✅ 搜索框功能
```
![two](./docx/two.png)
---

### 3️⃣ 面试记录页面

<div align="center">

**📈 数据驱动成长**

</div>

- 📊 **统计看板** - 平均得分 + 累计时长可视化
- 📉 **进度图表** - 逻辑思维倾向柱状图
- 📋 **详细列表** - 公司/职位/难度/时长/时间/评分全展示
- 🏷️ **难度标签** - EASY / MEDIUM / HARD 颜色区分
- 📈 **评分趋势** - 上升/下降直观显示
- 🏢 **公司 Logo** - 品牌化展示

**数据分析：**
```typescript
✅ 平均分自动计算
✅ 总时长统计
✅ 难度分级展示
✅ 评分变化趋势
✅ 完成场次统计
```
![three](./docx/three.png)

---

## 🎯 TODO

- [x] 完成流式 ASR 功能
- [x] 完成基本的大模型调用功能
- [x] 完成流式视频合成功能
- [ ] 使用Go+Hertz作为后端，完成基本的增删改查功能
- [ ] 引入Eino，支持根据各种面试公司的面试题库生成面试题
- [ ] 面试报告生成
- [ ] 更多数据分析图表

---

## 🚀 快速开始

### 环境要求

- Node.js 18+ 
- pnpm 8+ （推荐）或 npm / yarn

### 安装依赖

```bash
# 推荐使用 pnpm
pnpm install
```

### 开发模式

```bash
# 启动开发服务器
pnpm dev
```

### 生产构建

```bash
# 构建生产版本
pnpm build
```


## 📁 项目结构

```
LiveInterviewAI/
├── src/
│   ├── components/          # 可复用组件
│   │   ├── ChatBox.vue     # 💬 聊天对话框
│   │   ├── InputBar.vue    # ⌨️ 输入框组件
│   │   └── VideoPanel.vue  # 📹 视频面板
│   ├── views/              # 页面组件
│   │   ├── Interview.vue   # 🤖 AI 面试
│   │   ├── Resume.vue      # 📄 简历管理
│   │   └── Records.vue     # 📊 面试记录
│   ├── stores/             # 🗄️ Pinia 状态管理
│   ├── router/             # 🛣️ 路由配置
│   ├── services/           # 🔌 API 服务层
│   │   ├── api.ts          # Axios 配置
│   │   └── websocket.ts    # 🔌 WebSocket（预留）
│   ├── utils/              # 🧰 工具函数
│   ├── types/              # 📝 TypeScript 类型
│   ├── App.vue             # 🎯 根组件
│   ├── main.ts             # 🚀 入口文件
│   └── style.css           # 🎨 全局样式
├── README.md               # 📖 项目文档
├── package.json            # 📦 依赖配置
├── vite.config.ts          # ⚙️ Vite 配置
├── tailwind.config.js      # 🎨 TailwindCSS 配置
└── tsconfig.json           # 🔧 TypeScript 配置
```


## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！
---