ai-chatbot/物体标注功能-集成步骤.md

图片物体智能标注功能 - 集成步骤（剩余工作）

📝 当前进度

✅ 已完成

1. GPU 检测 - 4张 Tesla P40 显卡，CUDA 11.8
2. 后端环境 - Python 虚拟环境、依赖安装完成
3. 模型下载 - Florence-2 正在后台下载（进行中）
4. 前端组件 - ImagePreview 和 PreviewAttachment 已添加标注功能

🔄 进行中

• Florence-2 模型下载（后台运行）
• 查看进度：ssh root@156.225.27.52 "tail -f /var/www/ai-chatbot-backend/logs/model_download.log"

---

🔧 剩余集成步骤

步骤 1：修改 MultimodalInput 组件

文件：components/multimodal-input.tsx

需要修改的位置：

1. 添加状态管理（在组件顶部添加）：

// 在组件内部添加
const [annotations, setAnnotations] = useState<Array<{
  imageIndex: number;
  description: string;
  formattedText: string;
}>>([]);

// 添加标注处理函数
const handleAnnotate = (annotation: {
  imageIndex: number;
  description: string;
  formattedText: string;
}) => {
  setAnnotations((prev) => [...prev, annotation]);
  
  // 自动插入到输入框（在当前光标位置或末尾）
  setInput((prev) => {
    const currentValue = prev || "";
    // 如果输入框有内容，在末尾添加空格
    const separator = currentValue ? " " : "";
    return `${currentValue}${separator}${annotation.formattedText}`;
  });
  
  // 可选：添加视觉反馈
  toast.success(`已添加标注：${annotation.description}`);
};

2. 传递 props 到 PreviewAttachment（找到渲染 PreviewAttachment 的地方）：

// 在渲染 attachments 的地方修改
{attachments.map((attachment, index) => (
  <PreviewAttachment
    key={attachment.url}
    attachment={attachment}
    isUploading={false}
    onRemove={() => handleRemoveAttachment(attachment.url)}
    onAnnotate={handleAnnotate}  // 新增
    imageIndex={index + 1}         // 新增（从 1 开始编号）
    draggable={attachments.length > 1}
    onDragStart={(e) => handleDragStart(e, index)}
    onDragEnd={handleDragEnd}
    onDragOver={handleDragOver}
    onDrop={(e) => handleDrop(e, index)}
  />
))}

---

步骤 2：配置 Nginx 代理

文件：/etc/nginx/sites-available/ai-chatbot（服务器上）

添加后端 API 代理：

# 在 server 块中添加
location /api/detect-object {
    proxy_pass http://127.0.0.1:8001/api/detect-object;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
    # 增加超时时间（AI 推理需要时间）
    proxy_connect_timeout 10s;
    proxy_send_timeout 10s;
    proxy_read_timeout 10s;
}

应用配置：

sudo nginx -t
sudo systemctl reload nginx

---

步骤 3：启动 Florence-2 API 服务

等模型下载完成后（检查日志显示"✅ 模型下载完成"），执行：

# SSH 到服务器
ssh -p 5204 root@156.225.27.52

# 启动服务
cd /var/www/ai-chatbot-backend
pm2 start ecosystem.config.js

# 查看日志
pm2 logs florence-api

# 检查状态
pm2 status

# 测试健康检查
curl http://localhost:8001/health

预期响应：

{"status":"ok","model_loaded":true}

---

步骤 4：部署前端

# 本地构建并上传
cd /Users/lanmu/Desktop/ai-chatbot-main
npm run build
pm2 restart ai-chatbot

或使用 SSH 直接在服务器上构建：

ssh -p 5204 root@156.225.27.52 "
  cd /var/www/ai-chatbot && \
  npm run build && \
  pm2 restart ai-chatbot
"

---

步骤 5：测试功能

1. 访问网站：https://ai.yydd.ai

2. 上传测试图片：

   • 选择图片生成模型
   • 上传 2 张包含明显物体的图片

3. 测试标注：

   • 点击第一张图片
   • 点击"定位标注"按钮（Target 图标）
   • 点击图片中的物体
   • 等待识别结果
   • 验证输入框中是否自动填入标注文本

4. 预期结果：

   输入框内容：📍图1: 绿色手提包
   

5. 继续测试第二张图：

   • 点击第二张图片，标注另一个物体
   • 输入框应显示：📍图1: 绿色手提包 📍图2: 红色背包

---

🐛 常见问题排查

问题 1：点击标注按钮无反应

检查：

1. 浏览器控制台是否有错误
2. 后端 API 是否启动：pm2 logs florence-api
3. Nginx 代理是否配置正确：sudo nginx -t

问题 2：识别速度很慢

优化：

1. 确认使用 GPU：检查日志中是否显示"🚀 GPU 加速已启用"
2. 检查 GPU 使用率：nvidia-smi
3. 如果 GPU 未被使用，检查 CUDA_VISIBLE_DEVICES 环境变量

问题 3：识别结果不准确

调整：

1. 提示用户点击物体中心位置
2. 调整裁剪区域大小（florence_service.py 中的 crop_size）
3. 尝试不同的提示词（CAPTION、DENSE_REGION_CAPTION 等）

问题 4：502 Bad Gateway

检查：

1. 后端服务是否正常：pm2 status
2. 查看后端日志：pm2 logs florence-api --lines 50
3. 检查端口 8001 是否被占用：lsof -i :8001

---

📊 性能指标

预期性能（Tesla P40 GPU）

指标	数值
单次识别时间	0.15-0.25 秒
并发处理能力	4-6 QPS
GPU 显存占用	~2GB
CPU 内存占用	~1.5GB

监控命令

# 实时监控 GPU
watch -n 1 nvidia-smi

# 查看 API 日志
tail -f /var/www/ai-chatbot-backend/logs/output.log

# 查看错误日志
tail -f /var/www/ai-chatbot-backend/logs/error.log

# 查看模型下载进度
tail -f /var/www/ai-chatbot-backend/logs/model_download.log

---

🎨 可选增强功能

1. 标注文本样式

在输入框中用特殊样式显示标注文本：

// 可以添加一个组件来渲染标注标签
const AnnotationTag = ({ text, onRemove }: { text: string; onRemove: () => void }) => (
  <span className="inline-flex items-center gap-1 rounded-md bg-blue-500/10 px-2 py-1 text-blue-600">
    <span>{text}</span>
    <button onClick={onRemove} className="hover:text-blue-800">
      ×
    </button>
  </span>
);

2. 标注历史

保存标注历史，允许用户重复使用：

const [annotationHistory, setAnnotationHistory] = useLocalStorage<string[]>(
  "annotation-history",
  []
);

3. 批量标注

允许用户一次标注多个物体，然后一起插入：

const [pendingAnnotations, setPendingAnnotations] = useState<Annotation[]>([]);

const commitAnnotations = () => {
  const text = pendingAnnotations.map(a => a.formattedText).join(" ");
  setInput((prev) => `${prev} ${text}`);
  setPendingAnnotations([]);
};

---

📞 联系支持

如果遇到问题，请检查：

1. 后端日志：pm2 logs florence-api
2. 前端控制台
3. Nginx 错误日志：sudo tail -f /var/log/nginx/error.log

---

文档版本: v1.0
更新日期: 2025-12-15
作者: AI Chatbot 开发团队