AI设计分析功能使用指南

📋 功能概述

优化后的AI分析服务提供三种输出格式，满足不同角色的需求：

完整分析报告：适合设计师深度研究
简洁摘要：适合客服快速了解
客服标注格式：适合客服制作空间标注

🎯 适用场景

场景1：客服接单时快速分析客户需求

案例：客户发来3张现代法式风格的参考图

// 调用AI分析
const analysisResult = await this.aiService.analyzeReferenceImages({
  images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
  spaceType: '客餐厅一体化',
  textDescription: '风格:现代法式(偏暖色系)，护墙板颜色(淡奶灰色)',
  deepThinking: false  // 快速分析模式
});

// 生成简洁摘要（客服快速查看）
const summary = this.aiService.generateBriefSummary(analysisResult);
// 输出示例：
// "客餐厅一体化 | 现代+法式 | 暖色系、暖灰 | 温馨、精致 | 主要材质：护墙板、木材、大理石"

场景2：客服制作空间标注

案例：根据AI分析和客户要求，生成标注文档

const customerRequirements = `
1、护墙板颜色(淡奶灰色)
2、公共地砖柔哑面 带一点小超边
3、负二层旋转楼梯材质钢板
4、负一层至三层楼梯大理石踏步+钢板扶手
5、女儿房适当配一点淡粉色
6、卧室地板鱼骨拼花
7、三楼主卫台盆柜带梳妆台
`;

// 生成客服标注格式
const notes = this.aiService.generateCustomerServiceNotes(
  analysisResult,
  customerRequirements
);

// 输出示例：
/*
【客户要求】
1、护墙板颜色(淡奶灰色)
2、公共地砖柔哑面 带一点小超边
...

【风格定位】
现代法式风格，偏向暖色系基调

【色调要求】
主色调：淡奶灰色为基底，辅以暖白和原木色

【材质要求】
地面：大理石瓷砖，柔哑面质感
墙面：护墙板，淡奶灰色涂装

【施工注意】
护墙板需采用哑光涂装工艺，地砖铺贴注意超边细节
*/

场景3：设计师深度分析

案例：设计师需要详细了解参考图的设计手法

// 启用深度分析模式
const deepAnalysis = await this.aiService.analyzeReferenceImages({
  images: ['image1.jpg'],
  spaceType: '主卧',
  deepThinking: true,  // 深度分析模式
  conversationHistory: [
    { role: 'user', content: '这个空间的色调如何与材质配合？' },
    { role: 'assistant', content: '暖灰色与木色结合，形成温暖舒适的氛围...' }
  ]
});

// 使用格式化后的完整报告
const fullReport = deepAnalysis.formattedContent;
// 包含8个维度的详细分析，每个维度2-4个段落

// 或者使用结构化数据
const structuredData = deepAnalysis.structuredData;
console.log('色调分析:', structuredData.colorAnalysis);
console.log('材质解析:', structuredData.materials);
console.log('优化建议:', structuredData.suggestions);

📊 输出数据结构

完整分析结果 (analysisResult)

{
  rawContent: string;           // AI原始输出
  formattedContent: string;     // 格式化后的内容（推荐使用）
  structuredData: {             // 结构化数据
    spacePositioning: string;   // 空间定位与场景属性
    layout: string;             // 空间布局与动线
    hardDecoration: string;     // 硬装系统细节
    colorAnalysis: string;      // 色调精准分析
    materials: string;          // 材质应用解析
    form: string;               // 形体与比例
    style: string;              // 风格与氛围营造
    suggestions: string;        // 专业优化建议
  };
  hasContent: boolean;          // 是否有有效内容
  timestamp: string;            // 分析时间戳
}

🔧 实际应用示例

示例1：客服接单流程

export class OrderAssignmentComponent {
  async analyzeCustomerImages() {
    try {
      // 1. 调用AI分析
      const result = await this.aiService.analyzeReferenceImages({
        images: this.uploadedImages,
        spaceType: this.selectedSpaceType,
        textDescription: this.customerRequirements,
        onProgressChange: (msg) => this.showProgress(msg)
      });

      // 2. 生成简洁摘要（显示在订单卡片上）
      this.orderSummary = this.aiService.generateBriefSummary(result);
      
      // 3. 生成客服标注（保存到Project.data）
      this.serviceNotes = this.aiService.generateCustomerServiceNotes(
        result,
        this.customerRequirements
      );

      // 4. 保存到数据库
      this.project.set('data', {
        ...this.project.get('data'),
        aiAnalysis: result.formattedContent,
        aiSummary: this.orderSummary,
        serviceNotes: this.serviceNotes
      });
      
      await this.project.save();
      
      this.showToast('分析完成，已生成标注');
      
    } catch (error) {
      this.showError('AI分析失败: ' + error.message);
    }
  }
}

示例2：设计师查看分析报告

export class ProjectDetailComponent {
  async loadAnalysisReport() {
    const projectData = this.project.get('data');
    
    if (projectData.aiAnalysis) {
      // 显示格式化后的完整报告
      this.analysisContent = projectData.aiAnalysis;
      
      // 显示简洁摘要（顶部卡片）
      this.quickSummary = projectData.aiSummary;
    } else {
      // 如果没有分析，提示重新分析
      this.showReanalyzeButton = true;
    }
  }

  // 查看特定维度的分析
  viewDimensionDetail(dimension: string) {
    const result = this.parseStoredAnalysis(this.analysisContent);
    
    switch(dimension) {
      case 'color':
        this.showModal('色调分析', result.structuredData.colorAnalysis);
        break;
      case 'material':
        this.showModal('材质解析', result.structuredData.materials);
        break;
      case 'suggestions':
        this.showModal('优化建议', result.structuredData.suggestions);
        break;
    }
  }
}

示例3：流式输出实时显示

export class AIAnalysisDialog {
  analysisContent = '';

  async startAnalysis() {
    this.analysisContent = '';
    
    try {
      await this.aiService.analyzeReferenceImages({
        images: this.images,
        spaceType: this.spaceType,
        textDescription: this.description,
        
        // 流式输出回调：实时显示AI生成的内容
        onContentStream: (content) => {
          this.analysisContent = content;
          // Angular会自动检测变化并更新视图
          this.scrollToBottom();
        },
        
        // 进度回调
        onProgressChange: (progress) => {
          this.progressMessage = progress;
        }
      });
      
      this.showToast('分析完成');
      
    } catch (error) {
      this.showError(error.message);
    }
  }
}

💡 最佳实践

1. 提供客户需求文本

AI分析会结合文本描述产生更精准的结果：

const textDescription = `
风格: 现代法式(偏暖色系)
护墙板颜色: 淡奶灰色
地面: 柔哑面瓷砖
特殊要求: 女儿房适当配淡粉色
`;

// ✅ 推荐：提供详细描述
await aiService.analyzeReferenceImages({
  images: [...],
  textDescription: textDescription  // 提供客户需求
});

// ❌ 不推荐：完全不提供上下文
await aiService.analyzeReferenceImages({
  images: [...]  // AI只能从图片推断
});

2. 使用对话历史增强分析

当与客户有多轮沟通时，传入对话历史：

const conversationHistory = [
  { role: 'user', content: '这个空间的木色会不会太深？' },
  { role: 'assistant', content: '可以选择浅色原木，更温暖明亮' },
  { role: 'user', content: '那墙面用什么颜色配？' }
];

await aiService.analyzeReferenceImages({
  images: [...],
  conversationHistory: conversationHistory  // AI会参考对话上下文
});

3. 根据场景选择分析模式

// 客服接单：快速分析
deepThinking: false  // 800-1200字，3-5分钟

// 设计师深度研究：深度分析
deepThinking: true   // 1500-2000字，5-8分钟

4. 合理使用结构化数据

// ✅ 推荐：需要特定维度时使用结构化数据
if (needColorAnalysisOnly) {
  const colorAnalysis = result.structuredData.colorAnalysis;
  this.showColorPalette(colorAnalysis);
}

// ✅ 推荐：完整展示时使用格式化内容
if (needFullReport) {
  this.reportContent = result.formattedContent;
}

// ❌ 不推荐：直接使用rawContent（格式可能不整齐）
this.reportContent = result.rawContent;  // 可能有格式问题

🎨 UI展示建议

客服端展示

<!-- 订单卡片：显示简洁摘要 -->
<div class="order-card">
  <div class="ai-summary">
    <ion-icon name="sparkles"></ion-icon>
    <span>{{ aiSummary }}</span>
  </div>
  <!-- 示例：客餐厅一体化 | 现代+法式 | 暖色系 | 温馨、精致 -->
</div>

<!-- 详情页：显示客服标注 -->
<div class="service-notes">
  <h3>📋 客服标注</h3>
  <pre>{{ serviceNotes }}</pre>
</div>

设计师端展示

<!-- 完整分析报告：分维度展示 -->
<ion-accordion-group>
  <ion-accordion value="positioning">
    <ion-item slot="header">
      <ion-label>一、空间定位与场景属性</ion-label>
    </ion-item>
    <div slot="content">
      <p>{{ structuredData.spacePositioning }}</p>
    </div>
  </ion-accordion>
  
  <ion-accordion value="color">
    <ion-item slot="header">
      <ion-label>四、色调精准分析</ion-label>
    </ion-item>
    <div slot="content">
      <p>{{ structuredData.colorAnalysis }}</p>
    </div>
  </ion-accordion>
  
  <!-- 其他维度... -->
</ion-accordion-group>

流式输出展示

<!-- 实时显示AI生成内容 -->
<div class="ai-streaming-output">
  <div class="content-area" #contentArea>
    <pre>{{ analysisContent }}</pre>
  </div>
  
  @if (isAnalyzing) {
    <div class="typing-indicator">
      <span></span><span></span><span></span>
    </div>
  }
</div>

📈 性能优化建议

1. 图片数量控制

// ✅ 推荐：每次分析1-3张图片
images: ['img1.jpg', 'img2.jpg', 'img3.jpg']

// ⚠️ 注意：超过5张图片会延长分析时间
images: ['img1.jpg', ..., 'img10.jpg']  // 可能超时

2. 缓存分析结果

// 避免重复分析同一张图片
const cacheKey = `ai_analysis_${imageHash}`;
const cached = localStorage.getItem(cacheKey);

if (cached) {
  return JSON.parse(cached);
} else {
  const result = await aiService.analyzeReferenceImages({...});
  localStorage.setItem(cacheKey, JSON.stringify(result));
  return result;
}

3. 异步加载

// 不阻塞主流程，后台分析
async loadProject() {
  await this.loadBasicInfo();  // 先加载基本信息
  
  // AI分析异步进行
  this.analyzeInBackground();
}

async analyzeInBackground() {
  try {
    const result = await this.aiService.analyzeReferenceImages({...});
    this.aiAnalysisReady = true;
  } catch (error) {
    console.error('后台分析失败:', error);
  }
}

🔍 故障排查

问题1：AI返回内容过短

原因：图片质量差、提示词不清晰、API限制

解决：

// 检查返回内容长度
if (result.hasContent === false) {
  console.warn('AI返回内容不足，建议重新分析');
  // 提示用户上传更清晰的图片或补充文字说明
}

问题2：分析超时

原因：图片过多、网络延迟、服务器繁忙

解决：

// 设置超时控制
const timeout = setTimeout(() => {
  throw new Error('分析超时，请重试');
}, 60000);  // 60秒超时

try {
  const result = await aiService.analyzeReferenceImages({...});
  clearTimeout(timeout);
} catch (error) {
  clearTimeout(timeout);
  // 提示用户减少图片数量或稍后重试
}

问题3：格式化效果不佳

原因：AI输出格式不规范

解决：

// 使用formattedContent而不是rawContent
const content = result.formattedContent;  // ✅ 已优化格式

// 如果仍有问题，可以手动补充格式化
const betterFormatted = content
  .replace(/([。！？])\s*/g, '$1\n')  // 句号后换行
  .replace(/\n{3,}/g, '\n\n');        // 压缩多余空行

📝 总结

优化后的AI分析服务提供了三种输出格式，满足不同场景需求：

角色	使用场景	推荐方法
客服	快速了解风格	`generateBriefSummary()`
客服	制作空间标注	`generateCustomerServiceNotes()`
设计师	深度研究设计	`formattedContent` + `structuredData`
所有人	实时查看生成	`onContentStream` 回调

关键特性：

✅ 基于图片实际内容分析，非模板化
✅ 输出格式清晰，段落分明
✅ 支持流式输出，实时显示
✅ 提供结构化数据，方便提取
✅ 三种格式输出，适配不同角色

最后更新: 2025-11-27
维护者: 开发团队

ai-analysis-usage-guide.md 13 KB Permalink History Raw