如何构建结合 ChatGPT 的半自动化编程：以 ClickPrompt “步步惊心” 示例

Posted by: Phodal Huang March 12, 2023, 9:08 p.m.

PS：虽然，我们应该以预训练的 Prompt 作为当前的目标，通过将大量的数据训练。但是，作为一个没有 AI 训练资源的普通人，这个价格太昂贵了。于是，我们探索能否基于工作流的方式，来构建半自动化编程。

引子：ClickPrompt 步步惊心

周末，我们在 ClickPrompt 上添加了一名为 “步步惊心” 的工作流式的 Prompt 交互功能，在这个功能里，你可以设计自己的日常工作流，将它与 AI 结合到一起。在过程中，ClickPrompt 会提供一个编辑器，让你修改上一步的输出，修改完只需要继续 one click 即可。

诸如于，你在开发一个新的功能，而在那之前，你需要先分析一下需求，包含它的边界条件等等。在我们构建了工作流的情况下，只需要

1. 在第一步中，我输入新功能的名称和简要描述。
2. 当我点击“下一步”按钮时，Prompt 自动提供一些可能的需求和边界条件。
3. 如果我需要修改需求或条件，我可以使用编辑器对其进行修改，并点击“确认”按钮。
4. 然后我可以继续进行下一步操作，比如编写代码或进行测试，同时 ChatGPT 可以帮助我更快地分析需求和边界条件，并提供有用的建议和反馈，提高我的工作效率和准确性。

随后，我们也可以继续要求 ChatGPT 帮我们编码。

一个示例：从需求到代码

PS：这是一个未 100% 完成的 demo 示例，只是为了更好的启发大家

接着，让我们来看 ClickPrompt 的示例《用户故事》。

1. 定义用户故事的输出格式

首先，我们需要定义一个能继续让 ChatGPT 理解的需求，它需要尽可能的详细。于是，我们的 prompt 就相当的长，如下图所示：

在这个 prompt 里：

• 我们定义了处理的流程，并尽可能减少 ChatGPT 的返回结果，为了省钱……。
• 定义了输出的格式，相当于验收条件。
• 为了避免他说废话，直接让他回复 OK。

然后，点击 prompt 之后，我们就可以继续往下。

2. 添加或者修改我们的需求

随后，我们提供了一个简单的 Textarea（等哪天有空换成好一点的编辑器），用户就可以复制他的大致需求进来，然后让 AI 进行分析：

所以，我们只需要继续点击即可，等待 AI 给我们的答案，如下图所示：

由于，我们已经限制了 AI 给的输出格式，所以可以作为下一个需求的输出。

3. 基于用户故事编写测试用例

在第三步里，我们提供了三种输出方式：时序图、测试用例、代码模板，按自己的需要选择合适的点击即可。这里以测试用例为例：

继续无脑的 click 之后，我们得到了纯代码，由于我们限制了输出只有 Java 代码，所以到这部分就是：

如果我们集成了工作流，就可以直接扔到代码库的对应位置了。

工作流 Prompt 要素

结合上面的工作流之后，认为一个结合 AI 的自动化的工作流应该包含四个要素：

• 场景模板化，即预设各种常见的工作场景，为用户提供快捷的开始工作的方式。
• 交互式环境，包括但不限于输入框、按钮、编辑器、错误信息、帮助文档等，使用户能够与系统进行交互和反馈。
• 格式化输出，为用户提供规范的输出结果，避免信息过载或无用信息。
• 流程与工具集成，将不同的工具和流程集成到一个自动化的流程中，提高工作效率和准确性。同时，通过 AI 技术的支持，让系统能够智能化地处理数据和信息，进一步提高工作效率和准确性。

简单来说，就是我们依旧需要碳基生物作为检查官，来检查硅基生物输出是否合理？

PS：在流程与工具上，我们在本周我们看到了一个 ChatGPT-CodeReview 的工具，它将流程结合到了 GitHub 的工作流中。

正在编写的第二个示例：DSL 作为输出的多管道模式

考虑到使用用户故事作为案例太简单了，所以我们正在构建一个新的示例，第二步是，以分布式的方式利用 ChatGPT 输出，来进行编码。

于是，我们让 ChatGPT 帮我们设计了一个 DSL 来描述：帮我设计一个 DSL 来表示一个系统的处理流程。然后，得到了一个 DSL：

System("BlogSystem") {
  Entities {
    Blog { title: string, ..., comments: [Comment]? },
    Comment { ...}
  }
  Operation {
    Ops("CreateBlog", {
        in: { title: string, description: string },
        out: { id: number }
        pre: title is unique and (title.length > 5 && title.length < 120)
        post: id is not null
    })
  }
  API {
    Route(path: String, method: HttpMethod operation: Operation)
  }
}

它可以分析某一个场景的业务，基于这个业务做分析。在这个 DSL，反复让 ChatGPT 设计之后，勉强可以详细拆开任务：

• Operation。通过 Ops 的输入、输出、先验条件、后验条件，我们可以构建出更准确的函数。
• Entitiies。是可独立从 DSL 拆解出来的，并且与数据库结构是绑定的，所以可以用来做数据库设计（ChatGPT 设计了一个诡异的 []? 语法 ）。
• API。API 其实对于编码的帮助是有限的，不过其最大的用处是用于自动化测试，用于确保 ChatGPT 的代码是正确的。

所以，我们只需要拆解任务，并发送到各个管道里，再 merge 一下，就可能能得到一份可工作的代码。至于，前端部分，我们可以用类似的方式来设计。

当然了，由于现在的 ClickPrompt 与 ChatGPT 的接口还在开发中，所以这个功能，还只是在 PoC 阶段。

人们苦短，还是让 AI 帮我们做自动化，节省更多的时间用来搞创意。