# chroma-gui **Repository Path**: magic_dragon/chroma-gui ## Basic Information - **Project Name**: chroma-gui - **Description**: 一个简洁美观的 Chroma 向量数据库可视化管理工具,帮助开发者在开发调试阶段快速查看和管理向量数据库中的数据。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2026-06-22 - **Last Updated**: 2026-06-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Chroma GUI - Chroma 向量数据库可视化管理工具

Chroma Vector Database GUI Manager

ChromaDB · Vector Database · GUI · Vector Search

--- 一个简洁美观的 Chroma 向量数据库可视化管理工具,帮助开发者在开发调试阶段快速查看和管理向量数据库中的数据。 > 🔍 **Search keywords**: Chroma GUI, ChromaDB GUI, Chroma manager, ChromaDB manager, ChromaDB admin, vector database GUI, vector database visualization, embedding visualization, ChromaDB tool, ChromaDB client, vector search tool, RAG tool, 向量数据库管理, 向量数据库可视化, Chroma 可视化, ChromaDB 可视化, Chroma 调试工具 ## ✨ 功能特性 - 📝 **多配置管理** - 支持创建、编辑、删除多个数据库配置,配置持久化保存 - 🔌 **连接测试** - 保存配置前可测试连接是否可用,避免无效配置 - 📦 **集合管理** - 浏览、创建、删除集合,查看集合详情和 HNSW 索引配置 - 📄 **文档 CRUD** - 添加、编辑、删除文档,支持元数据和向量数据 - 🔍 **向量搜索** - 传入查询向量执行相似度搜索,查看距离分数和排名 - 🎛️ **元数据过滤** - 通过 JSON 条件筛选文档,支持 ChromaDB 全部过滤操作符 - 📑 **分页浏览** - 文档列表分页显示,支持 10/20/50/100 条/页 - 🌙 **暗色主题** - 支持亮色/暗色主题切换,偏好自动保存 - 🌍 **国际化** - 支持中文/英文切换,语言偏好自动保存 - 🚀 **独立运行** - 编译后单个可执行文件,无需安装任何依赖 - 🌐 **自动打开浏览器** - 启动后自动打开浏览器访问,双击即可使用 - 🔒 **CORS 代理** - 内置 API 代理,无需担心跨域问题 ## 📸 预览截图 ![主界面 - 集合列表与文档浏览](img/img.png) ![集合详情 - HNSW 索引配置](img/img_1.png) ![暗色主题 - 深色模式](img/img_2.png) ## 🌐 English Description A lightweight and beautiful GUI management tool for [Chroma](https://www.trychroma.com/) vector database (formerly ChromaDB). Designed for developers to quickly inspect, manage, and debug vector data during development. **Key Features:** Multi-config management, connection testing, collection CRUD, document CRUD, vector similarity search, metadata filtering, pagination, dark theme, i18n (Chinese/English), single binary with zero dependencies, auto-open browser, built-in CORS proxy. ### 下载使用 前往 [Releases](../../releases) 页面下载对应平台的可执行文件: | 平台 | 文件 | 使用方式 | |------|------|---------| | Windows | `chroma-gui-windows-amd64.exe` | 双击运行 | | macOS (Intel) | `chroma-gui-darwin-amd64` | `./chroma-gui` | | macOS (Apple Silicon) | `chroma-gui-darwin-arm64` | `./chroma-gui` | | Linux | `chroma-gui-linux-amd64` | `./chroma-gui` | ### 从源码编译 ```bash # 编译 go build -o chroma-gui . # 运行(默认端口 8888) ./chroma-gui # 指定端口运行 ./chroma-gui -port 9000 # 指定监听地址和端口 ./chroma-gui -host 127.0.0.1 -port 9000 ``` 一次性编译多平台版本: ```bash chmod +x build.sh ./build.sh ``` ## 📖 使用说明 1. **新建配置** - 点击「+ 新建配置」,填写 Host/Port/Tenant/Database,可先测试连接再保存 2. **连接数据库** - 在配置下拉框中选择配置,自动连接并加载集合列表 3. **创建集合** - 点击「+ 创建集合」,输入名称并选择距离函数(L2/Cosine/IP) 4. **浏览文档** - 点击集合名称,右侧面板分页显示文档内容 5. **编辑文档** - 悬停文档卡片,点击 ✏️ 按钮编辑 6. **删除文档** - 悬停文档卡片,点击 🗑️ 按钮删除 7. **向量搜索** - 点击「🔍 搜索」,切换到「向量搜索」标签,粘贴查询向量 JSON 数组,设置返回数量,执行搜索 8. **元数据过滤** - 点击「🔍 搜索」,切换到「元数据过滤」标签,输入 JSON 过滤条件,如 `{"category": "tech"}` 或 `{"score": {"$gt": 80}}` 9. **切换主题** - 点击工具栏 🌙/☀️ 按钮切换暗色/亮色主题 10. **切换语言** - 点击工具栏 EN/中 按钮切换英文/中文 ## 🛠️ 技术栈 - **Go 1.21+** - 服务端 + 静态文件嵌入 + API 代理 - **原生 JavaScript (ES6+)** - 前端逻辑 - **HTML5 + CSS3** - CSS 变量主题系统 - **LocalStorage API** - 配置/主题/语言持久化 ## 📁 项目结构 ``` . ├── main.go # Go 服务器:静态文件嵌入 + API 代理 + 自动打开浏览器 ├── go.mod # Go 模块文件 ├── build.sh # 多平台编译脚本 ├── img/ # 预览截图和收款码 │ ├── img.png # 主界面截图 │ ├── img_1.png # 集合详情截图 │ ├── img_2.png # 暗色主题截图 │ └── Payment_code.jpg # 赞赏码 ├── web/ │ ├── index.html # 主页面 │ ├── main.js # 前端逻辑(i18n/主题/CRUD/分页/搜索) │ └── styles.css # 样式文件(CSS 变量主题系统) └── .gitignore ``` ## ⚠️ 注意事项 - 确保 ChromaDB 服务已启动 - 配置信息保存在浏览器 LocalStorage 中 - 删除集合/文档操作不可恢复,请谨慎操作 - Go 版本需要 1.21 或更高版本(使用了 embed 特性) ## ☕ 支持项目 如果这个工具对你有帮助,欢迎请我喝杯咖啡 ☕,支持开源项目持续维护和更新! ![赞赏码](img/Payment_code.jpg) 如果觉得有用,也请给个 ⭐ Star,让更多人看到! ## 📄 许可证 MIT License