截屏转代码– 一个开源项目，利用AI将屏幕截图转化为网页代码

116 0 0

截图转代码是指什么

Screenshot2Code是一项开源计划，借助人工智能技术（包括GPT-4V与DALL-E 3）将用户的界面捕获图像转化为前端网站编程语言，在GitHub平台上获得了超过三万四千的关注点。此项目的主打特色在于它能够自动处理网页设计的编码环节，让开发人员仅需上传页面截图即可迅速获得匹配的HTML、CSS和JavaScript代码，从而大大减少了前端工程师的工作量与时间成本。

访问链接以进入官方页面：https://screenshottocode.com/

Git仓库链接：https://github.com/abi/screenshot-to-code

Capture2Code的核心特性

自动编程创作借助GPT-4 Vision模型的力量，该项目能解读用户上传的屏幕截图，并智能生成匹配的HTML、CSS和JavaScript代码，实现从设计图到功能齐全网站代码的迅速转化。
产生类似的图片该项目利用DALL-E 3的图形创作功能，依据HTML代码内的<img>标记自动生成类似原图的照片，并将其整合进网站内，确保页面视觉效果的一致性。
即时代码修订在应用内，用户能够即时浏览产生的代码片段，并可通过与人工智能互动的方式修改风格或是补充不完整的编码部分，以此达到符合个人设计需求的目的。
多样化的设置选择该软件提供了一系列设置选项，让用户能够挑选所需的前端开发框架（比如HTML结合Tailwind、React搭配Tailwind、Bootstrap或Vue配Tailwind），同时还可以决定是否激活DALL-E的图片创作服务。
网站页面复制除了支持手动上传图片之外，该功能还让用户能够通过输入网址来自动抓取网页截图，并以此为基础复制在线网站的外观。
修改创建出的代码在使用 Screenshot to Code 时，内置的代码编辑器让开发者能够调整生成的代码。这使得用户可以精确校正输出结果、修复问题并融入他们自己的编程风格。
展示效果与代码输出此工具具备即时预览特性，允许用户即刻观察到编辑与调整的成果，并且可以下载或是复制完成的代码。
提供现场安装服务用户能够选择在当地计算机上设置此项目以实现自行运行，这种做法极大地方便了期望在其个人工作环境下利用此项工具的使用者。

如何利用截图转代码工具功能

方案一：使用在线托管服务启动Screenshot to Code

前往Screenshot to Code的官方网站(screenshottocode.com)，接着完成注册或登录。
在左边选择设置图标，并填写OpenAI API密钥。
选定你欲创建代码所需的技术栈或框架，并上传或复制你的屏幕截图。
待识别并创建代码，创建完毕的代码能够被更新、调整及下载。

方案二：在本地环境中安装并启动Screenshot to Code

将GitHub上的项目复制到个人计算机中：使用如下命令克隆仓库：https://github.com/abi/screenshot-to-code.git 到本地。
设置后台与API秘钥：
1. 部署Poetry依赖工具：使用命令 `poetry` 进行安装的指令是 `pip install poetry`。
2. 导航至项目中的服务器端文件夹：导航至后端目录
3. 配置OpenAI API凭证：把下面的代码稍作修改，意思不变，只是表达形式有所不同： ```bash echo 'OPENAI_API_KEY=你的密钥' > .env ```
4. 安装服务器端所需的依赖包：执行使用 poetry 进行安装执行安装全部Python所需包的指令
5. 运行后台服务：使用 poetry 执行命令：uvicorn main:app --reload --port 7001
设置前端所需组件：导航至前端目录进入前端文件夹后，接着采用纱线安装所需组件，并利用使用yarn启动开发环境执行指令
通过任意一款网络浏览器进入此应用程序：https://127.0.0.1:5173您现在可以立即启用Screenshot至代码功能。

Capture to Code的定价信息

Screenshot to Code 提供了一个免费且开源的选项，允许用户自主完成本地部署。此外，还设有官方在线服务可供选择，在此模式下使用者需提供个人的 OpenAI API 密钥来激活功能。
针对未持有API密钥的用户，Screenshot to Code官方网站还推出了收费服务方案。该服务包含两个层级：Hobby级需支付15美元/月并享有100积分/月；Pro级则为40美元/月，提供300积分每月。若选择年度付款方式，则可获赠两个月的免费使用期。