# Relink_MediaGenWorkFlow
**Repository Path**: liveyoung0101/rl-media-gen-work-flow
## Basic Information
- **Project Name**: Relink_MediaGenWorkFlow
- **Description**: Relink团队——新媒体内容生成工作台
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-02-04
- **Last Updated**: 2026-02-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 新媒体内容生成与分析工作台 (MVP)
> 基于 Claude API 的智能内容创作伙伴，帮助创作者快速生成、理解和优化新媒体文案
## 📝 项目简介
本项目是一个基于 AgentX 世界观的新媒体内容生成与解释工具，旨在帮助内容创作者（尤其是学生/普通用户）解决三大痛点：
1. **不知道文案是否"好"** → 提供质量评分和反馈
2. **不知道为什么"这条能火/那条不行"** → 给出专业解释和建议
3. **缺乏对传播效果的直觉判断** → 模拟不同人群的传播预期
### 核心特性
- ✅ **多风格内容生成** - 支持5种文案风格（专业权威、轻松生活、幽默风趣、严肃深度、感性走心）
- ✅ **智能标题生成** - 每个风格提供3个标题选项
- ✅ **内容质量评分** - AI评审并给出改进建议
- ✅ **封面设计建议** - 小红书平台专属功能
- ✅ **受众传播预测** - 模拟不同人群的传播效果
- ✅ **历史记录管理** - 保存和回顾所有生成记录
- ✅ **深色/浅色主题** - 自适应用户偏好
## 🚀 快速开始
### 前置要求
- **Python** 3.8+ (推荐 3.13)
- **Node.js** 16+ (包含 npm)
- **uv** - Python 包管理器 ([安装指南](https://github.com/astral-sh/uv))
- **Claude API Key** - 从 [Anthropic Console](https://console.anthropic.com/) 获取
### 一键启动（推荐）
#### macOS/Linux
```bash
# 1. 环境配置（仅首次运行）
./setup.sh
# 2. 启动所有服务
./start.sh
# 3. 停止所有服务
./stop.sh
```
#### Windows
```cmd
REM 1. 环境配置（仅首次运行）
setup.bat
REM 2. 启动所有服务
start.bat
REM 3. 停止所有服务
stop.bat
```
### 手动启动
展开查看手动启动步骤
#### 1. 安装依赖
**Backend (Python + Node):**
```bash
cd backend
# Python 依赖
uv venv # 创建虚拟环境
uv pip install -r requirements.txt # 安装 Python 包
# Node.js 依赖 (AgentX Wrapper)
npm install # 安装 @anthropic-ai/sdk
```
**Frontend (Node):**
```bash
cd frontend
npm install
```
#### 2. 启动服务
**终端 1 - Backend:**
```bash
cd backend
uv run python app.py
# 或使用虚拟环境
source .venv/bin/activate # macOS/Linux
.venv\Scripts\activate # Windows
python app.py
```
**终端 2 - Frontend:**
```bash
cd frontend
npm run dev
```
## 📱 访问与配置
### 访问地址
启动成功后，访问以下地址：
- **前端应用**: http://localhost:3000
- **后端 API**: http://localhost:8000
- **API 文档**: http://localhost:8000/docs (FastAPI Swagger UI)
### 初次配置
1. 打开前端应用 http://localhost:3000
2. 点击导航栏的「设置」进入配置页面
3. 填写以下信息：
- **API Key**: 你的 Claude API 密钥
- **Base URL**: API 服务器地址
- 官方地址: `https://api.anthropic.com`
- 或使用代理/中转服务地址
- **Model**: 使用的模型（默认 `claude-sonnet-4-5-20250929`）
4. 点击「测试连接」确认配置正确
5. 点击「保存设置」
## 📦 项目结构
```
final_project/
├── backend/ # 后端服务
│ ├── app.py # FastAPI 应用入口
│ ├── database.py # SQLite 数据库操作
│ ├── llm_service.py # LLM 服务层（核心逻辑）
│ ├── agentx_wrapper.js # AgentX Minimal Runtime 包装器
│ ├── requirements.txt # Python 依赖
│ ├── package.json # Node.js 依赖
│ ├── api/ # API 路由模块
│ │ ├── project.py # 项目生成和管理
│ │ └── settings.py # 设置管理
│ ├── prompts/ # LLM 提示词模板
│ │ ├── generate_copy_v2.txt # 文案生成
│ │ ├── review_copy.txt # 内容评审
│ │ ├── cover_suggestion_xhs.txt # 封面建议
│ │ └── simulate_spread.txt # 传播模拟
│ └── data/ # 运行时数据
│ └── app.db # SQLite 数据库
│
├── frontend/ # 前端应用
│ ├── index.html # 入口 HTML
│ ├── package.json # 依赖配置
│ ├── vite.config.js # Vite 构建配置
│ └── src/
│ ├── main.js # 应用入口
│ ├── App.vue # 根组件
│ ├── style.css # 全局样式（含主题）
│ ├── api.js # API 客户端
│ ├── router.js # Vue Router 配置
│ ├── components/ # 通用组件
│ │ ├── Layout.vue # 布局组件
│ │ └── ThemeToggle.vue # 主题切换
│ └── views/ # 页面组件
│ ├── Home.vue # 首页（输入界面）
│ ├── MainFlow.vue # 生成流程页
│ ├── History.vue # 历史记录
│ └── Settings.vue # 设置页面
│
├── setup.sh / setup.bat # 环境配置脚本
├── start.sh / start.bat # 一键启动脚本
├── stop.sh / stop.bat # 停止服务脚本
├── clear_sensitive_data.sh/bat # 清除敏感数据脚本
├── README.md # 本文件
└── SECURITY.md # 安全指南
```
## 🏗️ 系统架构
### 技术栈
**Backend:**
- **FastAPI** - 高性能异步 Web 框架
- **SQLite** - 轻量级嵌入式数据库
- **Pydantic** - 数据验证和序列化
- **asyncio** - 异步并发执行
- **Node.js** - AgentX Wrapper 运行时
- **Anthropic Claude API** - 大语言模型服务
**Frontend:**
- **Vue 3** - 渐进式 JavaScript 框架
- **Composition API** - Vue 3 组合式 API
- **Vue Router** - 单页应用路由
- **Vite** - 极速开发构建工具
- **Native CSS** - 原生 CSS（含 CSS Variables 主题系统）
### 架构设计
```
┌─────────────────────────────────────────────────────────────┐
│ 用户界面层 │
│ ┌────────┐ ┌─────────┐ ┌────────┐ ┌──────────┐ │
│ │ 首页 │ │生成流程 │ │ 历史 │ │ 设置 │ │
│ └────────┘ └─────────┘ └────────┘ └──────────┘ │
└─────────────────────────────────────────────────────────────┘
│ HTTP
▼
┌─────────────────────────────────────────────────────────────┐
│ 后端 API 层 │
│ ┌─────────────────┐ ┌──────────────────┐ │
│ │ /api/project │ │ /api/settings │ │
│ │ - run │ │ - GET/POST │ │
│ │ - list │ │ - test │ │
│ │ - detail │ └──────────────────┘ │
│ │ - clear │ │
│ └─────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ 业务逻辑层 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ llm_service.py (核心) │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ generate_multi_style_copies (并发生成) │ │ │
│ │ │ ├─ generate_structured_copy x 5 │ │ │
│ │ │ │ ├─ load_prompt (加载模板) │ │ │
│ │ │ │ └─ call_llm (调用 Claude) │ │ │
│ │ │ └─ asyncio.gather (并发执行) │ │ │
│ │ ├─────────────────────────────────────────────│ │ │
│ │ │ review_copy (内容评审) │ │ │
│ │ │ └─ call_llm │ │ │
│ │ ├─────────────────────────────────────────────│ │ │
│ │ │ simulate_spread (传播模拟) x N人群 │ │ │
│ │ │ └─ asyncio.gather │ │ │
│ │ └─────────────────────────────────────────────│ │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ AgentX Minimal Runtime │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ agentx_wrapper.js (Node.js) │ │
│ │ ┌────────────────────────────────────────────────┐ │ │
│ │ │ createMinimalRuntime() │ │ │
│ │ │ ├─ Anthropic Client 初始化 │ │ │
│ │ │ ├─ sendMessage(prompt) │ │ │
│ │ │ ├─ getMessages() - 获取对话历史 │ │ │
│ │ │ └─ dispose() - 清理资源 │ │ │
│ │ └────────────────────────────────────────────────┘ │ │
│ └──────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Anthropic API │
│ (Claude Sonnet 4.5) │
└─────────────────────────────────────────────────────────────┘
```
### 数据流
1. **用户输入** → 前端收集（主题、平台、风格、人群）
2. **API 请求** → POST /api/project/run
3. **并发生成** → asyncio.gather 同时执行：
- 5种风格的文案生成（如果未指定风格）
- 或单一风格生成
4. **内容评审** → 对第一个生成结果进行评分
5. **传播模拟** → 针对每个目标人群并发模拟
6. **数据持久化** → 保存到 SQLite
7. **返回前端** → 结构化 JSON 响应
8. **前端渲染** → 多风格卡片、评分、传播预测
## 📜 脚本说明
### 1. 环境配置脚本 (`setup.sh` / `setup.bat`)
**功能：**
- 检测 Python 3 和 uv 是否安装
- 检测 Node.js 和 npm 是否安装
- 自动创建 Python 虚拟环境
- 自动安装所有依赖（Python + Node）
- 提示缺少的工具和安装方法
**使用：**
```bash
./setup.sh # macOS/Linux
setup.bat # Windows
```
**输出示例：**
```
📦 [1/4] 检查 Python 环境...
✓ Python3 已安装: 3.13.0
✓ uv 已安装: uv 0.5.0
→ 正在安装 Python 依赖...
✓ Python 依赖安装完成
📦 [2/4] 检查 Node.js 环境...
✓ Node.js 已安装: v20.10.0
✓ npm 已安装: 10.2.3
✅ 环境配置完成！所有依赖已安装
```
### 2. 一键启动脚本 (`start.sh` / `start.bat`)
**功能：**
- 检查环境是否配置完成
- 同时启动前后端服务
- 自动检测端口占用
- 输出访问地址和日志位置
- 支持 Ctrl+C 优雅关闭
**使用：**
```bash
./start.sh # macOS/Linux
start.bat # Windows
```
**输出示例：**
```
🚀 启动新媒体内容生成平台
========================================
📋 检查环境...
✓ 环境检查通过
🔧 启动后端服务...
→ Backend PID: 12345
→ 访问地址: http://localhost:8000
🎨 启动前端服务...
→ Frontend PID: 12346
→ 访问地址: http://localhost:3000
✅ 服务启动成功！
📱 访问地址：
前端: http://localhost:3000
后端: http://localhost:8000
API文档: http://localhost:8000/docs
```
### 3. 停止服务脚本 (`stop.sh` / `stop.bat`)
**功能：**
- 优雅关闭前后端服务
- 清理端口占用
- 移除 PID 文件
**使用：**
```bash
./stop.sh # macOS/Linux
stop.bat # Windows
```
### 4. 清除敏感数据脚本 (`clear_sensitive_data.sh` / `.bat`)
**功能：**
- 清除数据库中的 API Key
- 清除所有历史项目数据
- 保留数据库表结构
**使用场景：**
在推送代码到 Git 前运行，确保不泄露 API Key
**使用：**
```bash
./clear_sensitive_data.sh # macOS/Linux
clear_sensitive_data.bat # Windows
```
详见 [SECURITY.md](SECURITY.md)
## 🎯 使用指南
### 1. 创作新文案
1. 访问首页 http://localhost:3000
2. 在输入框中输入你的主题（如："冬日护肤"）
3. 选择平台（小红书/抖音/公众号/微博）
4. （可选）选择风格，留空则生成全部5种风格
5. （可选）选择目标人群（性别、年龄段）
6. 点击「开始生成」
### 2. 查看生成结果
生成完成后，页面会显示：
- **多风格变体卡片** - 并排展示不同风格的文案
- **标题选择** - 每个风格3个标题可选
- **正文内容** - 完整的文案正文
- **话题标签** - 可切换选择的标签
- **复制按钮** - 一键复制完整文案（按发布格式）
### 3. 查看历史记录
1. 点击导航栏「历史」
2. 浏览所有生成过的项目卡片
3. 点击任意卡片查看详细报告：
- 输入参数
- 生成的文案
- 质量评分
- 封面建议（小红书）
- 传播预测
### 4. 管理设置
在「设置」页面可以：
- 修改 API Key
- 切换 API 服务器地址
- 更换模型
- 测试连接
- 清除所有历史数据
## 🧪 开发指南
### 修改提示词模板
提示词模板位于 `backend/prompts/` 目录：
1. 创建或编辑 `.txt` 文件
2. 使用占位符：`{topic}`, `{platform}`, `{tone}`, `{audience}`
3. **重要**: JSON 示例必须使用双大括号 `{{}}` 转义
**示例：**
```
你是专业文案专家。主题：{topic}
输出 JSON 格式：
{{
"title": "标题",
"content": "内容"
}}
```
### 添加新的文案风格
在 `backend/llm_service.py` 中修改：
```python
tones_to_generate = ["专业权威", "轻松生活", "幽默风趣", "严肃深度", "感性走心", "新风格"]
```
在前端 `frontend/src/views/Home.vue` 中同步修改：
```javascript
tones: ['专业权威', '轻松生活', '幽默风趣', '严肃深度', '感性走心', '新风格']
```
### 修改主题样式
全局主题变量定义在 `frontend/src/style.css`:
```css
/* 深色主题 */
:root {
--bg-app: #121212;
--text-main: #E0E0E0;
--accent-color: #10B981; /* 主题色 */
}
/* 浅色主题 */
body.light {
--bg-app: #FFFFFF;
--text-main: #1F2937;
--accent-color: #10B981;
}
```
## 🐛 常见问题
Q: 提示端口被占用怎么办？
A: 运行停止脚本清理端口：
```bash
./stop.sh # macOS/Linux
stop.bat # Windows
```
或手动检查并终止进程：
```bash
# 查看占用 8000 端口的进程
lsof -ti:8000 # macOS/Linux
netstat -ano | findstr :8000 # Windows
# 终止进程
kill -9 # macOS/Linux
taskkill /F /PID # Windows
```
Q: 依赖安装失败怎么办？
A: 确保安装了所有必需工具：
**Python & uv:**
```bash
# macOS
brew install python3 uv
# Ubuntu/Debian
sudo apt install python3 python3-pip
curl -LsSf https://astral.sh/uv/install.sh | sh
# Windows
# 从 python.org 安装 Python
# 然后: powershell -c "irm https://astral.sh/uv/install.ps1 | iex"
```
**Node.js & npm:**
```bash
# macOS
brew install node
# Ubuntu/Debian
sudo apt install nodejs npm
# Windows
# 从 nodejs.org 下载安装包
```
Q: API 调用失败怎么办？
A: 检查以下几点：
1. **API Key 是否正确**
- 在设置页面点击「测试连接」
- 确认 API Key 有效且有余额
2. **Base URL 是否可访问**
- 官方地址: `https://api.anthropic.com`
- 如使用代理，确认代理服务正常
3. **网络连接**
- 检查防火墙设置
- 确认可以访问 Anthropic API
4. **查看日志**
```bash
# 启动脚本会生成日志文件
tail -f logs/backend.log
```
Q: 前端无法连接后端怎么办？
A: 确认：
1. 后端服务正在运行（8000 端口）
2. 前端配置正确（`frontend/src/api.js` 中的 baseURL）
3. 没有 CORS 错误（检查浏览器控制台）
4. 防火墙未阻止本地连接
Q: 如何切换到不同的 Claude 模型？
A: 在设置页面修改 Model 字段，支持的模型包括：
- `claude-sonnet-4-5-20250929` (推荐，最新)
- `claude-3-5-sonnet-20241022`
- `claude-3-opus-20240229`
- `claude-3-haiku-20240307`
注意不同模型的定价和能力有所不同。
## 🔒 安全说明
- **API Key 存储**: 存储在 SQLite 数据库中，不要提交到 Git
- **推送前清理**: 运行 `./clear_sensitive_data.sh` 清除敏感数据
- **.gitignore**: 已配置忽略 `*.db`, `.env` 等敏感文件
- **生产部署**: 建议使用环境变量存储 API Key
详细安全指南请查看 [SECURITY.md](SECURITY.md)
## 📄 许可证
MIT License - 详见 [LICENSE](LICENSE) 文件
## 🤝 贡献
欢迎提交 Issue 和 Pull Request！
在提交 PR 前请确保：
- 代码风格一致
- 通过所有测试
- 更新相关文档
## 📧 联系方式
如有问题或建议，请通过以下方式联系：
- 邮箱: hikamous@outlook.com
---
**Built with ❤️ using Claude API, Vue 3, and FastAPI**
## 🙏 致谢与归属 / Acknowledgments & Attribution
本项目使用了以下优秀的开源软件和设计模式：
### AgentX Minimal Runtime（裁剪实现）
本项目基于 [AgentX](https://github.com/deepractice/agentx) 架构思想，并在此基础上裁剪并实现了一个轻量化的 **Minimal Runtime**，用于支撑单 Agent、单 Turn 的确定性内容生成流程。
该 Minimal Runtime 为本项目的核心运行时组件，由本项目作者基于 AgentX 的整体设计理念进行功能裁剪与工程重构，目标是：
- **降低 Agent 系统的使用与理解成本**
- **聚焦单次生成、可解释、可落地的业务场景**
- **提供稳定、可复用的 LLM 调用最小接口集**
**核心接口包括：**
- `createMinimalRuntime()` - 创建轻量级运行时实例
- `sendMessage()` - 向 LLM 发送单次生成请求
- `getMessages()` - 获取结构化生成与分析结果
- `dispose()` - 释放运行时资源
**实现位置：**
- `backend/agentx_wrapper.js` - 基于 AgentX 裁剪的 Minimal Runtime 实现
**致谢：**
感谢 [Deepractice](https://deepractice.ai) 团队开源 AgentX 项目，其在 Agent 架构抽象与工程边界划分上的设计，对本项目 Runtime 的裁剪与实现提供了重要思想参考。
### 其他依赖
- **[FastAPI](https://fastapi.tiangolo.com/)** - 高性能异步 Web 框架
- **[Vue 3](https://vuejs.org/)** - 渐进式 JavaScript 框架
- **[Vite](https://vitejs.dev/)** - 下一代前端构建工具
- **[Anthropic Claude API](https://www.anthropic.com/)** - 大语言模型服务
完整的依赖列表和许可证信息请查看：
- [LICENSE](LICENSE) - 项目许可证（含第三方许可证）
- [NOTICE](NOTICE) - 第三方软件归属声明
- `backend/package.json` - Node.js 依赖
- `backend/pyproject.toml` - Python 依赖
- `frontend/package.json` - 前端依赖