目录

1. 本地部署Open UI

2. 本地访问Open UI

3. 安装Cpolar内网穿透

 4. 实现公网访问Open UI

5. 固定Open UI 公网地址

前言："又要为设计工具年费续费了！"——UI设计师小李看着账单叹气，更烦的是团队协作：客户改稿意见要反复截图说明，不同设计师用不同软件导致格式混乱，出差时笔记本性能不够跑不动大型设计文件。OpenUI与cpolar内网穿透服务的组合，就像给设计团队配备了"云端工作室"，在自己电脑上搭建免费设计平台，团队成员无论在哪都能实时协作，客户直接在设计稿上批注，彻底告别"工具绑架"和"文件迷宫"的无奈。

普通人对设计工具的需求其实很简单：功能够用、协作方便、不用花钱。但商业软件似乎总在背道而驰：基础功能免费版阉割，团队协作要加钱，导出文件格式还受限。OpenUI首先解决"成本与功能"问题——开源免费，支持HTML/CSS/JS全栈设计，React和Vue框架无缝衔接，自定义组件库像搭积木一样简单。配合cpolar后，"在哪设计"的问题迎刃而解：在家用高性能台式机创作，公司用轻薄本继续编辑，客户现场用平板直接在设计稿上画修改意见，所有操作实时同步，就像团队围坐在同一工作台前。
 

真实的使用场景常常充满惊喜。自由设计师小美的经历很有代表性："以前接外包项目，客户要求改稿要反复导出图片发微信，现在用OpenUI+cpolar，把设计链接发给客户，他直接在浏览器上用标注工具圈改，我这边实时看到，改完当场确认。客户夸我们协作效率比原先高太多。"

操作简单到非专业人士也能上手。很多人一听"本地部署+内网穿透"就觉得复杂，其实OpenUI安装只需几条命令，cpolar配置点几下鼠标就能完成，全程不用写一行代码。"零技术门槛"的体验，让设计不再是专业人士的专利，小商家、学生、自媒体都能轻松创作专业级UI，真正实现"创意面前人人平等"。

1. 本地部署Open UI

安装环境：Windows10，电脑上需安装**git**、**Python**和**pip**。

### 1.1 安装Git、Python、pip

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

**安装Python**：打开你的浏览器，访问 Python 官方网站 [https://www.python.org/downloads/](https://www.python.org/downloads/%E3%80%82)

在 Windows 上，你会看到两个选项：Windows installer 和 Windows x86-64 executable installer。如果你的系统是 64 位的，选择 "Windows x86-64 executable installer"；如果是 32 位的，选择 "Windows installer"。大多数现代计算机都是 64 位的。

**安装pip**：  

如果已经安装了 pip，它会显示 pip 的版本号。如果没有安装，你会收到一条类似 "pip 不是内部或外部命令" 的错误消息。

 如果你发现没有安装 pip，你可以通过以下步骤来手动安装：

    a. 首先，下载 get-pip.py 文件。你可以在浏览器中搜索 "get-pip.py"，然后找到 Python 官方网站上的下载链接。

   

    b. 将 get-pip.py 文件保存到你的计算机上的某个目录中，比如你的用户文件夹。

   

    c. 在命令提示符中，切换到保存 get-pip.py 文件的目录。你可以使用 `cd` 命令来切换目录，比如：

   

    `cd C:\Users\YourUsername`

   

    d. 运行以下命令来安装 pip：

   

    `python get-pip.py`

   

    这将运行 get-pip.py 文件，并安装 pip 到你的系统中。

安装完成后，你可以再次输入 `pip --version` 来检查 pip 是否成功安装。

现在，你已经成功在 Windows 命令行中安装了 pip，可以使用 pip 来安装 Python 包和库了。



 

### 1.2 安装Open UI

拉取代码

```shell

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

```

进入backend目录

```shell

cd openui/backend

```

安装依赖

```shell

pip install .

```

这里必须设置OPENAI_API_KEY;

如果你要使用OpenAI的模型，可以从https://platform.openai.com/api-keys 获取密钥

如果是要使用其他模型（电脑内存要大于16G），OPENAI_API_KEY可以设置为：xxx

```shell

export OPENAI_API_KEY=xxx

```

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



 

2. 本地访问Open UI

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

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

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

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

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

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

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

3. 安装Cpolar内网穿透

下面是安装cpolar步骤：

> Cpolar官网地址: [https://www.cpolar.com](https://www.cpolar.com/)

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

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

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

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

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

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

- 隧道名称：可自定义命名，注意不要与已有的隧道名称重复

- 协议：选择http

- 本地地址：7878 (本地访问的地址)

- 域名类型：免费选择随机域名

- 地区：选择China Top

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

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



 

 4. 实现公网访问Open UI

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

**小结**

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



 

5. 固定Open UI 公网地址

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

[登录cpolar官网](https://dashboard.cpolar.com/)，点击左侧的预留，选择保留二级子域名，设置一个二级子域名名称，点击保留,保留成功后复制保留的二级子域名名称。

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

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

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

- 域名类型：选择二级子域名

- Sub Domain：填写保留成功的二级子域名

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

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

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


 

结尾：OpenUI与cpolar内网穿透的组合，不仅是设计工具的升级，更是创意协作方式的革命。它让UI设计从"单机作战"变成"全球协同"，从"格式兼容噩梦"变成"无缝衔接体验"。对于专业团队，这是提升效率的利器；对于设计爱好者，这是实现创意的舞台；对于中小企业，这是降低成本的良方。当技术真正服务于创意，我们或许会发现：最好的设计，往往诞生在没有工具束缚的自由土壤中。🎨✨

# ui # 网络
Logo
智联教育社区

更多推荐

cover

ChipCamp探索系列 -- 7J. 开源CPU之BOOM的运算功能模块注释2

avatar 智联教育社区

大数据领域Hadoop的配置参数调优秘籍

在大数据时代，Hadoop作为一个开源的分布式计算平台，被广泛应用于数据存储和处理。然而，默认的Hadoop配置参数往往不能满足不同用户的实际需求和复杂的业务场景。因此，对Hadoop的配置参数进行调优，能够充分发挥集群的性能，提高数据处理的效率，降低成本。本文的范围涵盖了Hadoop生态系统中核心组件（如HDFS、MapReduce、YARN）的主要配置参数调优，旨在为读者提供全面且实用的调优秘

avatar 智联教育社区
cover

Chain-of-Agents：多智能体蒸馏技术让推理成本降低84.6%，AI开发者的新突破！

avatar 智联教育社区