Qdrant 入门系列05 – Web UI 全面指南:Console、可视化、Graph 与数据集

Qdrant 的内置 Web UI 位于与 REST API 相同端口的 /dashboard,可完成许多通常需要脚本的工作:列出集合、交互执行 REST 请求、导入示例数据、浏览载荷与图片、绘制 t-SNE/UMAP/PCA 散点图、查看相似度图、运行教程,以及生成受限 JWT 令牌。对于模糊语义意图,稠密检索与传统关键词检索的工作方式不同,理解这一点有助于使用这些面板。

本文逐一介绍 Web UI 面板。截图来自一个加载了 Midjourney Styles、Web Documentation 和 Prefix Cache 官方数据集、约含 187,000 个点的真实实例;不是界面效果图。路由和行为均以原文测试时随 Qdrant 容器提供的界面为准。

原文于 2026 年 5 月在 Ubuntu 24.04.4 LTS、Qdrant 1.18.1 和 Web UI 0.2.12 上测试,示例数据来自官方快照服务。

打开 Web UI

Qdrant 启动后,仪表盘使用 REST API 的 HTTP 端口。默认路径为 /dashboard,首次访问会跳转到 Welcome 页面:

http://localhost:6333/dashboard

如果通过 QDRANT__SERVICE__API_KEY 设置了密钥,界面首次加载时会要求输入,并保留在当前浏览器会话中。各操作系统安装方法见本系列的 Ubuntu、Rocky Linux/AlmaLinux、Debian 安装篇;下文假定服务已可通过 6333 端口访问。

先检查服务:

curl -s http://localhost:6333/ | jq .
curl -s http://localhost:6333/healthz

应看到版本 JSON 和 healthz check passed。两项通过后,仪表盘通常也能正常加载。

Welcome 欢迎页面

Welcome 是新部署的入口,包含创建首个集合的快速入门卡片、跳转到 Datasets 的 Load Sample Data,以及从基础过滤到混合检索、多向量和 ColBERT 的交互教程。

Qdrant Web UI 欢迎页面

侧边栏从上到下是 Welcome、Console、Collections、Tutorial、Datasets、Access Tokens。未设置服务 API 密钥时,Access Tokens 不可用;左下角显示 Qdrant 版本,便于确认当前界面对应的服务版本。

Collections:集合运行状态

Collections 列出集群中的集合、健康状态、近似点数、段数、分片数、向量配置及操作菜单。Create Collection 打开预填最小配置的 JSON 编辑器;Upload Snapshot 可从浏览器上传备份并恢复。

Qdrant Web UI 集合列表

列表点数是近似值,更新可能滞后。需要精确计数时,进入集合信息页核对相关字段,或直接调用精确计数 API:

curl -s http://localhost:6333/collections/midlib | jq '.result.points_count'

颜色与 API 状态对应:绿色表示健康,黄色通常表示优化中,红色表示故障。鼠标悬停状态徽标可查看具体状态;0.2.12 增加了相关提示,帮助识别复制和分片重平衡。

Datasets:导入官方示例快照

Datasets 从官方快照服务读取清单,展示大小、维度、距离度量、嵌入模型和向量总数。点击 Import 后,界面调用快照恢复 API,集合随后出现在 Collections。

Qdrant 示例数据集导入面板

原文测试时有三个示例:Qdrant Web Documentation(18,828 个向量,384 维 MiniLM)、Prefix Cache(163,075 个向量,384 维 MiniLM,磁盘存储)和 Midjourney Styles(5,417 个向量,512 维 CLIP,载荷含图片地址)。CLIP 示例适合测试 Graph 和集合详情中的图片预览。

同样的恢复操作也可通过 REST 执行:

curl -s -X PUT http://localhost:6333/collections/midlib/snapshots/recover \
  -H 'Content-Type: application/json' \
  --data '{"location":"https://snapshots.qdrant.io/midlib-v1.16.0.snapshot"}'

它与 Import 按钮执行相同调用,适合在 CI 中通过脚本准备测试数据。

集合详情:九个标签页

点击集合名称后,默认打开 Points。顶部依次提供 Points、Info、Optimizations、Memory、Cluster、ANN Recall、Snapshots、Visualize 和 Graph,各自展示相关 API 数据。

Qdrant 集合数据点详情

Points 每页显示 10 条记录,载荷使用高亮 JSON。载荷字段名为 image_url 时,界面可加载对应图片。每行提供三项操作:Copy 复制向量数组,Open Graph 以该点为中心打开相似度图,Find Similar 用该点的向量进行搜索。

Info 展示分片数量、向量参数、载荷结构和已索引向量数量;Optimizations 与 Memory 展示优化合并状态及内存统计;Cluster 展示复制集合在节点间的分布;ANN Recall 可针对已知真实近邻进行召回测试。Snapshots 将创建、下载、恢复快照集中在同一处,0.2.12 中原先的 Take Snapshot 入口也调整到了这里。

Console:REST 交互环境

Console 基于 Monaco 编辑器,支持 GET、PUT、POST、DELETE 和集合路径语法高亮。每个命令块上方都有 RUN、BEAUTIFY、DOCS,右侧格式化显示 JSON 响应;同一缓冲区可放多个独立命令。

Qdrant REST API Console

编辑内容保存在浏览器本地存储,关闭再打开标签后仍可继续使用。DOCS 可定位对应 API 说明,减少在界面、文档和 curl 之间切换。

加载数据后,可以执行带载荷过滤的 scroll 查询:

POST collections/midlib/points/scroll
{
  "limit": 5,
  "with_payload": true,
  "with_vector": false
}

点击 RUN,右侧应返回前五个点及其载荷。Console 与 SDK 使用相同认证和 API,因此验证成功的操作可以转写为应用调用。

Visualize:t-SNE、UMAP 与 PCA

Visualize 从集合抽样,在浏览器中降维并绘制二维散点。右侧代码面板可设置抽样数量、载荷过滤、分类着色字段 color_by、命名向量和算法 TSNE/UMAP/PCA。默认使用 500 个点和 t-SNE,以便观察结构且避免浏览器负担过大。

Midjourney Styles 数据的 t-SNE 散点图

图中是 500 个 Midjourney Styles 向量的实际投影。悬停时,右侧 Data Panel 显示完整载荷和可用的图片预览。图表支持拖拽缩放;修改 JSON 后再次点击 RUN 即可重新计算。

常用方法是按分类字段着色,观察模型是否将类别分开。例如文档集合可按来源路径分类,比较操作文档与概念文档的分布:

{
  "limit": 1000,
  "algorithm": "UMAP",
  "color_by": {
    "payload": "section"
  }
}

在原文环境中,同样样本的 UMAP 比 t-SNE 快,PCA 最快但只取前两个主成分。计算在浏览器执行,超过一万个点的样本可能造成卡顿,默认 500 点是有意选择的。

Graph:探索相似度邻域

Graph 接受起始点 ID,绘制最近邻关系。点击节点会以该点为新中心重新绘图,右侧显示当前点的载荷和图片。

Qdrant Graph 相似度关系图

图中红色中心是 Midjourney Styles 的点 0,对应艺术家 Chris Dyer;周围是五个最相似风格向量。这个面板可用于理解模型的相似判断,排查语义相关条目为何未进入 top-K。

默认每个节点取五个近邻,深度一跳。可修改 Code 面板扩大范围:

{
  "limit": 8,
  "tree": true,
  "using": "default"
}

更多节点与更深层数会让图变得拥挤,超过约 50 个节点后尤其明显。大规模邻域更适合通过 API 导出到专门图工具。

Interactive Tutorial:运行真实查询学习

Tutorial 提供九个引导教程,将 MDX 文字与嵌入式 Console 结合。RUN 按钮会向当前真实集群发请求,练习与讲解位于同一页。

Qdrant 交互教程目录

入口包括连接项目或加载示例的 Quickstart、Load Sample Data,以及 Filtering Beginner、Filtering Advanced、Filtering Full Text、Multivector Search、Sparse Vector Search、Hybrid Search 等向量搜索教程。教程页包含集合创建、写入和查询步骤。

Qdrant 基础过滤教程

基础过滤教程创建 terraforming 集合,写入 12 个带有 land、type、color、life、presence、humidity 字段的数据点,再演示 must、should、must_not。数据量较小,结果可在一屏展示,便于理解条件的作用。

本系列过滤篇进一步介绍 keyword、integer、float、geo、datetime、text 等载荷索引、嵌套对象过滤,以及 score_threshold 与量化的取舍。

Access Tokens:生成受限 JWT

Access Tokens 使用服务 API 密钥签发 JWT。可以选择 Collection Access 设置集合级读写权限、Global Access 设置全局只读或管理权限,或通过 Managed Access 自定义 claims。过期时间可设为永不过期或指定日期,Token Validator 可加入载荷字段相等条件。

Qdrant Access Tokens JWT 生成器

未设置服务密钥时,没有可用于签名的密钥,因此入口不可用。启动时设置 QDRANT__SERVICE__API_KEY,刷新页面并输入该密钥后即可使用。签名运算通过浏览器的 Web Crypto API 在本地完成;连接服务的请求仍需按正常认证流程使用凭据。

JWT 访问控制和密钥轮换属于安全专题。轮换签名密钥会影响已有令牌,应按照实际验证策略安排更新。

上线前需要了解的问题

没有服务 API 密钥时,Access Tokens 不可用。 默认容器未认证;若没有设置 QDRANT__SERVICE__API_KEY,面板可能仍显示,但签名无法完成。设置变量、重启容器并刷新页面。

大样本可视化可能冻结标签页。 t-SNE/UMAP 在浏览器中计算,过度增加 limit 可能引起多秒卡顿。优先用过滤条件缩小样本,而不是不断增大数量。

图片预览依赖 image_url 字段名。 Graph 和集合详情按该名称识别图片。使用 img、thumbnail、asset_url 等名字时可能不显示;可在写入时调整字段,或接受不预览。

教程会创建持久化集合。 基础过滤创建 terraforming,Quickstart 使用 star_charts。练习结束后它们仍然存在,需要时在 Console 执行对应删除操作,避免列表积累测试数据。

JWT 签名要求浏览器安全上下文。 远程通过不受信任的明文 HTTP 访问仪表盘时,Web Crypto 可能不可用;监听 0.0.0.0 并不等于提供了安全访问。可使用 SSH 本地端口转发,例如 ssh -L 6333:localhost:6333,或在反向代理终止 TLS。

Web UI 路由速查

Web UI 是挂载在 /dashboard 的单页应用,可使用下列路由定位面板:

路由 面板 后端接口
/dashboard#/ 集合列表 GET /collections
/dashboard#/welcome Welcome 静态页面
/dashboard#/console REST 交互环境 任意 REST 操作
/dashboard#/datasets 示例数据集 PUT /collections/{name}/snapshots/recover
/dashboard#/collections/{name} 集合详情 GET /collections/{name}
/dashboard#/collections/{name}/visualize 二维散点 POST /collections/{name}/points/scroll
/dashboard#/collections/{name}/graph 相似度图 POST /collections/{name}/points/search
/dashboard#/tutorial 教程目录 静态 MDX
/dashboard#/tutorial/{slug} 教程页 取决于教程内容
/dashboard#/jwt Access Tokens 浏览器 Web Crypto

教程 slug 使用不带连字符的小写名称:quickstart、loadcontent、filteringbeginner、filteringadvanced、filteringfulltext、multivectors、sparsevectors、hybridsearch、multitenancy。写成 filtering-beginner 等形式可能因路由不匹配显示空白页。

接下来可以学习集合、数据点与载荷的 API 操作。Console 是界面和 SDK 之间的桥梁:应用中要执行的调用,通常可以先在这里验证。

Avatar photo

关于 木子

Email: muzi@vip.rockylinux.cn 微信:VebinLee QQ: 2306867585
Founder of the Rocky Linux Chinese community, MVP、VMware vExpert、TVP, advocate for cloud native technologies, with over ten years of experience in site reliability engineering (SRE) and the DevOps field. Passionate about Cloud Computing、Microservices、CI&CD、DevOps、Kubernetes, currently dedicated to promoting and implementing Rocky Linux in Chinese-speaking regions.
用一杯咖啡支持我们,我们的每一篇[文档]都经过实际操作和精心打磨,而不是简单地从网上复制粘贴。期间投入了大量心血,只为能够真正帮助到您。
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇