请设计一个面向设计师的“AI 助手”前端界面，可以生成文本、图像并自动插入到设计稿中
以下是核心功能设计、技术实现方案和界面交互流程的思路。
核心功能模块
1. Prompt 输入与解析
- 自然语言输入：用户通过文本框输入需求描述，如“生成一个科技感的登录界面”或“插入一张展示未来城市的图像”。
- Prompt 模板推荐：提供常用的 prompt 模板，帮助用户快速构建有效的输入。
2. 内容生成引擎
- 文本生成：集成大语言模型（如 OpenAI 的 GPT-4 或 Claude）生成文案内容。
- 图像生成：集成图像生成模型（如 Stable Diffusion 或 DALL·E）生成视觉素材。
- 风格控制：用户可选择特定的风格标签（如极简、复古、未来感）来指导生成内容的风格。
3. 设计稿集成与编辑
- 自动插入：生成的文本和图像可一键插入到当前设计稿中。
- 位置与样式调整：提供拖拽、缩放、旋转等基本编辑功能，方便用户调整插入内容的位置和样式。
- 版本管理：支持对插入的内容进行版本控制，便于回溯和比较不同的设计方案。
技术实现方案
前端技术栈
- 框架：使用 React 或 Vue 构建用户界面。
- 状态管理：采用 Redux 或 Vuex 管理应用状态。
- 样式处理：使用 Tailwind CSS 或 styled-components 实现响应式设计。
- 图像处理：集成 Fabric.js 或 Konva 实现画布上的图像编辑功能。
后端服务
- API 网关：构建统一的 API 网关，路由用户请求到相应的 AI 模型服务。
- 模型服务：部署文本和图像生成模型，处理用户的内容生成请求。
- 存储服务：使用云存储（如 AWS S3）保存生成的图像和设计稿数据。
用户界面交互流程
- 输入需求：用户在输入框中描述所需的文本或图像内容。
- 选择风格：用户可选择预设的风格标签，指导生成内容的视觉风格。
- 生成内容：点击“生成”按钮，系统调用相应的 AI 模型生成内容。
- 预览与编辑：生成的内容在预览区域展示，用户可进行基本的编辑操作。
- 插入设计稿：确认无误后，用户可将内容一键插入到当前的设计稿中。
- 保存与导出：用户可保存当前设计稿或导出为常用的设计文件格式。