28.1k星的AI开源项目，前端开发者的新挑战？
发表时间: 2023-12-11 07:07
#2023年度创作挑战#
墨林码农专注分享开源项目， 精选开源社区技术干货，分享Github、Gitee上有趣、有价值的项目，一起学习，一起成长。
最新 AI 开源项目，将屏幕截图转换为网页代码（HTML/Tailwind CSS，或React或Vue或Bootstrap）。
基于 GPT-4 Vision 生成代码，使用 DALL-E 3 生成外观相似的图像。还可以输入 URL 直接克隆一个网站！
它就是最近在GitHub特别火的 screenshot-to-code，截图变代码！每天 star 数增长量将近 2600 多个，截至目前，已累计获得 28.1K stars，3.1K forks。
️ 快速体验
这个项目有一个React/Vite前端和一个FastAPI后端。此外需要准备一个OpenAI密钥，可以访问 GPT-4 Vision API。
1、首先克隆源码
git clone https://github.com/abi/screenshot-to-code.git2、官方提供了两种方式安装
一种是手动构建，另一种是使用 Docker 部署
3、手动构建方式步骤如下：
3.1 运行服务端
需安装poetry依赖，python 版本建议使用 3.11+
pip install poetrycd backendecho "OPENAI_API_KEY=填写openai密钥" > .envpoetry installpoetry shellpoetry run uvicorn main:app --reload --port 70013.2 运行前端
cd frontendyarnyarn dev4、Docker安装部署步骤
如果你的电脑上安装了 Docker，建议使用这种方式，简单快捷
cd screenshot-to-codeecho "OPENAI_API_KEY=填写openai密钥" > .envdocker-compose up -d --build5、启动成功
在浏览器访问：http://<ip>:5173
到这里就部署成功了，然后你就可以截图，把截图推拽到页面里，就开始自动生成网页代码。和原版网页对比一下，几乎一模一样，6 啊~
看起来很神奇，其实项目的核心原理只是一条 Prompt，借助了gpt-4-vision-preview 模型，交给 GPT 来完成识图+写代码的工作，最后把代码中的 img 标签提取出来，调用 DALL-E 3 模型转换为图片。
这里看下翻译为中文后的 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".看到这里你就恍然大悟了，原来如此，对前端来说有点威胁，但不至于失业，嗯哼~ 整不死咱，宝子们放心的睡大觉 ~
结束语
几个简单的字符，就能创造出欢乐，
几个简单的号码，便能写出奇迹。
一个键盘，就能畅游世界，
一根网线，便能知晓天下。
创作不易，感谢大家的支持。后续也会分享更多的干货和技术资讯，您的阅读就是对小编的支持，再次感谢各位老铁！
鲁公网安备37020202000738号