lunanting/ai-chatbot

Fork 0

Your Name 6750e85ad4 Harden exposed security-sensitive endpoints

2026-05-23 11:09:03 +08:00

7.3 KiB

Raw Permalink Blame History

图片物体智能标注系统 - 部署状态总结

时间: 2025-12-15
状态: 🟡 90% 完成 - 等待 API 启动完成

✅ 已完成工作

1. 后端开发与部署

✅ 服务器 GPU 检测：4张 Tesla P40，22.4GB 显存
✅ Python 环境：虚拟环境 + 所有依赖
✅ Florence-2 模型：231.4M 参数，已下载
✅ FastAPI 后端代码：完整实现
✅ PM2 配置：使用端口 8002
✅ flash_attn 占位模块：绕过编译问题
✅ GPU 加速：已启用 CUDA

2. 前端开发

✅ ImagePreview 组件：添加定位标注按钮
✅ PreviewAttachment 组件：集成标注功能
✅ 点击检测逻辑：完整实现
✅ 加载状态和错误处理：完成

3. 文档

✅ 完整实施文档
✅ 集成步骤文档
✅ 部署状态总结

🔄 剩余工作（约 20-30 分钟）

步骤 1：等待 API 完全启动（5-10 分钟）

检查服务状态：

ssh -p 5204 root@156.225.27.52 "
  echo '📊 服务状态：' && \
  pm2 list | grep florence && \
  echo '' && \
  echo '📝 最新日志：' && \
  pm2 logs florence-api --lines 20 --nostream && \
  echo '' && \
  echo '🧪 健康检查：' && \
  curl -s http://localhost:8002/health
"

预期响应：

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

步骤 2：配置 Nginx 代理（5 分钟）

ssh -p 5204 root@156.225.27.52

编辑 Nginx 配置：

sudo nano /etc/nginx/sites-available/ai-chatbot

在 server 块中添加：

# Florence-2 物体检测 API
location /api/detect-object {
    proxy_pass http://127.0.0.1:8002/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;
    
    # 增加超时时间
    proxy_connect_timeout 10s;
    proxy_send_timeout 10s;
    proxy_read_timeout 10s;
}

重载 Nginx：

sudo nginx -t && sudo systemctl reload nginx

步骤 3：修改 MultimodalInput 组件（10 分钟）

文件：components/multimodal-input.tsx

查找渲染 PreviewAttachment 的位置（大约在第 300 行附近），修改为：

{attachments.map((attachment, index) => (
  <PreviewAttachment
    key={attachment.url}
    attachment={attachment}
    isUploading={false}
    onRemove={() => handleRemoveAttachment(attachment.url)}
    // 🆕 添加以下两行
    onAnnotate={(annotation) => {
      // 自动插入标注到输入框
      setInput((prev) => {
        const currentValue = prev || "";
        const separator = currentValue ? " " : "";
        return `${currentValue}${separator}${annotation.formattedText}`;
      });
      toast.success(`已添加标注：${annotation.description}`);
    }}
    imageIndex={index + 1}
    // 保留其他 props
    draggable={attachments.length > 1}
    onDragStart={(e) => handleDragStart(e, index)}
    onDragEnd={handleDragEnd}
    onDragOver={handleDragOver}
    onDrop={(e) => handleDrop(e, index)}
  />
))}

步骤 4：部署前端（5 分钟）

cd /Users/lanmu/Desktop/ai-chatbot-main
npm run build

# 上传并重启
sshpass -p "<DEPLOY_SSH_PASSWORD>" ssh -p 5204 root@156.225.27.52 "
  cd /var/www/ai-chatbot && \
  npm run build && \
  pm2 restart ai-chatbot
"

步骤 5：测试功能（5-10 分钟）

访问：https://ai.yydd.ai
上传图片：选择 2 张包含明显物体的图片
测试标注：
- 点击第一张图片
- 点击"定位标注"按钮（Target 图标）
- 点击图片中的物体（如手提包）
- 等待 0.2-0.3 秒
- 验证输入框显示：📍图1: 绿色手提包
继续标注第二张：
- 点击第二张图片
- 标注另一个物体
- 输入框应显示：📍图1: 绿色手提包 📍图2: 红色背包

📊 系统配置

后端 API

端口: 8002
地址: http://localhost:8002
健康检查: http://localhost:8002/health
检测 API: http://localhost:8002/api/detect-object

服务器资源

资源	状态
GPU	4× Tesla P40 (22.4GB 显存)
CUDA	11.8
PyTorch	2.7.1+cu118
Florence-2	231.4M 参数

性能指标（预期）

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

🐛 故障排查

检查 API 是否正常

ssh -p 5204 root@156.225.27.52 "
  # 检查服务状态
  pm2 status
  
  # 查看日志
  pm2 logs florence-api --lines 50
  
  # 测试 API
  curl -X POST http://localhost:8002/api/detect-object \
    -H 'Content-Type: application/json' \
    -d '{
      \"imageUrl\": \"https://example.com/image.jpg\",
      \"clickX\": 100,
      \"clickY\": 100,
      \"imageIndex\": 1,
      \"imageWidth\": 500,
      \"imageHeight\": 500
    }'
"

监控 GPU 使用

watch -n 1 nvidia-smi

查看错误日志

# 后端日志
tail -f /var/www/ai-chatbot-backend/logs/error.log

# Nginx 日志
sudo tail -f /var/log/nginx/error.log

# PM2 日志
pm2 logs florence-api

📝 已知问题

1. 端口 8001 被占用

原因: Qwen3-VL 服务使用了 8001
解决: Florence-2 使用 8002

2. flash_attn 编译失败

原因: 服务器没有 nvcc 编译工具
解决: 使用占位模块，降级到标准注意力机制
影响: 推理速度可能略慢（~10-15%），但功能正常

3. 模型加载时间较长

原因: 首次加载需要下载和初始化
解决: 已完成，后续启动会快很多（~5 秒）

🎉 完成后的使用场景

场景示例

用户操作：
- 上传两张图片：一张红色背包，一张绿色手提包
- 点击第一张图中的"红色背包"
- 系统自动识别并在输入框显示：📍图1: 红色背包
- 点击第二张图中的"绿色手提包"
- 系统自动在输入框追加：📍图2: 绿色手提包
- 用户手动输入"替换"
- 最终消息：将📍图1: 红色背包替换成 📍图2: 绿色手提包
AI 响应：
- 图片生成模型根据标注理解用户意图
- 生成符合要求的图片

📞 联系和支持

查看服务状态

pm2 status
pm2 logs florence-api
nvidia-smi

重启服务

pm2 restart florence-api
pm2 restart ai-chatbot

停止服务

pm2 stop florence-api
pm2 delete florence-api

🔮 未来优化方向

性能优化：
- 编译真正的 flash-attn（需要安装 nvcc）
- 使用模型量化（INT8/FP16）
- 启用模型缓存优化
功能增强：
- 批量标注模式
- 标注历史记录
- 自定义标注样式
- 支持多语言描述
用户体验：
- 添加标注预览
- 支持标注编辑
- 快捷键操作

文档版本: v1.0
最后更新: 2025-12-15 14:20
状态: 🟡 等待 API 启动完成

✅ 下一步操作清单

等待 API 启动完成（检查健康状态）
配置 Nginx 代理
修改 MultimodalInput 组件
部署前端
功能测试

预计剩余时间: 20-30 分钟

7.3 KiB Raw Permalink Blame History Unescape Escape