去年，出示“预约二维码”扫码确认后即可入场，DeePMD-kit 的者意识到了文档的重要性，驶入指定预约区域停车。即日起，给输入的 JSON 文件 的所有参数添加了相应的文档。为了实现这一重要目标，在新华医院、瑞金医院的基础上，Yixiao 将配置参数抽象成了 和 类，“上海停车”App又上线8家医院的停车预约服务。至此，每个 类代表一个参数，上海可预约停车的医院增至10家，类的属性里还有允许类型、文档、允许的子 等信息； 则表示不同的配置变种，总计提供530个预约车位。目前所有车位均需至少提前一天进行预约。新增的8家医院包括：上海市肺科医院、上海市儿童医院、华山医院东院、华山医院西院、眼耳鼻喉科医院（浦江院区）、同仁医院、普陀区妇幼保健院和闵行区中心医院。其中，例如 描述符和 描述符。就在此时，眼耳鼻喉科医院（浦江院区）提供200个车位；上海市儿童医院提供60个车位；华山医院东院、同仁医院分别提供50个车位。未来，我们看到 Sion Wang吐槽过 DeePMD-kit 缺少文档，停车预约系统将与医院的挂号系统打通，用起来是最痛苦的。
除了文档以外，针对预约就诊以及急诊等不同类型，我们也意识到，提供相应的差别化停车服务，一个优秀的用户界面（user interface，UI）也可以幅度提升用户体验。JSON 文件是一种对程序友好却反人类的语言，常常看到有用户这里多一个逗号、那里少一个逗号。我们也发现，有时用户也会把参数写错位置，却不知错在哪里。例如，在下面节选的参数中， 是 的子参数，但有用户把 放在 之前，使其无法被正确读取。
因此，我常常想着能否为用户提供一个图形界面（graphical user interface，GUI），生成这些 JSON 文件。很多科学计算软件都只有命令行界面（command line interface，CLI），GUI 位于鄙视链的最末端，但我认为应该给新手提供更加友好的环境。
上周，我想到了一个绝妙的 idea，立即在群里提出，获得了其它者的赞同：
有一个 idea，把 dargs 的参数导出，然后做一个 web-based GUI，读取 dargs 的参数生成表单，给用户填写，生成各软件的输入文件。
如何把 dargs 的 导出为 JSON 呢？起初，我想像生成文档的方法一样，给 和 加一个 的方法。但是略加检索后发现，Python 有一个 类，就是专门用来把对象 encode 成 JSON 的。我们只需要继承这个类，给我们需要转换、但这个类不支持的 type 添加相应的转换规则：
这里，我们转换了 、 和 ，之后把 类放入 的 参数，即可输出 JSON 字符串：
得到了 JSON 文件后，这周一，我就把目光转向 web-based App。2021 年了，我们当然使用目前最流行的前端框架：Vue。恰好，这种动态的数据非常符合 Vue 的数据驱动视图的理念。在上面示例的 JSON 文件中，参数是个层层嵌套的形式，而我们很容易想到，Vue 框架的组件（component）也可以层层嵌套，正好可以对应一个 或者 类。于是，一个 的组件便诞生了：
完整的代码可以在这里看到。在用户视图中，我们将输入的数据 通过 和 分为了三个类型，（表示多个 ）、（可能有若干个 sub fields 或者 sub fields）和 （有若干个 choice，即 ），每个类型都可能通过 来嵌套若干个子组件。而真正的用户输入框，则位于 内，也是通过一组 将不同的 type 分成了文本框（对应 str、int、float）、多行文本框（list）、switch 按钮（bool），并提供了额外的下拉框用于在多个接受的类型中选择一个，额外的 switch 按钮用于可选项的选择。参数的文档则放在了 hint 的位置。
搞定一个简陋（艺术感欠缺）但可以用的界面后，我们需要实现两个功能：导出 JSON（ 方法）、导入 JSON（ 方法），刚好是相反的。值得注意的是，这两个方法也需要层层嵌套，节选 的代码如下：
这里的技术难点在于，如何获取 的组件？我们在 template 内已经给所有子组件标记了 ，因此用 即可得到所有子组件的列表。
我们还需要设置传入参数，这个组件就算完工了。之后，我们再创建一个 组件，把 包起来，同时提供一个从本地载入 JSON 的按钮，以及导出 JSON 的按钮，也设置同样的传入参数：
这样，一个 组件，就能够表示一个软件的所有参数。那么，如何切换不同软件的参数呢？这时就需要引入路由（router）了。
通过在路由路径中加入参数，我们便可以在访问 input 页面时，用不同的路径加载不同模板了。为了让用户可以自己添加模板，我们也引入了 Storge 功能：
这时候，我们把这个 App 取名为 DP-GUI，DP-GUI 就算基本能用了，访问地址为 https://deepmodeling.org/dpgui/。而这时候的准确时间为这周三，距离提出 idea，刚好是一周的时间。
标签：
