作者。 Yaroslav Lozhkin，产品设计师和Olga Rusakova，Evil Martians的作家
请看我们如何帮助建立DVC Studio的设计和前端：一个用于跟踪、可视化和协作机器学习实验的平台。DVC是Iterative.ai的一个旗舰产品--该公司专注于ML的开发者工具，并拥抱开源和商业开源软件。机器学习和COSS都是Evil Martians的DNA的一部分，所以这个项目很快就变成了个人的：我们帮助建立一个我们自己会使用的工具。
合并开放核心和机器学习
近年来，深度学习技术大大提高了整个机器学习任务系列的准确性，使以前的实验性技术足以在生产中使用。过去的前沿学术研究现在已经成为一个成熟的产业，拥有成熟的基础设施和高度可用的工具，使构建最终用户的解决方案比以前更直接。
机器学习工具提供给企业的方式之一是COSS（商业开源软件）模式。这是一个开放的核心，任何人都可以自由使用和修改，可以选择采用商业功能和优先支持--对于大客户来说，这比依靠纯粹的开源贡献更具经济意义。在Evil Martians，我们对我们的OSS产品采取了同样的方法：Imgproxy和AnyCable现在都提供商业计划。
Iterative.ai的DVC（代表数据版本控制）是一个为机器学习工程师提供的基于Git的版本控制解决方案，它遵循同样的COSS原则：为个人开发者提供免费的开放核心，为团队和企业提供付费计划。
火星人帮助该公司重新思考其网络形象，并为Iterative.ai拥有的面向用户的复杂产品--DVC工作室塑造了UI和前端。
关于数据的业务
DVC是由数据科学家为数据科学家建立的：Iterative.ai由Dmitry Petrov和Ivan Shcheklein于2018年启动，
建立在两位创始人在为微软、Node.io、Yandex Labs和谷歌等公司工作时获得的经验之上。
Iterative.ai以远程为先，位于加州旧金山，在2021年筹集了2000万美元的A轮融资，这使得该公司的总融资额超过2500万美元。
版本化的崛起
机器学习模型与 "传统 "软件产品不同。它们的成功不仅取决于规划和执行，还取决于训练：这是一个高度复杂的过程，即使是许多参数中的一个最轻微的偏差，也会造成或破坏结果。人们强烈要求跟踪模型的所有输入和训练变体的版本：这样，昂贵的CPU周期就不会被浪费，而且团队可以很容易地从大量的实验中选择 "获胜 "的组合。这方面有很多方法：从在Python笔记本中存储结果到拥有REST可访问的数据库，但没有标准的、与供应商无关的、轻量级的工具链来维护数据版本控制和模型性能监控。在DVC出现之前就没有了。
DVC团队认为，在版本控制方面，ML模型应该和 "传统 "代码一样被对待。他们决定建立在每个软件工程师都熟悉的工具集之上。Git。
基于Git的机器学习
DVC是一个用于数据管理和训练结果版本管理的开源基础设施。它是一个运行在任何Git仓库之上的控制台工具，与任何标准的Git服务器或供应商（如GitHub或GitLab）兼容。对于开发者来说，DVC的操作与Git类似，使用的工作流程也基本相同：你在远程位置推送和拉出文件。
DVC是用来组织数据科学和ML工作流程的--你写一个配置来描述实验的结果--指标、参数、图表、失败等等。该平台可以读取和可视化它们，并建立deltas。
机器学习工程师可以训练模型，并看到他们的表现，他们是否做得更好或更差，正确地存储他们与所有相关的代码、数据集和结果。DVC适用于任何现代存储。亚马逊S3、微软Azure Blob存储、谷歌Drive、谷歌云存储、阿里云OSS、SSH/SFTP、HDFS、HTTP、网络附加存储或企业内部硬件。
这保证了重现性，并使实验之间的来回切换变得容易，保留了每个ML模型演化的完整历史。所有的协作都是通过Git完成的，利用了经验丰富的开发人员的肌肉记忆。
改善网络形象
与Evil Martians的合作是通过一个生动而坚定的DVC社区来实现的。社区资源之一是文档网站，而DVC团队对此相当细致。该平台需要一些改进，以使其界面清晰，结构合理。
安排DVC的文档
DVC的文档建立在一个定制的引擎上，需要对其进行前端更新。我们重新设计和思考了导航和路由，使用SSR来加快交付速度，改进搜索引擎，调试平台，并更新了依赖关系。然后，我们给管理区带来了一些SPA的互动性，因此维护知识数据库对版主来说变得更加容易。
文件库
完善社区页面
社区页面是DVC的核心团队和开源贡献者之间的一个重要通道。其中一个有趣的前端挑战是收集和显示动态的内容更新：如最新的博客文章的公告、聊天问题、事件和新的文档页面。我们花了一些时间在API集成上，使原本静态的网站变得更加动态，从外部来源收集和显示数据。
我们设计了布局和图标，建立了前台部分，实施了基于Sentry的错误跟踪，并最终发布了新的社区页面。
带有动态更新块的社区页面
重塑DVC博客
DVC团队需要完善公司的博客并优化其图片。为此，必须将其从Medium迁移到Gatsby。Gatsby的好处之一是图片优化，不受特定托管服务的约束。Gatsby通过其内置的尺寸调整器和优化器为所有类型和场景生成图片，为不同的分辨率提供自动生成Retina-ready图片尺寸的响应式图片。
在迁移过程中，将所有的内容转移到新的平台，并确保所有Medium的内容格式和设计的自定义选项在Gatsby上可用，这一点至关重要。这些东西包括可以扩展或折叠的文本块，链接和侧边栏的特殊设计，自动扩展的Reddit feeds，以及其他功能。我们需要将文章来源保留为.md ，但同时，我们不希望博客编辑用原始的Markdown写作。所以我们为Gatsby写了特殊的插件来生成Markdown。
然后我们调整了一些部署设置，为新的博客创建了一个设计系统。
焕然一新的博客
迁移到Gatsby
Gatsby的满意度很高，所以DVC委托我们将社区和主要登陆页面-dvc.org迁移到新的堆栈。同时，我们的任务是重新设计iterative.ai的网站。
首先，有必要改进其结构，突出三个主要页面：包含产品的主页，包含团队和 "关于 "内容的公司页面，以及比较免费和企业版软件并承载联系表格的产品部分。
第二个任务是通过以下方式 "简化 "界面。
- 摆脱设计中的块状结构，保持企业风格
- 缩短冗长的登陆页面，提供更多的视觉细节，让用户的目光停留在这些细节上
- 让所有的图标变得明亮而突出
- 选择一种聪明的字体，在不同的字体大小下都能有明显的阅读效果
- 通过位置和亮度来调整设计元素。
发运DVC工作室
项目的下一个重要步骤是与DVC的核心团队一起推出Studio-DVC有史以来第一个针对ML工程师的SaaS解决方案。
这是DVC计划推出的两个新产品之一，让客户利用DVC平台的核心构建机器学习开发和持续改进的整个周期。这两个产品是由DVC团队打造的持续机器学习（CML）和由DVC和Evil Martians联合设计的 "DVC的UI "或DVC Studio。CML帮助客户在他们的ML模型发生变化时运行测试，而Studio则允许他们合作并查看这些模型的性能，包括来自CML的测试结果，以挑选性能最好的模型。
持续机器学习和DVC Studio本应刺激业务增长--它们是创始人认为对启动端到端企业客户支持至关重要的两块缺失的拼图。他们的全栈应该是开源的，可以作为SaaS服务部署，也可以在客户的私有硬件上部署，以符合企业的安全政策。
工作室连接到GitHub或GitLab上现有的DVC Git仓库（或者可以扩展到与本地Git仓库或其他VCS一起工作）。它提供了一个工具集来可视化实验的输入和性能，将它们相互比较，并将这种比较以表格或图表的形式可视化。平台核心之上的网络GUI版本连接到Git仓库，在提交的文件中搜索带有参数和指标的DVC文件，建立一个反映指标随时间变化的表格和图表。
DVC Studio界面
构建DVC Studio前台：需要关注的工具
由于我们在项目开始时就加入了，与核心团队一起，我们可以选择完全适合生产任务的技术。主要的挑战是优化架构，确保核心的前端工程师可以并行地工作在不同的功能上。我们还必须谨慎对待存储在Git和AWS或谷歌云等外部存储中的实验结果，或分享不同类型的存储。许多集成意味着许多故障点，我们需要确保将风险降到最低。
下面是我们共同选择的技术的简要概述。
React
产品界面中的表格管理涉及大量的动态更新，因为它们需要被过滤、排序，并支持即时搜索功能。这显然需要SPA架构来更新目标部分而不需要重新加载整个页面。我们选择了React，从许多SPA框架中选择了它，因为它很受欢迎，而且围绕它有现成的基础设施，包括可以实现我们所需的一切的工具和库。
Next.js
Next.js可以实现 "后端 "路由，并在重载后保持所需的页面状态。这对于搜索引擎的索引和确保应用程序的关键路由加载速度是必要的。尽管我们所做的应用程序从 "外部 "是不可见的（只对授权用户开放），但Next.js仍然符合我们在简单性和可靠性方面的需求。它还允许我们在服务器上对数据进行预处理，只将相关部分发送到客户端。
GraphQL还是REST？两者都有!
使用服务器渲染的页面对大多数页面来说都很有效，但有一个明显的例外：存储库页面，它将来自GitHub或GitLab等外部Git供应商的数据可视化。事实证明，在服务器上处理所有这些信息是很麻烦的，因为搜索和过滤外部信息需要许多依赖第三方系统的网络请求。
因此，我们决定在客户端实时处理一切：在加载页面后，我们向外部仓库发出大量初始请求，然后将其存储在本地，以便在不影响服务器的情况下进行查询。这也需要在GraphQL（容易进行动态查询）和REST（更多的请求，但有更多的选择来优化它们）之间找到一个平衡。
Redux工具箱
下一个挑战是如何存储数据并在用户界面上显示。最初，我们认为过滤和排序功能不需要经常更新。然而，动态功能需要在一次点击中重新计算几乎所有的结果。例如，如果排序规则改变了，我们需要核算复杂表格中每一行的所有数值。
Redux工具包能够更有效地构造、存储、更新和重新绘制边缘的所有数据，从而更快。它是一个Redux包装器，提供TypeScript类型和内置开发工具，优化整个模板代码，总的来说，可以写出紧凑和清晰的代码。我们会推荐它用于任何Redux项目的默认情况。
尾风CSS
采用Tailwind而不是CSS Modules或BEM，使我们能够在不创建单独的CSS文件的情况下构建80%的组件。超过80%的JS文件根本就没有单独的匹配CSS文件。例外的情况是棘手的动画和外部样式库。多亏了PurgeCSS，我们能够将项目样式的总大小保持在20KB以下。
Reach UI
这是一套随时可以操作的基本组件：灯箱、下拉、选择、弹出式窗口、工具提示--所有这些都侧重于可访问性。所有的组件都实现了键盘控制，并能与屏幕阅读器正常工作。
为浏览者设计
尽管我们有很多关于极其复杂的多阶段流程的UI设计实践，但对于火星人的设计师来说，机器学习是一个相当新的话题。因此，我们开始深入研究这个话题，并阅读了大量关于实验、度量、ML产品和DVC的操作原则的文章和文档。我们必须学习如何运行实验，并与工程师一起工作，目的是使流程尽可能清晰，并创建一个与前端开发相称的设计系统，并基于以后可以轻松重新配置的组件。
只有在深入了解产品之后，我们才开始研究终端用户的界面。首先，我们学习了如何将GitHub的数据读成表格；然后，我们想到了人们用表格做的所有事情：调整大小、固定和配置列、过滤、排序和建立图表。所有这些研究都被用于模拟和我们从头开始设计的组件系统。
网络版屏幕
工作室的网络版的主要屏幕是所有模型的列表和每个模型的细节。模型数据存储在Git存储库中。
项目仪表板
列表由通向模型页面的工作表组成。该表显示了某个参考ML模型（通常是主分支的HEAD提交）的关键指标，以及两个实验性的（其他分支的HEAD）之间的差异。
度量值设置
一个模型是一个带有数据的表格。除了参考模型，屏幕上还有实验模型可以比较。用户可以自定义显示的度量和参数，并应用过滤器和排序。
一个有模型数据的表格
在下一阶段，我们设计了DVC Studio私人测试版的最终工作范围--我们必须向第一批用户展示该工具并收集他们的反馈。因此，尽早推出产品是至关重要的。然而，长期的功能并没有被丢弃：我们画了一部分设计和主要流程，以便团队能够在下一个公测版本中快速推出这些功能。
值得一提的是，我们与Iterative的内部设计师并肩工作。因此，我们重构了整个最终的设计系统，并将元素和组件转移到全新的Figma Variants方法中，以使 DVC 更容易在这个基础上进一步发展。
对API的修补
后台技术栈是Python、GraphQL和Django的组合。以前的API是由渲染HTML的Django插件拼凑起来的。我们必须想出一个混合的GraphQL和REST端点，以适应更复杂、更现代的前端。
我们还想出了几个优化加载时间的方法。如果指标在一次提交中没有变化，我们就不下载，而是从上一次的提交中获取。或者只下载现在包含在表中的列，如果列的组合发生变化，则重新加载数据集。
我们最终重新思考并重新实现了DVC网络系统的许多组件，对我们来说，让内部的开发者和设计者能够采用新的做法是至关重要的。
我们逐渐减少了对产品的贡献，通过审查候选人的作业来帮助建立招聘流程，并帮助组织了前端工程师的内部培训。从那时起，DVC的核心技术团队就开始独立进行前端工作。
与Iterative的合作在很多方面都感觉是正确的：在两家公司，我们都相信开源的力量和商业开源模式的可行性--这帮助我们自然地调整我们的优先事项，并推出一个成功的产品。
此外，我们已经在我们的一个平行客户项目中使用了我们帮助设计的DVC的工具：对我们的数据集和语音识别和文本分类的模型进行版本和存储。
如果你在将机器学习纳入你的产品的任何项目阶段需要任何帮助，无论它是一个概念验证还是一个准备运行的商业产品，不要犹豫，了解更多关于机器学习和我们在Evil Martians提供的其他服务，并随时给我们留言。
