前言

近期尝试将 AI 助手(ChatGPT)引入图形化编程环境。

OpenAI 介绍说, ChatGPT 背后的模型吃下了大量代码, 以至于十分擅长 Python、JavaScript 等编程语言, 网友们的大量测试验证了这点。

与 ChatGPT 同源的一些模型, 经过针对性的训练后，更是可以胜任大多数日常编程工作。许多 Github 用户在日常工作中与 Copilot 结对编程，极大提升了编程效率(有些工程师提到日常工作中的一半代码是 AI 助手写的)。

但目前尚未见到将 ChatGPT 应用于图形化编程的项目。这篇文章记录了我的一些早期探索。

由于 Snap! 的灵活性(Liveness 与元编程能力), 我选择使用它作为实验环境。原理是通用的, 这些工作可以迁移到大多数图形化编程环境里: Scratch、Blockly、MicroBlocks…

原理

OpenAI 出于安全考虑, 不允许用户直接在浏览器中调用它的 API , 拥有系统编程能力的语言(Python/NodeJS/…)才能调用这些 API。

目前只能够使用文本与 OpenAI 的 API 交互, 为了将其用于图形化编程环境，需要先将视觉元素(如积木脚本)表示为文本，通常可以利用系统内的对象序列化/反序列化策略来达成这个目标。

我目前在 Snap! 里通过 Python function 插件来与 OpenAI 的 API 交互。

由于大多数图形化编程环境都运行在浏览器中，所以第一个需要解决的问题是: 如何将这些 API 中继到浏览器里，典型的解决方案是在服务器上构建代理服务。

但使用Python function会带来更多的灵活性和更短的调试周期，所以我没有使用主流的后端代理/转发方案。

一旦原型达到令人满意的程序, 就会采用主流的方式部署，这样用户就能开箱可用。所以本文展示的是原理和实验环境，而不是最终部署的产品。

调用 OpenAI 的 API

截图展示了 Snap! 非常适合作为探索 RESTful API 的工具, 因其强大的交互性, 仿佛可以将手直接伸进计算机里摆弄这些数据。

ChatGPT 角色

在 UI 上, 我将 AI 助手设计为一个角色(Sprite), 与其他角色并无二样。由于 AI 助手只是一个角色，这带来了如下好处:

  1. 无需修改 IDE, 迭代非常快速。如果对原型工作满意，未来将它们"固化"为 IDE 的一部分是很容易的。
  2. 大量复用 Snap! 已经存在的杠杆力量: 快速制作 UI 的能力、元编程能力、列表(我使用舞台中的列表 UI 制作聊天框)…
  3. 普通用户也能轻松理解背后的工作原理, 因为所有的工作都只是"在积木中编程"。这具有很好的教育意义，因为这可是真实世界的 API 和真实的项目。

这个角色对外提供的 UI 经过了多个版本的迭代, 每次重构只花费我几分钟的时间。由于调试周期非常短，我十分喜欢大规模重构，毫无心理压力。

以下是 AI 助手目前提供的一些功能:

解释程序

第一个版本的解释程序, 更接近 ChatGPT 典型的对话风格。

在此， 对话似乎不是必要的，解释程序 的意图十分清晰，可以通过一个预先写好的 prompt 来统一做这件事。将 prompt 隐藏在背后，只提供出触发按钮，用户无需显式地告知 AI 助手解释程序。这不仅避免了每次的对话输入，也会使 prompt 能够被持续改进。与 ChatGPT 对话的质量非常依赖于 prompt 的质量。

这是重构后版本(与 Copilot 风格相似):

如有你不想让它解释当前页面的脚本，而是有一些特殊要求，可以选择与它 自由对话

编写程序

这段视频的前半部分演示了如何让 AI 助手 解释程序，后半部分演示了如何让它编写程序: 通过在注释中写明要求(与 Copilot 风格相似)。

翻译成其他语言

我之前在朋友圈分享了自由对话的例子。 @Cygnus 看到这个例子后, 建议说 “试试让他把这个逻辑写成其他语言”, 大概用了五分钟，就完成了。这是个很好的案例，展示了 Snap! 是一个高效的研究环境。

ChatGPT 对递归的理解相当深入，以至于可以轻松将这个图形化递归程序翻译为 Python， 没有任何修改的情况下完全正确地运行！

在我周六的分享中, 这个演示案例出了点问题, AI 助手没有完全写对翻译的 Python 代码。后来我解决的这个问题，方法是要求它只给出概率最高的那个答案，减少随机性。

接管物理世界

通过 MicroBlocks, 我们可以让 AI 助手对物理世界的设备进行编程:

我给它的要求是 “这段程序每天傍晚打开水泵给花草浇水。 最近三亚太阳下山有点晚，帮我把浇水时间往后延长一小时。直接给我答案，无需解释”。 它不仅理解了要修改定时任务中的时间(从傍晚六点推迟到七点)，也理解了要同步修改休眠逻辑里的时间，避免反复浇水(这可能是新手会犯的错误)。

生成新造型

直接根据描述生成可编程的故事角色！

生成的造型和内置造型并无二致，所以拥有完整的可编程能力！

在 翻译成其他语言 小节中，我们希望 AI 助手尽可能给出正确的答案(概率最高的), 而不要拥有太多创造性(不确定性), 不然可能会导致演示失败。

但在创造新造型的时候，我们却希望它既可能地随机和发挥创造性，最好每次的结果都不同，这样会带来不可预期的惊喜和趣味性，也会让社区的作品更为多元。

经验总结

ChatGPT 善于编写文本代码(尤其擅长 Python/JavaScript), 但不大擅长 Snap! 。提升的方式有两种:

  1. 整理更多案例，进行小样本训练，然后使用定制的模型
  2. 提升 prompt 的质量: 采用更清晰的问题描述，更多的示例(一个经验法则(来自微软团队)是: 像给小学生出应用题那样给 ChatGPT 提要求)

未来

这是接下来可能的一些工作:

  • 整理图形化编程的典型案例，投喂给模型，训练出更好的模型
  • 让 AI 助手与编程者共同驱动 CodeLab 可编程空间。
  • 将 AI 助手引入 Dynaverse(3D Scratch)
  • 将已有的工作迁移到 Scratch、MicroBlocks
  • …

参考