AI多轮对话和确认机制使用指南

🎯 功能概述

用户现在可以：

上传图片进行初次分析
继续上传更多图片补充分析
通过对话调整和优化分析结果
点击"确认分析结果"后生成详细报告

📋 使用流程

第1步：上传首张图片

用户操作：
1. 点击"上传图片"按钮
2. 选择1张或多张图片
3. 等待上传完成
4. 点击"开始分析"按钮

系统行为：

验证图片URL有效性
调用AI进行设计分析
实时流式显示分析内容
保存分析结果和对话记录

控制台日志：

📤 准备上传文件: design1.jpg, 大小: 2.5MB
✅ 文件上传成功: https://file-cloud.fmode.cn/.../design1.jpg
✅ 验证通过，有效图片数量: 1
🤖 开始AI图片分析...
📸 图片数量: 1
💬 对话历史数量: 0 条
📸 原始图片URL: [...]
📸 编码后URL: [...]
✅ AI分析完成，原始内容长度: 1523

第2步：继续上传图片（可选）

用户操作：
1. 在已有分析结果的基础上
2. 点击"上传图片"按钮
3. 选择新的图片
4. 再次点击"开始分析"按钮

系统行为：

🔥 不会清空之前的对话记录
将新上传的图片加入分析
传递之前的对话历史给AI
AI基于上下文提供补充分析

控制台日志：

📌 检测到已有对话记录，将作为补充分析
🤖 开始AI图片分析...
📸 图片数量: 2
💬 对话历史数量: 2 条

第3步：对话调整分析结果

用户操作：
1. 在对话输入框中输入调整需求
   例如：
   - "能否分析一下这个空间的采光问题？"
   - "请详细说明材质的选择理由"
   - "这个空间的预算应该控制在多少？"
2. 按回车或点击发送按钮

系统行为：

将用户输入添加到对话历史
调用AI服务，传递完整对话历史
AI基于上下文提供针对性回复
实时流式显示AI回复

控制台日志：

🤖 开始AI对话分析...
💬 对话历史数量: 4 条
💡 深度思考模式: false
✅ AI对话完成

第4步：确认分析结果

用户操作：
1. 满意分析结果后
2. 点击"确认分析结果"按钮

系统行为：

整合所有AI回复
- 合并所有AI消息
- 使用分隔符（---）分段

保存到项目数据库

{
 report: "完整的AI分析报告",
 analysisData: { rawContent, formattedContent, structuredData },
 images: ["图片URL列表"],
 files: [{ url, name, type, size }],
 chatHistory: [{ role, content, timestamp }],
 confirmedAt: "2025-11-27T12:00:00Z",
 confirmedBy: "用户ID"
}

询问是否生成客户报告
- 点击"是"：调用generateAndShowClientReport()
- 点击"否"：稍后可在报告区域生成

控制台日志：

✅ 分析结果已确认并保存

🔧 技术实现

1. 移除"已有对话时不能上传"限制

修改前：

if (this.aiChatMessages.length > 0) {
  window?.fmode?.alert('请在对话框中输入您的需求');
  return;
}

修改后：

// 支持多轮对话：如果已有对话记录，将新上传的图片作为补充分析
const isFollowUp = this.aiChatMessages.length > 0;

if (isFollowUp) {
  console.log('📌 检测到已有对话记录，将作为补充分析');
}

2. 构建对话历史

文件: stage-requirements.component.ts

// 构建对话历史（排除当前消息和流式输出中的消息）
const conversationHistory = this.aiChatMessages
  .filter(m => 
    m.id !== userMessage.id && 
    m.id !== aiStreamMessage.id && 
    !m.isStreaming && 
    m.content && 
    m.content.trim().length > 0
  )
  .map(m => ({
    role: m.role,
    content: m.content || ''
  }));

3. AI服务调用

文件: design-analysis-ai.service.ts

await this.designAnalysisAIService.analyzeReferenceImages({
  images: this.aiDesignUploadedImages, // 所有已上传的图片
  textDescription: message, // 当前用户输入
  spaceType: undefined, // 不传递，让AI自动识别
  conversationHistory: conversationHistory, // 完整对话历史
  deepThinking: this.deepThinkingEnabled, // 深度思考模式
  onContentStream: (content) => {
    // 实时更新流式输出
  }
});

4. 对话历史格式

conversationHistory = [
  {
    role: 'user',
    content: '请分析这张图片的设计风格'
  },
  {
    role: 'assistant',
    content: '一、空间定位与场景属性\n这是一个现代法式风格的客餐厅...'
  },
  {
    role: 'user',
    content: '能否详细说明材质的选择？'
  },
  {
    role: 'assistant',
    content: '关于材质选择，我详细分析如下...'
  }
]

🎨 UI交互

对话界面

<div class="chat-messages-wrapper">
  <!-- 对话消息列表 -->
  <div class="chat-messages-list">
    @for (message of aiChatMessages; track message.id) {
      <div class="chat-message" 
           [class.user-message]="message.role === 'user'" 
           [class.ai-message]="message.role === 'assistant'">
        
        <!-- 用户消息 -->
        @if (message.role === 'user') {
          <div class="message-content">
            <p>{{ message.content }}</p>
            @if (message.images?.length) {
              <div class="message-images">
                <!-- 显示用户上传的图片 -->
              </div>
            }
          </div>
        }
        
        <!-- AI消息 -->
        @if (message.role === 'assistant') {
          <div class="ai-message-content">
            @if (message.isStreaming) {
              <!-- 流式输出中... -->
              <p>{{ message.content }}<span class="typing-cursor">|</span></p>
            } @else {
              <!-- 完整内容 -->
              <p>{{ message.content }}</p>
            }
          </div>
        }
      </div>
    }
  </div>
</div>

<!-- 输入框 -->
<div class="chat-input-wrapper">
  <textarea
    class="chat-input"
    [(ngModel)]="aiChatInput"
    placeholder="描述你的需求或提出修改意见..."
    [disabled]="aiDesignAnalyzing"
    (keydown)="handleChatInputKeydown($event)">
  </textarea>
  
  <button 
    class="send-btn" 
    [disabled]="aiDesignAnalyzing || !aiChatInput?.trim()"
    (click)="sendChatMessage()">
    发送
  </button>
</div>

<!-- 快捷操作栏 -->
<div class="quick-actions">
  <button class="quick-action-btn" 
          (click)="clearChat()" 
          [disabled]="aiChatMessages.length === 0">
    清空对话
  </button>
  
  <button class="quick-action-btn" 
          (click)="exportChat()" 
          [disabled]="aiChatMessages.length === 0">
    导出对话
  </button>
  
  <button class="quick-action-btn" 
          (click)="confirmCurrentAnalysis()" 
          [disabled]="aiChatMessages.length === 0">
    确认分析结果
  </button>
</div>

📊 数据流

用户上传图片 → 验证URL → 开始分析
    ↓
构建对话历史（过滤掉当前和流式中的消息）
    ↓
调用AI服务
  - images: [所有图片URL]
  - conversationHistory: [完整对话历史]
  - spaceType: undefined
  - vision: true
  - images: [编码后的URL]
    ↓
AI实时流式输出 → 更新UI
    ↓
AI分析完成 → 保存结果
    ↓
用户继续输入 → 重复上述流程
    ↓
用户点击"确认" → 保存到项目 → 生成报告

🔍 调试日志

首次分析

✅ 验证通过，有效图片数量: 1
🤖 开始AI图片分析...
📸 图片数量: 1
💬 对话历史数量: 0 条
📸 原始图片URL: ["https://..."]
📸 编码后URL: ["https://.../%E8%BD%AF..."]
🤖 调用豆包1.6模型...
✅ AI分析完成，原始内容长度: 1523

补充图片

📌 检测到已有对话记录，将作为补充分析
✅ 验证通过，有效图片数量: 2
🤖 开始AI图片分析...
💬 对话历史数量: 2 条

对话调整

🤖 开始AI对话分析...
💬 对话历史数量: 4 条
💡 深度思考模式: false
📊 AI思考进度: 正在分析设计细节...
✅ AI对话完成

确认结果

✅ 分析结果已确认并保存
分析结果已保存！

是否立即生成客户报告？

⚠️ 常见问题

Q1: 为什么上传新图片后要再次点击"开始分析"？

A: 这是设计的工作流程，允许用户：

一次上传多张图片
检查上传是否成功
添加文字描述
然后一次性分析所有图片

Q2: 对话历史会传递给AI吗？

A: 是的，每次调用AI时都会传递完整的对话历史，让AI能够：

理解上下文
提供连贯的回复
基于之前的分析进行补充

Q3: 确认后还能继续对话吗？

A: 可以。确认只是保存当前结果，不影响后续对话。但建议：

确认前做好充分的对话调整
确认后的对话将创建新的分析记录

Q4: 如何查看已确认的分析结果？

A: 确认后的结果保存在：

项目数据 → data.designReports[空间ID]

可以在报告区域查看和导出。

💡 最佳实践

1. 图片上传建议

首次：上传2-3张核心设计图
补充：根据AI分析结果，上传局部细节图
格式：使用JPG/PNG，大小1-10MB
文件名：避免特殊字符，可使用中文

2. 对话技巧

具体明确："请详细分析客厅的色调搭配" ✓
避免模糊："这个怎么样？" ✗
追问细节："刚才提到的暖灰色，具体用在哪些地方？"
提出疑问："为什么选择大理石而不是木地板？"

3. 确认时机

✅ AI已回答所有关键问题
✅ 分析结果符合预期
✅ 已获取足够的设计细节
✅ 准备生成客户报告

4. 性能优化

对话历史过长（>20轮）时，考虑确认并开始新对话
图片数量控制在5张以内，避免AI分析超时
使用"深度思考模式"获取更详细的分析（但耗时更长）

🔗 相关文档

更新日期: 2025-11-27
功能状态: ✅ 已实现并测试

ai-multi-turn-conversation-guide.md 10 KB Historique Raw

AI多轮对话和确认机制使用指南

🎯 功能概述

📋 使用流程

第1步：上传首张图片

第2步：继续上传图片（可选）

第3步：对话调整分析结果

第4步：确认分析结果

🔧 技术实现

1. 移除"已有对话时不能上传"限制

2. 构建对话历史

3. AI服务调用

4. 对话历史格式

🎨 UI交互

对话界面

📊 数据流

🔍 调试日志

首次分析

补充图片

对话调整

确认结果

⚠️ 常见问题

Q1: 为什么上传新图片后要再次点击"开始分析"？

Q2: 对话历史会传递给AI吗？

Q3: 确认后还能继续对话吗？

Q4: 如何查看已确认的分析结果？

💡 最佳实践

1. 图片上传建议

2. 对话技巧

3. 确认时机

4. 性能优化

🔗 相关文档

ai-multi-turn-conversation-guide.md 10 KB

Historique Raw