# chatMMC

**Repository Path**: iim-di-tsintelligence/chat-mmc

## Basic Information

- **Project Name**: chatMMC
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-18
- **Last Updated**: 2025-08-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# chatMMC：视觉驱动的多模态问答系统

一个基于 Vue 3 + FastAPI 的网页应用，用于构建视觉驱动的可解释性问答系统，融合多模态图像信息与交互能力。

## 项目概述

本系统通过分析视觉图像数据获取场景信息，并将这些视觉因素融入问答过程，提供个性化的回答体验。系统同时提供模型处理流程的可视化，以及视觉注意力热力图展示，增强系统的可解释性。

### 主要功能

- **视觉场景分析**：分析图像数据，识别场景状态（正常、高风险、警觉、未知）
- **图像上传**：支持上传图像文件进行分析
- **视觉问答**：根据图像内容回答相关问题
- **模型流程可视化**：展示图像处理和模型推理的流程
- **视觉热力图**：展示模型关注的图像区域，附带交互式解释
- **视觉反馈UI**：根据检测到的场景状态变化界面颜色和展示效果

## 技术栈

### 前端

- Vue 3 (Composition API)
- TailwindCSS
- TypeScript
- Axios

### 后端

- FastAPI
- Pydantic
- Pillow (用于图像处理)
- VisionModel - 图像场景分析模型
- 待定 - 图像描述生成模型
- gpt4o/Qwen - 多模态视觉问答模型

## 项目结构

```
├── frontend/            # 前端Vue项目
│   ├── src/
│   │   ├── components/  # Vue组件
│   │   │   ├── VisionStatus.vue     # 视觉状态显示组件
│   │   │   ├── HeatmapDisplay.vue   # 热力图展示组件
│   │   │   ├── ModelFlowChart.vue   # 模型流程图组件
│   │   │   └── QAArea.vue           # 问答区域组件
│   │   ├── api/         # API调用
│   │   ├── types/       # TypeScript类型定义
│   │   └── assets/      # 静态资源
│   └── ...
├── backend/             # 后端FastAPI项目
│   ├── app.py           # 主应用
│   ├── static/          # 静态文件
│   └── requirements.txt # 依赖
└── README.md
```

## 安装与运行

### 前端

```bash
cd frontend
npm install
npm run dev
```

### 后端

```bash
cd backend
pip install -r requirements.txt
uvicorn app:app --reload
```

## API 端点

系统提供以下API端点：

- `POST /predict-vision` - 根据图像数据预测场景状态
- `POST /upload-image` - 上传图像文件并分析
- `POST /generate-description` - 生成图像描述
- `POST /answer-question` - 根据图像内容回答问题
- `GET /get-heatmap` - 获取视觉注意力热力图

## 界面布局

系统采用2x2象限布局：
- 左上（25% 宽）：视觉状态卡片，包括场景状态指示器和视觉信号可视化
- 右上（75% 宽）：图像处理流程图与推理过程展示
- 下方（全宽）：分为左右两列，左侧为问答区（70%），右侧为视觉解释热图展示区（30%）

## 视觉状态适应特性

系统根据检测到的场景状态进行个性化调整：

- **高风险(红色)** - 突出显示危险区域，提供安全建议
- **正常(绿色)** - 提供详细的场景描述和普通回答
- **警觉(黄色)** - 简明扼要，突出可能存在的风险点
- **未知(蓝色)** - 请求更多信息或提供保守的分析

## 开发指南

### 添加新组件

1. 在 `frontend/src/components/` 目录创建新的Vue组件
2. 使用 `<script setup>` 语法
3. 使用TailwindCSS进行样式设计
4. 组件命名使用PascalCase

### 扩展后端功能

1. 在 `backend/app.py` 添加新的API端点
2. 使用Pydantic模型定义请求和响应结构
3. 遵循现有的响应格式:
```python
{
  "result": { ... },
  "meta": {
    "time": "0.01s",
    "model": "模型名称"
  }
}
```

## 未来计划

- 接入真实的视觉处理模型
- 添加用户账户和数据保存功能
- 扩展支持更多场景分类
- 增加视频流实时分析功能
- 优化移动端体验

## 许可证

MIT