yss-project/docs/ai-image-access-fix.md

AI图片访问问题修复

🔴 关键问题

用户上传图片进行AI分析后，AI返回：

"由于未获取到实际图片内容，无法进行基于视觉信息的设计分析"

这说明AI模型无法访问图片URL。

🔍 问题根本原因

问题1：缺少vision参数

FmodeChatCompletion需要显式启用视觉能力才能分析图片。

错误代码：

const completion = new FmodeChatCompletion(messageList, {
  model: this.AI_MODEL,
  max_tokens: 8000,
  // ❌ 缺少 vision: true
});

修复代码：

const completion = new FmodeChatCompletion(messageList, {
  model: this.AI_MODEL,
  max_tokens: 8000,
  vision: true, // ✅ 启用视觉能力
} as any); // 使用类型断言，因为vision属性在TypeScript类型定义中缺失

注意：使用as any类型断言是因为FmodeChatCompletion的TypeScript类型定义中没有包含vision属性，但运行时库确实支持这个参数。

问题2：图片URL包含中文字符

图片URL示例：

https://file-cloud.fmode.cn/...../软装1（参考图）.jpg

中文文件名"软装1（参考图）"需要进行URL编码，否则AI可能无法访问。

修复方法：

const encodedImages = options.images.map(url => {
  try {
    const urlObj = new URL(url);
    const pathname = urlObj.pathname;
    // 对路径中的每个部分进行编码
    const encodedPathname = pathname.split('/')
      .map(segment => encodeURIComponent(decodeURIComponent(segment)))
      .join('/');
    return urlObj.origin + encodedPathname + urlObj.search;
  } catch (e) {
    console.warn('⚠️ URL编码失败，使用原始URL:', url);
    return url;
  }
});

编码效果：

原始: .../软装1（参考图）.jpg
编码: .../%E8%BD%AF%E8%A3%851%EF%BC%88%E5%8F%82%E8%80%83%E5%9B%BE%EF%BC%89.jpg

✅ 完整修复方案

修改文件：design-analysis-ai.service.ts

修改位置1：添加URL编码

// 🔥 关键修复：图片URL需要URL编码，确保AI能正确访问
const encodedImages = options.images.map(url => {
  try {
    // 如果URL包含中文或特殊字符，进行编码
    const urlObj = new URL(url);
    const pathname = urlObj.pathname;
    const encodedPathname = pathname.split('/')
      .map(segment => encodeURIComponent(decodeURIComponent(segment)))
      .join('/');
    return urlObj.origin + encodedPathname + urlObj.search;
  } catch (e) {
    console.warn('⚠️ URL编码失败，使用原始URL:', url);
    return url;
  }
});

// 使用FmodeChatCompletion进行流式输出
const messageList = [
  {
    role: 'user',
    content: prompt,
    images: encodedImages // ✅ 使用编码后的URL
  }
];

// 日志输出，帮助调试
console.log('📸 原始图片URL:', options.images);
console.log('📸 编码后URL:', encodedImages);

修改位置2：启用vision参数

const completion = new FmodeChatCompletion(messageList, {
  model: this.AI_MODEL,
  max_tokens: 8000,
  vision: true, // ✅ 启用视觉能力
});

修改位置3：添加错误检测

if (message?.complete && content) {
  // 🔥 关键检查：AI是否真正分析了图片
  if (content.includes('由于未获取到实际图片内容') || 
      content.includes('无法进行基于视觉信息的设计分析') ||
      content.includes('请提供具体图片')) {
    console.error('❌ AI无法访问图片！');
    console.error('🔍 AI返回的完整内容:', content);
    reject(new Error('AI无法访问图片。可能原因：\n1. 图片URL格式不正确\n2. 图片URL无法被AI访问\n3. 图片文件损坏或格式不支持\n\n请尝试：\n- 重新上传图片\n- 使用常见格式（JPG/PNG）\n- 确保图片文件名不包含特殊字符'));
    subscription?.unsubscribe();
    return;
  }
  // ... 继续处理
}

🎯 修复流程

用户上传图片
    ↓
文件名：软装1（参考图）.jpg
    ↓
URL编码：%E8%BD%AF%E8%A3%851%EF%BC%88%E5%8F%82%E8%80%83%E5%9B%BE%EF%BC%89.jpg
    ↓
调用FmodeChatCompletion
  - vision: true (启用视觉)
  - images: [编码后的URL]
    ↓
AI分析图片
    ↓
返回完整的8维度分析

🔧 调试步骤

1. 检查图片URL编码

打开浏览器控制台，查看日志：

📸 原始图片URL: ["https://.../软装1（参考图）.jpg"]
📸 编码后URL: ["https://.../%E8%BD%AF%E8%A3%851%EF%BC%88%E5%8F%82%E8%80%83%E5%9B%BE%EF%BC%89.jpg"]

如果看到这个日志，说明URL编码成功。

2. 检查vision参数

确认AI调用时启用了vision：

{
  model: 'fmode-1.6-cn',
  max_tokens: 8000,
  vision: true  // ✅ 必须有这个
}

3. 检查AI返回内容

如果AI仍然返回"无法获取图片内容"，检查：

1. 图片URL是否可访问

   • 在浏览器中直接打开图片URL
   • 确认不需要登录或特殊权限

2. 图片格式是否支持

   • 建议使用JPG、PNG格式
   • 避免使用HEIC、WebP等特殊格式

3. 图片大小是否合适

   • 建议1-10MB之间
   • 太小（<100KB）可能分辨率不足
   • 太大（>50MB）可能超时

⚠️ 常见错误和解决方案

错误1：AI返回"无法获取图片"

可能原因：

• vision参数未设置
• 图片URL编码错误
• 图片URL需要鉴权

解决方案：

1. 确认已添加vision: true
2. 检查编码后的URL是否正确
3. 确认图片URL是公开可访问的

错误2：AI分析结果很短或很模糊

可能原因：

• 图片分辨率太低
• 图片内容不清晰
• 提示词不够详细

解决方案：

1. 上传高清图片（至少1920x1080）
2. 确保图片内容清晰可见
3. 在"需求描述"中补充更多信息

错误3：URL编码后仍然无法访问

可能原因：

• 存储服务对编码URL支持有问题
• 需要特殊的鉴权头

备选方案： 将图片转为base64格式传递（适用于小图片）：

// 获取图片blob
const response = await fetch(imageUrl);
const blob = await response.blob();

// 转为base64
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
  const base64 = reader.result as string;
  // 使用base64传递给AI
};

📝 文件修改清单

文件	修改内容	行数
design-analysis-ai.service.ts	添加URL编码逻辑	46-58
design-analysis-ai.service.ts	启用vision参数	86
design-analysis-ai.service.ts	添加图片访问错误检测	110-119

✅ 验证清单

修复后请验证：

• 上传包含中文文件名的图片
• 控制台显示编码前后的URL
• AI返回真实的分析内容（不是模板）
• 简洁摘要包含具体的空间类型、风格、色调
• 完整分析内容≥800字
• 分维度查看中每个维度都有内容

🎉 预期效果

修复前

AI返回：
"由于未获取到实际图片内容，无法进行基于视觉信息的设计分析"

简洁摘要：
"整体设计基于图片实际内容分析"

修复后

AI返回：
"一、空间定位与场景属性
这是一个典型的客餐厅一体化空间，整体呈现现代法式风格...
（完整的8维度分析，共1500字）"

简洁摘要：
"客餐厅一体化 | 现代+法式 | 暖色系、暖灰 | 温馨、精致 | 主要材质：护墙板、木材、大理石"

🔗 相关文档

• AI分析结果显示问题修复
• AI分析使用指南

---

修复日期: 2025-11-27
修复人: 开发团队
优先级: 🔴 高（阻塞功能）