# 心语国韵

**Repository Path**: cs2939/xygy

## Basic Information

- **Project Name**: 心语国韵
- **Description**: 心语国韵是一个基于AI技术的古风诗词创作与配图系统，用户可以输入心情感受，系统会自动生成相应的古风诗句并配以AI生成的中国风背景图片。项目融合了自然语言处理、情绪分析、诗词生成和AI绘画等多项前沿技术，为用户提供沉浸式的古典文化体验。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-11
- **Last Updated**: 2025-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 心语国韵 - AI对话中的情绪与诗意

一个融合国风文化与AI情绪理解的React应用，让AI用古风诗句回应您的心声。

## ✨ 特色功能

- 🎨 **国风设计**：水墨风格UI、宋体字体、古典配色
- 🤖 **AI诗句生成**：基于FastGPT的情绪分析和古风诗句创作
- 🖼️ **AI配图生成**：基于BFL FLUX模型的诗意配图自动生成
- 💫 **动画特效**：泼墨动画、打字机效果、页面过渡动画
- 📜 **历史记录**：自动保存对话历史，支持导出
- 📱 **响应式设计**：适配各种设备屏幕

## 🚀 快速开始

### 环境要求

- Node.js 16.0 或更高版本
- npm 或 yarn

### 安装步骤

1. **克隆项目**
   ```bash
   git clone <repository-url>
   cd actor-win
   ```

2. **安装依赖**
   ```bash
   npm install
   ```

3. **配置环境变量**
   ```bash
   cp .env.example .env
   ```
   
   编辑 `.env` 文件，填入您的FastGPT配置：
   ```env
   VITE_FASTGPT_API_URL=https://api.fastgpt.in/api
   VITE_FASTGPT_API_KEY=fastgpt-your_api_key_here
   VITE_FASTGPT_APP_ID=your_app_id_here
   ```

   **⚠️ 重要：获取配置信息**
   - **API Key**: ⚠️ 必须使用**应用特定的API Key**，不能使用账户API Key
     - 正确方式：应用详情页 → "API访问" → 复制应用API Key
     - 错误方式：个人设置 → API密钥（这是账户级别的Key）
   - **App ID**: 在应用详情页面的URL中获取，格式如：`/app/detail/your_app_id`
   - **Base URL**: 通常使用默认值即可，如果是私有部署请修改为您的域名

   **如果遇到"Key is error"错误，请查看 [API_KEY_GUIDE.md](./API_KEY_GUIDE.md) 获取详细解决方案。**

4. **启动开发服务器**
   ```bash
   npm run dev
   ```

5. **访问应用**
   
   打开浏览器访问 `http://localhost:5173`

## 🎯 使用说明

1. **输入心语**：在古风输入框中描述您的心情或想法
2. **AI创作**：点击"提交心语"，AI将为您创作专属诗句
3. **生成配图**：系统自动为诗句生成相应的国风配图
4. **查看结果**：欣赏AI生成的古风诗句、情绪分析和配图
5. **保存分享**：可复制诗句内容或下载配图
6. **历史记录**：点击右上角历史记录按钮查看过往对话

## 🛠 技术栈

- **前端框架**：React 18
- **构建工具**：Vite
- **样式框架**：Tailwind CSS
- **AI服务**：FastGPT API（诗句生成）+ BFL FLUX API（图片生成）
- **HTTP客户端**：Axios
- **字体**：Noto Serif SC（思源宋体）

## 📁 项目结构

```
src/
├── components/          # React组件
│   ├── Header.jsx      # 页面头部
│   ├── InputSection.jsx # 输入区域
│   ├── OutputSection.jsx # 输出区域
│   ├── InkAnimation.jsx # 水墨动画
│   ├── HistoryPanel.jsx # 历史记录面板
│   └── TypewriterText.jsx # 打字机效果
├── services/           # API服务
│   ├── fastgpt.js     # FastGPT集成（诗句生成）
│   └── imageGeneration.js # BFL图片生成集成
├── utils/             # 工具函数
│   └── storage.js     # 本地存储
├── App.jsx           # 主应用组件
├── main.jsx          # 应用入口
└── index.css         # 全局样式
```

## 🎨 设计理念

### 国风元素
- **色彩**：以纸墨色调为主，金色点缀
- **字体**：使用宋体和楷体营造古典氛围
- **动画**：水墨扩散效果模拟传统绘画
- **布局**：简洁优雅，突出内容之美

### 用户体验
- **极简交互**：一个输入框 + 一个结果区域
- **渐进展示**：打字机效果逐步显示内容
- **视觉反馈**：丰富的动画和过渡效果
- **历史管理**：便捷的记录查看和导出功能

## 🔧 自定义配置

### 修改AI提示词

编辑 `src/services/fastgpt.js` 中的 `prompt` 变量来自定义AI的回复风格。

### 调整动画效果

在 `tailwind.config.js` 和 `src/index.css` 中修改动画参数。

### 更换字体

在 `index.html` 和 `tailwind.config.js` 中配置新的字体。

## 📝 开发说明

### 本地开发
```bash
npm run dev          # 启动开发服务器
npm run build        # 构建生产版本
npm run preview      # 预览生产版本
```

### 代码规范
- 使用 ESLint 进行代码检查
- 组件采用函数式写法
- 样式优先使用 Tailwind CSS


## 🙏 致谢

- [FastGPT](https://fastgpt.in/) - 提供AI对话能力
- [Tailwind CSS](https://tailwindcss.com/) - 样式框架
- [React](https://reactjs.org/) - 前端框架
- [Vite](https://vitejs.dev/) - 构建工具