解放双手，前端界面再也不用自己写了?
toqiye 2025-03-14 20:55 14 浏览 0 评论
随着 AI 技术的发展，现在有越来越多的尝试将 AI 应用于 UI 设计和开发中，以期提高效率和降低成本。
今天就给大家介绍一个开源的 AI 网页生成工具：OpenUI
OpenUI
OpenUI 是一个创新的开源项目，由 wandb 组织在 GitHub 上发起。该项目基于 LLM 实现将上传的截图或通过描述，自动生成前端界面的代码，支持代码实时预览以及将 HTML 转换成 React、Svelte 等功能，可选 GPT 3.5 和 GTP 4 等模型。
这一点类似于 v0，但 OpenUI 是完全开源的，并且在 Github 上拥有 18K star，可见其受欢迎程度。
如何使用
OpenUI 是完全开源的，感兴趣的小伙伴们可以自己下载源代码进行本地运行或者自行部署到 Docker 使用。
Docker部署
export ANTHROPIC_API_KEY=xxx
export OPENAI_API_KEY=xxx
docker run --rm --name openui -p 7878:7878 -e OPENAI_API_KEY -e ANTHROPIC_API_KEY -e OLLAMA_HOST=http://host.docker.internal:11434 ghcr.io/wandb/openui
源码安装
git clone https://github.com/wandb/openui
cd openui/backend
pip install .
export OPENAI_API_KEY=xxx
python -m openui
同时官方也提供了在线体验的地址：https://openui.fly.dev/ai/new
打开网站，我们会看到界面的下方有一个输入框
可以输入一些描述信息，比如输入：帮我生成一个后台管理系统，要求菜单中包含 首页、用户管理、权限管理、设置，右侧内容部分生成一个简单的表格。
可以去选择将 HTML 转换成 React、Svelte 等功能。
同时也可以直接上传效果图去生成。
从效果图上来看还是不错的，可以代替我们一些简单的工作量，有兴趣的小伙伴可以试试。
Github：https://github.com/wandb/openui
相关推荐
- 【SQL】SQL 语法差异大全(PgSQL/MySQL/Oracle/TiDB/OceanBase)
-
以下是针对不同数据库系统的SQL语法差异总结，按功能分类展示：一、基础查询1.分页查询--PostgreSQL/TiDB/OceanBaseSELECT*FROMTableNameL...
- msf系列片之vps搭建，黑客的世界你真的了解嘛?
-
最后喜欢我文章的朋友请加圈子关注我们，私信关键词：学习。（送免费资料和优惠券）就会自动分享给你微信号。欢迎大家加入我们的安全大家庭。提高大家的安全意识，提升大家的网络安全技能一直是我们的初衷和愿景，让...
- 小技巧:ubuntu 24.04.1中自带Python升级到3.12.9和3.13.2最新版
-
喜欢的条友记得关注、点赞、转发、收藏，你们的支持就是我最大的动力源泉。这几天一直有朋友问我，如何将ubuntu24.04.1中自带Python升级到最新版，今天就来详细讲讲。方法1：使用DeadSn...
- linux下开发一个应用，首先要做什么?
-
作为一个linux的忠实用户，日常工作基本上不用windows系统。为什么这么说呢？word加上QQ不用不行呀。有人说LibreOffice加上Pidgen可以替代，但实际上部分word会排版不正确，...
- ubuntn部署flask（flask如何部署）
-
1.装一下pyenvgitclonehttps://github.com/pyenv/pyenv-virtualenv.git$(pyenvroot)/plugins/pyenv-virtu...
- 招聘平台HireVue完成E轮融资 并推面试平台
-
Yesky天极新闻2015-06-0316:31:55【Yesky新闻频道消息】日前，在线视频面试的招聘服务初创企业HireVue获得4500万美元E轮融资。由TechnologyCrossove...
- 面试官:说一下vue2和vue3的响应式原理
-
Vue2的响应式原理：初始化阶段：在创建Vue实例时，遍历data对象的属性，使用Object.defineProperty方法为每个属性定义getter和setter。Getter拦截：在gett...
- vue3还用this吗?getCurrentInstance获取当前组件实例
-
在Vue2中，this关键字代表当前组件实例。在组件的选项对象中，this可以用于访问组件实例的属性、方法以及Vue实例的一些特定方法。在Vue3中，我们发现this是undefined...
- Vue.js 中的异步组件是什么?（vue.js异步请求）
-
本号用于每日更新前端最新面试题，React、Vue、小程序、JavaScript、HTML5、CSS、uniapp、ES6、前端工程化、性能优化等热点面试题~~~欢迎关注，面试题刷起来~~升职加薪不是...
- 面试官:聊聊你知道的Vue与React的区别
-
最近面到很多大公司的时候，小编都会碰到一个很尴尬的问题，很多大公司的技术栈都是React，但是小编学的是Vue，其实从本质上来说两者都是比较优秀的前端框架，所以有些面试官会问到Vue和React的区别...
- Vue核心响应式原理深度解析!手写TodoList实战
-
导读：搞懂这个知识点，秒杀80%前端面试题！原理+实战+调试技巧三合一核心1：数据响应式黑科技（图解）原理示意图数据变化→依赖收集→自动更新视图Vue2vsVue3实现对...
- 前端面试题-原生 js 如何进行监听路由的变化?vue框架是否用到?
-
在原生JavaScript中监听路由变化的方式主要分为两种场景：监听哈希（Hash）路由变化和监听HistoryAPI的路由变化。Vue框架本身并不直接处理路由监听，但Vue的官方路由...
- vue引入element-ui后界面空白（vue怎么引入element）
-
正文部分配置vue：3.0vue-cli：4.5.11目的使用element-ui绘制ui界面原本操作（1）安装element-uinpmielement-ui-S（2）导入element-ui...
- 前端面试-关于vue3的响应式原理（vue响应式的原理一句话概括）
-
现在工作不好找的环境中，想要更好获得工作机会，让我们一起准备面试题吧～Vue3的响应式系统采用ES6的Proxy实现数据劫持，与Vue2的Object.defineProperty有...
- 2024前端大厂面试题 Vue.js中的keep-alive组件有什么作用
-
小伙伴们在面试前端开发工程师的时候是不是会遇到面试官问Vue.js中的keep-alive组件有什么作用？今天我们就来告诉大家，解锁2024大厂vue面试题Vue.js中的keep-alive组件有什...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 【SQL】SQL 语法差异大全(PgSQL/MySQL/Oracle/TiDB/OceanBase)
- msf系列片之vps搭建，黑客的世界你真的了解嘛?
- 小技巧:ubuntu 24.04.1中自带Python升级到3.12.9和3.13.2最新版
- linux下开发一个应用，首先要做什么?
- ubuntn部署flask（flask如何部署）
- 招聘平台HireVue完成E轮融资 并推面试平台
- 面试官:说一下vue2和vue3的响应式原理
- vue3还用this吗?getCurrentInstance获取当前组件实例
- Vue.js 中的异步组件是什么?（vue.js异步请求）
- 面试官:聊聊你知道的Vue与React的区别
- 标签列表
-
- minorgc (62)
- systemproperties (77)
- vue3-template-admin (63)
- electronsqlite3 (65)
- androidstudioc++ (69)
- canvas图片 (68)
- npm版本管理 (66)
- dataframeconcat (65)
- okhttp使用 (62)
- materialtheme (86)
- node-ssh (68)
- 图床搭建 (62)
- mybatisselectone (78)
- css圆形进度条 (69)
- androidble蓝牙开发 (62)
- appender-ref (64)
- springbootmockito (68)
- 依赖注入的方式 (62)
- cookie跨域共享 (63)
- easyexcel导出图片 (77)
- dp数组 (61)
- js获取兄弟节点 (68)
- window.target (62)
- window.onerror (66)
- springmvc教程 (65)