网站销售都怎么做的,wordpress显示不正常,营销型网站建设和平台建设,垂直网站文章目录前言1. 本地部署Open UI1.1 安装Git、Python、pip1.2 安装Open UI2. 本地访问Open UI3. 安装Cpolar内网穿透4. 实现公网访问Open UI5. 固定Open UI 公网地址前言
OpenUI 是一款能根据指令生成 UI 设计和代码的工具#xff0c;支持 HTML、CSS 及 React、Vue 等框架支持 HTML、CSS 及 React、Vue 等框架非常适合 UI 设计师、前端开发者快速产出页面原型。它的优势在于响应迅速能将文字描述转化为可视化界面还提供可直接使用的代码片段节省重复 coding 的时间。使用 OpenUI 时指令描述越具体生成的结果越贴合需求比如说明 “需要一个电商首页包含轮播图和商品列表” 会比单纯说 “做个网页” 效果好。另外本地部署能保证设计素材和代码的私密性适合处理敏感项目。但仅在局域网内使用 OpenUI远程协作会很不方便。比如设计师在外出差时无法访问公司电脑上的 OpenUI 继续工作团队成员不在同一办公区也不能实时查看和修改设计方案影响项目推进效率。当 OpenUI 与 cpolar 配合后就能轻松实现远程访问。cpolar 能生成公网地址让设计师在任何地方都能连接到本地的 OpenUI团队成员也能通过该地址共同参与设计讨论无需复杂的服务器配置既保证了工具的私有化又提升了协作灵活性。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/在 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拉取代码gitclone https://github.com/wandb/openui进入backend目录cdopenui/backend安装依赖pipinstall.这里必须设置OPENAI_API_KEY;如果你要使用OpenAI的模型可以从https://platform.openai.com/api-keys 获取密钥如果是要使用其他模型电脑内存要大于16GOPENAI_API_KEY可以设置为xxxexportOPENAI_API_KEYxxx启动后访问 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点击进入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官网点击左侧的预留选择保留二级子域名设置一个二级子域名名称点击保留,保留成功后复制保留的二级子域名名称。保留成功后复制保留成功的二级子域名的名称返回登录Cpolar web UI管理界面点击左侧仪表盘的隧道管理——隧道列表找到所要配置的隧道点击右侧的编辑修改隧道信息将保留成功的二级子域名配置到隧道中域名类型选择二级子域名Sub Domain填写保留成功的二级子域名点击更新(注意,点击一次更新即可,不需要重复提交)更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定的二级子域名名称的域名最后我们使用固定的公网https地址在任何浏览器打开访问可以看到访问Open UI成功了这样一个固定且永久不变的公网地址就设置好了。OpenUI 提升设计效率cpolar 打破空间限制二者结合让 UI 设计的本地私有化与远程协作不再矛盾为设计师团队提供了更灵活的工作方式。cpolar官网-安全的内网穿透工具 | 无需公网ip | 远程访问 | 搭建网站