AI图片访问问题深度调试指南

🔍 问题现象

AI返回模板内容：

（注：由于未接收到实际图片内容，无法进行基于视觉信息的精准分析。
根据系统提示，需严格基于图片实际内容展开分析，但当前缺少核心视觉素材...）

📋 已实施的修复措施

1. ✅ 创建ProjectFile记录

文件: stage-requirements.component.ts (lines 3320-3379)

功能：上传成功后自动创建ProjectFile记录

const ProjectFile = Parse.Object.extend('ProjectFile');
const projectFile = new ProjectFile();

projectFile.set('project', { __type: 'Pointer', className: 'Project', objectId: this.projectId });
projectFile.set('name', file.name);
projectFile.set('url', uploadedFile.url);
projectFile.set('type', file.type);
projectFile.set('size', file.size);
projectFile.set('extension', fileExt);
projectFile.set('category', 'ai_design_reference'); // 标记类别

if (this.aiDesignCurrentSpace?.id) {
  projectFile.set('product', { __type: 'Pointer', className: 'Product', objectId: this.aiDesignCurrentSpace.id });
  projectFile.set('data', {
    spaceId: this.aiDesignCurrentSpace.id,
    spaceName: this.aiDesignCurrentSpace.name,
    uploadedFor: 'ai_design_analysis',
    uploadedAt: new Date().toISOString()
  });
}

await projectFile.save();

控制台日志：

💾 ProjectFile记录已创建: xyzabc123

2. ✅ 改用completionJSON

文件: design-analysis-ai.service.ts (lines 74-175)

原因：项目中成功使用vision的唯一方式是completionJSON，而不是FmodeChatCompletion

const result = await completionJSON(
  prompt,
  '', // 不使用JSON schema
  undefined, // 不使用流式回调
  2, // 重试次数
  {
    model: this.AI_MODEL,
    vision: true,
    images: encodedImages, // 图片URL数组
    max_tokens: 8000
  }
);

3. ✅ URL编码

文件: design-analysis-ai.service.ts (lines 46-58)

功能：处理中文文件名

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步：验证图片上传成功

控制台应显示：

📤 准备上传文件: test.jpg, 大小: 2.5MB
📂 上传路径: ai-design-analysis/iKvYck89zE
上传进度: 100%
✅ 文件上传成功: https://file-cloud.fmode.cn/.../test.jpg
💾 ProjectFile记录已创建: abc123xyz

如果没有显示"ProjectFile记录已创建"：

检查Parse服务器连接
检查项目ID是否有效
查看控制台是否有"创建ProjectFile记录失败"错误

第2步：验证图片URL可访问

手动测试：

复制控制台中的图片URL
在浏览器新标签页打开
应该能直接看到图片（不需要登录）

如果无法访问：

图片URL需要公开访问权限
检查OBS/存储服务的访问控制设置
可能需要配置CORS

第3步：验证AI调用参数

控制台应显示：

🤖 调用豆包1.6模型...
📸 原始图片URL: ["https://file-cloud.fmode.cn/.../test.jpg"]
📸 编码后URL: ["https://file-cloud.fmode.cn/.../%E6%B5%8B%E8%AF%95.jpg"]
📸 图片数量: 1
🚀 开始调用completionJSON进行vision分析...

检查图片URL列表：

不应该是空数组 []
不应该是本地blob URL blob:http://...
应该是完整的HTTP/HTTPS URL

第4步：检查AI返回内容

正常情况：

✅ AI分析完成，原始内容长度: 1523
📝 AI返回内容预览: 一、空间定位与场景属性...

异常情况：

❌ AI无法访问图片！
🔍 AI返回的完整内容: （注：由于未接收到实际图片内容...
🔍 图片URL列表: [...]

🚨 可能的根本原因

原因1：图片URL需要身份验证

问题：AI服务无法访问需要登录的URL

解决方案：

检查存储服务配置，确保图片URL公开可访问
或者：将图片转换为base64传递（适用于小图片）

验证方法：在浏览器隐身模式中打开图片URL，应该能直接看到图片

原因2：completionJSON不支持URL方式传图

问题：completionJSON可能只支持base64图片

测试方案：修改为base64传递

// 将图片转换为base64
async function urlToBase64(url: string): Promise<string> {
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result as string);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
}

// 在AI服务中使用
const base64Images = await Promise.all(
  encodedImages.map(url => urlToBase64(url))
);

const result = await completionJSON(
  prompt,
  '',
  undefined,
  2,
  {
    model: this.AI_MODEL,
    vision: true,
    images: base64Images, // 使用base64而不是URL
    max_tokens: 8000
  }
);

原因3：fmode-ng版本问题

问题：当前版本的completionJSON可能不支持vision或images参数

验证方法：

检查fmode-ng版本
查看官方文档确认vision支持
尝试升级到最新版本

原因4：AI模型不支持vision

问题：fmode-1.6-cn模型可能不支持多模态

解决方案：

确认模型支持vision能力
尝试使用其他多模态模型（如gpt-4-vision-preview）

💡 临时解决方案

方案1：使用base64传递图片

优点：

不依赖URL访问权限
确保AI能获取到图片内容

缺点：

图片需要先下载到本地
base64字符串很长，可能超出token限制
只适用于小图片（<5MB）

实现：见"原因2"的代码

方案2：使用其他AI服务

如果fmode-ng的vision支持有问题，考虑：

OpenAI GPT-4 Vision
Google Gemini Vision
Claude 3 Vision

📊 完整调试日志示例

成功案例

📤 准备上传文件: 客厅设计.jpg, 大小: 3.2MB
✅ 文件上传成功: https://file-cloud.fmode.cn/project/abc123/客厅设计.jpg
💾 ProjectFile记录已创建: pf_xyz789

🤖 调用豆包1.6模型...
📸 原始图片URL: ["https://file-cloud.fmode.cn/project/abc123/客厅设计.jpg"]
📸 编码后URL: ["https://file-cloud.fmode.cn/project/abc123/%E5%AE%A2%E5%8E%85%E8%AE%BE%E8%AE%A1.jpg"]
🚀 开始调用completionJSON进行vision分析...

✅ AI分析完成，原始内容长度: 2341
📝 AI返回内容预览: 一、空间定位与场景属性

这是一个现代法式风格的客餐厅一体化空间...

失败案例

📤 准备上传文件: 卧室.jpg, 大小: 2.1MB
✅ 文件上传成功: https://file-cloud.fmode.cn/project/abc123/卧室.jpg
💾 ProjectFile记录已创建: pf_xyz456

🤖 调用豆包1.6模型...
📸 原始图片URL: ["https://file-cloud.fmode.cn/project/abc123/卧室.jpg"]
📸 编码后URL: ["https://file-cloud.fmode.cn/project/abc123/%E5%8D%A7%E5%AE%A4.jpg"]
🚀 开始调用completionJSON进行vision分析...

❌ AI无法访问图片！
🔍 AI返回的完整内容: （注：由于未接收到实际图片内容，无法进行基于视觉信息的精准分析...
🔍 图片URL列表: ["https://file-cloud.fmode.cn/project/abc123/%E5%8D%A7%E5%AE%A4.jpg"]

错误信息：AI无法访问图片。可能原因：
1. 图片URL无法被AI服务访问
2. 图片格式不支持
3. 图片过大或损坏

🔄 下一步行动

立即执行

✅ 刷新浏览器，重新上传图片
✅ 查看控制台，确认"ProjectFile记录已创建"
✅ 复制图片URL，在浏览器中测试是否可访问
✅ 查看AI调用日志，确认图片URL被正确传递

如果问题仍存在

🔧 实施base64方案（见"原因2"代码）
🔧 联系fmode-ng开发团队确认vision支持
🔧 尝试使用其他AI服务进行对比测试
🔧 检查网络代理/防火墙设置

长期优化

📦 升级fmode-ng到最新版本
📦 配置OBS/存储服务的CORS和访问权限
📦 实现图片压缩（自动将大图压缩到合适大小）
📦 添加图片格式转换（统一使用JPG）

更新日期: 2025-11-27
状态: 🔧 调试中，等待用户反馈

ai-image-access-debug.md 8.4 KB Historie Surový