# CogniSynth_vue

**Repository Path**: lovelwb/CogniSynth_vue

## Basic Information

- **Project Name**: CogniSynth_vue
- **Description**: CogniSynth多模态AI生图
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-28
- **Last Updated**: 2025-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 多模态AI生图前端, Vue

## README

# OminResSynth - 语义超分图像生成系统

## 项目概述

OminResSynth 是一个基于 Vue 3 和 TypeScript 开发的语义超分图像生成系统，提供了直观的用户界面，支持通过文本描述生成高质量图像，并且可以进行交互式的细节控制与调整。

## 功能特点

### 标准生成模式
- 支持通过文本提示词（Prompt）生成图像
- 提供丰富的参数控制（分辨率、随机种子、采样器等）
- 实时显示生成进度和状态

### 交互式生成模式
- 支持在生成图像基础上进行交互式调整
- 多种标注工具（矩形、自由绘制、文字批注、关键点标记）
- 快速反馈选项和全局反馈功能
- 反馈历史记录与追踪

### 其他功能
- 图像结果对比查看
- 图像下载与保存
- 生成历史记录管理
- 语音输入支持
## 系统架构

### 组件结构

1. **HomeView**（`src/views/HomeView.vue`）
   - 主页视图，集成所有功能模块
   - 管理生成状态和WebSocket通信
   - 负责参数设置、状态监控、结果显示和交互式画布的协调

2. **ParameterInput**（`src/components/ParameterInput.vue`）
   - 参数设置组件，处理用户输入
   - 提供Prompt、分辨率、随机种子等参数控制
   - 支持语音输入和模式切换

3. **StatusMonitor**（`src/components/StatusMonitor.vue`）
   - 生成状态监控组件
   - 显示进度、阶段、估计时间等信息
   - 提供取消生成功能

4. **ImageResult**（`src/components/ImageResult.vue`）
   - 图像结果显示组件
   - 支持图像对比模式
   - 显示图像元数据和下载功能

5. **InteractiveCanvas**（`src/components/InteractiveCanvas.vue`）
   - 交互式画布组件
   - 提供多种绘图工具进行图像标注
   - 管理反馈历史和快速反馈功能

### 服务层

1. **api 服务**（`src/services/api.js`）
   - 封装与后端API的通信
   - 处理图像生成、取消和反馈等请求

2. **websocket 服务**（`src/services/websocket.js`）
   - 建立WebSocket连接监控生成状态
   - 处理实时进度更新和信息传递

3. **storage 服务**（`src/services/storage.js`）
   - 管理本地存储，保存历史记录
   - 使用IndexedDB实现持久化存储

4. **speechRecognition 服务**（`src/services/speechRecognition.js`）
   - 语音识别功能实现
   - 提供语音转文本的输入方式

## 界面设计

- 采用黑暗主题，主色调为绿色（#00c853）
- 左右平铺的全屏布局，左侧参数设置（25%），右侧生成结果显示（75%）
- 响应式设计，适配不同屏幕尺寸（在小屏幕上自动调整为上下布局）
- 交互式模式下动态调整布局，同时显示结果和交互画布

## 流程说明

### 标准生成流程
1. 用户输入Prompt和参数设置
2. 点击生成按钮，向后端发送请求
3. 通过WebSocket实时监控生成进度
4. 生成完成后显示结果图像和元数据
5. 自动保存到历史记录

### 交互式生成流程
1. 切换到交互式生成模式
2. 生成初始图像
3. 使用标注工具标记需要调整的区域
4. 添加反馈信息
5. 提交反馈，生成调整后的图像
6. 可重复交互过程直至满意

## 技术栈

- **前端框架**: Vue 3 + TypeScript
- **UI组件库**: Element Plus
- **构建工具**: Vite
- **状态管理**: Vue Reactive API
- **样式设计**: CSS变量 + Scoped CSS

## 开发环境设置

```sh
# 安装依赖
npm install

# 开发环境启动
npm run dev

# 构建生产版本
npm run build

# 运行单元测试
npm run test:unit
```

## 注意事项

- 图像生成需要后端服务支持，确保API服务可用
- 语音识别功能需要浏览器支持Web Speech API
- 超高分辨率生成可能需要较长时间和更多资源
- 交互式生成功能依赖于后端的反馈处理能力

## 未来计划

- 添加更多图像生成模型支持
- 增强交互式编辑能力
- 提供更多的预设模板
- 增加图像批量生成功能
- 优化移动设备体验