首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >一个 url 就把人家网站克隆了?

一个 url 就把人家网站克隆了?

原创
作者头像
老码小张
发布于 2024-03-03 03:19:43
发布于 2024-03-03 03:19:43
3.2K10
代码可运行
举报
文章被收录于专栏:玩转全栈玩转全栈
运行总次数:0
代码可运行

今天瞧见了一个开源库,https://github.com/abi/screenshot-to-code ,根据它的描述,这个简单的应用程序可以将屏幕截图转换为代码(HTML/Tailwind CSS、React、Bootstrap 或 Vue)。 它使用 GPT-4 Vision 生成代码,并使用 DALL-E 3 生成外观相似的图像。 更加逆天的是,现在是你只要输入一个 URL,他就给你把人家网站克隆了。

这技术背后的实现原理是什么

screenshot-to-code这个工具,其核心功能是将图像转化为代码。它基于开放人工智能库GPT-4 Vision和DALL-E 3的技术,这两种AI模型都是OpenAI的产品且在视觉理解方面表现出色。

当用户上传截图,GPT-4 Vision会读取并理解截图中的内容,然后基于这些理解生成对应的HTML,Tailwind,React,Vue等代码。这部分对应的源码可以在这里查看 https://github.com/abi/screenshot-to-code/blob/072b286b6dfa65eaa646f68def8a0b0f6d157217/backend/routes/generate_code.py#L43 ,背后推动的 prompt 可以简单了解下

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
HTML_TAILWIND_SYSTEM_PROMPT = """
You are an expert Tailwind developer
You take screenshots of a reference web page from the user, and then build single page apps 
using Tailwind, HTML and JS.
You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).

- Make sure the app looks exactly like the screenshot.
- Pay close attention to background color, text color, font size, font family, 
padding, margin, border, etc. Match the colors and sizes exactly.
- Use the exact text from the screenshot.
- Do not add comments in the code such as "<!-- Add other navigation links as needed -->" and "<!-- ... other news items ... -->" in place of writing the full code. WRITE THE FULL CODE.
- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "<!-- Repeat for each news item -->" or bad things will happen.
- For images, use placeholder images from <https://placehold.co> and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.

In terms of libraries,

- Use this script to include Tailwind: <script src="<https://cdn.tailwindcss.com>"></script>
- You can use Google Fonts
- Font Awesome for icons: <link rel="stylesheet" href="<https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css>"></link>

Return only the full code in <html></html> tags.
Do not include markdown "```" or "```html" at the start or end.
"""

前面介绍过,他不只是可以生成 HTML 的代码,还可以囊括其他语言,包括 react 和 Vue。其中有一个我不太理解的地方,if there are 15 items, the code should have 15 items 那如果这里有 100 个 list 的 item,他是否生成 100 个呢,为什么不告诉模型,使用 list.map(e⇒componet)的方式呢?将统一的模式封装成一个独立的组件,代码的维护性不是大大的加强吗?

生成代码的维护性如何?

带着疑问,跑了一下demo,果不其然,生成的代码确实是比较机械化的方式,还是缺乏维护性的

为何需要 DALLE3

而DALL-E 3则负责生成与原图相似的图像,这能帮助用户更直观地预览和了解生成的代码对应的页面效果。

screenshot-to-code的优势在于,它不仅可以从图片生成代码,还可以根据代码进一步优化图片,这种“图片至代码,代码至图片”的双向优化,使结果更精细,更贴近用户需求。

然而给我的感觉是,这种生成的代码更像是一种一锤子买卖的外包工程,基本不具备维护性的。

其他生成代码的工具

据我了解,vercel 很早就在做代码自动生成,而且很早就推出了其服务,服务在此:https://v0.dev/

vercel demo
vercel demo

使用的方式就是和模型对话来生成代码,代码是 vercel 提供的服务,实时渲染给你看效果,而且,还可以基于效果继续进行对话,目前我没有触发到最大的对话条数,理论上可以一直对话。如下就是我生成的效果。从美观度上来看,还是挺不错的。

其自动生成的代码如下:

同样的弊端,也在 vercel 这套自动生成代码上有所体现:

我看了一个生成有列表相关的例子,这里通过浏览代码发现,他这里依旧是机械化的翻译了 dom 结构,而不是使用可维护性较高的方式来输出。

总结:个人感觉,这块目前用来做一些demo,或者做一些打一些底稿,还是很有助于效率提高的。对于screenshot-to-code不要认为他能够直接可以将别人web 给直接复刻了,然后就轻松拿来运营,至少离这里还差太远太远的距离了,如后端逻辑呢?网站的性能呢?目前基本上等同于对于 HTML 点击右键,保存网页。对于 vercel 的服务,可以用来做开发提效,让它生成一些代码,然后从中获取一些灵感或者手动提取可复用组件。

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

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

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

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

评论
登录后参与评论
1 条评论
热度
最新
作者提交了一个pr给到 https://github.com/abi/screenshot-to-code/pull/244
作者提交了一个pr给到 https://github.com/abi/screenshot-to-code/pull/244
回复回复点赞举报
推荐阅读
编辑精选文章
换一批
牛逼!50.3K Star!一个自动将屏幕截图转换为代码(HTML、VUE、React)的开源工具!
在当今快节奏的软件开发环境中,设计师与开发者之间的协同工作显得尤为重要。然而,理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本。为此,开源社区中出现了一个引人注目的项目——screenshot-to-code,它利用AI人工智能技术(机器学习算法和视觉分析技术),将屏幕截图自动转换为前端代码,为设计师和开发者之间的合作开辟了新的可能性。
测试开发技术
2024/05/28
2.8K0
牛逼!50.3K Star!一个自动将屏幕截图转换为代码(HTML、VUE、React)的开源工具!
Star 17.3k!这个截屏项目火了!给它一张屏幕截图,即可一键克隆网页!
你敢信,只凭借着一张屏幕截图即可转换生成 HTML/Tailwind CSS 代码。可以算得上是前端工程师的福音。它就是 screenshot-to-code。
Python兴趣圈
2023/11/24
2.4K0
Star 17.3k!这个截屏项目火了!给它一张屏幕截图,即可一键克隆网页!
强大的AI网站推荐(第二集)—— V0.dev
V0.dev 是一款由 Vercel 团队推出的基于 AI 技术的用户界面(UI)代码生成工具,旨在通过自然语言处理(NLP)和深度学习算法,将简单的文本提示快速转换为高质量的 React 代码。它专注于前端开发领域,能够显著简化开发流程,提高开发效率,帮助前端开发者、UI/UX 设计师和产品经理更高效地协同工作。
LucianaiB
2025/03/21
5080
强大的AI网站推荐(第二集)—— V0.dev
27.7K Star开源神器,前端开发要危险了?
开源日记
2023/12/13
2880
27.7K Star开源神器,前端开发要危险了?
【每日精选时刻】一个 url 就把人家网站克隆了?入行15年,我还是觉得编程很难;快速部署FastGPT私人助理
大家吼,我是你们的朋友煎饼狗子——喜欢在社区发掘有趣的作品和作者。【每日精选时刻】是我为大家精心打造的栏目,在这里,你可以看到煎饼为你携回的来自社区各领域的新鲜出彩作品。点此一键订阅【每日精选时刻】专栏,吃瓜新鲜作品不迷路! *当然,你也可以在本篇文章,评论区自荐/推荐他人优秀作品(标题+链接+推荐理由),增加文章入选的概率哟~
社区好文捕手-煎饼狗子
2024/03/06
7272
牛逼!50.3K Star!一个自动将屏幕截图转换为代码的开源工具
在当今快节奏的软件开发环境中,设计师与开发者之间的协同工作显得尤为重要。然而,理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本。为此,开源社区中出现了一个引人注目的项目——screenshot-to-code,它利用AI人工智能技术(机器学习算法和视觉分析技术),将屏幕截图自动转换为前端代码,为设计师和开发者之间的合作开辟了新的可能性。
测试开发技术
2024/05/24
7610
这些新项目一定不要错过「GitHub 热点速览」
本周 GitHub 热点上榜的项目有不少的新面孔,比如搞电子商务的 eShop,还有处理表数据的 onetable。还有用来方便处理数据同步问题的 loro,以及网易新开源的 tts 项目 EmotiVoice。
HelloGitHub
2023/11/20
5100
这些新项目一定不要错过「GitHub 热点速览」
前端智能化D2C到底怎么样了,带你一睹为快
前端近年来一直在尝试如何提高开发人员的效率,从最初的脚手架工具、组件库、持续集成体系、自动化测试、多端适配到现在的全面的低代码平台、前端智能化、在线 IDE,大家都在为未来的新的且高效率的方式做着努力。
秋风的笔记
2021/08/27
1.7K0
前端智能化D2C到底怎么样了,带你一睹为快
GPT-4写代码,DALL·E 3+MJ搞定画面,AI版「愤怒的南瓜」来袭
自 GPT 系列对话大模型以及 DALL・E、Midjourney 等文生图大模型兴起以来,基于它们的硬核、有趣二创应用花样频出,让普通人切身地体验到了大模型的魅力。
机器之心
2023/11/02
4640
GPT-4写代码,DALL·E 3+MJ搞定画面,AI版「愤怒的南瓜」来袭
根据图片生成前端代码:人工智能助你释放效能 | 开源日报 No.98
PHP 是一种流行的通用脚本语言,特别适合 Web 开发。快速、灵活和实用,PHP 支持从博客到世界上最受欢迎的网站等各种应用。PHP 遵循 PHP 许可证 v3.01 发布。
小柒
2023/11/30
1.5K0
根据图片生成前端代码:人工智能助你释放效能 | 开源日报 No.98
微软Copilot大会员来了:每月20刀,人人都能用
去年 9 月,微软宣布了大模型 Copilot 能力加入 Office 和 Windows 11 的新计划。今天,该能力终于覆盖到了全体用户。
机器之心
2024/01/17
5920
微软Copilot大会员来了:每月20刀,人人都能用
一文读懂 OpenAI
OpenAI 是一家美国人工智能(AI)研究实验室,由非营利性 OpenAI Incorporated(OpenAI Inc.)及其营利性子公司 OpenAI Limited Partnership(OpenAI LP)组成。OpenAI 进行 AI 研究的目的是促进和开发友好的 AI。OpenAI 系统运行在世界上第五强大的超级计算机上。该组织于 2015 年由 Sam Altman、Reid Hoffman 在旧金山成立,杰西卡·利文斯顿(Jessica Livingston)、埃隆·马斯克(Elon Musk)、伊利亚·萨茨克维尔(Ilya Sutskever)、彼得·泰尔(Peter Thiel)等人共同认捐了 10 亿美元。马斯克于 2018 年辞去董事会职务,但仍是捐助者。微软在 2019 年向 OpenAI LP 提供了 10 亿美元的投资,并于 2023 年 1 月向其提供了第二笔多年期投资,据报道为 100 亿美元。
李维亮
2023/05/16
1.3K0
GPT-4.5多模态理解与生成能力分析
GPT-4.5作为OpenAI的最新多模态大模型,在视觉、音频和文本的交互理解与生成方面实现了重大突破。本文将深入分析GPT-4.5的多模态能力及其底层技术实现。
远方2.0
2025/03/28
2320
GPT-4.5多模态理解与生成能力分析
我的第一个 Next.js + ChatGPT 项目,24 小时内爆炸 10000 用户!
Hi,大家好我是 ssh,这两天冲浪的时候,我发现了一个特别有意思的项目Linkedin Post Generator ,作者发现他每天需要花大量的时间来写 Linkedin 帖子,所以想利用 chatGPT 帮他检测、优化这些破事儿,简单来说:
ssh_晨曦时梦见兮
2023/10/14
6770
我的第一个 Next.js + ChatGPT 项目,24 小时内爆炸 10000 用户!
《HelloGitHub》第 92 期
这里有实战项目、入门教程、黑科技、开源书籍、大厂开源项目等,涵盖多种编程语言 Python、Java、Go、C/C++、Swift...让你在短时间内感受到开源的魅力,对编程产生兴趣!
HelloGitHub
2023/11/28
2990
《HelloGitHub》第 92 期
DALL-E3 | (2)原理
早起版本中先测试,分析了这些部署所产生的数据,以进一步改进 DALL-E 3 在风险领域的行为,如公众人物世代、人口偏见和sexual内容。我们发现,在试验中,包含人物描写的图片主要倾向于白人、年轻人和女性。为此,我们调整了 ChatGPT 的的用户提示转换,以指定更多样化的人物描述。
iResearch666
2023/10/23
6860
DALL-E3 | (2)原理
在Polygon网络上创建一个全栈NFT市场
图片来源: shykhman[2]
Tiny熊
2022/05/25
1.6K0
在Polygon网络上创建一个全栈NFT市场
生成式AI帮助前端开发者创建组件
前端AI是一种新型生成式AI模型,可帮助前端开发人员创建和调整特定框架的组件和插件。
云云众生s
2025/01/25
1970
生成式AI帮助前端开发者创建组件
【GitHub 周热点速览】第六期
1、Ryujinx - 实验性的Nintendo Switch模拟器,使用 C# 编写
司夜
2024/03/11
2190
【GitHub 周热点速览】第六期
[AI OpenAI-doc] 动作入门指南
接下来的这部分内容将重点介绍通过为GPT定义自定义动作来创建一个待办事项列表GPT。
从零开始学AI
2024/05/21
3870
[AI OpenAI-doc] 动作入门指南
推荐阅读
相关推荐
牛逼!50.3K Star!一个自动将屏幕截图转换为代码(HTML、VUE、React)的开源工具!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档