VgenAgentAssistant

基于AI的Vgen视频内容生成智能助手，提供聊天式交互界面来分析URL并生成视频内容与课程。

项目架构设计

核心功能模块

• AI Assistant Core (VgenAgent): 主交互界面，支持SSE实时通信
• URL分析引擎: 智能解析视频URL，提取关键信息用于后续内容生成
• 内容生成管道:
  • 视频续写与再创作
  • 课程分镜头设计
  • 教学内容优化
• 实时通信: 基于Server-Sent Events的流式AI响应

技术架构特点

┌─────────────────────┐
│   React + Vite      │
│   前端框架层        │
├─────────────────────┤
│   SSE/REST API      │
│   服务端通信层      │
├─────────────────────┤
│   内容分析引擎      │
│   AI能力集成层      │
└─────────────────────┘

• 组件架构: 模块化设计，核心组件可复用
• 状态管理: React Hooks + 上下文模式，轻量级状态方案
• 样式方案: Less + CSS Modules + Tailwind，灵活且可维护
• 类型安全: 全TypeScript实现，提供完整的类型定义

使用方法

开发环境启动

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 启动演示应用
npm run demo

环境配置

项目支持多环境配置，根据需要修改对应的环境变量文件：

• 开发环境: .env.development
• 测试环境: .env.test
• 生产环境: .env.production

核心使用场景

1. 作为独立Web应用

适用于希望直接使用完整AI助手功能的场景：

// 直接访问开发环境
npm run dev -> http://localhost:3003

2. 作为NPM包集成

适用于将VgenAgent能力集成到其他项目：

import VgenAgent from 'vgen-agent-assistant'

function App() {
  return (
    <div>
      <VgenAgent 
        apiEndpoint="your-api-endpoint"
        projectId="your-project-id"
      />
    </div>
  )
}

3. 模块级使用

按需求引入特定组件：

import { AnalyzeUrl } from 'vgen-agent-assistant/components'
import { MyReactMarldown } from 'vgen-agent-assistant/components'
import { TagsTextarea } from 'vgen-agent-assistant/components'

API接入配置

在项目根目录创建或修改 .env.local：

# AI服务配置
VITE_API_BASE_URL=http://your-api-server.com
VITE_SSE_ENDPOINT=/api/vgen/assistant

# 功能开关
VITE_ENABLE_VIDEO_ANALYSIS=true
VITE_ENABLE_COURSE_GENERATION=true
VITE_ENABLE_STREAMING=true

# 项目配置
VITE_PROJECT_ID=your-project-id
VITE_LANGUAGE=chinese

高级配置

自定义主题与样式

项目支持通过CSS变量覆盖默认样式：

:root {
  --vgen-primary-color: #1890ff;
  --vgen-border-radius: 8px;
  --vgen-font-family: "PingFang SC";
}

扩展组件能力

通过props传递自定义配置：

<VgenAgent
  customComponents={{
    MessageComponents: MyCustomMessages,
    InputComponents: MyCustomInput
  }}
  themeConfig={{
    colorScheme: 'light',
    compact: true
  }}
/>

构建与部署

# 构建生产版本
npm run build

# 预览构建结果
npm run preview

# 打包Lib库版本
npm run build:lib

开发调试

# 代码检查
npm run lint

# 类型检查
npm run type-check

# 查看打包分析
npm run analyze

功能特点

• 智能URL分析: 自动识别视频平台并提取关键元数据
• AI内容续写: 基于上下文智能生成视频后续内容
• 课程分镜: 将长视频智能拆分为教学片段
• 实时交互: 支持打字动画和流式响应
• 多端适配: 响应式设计，支持PC和移动端
• 扩展性: 组件化架构，便于功能扩展

环境要求

• Node.js >= 16.0.0
• npm >= 8.0.0
• 现代浏览器（Chrome 80+, Firefox 75+, Safari 13+）