访问

MolProphet 是我在 SanOmics 担任 Web 工程师主要负责开发的项目，该项目面向生物制药领域的行业人员，是一个一站式、基于 AI 的药物早期发现平台。

挑战

该项目的前端开发包含一些复杂的需求。

首先，作为一个辅助进行「药物研发」的平台，一个很基础，却具有挑战的功能是「3D 蛋白质视图」，主要的目标是：

1. 支持缩放任意方向的缩放、旋转、位移，方便用户观察蛋白质的细节。
2. 视图需支持从蛋白质中自由选择氨基酸（构成蛋白质的基本单位），以形成靶标口袋（能够和候选药物产生相互作用的关键部分）。
3. 蛋白质中通常含有一系列化学组件，例如小分子、水、离子、相互作用力模拟线等，需要允许用户通过开关控制这些化学组件的显示或隐藏。
4. 在平台中有多个模块需要接入该功能，但具体需求又有所不同。这不仅要求在开发时考虑可复用性，还需要考虑各个模块接入时可以灵活自定义。

以下 GIF 图是 MolProphet 其中一个功能模块的实际使用演示：

除了 3D 蛋白质视图外，平台的另一个重要需求是显示数个 AI 输出的小分子结果，这些结果以 2D 图片展示。在分子结果页面，需一次性展示最多 2000 个分子，需要保证页面交互流畅。

结果

我从 2022 年 4 月份加入 SanOmics 以来开始负责 MolProphet 前端部分的研发。2023 年初，该项目上线第一个版本，并一直由我主要负责迭代至今。截止 2024 年 5 月，该平台已帮助超过 1500 生物制药领域的专家生成过候选药物，且被收录在一篇已发表的 SCI 论文。

技术栈上，此项目的前端部分是一个基于 Vue 3 的 SPA 项目，使用了包括 Vue Router、Pinia 等在内的一系列 Vue 生态工具。此外和所有其他 SanOmics 项目一样，此项目使用了 TypeScript 以确保代码可读性，方便团队协作。在 UI 方面，主要使用了 Quasar UI 和 UnoCSS。

面对项目挑战，我在开源社区中针对生物化学领域的项目进行了一系列探索，最终选用 MolStar 为 3D 蛋白质视图的开发底座，扩展出了高度可定制化的组件，应用于所有需要 3D 蛋白质查看功能的模块中，满足了上述一系列复杂的需求。此外对于 2D 分子图片批量展示，此项目使用了 RDKit.js 来本地渲染 2D 分子图片，并通过联合使用 Web Workers 子线程渲染、IndexedDB 缓存已渲染的分子、虚拟滚动等方式，确保页面的流畅交互。