哈喽，大家好！
今天给大家介绍一个项目，通过简单的屏幕截图，开发者可以轻松生成高质量的HTML、CSS和JavaScript代码，当然，还支持生成React、VUE等前端代码，大大简化了网页设计的编码过程，提高了开发效率，并降低了入门门槛，甚至用 DALL-E 3把图片资源都帮你生成好了。
无论你是经验丰富的开发人员还是刚入行的新手，Screenshot to Code都能为你带来前所未有的便利和创新体验。
Screenshot to Code
项目介绍：它利用先进的人工智能技术（GPT-4V和DALL-E 3）将用户上传的屏幕截图转换成前端网页代码。这个项目在GitHub上已经获得了3.4万颗星标，显示出其极高的受欢迎程度。
该项目的核心功能是自动化网页设计的编码过程。开发者只需提供网页的截图，就能快速生成相应的HTML、CSS和JavaScript代码。这大大节省了前端开发人员的时间和精力，提高了开发效率。
官网入口：https://screenshottocode.com/
GitHub仓库：https://github.com/abi/screenshot-to-code
项目特点
优点
-
它可以为程序员节省大量时间。 -
它可以为您省钱。 -
使用起来超级简单。
缺点
-
它可能不准确。 -
该工具不能替代人类程序员。
主要功能
-
智能代码生成：利用 GPT-4 Vision模型，项目能够分析用户提供的屏幕截图，并自动生成相应的HTML、CSS和JavaScript代码，可以快速将设计稿转换为可运行的网页代码。 -
相似图像生成：项目还结合了 DALL-E 3的图像生成能力，能够根据生成的HTML代码中的<img>标签，自动创建与原始截图相似的图像，并将这些图像嵌入到网页中，以保持页面的视觉一致性。 -
实时代码更新：用户可以在应用程序中实时查看生成的代码，并且可以通过与 AI的交互来调整样式或更新代码中缺失的部分，以满足特定的设计要求。 -
灵活的配置选项：应用程序提供了配置选项，允许用户选择使用的前端技术（如 HTML + Tailwind、React + Tailwind、Bootstrap、Vue + Tailwind）以及是否启用DALL-E图像生成和功能。 -
URL网页克隆：除开手动上传截图外，允许用户输入 URL自动截图以克隆在线网站。 -
编辑生成的代码： Screenshot to Code内置了代码编辑器允许开发者对生成的代码进行修改，可以微调输出、纠正任何异常或添加个人代码风格。 -
效果预览和代码导出：该工具提供实时预览功能，用户能够实时查看编辑和修改的效果，并支持下载或复制最终代码。 -
支持本地部署：用户可以选择将该项目在本地电脑上部署，以便在自己的计算机上运行，这为那些希望在本地环境中使用该工具的用户提供了便利。 
产品价格
-
免费版： Screenshot to Code提供免费开源的版本，用户可以自行在本地进行部署，也可以使用官方的在线托管版，输入自己的OpenAI API密钥使用。 -
付费版本：对于没有 API密钥的用户，Screenshot to Code官网托管版也提供了付费订阅版：
-
Hobby计划：15美元每月（提供100积分/月） -
Pro计划：40美元每月（提供300积分每月），年付的话免费2个月。
使用
Screenshot to Code 提供了在线使用环境，可以直接上传图片并执行：(https://screenshottocode.com/)。
但是这个在线环境需要购买执行次数，或者绑定自己的OpenAI API key。这两件事我都不是很想做，所以还是看看自己安装部署吧。
安装与部署
目前主要有两种方式：源码启动和docker启动。
源码安装：
Screenshot to Code 由 React/Vite 开发前端和 FastAPI 开发后端。同时需要一个能够访问 GPT-4 Vision 的 OpenAI API key。首先，克隆 GitHub 项目库到本地电脑：
git clone https://github.com/abi/screenshot-to-code.git
启动后端（使用 Poetry 来管理依赖）：
# 安装Poetry包管理器
pip install poetry
cd backend
# 设置 OpenAI API密钥
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) 访问应用。
原创文章，作者：guozi，如若转载，请注明出处：https://www.sudun.com/ask/81913.html
