Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Design2Code:前端离失业还有多远

Design2Code:前端离失业还有多远

原创
作者头像
老码小张
发布于 2024-03-11 08:56:18
发布于 2024-03-11 08:56:18
5.5K00
代码可运行
举报
文章被收录于专栏:玩转全栈玩转全栈
运行总次数:0
代码可运行

最近,就看了不少关于AI做前端还原的一些文章,之前写过一个URL就把别人网址复制了的这种耸人听闻的文章,根据里面的原理介绍,想必读过的人也知道,这种方式的弊端。那就是copy别人的网站虽然是容易的,但是AI写的代码是非常缺乏维护性的 ,就连最基本的列表,他都不是list.map(it⇒item)的方式去写,而是呆板的一个一个去写。

自动化前端工程是否出现了新的转机

今天看了一个github上开源的工程,Design2Code:https://github.com/NoviScl/Design2Code

那么,这个方式实现的自动化前端工程,是否是我们的前端开发小伙伴们的诺亚方舟(坟墓)呢?让我们一起来揭开他神秘的面纱吧。

这个开源的项目相关联的是这篇论文 https://arxiv.org/pdf/2403.03163.pdf ,他是这篇论文中的代码实践部分,因此我么通常可以直接看论文去了解他的原理,和他实现的效果,他既然敢公布测试的代码,那说明这篇论文里面的数据是比较可信的。

这篇论文的作者是4个大佬,分别是:

他们研究的主要目标就是,根据网页设计的屏幕截图自动生成能够渲染出该网页的HTML/CSS代码。他们的主要工作和贡献如下:

  1. 正式定义了Design2Code任务,并构建了包含484个真实网页的测试集作为评测基准。论文详细介绍了数据集的构建过程。
  2. 开发了一套自动评价指标,包括高层次的视觉相似度(CLIP相似度)以及细粒度的元素匹配(如文本匹配、布局匹配等)。
  3. 提出了多模态提示增强方法,如文本增强提示和自修订提示,用于提高商业大模型(GPT-4V、Gemini)在该任务上的表现。
  4. 在开源模型CogAgent-18B基础上,进行了专门的微调,得到Design2Code-18B模型,其性能可以与商业Gemini模型相媲美。
  5. 通过人工评估和自动指标,发现GPT-4V在该任务上表现最佳。人工评估显示GPT-4V生成的49%网页足以替代原始参考网页,且64%网页的设计被评为比原始参考更好。
  6. 细粒度分析表明,开源模型在召回输入网页的视觉元素和生成正确布局设计方面还有待提高,而文本内容和色彩等方面可通过微调得到极大改善。

下面,我们就看看他论文里的一些数据了

基准性能:Automatic Metrics

对于自动评估,他们考虑了高级视觉相似性 (CLIP) 和低级元素匹配(块匹配、文本、位置、颜色)。沿着这些不同的维度比较了所有基准模型。

可以发现,GPT-4V依然是遥遥领先的,不过,他们训练的模型倒是比Gemini Pro要略微强那么一些。

基准性能:Human Evaluation(人工评估)

那么这几种方式的实现代码是怎么样的呢?其实我们通过了解prompt就ok了,一下三个是从代码仓库中找到的,源码在这里:

https://github.com/NoviScl/Design2Code/blob/main/Design2Code/prompting/gpt4v.py

直接提示法(Direct Prompting)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
def direct_prompting(openai_client, image_file):
	'''
	{original input image + prompt} -> {output html}
	'''

	## the prompt 
	direct_prompt = ""
	direct_prompt += "You are an expert web developer who specializes in HTML and CSS.\\n"
	direct_prompt += "A user will provide you with a screenshot of a webpage.\\n"
	direct_prompt += "You need to return a single html file that uses HTML and CSS to reproduce the given website.\\n"
	direct_prompt += "Include all CSS code in the HTML file itself.\\n"
	direct_prompt += "If it involves any images, use \\"rick.jpg\\" as the placeholder.\\n"
	direct_prompt += "Some images on the webpage are replaced with a blue rectangle as the placeholder, use \\"rick.jpg\\" for those as well.\\n"
	direct_prompt += "Do not hallucinate any dependencies to external files. You do not need to include JavaScript scripts for dynamic interactions.\\n"
	direct_prompt += "Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout.\\n"
	direct_prompt += "Respond with the content of the HTML+CSS file:\\n"
	
	## encode image 
	base64_image = encode_image(image_file)

	## call GPT-4V
	html, prompt_tokens, completion_tokens, cost = gpt4v_call(openai_client, base64_image, direct_prompt)

	return html, prompt_tokens, completion_tokens, cost

文本增强提示法(Text Augmented Prompting)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
def text_augmented_prompting(openai_client, image_file):
	'''
	{original input image + extracted text + prompt} -> {output html}
	'''

	## extract all texts from the webpage 
	with open(image_file.replace(".png", ".html"), "r") as f:
		html_content = f.read()
	texts = "\\n".join(extract_text_from_html(html_content))

	## the prompt
	text_augmented_prompt = ""
	text_augmented_prompt += "You are an expert web developer who specializes in HTML and CSS.\\n"
	text_augmented_prompt += "A user will provide you with a screenshot of a webpage, along with all texts that they want to put on the webpage.\\n"
	text_augmented_prompt += "The text elements are:\\n" + texts + "\\n"
	text_augmented_prompt += "You should generate the correct layout structure for the webpage, and put the texts in the correct places so that the resultant webpage will look the same as the given one.\\n"
	text_augmented_prompt += "You need to return a single html file that uses HTML and CSS to reproduce the given website.\\n"
	text_augmented_prompt += "Include all CSS code in the HTML file itself.\\n"
	text_augmented_prompt += "If it involves any images, use \\"rick.jpg\\" as the placeholder.\\n"
	text_augmented_prompt += "Some images on the webpage are replaced with a blue rectangle as the placeholder, use \\"rick.jpg\\" for those as well.\\n"
	text_augmented_prompt += "Do not hallucinate any dependencies to external files. You do not need to include JavaScript scripts for dynamic interactions.\\n"
	text_augmented_prompt += "Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout.\\n"
	text_augmented_prompt += "Respond with the content of the HTML+CSS file (directly start with the code, do not add any additional explanation):\\n"

	## encode image 
	base64_image = encode_image(image_file)

	## call GPT-4V
	html, prompt_tokens, completion_tokens, cost = gpt4v_call(openai_client, base64_image, text_augmented_prompt)

	return html, prompt_tokens, completion_tokens, cost

视觉修订提示法(Visual Revision Prompting)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
def visual_revision_prompting(openai_client, input_image_file, original_output_image):
	'''
	{input image + initial output image + initial output html + oracle extracted text} -> {revised output html}
	'''

	## load the original output
	with open(original_output_image.replace(".png", ".html"), "r") as f:
		original_output_html = f.read()

	## encode the image 
	input_image = encode_image(input_image_file)
	original_output_image = encode_image(original_output_image)

	## extract all texts from the webpage 
	with open(input_image_file.replace(".png", ".html"), "r") as f:
		html_content = f.read()
	texts = "\\n".join(extract_text_from_html(html_content))

	prompt = ""
	prompt += "You are an expert web developer who specializes in HTML and CSS.\\n"
	prompt += "I have an HTML file for implementing a webpage but it has some missing or wrong elements that are different from the original webpage. The current implementation I have is:\\n" + original_output_html + "\\n\\n"
	prompt += "I will provide the reference webpage that I want to build as well as the rendered webpage of the current implementation.\\n"
	prompt += "I also provide you all the texts that I want to include in the webpage here:\\n"
	prompt += "\\n".join(texts) + "\\n\\n"
	prompt += "Please compare the two webpages and refer to the provided text elements to be included, and revise the original HTML implementation to make it look exactly like the reference webpage. Make sure the code is syntactically correct and can render into a well-formed webpage. You can use \\"rick.jpg\\" as the placeholder image file.\\n"
	prompt += "Pay attention to things like size, text, position, and color of all the elements, as well as the overall layout.\\n"
	prompt += "Respond directly with the content of the new revised and improved HTML file without any extra explanations:\\n"

	html, prompt_tokens, completion_tokens, cost = gpt4v_revision_call(openai_client, input_image, original_output_image, prompt)

	return html, prompt_tokens, completion_tokens, cost

那么,这几种方式各有什么样的特点呢?

  1. 直接提示法(Direct Prompting):
    • 这种方法直接使用用户提供的网页截图作为输入,然后根据截图生成HTML+CSS代码。
    • 优点是操作简单,用户只需要提供一张截图。
    • 缺点是因为只依赖于图像信息,可能在文本提取、元素辨识上不够准确,特别是当截图质量不高或者元素细节较多时。
  2. 文本增强提示法(Text Augmented Prompting):
    • 这种方法在直接提示法的基础上增加了从网页中提取的所有文本信息。
    • 用户提供网页截图和相应的所有文本内容,系统根据这些信息生成HTML+CSS代码。
    • 优点是通过添加文本信息可以提高生成代码的准确度,尤其是在处理文本内容和布局时更为精确。
    • 缺点是需要额外的步骤来提取网页文本
  3. 视觉修订提示法(Visual Revision Prompting):
    • 这种方法用于修正已有的HTML实现。它不仅使用了原始输入图像,还使用了初始的输出图像和HTML代码以及从参考网页提取的文本。
    • 用户提供原始网页截图、当前的HTML实现(可能有误的)、以及这个HTML实现渲染的网页截图,系统根据这些信息进行修订和改进。
    • 优点是能够对已有的实现进行针对性的修正,特别适合调整和完善细节,提高最终实现的质量。
    • 缺点是需要更多的输入信息,包括初始的HTML代码和渲染后的截图,操作复杂度较高。

从结果上来看,GPT-4V Self-Revision Prompting的方式效果会更好一些:效果如下图

从图中,我们可以看到,还原度上,是绝对不能说100%的,甚至80%可能多有些勉强了,这对于像素眼的视觉设计师来讲,是万万不能接受的。因此,拿到这份AI自动转化的代码,可能还是需要很多的精力来做调整,谁能保证,比手工自己来写,然后配合copilot“结对编程(哈哈)”更加高效呢?我想那些经验十足的前端开发者们,已经迫不及待想和前端代码自动生成的各种模型来大干一架,让像素眼的设计师们评判一下,到底谁还是这个领域的王者。

总结

虽然,这篇论文中,我们需要肯定了Design2Code的意义,他可以降低前端开发的门槛,但我不认同他可以在短期内就取代前端开发,论文中也对各模型的细粒度表现进行了分析,指出了开源模型的不足之处,如召回输入元素、生成布局等方面有待提高。这个也基本上决定了在自动化前端工程方面,也承认了前端工程自动化还有比较远的路需要走,但是好在,一步一步的看清了方向,就像,10年前,谁会相信GPT这么霸道呢?

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
斯坦福 && 微软 | 发布前端代码生成大模型:Design2Code-18B,助力前端自动化!
近年来,生成式人工智能取得了快速发展,在多模态理解和代码生成方面展现前所未有的能力。为此,斯坦福、微软等研究人员提出了利用多模态大模型进行前端开发,制定了一个「Design2Code测试基准」,并开发了一套「多模态提示方法」,实验表明64%的生成网页要比原始参考网页要好,49% 的生成网页可以直接取代原本的网;除此之外还发布了一个开源「网页代码生成模型:Design2Code-18B」,其效果堪比Gemini Pro Vision 。
ShuYini
2024/03/11
1.4K0
斯坦福 && 微软 | 发布前端代码生成大模型:Design2Code-18B,助力前端自动化!
AIGC ---探索AI生成内容的未来市场
AI生成内容(AIGC)正成为科技领域的热点,广泛应用于文本生成、图像生成、视频生成等多个方向。本文将通过丰富的代码示例,带您探索AIGC市场的潜力、挑战及应用技术。
用户11292525
2024/11/21
2170
多AI Agent代理:使用LangGraph和LangChain创建多代理工作流
在AI时代,每个人都是一个超级个体,AI Agent智能体的出现,为我们打造超级个体提供了可能。如果说2024年将是AI应用的元年,那么AI Agent将是这个AI应用元年里最为闪亮的那颗星。之前有读者留言,希望多分享一些AI Agent智能体的搭建方法,在上一篇推文中也从实战案例角度分享了怎么用天工AI快速搭建一套属于我们自己的AI Agent智能体,天工AI的多模态和AI搜索能力相信已经能满足大多数人的使用需求。今天就从代码实战上来分享如何使用LangGraph和LangChain创建多代理工作流。
山行AI
2024/06/06
3.1K0
多AI Agent代理:使用LangGraph和LangChain创建多代理工作流
[AI OpenAI-doc] 批处理 API
了解如何使用 OpenAI 的批处理 API 发送异步请求组,其成本降低 50%,具有一个独立的更高速率限制池,并提供明确的 24 小时完成时间。该服务非常适合处理不需要即时响应的作业。您也可以直接在这里查看 API 参考。
从零开始学AI
2024/05/18
5170
[AI OpenAI-doc] 批处理 API
Azure Machine Learning - 如何使用 GPT-4 Turbo with Vision
GPT-4 Turbo with Vision 是 OpenAI 开发的一个大型多模态模型 (LMM),可以分析图像,并为有关图像的问题提供文本回应。 它结合了自然语言处理和视觉理解,GPT-4 Turbo with Vision 可以回答一般图像相关问题。 如果使用[视觉增强]还可以出示视频。
TechLead
2024/01/02
5860
Azure Machine Learning - 如何使用 GPT-4 Turbo with Vision
WordPress快速接入OpenAI ChatGPT,轻松实现智能问答和内容编辑
最近 OpenAI 的 ChatGPT 非常的火爆,子凡当然也按捺不住内心喜欢折腾的 DNA 细胞,所以也几乎后知后觉的去 OpenAI 官网去注册了一个账号,但是由于不支持我们国家地区注册,所以利用了第三方的 SMS 接码平台(https://sms-activate.org/cn),充值了 1 美元,结果还剩下很多,所以其实还是很便宜的,相比只接去买 OpenAI 的账号划算不少,感兴趣的朋友可以试试看。
张子凡
2023/01/09
2.5K0
WordPress快速接入OpenAI ChatGPT,轻松实现智能问答和内容编辑
LangChain学习:通过Agents自动查询天气
learn from https://learn.deeplearning.ai/langchain
Michael阿明
2023/07/21
2.9K0
LangChain学习:通过Agents自动查询天气
LangChain Agent执行原理分析
agent的类型是AgentExecutor,继承自Chain,调用agent.run()方法会调用Chain的run()方法。
码之有理
2023/05/15
6.3K0
深入Spring AI:6大核心概念带你入门AI开发
前面我们快速了解了Spring AI的基础使用,以及他的分层体系。今天我们来了解一下他的几个核心概念,能够帮我们快速了解Spring AI的实现机制。
有一只柴犬
2025/03/31
5830
深入Spring AI:6大核心概念带你入门AI开发
GitHub Copilot 开源替代品 —— FauxPilot
FauxPilot 插件原本是对接 FauxPilot[1] Server 的,通过 FauxPilot Server 也可以实现 GitHub Copilot 服务的功能,并支持多显卡加载 CodeGen 模型,可解决单卡显存不足又想加载大模型的问题。
AlphaHinex
2024/04/08
4960
GitHub Copilot 开源替代品 —— FauxPilot
[AI OpenAI-doc] 视觉
具有视觉功能的 GPT-4 Turbo 允许模型接收图像并回答与之相关的问题。在历史上,语言模型系统受限于仅接收单一输入模态,即文本。对于许多用例来说,这限制了像 GPT-4 这样的模型可用的领域。以前,该模型有时被称为 GPT-4V 或 gpt-4-vision-preview 在 API 中。请注意,助手 API 目前不支持图像输入。
从零开始学AI
2024/04/22
3400
[AI OpenAI-doc] 视觉
HuggingFace Transformers 库深度应用指南
在现代自然语言处理(NLP)领域,HuggingFace Transformers 库已经成为了不可或缺的基础工具。作为一个开源项目,它不仅提供了数千个预训练模型,还大大简化了最先进NLP模型的使用和微调过程。因此,掌握这个库的深度使用还是极为重要的。本指南将采用以下学习路径:按照基础环境搭建、核心API使用、实战案例应用、高级优化技巧来帮助各位读者渐进式地掌握它的使用。
别惹CC
2025/01/13
7550
前端慌不慌?用深度学习自动生成HTML代码
选自Floydhub 作者:Emil Wallner 机器之心编译 如何用前端页面原型生成对应的代码一直是我们关注的问题,本文作者根据 pix2code 等论文构建了一个强大的前端代码生成模型,并详细解释了如何利用 LSTM 与 CNN 将设计原型编写为 HTML 和 CSS 网站。 项目链接:https://github.com/emilwallner/Screenshot-to-code-in-Keras 在未来三年内,深度学习将改变前端开发。它将会加快原型设计速度,拉低开发软件的门槛。 Tony Be
机器之心
2018/05/10
2K0
前端通过 LangChain 接入任意大模型探索
目前带大模型产品也越来越多,微软将大模型能力融入office全家桶,谷歌将大模型融入搜索引擎、邮箱、地图、视频网站等谷歌全家桶、Meta用AI能力服务广告商,帮助其撰写营销文案,生成广告概念图……
记得程序有解
2024/04/03
3.1K1
前端通过 LangChain 接入任意大模型探索
llama-cpp-python快速上手 - plus studio
接下来,你可能缺一些依赖,这一点在文档中没有涉及但是我整理了我缺少的依赖,依次运行即可。
plus sign
2024/02/29
1.9K0
保姆级教程:使用gradio搭建服务调用chatGPT接口
https://www.cnblogs.com/klchang/p/17352911.html
languageX
2023/09/25
5.2K0
LangChain 完整指南:使用大语言模型构建强大的应用程序
嗨,你好!让我向你介绍LangChain,这是一个非常棒的库,它能让开发者利用大型语言模型(LLMs)和其他计算资源来构建强大的应用。在这份指南中,我将快速概述LangChain的工作原理,并探讨一些很酷的使用案例,例如问答系统、聊天机器人和智能代理。我还会带你走过一个快速启动指南,帮助你开始使用。让我们开始吧!
山行AI
2023/06/14
3.5K0
LangChain 完整指南:使用大语言模型构建强大的应用程序
利用人工智能和机器人技术实现复杂的自动化任务!
这篇mylangrobot项目由neka-nat创建,本文已获得作者Shirokuma授权进行编辑和转载。
大象机器人
2024/01/08
4340
利用人工智能和机器人技术实现复杂的自动化任务!
OpenAI新开放了这些好用的API功能
带有视觉能力的 GPT-4,有时也称为 GPT-4V 或 gpt-4-vision-preview ,在 API 中,允许模型接收图像并回答有关它们的问题。 该模型最擅长回答有关图像中存在的内容的一般问题。虽然它确实了解图像中对象之间的关系,但它尚未优化以回答有关图像中某些对象位置的详细问题。 例如,你可以问它汽车是什么颜色的,或者根据冰箱里的东西,晚餐的一些想法可能是什么,但如果你给它看一个房间的图像,并问它椅子在哪里,它可能无法正确回答问题。
腾讯技术工程官方号
2023/11/22
2K0
OpenAI新开放了这些好用的API功能
腾讯云智能体开发平台 + DeepSeek:打造懒人专属的谷歌浏览器翻译插件
在这个信息爆炸的时代,互联网就像一个巨大的知识宝库,而我,一个对新知识充满渴望的探索者,每天都在这片海洋中遨游。我热爱阅读各种英文网站,从科技前沿到文化趣闻,从学术研究到生活小技巧,无一不让我着迷。然而,最近我遇到了一个小小的烦恼——英文翻译。
LucianaiB
2025/03/02
6644
腾讯云智能体开发平台 + DeepSeek:打造懒人专属的谷歌浏览器翻译插件
推荐阅读
相关推荐
斯坦福 && 微软 | 发布前端代码生成大模型:Design2Code-18B,助力前端自动化!
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验