AI 驱动的视频创作平台
pnpm install复制 .env.local.example 并重命名为 .env.local：
cp .env.local.example .env.local然后编辑 .env.local 文件，填入你的 API 配置：
# OpenAI Compatible API Configuration
OPENAI_API_BASE_URL=https://api.qnaigc.com/v1
OPENAI_API_KEY=your-api-key-here
# Available models (comma-separated)
# Add your available model IDs based on your subscription
# Format: provider/model-name or just model-name
AVAILABLE_MODELS=deepseek/deepseek-v3.2-251201,openai/gpt-4o-mini,openai/gpt-4o支持的端点：
- 国内：
https://api.qnaigc.com/v1 - 海外：
https://openai.sufy.com/v1
配置可用模型：
由于不同的 API 订阅可能支持不同的模型，你需要在 AVAILABLE_MODELS 中配置你的订阅支持的模型。模型 ID 格式通常为 provider/model-name（如 deepseek/deepseek-v3.2-251201）或直接使用模型名（如 gpt-4o-mini）。
如何获取你可用的模型列表：
- 查看你的 API 提供商文档
- 联系客服获取支持的模型列表
- 尝试不同的模型 ID，根据错误信息调整
pnpm run dev打开 http://localhost:3000 查看应用。
- ✅ AI 文本生成（流式响应）
- ✅ 多模型支持（自动获取可用模型列表）
- ✅ 模型选择器（保存在 localStorage）
- ✅ 文件上传支持
- ✅ 响应式设计
- ✅ 深色模式支持
- ✅ Material Design 3 风格
- 框架: Next.js 16 (App Router)
- UI: TailwindCSS + shadcn/ui
- 状态管理: Jotai
- AI SDK: Vercel AI SDK
- 字体: Manrope + Newsreader (Google Fonts)
- 图标: Material Symbols
vision/
├── app/
│ ├── api/
│ │ ├── completion/ # AI 文本生成端点
│ │ └── models/ # 模型列表端点
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 根布局
│ └── page.tsx # 首页
├── components/
│ ├── ui/ # shadcn/ui 组件
│ ├── stage-input.tsx # 主输入组件（含模型选择器）
│ └── theme-provider.tsx
├── lib/
│ ├── models.ts # 模型状态管理（Jotai atoms）
│ └── utils.ts # 工具函数
└── .env.local # 环境变量（需要自己创建）
获取可用的模型列表。
特别说明: 由于某些 API 密钥类型（如订阅密钥）仅支持聊天完成功能，无法访问模型列表端点。在这种情况下，API 会返回预定义的常用模型列表。
预定义模型列表:
- gpt-4o
- gpt-4o-mini
- gpt-4-turbo
- gpt-4
- gpt-3.5-turbo
- claude-3-5-sonnet-20241022
- claude-3-5-haiku-20241022
- deepseek-chat
- gemini-2.0-flash-exp
响应示例:
{
"object": "list",
"data": [
{
"id": "gpt-4o-mini",
"object": "model",
"created": 1234567890,
"owned_by": "openai"
}
]
}生成文本完成（流式响应）。
请求体:
{
"prompt": "你的提示词",
"model": "gpt-4o-mini"
}# 开发模式
pnpm run dev
# 类型检查
pnpm run typecheck
# 代码格式化
pnpm run format
# 构建生产版本
pnpm run build
# 启动生产服务器
pnpm run start| 变量名 | 描述 | 必需 | 示例 |
|---|---|---|---|
OPENAI_API_BASE_URL |
OpenAI 兼容 API 的基础 URL | ✅ | https://api.qnaigc.com/v1 |
OPENAI_API_KEY |
API 密钥 | ✅ | sk-xxx... |
AVAILABLE_MODELS |
可用模型列表（逗号分隔） | deepseek/deepseek-v3.2-251201,openai/gpt-4o-mini |
关于 AVAILABLE_MODELS:
- 如果设置了此变量，模型选择器将显示这些模型
- 如果未设置，将尝试从 API 获取或使用预定义的默认列表
- 模型 ID 格式可以是
provider/model-name或直接使用model-name - 根据你的 API 订阅计划配置可用的模型
要添加更多 shadcn/ui 组件，运行：
npx shadcn@latest add button这会将 UI 组件放在 components/ui 目录中。
在你的应用中导入组件：
import { Button } from "@/components/ui/button";MIT