查看原文
其他

前端同学都是如何玩转 ChatGPT 的?

前端大全
2024-08-23

作者:木头就是我呀

https://juejin.cn/post/7199607659992907832

ChatGPT忽然登上了国内各大平台的热搜榜,应该在去年11月末的时候就有不少同学了解并使用过,那个时候它刚刚问世,在互联网圈子里有了很大的热度,但是对于大众来说,还是不太了解的。

我在去年的时候就跟风注册了一波,其回答问题的准确性编码能力让我吃惊。不得不说,ChatGPT作为一个新兴的AI产品,和老美的电影里的人工智能有那么一些相像了,甩了三问一不知的小爱、小度和小E不止一条街。

最近它忽然就🔥出了圈,让很多人惊喜的同时,也让很多人产生了担忧,下面我们一起来聊聊它,以及如何使用它来让我们生动有趣的编码生活变得更有趣起来(斜眼笑)。

HOT! HOT! HOT! 🔥 🔥 🔥

首先我们先来看下最近的热度来的有多么的突然,那简直是太炸裂了,语言不好描述,我收集了一些常见平台的指数截图,大家可以感受一下:

百度指数

点击跳转到百度指数[1]

image.png

注意,近期的峰值可比去年11月底刚推出的时候高的不是一星半点。

image.png

Google Trends

点击跳转到Google Trends[2]

image.png

注意,搜索热度最高的国家是中国,这还是在有墙的前提下,看来中国人的忧患意识不是一般的强

微博指数

image.png

ChatGPT是什么❓

在这个产品推出之前,大家应该听说过他们公司的一些其他产品,比如:

  • DALL·E 2:openai.com/dall-e-2/[3]

这是一款图像AI,主要功能有“根据文案绘画”、“无限拓展图像的边界”...

  • CodeX:openai.com/blog/openai…[4]

这是一款自然语言转化成代码的AI产品,它就是之前比较火的微软的GitHub Copilot的驱动模型。

包括ChatGPT在内,他们几个都是衍生自GPT-3的产物,那么GPT到底是什么意思呢?

2018 年 6 月,OpenAI 发布了一篇关于通用语言模型的研究(openai.com/blog/langua…[5] ),虽然全文都没有出现过 GPT 这个名词,但其实它就是 GPT-1。

这篇文章提出了一个叫作Generative Pre-traing的概念:生成式预训练

和传统的以任务为导向的训练方法不一样,生成式预训练不需要人工标注,比如我们之前分享的《手把手带你实现 ”在浏览器上进行目标检测“ \- 掘金[6]》,里面就有需要人工在图片上标注二维码的位置,生成数据集告诉AI,然后AI再根据这些去学习;再比如说你想训练一个可以做中英文翻译的 AI,你就需要提前准备好大量的中英文对照的句子给 AI 去学习。

生成式预训练的思想就不一样了,我直接拿着人类已有的现成的文字资料去训练 AI,怎么训练呢?我就让 AI 根据上文去续写下文,比如一句话,张三每天都很认真地学习,老师们都夸他是好____,“好”字后面我让 AI 去写,如果 AI 写出来的是“学生”,这就和原文一样,那就判断正确了,要是不对,就继续训练它朝着对的方向去走,这种训练方式的好处,就是研究人员不再需要花大量的资源去人工准备答案,每句话里下一个词就是上一段话的答案,理论上人类现有的所有文字资料,都可以作为训练数据直接喂给 AI 去学习,这就远远大于现有的任何人工制作的数据集

因为这个预训练过程不需要人工编写答案,所以人类现有的所有文字信息,小说、典籍、歌词、论坛里的回帖,甚至是软件代码,只要硬盘装得下,都可以喂给 AI 模型去学习,不断地增大神经网络模型的参数量,不断地增加训练数据里的文本量,预训练模型的能力就会继续增长,用标注好的数据引导它去做各类具体任务的水平也会相应提升,这种生成式预训练,与一种叫做变形器Transformer的模型结构相结合,就成了 Generative Pre-trained Transformer,取三个字母缩写,就是 GPT

此后 2019 年的 GPT-2、2020 年的 GPT-3,核心迭代思路都是利用“钞能力”扩大模型规模,GPT-2 的参数总量是 15 亿,GPT-3 更是提高到了惊人的 1750 亿,而截至今天,这条“钞能力”路线依然没有摸到天花板, 还在往下继续

image.png

以上文案和数据部分来自B站UP主 @林亦LYiChatGPT诞生记:先捞钱,再谈理想|OpenAI翻身史\_哔哩哔哩\_bilibili[7]  讲解的特别好,大家感兴趣的可以看一下!

ChatGPT能做什么❓❓

ChatGPT不单是聊天机器人,它还能进行撰写邮件、视频脚本、文案、翻译、代码等任务,我尝试使用它来进行了一些测试,下面是一些示例截图:

写邮件

image.png

写短视频脚本

image.png

写代码

image.png
image.png

案件分析

image.png

优化周报

image.png

写小诗

image.png

......

💻 ChatGPT ✖️ 前端

作为一名前端开发同学,我这段时间就在想,在日常生活里我如何使用ChatGPT来帮我做些什么事情来提高开发效率呢?最后想出了几个场景以及我的示例,大家可以参考一下:

一、技术调研 + 文档编写阶段

1、Cover不住的需求点应该用什么技术点来实现比较合适

以我最近在做的需求为例,我需要实现一个比较复杂的树图,类似XMind的那种脑图,我就问了一下它,得到的结果还是比较令我满意的即使还是有些问题存在

image.png
image.png
image.png

2、不确定的技术方案(1)

image.png
image.png

2、不确定的技术方案(2)

之前实现过一个浏览器插件,可以一键识别你当前屏幕中所有的二维码,并且将识别结果返回到对应的位置,我想以这个需求为例,让它帮我想想方案。之前的文章:手把手带你实现 ”在浏览器上进行目标检测“ \- 掘金[8]

插件效果:

image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png
image.png

二、编码阶段

1、正则表达式就不需要自己去写了

image.png

2、代码优化(1)

image.png
image.png

3、代码优化(2)

image.png

4、我想实现一个XX功能,帮我在github上找一个demo

image.png

三、自测阶段

1、帮我测试一下XX方法

image.png
image.png

2、运行不及预期,帮我看看有什么问题

image.png
image.png

四、读源码

image.png
image.png

Σ(⊙▽⊙"a 下面的这些回答把我惊艳到了!它是真的懂这些代码!而且还能帮我找类似的代码!!!

image.png
image.png
image.png

五、不错的VsCode插件

1、ChatGPT中文版

image.png

不太推荐,当使用之后,就无法使用上下文的方式和ChatGPT交流了,不过因为是中文版,可以装上玩玩)

2、ChatGPT 👍

image.png

推荐!,简单使用下来比较顺畅,该有的快捷功能也都有,最重要的是聊天时是支持上下文的。

image.png

使用展示图:

image.png

🙋🏻 指令的美学

如何和ChatGPT这一类的AI沟通,他们叫做“指令”,好的指令和坏的指令得到的效果是非常不一样的,如果经常使用一些宽泛的生活用语和它交流,那么得到的结果往往不尽人意,甚至和手机里的语音助手没太大的区别。

我们先看一个不太好的例子:

image.png

我们可以看到,它的回答和网上搜索出来的结果没什么两样,当看到这种结果之后,很多人就会觉得:“啊,它不过如此,对我帮助不大”,可是当我们换一种方式来问它,结果可能让你惊艳到,我们重新问

image.png
image.png
image.png

可以看到,当我们向它发送一些比较专业一些的指令的时候,得到的结果往往也是更专业的,同样,这种结果也是更有参考意义,也是我们更想要的结果。

在发送指令前,希望你的指令最好满足以下几点:

  • 内容清晰(省去不必要的文字,每个字尽可能都有用)
  • 任务定义明确(帮我制作表格,我要你提供事物的重量和数量)
  • 要求具体(比如我要一个清单、我要计算我的TDEE、我要去超市你帮我准备xxx)
  • 具有迭代思维(一句话可能问不出来你想要的结果,你可以持续性的和它聊,基于一个或者几个点深入一下)

以上参考:抖音@绝对社,对于如何使用更精确的指令讲解的特别好!推荐大家去看~

🔫 杀死那个ChatGPT?

1、For 教育

在美国,有很大比例的学生拿ChatGPT写作业、写论文、考试,而且ChatGPT给出的答卷往往成绩都很棒~

在一项由宾夕法尼亚大学沃顿商学院Christian Terwiesch教授进行的研究显示:ChatGPT能够通过沃顿MBA课程的期末考试。这位宾大教授1月17日发表的名为《ChatGPT能否获得MBA学位》的论文中称:经过实际测试,其考试得分介于B-和B之间。

该教授指出,ChatGPT“在解决基本运营管理和流程分析问题方面,包括基于案例研究的问题方面都表现出色”。机器人给出的解释也非常优秀,它还“非常擅长根据人类提示修改其答案”。

鉴于这一系列情况,斯坦福大学终于坐不住了。他们的研究人员已经开发了一种名为DetectGPT的工具。这工具可以帮助教师识别使用ChatGPT或其他类似的大型语言模型 (LLM) 生成的内容。(魔法才能打败魔法😎

号称“干翻媒体人”的ChatGPT,已被多家出版机构“封杀”[9]

多家期刊、出版机构禁止将ChatGPT列为论文合著者[10]

ChatGPT遭美国多市学校封杀[11]

2、For 程序员

它面进Google了!你怕不怕!它的工资可能比你还高哈哈哈!

18万美元offer!ChatGPT通过谷歌L3入职测试,人类码农危?[12]

ChatGPT 通过谷歌 L3 工程师入职测试,年薪 18 万美元[13]

ChatGPT版必应搜索悄悄上线又下线,但评测已经出炉[14]

3、For 其他岗位

从这周的搜索数据趋势来看,很多人还是怕了的,“它究竟会不会代替我!”

瑟瑟发抖?基于ChatGPT的AI律师太过强大 被人类律师疯狂阻挠[15]

放心 ChatGPT们不会完全取代会计,也不会完全取代审计,理由如下\_会计审计第一门户-中国会计视野[16]

ChatGPT来编辑部上班了,这篇推送它写的[17]

🔚 结束语

如上,ChatGPT像一个💣一样引爆了全网的讨论热潮,但是这个热潮终将会慢慢褪去,在兴奋的向他人疯狂安利它之余,我也看到了很多人的思考,综合一些我自己的思考,总结了以下几点:

  • 它的出现真的会让很多人失业吗?
  • 它的出现无疑是划时代的,当前时间节点还正处在“新”时代的前期,我应该怎样接受它的存在并且高效且合理的使用它来为我服务
  • 未来AI遍地的时候,究竟还需要什么样的人才?中国式教育下出来的高材生在那个时代还有什么竞争力
  • 这应该是一波风口,新的风口下,会出现什么新的岗位,未来的社会又会发生什么样的变化?
  • 未来互联网上发言的AI是不是会超过真实的用户?如果出现一些谁声音大谁就有理的公共议题讨论会怎么办?

当然,以上的一些想法会比较偏保守一些,后期肯定也会有更多的法律或者条款来限制AI的野蛮生长,前段时间马斯克也讲到“人工智能比核弹更可怕,要成立AI监管机构”。

不过作为一个普通用户来看,目前的ChatGPT还是一个值得一试的产品,它真的可以为我们提升蛮多的效率。

目前大家使用的ChatGPT是从GPT3.5衍生出来的AI产品,其训练集并不是互联网上实时的数据,而是来自截止到2021年的数据

image.png

它还处于一个婴儿阶段,还有很多不成熟的地方,据OpenAI统计,从2012年到2020年,人工智能模型训练消耗的算力增长了30万倍,平均每3.4个月翻一番,超过了摩尔定律的每18个月翻番的增速😱。

畅想一下未来~ 我们可以和钢铁侠一样,拥有一个知晓所有事物的Jarvis,你在工作、生活中的时候来上那么一句:帮我看看这段代码有没有什么漏洞、帮我想一下xx功能怎么实现、我想做一个xxx,帮我画个图纸,图纸画好之后,交给3D打印机,打印好之后告诉我...

而且这个未来,应该很近。

参考资料

[1]

https://index.baidu.com/v2/main/index.html#/trend/chatgpt?words=chatgpt: https://link.juejin.cn?target=https%3A%2F%2Findex.baidu.com%2Fv2%2Fmain%2Findex.html%23%2Ftrend%2Fchatgpt%3Fwords%3Dchatgpt

[2]

https://trends.google.com/trends/explore?date=today%203-m&q=chatgpt: https://link.juejin.cn?target=https%3A%2F%2Ftrends.google.com%2Ftrends%2Fexplore%3Fdate%3Dtoday%25203-m%26q%3Dchatgpt

[3]

https://openai.com/dall-e-2/: https://link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fdall-e-2%2F

[4]

https://openai.com/blog/openai-codex/: https://link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fblog%2Fopenai-codex%2F

[5]

https://openai.com/blog/language-unsupervised/: https://link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fblog%2Flanguage-unsupervised%2F

[6]

https://juejin.cn/post/7044717306823311368: https://juejin.cn/post/7044717306823311368

[7]

https://www.bilibili.com/video/BV1Te4y1w7D6/?spm_id_from=333.337.search-card.all.click&vd_source=99acb313a9a41c2ae58ef6a3e44dfa74: https://link.juejin.cn?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2FBV1Te4y1w7D6%2F%3Fspm_id_from%3D333.337.search-card.all.click%26vd_source%3D99acb313a9a41c2ae58ef6a3e44dfa74

[8]

https://juejin.cn/post/7044717306823311368: https://juejin.cn/post/7044717306823311368

[9]

https://m.cls.cn/detail/1259465: https://link.juejin.cn?target=https%3A%2F%2Fm.cls.cn%2Fdetail%2F1259465

[10]

https://m.thepaper.cn/newsDetail_forward_21830839: https://link.juejin.cn?target=https%3A%2F%2Fm.thepaper.cn%2FnewsDetail_forward_21830839

[11]

https://weibo.com/1845864154/Ms2Yt4WOT?type=repost: https://link.juejin.cn?target=https%3A%2F%2Fweibo.com%2F1845864154%2FMs2Yt4WOT%3Ftype%3Drepost

[12]

https://finance.sina.com.cn/tech/csj/2023-02-06/doc-imyetumr6368098.shtml: https://link.juejin.cn?target=https%3A%2F%2Ffinance.sina.com.cn%2Ftech%2Fcsj%2F2023-02-06%2Fdoc-imyetumr6368098.shtml

[13]

https://it.sohu.com/a/637754318_114760: https://link.juejin.cn?target=https%3A%2F%2Fit.sohu.com%2Fa%2F637754318_114760

[14]

https://zhuanlan.zhihu.com/p/604168742: https://link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F604168742

[15]

https://redian.news/wxnews/249153: https://link.juejin.cn?target=https%3A%2F%2Fredian.news%2Fwxnews%2F249153

[16]

https://shuo.news.esnai.com/article/202302/238212.shtml: https://link.juejin.cn?target=https%3A%2F%2Fshuo.news.esnai.com%2Farticle%2F202302%2F238212.shtml

[17]

https://redian.news/wxnews/260319: https://link.juejin.cn?target=https%3A%2F%2Fredian.news%2Fwxnews%2F260319

推荐阅读  点击标题可跳转

1、如何使用ChatGPT快速构建一个网站模板

2、50+ 可以帮助提高前端开发效率的 ChatGPT Prompts

3、能不能写出这 40 个单行代码, 直接体现一个人的基础水平!!!

继续滑动看下一个
前端大全
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存