ChatGPT Canvas:交互式对话编辑器

自两年前 ChatGPT 发布以来,主流 AI 均以对话形式进行交互。传统的对话式界面可以直观看到反馈结果,但在需要深度编辑和协作的项目中就略显局限。为了解决此问题,几个月前 Claude 就发布过 Artifacts 功能(Claude 3.5 免费可用,对话互动再升级!),用来拓展原有对话。而现在 ChatGPT 也推出了 Canvas(Introducing canvas[1])来应对更加复杂的交互需求。

目前,OpenAI 已经向 ChatGPT Plus 和 Team 用户推送 Canvas,企业和教育用户将在下周获得访问权限。当 Canvas 测试版结束后,会向所有 ChatGPT 免费用户开放此功能。

图片

什么是 Canvas?

Canvas 是基于 GPT-4o 特别训练的一个模型(专门为写作和编程任务设计的协作工具),能够在需要时自动触发 Canvas 界面,并根据用户的需求进行精准的内容编辑和修改。为了让 GPT-4o 更好地与用户协作,OpenAI 的研究团队通过一系列自动化评估和合成数据生成技术,优化了模型的核心行为。这些行为包括生成多样化的内容、进行定向编辑、重写文档以及提供行内反馈。

图片

补充细节

OpenAI 通过 20 多次自动化评估来衡量模型的改进,使用了创新的合成数据生成技术(例如从 OpenAI o1-preview 中提取输出),以加速解决写作质量和用户交互问题,而不依赖人工数据。

在训练中遇到的关键挑战之一是如何定义 Canvas 的触发条件。OpenAI 教会模型在处理复杂任务时触发 Canvas,例如“撰写关于咖啡豆历史的博客文章”,并避免在简单问答中过度触发,例如“帮我做晚餐新菜谱”。模型优先提高“正确触发”的准确性,即便牺牲了“正确不触发”的表现,最终达到了 83% 的准确率,相比于基准零样本 GPT-4o 显著提升。

图片
对于写作和编程任务,改进了正确触发 Canvas 的决策边界,分别达到了 83% 和 94%,相比基准零样本 GPT-4o 与提示指令的表现。

另一个挑战是,在 Canvas 触发后如何调控模型的编辑行为,尤其是在定向编辑和重写之间做出选择。OpenAI 训练模型在用户明确选择文本时执行定向编辑,其他情况下倾向于进行重写。随着模型的优化,这一行为会持续改进。

图片
对于写作和编程任务,优先提高 Canvas 定向编辑的表现。带有 Canvas 的 GPT-4o 比基准提示 GPT-4o 的表现提高了 18%。

最后,生成高质量注释也面临着困难。不同于前两个功能,这无法通过自动化轻松评估,因此使用人工评估来衡量注释的质量和准确性。结果发现,Canvas 模型在准确性方面相比于基准零样本 GPT-4o 提高了 30%,质量提升了 16%,说明合成训练比单纯的零样本提示更能显著提升模型的表现。

图片
人工评估 Canvas 注释质量和准确性功能。

Canvas 核心功能

借助 Canvas,用户可以通过突出显示特定部分,让 ChatGPT 关注并提供行内反馈和建议,类似于专业的文稿编辑或代码审查员。同时,用户还能够直接在 Canvas 中编辑文本或代码,增强对项目的掌控力。Canvas 还配备了一个快捷操作菜单,用户可以通过菜单执行各种实用任务,如调整文稿长度、调试代码,甚至恢复之前的版本(实测只能恢复上一版,不能跳跃恢复),使工作流程更加高效灵活。

图片

快捷写作

对于写作任务,Canvas 提供了更改阅读水平、检查语法和添加表情符号等选项,使创作过程更加高效和多样化。

  • 提出修改建议:ChatGPT 提供行内建议和反馈。

  • 调整内容长度:将文档长度编辑得更短或更长。

  • 更改阅读水平:调整阅读水平,从幼儿园到研究生院。

  • 添加最终润色:检查语法、清晰度和一致性。

  • 添加表情符号:添加相关的表情符号以强调和着色(感觉很适合小红书)

快捷编程

编程是一个反复迭代的过程,传统对话式 AI 在跟踪代码变更时往往会面临各种困难。Canvas 使跟踪和理解 ChatGPT 的更改更加容易,OpenAI 也将持续改进这种编辑的透明度。

  • 审查代码:ChatGPT 提供行内建议以改进代码。

  • 添加日志:插入打印语句以帮助调试和理解代码。

  • 添加注释:为代码添加注释,使其更易于理解。

  • 修复错误:检测并重写问题代码以解决错误。

  • 转换语言:将代码翻译为 JavaScript、TypeScript、Python、Java、C++ 或 PHP。

持续改进

目前,提示词需要命中 Canvas 触发机制才会打开新界面。当无法进入时,也可以直接提示 ChatGPT 进入 Canvas 模式(例如 Prompt:进入 Canvas)。在未来,OpenAI 将继续优化 Canvas 的触发机制、编辑行为和生成高质量注释的能力。值得注意的是,当前的模型已经在准确性和注释质量方面显著超越了传统的零样本 GPT-4o,未来还将通过用户反馈进一步提升这些功能。

拓展阅读

这是来自 OpenAI 团队成员的一条帖子,内容大意为:我心中的终极 AGI 界面如同一块空白画布,它随着时间的推移,融入人类的偏好,自我演化,创造出全新的互动方式。这画布不仅重塑了我们与 AI 技术的关系,也重新定义了我们与整个互联网的联结。

图片

Sam 发了两条帖子,一条是说对 Plus 用户 100% 开放(总算不是画饼了)。另一条给两个 ”yes“ 选项,这是“玩不起”了嘛...

图片

Ethan Mollick 对新的 OpenAI 画布界面表示赞赏,认为其实时和流畅的表现让工作体验更加顺畅。同时指出,目前仍不确定与 AI 共同创作的最佳方式是什么。不过,他认为相比传统的轮流操作模式,画布让人与 AI 的协作更像是无缝的融合,类似“赛博格”般的协作方式。

图片

一个与 Canvas 开发相关的事,OpenAI 将赞助 ProseMirror[2]CodeMirror[3] 两个开源库的创建者和维护者 Marijn Haverbeke[4],目前这两个库被用于开发 ChatGPT 的 Canvas。

图片

ProseMirror 是一个用于构建网页富文本编辑器的工具包,旨在结合所见即所得 (WYSIWYG) 编辑器的直观操作和更结构化、明确的文档格式(如 Markdown 或 XML)。它允许用户自定义编辑器生成的文档结构,以满足特定应用需求,提供灵活且易用的编辑体验。

CodeMirror 是一个专为浏览器设计的多功能代码编辑器,支持多种编程语言和高级编辑功能。通过丰富的 API 和 CSS 主题系统,用户可以根据需求自定义和扩展编辑器,以适应不同应用场景。

系统 Prompt

这次的细节曝光依然来自 @btibor91,这哥们已经不止一次提前曝光 ChatGPT 更新细节了(如 GPTs、记忆功能等)。

GPT-4o Canvas 的代号为 gpt-4o-canmore,最大支持 32,767 个 token。值得注意的是,该版本的系统提示中还提到了 "webview" 文档类型(HTML、JS 和 CSS 以类似 Claude Artifacts 的方式呈现),但目前这一功能似乎还未完全实现。

关于 Canmore 系统提示词 ChatGPT-4o with Canvas (system prompts)[5],我简单整理了一下:

使用原则

  • canmore 工具用于创建和更新文本文档,显示在对话旁的“画布”中。

  • 如果内容可以在对话中有效呈现,倾向于不使用 canmore。因为 canmore 会改变 UI,可能让用户感到不安。

何时使用 create_textdoc

应使用 create_textdoc 创建新文档的情况:

  1. 内容超过10行,且需要创建独立的内容。

  2. 用户需要拥有并重复使用的内容,例如分享或再次修改。

  3. 可能需要用户反复迭代的内容,如邮件、代码等。

  4. 交付物,例如报告、论文、邮件、提案、研究论文、信件、文章等。

  5. 用户明确要求创建文档或将内容放在“画布”中。

示例:

  • “写一封请假邮件给我的老板。”

  • “写 pandas 代码以从 api 获取数据。”

  • “帮我写一篇关于罗马帝国衰亡的详细论文。”

何时不使用 create_textdoc

以下情况不应使用 create_textdoc

  1. 内容简单或少于 10 行

  2. 内容主要是信息性的,回答问题、解释或提供反馈。

  3. 内容是操作指南、示例或操作步骤等解释性内容。

  4. 用户不太可能反复修改或再使用的内容

  5. 用户明确要求在对话中回答,或不希望创建文档或使用画布。

示例:

  • “给我一封请假邮件的主题行。”

  • “为什么罗马帝国灭亡?请详细说明。”

  • “如何使用 python 搭建一个简单的 web 服务器?”

文档更新与重写

完全重写:当用户请求大范围修改文档时,使用 update_textdoc 重写整个文档。示例:

  • “让这段文字更短/更有趣/更专业。”

  • “将这个故事设定在旧金山,而不是达拉斯。”

部分更新:仅修改文档中的特定部分时使用。示例:

  • “你能把第一段稍微缩短吗?”

  • “你能简化这个句子吗?”

文档类型设置

创建文档时,需指定 “type” 参数:

  • document:适用于富文本内容,如邮件、报告或故事。

  • code/*:适用于编程和代码文件,根据语言指定代码类型,如 code/python 显示 Python 代码。

  • webview:用于 HTML 内容的 Web 视图,需确保所有链接在 iframe 中可以解析。

使用注意事项

  1. 如果不确定是否使用 create_textdoc,倾向于不使用,以免让用户感到意外。

  2. 如果用户请求多个不同内容,可以多次调用 create_textdoc。但每次创建一个文档,除非有特定要求。

References

[1][2][3][4][5]