AI技术将截图转换为网页代码，开源项目助力高效开发。

什么是Screenshot to Code？

Screenshot to Code是一个创新的开源工具，它通过运用尖端的人工智能技术——GPT-4V和DALL-E 3，实现了将用户上传的屏幕截图一键转换成前端代码的功能。这个项目在GitHub上获得了34,000个星标，显示出其受欢迎程度。其主要目的是简化网页设计的编码工作，让开发者能够通过简单的截图来自动生成HTML、CSS和JavaScript代码，极大提高了前端开发的效率。

项目官网：Screenshot to Code
GitHub仓库：github.com/abi/screenshot-to-code

主要功能概览

1. 智能代码生成：采用GPT-4 Vision模型，智能分析并转换屏幕截图为网页代码。
2. 图像生成：利用DALL-E 3，创建与截图相似的图像并嵌入到生成的网页中。
3. 实时代码预览与编辑：用户可以实时看到代码的生成过程，并进行必要的编辑。
4. 多样的配置选项：支持多种前端技术栈，如HTML+Tailwind、React+Tailwind等。
5. URL克隆：用户可以通过输入URL，自动生成当前网页的克隆模板。
6. 内置代码编辑器：编辑并优化自动生成的代码。
7. 代码效果预览与导出：提供实时预览，支持代码下载或复制。
8. 支持本地部署：用户可在本地机器上独立部署和运行。

使用指南

在线版本操作步骤

1. 访问官网并注册/登录。
2. 设置OpenAI API key，选择所需的技术栈，并上传截图。
3. 系统自动识别并生成代码，用户可修改并下载。

本地部署操作步骤

1. 从GitHub克隆项目到本地：git clone https://github.com/abi/screenshot-to-code.git
2. 后端和API配置：
3. 安装Poetry包管理器。
4. 设置OpenAI API密钥。
5. 进入backend目录安装依赖。
6. 启动后端服务。
7. 安装前端依赖并运行前端应用。
8. 访问http://localhost:5173开始使用。

产品定价

• 免费版：提供开源版本，支持本地或在线托管使用。
• 付费版：提供Hobby和Pro两个付费计划，年付有额外优惠。

常见问题解答

Q: Screenshot to Code完全免费吗？
A: 是的，它是一个开源且免费的工具，支持自定义API密钥使用。

Q: 它基于哪些模型运行？
A: 使用GPT-4 Vision处理代码生成，DALL-E 3进行图像生成。

Q: 截图可以转换为哪些代码类型？
A: 支持转换为HTML+Tailwind、React+Tailwind、Bootstrap、Vue+Tailwind、Ionic+Tailwind以及SVG格式的代码。

Screenshot to Code是一个前沿的自动化工具，为前端开发领域带来了创新的工作流程。它不仅提高了开发效率，同时也为没有编程背景的设计师提供了一种快速上手网页开发的可能性。