GPT-4V新玩法登顶GitHub热榜,随手一画就能生成网页!web开发者:感受到了威胁

news2025/1/9 16:42:49
西风 发自 凹非寺
量子位 | 公众号 QbitAI

随手一画就能生成网页!GPT-4V新玩法登顶GitHub热榜,狂揽3000+🌟:

图片

现在只要简单画一画,框一框,点击执行:

图片

“啪”地一下,一个带有各种“按钮”的网页就做好了:

图片

对应代码也一览无余:

图片

整个操作过程十分快捷简单。

新玩法不只在GitHub上火,开发者Sawyer Hood把demo展示po到𝕏上,也迅速走红,点赞转发收藏2700+:

图片

Sawyer Hood还表示,自己在获得GPT-4V API访问权限不到5小时内就开发出了这种玩法,可见“未来一片光明”。

走过路过的网友留下了下巴,满评飘疯狂:

图片

然鹅,还有一小撮网友“骂骂咧咧”赶来:

图片

点开主页一看,原来这波人是网页设计开发相关从业者🤣。

这位web开发者更是直呼“感受到了威胁”:

图片

啊这……

其实Gen-2最近也有一个画画新功能,随手涂一涂就能让画面动起来:

图片

好家伙,现在干点什么都流行随手画了吗?主打一个省事儿,省prompt。

绘制工具为开源白板

要做到上面的画画秒生网页,需要用到两个工具:tldraw和GPT-4V API。

其中tldraw是一个非常简单好上手的开源在线白板。

有画笔、橡皮、箭头、文本框等各种基本绘图工具,还有很多填充效果:

图片

tldraw和GPT-4V的组合原理也很简单:

将当前的画布SVG转换为PNG图像,然后将PNG图像发送给GPT-4,并指示其返回一个包含Tailwind CSS的单个HTML文件。

考虑到不是人人都能访问GPT-4V API。

有网友用ChatGPT plus用户新增的GPTs功能创建了DesignerGPT,也可超快速地创建和托管网站

图片

图片

参考链接:
[1]https://twitter.com/sawyerhood/status/1721717738941698389
[2]https://twitter.com/xiaohuggg/status/1723537400461430794?s=20

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1221102.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

设计模式-状态模式-笔记

状态模式State 在组件构建过程中,某些对象的状态经常面临变化,如何对这些变化进行有效的管理?同时又维持高层模块的稳定?“状态变化”模式为这一问题提供了一种解决方案。 经典模式:State、Memento 动机&#xff08…

R语言绘制精美图形 | 火山图 | 学习笔记

一边学习,一边总结,一边分享! 教程图形 前言 最近的事情较多,教程更新实在是跟不上,主要原因是自己没有太多时间来学习和整理相关的内容。一般在下半年基本都是非常忙,所有一个人的精力和时间有限&#x…

modbusRTU通信简单实现(使用NModbus4通信库)

本文实现ModbusRTU通信,使用的是NModbus4通信库,使用 Modbus Slave是一个模拟Modbus协议从机的上位机软件,主要用于模拟测试跟其他主机设备通信的过程。与之成套存在的另一个软件--Modbus Poll,则是模拟Modbus协议主机的上位机软件…

基于ssm+vue交通事故档案系统

摘要 摘要是对文章、论文或其他文本的主要观点、结论和关键信息的简洁概括。由于你没有提供具体的文章或主题,我将为你创建一个通用的摘要。 本文介绍了一种基于SSM(Spring Spring MVC MyBatis)和Vue.js的交通事故档案管理系统的设计与实现…

Unity Text文本首行缩进两个字符的方法

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 参考如下代码: TMPtext1.text "\u3000\u3000" "这是一段有首行缩进的文本内容。\n这是第二行"; 运行效果如下图所示: 虽…

Linux(3):Linux 的文件权限与目录配置

把具有相同的账户放入到一个组里面,这个组就是这两个账户的 群组 。在访问资源(操作系统中计算机的资源)时,可以让这个组里面的所有用户都具有访问权限。 每个账号都可以有多个群组的支持。 在我们Liux 系统当中,默认的…

ROS话题(Topic)通信:自定义msg - 例程与讲解

在 ROS 通信协议中,数据是以约定好的结构传输的,即数据类型,比如Topic使用的msg,Service使用的srv,ROS 中的 std_msgs 封装了一些原生的数据类型,比如:Bool、Char、Float32、Int64、String等&am…

为什么Go是后端开发的未来

近年来,Go 编程语言的流行度迅速增加。Go 最初由 Google 开发,迅速成为后端开发中最受欢迎的语言之一,特别是在分布式系统和微服务的开发中。本文将讨论为什么 Go 是后端开发的未来。 Go 简介 Go,又称为 Golang,是由…

7、使用真机调试鸿蒙项目

此处以华为手机为例,版本为鸿蒙4.0. 一、打开手机调试功能 1、打开开发者模式 打开“设置”—“关于手机”,连续点击“软件版本”可打开开发者模式 2、开启USB调试功能 打开“设置”—“系统更新”—“开发者选项”,下拉找到“USB调试”…

1-2 暴力破解-模拟

模拟:根据题目要求编写代码 可分为:图形排版(根据某种规则输出特定图形)、日期问题、其他模拟 一.图形排版 1.输出梯形(清华大学) 法一:等差数列 分析:每行的星号个数为等差数列2n2…

【Java 进阶篇】JQuery 遍历 —— 无尽可能性的 `each` 之旅

在前端的征途中,操作元素是开发者不可避免的任务之一。而在 JQuery 中,each 方法则是处理这个任务的得力助手。本文将深入探讨 each 方法的奇妙之处,以及它与原生的 for...of 循环的关系,带你领略无尽可能性的遍历之旅。 起步&am…

9款AI让你在2分钟内创建任何东西

1、免费AI绘画:LeonardoAi一个免费的 Midjourney 替代品,能够快速创建高品质和风格统一的视觉图片,帮你释放创造力。 2、 模板编辑AI:Canva 将所有AI的强大功能汇聚于一处,为你的工作流程注入超级动力。 3、构建网站&…

基于51单片机步进电机节拍步数正反转LCD1602显示( proteus仿真+程序+原理图+设计报告+讲解视频)

基于51单片机步进电机节拍步数正反转LCD1602显示 📑1. 主要功能:📑2. 讲解视频:📑3. 仿真📑4. 程序代码📑5. 设计报告📑6. 设计资料内容清单&&下载链接📑[资料下…

SpringCloud FeignClient声明式服务调用采坑记录(A调用服务B/C,B/C重启后必须重启A后才能成功调用配置项)

SpringCloud FeignClient声明式服务调用(A调用服务B/C,B/C重启后必须重启A后才能成功调用配置项采坑记录) 1. 报错(info级别的警告信息)2. 原因:使用了默认了cache负载均衡,或者禁用了ribbonLoa…

数据结构02附录01:顺序表考研习题[C++]

图源:文心一言 考研笔记整理~🥝🥝 之前的博文链接在此:数据结构02:线性表[顺序表链表]_线性链表-CSDN博客~🥝🥝 本篇作为线性表的代码补充,每道题提供了优解和暴力解算法&#xf…

基于蝠鲼觅食算法优化概率神经网络PNN的分类预测 - 附代码

基于蝠鲼觅食算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于蝠鲼觅食算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于蝠鲼觅食优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神…

YOLOv5项目实战(4)— 简单三步,教你按比例划分数据集

前言:Hello大家好,我是小哥谈。本节课就教大家如何去按照比例去划分数据集,希望大家学习之后可以有所收获!~🌈 前期回顾: YOLOv5项目实战(1)— 如何去训练模型 YOLOv5项目

【C#】类型转换-显式转换:括号强转、Parse法、Convert法、其他类型转string

目录 一、括号强转 1.有符号整型 2.无符号整型 3.浮点之间 4.无符号和有符号 5.浮点和整型 6.char和数值类型 7.bool和string是不能够通过 括号强转的 二、Parse法 1.有符号 2.无符号 3.浮点型 4.特殊类型 三、Convert法 1.转字符串 2.转浮点型 3.特殊类型转换…

基于黄金正弦算法优化概率神经网络PNN的分类预测 - 附代码

基于黄金正弦算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于黄金正弦算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于黄金正弦优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要:针对PNN神…

vite+vue3+electron开发环境搭建

环境 node 18.14.2 yarn 1.22 项目创建 yarn create vite test01安装vue环境 cd test01 yarn yarn dev说明vue环境搭建成功 安装electron # 因为有的版本会报错所以指定了版本 yarn add electron26.1.0 -D安装vite-plugin-electron yarn add -D vite-plugin-electron根目…