Blog

Blog

PHODAL

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

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

引子:ClickPrompt 步步惊心

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

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

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

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

一个示例:从需求到代码

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

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

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

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

Step 1

在这个 prompt 里:

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

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

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

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

Step 2-1

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

Step 2-2

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

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

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

Step 3-1

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

Step 3-2

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

工作流 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 帮我们做自动化,节省更多的时间用来搞创意。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签