English version

前言

之前写过一篇文章讨论图形化编程中的 AI 助手 , 当时的实验展示了一些有趣的可能性, 但实用性并不高。 随着 GPT-4o 的发布, 尤其是多模态能力的提升(不久将发布音频流, 视频流 API), 图形化编程中的 AI 助手(或导师) 变得真正具有吸引力: 你可以通过对话与之交流, 它能够实时看到你在做的事情, 理解你的困境并给予建议或引导

Snap! (即将发布 Snap! v10)近期的巨大改进。尤其是 lisp code 功能的发布(积木与代码是同构的),使得 Snap 成为可以与 AI 进行深度协作的图形化环境。

Snap! 中的 GPT-4o

通过 Snap! 的JavaScript function 功能, 我们可以将 GPT-4o 的能力全部引入 Snap! , 无需对 Snap! 源代码做任何修改!

我将 GPT-4o 的功能包装为一个 Snap! 库

其中最常用的积木是 stream chat completions, 这个积木流式地输出 GPT-4o 的回复, 与你在 ChatGPT app 的使用体验非常相似。

这个积木的参数如下:

  • text: 提示词
  • vision: 将 Snap! 某个区域的图像发送给 GPT-4o。你可以选择让 GPT-4o 看到以下任一内容,
    • IDE: 当前整个页面
    • Stage: 舞台区
    • Camera: 摄像头
    • Scripting Area: 脚本区(暂未实现)
    • Palette: 最左边的积木区域(暂未实现)
    • None: 不携带图像(只进行文本对话)
  • callback: 回调函数。每当 GPT-4o 返回了信息时, 将调用这个回掉函数, 通常来时,它是 say, 或者 设置某个变量
  • temporary: 这个开关用来控制是否是临时对话, 如果不是临时对话, 对话的内容都将存储在 messages 变量中。 你可以使用 clear messages 积木清理它。

描述摄像头的内容

这个简单的例子(点击运行)中, 我们让 GPT-4o 描述它看到的摄像头内容

你需要先在积木填写 API key, 才能运行。为了获得 API key, 需要有一个 openai 账号(目前只有 Plus 用户才能够使用 GPT-4o 的 API, 未来可能会有变化), 然后通过 这个链接 申请 API key。

如果你是企业, 想为国内用户提供 GPT-4o 的 API 服务, 需要等到微软的 Azure OpenAI Service 支持 GPT-4o。 我为 Azure OpenAI Service 也构建了对应版本的驱动库, 如有需要,可以联系我。

生成图像

将文字生成的图像, 用作角色的造型:

示例项目(点击运行)

聊天界面

你可以使用 Snap! 的菜单库构建类似聊天软件的界面, 原理是为 messages 变量构建合适的 UI 界面。

示例项目(点击运行)

更完整的例子:

图形化编程中的 AI 助手

我将 AI 助手 构建为一个普通的 Snap! 角色, AI 助手只是一个使用了 GPT-4o 库的普通角色, 作为用户的你(你可能是产品经理或老师), 可以随意修改它来实现脑子里的原型, 由于整个过程只是拼搭积木, 因此无需委托"软件工程师"来帮助你实现想法。

我喜欢在 Snap! 的 “用户环境” 中工作, 而不是在源代码中工作, 它有更好的活性(liveness), 不仅效率更高, 而且更加愉快。

分享我之前做的一些实验, 它们都包含在这个项目中: AI Assistant(点击运行)

运行项目之前,首先需要切换到 AI Assistant 角色里, 填写 API key.

视频演示

这个 演示视频(图形化编程环境中的 GPT-4o) 介绍了更多的内容, 如果你对 AI Assistant 项目感兴趣,推荐先看完视频。

以下是几个比较简短的视频展示 AI Assistant 的能力:

向用户解释页面中的任务(通过视觉能力看到当前任务):

当用户感到困惑时, 看到用户的困境(与用户共享相同的视野), 并给与合适的建议

解释答案, 并给出可运行的积木代码:

我试着在以下例子中测试 GPT-4o 的能力边界:

基于给定的积木, 以及一例展示了lisp code 语法的样本, GPT-4o 就完成了这个任务:

GPT-4o 的视觉能力帮助纠正了我任务描述中的错误(内径误写为外径), 思维链对于增强它的数学能力非常有用。例子来自Test Driving ChatGPT-4o (Part 2)

Snap! 的 Puzzle 功能与 GPT-4o 相结合来构建 microworld,

Seymour Papert 最早在《Mindstorms》里提出 microworld 的想法, 《终身幼儿园》复述了这个重要想法。 这是个非常有潜力的方向,我目前认为它可能是在图形化编程中的 AI 助手的最佳方向, 它可以显著减少幻觉。

更多的演示参考 演示视频(图形化编程环境中的 GPT-4o)

FAQ

如何改进 GPT-4o 的 lisp code 生成能力?

  • 提供语法的形式描述
  • 提供足够的代码样本用于 fine-tuning
    • 写一个爬虫从 Snap! 社区爬取所有项目, 用于 fine-tuning

接下来会做什么?

目前的 GPT-4o 版本只是 v1, 有很多工作值得继续探索:

  • embedding for blocks(help text)
  • 音频流(openai 暂未发布 api)
  • 视频流(openai 暂未发布 api)

你是如何构建 GPT-4o 库的?

使用 JavaScript function 引入 OpenAI JavaScript library

GPT-4o 库的每一个积木, 都可以展开阅读, 通过阅读这些自定义积木, 你可以弄懂它们是如何构建的。

如何将其转化为标准的 Snap! 库?

目前 GPT4o 库 已成为了 Snap! 中文版 内置库.

更多细节参考 如何将其转化为标准的 Snap! 库?

参考