首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >代码实时预览插件:让ChatGPT生成的组件代码即刻可见

代码实时预览插件:让ChatGPT生成的组件代码即刻可见

原创
作者头像
老码小张
发布于 2024-06-18 06:57:12
发布于 2024-06-18 06:57:12
7930
举报
文章被收录于专栏:玩转全栈玩转全栈
插件
插件

想必,看到这篇文章的你会经常使用 gpt 去生成一些代码吧,不瞒你说,我也是,但是,有时候,我生成的代码,我想要看到他的效果,但是,我又不想去复制粘贴,然后去一个一个的创建文件,然后去一个一个的粘贴,这样的效率实在是太低了,所以,我就想到了,有没有一种插件,可以让我生成的代码即刻可见呢?

什么是更好的体验

想象一下,你对 GPT 提了一个问题,比如,你说,嘿,给我使用 React生成一个用户登录组件,有两个按钮,登录,注册。然后 GPT 就给你巴拉巴拉的输出一大堆代码。

代码
代码

但是,你看不到这个组件渲染的效果是怎么样的,如果你想看到效果,你大概的步骤可能是这样的:

  1. 准备执行环境,React,Vue,或者其他
  2. 复制代码
  3. 创建一个文件
  4. 粘贴代码
  5. 做一些连接,加载这个组件
效果
效果

或者,你可以借助一些在线的工具,比如 CodeSandboxCodePenJSFiddle,但是,这样的方式,你还是需要手动的去复制粘贴,然后去一个一个的创建文件,然后去一个一个的粘贴,这样的效率实在是太低了。

你有没有先过,如果鼠标悬浮在 GPT 生成的代码上,就可以看到这个组件的效果呢?这样的效率是不是会高很多呢?这个体验是不是会更好呢?

大声告诉我,这是不是你需要的?

代码实时预览插件

读到这里,我想你大概已经猜到了,我想干一件什么事情,没错,我就是想要开发一个插件,让 ChatGPT 生成的代码即刻可见。

步骤

创建浏览器插件:编写插件的manifest.json和必要的脚本文件。

捕获代码块:在网页中检测代码块,并添加鼠标悬停事件。

代码解析和渲染:根据代码块内容,识别代码类型并进行渲染。

实时预览:在用户悬停代码块时,显示实时预览效果。

部署和使用:将插件打包并安装到Chrome浏览器中,打开包含代码块的网页即可实时预览生成的组件效果。

实现

这里不啰嗦,关键两个问题,一个是如何捕获代码块,一个是如何实时预览。

捕获代码块
代码语言:js
AI代码解释
复制
document.querySelectorAll('pre').forEach((block) => {
  block.addEventListener('mouseover', (event) => {
    // Show preview
  });
  block.addEventListener('mouseout', (event) => {
    // Hide preview
  });
});
实时预览
代码语言:js
AI代码解释
复制
const preview = document.createElement('div');
/// ...省略一大堆样式
block.addEventListener('mouseover', (event) => {
  preview.style.display = 'block';
  preview.innerHTML = block.innerText;
});
block.addEventListener('mouseout', (event) => {
  preview.style.display = 'none';
});

html 实时预览问题不大,但是,如果是 react,vue,或者其他框架,就需要借助于一些可以实时预览 react,vue,或者其他框架,想必做过组件化开发的人,应该第一时间会想到 Storybook,但是这么玩有一个坑,就是本地得启动一个 storybook 服务,然后浏览器插件预览代码需求时,通过 ws 通信的方式,把代码传递到本地的 storybook ,通过写文件的方式,然后 storybook 会自动刷新,这样的效率是不是有点低呢?

代码语言:js
AI代码解释
复制
app.post('/preview', (req, res) => {
  const { code } = req.body;
  // 将代码写入到 Storybook 中的某个文件(例如,`generated.stories.js`)
  fs.writeFileSync('./src/stories/generated.stories.js', `
    import React from 'react';
    export default { title: 'Generated' };
    export const DynamicComponent = () => (
      ${code}
    );
  `);
  res.json({ success: true });
});

我踩过,大概的路子是这个鬼样子。

那么,有没有更好的办法呢?别忘记,我们上面还提到了 JSFiddle,我们是否可以在 chrome 插件中内嵌一个 jsfiddle 的 iframe 呢

https://docs.jsfiddle.net/embedding-fiddles

,然后,在 github 上创建一个 gist,然后,将代码写入到 gist 中,然后,将 gist 的 url 传递给 iframe,这样是不是轻松很多呢?

代码语言:js
AI代码解释
复制
fetch('https://api.github.com/gists', {
    method: 'POST',
    headers: {
      'Authorization': 'token YOUR_GITHUB_TOKEN',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(gistContent)
  })
  .then(response => response.json())
  .then(data => {
    const gistUrl = `https://jsfiddle.net/gh/get/library/pure/username/gist_id/${data.id}/`;
    iframe.src = gistUrl;
  });

好吧,今天的黑科技就聊到这里了,插件写得比较烂,仅供自己使用,希望给你一个思路。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
完爆阿尔法狗元,DeepMind用5000台TPU训练出新算法,1天内称霸3种棋类
大数据文摘作品 作者:姜范波、Aileen、Yawei Xia、龙牧雪、魏子敏 距离阿尔法狗元版本刷屏一个多月时间,阿尔法狗又进化了,这次不光可以玩围棋,不再是“狗”了。我一点也不惊讶。 在用阿尔法狗(AlphaGo)和阿尔法狗元(AlphaGo Zero)称霸围棋世界后,当地时间周二晚,DeepMind的研究组宣布已经开发出一个更为广泛的阿尔法元(AlphaZero)系统,它可以训练自己在棋盘,将棋和其他规则化游戏中实现“超人”技能,所有这些都在一天之内完成,并且无需其他干预,战绩斐然: 4个小时成为了世
大数据文摘
2018/05/24
5500
我与机器斗争过但失败了:与深蓝“人机大战”20年,卡斯帕罗夫TED演讲
大数据文摘字幕组作品 如果我们想利用科技,就必须直面恐惧。 ——加里·卡斯帕罗夫 卡斯帕罗夫 生于1963年 前苏联、俄罗斯国际象棋棋手 22岁成为世界上最年轻的国际象棋冠军 接下来的职业生涯里 他获得了一连串冠军头衔 直到2005年退役(゚▽゚)/ 但是 幸运也是不幸 让他真正“家喻户晓”的 是历史课本里 1997年5月11日 他作为人类的代表 与IBM计算机“深蓝”的一次对弈 那一次 人类输了 和文摘菌用过同一版历史教材的请举手 此后的20年 人类好像一直在输 到了2017年 IBM已经有了能赢取智力
大数据文摘
2018/05/24
7840
被AI击败的“第一代李世石”卡斯帕罗夫:我和机器和解了!
2月24日消息,据外媒报道, 国际象棋大师加里·卡斯帕罗夫(Garry Kasparov)也许是历史上最伟大的棋手。在1985年成为世界冠军后的近20年里,他经常采取大胆弃子、疾进反击的策略赢得比赛,几乎成为这项棋牌运动的主宰者。
数据猿
2020/03/04
1.3K0
智能机器通过深度学习达到国际象棋大师水平
距离IBM的深蓝超级计算机击败国际象棋世界冠军加里·卡斯帕罗夫(Gary Kasparov)已经快过去20年了。此后,计算机性能不断提升,但象棋引擎工作仍主要依靠“暴力破解”,通过穷举法,即遍历一切可能的移动方式,走出最好的一步棋。相比计算机,人类所拥有的技巧主要是评估国际象棋的盘面局势,缩小最优棋路的搜索范围。 2015年9月,来自伦敦帝国学院的Matthew Lai开发出一款名为“Giraffe”的人工智能机器,它能通过自学来判断象棋的摆放位置和下步棋该怎么走,它完全颠覆了传统的国际象棋引擎,下棋方法更
人工智能快报
2018/03/07
8190
AI 用游戏大胜人类的背后,其实是生物学
美国当地时间 6 月 25 日,OpenAI 宣布由其研发的 5 个神经网络组成的 AI 算法 OpenAI Five,已经能打败 Dota2 的人类玩家队伍,这是 AI 首次在 Dota 2 五对五团战中打败人类,且平均天梯分数超过 4200 分。不过目前被 AI 击败的人类团队均为业余玩家,OpenAI 表示,将在今年 8 月份的 Dota 2 - The International 2018 赛事期间,与国际顶尖职业团队一决高下。
HyperAI超神经
2019/12/01
6740
AI 用游戏大胜人类的背后,其实是生物学
从"深蓝"到 AlphaGo丨AI 在游戏领域的升级打怪之路
可以说,AI的发展进化史就是AI在游戏领域的升级史。 SciShow是Youtube上热门的科普向脱口秀节目。它的内容包罗万象,无论什么问题在这里都会得到风趣又详尽的解答。在本次节目中,介绍了AI 是
CDA数据分析师
2018/02/08
1.4K0
从"深蓝"到 AlphaGo丨AI 在游戏领域的升级打怪之路
AlphaZero诞生一周年:登上Science封面,完整论文首次公开
阿尔法元(AlphaZero)诞生一周年之际,《科学(Science)》杂志今天以封面文发布了阿尔法元(AlphaZero)经过同行审议的完整论文,Deepmind创始人兼CEO哈萨比斯亲自执笔了这一论文。
大数据文摘
2018/12/25
7340
AlphaZero诞生一周年:登上Science封面,完整论文首次公开
AlphaZero最革命性的一点是,它没有棋子的概念
关注风云之声 提升思维层次 解读科学,洞察本质 戳穿忽悠,粉碎谣言 导读 AlphaZero下国际象棋的时候,最革命性的一点是,它没有棋子的概念。无论是人类高手还是过去的顶级AI,再怎么也是以棋子实力评估为基础的,被吃了大子会心疼,在这个基础上再去进行“重视中央”之类的局面评估理论。而AlphaZero却完全对棋子没有概念,只要它认为未来整体局势好,弃子根本不叫事。这次Deepmind新论文应该给出结论了,“MCTS+神经网络”就是先进生产力的代表。 2017年12月6号,Deepmind扔出了一篇论文
企鹅号小编
2018/02/11
1.5K0
AlphaZero最革命性的一点是,它没有棋子的概念
深度学习机器72小时自学象棋, 达到国际大师水平
距离IBM深蓝(Deep Blue)超级计算机在国际标准锦标赛规则下首次击败国际象棋世界冠军加里·卡斯帕罗夫(Gary Kasparov)已经有差不多20年了. 从那时起, 下象棋计算机的能力变得更加强大, 甚至运行在智能手机上的现代象棋引擎都几乎能让最强的人类毫无招架之力.
花落花飞去
2018/02/05
2.4K0
深度学习机器72小时自学象棋, 达到国际大师水平
【重磅】AlphaZero炼成最强通用棋类AI,DeepMind强化学习算法8小时完爆人类棋类游戏
作者:闻菲,刘小芹,常佩琦 【新智元导读】或许“智能爆炸”不会发生,但永远不要低估人工智能的发展。推出最强围棋AI AlphaGo Zero不到50天,DeepMind又一次超越了他们自己,也刷新了世人对人工智能的认知。12月5日,包括David Silver、Demis Hassabis等人在内的DeepMind团队发表论文,提出通用棋类AI AlphaZero,从零开始训练,除了基本规则没有任何其他知识,4小时击败最强国际象棋AI、2小时击败最强将棋AI,8小时击败李世石版AlphaGo,连最强围棋AI
新智元
2018/03/20
1.7K0
【重磅】AlphaZero炼成最强通用棋类AI,DeepMind强化学习算法8小时完爆人类棋类游戏
人工智能会取代人类棋手吗?棋王卡斯帕罗夫告诉你……
小编看到了一个很有趣的访问--Alpla Go之父Demis Hassabis与前国际象棋棋王卡斯帕罗夫一起讨论关于人工智是否能取代人类棋手的话题,于是特地翻译成中文,让大家围观一下两个天才之间的对话。 他们之间还有个小插曲。 早在20多年前他们就见过面,不过当时Demis还是个十几岁的毛头小伙,还有点狂妄自大,没想到一转眼他成了万众瞩目的人工智能界新星。所以,千万不要小看你身边不起眼的年轻人哦~ 1 20年前有一个自大的小伙子 很多年前卡斯帕罗夫在伦敦举办了一个小型家庭聚会, 晚饭时曾偶然和一个小伙子
企鹅号小编
2018/01/31
8090
人工智能会取代人类棋手吗?棋王卡斯帕罗夫告诉你……
DeepMind首席科学家:比起机器智能,我更担心人类智能造成的灾难
在 DeepMind 首席研究科学家、伦敦大学学院计算机科学教授David Silver 看来,游戏是激发创造力的关键,尤其是对AI而言。
新智元
2022/02/24
5020
DeepMind首席科学家:比起机器智能,我更担心人类智能造成的灾难
观点 | 精通国际象棋的AI研究员:AlphaZero真的是一次突破吗?
选自 Medium 机器之心编译 参与:路雪、 刘晓坤 近日,Jose Camacho Collados 在 Medium 上发表了一篇题为《Is AlphaZero really a scienti
机器之心
2018/05/10
1K0
又一棋坛AI崛起:AlphaZero自学4小时击败最强国际象棋程序,8小时击败AlphaGo
谷歌旗下人工智能公司DeepMind将围棋AI转战国际象棋和日本将棋领域——无须人类智慧加持,已胜券在握。 AlphaZero是由谷歌旗下DeepMind研发的通用棋类AI,以不到四小时的自学击败了世界最强的国际象棋程序。 重新改进的人工智能程序AlphaZero曾多次击败世界顶级围棋选手,并扩大到学习其他棋类项目。它从零开始学习国际象棋,仅用4小时,就在100盘比赛中击败了世界顶级国际象棋程序 Stockfish 8。 据在康奈尔大学图书馆的arXiv上发表的一篇未经同行评审的研究论文称,在这100场
企鹅号小编
2018/03/05
1.4K0
又一棋坛AI崛起:AlphaZero自学4小时击败最强国际象棋程序,8小时击败AlphaGo
2017年人工智能在游戏领域打败人类,未来我们将何去何从?
在20世纪的大部分时间里,国际象棋的博弈都是以人工智能为基准的。 约翰·麦卡锡(John McCarthy)在20世纪50年代早期创造了“人工智能”一词,曾经把国际象棋称为“ 人工智能的果蝇 ”。 在20世纪90年代后期,IBM的Deep Blue开始了对世界冠军Garry Kasparov的一系列国际象棋比赛。 1997年,深蓝最终击败卡斯帕罗夫,标志着一台机器首次在比赛中击败世界冠军。 到了二十一世纪初,技术已经提高到几乎所有的游戏环境中机器都在不停地击败国际象棋大师。 自然,AI开发人员转向其他更
企鹅号小编
2018/01/15
8370
2017年人工智能在游戏领域打败人类,未来我们将何去何从?
人在新加坡,Google喊我来看AI下棋。
2024国际象棋世界冠军赛(WCC),这场两位世界顶尖棋手的对话,被装进了棋盘上64格的小世界。
数字生命卡兹克
2025/04/14
1290
人在新加坡,Google喊我来看AI下棋。
DeepMind创始人:AlphaGo破解围棋3000年奥义,超越人类认知极限
【新智元导读】AlphaGo之父杰米斯·哈萨比斯(Demis Hassabis)近日在母校英国剑桥大学做了一场题为“超越人类认知的极限”的演讲,解答了世人对于人工智能,对于阿尔法狗的诸多疑问——过去3
新智元
2018/03/27
1.3K0
DeepMind创始人:AlphaGo破解围棋3000年奥义,超越人类认知极限
AlphaGo之父戴密斯·哈萨比斯:是天才,也是生活里的普通人
Deepmind创始人戴密斯·哈萨比斯是这个时代公认的天才,他不仅是世界AI领域的第一人,还是世界国际象棋大师、电脑游戏设计师、企业家和神经学家,世界范围内再无第二个人能把这些身份融为一体。
数据猿
2019/09/18
2.3K0
AlphaGo之父戴密斯·哈萨比斯:是天才,也是生活里的普通人
不只是围棋!AlphaGo Zero之后DeepMind推出泛化强化学习算法AlphaZero
选自arXiv 作者:David Silver等 机器之心编译 在 DeepMind 发表 Nature 论文介绍 AlphaGo Zero 之后,这家公司一直在寻求将这种强大算法泛化到其他任务中的可能性。昨天,AlphaGo 研究团队提出了 AlphaZero:一种可以从零开始,通过自我对弈强化学习在多种任务上达到超越人类水平的新算法。据称,新的算法经过不到 24 小时的训练后,可以在国际象棋和日本将棋上击败目前业内顶尖的计算机程序(这些程序早已超越人类世界冠军水平),也可以轻松击败训练 3 天时间的 A
机器之心
2018/05/09
7800
不只是围棋!AlphaGo Zero之后DeepMind推出泛化强化学习算法AlphaZero
国际泰斗:现在谈强人工智能为时尚早
人工智能快速发展,在许多领域取得重大影响,使得不少人担心可能会出现超级智能。DeepMind的联合创始人Demis Hassabis和加拿大多伦多大学教授Geoffrey Hinton两位国际泰斗在谈到强人工智能(AGI)时表示,强人工智能还有很长的路要走,目前谈之为时尚早。
人工智能快报
2019/03/07
4930
推荐阅读
完爆阿尔法狗元,DeepMind用5000台TPU训练出新算法,1天内称霸3种棋类
5500
我与机器斗争过但失败了:与深蓝“人机大战”20年,卡斯帕罗夫TED演讲
7840
被AI击败的“第一代李世石”卡斯帕罗夫:我和机器和解了!
1.3K0
智能机器通过深度学习达到国际象棋大师水平
8190
AI 用游戏大胜人类的背后,其实是生物学
6740
从"深蓝"到 AlphaGo丨AI 在游戏领域的升级打怪之路
1.4K0
AlphaZero诞生一周年:登上Science封面,完整论文首次公开
7340
AlphaZero最革命性的一点是,它没有棋子的概念
1.5K0
深度学习机器72小时自学象棋, 达到国际大师水平
2.4K0
【重磅】AlphaZero炼成最强通用棋类AI,DeepMind强化学习算法8小时完爆人类棋类游戏
1.7K0
人工智能会取代人类棋手吗?棋王卡斯帕罗夫告诉你……
8090
DeepMind首席科学家:比起机器智能,我更担心人类智能造成的灾难
5020
观点 | 精通国际象棋的AI研究员:AlphaZero真的是一次突破吗?
1K0
又一棋坛AI崛起:AlphaZero自学4小时击败最强国际象棋程序,8小时击败AlphaGo
1.4K0
2017年人工智能在游戏领域打败人类,未来我们将何去何从?
8370
人在新加坡,Google喊我来看AI下棋。
1290
DeepMind创始人:AlphaGo破解围棋3000年奥义,超越人类认知极限
1.3K0
AlphaGo之父戴密斯·哈萨比斯:是天才,也是生活里的普通人
2.3K0
不只是围棋!AlphaGo Zero之后DeepMind推出泛化强化学习算法AlphaZero
7800
国际泰斗:现在谈强人工智能为时尚早
4930
相关推荐
完爆阿尔法狗元,DeepMind用5000台TPU训练出新算法,1天内称霸3种棋类
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档