牛逼!50.3K Star!一个自动将屏幕截图转换为代码的开源工具

3k,star · 浏览次数 : 0

小编点评

**背景** 在当今快速发展的软件开发环境中,设计师与开发者之间的协同工作变得尤为重要。然而,理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本。 **项目介绍** screenshot-to-code是一个创新的开源工具,它利用 AI 人工智能技术将屏幕截图自动转换为前端代码,为设计师和开发者之间的合作开辟了新的可能性。 **技术特点** * 使用 AI 人工智能技术,自动识别和分析屏幕截图,生成结构良好、易于维护的 HTML、CSS 和前端框架的代码。 * 支持 HTML + TailwindReact + TailwindVue + TailwindBootstrapIonic + TailwindSVG3 技术栈。 * 提供 OpenAI API密钥支持,可调整模型性能。 **使用步骤** 1. 获取 OpenAI API 密钥。 2. 部署后端和后端服务。 3. 在前端运行应用程序。 4. 上传截图或视频。 **优势** * 提高开发效率。 * 减少沟通成本。 * 降低设计者和开发者技能的要求。 * 加强代码准确性和一致性。 **展望** * 技术进步将提高准确度和适用性。 * 在更多领域应用,为软件开发带来更多便利和创新。

正文

1、背景

在当今快节奏的软件开发环境中,设计师与开发者之间的协同工作显得尤为重要。然而,理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本。为此,开源社区中出现了一个引人注目的项目——screenshot-to-code,它利用AI人工智能技术(机器学习算法和视觉分析技术),将屏幕截图自动转换为前端代码,为设计师和开发者之间的合作开辟了新的可能性。

对于前端开发者来说,这意味着他们可以节省大量的手工编码时间,快速从原型或设计稿进入到实际的开发阶段。例如,设计师可以直接将设计的界面截图上传,然后得到一份初步的代码,这极大地加快了设计到开发的转换速度。此外,这个项目也非常适合用于教育目的,帮助初学者理解UI设计与代码实现之间的联系。

2、项目介绍

screenshot-to-code是一个创新的开源工具,它能够将设计图中的截图自动转化为代码片段,主要用于网页和应用界面的开发。通过上传一张包含设计布局的截图,该工具能够智能解析其中的各种界面元素,如文本、图像、按钮、表格、导航栏等,并依据这些元素的位置、尺寸、颜色以及层次关系,精确地生成结构良好、易于维护的前端代码,包括HTML、CSS,以及React或Vue等前端框架的代码,满足了不同项目的需求。

项目地址:

https://github.com/abi/screenshot-to-code

支持的技术栈有:

  • HTML + Tailwind
  • React + Tailwind
  • Vue + Tailwind
  • Bootstrap
  • Ionic + Tailwind
  • SVG

3、技术原理

首先,让我们了解一下screenshot-to-code项目的工作原理。这个项目利用了AI人工智能技术。当用户上传一个屏幕截图时,系统会首先分析这个截图,识别出其中的各种UI元素,如按钮、文本框、图片等。接着,它会将这些视觉元素转换为相应的HTML标签和CSS样式。如果用户选择的是React或Vue,它还会自动生成对应的组件代码。

具体来讲,screenshot-to-code的核心是基于图像识别的深度学习模型。该模型经过训练,能够理解和解析设计图中的元素,如布局、颜色、字体大小和类型、边距等。模型的工作原理大致如下:

  • 图像预处理:首先对输入的截图进行标准化处理,包括调整尺寸、裁剪、灰度化等,以便于模型进行分析。
  • 特征提取:模型通过卷积神经网络(CNN)提取图像中的关键特征,如形状、颜色、纹理等。
  • 元素识别:基于提取的特征,模型对图像中的界面元素进行识别和分类,如文本、图像、按钮等。
  • 布局分析:模型进一步分析元素之间的位置、尺寸、颜色以及层次关系,构建出完整的界面布局。
  • 代码生成:最后,模型根据界面布局和元素属性,生成相应的HTML、CSS以及前端框架的代码。

4、使用步骤

首先,你需要拥有一个具有访问GPT-4 Vision权限的OpenAI API密钥。

目前screenshot-to-code支持的AI模型有:

  • GPT-4 Turbo (Apr 2024) - Best model
  • GPT-4 Vision (Nov 2023) - Good model that's better than GPT-4 Turbo on some inputs
  • Claude 3 Sonnet - Faster, and on par or better than GPT-4 vision for many inputs
  • DALL-E 3 for image generation

其次,分别部署后端和后端,

切换到backend目录,创建.env文件并设置您的OpenAI API密钥,然后使用Poetry进行依赖安装和环境启动。

cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

然后运行前端,在frontend目录下,执行 yarn 安装依赖,然后运行 yarn dev 开发服务器。

cd frontend
yarn
yarn dev

打开浏览器访问 http://localhost:5173 使用该应用。

如果希望用Docker部署,只需在根目录下配置好环境变量并将API密钥写入.env文件,然后运行docker-compose命令即可。

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

通过以上步骤设置好后,用户就可以上传截图或视频,系统会自动生成对应的代码。

具体展示效果,感兴趣的读者可以参考官方提供的演示视频。

5、小结与展望

screenshot-to-code项目的优势,最明显的是效率的提升,该工具不仅提高了开发效率,减少了沟通成本,还降低了对设计师和开发者技能水平的要求。

传统的开发流程中,将设计转化为代码是一个耗时且重复的工作,而这个项目通过自动化的方式大大缩短了这一过程。此外,它还有助于减少人为错误,提高代码的准确性和一致性。

然而,挑战也是显而易见的。首先,由于技术的局限性,当前的图像识别算法可能无法完美地识别所有的UI元素和样式,特别是在复杂的设计中。其次,自动生成的代码可能需要进一步的调整和优化才能满足实际的业务需求。此外,对于那些追求定制化和高度优化的开发者来说,自动生成的代码可能无法达到他们的要求。

尽管存在一些挑战,但screenshot-to-code项目的潜力是巨大的。随着技术的不断进步,我们可以预见到它的准确度和适用性将会不断提高。未来,随着技术的不断发展和优化,我们期待screenshot-to-code能够在更多领域得到应用和推广,为软件开发带来更多便利和创新。

与牛逼!50.3K Star!一个自动将屏幕截图转换为代码的开源工具相似的内容:

牛逼!50.3K Star!一个自动将屏幕截图转换为代码的开源工具

1、背景 在当今快节奏的软件开发环境中,设计师与开发者之间的协同工作显得尤为重要。然而,理解并准确实现设计稿的意图常常需要耗费大量的时间和沟通成本。为此,开源社区中出现了一个引人注目的项目——screenshot-to-code,它利用AI人工智能技术(机器学习算法和视觉分析技术),将屏幕截图自动转

《吐血整理》高级系列教程-吃透Fiddler抓包教程(36)-掌握Fiddler中Fiddler Script用法,你会有多牛逼-上篇

1.简介 Fiddler是一款强大的HTTP抓包工具,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。Fiddler提供的功能基本上能满足大部分人的基本要求。但是如果我们需要一些更复杂,更便

《吐血整理》高级系列教程-吃透Fiddler抓包教程(37)-掌握Fiddler中Fiddler Script用法,你会有多牛逼-下篇

1.简介 Fiddler是一款强大的HTTP抓包工具,它能记录所有客户端和服务器的http和https请求,允许你监视,设置断点,甚至修改输入输出数据. 使用Fiddler无论对开发还是测试来说,都有很大的帮助。Fiddler提供的功能基本上能满足大部分人的基本要求。但是如果我们需要一些更复杂,更便

Gitee千Star优质项目解析: ng-form-element低开引擎解析

好家伙, 在写项目的时候,我发现自己的平台的组件写的实在是太难看了,于是想去gitee上偷点东西,于是我们本期的受害者出现了 gitee项目地址 https://gitee.com/jjxliu306/ng-form-elementplus-sample.git 组件库以及引擎完全开源,非常牛逼的项

声音克隆,精致细腻,人工智能AI打造国师“一镜到底”鬼畜视频,基于PaddleSpeech(Python3.10)

电影《满江红》上映之后,国师的一段采访视频火了,被无数段子手恶搞做成鬼畜视频,诚然,国师的这段采访文本相当经典,他生动地描述了一个牛逼吹完,大家都信了,结果发现自己没办法完成最后放弃,随后疯狂往回找补的过程。 最离谱的是,他这段采访用极其丰富的细节描述了一个没有发生且没有任何意义的事情,堪比单口相声

[转帖]我所理解的SRE、PE和应用运维

https://www.cnblogs.com/zhangxinglong/p/14756366.html SRE这个概念我个人印象中应该14年下半年左右听到的,当时只知道是Google对运维岗位定义,巨牛逼的一个岗位,在网上查到SRE是叫网站稳定工程师,只要是保障稳定为主,其他就没有更深的意识了。

抢先看!美团、京东、360等大厂面试题解析,技术面试必备。

技术面试必备!美团、京东、360等大厂面试题详解,让你轻松应对各大公司面试挑战! 往期硬核面经 哦耶!冲进腾讯了! 牛逼!上岸腾讯互娱和腾讯TEG! 腾讯的面试,强度拉满! 前几篇文章分享了上岸腾讯的最新面经。 不少粉丝股东留言说别只发腾讯的啦,其他大厂的也安排一些吧,比如美团、360、京东的。 必

遗传算法的改进——跳出局部最优机制的研究(选择算子、交叉算子、变异算子的改进)

0. 写在前面 参考博文:遗传算法的几种改进 - GXTon - 博客园 (cnblogs.com) 参考文献:新型灾变自适应遗传算法及其应用 (c-s-a.org.cn) 没想到被最基础的遗传算法打败了˚‧º·(˚ ˃̣̣̥᷄⌓˂̣̣̥᷅ )‧º·˚ 在编写遗传算法时我发现了一些问题: 优良基因很

Python并行运算——threading库详解(持续更新)

0. 写在前面:进程和线程 博文参考: Python的并行(持续更新)_python 并行-CSDN博客 《Python并行编程 中文版》 一些相关概念请见上一篇博文。 1. 在Python中使用线程 1.1 多线程简介 线程是独立的处理流程,可以和系统的其他线程并行或并发地执行。 多线程可以共享数

Python的进程和线程——一些基础概念

1. 线程和进程 1.1 线程和进程 进程可以包含多个并行运行的线程; 通常,操作系统创建和管理线程比进程更省CPU资源; 线程用于一些小任务,进程用于繁重的任务; 同一个进程下的线程共享地址空间和其他资源,进程之间相互独立; 1.2 线程 v.s. 进程: 1.2.1 多线程 多线程是在同一进程内