百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

OpenAI重磅发布交互界面canvas,让ChatGPT成为写作和编程利器

myzbx 2025-01-11 15:35 19 浏览

机器之心报道

机器之心编辑部

OpenAI 刚刚融资,就迫不及待开始证明自己了。

今日凌晨,OpenAI 宣布推出类似 Anthropic 的 Artifacts 的应用 canvas,并称「这是一种使用 ChatGPT 写作和编程的新方式」。

在 Claude 中试过 Artifacts 的朋友都知道,这能极大提升 LLM 输出结果的表现力,其支持输出文本文件、代码、网页、SVG 等等。此前风靡一时的「汉语新解」便是基于 Claude 的 Artifacts 功能。但让 ChatGPT 用户感到遗憾的是,Artifacts 上线三个多月了,OpenAI 一直没有跟进,以至于一些开发者自行开发发布了自己的开源版本。

现在,用户的呼声终于获得了响应,于是纷纷点赞。也有人开玩笑地表示 OpenAI 这是打不过 Claude 便加入。

已有用户分享了自己使用 canvas 的惊喜成果,比如用户 @bilawalsidhu 分享自己让 ChatGPT 使用 ThreeJS 创建超立方体查看器过程:

在 canvas 这个界面,你可以与 ChatGPT 一起完成写作和编码项目,而不再局限于简单的聊天。canvas 是一种新的交互方式,也是 OpenAI 推出 ChatGPT 以来的首个重大视觉界面更新。

canvas 会在单独的窗口中打开,方便用户与 ChatGPT 一起协作完成项目。canvas 的 Beta 版本为用户提供了一种全新的合作方式:你不仅能够通过对话进行创作,还能与 ChatGPT 成为并肩作战的伙伴,一起创造和完善。

canvas 由 GPT-4o 支持,在 Beta 期间可以在模型选择器中手动选择。不过,现在 Beta 版本只提供给 ChatGPT Plus 与团队用户。企业和教育用户将在下周获得访问权限。ChatGPT 免费用户需要等到 canvas 正式发布后才能使用。

我们先一睹 canvas 有哪些惊艳之处。

与 ChatGPT 更好地协作

和 ChatGPT 聊天对于我们来说已经是十分简便的信息获取方式,这也包括写作与编码。不过当你想要及时对写作内容或者编码内容进行修改时,对话方式可能就显得力不从心了。

canvas 的出现就是为了解决这个难题。

在这个新的界面中,你可以通过高亮的方式,告诉 ChatGPT 具体需要关注什么,让它更精准地理解你的用意。这就类似于编辑,你可以在全部上下文中具体地提出反馈和建议。

此外,你的调整方式也十分便捷,直接编辑代码或文本都不成问题。你的项目,你做主。canvas 还提供了快捷菜单,可以让 ChatGPT 帮你调整文本长度、调试代码,或者快速执行其他实用操作。如果想要之前的版本,一键返回即可恢复。

写作快捷操作,图源:https://openai.com/index/introducing-canvas/

当 ChatGPT 发现某个场景中 canvas 能帮上忙时,它会自动打开。你也可以在提示中直接加一句「使用 canvas」,这样 ChatGPT 就会切换到 canvas 界面,帮助你更方便地处理现有项目。

,时长

00:51

canvas 的编程能力

代码是一个迭代过程,但是在聊天之中,很难跟踪代码的改进过程。canvas 让我们可以更轻松地跟踪和理解 ChatGPT 的修改过程,OpenAI 也承诺「计划继续提升这类编辑过程的透明度」。

canvas 目前提供了以下编程快捷操作:

  • 审阅代码:ChatGPT 可提供改进代码的行内建议;
  • 添加日志:插入 print 语句来帮助用户进行调试和理解代码;
  • 添加注释:为代码添加注释,让其更容易理解;
  • 修复 bug:检测和重写有问题的代码,以修复错误;
  • 支持多语言导出:可将用户的代码转译成 JavaScript、TypeScript、Python、Java、C++、PHP 等语言。

将模型训练为协作伙伴

OpenAI 的研究团队对 GPT-4o 进行了训练,以使其能够作为创意合作伙伴进行协作。该模型知道何时打开 canvas,何时进行目标性编辑,以及何时需要完全重写。同时,它还能够理解更广泛的上下文,从而提供精准的反馈和建议。

为了支持这一点,研究团队开发了以下核心行为:

  • 在写作和编码时触发 canvas
  • 生成多样化的内容类型
  • 进行目标性编辑
  • 重写文档
  • 提供 inline 评论

OpenAI 通过 20 多项自动化内部评估来衡量进展,并使用了新颖的合成数据生成技术,例如从 OpenAI 的 o1-preview 中提取输出,来对模型进行核心行为的后训练。这种方法能够快速应对写作质量和新的用户交互需求,从而无需依赖人工生成的数据。

对研发团队来说,一个关键挑战是何时触发 canvas。OpenAI 训练模型在像「写一篇关于咖啡豆历史的博客文章」这样的提示词下打开 canvas,同时避免对像「帮我做一道新的晚餐食谱」这样的一般问答任务进行过度触发。

在写作任务中,他们优先改进了「正确触发」的情况(以牺牲「正确不触发」为代价),达到了 83%,相较于作为基线的零样本提示词式 GPT-4o 有了显著提升。

值得注意的是,此类基线的质量对特定提示词非常敏感。不同的提示词可能导致基线在表现不佳的同时,呈现不同的错误分布。

例如,在编码和写作任务中会出现「均匀地不准确」情况,导致不同类型的错误分布和表现不佳的形式。在编码方面,OpenAI 有意让模型在触发方面偏向保守,以避免干扰高级用户的体验。之后,OpenAI 也是承诺将继续根据用户反馈对其进行优化。

针对写作和编码任务,OpenAI 改进了准确触发 canvas 决策边界的能力,分别达到了 83% 和 94%,相较于作为基线的零样本提示词式 GPT-4o 有明显提升。

第二个挑战在于对模型在触发 canvas 后的编辑行为进行调优,特别是决定何时进行目标性编辑,何时重写整个内容。

OpenAI 训练模型在用户通过界面明确选择文本时进行目标性编辑,否则就更倾向于重写内容。随着模型的不断完善,canvas 的编辑行为也在持续演变。

针对写作和编码任务,OpenAI 优先优化了 canvas 的目标编辑功能。带有 canvas 的 GPT-4o 在性能上比基线的提示词式 GPT-4o 高出 18%。

最后,训练模型生成高质量评论需要经过仔细的迭代。与前两个可以轻松适应自动化评估并辅以详细人工审查的案例不同,自动衡量评论的质量尤其具有挑战性。

因此,OpenAI 使用人工评估来衡量评论的质量和准确性。他们所整合的 canvas 模型在准确性上比使用提示词指令的零样本 GPT-4o 高出 30%,在质量上高出 16%。

这表明合成训练显著提升了相较于带有详细指令说明的零样本提示词下的响应质量和行为表现。

canvas 目前仍处于早期测试阶段,OpenAI 后续计划快速提升其功能。

至于它和 Artifacts 究竟谁更能赢得用户亲睐,就让我们拭目以待吧,相信刚拿了一大笔投资的 OpenAI 也应该不会让用户失望。

参考链接:

https://openai.com/index/introducing-canvas/

https://twitter.com/OpenAI/status/1841887707020329173

https://techcrunch.com/2024/10/03/openai-launches-new-canvas-chatgpt-interface-tailored-to-writing-and-coding-projects/

相关推荐

以文本的方式绘制简单的SVG流程图——flowchart.js

介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的,因此可以重复使用节点,并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...

全国首套构网型SVG在木垒投运

中新网新疆新闻1月5日电(翟文辉)12月29日,全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网,本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...

Popmotion – 小巧,灵活的 JS 运动引擎

Popmotion是一个只有12KB的JavaScript运动引擎,可以用来实现动画,物理效果和输入跟踪。原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用。Popmoti...

零基础教你学前端——43、初识SVG

解决网站图标问题的最佳方案——SVG!SVG是一种基于XML语法的图像格式,英文全称是:ScalableVectorGraphics,即可缩放矢量图,是W3C的一项建议。我们用手机拍摄...

2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF

2.3文件格式全解:PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则,决定了:-信息保留程度(图层/透明度/动画)-压缩方式与画质损失-跨平台兼容性-...

vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升,前端开发再提速!

前言:Vite6.3.2来了!2025年4月18日,Vite团队正式发布了v6.3.2版本!虽然是一个小版本更新,但修复了多个关键问题,并带来了性能优化和稳定性提升,让开发体验更丝滑!如果你还...

一篇文章带你了解SVG 蒙版(Mask)

SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见,以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析:本示例使用ID=mask1定义...

SVG实现的流程图绘制

一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作(选择、自动插入、开始结束、普通活动、子活动、块活动、路...

解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享

前言当我们访问网站时,如果访问到不存在的路径时,会出现404错误。为了避免给访问者带来不良体验,设计网站时通常会在页面上展示“404页面不存在”的提示,并引导用户进行返回首页等操作。因此在建立网...

交互设计师做好动画后,提交给开发的文档有哪些?

谢邀!简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有:Gif动画视频动画Web动画,而Web动画又包括:CSS动画、JS动画(Canvas动画、原生JS动画API)、SVG动画等...

Motion for Vue:为Vue量身定制的强大动画库

在前端开发中,动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库,但真正能做到高性能、易用且功能丰富的并不多。今天,我们要介绍的是MotionforVue(motion-v),...

Web开发人员的福音!8个实用的SVG工具

SVG可缩放矢量图形(ScalableVectorGraphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...

一键画波浪线、一键多图片调色?这3个网站好玩到停不下来

作为一个经常收集网站的PPT设计师,无意中发现了一些超级有趣的网站。只要你动手能力足够强,就一定会利用它做出创意作品。不说废话,直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...

vite 6.2.5 更新速递:告别SVG路径Bug,构建效率再提升!

Vite6.2.5更新公告2025年4月3日,Vite团队正式发布了Vite6.2.5版本!此次更新虽然是一个小版本迭代,但修复了一个关键问题,涉及SVG文件路径检查,对前端开发者尤...

DrawSVG – SVG 路径动画 jQuery 插件

jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画,用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...