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

## 🔍 问题现象

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

## 📋 已实施的修复措施

### 1. ✅ 创建ProjectFile记录
**文件**: stage-requirements.component.ts (lines 3320-3379)

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

```typescript
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`

```typescript
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)

**功能**：处理中文文件名

```typescript
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可访问

**手动测试**：
1. 复制控制台中的图片URL
2. 在浏览器新标签页打开
3. 应该能直接看到图片（不需要登录）

**如果无法访问**：
- 图片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

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

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

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

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

**测试方案**：修改为base64传递
```typescript
// 将图片转换为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参数

**验证方法**：
1. 检查`fmode-ng`版本
2. 查看官方文档确认vision支持
3. 尝试升级到最新版本

### 原因4：AI模型不支持vision

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

**解决方案**：
1. 确认模型支持vision能力
2. 尝试使用其他多模态模型（如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. 图片过大或损坏
```

## 🔄 下一步行动

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

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

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

---

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