苑宗鶴-無極低代碼UI可視化的AIGC落地與實踐.pdf

《苑宗鶴-無極低代碼UI可視化的AIGC落地與實踐.pdf》由會員分享，可在線閱讀，更多相關《苑宗鶴-無極低代碼UI可視化的AIGC落地與實踐.pdf（62頁珍藏版）》請在三個皮匠報告上搜索。

1、無極低代碼 UI可視化的 AIGC落地與實踐苑宗鶴 騰訊高級前端開發工程師介紹無極低代碼介紹無極低代碼大家眼中的低代碼可視化方式拖拽一些PC應用疑問：能做多復雜的系統？只用可視化拖拽夠用嗎？應用展示應用展示ERPERP進存銷系統進存銷系統 進貨、庫存和銷售管理系統 配套訂單跟蹤、采購流程設計、審批流程、復雜報表分析等應用展示應用展示開放平臺開放平臺/禮包配置禮包配置 一個開放平臺，提供給用戶管理、運營APP應用的渠道內容 例如：活動、禮包、禮券等，并提供對應的數據看板，展示渠道活動的運營數據應用展示應用展示APPAPP頁卡運營頁卡運營 一個APP、H5頁面可視化編輯系統 頁面模板創建、數據源管

2、理、頁面可視化搭建、分層實驗、數據展示等功能。是一個用無極低代碼搭建出來的“無代碼”項目應用展示應用展示門戶站點門戶站點 /文檔站點文檔站點無極官方主頁、官方文檔頁，也是用無極搭建大量業務通過無極產生自己的管理臺大量業務通過無極產生自己的管理臺目錄目錄一一 、AI AI 與低代碼與低代碼 Copilot Copilot二二 、AI AI 與低代碼布局與低代碼布局實現平臺級實現平臺級 co copilotpilot自動糾錯自動糾錯AI AI 自動化測試自動化測試AIAI如何與編輯器交互如何與編輯器交互BIBI生成生成任務拆分任務拆分AI AI 布局生成布局生成低代碼平臺中的編碼場景低代碼平臺中的

3、編碼場景：前端：前端使用權限使用權限 APIAPI 進行進行 UI 控制控制低代碼平臺中的編碼場景低代碼平臺中的編碼場景：后端：后端后端返回時進行數據修剪后端返回時進行數據修剪在低代碼平臺中編碼的痛點在低代碼平臺中編碼的痛點？編碼時需要反復查看平臺的文檔或者咨詢客服對于非開發來說，編寫代碼是有難度和理解成本的讓 AI 來幫忙？目錄目錄AI AI 與低代碼與低代碼 Copilot Copilot實現平臺級實現平臺級 co copilotpilot自動糾錯自動糾錯AI AI 自動化測試自動化測試使用使用 githubgithub copilot copilot 遇到的遇到的 badcasebadc

4、ase在某個未打開的文件中的函數定義Github copilot 給出的補全結果是填入 ctx前端 API前端上下文豐富的豐富的 API API 和上下文和上下文各自維護各自維護 pro promptmpt 修改模塊時成本高修改模塊時成本高使用到的 APIw.emitterw.showModaldata.search_list.listDatadata.user_info.formDatastate.selected_listprompt2prompt3prompt1直接使用文檔作為 prompt無極無極的低代碼配置本身作為的低代碼配置本身作為 DSL DSL 存儲存儲用戶配置無極 DSL私有

5、協議不易于私有協議不易于 AI AI 理解理解平臺私有的平臺私有的 DSL DSL =標準化的協議標準化的協議 =typescript typescript 類型類型無極 DSL類 typescript 類型對比使用文檔對比使用文檔 ,經過轉換后的經過轉換后的ts ts 類型更簡潔類型更簡潔直接喂文檔,信息冗余量大,維護滯后轉化后的 ts 類型,精簡,節省 tokenTypeScriptTypeScript類型類型:能保留完整的類型定義和注釋，在不泄露數據前提下能保留更多對變量和方法的描述，而且大大降低 Prompt token 的消耗使用無極使用無極DSLDSL :對 Prompt 結構影響

6、小，從而減少 Prompt 改動對 AI 生成的影響目錄目錄AI AI 與低代碼與低代碼 Copilot Copilot實現平臺級實現平臺級 co copilotpilot自動糾錯自動糾錯AI AI 自動化測試自動化測試沒這個變量啊!怎么提高 AI 輸出的正確率呢?AI AI 出現了幻覺出現了幻覺將將代碼轉回代碼轉回 AST AST 進行校驗進行校驗糾錯糾錯后開啟第二輪會話后開啟第二輪會話成功率80%AST 修正成功率94%提升了單輪問答的成功率提升了單輪問答的成功率目錄目錄AI AI 與低代碼與低代碼 Copilot Copilot實現平臺級實現平臺級 co copilotpilot自動糾錯

7、自動糾錯AI AI 自動化測試自動化測試模型升級、或者平臺API調整，不能對舊用例產生影響數據源模塊前端 API 模塊模型平臺迭代時平臺迭代時,如何穩定輸出如何穩定輸出?DSL 的生成包含了前端和各種接口邏輯,使用前端 e2e能復用大部分現有邏輯DSL DSL 從從前端生成，測試環境復雜前端生成，測試環境復雜用戶搭建的數據源和變量動態生成的 promptai測試模塊使用無頭瀏覽器運行測試用例使用無頭瀏覽器運行測試用例ai測試模塊輸出對比對比輸入和輸出校驗用例是否通過對比輸入和輸出校驗用例是否通過相同的邏輯相同的邏輯，不同的代碼，不同的代碼AI 輸出標準答案ai測試模塊輸出引入引入 AI AI

8、裁判裁判實時監控每一次迭代實時監控每一次迭代平臺級平臺級 copilotcopilot-降低上手難度,提高開發效率智能化自動糾錯智能化自動糾錯-防止 AI“抽風”AI AI 功能的自動化測試功能的自動化測試-在平臺迭代時確保功能穩定小結小結目錄目錄二二 、AI AI 與低代碼布局與低代碼布局AIAI如何與編輯器交互如何與編輯器交互BIBI生成生成任務拆分任務拆分AI AI 布局生成布局生成AI AI 直接生成布局直接生成布局，過程過于黑盒，過程過于黑盒傳統方案缺點：數據&接口授權需要用戶親自確認，不能 AI 代替執行 單次生成流程僅能接受一次用戶輸入，不方便動態調整 AI生成后頁面直接刷新，用

9、戶無法感知其中的執行步驟讓讓 AI AI 直接操作用戶界面，過程清晰可見直接操作用戶界面，過程清晰可見AI生成內容=AI 生成指令指令逐個執行，用戶可以了解過程指令與指令之間可以進行用戶交互，進行微調操作原子化，減少模塊迭代負擔 JSJSBridge:Bridge:操作編輯器的接口操作編輯器的接口JSBridge操作用戶界面遇到的問題操作用戶界面遇到的問題以 AI 點擊確認按鈕為例：缺點 從 dom 上選擇元素后模擬點擊，迭代后難以準確選中元素 將按鈕的點擊事件制作成鉤子，有大量未接入 AI 的組件等待改造優點 dom 模擬操作：觸發直接，無需考慮具體調用了哪些方法 從組件層面操作：組件功能單

10、一，容易定位如何將兩者的優點合二為一呢如何將兩者的優點合二為一呢？操作用戶界面遇到的問題操作用戶界面遇到的問題以 AI 點擊確認添加為例：方案一：從 dom 上下手優點：觸發直接缺點：樣式/結構一重構就選不到了，除非大量打點改造操作用戶界面遇到的問題操作用戶界面遇到的問題以 AI 點擊確認添加為例：方案二：從組件api下手優點：組件功能單一，不會輕易變動缺點：將綁定的事件抽取成鉤子，也有大量改造成本AI AI 模仿用戶模仿用戶，操作整個編輯器，操作整個編輯器以 Vue為例：virtual dom：包含組件的全部屬性，方法，以樹的結構存儲 組件dom：可以從 virtual dom 上拿到，用于

11、觸發組件事件生成過程中二次調整生成過程中二次調整AI 無法只從用戶的需求中生成指令，我們需要傳遞更多信息 基本的指令集合(JSBridge)組件的基礎信息(屬性項定義，事件，方法)當前的編輯數據(已配置的樣式，屬性，布局)讓讓 AI AI 能能“看見看見”編輯指令 查詢指令 接口授權 目錄目錄二二 、AI AI 與低代碼布局與低代碼布局AIAI如何與編輯器交互如何與編輯器交互BIBI生成生成任務拆分任務拆分AI AI 布局生成布局生成BI BI 生成生成：數據基于：數據基于 DSL DSL 接入數據接入數據 生成組件 組件調整字段類型：FieldType字段信息：FieldSchema表信息：

12、TableSchema無極表 DSL：目錄目錄二二 、AI AI 與低代碼布局與低代碼布局AIAI如何與編輯器交互如何與編輯器交互BIBI生成生成任務拆分任務拆分AI AI 布局生成布局生成TokenToken爆了爆了！Token 相當于AI 的腦容量，對話過程中添加的信息會占用 Token 數量隨著喂 AI 的信息越來越多，token 很快到達了上限對策：簡化傳遞的信息 只傳遞有用的信息簡化：精簡之后 AI 的理解變差了精簡：任務很多，多多少少都用上了一些無極的編輯端可以拆分為多個模塊無極的編輯端可以拆分為多個模塊 導航 物料 畫布 組件配置將一個任務分配給多個模塊依次執行將一個任務分配給多

13、個模塊依次執行任務：統計電影的年份我該把哪個數據綁定到圖表上呢？引入引入 AI AI 管家管家，拆分任務，同步各模塊間的數據，拆分任務，同步各模塊間的數據頂層的 AI 即可以拆分任務，調用下層 AI也可以傳遞下層 AI 之間的結果任務和模塊按照樹狀遞歸任務和模塊按照樹狀遞歸，縱向拓展，縱向拓展當負責模塊的 AI Token 吃緊時，就可以繼續向下拆分目錄目錄二二 、AI AI 與低代碼布局與低代碼布局AIAI如何與編輯器交互如何與編輯器交互BIBI生成生成任務拆分任務拆分AI AI 布局生成布局生成AI AI 布局生成布局生成小結小結AIAI如何與編輯器交互如何與編輯器交互BIBI生成生成任務拆分任務拆分AI AI 布局生成布局生成ONEONE MOREMORE THINGTHING探索探索AIAI的各種可能的各種可能探索探索AIAI的各種可能的各種可能體驗無極體驗無極w 商務合作商務合作專業，全生命周期企業級低代碼解決方案！技術交流技術交流