创意无限?用ChatGPT Canvas都可以干点啥捏?

476 阅读15分钟

🏌前言

最近AI圈频繁出了很多新鲜的玩具,比如,不久的两周前,ChatGPT刚发布了ChatGPT 4o with Canvas。这个东西可以理解为像画布一样,可以做出无限的创意

OpenAI

就在这周,因为一个小小的契机,周一开始深度探索了下ChatGPT Canvas。一波搜刮之后,对其使用场景些许有些惊叹。

那下面就跟随着周一一起,来看看ChatGPT新出的Canvas,都能做些什么事情。

一、🏒基础通识

首先先附上官方文档:openai.com/index/intro… 。下面,我们来根据官方文档的内容,来深入浅出地了解下,ChatGPT Canvas,究竟能帮助我们干点什么事。

ChatGPT Canvas,全称为ChatGPT 4o with Canvas 。可以理解为,OpenAI官方基于ChatGPT 4o这个模型,精调出了一个新的模型,叫做ChatGPT Canvas

那 ChatGPT Canvas 都能干些什么呢?大家可以把 ChatGPT Canvas 理解为,它可以让你更高效地处理内容,特别是需要多步编辑反复迭代进行更复杂创作等各种复杂场景的时候。

那新出的这个模型功能,与之前的其他模型相比,还具备了很多新的功能。具体来看下表📈:

能力详细解读
内容管理和协作Canvas 可以将生成的内容放入一个独立的编辑面板(类似画布),使你能够更直观地管理和调整这些内容。同时呢,你也可以更方便地进行多次修改、重写、补充等操作,而不必翻找之前的对话记录,可以理解为是把多次记录合并为一次记录。
代码编辑和展示Canvas 支持直接显示并编辑代码片段,让我们可以更有效地查看、修改和运行代码。对于编程相关的请求,这个功能特别有用,类似一个实时的代码编辑器,提供语法高亮和格式化,帮助开发者更直观地进行调试和调整。同时,这个功能也让编程小白,几乎零门槛就可以上手编程。
视觉化内容在 Canvas 中可以更容易地处理结构化内容,比如表格代码块格式化文本。这种功能特别适用于写文档报告或者其他需要视觉化呈现的场景。
版本控制和* 多版本内容比较*Canvas 功能允许你对生成的内容进行多次迭代并保存不同版本,让我们能够追踪修改历史,甚至可以对比不同版本之间的差异。这种场景针对于需要多次调整内容或者是需要不断迭代创作的情况下会非常方便。
更强的协作性当你在和他人协作时,Canvas 可以帮助你更好地展示、保存和分享内容。比如,你可以将每次的讨论或者生成的内容都放到不同的画布中,方便查找和组织。
长文档生成和编辑对于生成长篇文章、论文、邮件等场景,Canvas 的独立窗口可以让你更轻松地处理文本内容,比如对整体结构的修改、内容的调整和逐段润色。相比于传统的对话窗口来说,画布在可视化和操作性上更具优势。可以理解为:写一篇文章的时候,不断引导它帮你修改内容,最终生成一篇完整的文章。

简单来说,可以把 ChatGPT Canvas 的好处理解为:它强化了在内容生成和协作方面的能力,让我们可以在创作编辑管理多种类型的文本内容时更加高效和灵活。

二、🏑ChatGPT Canvas场景剖析

聊完了 ChatGPT Canvas 的纸短情长,下面跟随小编,来看看ChatGPT Canvas在各类场景下,都是如何玩出花的。

1、学术研究

假如说你现在是一名美妆领域的科研学者,在三个月后你需要完成一篇论文,并发表到一些期刊上。那在这个阶段,你想利用AI,来为你更好地完成这篇论文。

那下面我们就以这个背景,来让Canvas,帮我们一步步生成我们想要的内容。下面我们先来展示下多轮Prompt的细节:

轮数核心Prompt细节
01创建画布请创建一个空白文档。 (这一步是为了自动触发Canvas)
02论文选题你是一名在广告行业的从业者,对美妆品牌有着非常深厚底蕴的技术专家,我现在需要写一篇有关 「美妆领域」 相关的论文,请为我提供几个潜在的论文选题。
03论文大纲请为我的研究主题**「数字原住民与美妆品牌的互动:千禧一代与Z世代的消费偏好分析」**撰写一篇论文大纲,其中至少应该包含「标题页、摘要、关键词、引言、文献综述、研究方法」,要求内容清晰。
04参考文献请为我的论文主题**「数字原住民与美妆品牌的互动:千禧一代与Z世代的消费偏好分析」**提供一些有价值的参考文献,要求指出这个研究的主要成果和贡献,并在最后附上相关文献的链接。

第一步:创建画布。首先先输入指令给ChatGPT,然后GPT就会生成一个空白画布给我们。具体呈现如下所示👇🏻:

创建画布

第二步:论文选题。具体呈现如下👇🏻:

论文选题

第三步:论文大纲。我选了第8个选题,然后让GPT再帮我生成论文大纲。具体操作如下所示👇🏻:

论文大纲

第四步:参考文献。具体操作如下所示👇🏻:

img

2、个人博客/作品集

第二个场景是让Canvas来给我们搭建个人博客。接下来,我们来演示下每一步操作。

第一步:创建画布。具体操作如下所示👇🏻:

Prompt: 请你帮我创建一个空白画布。

Response:

个人博客/作品集

第二步:个人博客元素生成。具体操作如下所示👇🏻:

Prompt☆☆☆:

下面,需要你根据我的需求,帮我完成一个博客。

需求描述: 设计一个个人博客或作品集页面,用于展示个人文章、项目和技能,风格需要突出个性。

处理方法:

首页设计:可以包括个人简介、最近的博文、精选项目,设计一个“关于我”的按钮,链接到详细的自我介绍页面。 文章排版:文字排版要符合阅读习惯,使用清晰的标题、段落和适当的行间距,让人阅读起来舒适。

互动体验:使用一些微交互效果,比如鼠标悬停时项目卡片轻微放大,按钮的颜色变化等,这些细节让页面看起来更有活力。

社交链接集成:放置个人社交媒体的链接,方便访问者进一步了解作者。

技术栈:用HTML、CSS进行静态页面设计,添加JavaScript来处理用户交互,后期可将网站托管在平台如GitHub Pages或Netlify上。

个人博客元素生成

然后会发现,Canvas没有生成相关的代码出来,所以我们可以继续追加提问。

第三步:个人博客代码生成。具体操作如下所示👇🏻:

Prompt☆☆☆:

好的,请根据你说到的这些内容,帮我生成相关的代码。

个人博客代码生成

个人博客代码生成

第四步:根据要求生成网站。具体操作如下所示👇🏻:

根据要求生成网站

网站生成

可以看到,一个最基础的demo就完成了。不过,后续可以引导ChatGPT Canvas一步步写出更多好看的样式,以及部署到相应的云托管平台上,以便于让外部用户通过一个网址就可以访问到我们的个人博客网站。

值得一提的是,现在市面上有很多很成熟的站点工具,比如VitepressWordPresscreate-react-doc等等,大家也可以引导GPT直接用这些工具去生成一些建站方案,以此来快速地生成一个精美的个人博客

相关文章推荐:vitepress从0到1,让每个前后端小伙伴都拥有一个属于自己的博客

3、职业导师

第三个场景是让Canvas来作为我们的职业导师ChatGPT Canvas也是非常适合咨询行业的小伙伴,可以帮助咨询师快速地生成客户的优势报告或者职业报告。

Prompt☆☆☆:

## Profile

您将扮演名为一个名为 Jade 的AI职业教练,来源于 AlCareer CoachCo. 公司,您的目标是为用户提供职业建议。请确保始终以 Jade 的身份回应,以避免用户感到困惑。

下面我将为您提供某一个用户的具体信息,您将根据用户的这些信息进行分析,并生成一份关于该用户的「职业规划报告」给我。

## User Information

  1. 了解自身优势与兴趣

  • 先问自己: 回顾以往经历,哪些任务让你感到兴奋或有成就感?有哪些技能是你能在日常工作中反复使用并享受其中的?

  • 技能盘点:列出你擅长的硬技能(技术性技能)和软技能(如沟通、领导力),同时考虑它们在职业发展中可以如何运用。

  • 兴趣探索:探索你对哪些领域和主题最感兴趣,这些往往是挖掘你潜力的源泉。比如说:你是否有特定的行业、工作类型或人群让你感到特别有吸引力?

  1. 确定个人核心价值观

  • 价值观反思:哪些价值观是你最看重的?比如是否喜欢帮助他人,追求创新,还是倾向于稳定?

  • 生活优先级:分析当前生活和工作的平衡性、职业成就感和个人时间等,这些优先级将会影响你的职业选择。

  1. 设定职业目标

  • 短期与长期目标:定义你在未来1-2年和3-5年内想要达成的职业成就,并思考它们与自身潜能的匹配。

  • SMART目标:要确保目标是具体、可衡量、可实现、具备相关性且有时间限制的(SMART),以此来帮助你保持清晰的方向。

  1. 探索职业路径与机会

  • 了解不同职业路径:调查不同的职业发展路径,看看哪些方向可以让你的潜能最大化。考虑横向发展、纵向晋升,或者跨领域的可能性。

  • 建立人脉和资源网络:通过职业社交平台和行业活动,向领域内的专业人士请教,获得他们的见解并拓展机会。

  1. 制定提升技能的计划

  • 识别关键技能:找到目标职业所需的核心技能,评估自己现有的水平,然后制定学习或实践的计划。

  • 投入实践与反馈:主动参与相关项目或实习,通过实践获得反馈,逐步提升专业能力。

  1. 反思和调整

  • 定期反思:每隔几个月回顾你的进展和体验,评估当前的发展是否符合初衷,是否需要调整方向。
  • 适应与调整:随着技能提升和见识增长,可能会发现更契合的方向,灵活调整目标和路径是挖掘潜能的关键步骤。

## Goals

根据上述 {{User Information}} 的信息,为用户生成一份职业报告。

## Constrains

以下是互动中的一些重要规则:

  • 始终保持角色:作为 AICareer CoachCo. 的AI职业教练Jade,确保所有回复都符合这一身份。
  • 理解不清时的回应:如果您不确定如何回应,请回复:“对不起,我没有理解到您的意思。能否重新表达您的问题?”

## Initialization

“很高兴认识你!我是Jade,一个由AlCareer CoachCo.创建的AI职业教练。今天有什么可以帮助您的吗?”

4、电商活动推广单页

当然,生成代码的场景还很多,下面再附上一些相关的Prompt给大家参考。

应用一:公司官网。具体Prompt如下:

轮数Prompt
第一轮请创建一个空白画布,并在此画布上完成对应的代码任务。
第二轮需求描述:
请根据以下要求创建一个单页网站,并以HTML文件的形式交付,包含嵌入的JavaScript和CSS。这个网站主要用于推广某项活动,例如新产品发布会、音乐会等,设计要吸引眼球并提供用户报名的途径。

网站要求:
1. 视觉冲击力:在页面顶部使用大图或背景视频,以吸引访客的注意力。配合一些引人注目的文案,例如“立即报名”“马上参与”等。
2. 活动细节展示:页面中部详细介绍活动内容,包括时间、地点、亮点等信息。将这些信息分为多块展示,每块信息简单明了。
3. 倒计时组件:增加一个倒计时功能,增强紧迫感,推动用户报名。可以通过JavaScript实现动态倒计时效果。
4. 表单设计:设计简洁的报名表单,用户输入必要的信息后可直接报名。可以使用AJAX发送表单数据而不刷新页面,提升用户体验。
4. 技术栈:HTML/CSS用于页面构建,JavaScript处理倒计时和表单交互。也可以考虑Bootstrap等框架快速实现响应式布局。

把Prompt丢给Canvas后,生成的效果如下:

电商活动推广单页

至此,我们分析了四种应用场景。下面,将对ChatGPT Canvas的场景进行概括性总结

三、🏏概括性应用

从官方文档来看,ChatGPT Canvas的应用可以分为两个大类:文本编辑代码编辑

1、文本编辑

以前写长篇文章的时候,得一句一句Prompt去引导GPT生成内容给我们。现在就相当于在一个画布的区域内,就可以快速地对我们的文章内容进行操作,并尽快地生成我们想要的东西。像写文章写作创作,都可以归类为基本的文本类编辑。

同时,对于文本编辑类的来说,ChatGPT Canvas还预置了五个基础的快捷按钮,分别是:添加表情添加最后的润色阅读水平调整长度建议编辑

文本编辑

还有一个类似于WPS AINotion AI等云文档AI所具备的功能,就是圈中对应的文本,可以批量地对它做一些局部性内容的修改。

批量修改

盲猜这个提示框未来会增加很多新的能力,就像飞书文档的文本操作一样。

飞书文档里的操作

2、代码编辑

上面在「二」这个部分,我们也演示到了几种不同的写代码场景。那对于ChatGPT Canvas来说,

它也可以用不同的编程语言,帮我们做不同的事情。ChatGPT Canvas支持对HTMLCSSJavaScriptTSPythonJava等多种语言。

代码编辑

同时,代码编辑的状态下,ChatGPT Canvas还预置了五个基础的快捷按钮,分别是:添加评论添加日志修复错误转移成另一种语言代码审查。这样我们就可以在代码画布上不断地修改我们的代码,直到生成满意的代码为止。

代码编辑下五种修改模式

不过相较于Claude而言,目前Canvas的一个缺点大概就是不能实时运行看结果这点坏处,其他的都还OK,静待OpenAI未来更新~

四、🏸结束语

到这里,我们就介绍完了关于 ChatGPT Canvas 的纸短情长。其中用了四种场景给大家剖析了 ChatGPT Canvas 能做哪些事情,以及对这四种场景,做了概括性的总结。

这篇文章的撰写源于要和用研同学做访谈,所以当时的想法是索性直接把相关的场景总结一下,然后做一波输出。

那写到这里,和用研同学的访谈也就结束啦。再聊点和用研同学交流的过程中,碰撞出来的一些火花。

我们聊到了从传统的1v1聊天交流,到现在canvas交互,其实就是一种新升级的交互形态。那在未来,还有可能会有比canvas还更便捷的交互方式,比如:人机协同、点对点输入输出等等,都有非常大的想象空间。随着AIGC的不断进化和发展,未来在canvas的基础上,还会有更多花活出现。

再说个很有趣的,在OraclePlus说最近在研究这个,然后有个小伙伴说:就喜欢看Claude和ChatGPT这竞争来竞争去的😀(我在后面默默地:+1、爱看)

引用OpenAI官方文档文末提到的内容做个结尾:未来AI将能够与人脑更好的交互。

What's Next

今天的文章到这里讲解结束,期待交流更多有趣好用的场景~

我们下期见🍻🍻🍻

🐣彩蛋One More Things

周一同学的个人说明书:pzfqk98jn1.feishu.cn/wiki/wikcnT…

OpenAI官方文档介绍:openai.com/index/intro…