* 戳上方蓝字「 开源先锋 」关注我
推荐阅读：
大家好，我是开源君。
今天给大家介绍一个非常牛的开源项目：
Screenshot-to-code
。
Screenshot-to-code
是一个可以将屏幕截图转化为 HTML/JS/Tailwind CSS 代码的工具。它利用 GPT-4 Vision 生成代码，结合 DALL-E 3 生成相似的图片。
项目特性
1、屏幕截图即代码
能够将屏幕截图瞬间转变为可运行的代码。这意味着，你只需要截取一个网页或应用程序的截图，Screenshot-to-code 就可以自动生成对应的 HTML、CSS、JavaScript 代码。
这项功能对于初学者来说非常友好，可以帮助快速学习前端开发。对于经验丰富的开发人员来说，也可以节省大量的时间和精力。
2、GPT-4 Vision
项目利用最新的 GPT-4 Vision 技术，可以生成高度智能化的代码，能够帮助我们更好地理解屏幕截图中的元素，并生成更加贴近设计意图的代码。
3、DALL-E 3 图片生成
可以结合 DALL-E 3 技术生成相似的图片，我们可以使用 Screenshot-to-code 生成一个网页或应用程序的截图，然后使用 DALL-E 3 生成一个相似的图片。
这项功能可以让我们的页面呈现更加丰富多彩、独具特色。
一个例子
如何快速使用
Screenshot-to-code 的使用很简单，官方给了很详细的说明。
使用前提是有一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。
接着按照下面的步骤：
1、下载 Screenshot-to-code 的源代码。
2、在 backend/.env 文件中添加你的 OpenAI API 密钥。
3、使用 poetry install 安装依赖项。
4、使用 poetry run uvicorn main:app --reload --port 700运行后端。（如果您希望在不同端口上运行后端，可以修改文件 VITE_WS_BACKEND_URLfrontend/.env.local）
5、使用 yarn 安装前端依赖项。
6、使用 yarn dev 运行前端。
7、打开浏览器，访问 http://localhost:5173 即可使用。
如果你安装了Docker，也可以用下面的命令快速开始：
echo"OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
当然，如果你也不想这么麻烦，官方提供了一个在线的版本供体验使用
https://screenshottocode.com
目前 Screenshot-to-code 项目依然还在开发更新中，已经取得了令人印象深刻的进展。未来，Screenshot-to-code 会在支持更多的语言和框架、提高生成代码的准确性和效率、增加更多功能，例如代码片段共享和代码编辑器集成等方面进行提示。
开源君有一种感觉，Screenshot-to-code 有可能会成为未来前端开发的必备工具。
关于项目的更多细节，感兴趣的同学可以自行去项目地址查看。
项目地址：
https://github.com/abi/screenshot-to-code
