Screenshot to Code - AI将屏幕截图转换为网页代码

Screenshot to 什么是Code？

Sscreenshot to 使用人工智能技术的Code是一个开源项目（GPT-4V 和 DALL-E 3)将用户的屏幕截图转换为前端网页代码，并在GitHub上获得3.4万星标。该项目的核心功能是自动化网页设计的编码过程，使开发人员能够通过提供网页截图快速生成相应的HTML、节省前端开发人员的时间和精力，CSS和JavaScript代码。

官网入口：https://screenshottocode.com/

GitHub代码库：https://github.com/abi/screenshot-to-code

Screenshot to Code的主要功能

生成智能代码：利用GPT-4 Vision模型，项目可以分析用户提供的屏幕截图，并自动生成相应的HTML、CSS 和 JavaScript 代码可以快速将设计稿转换为可操作的网页代码。
生成类似的图像：该项目还与DALLLL相结合-E 3的图像生成能力可以根据HTML代码生成<img>标签，自动创建类似于原始截图的图像，并将其嵌入到网页中，以保持页面的视觉一致性。
实时代码更新：用户可以在应用程序中实时查看生成的代码，并调整样式或更新代码中缺失的部分，以满足特定的设计要求。
配置选项灵活：前端技术(如HTML)提供了配置选项，允许用户选择 TAIlwind、React Tailwind、Bootstrap、Vue Tailwind）是否使用DALL-E图像生成和功能
URL网页克隆：除手动上传截图外，允许用户输入 URL 克隆在线网站自动截图。
编辑生成的代码：Screenshot to Code 内置代码编辑器允许开发者修改生成的代码，可以微调输出，纠正任何异常或添加个人代码风格
效果预览和代码导出：该工具提供实时预览功能，用户可以实时查看编辑和修改的效果，并支持下载或复制最终代码
支持本地部署：用户可以选择在本地计算机上部署项目，以便在自己的计算机上运行，这为那些想在本地环境中使用该工具的用户提供了便利。

Screnshot如何使用？ to Code

方法1:Screnshot操作在线托管版 to Code

访问Screnshot to Code官网（screenshottocode.com），然后注册/登录
单击左侧的设置图标，输入OpenAI API key
选择您想要生成的代码的技术/框架，上传或粘贴您的截图
等待识别和生成代码，可以更新和下载生成的代码

方法二：Screenshot本地部署运行 to Code

从克隆GitHub项目库到本地电脑：git clone https://github.com/abi/screenshot-to-code.git
配置后端和API密钥：
1. 安装Poetry包管理器：pip install poetry
2. 项目后端目录的定位：cd backend
3. 设置OpenAI API密钥：echo "OPENAI_API_KEY=your-key" > .env
4. 安装后端依赖项：操作poetry install所有Python命令都依赖于项目
5. 启动后端服务器：poetry run uvicorn main:app --reload --port 7001
安装前端依赖项：cd frontend切换到前端目录，然后使用yarn安装依赖项并使用yarn dev命令运行
浏览器访问应用程序：使用任何浏览器访问http://localhost:5173可以开始使用Screnshot to Code

Screenshot to Code的产品价格

免费版：Screenshot to Code提供免费开源版本。用户可以在本地部署自己，也可以使用官方在线托管版本输入自己的OpenAI。使用API密钥
付费版：对于没有API密钥的用户，Screenshot to Code官网托管版也提供付费订阅版，Hoby计划每月15美元(100分/月)、Pro计划每月40美元(每月提供300分)，每年免费支付2个月。