屏幕截图直接生成HTML网页(转整页代码,这次它真的来了)

当前GitHub上有个叫做Screenshot-to-code的开源项目冲榜贼猛,短短几天就获得了好几千的star,这个项目主要表达的是在未来三年内,深度学习将改变前端开发。它将会根据设计图自动生成对应的html,css代码,从而拉低开发软件的门槛。

也就是说我们前端以后不需要再画静态了!

项目地址:
https://github.com/emilwallner/Screenshot-to-code

屏幕截图直接生成HTML网页(转整页代码,这次它真的来了)

这里简单说一下原理

Screenshot-to-code-in-Keras 是 Emil Wallner 实现的一个可根据设计草图生成基本 HTML 和 CSS 网站的神经网络。以下是该过程的简要概述:

1)给训练好的神经网络提供设计图像

屏幕截图直接生成HTML网页(转整页代码,这次它真的来了)

2)神经网络将图片转化为 HTML 标记语言

屏幕截图直接生成HTML网页(转整页代码,这次它真的来了)

3)渲染输出

屏幕截图直接生成HTML网页(转整页代码,这次它真的来了)

Emil Wallner 分三步从易到难构建三个不同的模型:

  • 首先,构建最简单的版本来掌握移动部件。
  • 然后,专注于自动化所有步骤,并简要解释神经网络层。
  • 最后,创建一个模型来思考和探索 LSTM 层。

这里只做简单介绍,感兴趣的朋友可以在头条搜索中搜 Screenshot-to-code 即可看到更多详细内容

发展到今天,设计图转代码已经基本实现

前几天体验了一下蓝湖内测的设计图转代码功能,真的挺震撼的。废话不多说,大家请看视频!

部署运行

该应用程序有一个 React/Vite 前端和一个 FastAPI 后端。您将需要一个可以访问 GPT-4 Vision API 的 OpenAI API 密钥。

运行后端(我使用 Poetry 进行包管理 – 如果你没有的话):pip install poetry

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

运行前端:

cd frontend
yarn
yarn dev

打开 http://localhost:5173 以使用该应用程序。

如果您希望在其他端口上运行后端,请VITE_WS_BACKEND_URLfrontend/.env.local

版权声明:
1:本文仅供学习和参考,不做任何收益和价值保障,请知晓。
2:本内容转载于网络,版权归原作者所有,不拥有所有权,不承担相关法律责任。
3:本站所有资源均来源于网络,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。
4:如有侵权,请联系我们1109539043#qq.com(#改为@)删除。
技术分享

免费logo网站 在线生成(腾讯 AI 生成)

2023-11-17 19:18:12

技术分享

Emmet语法前端开发快速编写(HTML结构标签之表达式)

2023-11-21 21:57:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索