Files

hex2077 719eb14927 feat: 添加播客生成器Web应用基础架构

实现基于Next.js的播客生成器Web应用，包含以下主要功能：
- 完整的Next.js项目结构配置
- 播客生成API接口
- 音频文件服务API
- TTS配置管理
- 响应式UI组件
- 本地存储和状态管理
- 音频可视化组件
- 全局样式和主题配置

新增配置文件包括：
- Next.js、Tailwind CSS、ESLint等工具配置
- 环境变量示例文件
- 启动脚本和构建检查脚本
- 类型定义和工具函数库

2025-08-14 23:44:18 +08:00

3.9 KiB

Raw Permalink Blame History

PodcastHub Web Application

一个现代化的播客生成Web应用，基于Next.js构建，集成了现有的Python播客生成器。

功能特性

🎙️ AI播客生成: 使用OpenAI API生成高质量播客内容
🎵 多TTS支持: 支持多种文本转语音服务
🎨 现代化UI: 基于Tailwind CSS的响应式设计
📱 移动端友好: 完全响应式的用户界面
🔄 实时进度: 实时显示播客生成进度
🎧 内置播放器: 支持音频播放、下载和分享
📚 内容管理: 播客库和探索功能

技术栈

框架: Next.js 14 (App Router)
语言: TypeScript
样式: Tailwind CSS
图标: Lucide React
动画: Framer Motion
后端集成: Python播客生成器

项目结构

web2/
├── src/
│   ├── app/                 # Next.js App Router页面
│   │   ├── api/            # API路由
│   │   ├── globals.css     # 全局样式
│   │   ├── layout.tsx      # 根布局
│   │   └── page.tsx        # 主页
│   ├── components/         # React组件
│   │   ├── Sidebar.tsx     # 侧边栏导航
│   │   ├── PodcastCreator.tsx  # 播客创建器
│   │   ├── PodcastCard.tsx     # 播客卡片
│   │   ├── ContentSection.tsx  # 内容展示区
│   │   ├── AudioPlayer.tsx     # 音频播放器
│   │   └── ProgressModal.tsx   # 进度模态框
│   ├── lib/                # 工具函数
│   ├── types/              # TypeScript类型定义
│   └── hooks/              # 自定义Hooks
├── public/                 # 静态资源
├── package.json           # 项目依赖
├── tailwind.config.js     # Tailwind配置
├── tsconfig.json          # TypeScript配置
└── next.config.js         # Next.js配置

快速开始

1. 安装依赖

npm install

2. 环境配置

复制环境变量模板：

cp .env.example .env.local

编辑 .env.local 文件，配置必要的环境变量：

OPENAI_API_KEY=your_openai_api_key_here
OPENAI_BASE_URL=https://api.openai.com/v1
OPENAI_MODEL=gpt-3.5-turbo

3. 启动开发服务器

npm run dev

应用将在 http://localhost:3000 启动。

API集成

播客生成API

POST /api/generate-podcast - 启动播客生成任务
GET /api/generate-podcast?id={taskId} - 查询生成进度

音频服务API

GET /api/audio/{filename} - 获取音频文件（支持流式播放）

与Python后端集成

Web应用通过以下方式与现有Python播客生成器集成：

输入处理: 将用户输入写入 ../input.txt
进程管理: 使用Node.js子进程启动Python脚本
进度监控: 解析Python脚本输出来更新进度
文件服务: 提供生成的音频文件访问

开发指南

组件开发

所有组件都使用TypeScript编写，遵循以下原则：

使用函数式组件和Hooks
严格的类型定义
响应式设计优先
性能优化（memo、useMemo等）

样式规范

使用Tailwind CSS工具类
遵循设计系统的颜色和间距
支持深色模式（预留）
移动端优先的响应式设计

性能优化

使用Next.js Image组件优化图片
代码分割和懒加载
服务端组件优先
音频流式播放支持

部署

开发环境

npm run dev

生产构建

npm run build
npm start

类型检查

npm run type-check

代码检查

npm run lint

贡献指南

Fork项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打开Pull Request

许可证

本项目采用MIT许可证 - 查看 LICENSE 文件了解详情。

3.9 KiB Raw Permalink Blame History Unescape Escape