首页 > 其他分享 >如何使用Open UI异地远程办公设计前端网页无需公网IP

如何使用Open UI异地远程办公设计前端网页无需公网IP

时间:2024-09-19 19:49:31浏览次数:9  
标签:安装 IP 地址 UI 公网 pip Open

文章目录

前言

本篇文章介绍如何在Windows系统本地部署Open UI并结合Cpolar内网穿透工具配置公网地址,轻松实现随时随地远程访问本地部署的Open UI智能生成前端代码。

Open UI 是一个开放源代码的项目,致力于创建一个可扩展、可定制,并且能够跨平台运行的用户界面框架。该项目的目标是提供一套标准化的组件库,让开发者可以更高效地构建响应式的Web应用,同时保持对最新Web技术的兼容性和前瞻性。

Open UI 基于现代Web技术如HTML、CSS和JavaScript(尤其是配合React或Vue等前端框架)。它采用了模块化的设计,允许开发者按需引入所需组件,大大减少了代码体积。此外,Open UI 还利用Web Components技术,实现了组件的封装和复用,使得UI开发更加简洁和高效。

1. 本地部署Open UI

安装环境:Windows10,电脑上需安装gitPythonpip

1.1 安装Git、Python、pip

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

image.png

安装Python:打开你的浏览器,访问 Python 官方网站 https://www.python.org/downloads/
在 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

拉取代码

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

进入backend目录

cd openui/backend

安装依赖

pip install .

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

export OPENAI_API_KEY=xxx

image.png

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官网地址: https://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内网穿透工具实现远程访问使用的全部流程,感谢您的观看,有任何问题欢迎留言交流。

标签:安装,IP,地址,UI,公网,pip,Open
From: https://blog.csdn.net/VLOKL/article/details/142366455

相关文章

  • NOIP2024集训 Day33 总结
    前言若巅峰不在,那就重踏来时之路。今天是\(\texttt{DP}\)优化专题,感觉只要写出了暴力,剩下的部分都挺典的。怎么说,感觉今天状态不太好,老是细节上出现一些很逆天的错误。例如:for(autoi=dp.begin();i!=dp.end();++i){pair<ll,ll>j=*i;ans=j.first......
  • 修改IP地址的方法有哪些?总结8个方法
    更改IP地址是一个常见的需求,无论是为了保护个人隐私、绕过地理限制还是进行商业数据分析。不同的IP更改方法适用于不同的需求和环境。但请注意,更改IP地址应在合法场景下进行,无论使用什么方法,都需要在符合当地网络安全法律法规的情况下进行,切勿违法操作。1、重启路由器:这种方......
  • JavaScript在数据可视化领域的探索与实践
    目录引言JavaScript可视化库概览D3.js基础入门1.引入D3.js2.绘制简单的条形图3.添加轴交互性与动画实际应用场景结论引言在数据驱动决策日益重要的今天,数据可视化成为连接数据与洞察的桥梁。JavaScript,作为前端开发的主力军,凭借其灵活性和丰富的库支持,在数据......
  • 什么是 IP 地址信誉?5 种改进方法
    IP地址声誉是营销中广泛使用的概念。它衡量IP地址的质量,这意味着您的电子邮件进入垃圾邮件或被完全阻止发送的可能性。由于每个人都使用专用电子邮件提供商而不是直接通过IP地址进行通信,因此,这些服务可以跟踪和衡量发件人的行为质量,其中许多是从接收者的行为中收集的。......
  • 在线安全干货|如何更改IP地址?
    更改IP地址是一个常见的需求,无论是为了保护个人隐私、绕过地理限制还是进行商业数据分析。不同的IP更改方法适用于不同的需求和环境。但请注意,更改IP地址应在合法场景下进行,无论使用什么方法,都需要在符合当地网络安全法律法规的情况下进行,切勿违法操作。1、重启路由器:这种方......
  • Facebook运营干货:账号类型有哪一些?有必要使用静态住宅IP吗?
    Facebook作为月活跃用户数高达几十亿的社交媒体平台,一直不断有新用户选择加入。从个人用户的生活分享到企业用户的商务宣传推广,Facebook提供各大功能和模块来满足用户需求。相应的,用户也需要了解平台特点来进行相应的操作。本文从账号类型出发来讲述Facebook运营技巧。一、......
  • kube-vip搭建k8s1.30.5高可用集群
    实验环境机器五台系统:ubuntu24.04cat/etc/hosts192.168.0.11jichao11k8s-master01192.168.0.12jichao12k8s-master02192.168.0.13jichao13k8s-master03192.168.0.14jichao14k8s-worker01192.168.0.15jichao15k8s-worker02192.168.0.200lb.kub......
  • JavaScript 的引入方式【示例】
    JavaScript的引入方式主要有以下几种:1.内联JavaScript直接在HTML标签中使用事件属性编写JavaScript代码。例如:<buttontype="button"onclick="alert('内联JavaScript')">Clickme</button>2.内嵌JavaScript将JavaScript代码写在HTML文件的 <script>......
  • Element UI 表格组件 el-table,给复选框增加悬浮提示
    <el-tableref="multipleTable":data="tableData"tooltip-effect="dark"max-height="589"style="width:100%;margin-bottom:24px"v-if="act......
  • flutter开发将项目从flutter版本3.19.6升级到3.24.3过程遇到问题记录Type 'Unmodifiab
    1.androidstudio修改当个项目的flutter版本,不影响其他项目工程的flutter编译版本1.1项目右上角点击‘设置’图标,选择Settings...进去到项目的设置页面,选择fluttersdk路径1.2项目右上角点击‘设置’图标,选择Settings...进去到项目的设置页面,选择dartsdk路径2.点开打开......