前言
上篇我們實現了基礎節點，并暴露出grpc服務，但是手動編輯文本制作一個workflow實在強人所難。
所以本文我們做個webui自動生成workflow。
開搞之前先看看別人怎么做的。
Dify 的ui
效果如下圖示：
-
支持多種功能節點
-
但只能打開一個節點的詳細內容
-
提供debug能力，能看到執行細節
Coze的ui
界面算是dify的升級版，一樣絲滑，效果如下圖示：
- 能在編輯頁直接看到每個節點的細節，但是當節點非常多的時候，非常難以操作，看的眼暈。
- debug在每個節點中可以直接看到。
Stable diffusion 的comfyui
畫風一轉，是我喜歡的類型
- 更自由的節點設計，任意擴散
- 不再是節點間的流轉，而是變量間相互鏈接
- 和coze一個毛病，節點多了極難維護。
設計和目標
-
能夠看到整體節點的流轉，但是每個界面可以單獨打開關閉，參考dify。
-
必須提供debug功能。最好是和coze一樣直接綁定到節點上。
-
節點的界面設計和comfyui一樣是開放式的，可以隨意定義。
效果預覽
服務啟動方法：【ai_agent】從零寫一個agent框架(一)打造最強開放agent編輯框架，拳打dify，腳踩coze
操作方法：
-
頂邊控制欄 project|setting|about ，點擊會在左邊生成控制界面，在project界面可以加載項目的service節點。
-
編輯窗口
- FlowChart LLM Script Workflow 都是具體的服務節點。
- 紅色clean，清理所有的已經生成的節點
- 紅色reset，重置整個界面
- 綠色save，保存配置，默認30s自動保存，時間在project界面可以調整。
- 綠色debug，debug一次流程。
-
右邊上側為所有節點列表，可以在這里打開關閉節點視圖，也可以刪除。
-
work-flow-view，查看節點間的流轉關系
-
plan-text-view：查看執行計劃，下載所有生成的節點，上傳節點配置(會覆蓋當前配置)。
-
底邊為日志信息，可以展開
如下窗口： 
關于窗口的設計
窗口的結構目前是固定的五部分，當然未來可能會更多。
-
節點編號，描述，service類型，
-
input，輸入參數結構
-
output，輸出參數結構
-
goto，向那些節點流轉
-
debug，調試信息
我們看一下窗口的具體定義，以openai-llm為例。在線查看，我這里也貼一下：
{"plugin_list":[{"code":"openai-LLM","class":"LLM","desc":"openai LLM chat","ui_type":"window","service_type":"openai_llm","input_vars": {"model": {"type":"string","default":"gpt-3.5-turbo","ui_type": "enum","ui_extend_enum": ["gpt-4o","gpt-4-turbo","gpt-4","gpt-3.5-turbo"]},"temperature":{"type":"f32","default": 0.7,"desc":"The randomness of the model generated responses","ui_extend_slider": {"max": 2.0,"min": 0.0,"speed": 0.01}},"max_tokens":{"type":"number","default": 512,"desc":"answer max tokens","ui_extend_slider": {"max": 512,"min": 0,"speed": 1}},"prompt":{"type":"string","default":"","ui_type":"text_edit_multi"},"query":{"type":"string","default":"","required":true},"tools":{"type": "list"},"context": {"type": "list"},"extend":{"type": "object"}},"output_vars": {"answer": "this is text","tools": [{"function_name": "tool name","args": "function call args"}]}}]
}那么它對應展示的效果如下。
如果自己定義了一個功能視圖，應該放在哪里？
所有的視圖配置都在webui/server/plugin目錄下，當點擊project->LOAD按鈕時，會默認加載這個目錄下的全部配置。
代碼實現
倉庫地址：ai_agent/webui at main · woshihaoren4/ai_agent
- webui本身也是一個前后端分離的項目，
webui/server這個文件是一個微小的服務端，提供插件加載，debug調用的功能，通過go run main.go啟動 - webui項目是跨端的，可以當做應用打開。
- 也可以在瀏覽器上打開，此時以wasm的模型運行，需要用trunk啟動，trunk安裝使用教程。
具體的實現就不貼了，用egui畫的，順著update往下捋就行了。
尾語
目前做的這版UI還是很簡潔的，算是基本能用。
整個ai_agent在設計思路上參考了BaaS Solution，也就是說你在webui上設計好了流程后，最終拿到生產環境上用時就不需要webui的參與了，直接api調用。
當然如果你覺得界面實在丑陋到無法接受，那可以自己搞一套。
本文轉自 https://juejin.cn/post/7383201975733796891，如有侵權，請聯系刪除。
