引言
大家好！我叫 Kartik Gupta，非常高兴能与大家分享我作为 Google 编程之夏 2023 项目一部分的编程之旅。今年夏天，我有幸为 Qdrant（一个向量搜索引擎）完成了一个名为“可视化与探索的 Web UI”的令人兴奋的项目。在这篇文章中，我将带您回顾我在这次充实的编程旅程中的经历、挑战和成就。
项目概览
Qdrant 是一个强大的向量搜索引擎，广泛用于相似性搜索和聚类。然而，它缺乏一个用户友好的、基于 Web 的数据可视化和探索 UI。我的项目旨在通过开发一个基于 Web 的用户界面来弥补这一差距，该界面允许用户轻松地与他们的向量数据交互并进行探索。
里程碑和成就
项目分为六个里程碑，每个里程碑都侧重于 Web UI 开发的一个特定方面。让我们依次回顾每个里程碑以及我在编码期间取得的成就。
1. 在 Figma 上设计友好的 UI
我首先在 Figma 上设计了用户界面，确保它易于使用、视觉吸引力强，并在不同设备上具有响应性。我专注于可用性和可访问性，以创造无缝的用户体验。（ Figma 设计）
2. 构建布局
布局路由作为着陆页，提供了应用程序功能的概览以及指向其他路由的导航链接。
3. 创建查看集合路由
此路由使用户能够查看应用程序中可用的集合列表。用户可以点击集合以查看更多详细信息，包括与其关联的数据和向量。
集合页面
4. 开发具有“查找相似”功能的数据页面
我实现了一个数据页面，用户可以使用推荐 API 搜索数据并查找相似数据。推荐 API 根据所选数据的 ID 建议相似数据，提供有价值的见解。
点页面
5. 开发查询编辑器页面库
这个里程碑包括创建一个查询编辑器页面，允许用户使用自定义语言编写查询。该编辑器提供了语法高亮、自动完成和错误检查功能，以提供无缝的查询编写体验。
查询编辑器页面
6. 开发用于可视化向量数据点的路由
这是通过将n维向量降维到2维点来完成的，并且它们与其相应的负载（payloads）一起显示。
向量可视化页面
挑战与学习
在整个项目中，我遇到了一系列挑战，这些挑战拓展了我的工程能力，并提供了独特的成长机会。从掌握新的库和技术到确保用户界面（UI）既具有视觉吸引力又用户友好，每一个障碍都成为我提升作为开发人员技能的垫脚石。然而，每一个挑战都提供了学习和成长的机会。我获得了向量搜索和降维技术的宝贵经验。
对我来说，最主要的收获是有效项目管理的重要性。设定实际的时间表、与导师协作并积极获取反馈，使我能够高效地完成里程碑。
技术学习与技能发展
这段旅程中最重要的一方面是深入探索向量搜索和降维技术的复杂世界。这些领域对我来说是全新的，需要严谨的学习和探索。学习如何高效地处理大量数据并通过这些技术提取有意义的见解，既具有挑战性，也非常有益。
有效的项目管理
毫无疑问，最具影响力的教训是有效项目管理的艺术。我很快就掌握了设定实际时间表和目标的重要性。与导师密切合作并保持积极沟通被证明是不可或缺的。这种方法使我能够应对复杂的开发过程并成功实现项目的里程碑。
克服技术挑战
控制台中的自动完成功能
在开发控制台中的自动完成功能时，出现了一个特别有趣（intriguing）的挑战。寻找解决方案一直难以捉摸，直到一个意想不到的方向带来了突破。我的导师 Andrey 建议创建一个独立的模块，该模块可以基于 OpenAPI 为我们的自定义语言提供自动完成支持。这种巧妙的方法不仅解决了问题，还展示了协作解决问题的力量。
使用 Web Workers 进行优化
向量降维的高处理需求带来了另一个重大挑战。最初，这项任务给浏览器带来了压力并导致了性能问题。解决方案以 Web Workers 的形式出现——一个独立的进程实例，减轻了浏览器的负担。然而，出现了一个新问题：如何有效地终止这些 Worker？在导师的宝贵见解下，我对 Web Worker 的动态有了更深入的了解，并成功应对了这一挑战。
控制台集成复杂性
将控制台交互集成到应用程序中带来了多方面的挑战。在 Monaco 编辑器中创建自定义语言、解析文本以发起 API 请求，并同步整个过程，这一切都需要对细节一丝不苟。克服这些障碍证明了实际工程工作的复杂性。
Codelens 多重性问题
在开发过程中出现了一个意想不到的问题：codelens（运行按钮）被多次注册，导致了不期望的行为。这个小插曲强调了即使在看似简单的功能中，彻底的测试和调试也非常重要。
主要学习要点
在这些挑战中，我获得了宝贵的见解，这些见解极大地丰富了我的工程能力。
向量降维技术：探索向量降维技术的领域，让我对如何高效处理和解释数据有了深入的理解。这项知识为未来开发数据驱动的应用程序开辟了新的途径。
Web Workers 效率：掌握 Web Workers 的复杂性不仅解决了性能问题，还扩展了我的优化策略库。这项新获得的技能无疑将在未来的各种项目中发挥作用。
Monaco 编辑器和 UI 框架：与 Monaco 编辑器、Material-UI (MUI) 和 Vite 的广泛合作，加深了我对这些重要工具的熟悉度。我磨练了将复杂 UI 组件无缝集成到应用程序中的技能。
改进和未来增强的领域
在回顾这段变革性旅程时，我认识到一些可以改进和未来增强的领域。
增强的自动完成：进一步完善自动完成功能，使其支持 JSON 结构中的键值建议，可以极大地提升用户体验。
控制台错误检测：将控制台的错误检查器与 OpenAPI 集成，可以提高其识别错误的准确性，并提供精确的改进建议。
扩展的向量可视化：探索更多的可视化方法并优化其性能，可以提升向量可视化路由的实用性。
结论
参与 Google 编程之夏 2023 并完成“可视化与探索的 Web UI”项目是一次极具价值的经历。我很感谢有机会为 Qdrant 做出贡献，并开发一个用户友好的向量数据探索界面。
我要向我的导师和整个 Qdrant 社区表达我的感谢，感谢他们在整个旅程中提供的支持和指导。这次经历不仅提高了我的编码技能，还培养了我对 Web 开发和数据分析更深厚的热情。
随着我的编程旅程超越这个项目继续前进，我期待将在这里获得的知识和经验应用于未来的工作中。我很期待看到 Qdrant 如何随着新开发的 Web UI 而发展，以及它将如何积极影响全球用户。
感谢您与我一起踏上这段编程冒险之旅，希望未来能分享更多令人兴奋的项目！编码愉快！