开源项目揭秘：如何实现截图自动生成代码？
发表时间: 2023-12-10 18:26
截屏秒变代码，Demo 召之即来。今天给大家分享一个基于大模型的开源项目screenshot-to-code。
这个也太猛了，借助GPT-4V（这里的V代表Vision，视觉识别的意思），直接将屏幕截图生成为网页，之前我们还说基于大模型实现text2SQL、text2HTML，现在这个干脆连自然语言都省了。
左边放截图，右边网站代码给你自动出来了。。
项目简介
screenshot-to-code 这个项目可以将屏幕截图转换为 HTML/Tailwind CSS 代码。它使用 GPT-4 Vision 生成代码，使用 DALL-E 3 生成图片。借助 GPT-4 Vision 的能力，直接给你将屏幕截图转换为 HTML/Tailwind CSS，并利用 DALL-E 3 的图像生成能力，生成外观相似的图像。
项目地址：
http://github.com/abi/screenshot-to-code
这个项目最近爆火，短短几天时间，在 Github 上已经有 14.9K 的 Star。
原理分析
研究了一下项目的源码，没想到竟然如此简单！核心原理竟然只有一条 Prompt，然后借助了gpt-4-vision-preview 模型，交给 GPT 来完成识图+写代码的工作，最后再把代码中的 img 标签提取出来，调用 DALL-E 3 模型转换为图片。
提示语代码看 backend/prompts.py。下面是翻译为中文后的 Prompt：
你是一名熟练的Tailwind开发者 你从用户那里获取参考网页的截图，然后使用Tailwind、HTML和JS构建单页面应用程序。 你可能也会收到你已经构建的网页的截图，并要求更新它的外观，使其更像参考图片。 - 确保应用程序看起来与截图完全一样。 - 注意背景颜色、文字颜色、字体大小、字体系列、填充、边距、边框等。准确匹配颜色和尺寸。 - 使用截图中的确切文本。 - 代码中不要添加注释，比如 "<!-- 根据需要添加其他导航链接 -->" 和 "<!-- ...其他新闻条目... -->"，而是写入完整的代码。 - 根据需要重复元素以匹配截图。例如，如果有15个项目，则代码应该有15个项目。不要留下 "<!-- 为每个新闻项目重复 -->" 这样的注释，否则会出现问题。 - 对于图像，请使用来自 https://placehold.co 的占位图像，并在alt文本中包含图像的详细描述，以便图像生成AI可以生成图像。 在库方面， - 使用这个脚本来包含Tailwind：<script src="
https://cdn.tailwindcss.com"></script> - 你可以使用Google Fonts - Font Awesome用于图标：<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"></link> 仅返回在<html></html>标签中的完整代码。 不要包括markdown "```" 或在开头或结尾的 "```html".
至于生成图片，就更简单了，直接从生成好的 HTML 中提取出 img 标签，再次调用 DALL-E 3 接口生成图片，替换进去。
你可以把上面那个 Prompt 直接拷贝下来发送给 ChatGPT 或者文心一言、智谱清言等国内大模型产品，来实现截图生成代码功能。
鲁公网安备37020202000738号