一个基于 Qdrant 向量数据库和 Vision Transformer (ViT) 模型的智能图像相似性搜索应用。用户可以上传图片，系统会自动找到数据库中最相似的图片。

• 🖼️ 智能图像搜索: 基于深度学习的图像特征提取和相似性匹配
• 🚀 高性能向量搜索: 使用 Qdrant 向量数据库实现毫秒级搜索
• 🎨 现代化 UI: 基于 React + TypeScript + Tailwind CSS 的响应式界面
• 📱 拖拽上传: 支持点击选择和拖拽上传图片
• 📊 相似度评分: 显示每张相似图片的匹配度百分比
• 🔄 实时搜索: 上传即搜，无需等待

• React 18 - 现代化前端框架
• TypeScript - 类型安全的 JavaScript
• Tailwind CSS - 实用优先的 CSS 框架
• Lucide React - 精美的图标库
• Axios - HTTP 客户端
• Create React App - 零配置构建工具

• Flask - 轻量级 Python Web 框架
• Qdrant - 高性能向量数据库
• Transformers - Hugging Face 机器学习库
• Vision Transformer (ViT) - Google 的图像识别模型
• PyTorch - 深度学习框架
• Pillow - Python 图像处理库

• Node.js >= 16.0.0
• Python >= 3.8
• Qdrant 向量数据库
• 内存 >= 4GB (推荐 8GB+)

git clone <repository-url>
cd qdrantqdrant-demo

使用 Docker 运行 Qdrant：

docker run -p 6333:6333 qdrant/qdrant

或者参考 Qdrant 官方文档 进行安装。

# 进入后端目录
cd backend

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境
# Windows:
venv\Scripts\activate
# macOS/Linux:
source venv/bin/activate

# 安装依赖
pip install -r requirements.txt

# 启动后端服务
python app.py

后端服务将在 http://localhost:5001 启动。

# 在项目根目录安装依赖
npm install

# 启动前端开发服务器
npm start

前端应用将在 http://localhost:3000 启动。

1. 打开浏览器访问 http://localhost:3000
2. 点击 "初始化数据库" 按钮
3. 等待系统处理示例图片并建立向量索引

1. 初始化: 首次使用时点击"初始化数据库"按钮，系统会自动处理示例图片
2. 上传图片: 点击上传区域选择图片，或直接拖拽图片到上传区域
3. 搜索相似图片: 上传完成后点击"搜索相似图片"按钮
4. 查看结果: 系统会显示最相似的图片及其相似度评分

qdrantqdrant-demo/
├── backend/                 # 后端 Flask 应用
│   ├── app.py              # 主应用文件
│   ├── requirements.txt    # Python 依赖
│   ├── sample_images/      # 示例图片
│   ├── uploads/           # 上传的图片
│   └── venv/              # Python 虚拟环境
├── src/                    # 前端 React 应用
│   ├── components/         # React 组件
│   │   └── ui/            # UI 组件库
│   ├── lib/               # 工具函数
│   ├── App.tsx            # 主应用组件
│   └── index.tsx          # 应用入口
├── public/                 # 静态资源
├── snapshot/              # 项目截图
├── package.json           # Node.js 依赖
└── README.md             # 项目说明

初始化向量数据库并处理示例图片

响应:

{
  "status": "initialized"
}

搜索相似图片

请求: multipart/form-data 包含图片文件

响应:

{
  "similar_images": [
    {
      "id": "uuid",
      "score": 0.95,
      "url": "/uploads/filename.jpg"
    }
  ]
}

获取上传的图片文件

1. 特征提取: 使用 Google 的 Vision Transformer (ViT) 模型将图片转换为 768 维向量
2. 向量存储: 将图片特征向量存储在 Qdrant 向量数据库中
3. 相似性搜索: 使用余弦相似度计算查询图片与数据库中图片的相似性
4. 结果排序: 按相似度评分降序返回最相似的图片

• QDRANT_HOST: Qdrant 数据库主机地址 (默认: localhost)
• QDRANT_PORT: Qdrant 数据库端口 (默认: 6333)
• FLASK_PORT: Flask 服务端口 (默认: 5001)

• ViT 模型: google/vit-base-patch16-224-in21k
• 向量维度: 768
• 距离度量: 余弦相似度
• 搜索结果数量: 5 (可在代码中调整)

• GPU 加速: 自动检测并使用 CUDA GPU 加速模型推理
• 向量索引: Qdrant 提供高效的向量索引和搜索
• 图片预处理: 自动转换图片格式确保兼容性
• 缓存机制: 前端组件状态管理优化用户体验

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

• Qdrant - 高性能向量数据库
• Hugging Face - 预训练模型和工具
• Google Research - Vision Transformer 模型
• Tailwind CSS - CSS 框架
• Lucide - 图标库

⭐ 如果这个项目对你有帮助，请给它一个星标！