Github每日精选（第33期）：Screenshot-to-code训练 AI 将设计模型转换为 HTML 和 CSS

最新推荐文章于 2024-05-24 10:30:36 发布
最新推荐文章于 2024-05-24 10:30:36 发布
阅读量2.7k 收藏 10
点赞数
分类专栏： Github每日精选 文章标签： 人工智能 html css 设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40425640/article/details/126135204
版权

Screenshot-to-code

Screenshot-to-code 深度学习将改变前端开发。它将增加原型设计速度并降低构建软件的门槛。

github上的地址在这里。

当 Tony Beltramelli 推出pix2code 论文和 Airbnb 推出sketch2code时，该领域开始腾飞。

目前，自动化前端开发的最大障碍是计算能力。但是，我们现在可以使用当前的深度学习算法以及合成的训练数据，开始探索人工前端自动化。

以下是该过程的快速概述：

1）给训练好的神经网络一个设计图

在这里插入图片描述
2) 神经网络将图像转换为 HTML 标记

在这里插入图片描述
3) 渲染输出

在这里插入图片描述
我们将在三个迭代中构建神经网络。

首先，我们将制作一个最低限度的版本来掌握活动部件。第二个版本 HTML 将专注于自动化所有步骤并解释神经网络层。在最终版本 Bootstrap 中，我们将创建一个可以泛化和探索 LSTM 层的模型。

所有代码都在GitHub和FloydHub上的 Jupyter 笔记本中准备好。所有 FloydHub 笔记本都在该floydhub目录中，本地等价物在local.

这些模型基于 Beltramelli 的pix2code 论文和 Jason Brownlee 的图像说明教程。代码是用 Python 和 Keras 编写的，Keras 是 TensorFlow 之上的一个框架。

安装

单击此按钮可在FloydHub上打开一个工作区，您将在其中找到与Bootstrap 版本相同的环境和数据集。您还可以找到经过训练的模型进行测试。

pip install keras tensorflow pillow h5py jupyter

git clone https://github.com/emilwallner/Screenshot-to-code.git
cd Screenshot-to-code/
jupyter notebook

去做所需的笔记本，以“.ipynb”结尾的文件。要运行模型，请转到菜单，然后单击 Cell > Run all

最终版本，即 Bootstrap 版本，准备了一小部分来测试运行模型。如果您想尝试使用所有数据，您需要在此处下载数据 ，并指定正确的dir_name.

文件夹结构
  |  |-Bootstrap                           #The Bootstrap version
  |  |  |-compiler                         #A compiler to turn the tokens to HTML/CSS (by pix2code)
  |  |  |-resources											
  |  |  |  |-eval_light                    #10 test images and markup
  |  |-Hello_world                         #The Hello World version
  |  |-HTML                                #The HTML version
  |  |  |-Resources_for_index_file         #CSS,images and scripts to test index.html file
  |  |  |-html                             #HTML files to train it on
  |  |  |-images                           #Screenshots for training
  |-readme_images                          #Images for the readme page
go2coding
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
屏幕截图转代码生成:screenshot-to-code
03-03
主要语言：TypeScript 项目分类：[AI] 项目标签：[深度学习] [图像工具箱] 推荐理由：一个支持拖拽屏幕截图并将其转换为干净的HTML/Tailwind/JS代码。这个工具可以帮助开发者快速地将设计图转化为可用的前端代码，提高开发效率。
github-code-screenshot:根据github源代码生成图像-git source code
03-25
github代码屏幕截图 根据github源代码生成图像 输入： 输出： 在线使用 如何安装？ 1.克隆仓库 $ git clone git@github.com:adasq/github-code-screenshot.git $ cd github-code-screenshot 2.安装依赖项 $ npm ...
31K star！Screenshot to Code: 将截图翻译成代码的黑科技！
IT咖啡馆
12-19 1844
今天我们推荐的是一个让程序员们疯狂的 GitHub 项目，一键将图片的内容翻译从代码，在GitHub已超过31K Star的开源项目：Screenshot to Code 。
牛逼！50.3K Star！一个自动将屏幕截图转换为代码的开源工具
最新发布
测试开发技术
05-24 1154
是一个创新的开源工具，它能够将设计图中的截图自动转化为代码片段，主要用于网页和应用界面的开发。通过上传一张包含设计布局的截图，该工具能够智能解析其中的各种界面元素，如文本、图像、按钮、表格、导航栏等，并依据这些元素的位置、尺寸、颜色以及层次关系，精确地生成结构良好、易于维护的前端代码，包括HTML、CSS，以及React或Vue等前端框架的代码，满足了不同项目的需求。
ScreenshotToCode：一键跃现，屏幕即网页！瞬间截图变代码，创意设计秒成真
2401_83063795的博客
03-11 6683
Screenshot-to-Code是一个实用且高效的开源解决方案，专注于简化和自动化从设计到开发的转换流程。该工具通过集成先进的机器学习算法与深度视觉分析技术，能够智能解析屏幕快照中包含的各种界面元素，如文本、图像、按钮、表格、导航栏等，并依据这些元素的位置、尺寸、颜色以及层次关系，精确地生成结构良好、易于维护的前端代码，涵盖HTML、CSS，乃至JavaScript交互逻辑。此项目旨在消除设计师与开发者之间在实现设计稿时可能出现的理解鸿沟，将静态的设计屏幕截图直接转化为可运行于现代Web环境的动态网页结
Screenshot-to-code：截图即可生成代码，快来试试这款开源工具！
Coco_Code的博客
02-01 2437
近年来，随着人工智能技术的不断发展，编程领域也涌现出了许多令人惊叹的工具。今天，我要为大家介绍一款非常实用的编程工具——Screenshot-to-code。Screenshot-to-code是一款基于人工智能技术的编程辅助工具，它主要使用Python语言开发。这款工具的最大特点就是可以通过截图来生成代码，极大地提高了程序员的开发效率。（将 YouTube 的屏幕截图转换为 HTML）
踩坑Screenshot to code
nizaiganshenmoa的博客
03-02 2033
"Screenshot to code"（截图转代码）是一种技术或工具，它允许用户通过截取屏幕上的UI元素，然后将其转换为相应的源代码或标记。这种技术通常利用计算机视觉和机器学习算法来分析截图中的图像，并尝试识别出UI元素的类型、布局和样式等信息。然后，根据这些信息，生成相应的代码或标记，例如HTML、CSS、XML等，以便开发人员可以直接使用或进一步调整。这种技术可以提高开发效率，特别是在构建用户界面时。
UI提供一个图片转换Html,Screenshot-to-code：UI设计图转整页代码
weixin_39855869的博客
05-31 3323
大概是2018年的时候，那时候我还是一个很稚嫩的小前端，我记得很深刻，当前GitHub上有个叫做star，这个项目主要表达的是在未来三年内，深度学习将改变前端开发。它将会根据设计图自动生成对应的html，css代码，从而拉低开发软件的门槛。也就是说我们前端以后不需要再画静态了！项目地址：https://github.com/emilwallner/Screenshot-to-code这里简单说一下...
generate-github-markdown-css:为github-markdown-css生成CSS
05-01
生成-github-markdown-css 为生成 获取CSS 见 如何 首先，从GitHub获取具有所有可能语法的 。 然后，获取GitHub.com CSS，并且两者都通过运行，后者仅提取使用的样式，然后通过自定义清理。 原料药 const ...
github-markdown-css:sindresorhusgithub-markdown-css，具有深色主题支持
05-06
github-markdown-css ，具有深色主题支持相关问题： 。用法执照麻省理工学院@
easy-markdown-to-github-pages：使用Github Pages将Github中的Markdown文件转换为完整的网站
02-03
easy-markdown-to-github-pages：使用Github Pages将Github中的Markdown文件转换为完整的网站
html-to-markdown：:gear:将HTML转换为Markdown。 甚至适用于整个网站，并且可以通过规则进行扩展
02-03
使用Go将HTML转换为Markdown。 它使用来尽可能避免使用regexp 。 这样可以避免某些并允许将其用于完全未知输入的情况。 安装 go get github.com/JohannesKaufmann/html-to-markdown 用法 import md "github....
Screenshot To Code
四问四不知的博客
12-02 2758
GPT-4Vision智能生成代码: 通过集成GPT-4Vision，该应用程序能够智能地分析截图并生成相应的HTML、Tailwind CSS和JavaScript代码，使用户无需手动编写代码。DALL-E3生成相似图像: 应用程序不仅生成代码，还利用DALL-E3生成与原始截图相似的图像，增强用户体验。实时代码更新: 用户可以直接在应用程序中查看生成的代码，并在需要时通过与AI的互动指令，调整样式或更新缺失的部分，以满足其需求。
screenshot-to-code
子燕若水的博客
12-02 321
screenshot-to-codeGitHub - abi/screenshot-to-code: Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
Star 17.3k！这个截屏项目火了！给它一张屏幕截图，即可一键克隆网页！
z_ipython的博客
11-29 448
你敢信，只凭借着一张屏幕截图即可转换生成代码。可以算得上是前端工程师的福音。它就是。而这个项目刚上线也就一周左右，在GitHub上就已经有17.3k的Star。它可以纳入本周爆火项目之一了！的功能实现是借助模型，直接给你的屏幕截图转换为，并利用 DALL-E 3 的图像生成能力，生成外观相似的图像。说的通俗易懂一点就是，该项目利用的能力来完成图像识别和代码生成的功能。该项目是采用前后端分离模式，后端是采用Python FastAPI 框架开发而成。前端则是借助React框架构建。
人工智能_大模型020_大模型生成vue/React/Bootstrap前端_如何获得ScreenShotToCode需要的gpt4和calude3的api key---人工智能工作笔记0156
添柴程序猿的专栏
03-19 1634
生成了以后又有提示,可以看到这个key已经给了,但是这个不知道是GPT3.5的还是GPT-4.0-version的,可以先去用用试试。真的很难安装,这个uuid怎么都装不上,换了3个机器了,租用的也不行,然后本地的吧,网络又不好,安装poetry都装不上.就可以去生成对应的API Key,把手机号验证以后,就可以了,这里需要花钱,具体多少。可以去这里弄一个,这个用咱们的手机就可以弄了,弄了以后,然后绑定个邮箱,然后去申请开。fomepay,这个搜就可以,这个不需要KYC,并且,用就可以了,但是局限性就是。
Screenshot-to-code开源项目mac上实践
清风道的专栏
12-30 1877
github上的开源项目，将设计ui图片转换为 HTML 和 CSS。
截图转HTML代码，支持预览，前端不用浪费时间写html和css了
weixin_42662753的博客
11-25 5449
这个简单的应用可以将截图转换为HTML/Tailwind CSS代码。它使用GPT-4 Vision来生成代码，并使用DALL-E 3来生成类似的图像。现在你也可以输入一个URL来克隆一个现有的网站！
前端要完！人工智能已经能实现自动编写 HTML 和 CSS
热门推荐
CSDN资讯
02-25 1万+
点击上方“CSDN”，选择“置顶公众号”关键时刻，第一时间送达！【CSDN 编者按】一个月前，我们曾发表过一篇标题为《三年后，人工智能将彻底改变前端开发？》的文章，其中介绍了一个彼时名列 GitHub 排行榜 TOP 1 的项目 —— Screenshot-to-code-in-Keras。在这个项目中，神经网络通过深度学习，自动把设计稿变成 HTML 和 CSS 代码，同时其作者 Emil Wa
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 ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

go2coding

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值