31K star！Screenshot to Code: 将截图翻译成代码的黑科技！

已于 2023-12-19 12:02:11 修改
阅读量2.1k 收藏 22
点赞数 30
分类专栏： 开源推荐 文章标签： 科技 ai github 开源软件 gpt
于 2023-12-19 12:01:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64096908/article/details/135081556
版权
这篇文章介绍了ScreenshottoCode，一款能将屏幕截图自动转换为HTML/TailwindCSS、React、Vue或Bootstrap代码的GitHub项目。通过GPT-4Vision和DALL-E3，它极大简化了开发过程，但也存在精度问题。
摘要由CSDN通过智能技术生成

前言

当你看到你漂亮的网页，也想参考实现应该如何做呢？构思、设计、编码一系列的流程吗？现在的AI真是太神奇了，它让我们能够通过截图来翻译代码，再也不用费劲地手打了！

今天我们推荐的是一个让程序员们疯狂的 GitHub 项目，一键将图片的内容翻译从代码，在GitHub已超过31K Star的开源项目：Screenshot to Code 。

Screenshot to Code是什么?

这个简单的应用程序将屏幕截图转换为代码（HTML/Tailwind CSS、React、Vue 或 Bootstrap）。 它使用 GPT-4 Vision 生成代码，并使用 DALL-E 3 生成外观相似的图像。 您现在还可以输入 URL 来克隆实时网站！

借助GPT-4 Vision的突破性能力，Screenshot to Code 让人看到一种全新的开发模式正悄然到来。作为一名开发人员，这个工具让我非常惊讶。只需点击几下鼠标，它就能将以前密集的手动流程自动化。

以下是一个执行的示例，将泰勒·斯威夫特 Instagram 页面的屏幕截图转换为代码的过程：

在几秒钟内，屏幕截图到代码就可以以惊人的精度对页面设计进行建模。这是在开发过程中模拟设计的令人难以置信的资源。

安装 Screenshot to Code

Screenshot to Code 提供了在线使用环境，可以直接上传图片并执行：https://screenshottocode.com/

但是这个在线环境需要购买执行次数，或者绑定自己的OpenAI API key。这两件事我都不是很想做，所以还是看看自己安装部署吧。

目前来看主要有两种方式：源码启动和docker启动。

源码安装：

Screenshot to Code 由 React/Vite 开发前端和 FastAPI 开发后端。 同时需要一个能够访问 GPT-4 Vision 的 OpenAI API key。

首先启动后端（使用 Poetry 来管理依赖）：

cd backend
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 访问应用。

使用 Screenshot to Code

Screenshot to Code 目前支持转换的代码样式包括：HTML/Tailwind CSS、React、Vue和Bootstrap等，还有Ionic和SVG是bate状态。用户可以根据自己的需求选择适合自己的代码类型。无论你是前端新手还是经验丰富的开发者，都能够轻松地利用这个项目来快速生成所需的代码。

除了可以上传截图以外，还可以通弄过URL来获取截图，并自动生成代码。

但是这需要购买Screenshot to code 的次数，来获取API key才能使用。

随便截了个知乎首页的图，测试一下，电脑版的效果还挺不错，但是mobile的就差强人意了。

在代码中还可以向AI提出微调的要求，然后更新到代码中，一点点的优化最后的结果。

项目特点

优点

  • 它可以为程序员节省大量时间。
  • 它可以为您省钱。
  • 使用起来超级简单。

缺点

  • 它可能不准确。
  • 该工具不能替代人类程序员。

项目信息

  • 项目名称：Screenshot to Code
  • 在线体验：https://screenshottocode.com/
  • GitHub 链接：https://github.com/abi/screenshot-to-code
  • Star 数：31K+

IT咖啡馆
关注
专栏目录
屏幕截图转代码生成:screenshot-to-code
03-03
主要语言：TypeScript 项目分类：[AI] 项目标签：[深度学习] [图像工具箱] 推荐理由：一个支持拖拽屏幕截图并将其转换为干净的HTML/Tailwind/JS代码。这个工具可以帮助开发者快速地将设计图转化为可用的前端代码，提高开发效率。
Python-Screenshottocode一个将设计模型转换为静态网站的神经网络
08-11
Screenshot-to-code：一个将设计模型转换为静态网站的神经网络
Screenshot-to-code：截图即可生成代码，快来试试这款开源工具！
Coco_Code的博客
02-01 2856
近年来，随着人工智能技术的不断发展，编程领域也涌现出了许多令人惊叹的工具。今天，我要为大家介绍一款非常实用的编程工具——Screenshot-to-code。Screenshot-to-code是一款基于人工智能技术的编程辅助工具，它主要使用Python语言开发。这款工具的最大特点就是可以通过截图来生成代码，极大地提高了程序员的开发效率。（将 YouTube 的屏幕截图转换为 HTML）
屏幕截图工具（ScreenShotTool）安装与使用指南
最新发布
gitblog_00816的博客
09-12 313
屏幕截图工具（ScreenShotTool）安装与使用指南 ScreenShotTool 项目地址: https://gitcode.com/gh_mirrors/sc/ScreenShotTool ...
ScreenshotToCode：一键跃现，屏幕即网页！瞬间截图变代码，创意设计秒成真
2401_83063795的博客
03-11 8676
Screenshot-to-Code是一个实用且高效的开源解决方案，专注于简化和自动化从设计到开发的转换流程。该工具通过集成先进的机器学习算法与深度视觉分析技术，能够智能解析屏幕快照中包含的各种界面元素，如文本、图像、按钮、表格、导航栏等，并依据这些元素的位置、尺寸、颜色以及层次关系，精确地生成结构良好、易于维护的前端代码，涵盖HTML、CSS，乃至JavaScript交互逻辑。此项目旨在消除设计师与开发者之间在实现设计稿时可能出现的理解鸿沟，将静态的设计屏幕截图直接转化为可运行于现代Web环境的动态网页结
Screenshot To Code
四问四不知的博客
12-02 3316
GPT-4Vision智能生成代码: 通过集成GPT-4Vision，该应用程序能够智能地分析截图并生成相应的HTML、Tailwind CSS和JavaScript代码，使用户无需手动编写代码。DALL-E3生成相似图像: 应用程序不仅生成代码，还利用DALL-E3生成与原始截图相似的图像，增强用户体验。实时代码更新: 用户可以直接在应用程序中查看生成的代码，并在需要时通过与AI的互动指令，调整样式或更新缺失的部分，以满足其需求。
Github每日精选（第33期）：Screenshot-to-code训练 AI 将设计模型转换为 HTML 和 CSS
haleycat的博客
09-01 2909
代码是用 Python 和 Keras 编写的，Keras 是 TensorFlow 之上的一个框架。首先，我们将制作一个最低限度的版本来掌握活动部件。在最终版本 Bootstrap 中，我们将创建一个可以泛化和探索 LSTM 层的模型。所有代码都在GitHub和FloydHub上的 Jupyter 笔记本中准备好。单击此按钮可在FloydHub上打开一个工作区，您将在其中找到与Bootstrap 版本相同的环境和数据集。但是，我们现在可以使用当前的深度学习算法以及合成的训练数据，开始探索人工前端自动化。.
screenshot-to-code
子燕若水的博客
12-02 351
screenshot-to-codeGitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
UI提供一个图片转换Html,Screenshot-to-code：UI设计图转整页代码
weixin_39855869的博客
05-31 3491
大概是2018年的时候，那时候我还是一个很稚嫩的小前端，我记得很深刻，当前GitHub上有个叫做star，这个项目主要表达的是在未来三年内，深度学习将改变前端开发。它将会根据设计图自动生成对应的html，css代码，从而拉低开发软件的门槛。也就是说我们前端以后不需要再画静态了！项目地址：https://github.com/emilwallner/Screenshot-to-code这里简单说一下...
screenshot-to-code之安装、测试
杨江的IT分享专栏
06-23 1341
问题是yarn版本不对，是cmdtest里面的低版本 0.32版本，要改为最新的1.x版本。测试，打开浏览器控制台，注意观察 前端调用后台是 192.168.1.233:7001。就可以 访问 http://localhost:5173 进行测试了。好吧，去安装node.js 14.18.0版本，这又要先安装nvm。然后它就开始 调用backend服务 7001的，开始生成代码。浏览器访问http://192.168.1.233/再执行yarn，还是报错。准备 GPT收费账号。
推荐开源项目：Screenshot-to-Code
gitblog_00004的博客
03-19 523
推荐开源项目：Screenshot-to-Code screenshot-to-code上传一张屏幕截图并将其转换为整洁的代码（HTML/Tailwind/React/Vue）项目地址:https://gitcode.com/gh_mirrors/sc/screenshot-to-code 项目简介 是一个创新的开源工具，能够将设计图中的截图自动转化为代码片段，主要用于网页和应用界面的开发。开发...
Screenshot to code + 宝塔 Linux 搭建
哇哈哈的博客
07-11 767
Screenshot to code在宝塔 linux 上的搭建教程
探索未来：screenshot-to-code——AI驱动的代码生成工具
gitblog_00491的博客
08-09 750
探索未来：screenshot-to-code——AI驱动的代码生成工具 screenshot-to-code上传一张屏幕截图并将其转换为整洁的代码（HTML/Tailwind/React/Vue）项目地址:https://gitcode.com/gh_mirrors/sc/screenshot-to-code 在数字化时代，快速将设计转化为功能代码是每个开发者的梦想。今天，我们向您推荐一个革命...
sketch2code 有的叫screenshot to code什么的
weixin_30609331的博客
02-14 455
先mark一下项目，回头再深究 https://github.com/mzbac/sketch2code https://www.floydhub.com/emilwallner/datasets/html_models/1/archives 转载于:https://www.cnblogs.com/www-caiyin-com/p/10374550.html...
开源初探 - screenshot-to-code
dotNET跨平台
03-27 311
介绍说明将截图转化为 HTML 代码的工具。该项目可以将屏幕截图转化为 HTML/JS/Tailwind CSS 代码，它使用 GPT-4 Vision 生成代码、DALL-E 3 生成相似的图片。安装运行为了方便演示及保持原有系统的简洁，将使用docker的方式来安装运行screenshot-to-code。由于项目本身已经提供了 Dockerfile，我们直接使用即可，需要注意的是，该项...
前端 危！！！从截图到HTML：使用Screenshot to Code一键AI快速生成网页
iduiui997的博客
08-03 1911
如果您无法直接访问 OpenAI API(例如由于国家/地区限制)，您可以尝试配置 OpenAI 基本 URL 以使用代理：在backend/.env设置对话框中或直接在 UI 中设置 OPENAI_BASE_URL。screenshot-to-code 支持一键部署啦，还支持谷歌claude，可以将截图、图片链接、绘制草图生成代码并换为页面。只需要一张简单的截图，即可直接复刻一个一模一样的网站，把制作网站的门槛降到了最低。该软件对版本要求并不高，所以最新版即可。我使用的版本如上，你可以对照一下。
开源项目教程：截图转代码工具（abi/screenshot-to-code）
gitblog_01037的博客
08-08 950
开源项目教程：截图转代码工具（abi/screenshot-to-code） 项目地址:https://gitcode.com/gh_mirrors/sc/screenshot-to-code 项目介绍 截图转代码工具 是一个基于人工智能的创新开源项目，由用户 abi 发布在 GitHub 上。此工具能够将您提供的截图或设计图片转换成高质量的前端代码，支持 HTML、Tailwind CSS、Re...
Screenshot-to-code开源项目mac上实践
清风道的专栏
12-30 2031
github上的开源项目，将设计ui图片转换为 HTML 和 CSS。
开源项目 `screenshot-to-code` 使用教程
gitblog_00753的博客
08-08 512
开源项目 screenshot-to-code 使用教程 项目地址:https://gitcode.com/gh_mirrors/sc/screenshot-to-code 1. 项目的目录结构及介绍 screenshot-to-code 项目的目录结构如下： screenshot-to-code/ ├── backend/ ├── frontend/ ├── blog/ ├── .gitattr...
To have detailed study on Circular Doubly Linked list. Definition: Detailed study (explanation): Applications: Operations: Program implementation: Java/C/C++ source code to perform operation: Output-screenshot:
06-05
Definition: A circular doubly linked list is a data structure that consists of a sequence of nodes, where each node contains a value, a reference to the next node, and a reference to the previous node in the sequence. The last node in the list points to the first node, creating a circular structure. Detailed study (explanation): A circular doubly linked list is similar to a doubly linked list, but with the added feature of being circular. This means that the last node in the list points back to the first node, creating a loop. This allows for more efficient traversal of the list in both directions, as well as easier implementation of certain algorithms. Applications: Circular doubly linked lists are useful in situations where a list needs to be traversed in both directions, such as in a music playlist where the user can skip forwards and backwards through songs. They can also be used in certain algorithms, such as the Josephus problem, where a group of people are arranged in a circle and every nth person is eliminated until only one person is left. Operations: Some common operations that can be performed on a circular doubly linked list include: 1. Insertion: Adding a new node to the list at a specific position. 2. Deletion: Removing a node from the list. 3. Traversal: Moving through the list in either direction, starting at a specific node. 4. Search: Finding a specific node in the list based on its value. Program implementation: A circular doubly linked list can be implemented using a Node class that contains the value, a reference to the next node, and a reference to the previous node. The list itself can be represented by a head node that points to the first node in the list. Java/C/C++ source code to perform operation: Here's some Java code that demonstrates how to perform various operations on a circular doubly linked list: ``` public class Node { int value; Node next; Node prev; public Node(int value) { this.value = value; this.next = null; this.prev = null; } } public class CircularDoublyLinkedList { Node head; public CircularDoublyLinkedList() { this.head = null; } public void insert(int value, int position) { Node newNode = new Node(value); if (head == null) { head = newNode; head.next = head; head.prev = head; } else { Node current = head; for (int i = 1; i < position; i++) { current = current.next; } newNode.next = current.next; newNode.prev = current; current.next.prev = newNode; current.next = newNode; } } public void delete(int value) { if (head == null) { return; } Node current = head; do { if (current.value == value) { current.prev.next = current.next; current.next.prev = current.prev; if (current == head) { head = current.next; } return; } current = current.next; } while (current != head); } public void traverseForward() { if (head == null) { return; } Node current = head; do { System.out.print(current.value + " "); current = current.next; } while (current != head); System.out.println(); } public void traverseBackward() { if (head == null) { return; } Node current = head.prev; do { System.out.print(current.value + " "); current = current.prev; } while (current != head.prev); System.out.println(); } public Node search(int value) { if (head == null) { return null; } Node current = head; do { if (current.value == value) { return current; } current = current.next; } while (current != head); return null; } } ``` Output-screenshot: Here's an example of how to use the above code to perform various operations on a circular doubly linked list: ``` CircularDoublyLinkedList list = new CircularDoublyLinkedList(); list.insert(1, 1); list.insert(2, 2); list.insert(3, 3); list.insert(4, 4); list.traverseForward(); // Output: 1 2 3 4 list.traverseBackward(); // Output: 4 3 2 1 list.delete(2); list.traverseForward(); // Output: 1 3 4 Node node = list.search(3); System.out.println(node.value); // Output: 3 ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值