文章目錄

  • 前言
  • 1. 本地部署Open UI
  • 1.1 安裝Git、Python、pip
  • 1.2 安裝Open UI
  • 2. 本地訪問Open UI
  • 3. 安裝Cpolar內網穿透
  • 4. 實現公網訪問Open UI
  • 5. 固定Open UI 公網地址

前言

OpenUI 主要功能是根據用户指令生成網頁模板，涵蓋多種 Web 技術和框架，還提供大量模板，方便設計師快速獲取代碼並進行修改。

作為經常使用 OpenUI 的設計師，我覺得它特別實用，輸入簡單指令就能得到所需網頁框架，省去很多重複工作，而且生成的代碼便於調試，大大提升了設計效率。

之前 OpenUI 只能在局域網用，出門在外想修改設計或和異地同事協作都很麻煩。用了 cpolar 後，有了公網地址，在手機、平板上都能隨時訪問，在家、出差都能工作，還能輕鬆和團隊實時同步設計進度，再也不受局域網限制了。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#筆記

1. 本地部署Open UI

安裝環境：Windows10，電腦上需安裝git、Python和pip。

1.1 安裝Git、Python、pip

安裝git：如果沒有安裝git的話，進入git官網進行下載windows版本 https://git-scm.com/downloads

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#人工智能_02

安裝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

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#藍湖_03

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#figma_04

啓動後，訪問 http://localhost:7878/ 即可使用。

2. 本地訪問Open UI

打開一個新的瀏覽器，輸入 localhost:7878 或本地IP:7878

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#藍湖_05

我們可以在下方文本框中輸入指令，比如：請幫我製作一個AI官網主界面

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#figma_06

可以看到生成了網頁的模版格式，還可以任意發出其他指令，並且下面會有代碼，可以拿去自己調試換成替換標籤裏的圖片或者內容。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#人工智能_07

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

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#figma_08

可以看到我們對Open UI提出指令，它會根據我們的指令提供相應的網頁模版。

我們在本機成功部署了Open UI,但是如果我們需要不在局域網內，需要遠程辦公來設計前端網頁的話，就要在公網上進行訪問Open UI，那麼我們就可以結合Cpolar內網穿透來實現了,免去了複雜得本地部署過程，只需要一個公網地址直接就可以進入到Open UI中。！

接下來教大家如何安裝Cpolar並且將Open UI實現公網訪問。

3. 安裝Cpolar內網穿透

下面是安裝cpolar步驟：

Cpolar官網地址: https://www.cpolar.com

點擊進入cpolar官網，點擊免費使用註冊一個賬號，並下載最新版本的Cpolar

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#筆記_09

登錄成功後，點擊下載Cpolar到本地並安裝（一路默認安裝即可）本教程選擇下載Windows版本。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#tcp/ip_10

Cpolar安裝成功後，在瀏覽器上訪問http://localhost:9200，使用cpolar賬號登錄,登錄後即可看到Cpolar web 配置界面,結下來在web 管理界面配置即可。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#figma_11

接下來配置一下 Open UI 的公網地址，

登錄後，點擊左側儀表盤的隧道管理——創建隧道，

創建一個 Open UI 的公網http地址隧道

  • 隧道名稱：可自定義命名，注意不要與已有的隧道名稱重複
  • 協議：選擇http
  • 本地地址：7878 (本地訪問的地址)
  • 域名類型：免費選擇隨機域名
  • 地區：選擇China Top

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#tcp/ip_12

隧道創建成功後，點擊左側的狀態——在線隧道列表,查看所生成的公網訪問地址，有兩種訪問方式,一種是http 和https

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#人工智能_13

使用上面的Cpolar https公網地址,在手機或任意設備的瀏覽器進行登錄訪問,即可成功看到 Open UI 界面,這樣一個公網地址且可以遠程訪問就創建好了,使用了Cpolar的公網域名,無需自己購買雲服務器,即可到公網訪問 Open UI 了！

4. 實現公網訪問Open UI

我們用剛才cpolar生成的公網地址，打開一個新的瀏覽器複製粘貼，可以看到進入到了Open UI主界面。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#figma_14

小結

如果我們需要長期進行團隊協作的話，由於剛才創建的是隨機的地址，24小時會發生變化。另外它的網址是由隨機字符生成，不容易記憶。如果想把域名變成固定的二級子域名，並且不想每次都重新創建隧道來訪問Open UI，我們可以選擇創建一個固定的http地址來解決這個問題。

5. 固定Open UI 公網地址

我們接下來為其配置固定的HTTP端口地址，該地址不會變化，方便分享給別人長期查看你的博客，而無需每天重複修改服務器地址。

登錄cpolar官網，點擊左側的預留，選擇保留二級子域名，設置一個二級子域名名稱，點擊保留,保留成功後複製保留的二級子域名名稱。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#tcp/ip_15

保留成功後複製保留成功的二級子域名的名稱

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#筆記_16


返回登錄Cpolar web UI管理界面，點擊左側儀表盤的隧道管理——隧道列表，找到所要配置的隧道，點擊右側的編輯

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#筆記_17

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

  • 域名類型：選擇二級子域名
  • Sub Domain：填寫保留成功的二級子域名

點擊更新(注意,點擊一次更新即可,不需要重複提交)

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#figma_18

更新完成後,打開在線隧道列表,此時可以看到公網地址已經發生變化,地址名稱也變成了固定的二級子域名名稱的域名

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#tcp/ip_19

最後，我們使用固定的公網https地址在任何瀏覽器打開訪問，可以看到訪問Open UI成功了這樣一個固定且永久不變的公網地址就設置好了。

不依賴 Figma 或藍湖！用 OpenUI + cpolar 打造你的私有設計協作空間_#藍湖_20

掌握了今天的方法後，你不僅能在自己的地盤上隨意搭建OpenUI項目，還能通過Cpolar內網穿透技術讓遠程訪問變得小菜一碟。無論是個人修煉還是團隊協作，這些技能都能讓你在前端開發的道路上更加遊刃有餘。趕緊動手試試吧，你會發現原來技術也可以這麼有趣！

OpenUI 結合內網穿透，打破了使用場景的侷限，讓設計工作更靈活，無論是個人使用還是團隊協作都更高效。