Open UI模块化UI开发好伙伴:cpolar内网穿透实验室第635个成功挑战

102 阅读6分钟

NO.635 Open UI-01.jpg

软件名称:Open UI

操作系统支持:Web端全平台(浏览器即开即用)

软件简介:

“Open UI是你的前端‘乐高盒’——用标准化组件拼出响应式网页,轻量到能塞进短信里!搭配React/Vue无缝衔接,让你绝对不会吐槽代码臃肿。”

NO.635 Open UI-02.jpg

Open UI + 出色功能 = 开发者的“一键美颜”神器

  • 模块化设计:组件像乐高积木,按需拼装(比如只用表单组件?体积比竞品小80%!)。
  • 跨平台兼容性:手机、平板、PC三端自动适配,再也不用熬夜改CSS。
  • Web Components魔法:每个组件独立打包,像“乐高小盒子”一样互不干扰,项目维护零压力。

NO.635 Open UI-03.jpg

cpolar内网穿透 × Open UI = 远程开发“开挂”组合技

  • 痛点场景:“在家远程调试内网服务器的管理后台?好家伙,防火墙直接给我骂哭!”
  • 解决方案:用cpolar一键映射内网到公网,搭配Open UI快速搭建测试页面——从此咖啡店、高铁上都能像本地开发一样丝滑!

“同事还在为服务器配置焦头烂额时,你已经用cpolar+Open UI在沙滩边提交了完美PR。”

NO.635 Open UI-04.jpg

总结——Open UI的“超能力”与未来展望

  • 核心优势:开源免费、轻量高效、组件可定制,适合个人到企业级项目。
  • 与cpolar联动价值:远程协作开发更流畅,内网测试秒变公网演示,省去服务器运维麻烦。

“Open UI就像前端界的‘瑞士军刀’——简单好用到让你怀疑人生为什么之前不用它!”

NO.635 Open UI-05.jpg

cpolar内网穿透实验室1+1>2计划已经整理了Open UI与cpolar的完美适配方法,已经整理如下👇:

1. 本地部署Open UI

安装环境:Windows10,本篇文章使用的在Anaconda中创建python环境。

1.1 配置python环境

安装git:如果没有安装git的话,进入git官网进行下载windows版本 git-scm.com/downloads

image.png

安装Anaconda:下载地址:repo.anaconda.com/archive/

下载完成后,打开Anaconda的终端,创建一个名为 openui 的环境

conda creat -n openui python=3.12.4

查看是否创建环境成功

conda env list

创建成功后,激活虚拟环境

active openui

1.1 安装Open UI

拉取代码

git clone https://github.com/wandb/openui

进入backend目录

cd openui/backend

安装依赖

pip install .

这里必须设置OPENAI_API_KEY; 如果你要使用OpenAI的模型,可以从platform.openai.com/api-keys 获取密钥 如果是要使用其他模型(电脑内存要大于16G),OPENAI_API_KEY可以设置为:xxx

set OPENAI_API_KEY=xxx

38bb145de210f82f96c7fcd5113f79a.png

启动后,访问 http://localhost:7878/ 即可使用。

2. 本地访问Open UI

打开一个新的浏览器,输入 localhost:7878 或本地IP:7878

0b8126701a2251554993e3251d5c884.png

我们可以在下方文本框中输入指令,比如:请帮我制作一个AI官网主界面

9fc085d69ca9a17b51ed9ab43b4cc71.png

可以看到生成了网页的模版格式,还可以任意发出其他指令,并且下面会有代码,可以拿去自己调试换成替换标签里的图片或者内容。

a0cdede74123b5568be239fa970dc9c.png

还有大量的模板可以直接使用

image.png

可以看到我们对Open UI提出指令,它会根据我们的指令提供相应的网页模版。

我们在本机成功部署了Open UI,但是如果我们需要不在局域网内,需要远程办公来设计前端网页的话,就要在公网上进行访问Open UI,那么我们就可以结合Cpolar内网穿透来实现了,免去了复杂得本地部署过程,只需要一个公网地址直接就可以进入到Open UI中!

接下来教大家如何安装Cpolar并且将Open UI实现公网访问。

3. 安装Cpolar内网穿透

下面是安装cpolar步骤:

Cpolar官网地址: www.cpolar.com

点击进入cpolar官网,点击免费使用注册一个账号,并下载最新版本的Cpolar

登录成功后,点击下载Cpolar到本地并安装(一路默认安装即可)本教程选择下载Windows版本。

image-20240319175308664

Cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来在web 管理界面配置即可。

接下来配置一下 Open UI 的公网地址,

登录后,点击左侧仪表盘的隧道管理——创建隧道,

创建一个 Open UI 的公网http地址隧道

  • 隧道名称:可自定义命名,注意不要与已有的隧道名称重复
  • 协议:选择http
  • 本地地址:7878 (本地访问的地址)
  • 域名类型:免费选择随机域名
  • 地区:选择China Top

83690237b7cb9c2c4c98d3519f44505.png

隧道创建成功后,点击左侧的状态——在线隧道列表,查看所生成的公网访问地址,有两种访问方式,一种是http 和https

9a77e98f7601031aa4310f5a0904b30.png

使用上面的Cpolar https公网地址,在手机或任意设备的浏览器进行登录访问,即可成功看到 Open UI 界面,这样一个公网地址且可以远程访问就创建好了,使用了Cpolar的公网域名,无需自己购买云服务器,即可到公网访问 Open UI 了!

4. 实现公网访问Open UI

我们用刚才cpolar生成的公网地址,打开一个新的浏览器复制粘贴,可以看到进入到了Open UI主界面。

212f5c8c08374c8f0b12b0cd95d33b1.png

小结

如果我们需要长期进行团队协作的话,由于刚才创建的是随机的地址,24小时会发生变化。另外它的网址是由随机字符生成,不容易记忆。如果想把域名变成固定的二级子域名,并且不想每次都重新创建隧道来访问Open UI,我们可以选择创建一个固定的http地址来解决这个问题。

5. 固定Open UI 公网地址

我们接下来为其配置固定的HTTP端口地址,该地址不会变化,方便分享给别人长期查看你的博客,而无需每天重复修改服务器地址。

配置固定http端口地址需要将cpolar升级到专业版套餐或以上。

登录cpolar官网,点击左侧的预留,选择保留二级子域名,设置一个二级子域名名称,点击保留,保留成功后复制保留的二级子域名名称。

a00f7c9395515615d9df1e9b88c732b.png

保留成功后复制保留成功的二级子域名的名称

619da9eb7a14e9a237588ea8dc4ef4f.png 返回登录Cpolar web UI管理界面,点击左侧仪表盘的隧道管理——隧道列表,找到所要配置的隧道,点击右侧的编辑

c2a9208dac76420f52ebae233eb2c68.png

修改隧道信息,将保留成功的二级子域名配置到隧道中

  • 域名类型:选择二级子域名
  • Sub Domain:填写保留成功的二级子域名

点击更新(注意,点击一次更新即可,不需要重复提交)

3c3221aea3e15e48a2c50172023bac8.png

更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名

image.png

最后,我们使用固定的公网https地址在任何浏览器打开访问,可以看到访问Open UI成功了这样一个固定且永久不变的公网地址就设置好了。

85b712c9ab9aebc8603634648e5a8c7.png

以上就是如何在Windows本地部署Open UI,并结合cpolar内网穿透工具实现远程访问使用的全部流程,感谢您的观看,有任何问题欢迎留言交流。