• 文章
  • Google 2023 年编程之夏 - 用于可视化和探索的 Web UI
返回生态系统

Google 2023 年编程之夏 - 用于可视化和探索的 Web UI

Kartik Gupta

·

2023年8月28日

Google Summer of Code 2023 - Web UI for Visualization and Exploration

简介

大家好!我叫 Kartik Gupta,我很高兴能分享我作为 Google Summer of Code 2023 项目一部分的编码之旅。今年夏天,我有幸为 Qdrant(一个向量搜索引擎)从事一个名为“用于可视化和探索的 Web UI”的激动人心的项目。在本文中,我将带您了解我在这段丰富的编码之旅中的经验、挑战和成就。

项目概览

Qdrant 是一个强大的向量搜索引擎,广泛用于相似性搜索和聚类。然而,它缺乏一个用户友好的基于 Web 的 UI 用于数据可视化和探索。我的项目旨在通过开发一个基于 Web 的用户界面来弥补这一差距,该界面允许用户轻松地与他们的向量数据交互和探索。

里程碑和成就

该项目分为六个里程碑,每个里程碑都侧重于 Web UI 开发的一个特定方面。让我们回顾一下它们以及我在编码期间取得的成就。

1. 在 Figma 上设计一个友好的 UI

我首先在 Figma 上设计用户界面,确保它易于使用、视觉上吸引人,并且在不同的设备上具有响应性。我专注于可用性和可访问性,以创建无缝的用户体验。(Figma 设计

2. 构建布局

布局路由作为登录页面,提供了应用程序功能的概述以及到其他路由的导航链接。

3. 创建一个视图集合路由

此路由允许用户查看应用程序中可用的集合列表。用户可以点击一个集合以查看更多详细信息,包括与之关联的数据和向量。

Collection Page

集合页面

4. 开发一个具有“查找相似”功能的数据页面

我实现了一个数据页面,用户可以在其中搜索数据并使用推荐 API 查找相似数据。推荐 API 根据所选数据的 ID 建议相似数据,提供了有价值的见解。

Points Page

点页面

5. 开发查询编辑器页面库

这个里程碑涉及创建一个查询编辑器页面,允许用户以自定义语言编写查询。编辑器提供了语法高亮、自动完成和错误检查功能,以实现无缝的查询编写体验。

Query Editor Page

查询编辑器页面

6. 开发一个用于可视化向量数据点的路由

这通过将 n 维向量降维到 2 维点来实现,并显示它们各自的负载。

visualization-page

向量可视化页面

挑战与学习

在整个项目过程中,我遇到了一系列挑战,这些挑战锻炼了我的工程能力,并提供了独特的成长机会。从掌握新的库和技术到确保用户界面 (UI) 既美观又用户友好,每一个障碍都成为我作为开发人员提升技能的垫脚石。然而,每一个挑战都提供了作为开发人员学习和成长的机会。我获得了向量搜索和降维技术的宝贵经验。

对我来说最重要的学习是有效项目管理的重要性。设定切合实际的时间表,与导师协作,并积极主动地获取反馈,使我能够高效地完成里程碑。

技术学习与技能发展

这次旅程最重要的一方面是深入研究向量搜索和降维技术的复杂世界。这些领域对我来说以前是陌生的,需要严谨的学习和探索。学习如何有效地处理大量数据并通过这些技术提取有意义的见解既具有挑战性又非常有益。

有效的项目管理

毫无疑问,最有影响力的教训是有效项目管理的艺术。我很快就掌握了设定切合实际的时间表和目标的重要性。与导师密切协作并保持积极主动的沟通被证明是不可或缺的。这种方法使我能够驾驭复杂的开发过程并成功实现项目的里程碑。

克服技术挑战

控制台中的自动完成功能

在控制台中处理自动完成功能时出现了一个特别有趣的挑战。事实证明,找到解决方案很困难,直到一个意想不到的方向取得了突破。我的导师 Andrey 提出创建一个独立的模块,该模块可以基于 OpenAPI 为我们的自定义语言提供自动完成支持。这种巧妙的方法不仅解决了问题,还展示了协作解决问题的力量。

使用 Web Workers 进行优化

向量降维的高处理需求带来了另一个重大挑战。最初,这项任务给浏览器带来了压力并导致了性能问题。解决方案以 web workers 的形式出现——一个独立的处理实例,减轻了浏览器的压力。然而,一个新的问题出现了:如何有效地终止这些 worker?在我的导师的宝贵见解下,我对 web worker 的动态有了更深入的理解,并成功应对了这一挑战。

控制台集成复杂性

将控制台交互集成到应用程序中带来了多方面的挑战。在 Monaco 中编写自定义语言,解析文本以发出 API 请求,以及同步整个过程都需要对细节一丝不苟。克服这些障碍证明了真实世界工程项目的复杂性。

Codelens 多重性问题

在开发过程中出现了一个意想不到的问题:codelen(运行按钮)多次注册,导致了意外的行为。这个小插曲强调了即使是看似简单的功能,也需要彻底的测试和调试的重要性。

关键学习点

在这些挑战中,我获得了宝贵的见解,极大地丰富了我的工程能力。

向量降维技术:深入研究向量降维技术领域,让我对如何高效处理和解释数据有了深刻理解。这些知识为未来开发数据驱动型应用程序开辟了新途径。

Web Workers 效率:掌握 Web Workers 的复杂性不仅解决了性能问题,还扩展了我的优化策略储备。这种新获得的技能无疑将在未来的各种项目中发挥作用。

Monaco Editor 和 UI 框架:广泛使用 Monaco Editor、Material-UI (MUI) 和 Vite 丰富了我对这些基本工具的熟悉程度。我磨练了将复杂 UI 组件无缝集成到应用程序中的技能。

改进领域和未来增强

在反思这段转型之旅时,我认识到几个可以改进和未来增强的领域。

  1. 增强自动完成:进一步完善自动完成功能,以支持 JSON 结构中的键值建议,可以极大地增强用户体验。

  2. 控制台中的错误检测:将控制台的错误检查器与 OpenAPI 集成可以提高其识别错误的准确性,并提供精确的改进建议。

  3. 扩展向量可视化:探索其他可视化方法并优化其性能可以提升向量可视化路由的实用性。

结论

参加 Google Summer of Code 2023 并从事“用于可视化和探索的 Web UI”项目是一次非常有益的经历。我很感激有机会为 Qdrant 做出贡献,并开发一个用于向量数据探索的用户友好界面。

我要感谢我的导师和整个 Qdrant 社区在整个旅程中给予的支持和指导。这次经历不仅提高了我的编码技能,也培养了我对 Web 开发和数据分析更深的热情。

随着我的编码之旅超越这个项目,我期待将在这里获得的知识和经验应用到未来的事业中。我很高兴看到 Qdrant 如何随着新开发的 Web UI 发展,以及它如何积极影响全球用户。

感谢您加入我的编码冒险,我希望将来能分享更多激动人心的项目!编程愉快!

此页面有用吗?

感谢您的反馈!🙏

很抱歉听到这个消息。😔 您可以在 GitHub 上编辑此页面,或创建一个 GitHub 问题。