前言
本篇文章介紹如何在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，電腦上需安裝git、python和pip。
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 官方網站上的下載鏈接。
代碼語言：javascript代碼運行次數：0運行復制
b. 將 get-pip.py 文件保存到你的計算機上的某個目錄中，比如你的用戶文件夾。c. 在命令提示符中，切換到保存 get-pip.py 文件的目錄。你可以使用 `cd` 命令來切換目錄，比如：`cd C:UsersYourUsername`d. 運行以下命令來安裝 pip：`python get-pip.py`這將運行 get-pip.py 文件，并安裝 pip 到你的系統中。
安裝完成后，你可以再次輸入 pip –version 來檢查 pip 是否成功安裝。
現在，你已經成功在 Windows 命令行中安裝了 pip，可以使用 pip 來安裝 Python 包和庫了。
1.2 安裝Open UI
拉取代碼
代碼語言：javascript代碼運行次數：0運行復制
git clone https://github.com/wandb/openui
進入backend目錄
代碼語言：javascript代碼運行次數：0運行復制
cd openui/backend
安裝依賴
代碼語言：javascript代碼運行次數：0運行復制
pip install .
這里必須設置OPENai_API_KEY; 如果你要使用OpenAI的模型，可以從https://platform.openai.com/api-keys 獲取密鑰 如果是要使用其他模型（電腦內存要大于16G），OPENAI_API_KEY可以設置為：xxx
代碼語言：javascript代碼運行次數：0運行復制
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官網，點擊免費使用注冊一個賬號，并下載最新版本的Cpolar
登錄成功后，點擊下載Cpolar到本地并安裝（一路默認安裝即可）本教程選擇下載Windows版本。
image-20240319175308664Cpolar安裝成功后，在瀏覽器上訪問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端口地址，該地址不會變化，方便分享給別人長期查看你的博客，而無需每天重復修改服務器地址。
登錄cpolar官網，點擊左側的預留，選擇保留二級子域名，設置一個二級子域名名稱，點擊保留,保留成功后復制保留的二級子域名名稱。
a00f7c9395515615d9df1e9b88c732b.png保留成功后復制保留成功的二級子域名的名稱
619da9eb7a14e9a237588ea8dc4ef4f.png返回登錄Cpolar web UI管理界面，點擊左側儀表盤的隧道管理——隧道列表，找到所要配置的隧道，點擊右側的編輯
c2a9208dac76420f52ebae233eb2c68.png修改隧道信息，將保留成功的二級子域名配置到隧道中
域名類型：選擇二級子域名Sub Domain：填寫保留成功的二級子域名
點擊更新(注意,點擊一次更新即可,不需要重復提交)
3c3221aea3e15e48a2c50172023bac8.png更新完成后,打開在線隧道列表,此時可以看到公網地址已經發生變化,地址名稱也變成了固定的二級子域名名稱的域名
image.png最后，我們使用固定的公網https地址在任何瀏覽器打開訪問，可以看到訪問Open UI成功了這樣一個固定且永久不變的公網地址就設置好了。
85b712c9ab9aebc8603634648e5a8c7.png
