上传截图即可获得整洁的前端代码，实时更新和灵活的配置选项大幅度提高了用户体验。借助GPT-4 Vision，直接将屏幕截图生成为网页，上半年还在说自然语言编程让 AI 做个手机APP，现在这个连自然语言都省了。

快速体验

这个项目有一个React/Vite前端和一个FastAPI后端。此外需要准备一个OpenAI密钥，可以访问 GPT-4 Vision API。

首先克隆源码

git clone https://github.com/abi/screenshot-to-code.git

2、官方提供了两种方式安装

一种是手动构建，另一种是使用 Docker 部署

3、手动构建方式步骤如下：3.1 运行服务端需安装poetry依赖，python 版本建议使用 3.11+

pip install poetry

cd backendecho "OPENAI_API_KEY=填写openai密钥" > .envpoetry installpoetry shellpoetry run uvicorn main:app --reload --port 70013.2 运行前端

cd frontendyarnyarn dev

4、Docker安装部署步骤如果你的电脑上安装了 Docker，建议使用这种方式，简单快捷

cd screenshot-to-codeecho "OPENAI_API_KEY=填写openai密钥" > .envdocker-compose up -d --build

5、启动成功
在浏览器访问：http://<ip>:5173

到这里就部署成功了，然后你就可以截图，把截图推拽到页面里，就开始自动生成网页代码。和原版网页对比一下，几乎一模一样，6 啊~

看起来很神奇，其实项目的核心原理只是一条 Prompt，借助了gpt-4-vision-preview 模型，交给 GPT 来完成识图+写代码的工作，最后把代码中的 img 标签提取出来，调用 DALL-E 3 模型转换为图片。感兴趣的宝子可以研究下这个指令代码，有点意思：

https://github.com/abi/screenshot-to-code/blob/main/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".看到这里你就恍然大悟了，原来如此，对前端来说有点威胁，但不至于失业，嗯哼~ 整不死咱，宝子们放心的睡大觉 ~

版权声明 1 本网站名称：山海云端-专注于PHP与网络安全
2 本站永久网址：www.shserve.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ1790643379进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

干货分享软件资源
# Vision # AI 开源

28.1k Stars 最新爆火的 AI 开源项目

快速体验

请登录后发表评论