screenshot-to-code将截图转换为代码的工具

Github项目
项目作者：https://github.com/abi
开源地址：https://github.com/abi/screenshot-to-code

screenshot-to-code简介

这是一款将将截图转换为代码的工具。这款工具可以接收图片或草图作为输入，然后输出相应的HTML或CSS代码，这是一项令人惊叹的功能。这款工具是由[Abi]开发的一个开源项目，您可以在GitHub上找到它。

功能特点

这款工具虽然基于一个简单的概念，即将图片或草图转换为HTML或CSS代码，但是要实现这个功能，需要用到复杂的技术。这款工具是通过以下几种技术的结合来运行的。

• 图像处理：这款工具会分析输入的图片或草图，提取其中包含的元素和布局。例如，它可以识别按钮、文本框、图片等组件，以及它们的位置、大小、颜色等属性。
• 机器学习：这款工具会根据图像处理得到的元素和布局，生成相应的HTML或CSS代码。这款工具使用了[pix2code]这个模型。pix2code是一个用于从图片生成代码的深度学习模型，由[Tony Beltramelli]开发。pix2code的工作原理是，将图片分割成一系列的标记，然后将这些标记转换为代码的标记。这个模型是通过大量的图片和代码的配对进行学习的，因此可以对新的图片生成合适的代码。
• Web开发：这款工具会将生成的HTML或CSS代码在浏览器中显示出来。这款工具使用了[Flask]这个框架，作为一个Web应用程序来运行。Flask是一个用Python编写的轻量级和简单的Web框架，可以方便地创建网站或Web服务。

Docker安装

If you have Docker installed on your system, in the root directory, run:

echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d

sk-your-key改成自己的key
默认端口为5173
你可以在docker-compose.yml改成自己的端口

参考文档

• https://github.com/abi/screenshot-to-code?tab=readme-ov-file#docker
• https://mp.weixin.qq.com/s/MoZkl0W_8C8VJoT0RvfiYA