前言
当你看到你漂亮的网页,也想参考实现应该如何做呢?构思、设计、编码一系列的流程吗?现在的 AI 真是太神奇了,它让我们能够通过截图来翻译代码,再也不用费劲地手打了!
今天我们推荐的是一个让程序员们疯狂的 GitHub 项目,一键将图片的内容翻译从代码,在 GitHub 已超过 31K Star 的开源项目:Screenshot to Code。
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/e86aeeaebe834f8af5ee153ae367fe4d.jpeg)
Screenshot to Code 是什么?
这个简单的应用程序将屏幕截图转换为代码(HTML/Tailwind CSS、React、Vue 或 Bootstrap)。它使用 GPT-4 Vision 生成代码,并使用 DALL-E 3 生成外观相似的图像。您现在还可以输入 URL 来克隆实时网站!
借助 GPT-4 Vision 的突破性能力,Screenshot to Code 让人看到一种全新的开发模式正悄然到来。作为一名开发人员,这个工具让我非常惊讶。只需点击几下鼠标,它就能将以前密集的手动流程自动化。
以下是一个执行的示例,将泰勒·斯威夫特 Instagram 页面的屏幕截图转换为代码的过程:
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/47630aa1b9833d74a33be4b06340ed39.gif)
在几秒钟内,屏幕截图到代码就可以以惊人的精度对页面设计进行建模。这是在开发过程中模拟设计的令人难以置信的资源。
安装 Screenshot to Code
Screenshot to Code 提供了在线使用环境,可以直接上传图片并执行:
https://screenshottocode.com/
但是这个在线环境需要购买执行次数,或者绑定自己的 OpenAI API key。这两件事我都不是很想做,所以还是看看自己安装部署吧。
目前来看主要有两种方式:源码启动和 docker 启动。
源码安装:
Screenshot to Code 由 React/Vite 开发前端和 FastAPI 开发后端。同时需要一个能够访问 GPT-4 Vision 的 OpenAI API key。
首先启动后端(使用 Poetry 来管理依赖):
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
启动前端部分:
cd frontend
yarn
yarn dev
启动完成后,在 http://localhost:5173 访问应用。
docker 启动:
如果你的本地或服务器上已经有 docker 环境,那么可以直接使用 docker 来启动。
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
同样的,启动完成后,在 http://localhost:5173 访问应用。
使用 Screenshot to Code
Screenshot to Code 目前支持转换的代码样式包括:HTML/Tailwind CSS、React、Vue 和 Bootstrap 等,还有 Ionic 和 SVG 是 bate 状态。用户可以根据自己的需求选择适合自己的代码类型。无论你是前端新手还是经验丰富的开发者,都能够轻松地利用这个项目来快速生成所需的代码。
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/ccc086f54fc4d55f674fce49d814b079.png)
除了可以上传截图以外,还可以通弄过 URL 来获取截图,并自动生成代码。
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/ce0600cdf62a32a49c4987e022fc3170.png)
但是这需要购买 Screenshot to code 的次数,来获取 API key 才能使用。
随便截了个知乎首页的图,测试一下,电脑版的效果还挺不错,但是 mobile 的就差强人意了。
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/489f333b3f655fcceedaa5f507355835.jpeg)
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/be74cc4c9e41ff442b10535478ea3a23.jpeg)
在代码中还可以向 AI 提出微调的要求,然后更新到代码中,一点点的优化最后的结果。
![Screenshot to Code: 将截图翻译成代码的黑科技 Screenshot to Code: 将截图翻译成代码的黑科技](/wp-content/uploads/202402/9e9da83a715872e20e59c7b80663e5b4.png)
项目特点
优点
- 它可以为程序员节省大量时间。
- 它可以为您省钱。
- 使用起来超级简单。
缺点
- 它可能不准确。
- 该工具不能替代人类程序员。
项目信息
- 项目名称:Screenshot to Code
- 在线体验:https://screenshottocode.com/
- GitHub 链接:https://github.com/abi/screenshot-to-code
- Star 数:31K+