# tutor-admin

**Repository Path**: manzhenhua/tutor-admin

## Basic Information

- **Project Name**: tutor-admin
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-31
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)

![Duolingo thumb (1)](https://github.com/AntonioErdeljac/next14-duolingo-clone/assets/23248726/d58e4b55-bb09-456f-978e-f5f31e81b870)

This is a repository for a "Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)" youtube video.

[VIDEO TUTORIAL](https://www.youtube.com/watch?v=dP75Khfy4s4)

Key Features:

- 🌐 Next.js 14 & server actions
- 🗣 AI Voices using Elevenlabs AI
- 🎨 Beautiful component system using Shadcn UI
- 🎭 Amazing characters thanks to KenneyNL
- 🔐 Auth using Authing
- 🔊 Sound effects
- ❤️ Hearts system
- 🌟 Points / XP system
- 💔 No hearts left popup
- 🚪 Exit confirmation popup
- 🔄 Practice old lessons to regain hearts
- 🏆 Leaderboard
- 🗺 Quests milestones
- 🛍 Shop system to exchange points with hearts
- 💳 Pro tier for unlimited hearts using Stripe
- 🏠 Landing page
- 📊 Admin dashboard React Admin
- 🌧 ORM using DrizzleORM
- 💾 PostgresDB using NeonDB
- 🚀 Deployment on Vercel
- 📱 Mobile responsiveness
- 🤖 DeepSeek AI Embeddings integration
- 🎥 AI Video Control Tools integration

### Prerequisites

**Node version 14.x**

### Cloning the repository

```shell
git clone https://github.com/AntonioErdeljac/next14-duolingo-clone.git
```

### Install packages

```shell
npm i
```

### Setup .env file

```js
AUTHING_DOMAIN = "";
AUTHING_APP_ID = "";
AUTHING_APP_SECRET = "";
AUTHING_REDIRECT_URI = "http://localhost:3000/callback";
DATABASE_URL = "postgresql://...";
STRIPE_API_KEY = "";
NEXT_PUBLIC_APP_URL = "http://localhost:3000";
STRIPE_WEBHOOK_SECRET = "";
DEEPSEEK_API_KEY = "your_deepseek_api_key_here";
```

### Setup Drizzle ORM

```shell
npm run db:push

```

### Seed the app

```shell
npm run db:seed

```

or

```shell
npm run db:prod

```

### Start the app

```shell
npm run dev
```

## DeepSeek AI Embeddings 功能

本项目集成了 DeepSeek 的 AI embedding 模型，提供强大的文本向量化功能。

### 功能特性

- 🔤 **单个文本 Embedding**: 将单个文本转换为向量表示
- 📦 **批量文本 Embeddings**: 高效处理多个文本的向量化
- 📊 **相似度计算**: 计算两个文本向量之间的余弦相似度
- 🔍 **相似文本查找**: 在文本集合中查找最相似的文本
- 🎯 **文本聚类**: 基于相似度对文本进行自动聚类

### 快速开始

1. **安装依赖** (已包含在项目中)

```bash
npm install @ai-sdk/deepseek ai
```

2. **配置环境变量**

```env
DEEPSEEK_API_KEY=your_deepseek_api_key_here
```

3. **测试功能**

```bash
npm run test:embeddings
```

4. **访问测试页面**

```
http://localhost:3000/embeddings-test
```

### API 使用示例

```typescript
import { generateEmbedding, findMostSimilar } from "@/lib/embeddings";

// 生成单个文本的 embedding
const result = await generateEmbedding("Hello world");
console.log(result.embedding); // 向量数组

// 查找相似文本
const similar = await findMostSimilar("Hello", [
  "Hi",
  "Goodbye",
  "Hello world",
]);
console.log(similar.bestMatch); // 最相似的文本
```

### REST API 接口

```
POST /api/embeddings
```

支持的操作：

- `generate`: 生成单个 embedding
- `generateBatch`: 批量生成 embeddings
- `similarity`: 计算相似度
- `findSimilar`: 查找相似文本
- `cluster`: 文本聚类

详细文档请参考: [docs/embeddings-usage.md](docs/embeddings-usage.md)

## AI 视频控制工具功能

本项目集成了基于 AI SDK Tools 的视频控制功能，支持通过自然语言控制视频播放。

### 功能特性

- 🎬 **播放控制**: 播放、暂停、停止视频
- ⏰ **时间控制**: 跳转到指定时间点
- 🔊 **音量控制**: 设置音量、静音/取消静音
- 🔄 **同步控制**: 同步两个视频的播放进度
- 📊 **状态查询**: 获取视频播放状态

### 快速开始

1. **访问测试页面**

```
http://localhost:3000/video-ai-test
```

2. **使用自然语言控制**

```
"播放课程视频"
"暂停两个视频"
"跳转到第30秒"
"设置音量为0.5"
"获取视频状态"
```

### 技术实现

基于 [AI SDK Tools](https://ai-sdk.dev/docs/foundations/tools) 实现，使用 DeepSeek 模型和自定义视频控制工具。

详细文档请参考: [docs/video-control-tools.md](docs/video-control-tools.md)

# 课程详情页

这是一个基于 Next.js 和 TypeScript 构建的在线学习平台，包含课程详情页功能。

## 功能特性

### 课程详情页 (`app/lesson/[id]/page.tsx`)

课程详情页包含以下主要功能：

1. **视频播放器**

   - 支持播放、暂停、音量控制
   - 进度条控制
   - 全屏模式
   - 自定义控制栏

2. **测试训练**

   - 多选题目测试
   - 实时进度显示
   - 题目导航
   - 结果统计
   - 重新测试功能

3. **对话功能**

   - 建议问题列表
   - 文本输入框
   - 语音输入支持

4. **响应式设计**
   - 桌面端和移动端适配
   - 左侧主要内容区域
   - 右侧对话区域

## 组件结构

### 主要组件

- `VideoPlayer` (`components/video-player.tsx`) - 自定义视频播放器
- `CourseQuiz` (`components/course-quiz.tsx`) - 课程测试组件
- `Button`, `Card`, `Progress` - UI 组件

### 页面布局

```
┌─────────────────────────────────────────────────────────┐
│                    标签页导航                            │
│  [视频] [测试]                    [推荐有礼]            │
├─────────────────────────────────────────────────────────┤
│                    进度条                               │
├─────────────────┬───────────────────────────────────────┤
│                 │                                       │
│   视频播放器    │           对话区域                    │
│                 │                                       │
│                 │  ┌─────────────────────────────────┐  │
│                 │  │          建议问题               │  │
│                 │  └─────────────────────────────────┘  │
│                 │                                       │
│                 │  ┌─────────────────────────────────┐  │
│                 │  │          输入框                 │  │
│                 │  └─────────────────────────────────┘  │
│                 │                                       │
└─────────────────┴───────────────────────────────────────┘
```

## 技术栈

- **框架**: Next.js 14
- **语言**: TypeScript
- **样式**: Tailwind CSS
- **图标**: Lucide React
- **状态管理**: React Hooks
- **数据库**: Drizzle ORM (PostgreSQL)

## 安装和运行

1. 安装依赖：

```bash
npm install
```

2. 运行开发服务器：

```bash
npm run dev
```

3. 访问课程详情页：

```
http://localhost:3000/lesson/1
```

## 数据模型

课程详情页使用以下数据结构：

```typescript
interface Lesson {
  id: number;
  title: string;
  videoUrl: string;
  duration: string;
  challenges: Challenge[];
}

interface Challenge {
  id: number;
  question: string;
  options: ChallengeOption[];
  completed: boolean;
}

interface ChallengeOption {
  id: number;
  text: string;
  correct: boolean;
}
```

## 自定义配置

### 视频播放器

可以通过修改 `VideoPlayer` 组件来自定义：

- 控制栏样式
- 播放器主题
- 快捷键支持
- 播放列表功能

### 测试组件

`CourseQuiz` 组件支持：

- 自定义题目类型
- 计分规则
- 时间限制
- 结果展示

## 贡献

欢迎提交 Issue 和 Pull Request 来改进这个项目。

## 许可证

MIT License