第十七章 以ChatCoder設計表單第十七章 以ChatCoder設計表單\17-1 ChatCoder概念與架構

17-1 ChatCoder概念與架構

u概念

隨著OpenAIChatGPT爆紅,絕大多數的程式碼皆可以透過ChatGPT來產生,未來幾年將對程式師的我們產生重大影響。同樣標榜要以AI智能來快速開發應用軟體的iCoder工具,遇到如此巨大的轉折,當然也要善用ChatGPT強大的自然語言處理模型及能理解人類語言語義,來充分揮發ChatGPT在分類與歸納的功能,協助EEP.NET Core可以根據開發者使用自然的規格語言,來快速開發出應用軟體系統。

 

EEP.NET Core提供了一個新的ChatCoder模組,該模組透過OpenAI APIAzure OpenAIClaude等大型語言模組來讀懂你的應用需求,開發者可以用文字或口述(語音轉文字)來描述需求與規格,甚至可以透過頁面截圖的方式,可在2分鐘內將你的文字需求或截圖轉換成iTable的系統規格,再自動產生EEP應用系統的對應模組(RWDServer端模組),並可立即執行結果。

 

除了ChatCoder外,還提供了一個Runtime ChatUX引擎,讓使用者以文字或語音方式來操作應用系統,如「我想統計一下訂單資料,今年第一季,業務員為COCO」。「幫我印出去年第4季的損益表」。「幫我增加一個用戶,用戶編號A017,名稱為TOBY,部門為業務部」等等。最後使用者只需要按下確認即可完成操作,大幅降低系統操作門檻與簡化步驟,讓企業迎向AI的新年代。

 

u架構

因為ChatGPT可以理解人類的自然語言與解析頁面及報表圖檔,所以只要將開發者所提出來的文字需求或上傳圖檔,讓ChatGPT來建議規格(狹義來說是建議資料表結構)與解析圖檔,再來產生EEP所需要的iTable規格,步驟如下:

Step1>       開發者可以用三種方式來提出需求,第一種是自然語言的文字需求,透過ChatGPT(也可以是Claude或其他大型語言模型),來產生建議的資料表規格,會讓GPT建議出欄位名稱與摘要;第二種是透過截圖的畫面上傳到GPT中來解析畫面,並按畫面來產生布局與各欄位內容;第三種是透過截圖的報表格式透過GPT來解析報表各區塊的格式與欄位。

Step2>       開發者可以透過交談來與GPT溝通,不斷補充欄位規格(也就是欄位摘要),透過ChatGPT重新整理出新的規格。如果是上傳截圖可以預覽網頁或報表的格式,也可以讓GPT重新解析或自行編輯布局中的欄位與次序。

Step3>       當開發者滿意規格之後,接著透過ChatCoder將上述的規格(內容為一個JSON格式)轉成iTable的布局與欄位定義,無論是文字的欄位規格還是頁面或報表規格都會被統一轉換成iTable的規格。

Step4>       iTableEEP一個強大的視覺化頁面編輯模組,可以在此進行細部的欄位定義、公式定義、關聯定義等等,除了拖拉點選進行欄位與屬性的調整外,iTable也可以配合後端現有存在的資料庫進行欄位對應匹配。

Step5>       最後,透過iTable可以自動產生Table SchemaServer端資料存取模組、前端RWD頁面等,如果是報表截圖還會自動產生對應的Excel套表格式,一氣呵成,這樣就完成了應用系統。

Step6>       透過RunTime的機制與授權,使用者就可以立即執行剛剛所提出來需求的應用系統了。

以上步驟,如果都沒有人為干預的話,如只要輸入「我要開發一個員工管理」,1分鐘內即可無中生有,自動幫你產生一個透過GPT所建議的員工管理系統(注意,GPT每次提出的建議都會些微的差異)。或者,你擷取取一個員工管理的畫面,直接上傳到我們ChatCoder,透過GPT的解析,同樣可以在1分鐘內幫你產生一個與你截圖相近的應用系統了。

 

uChatUX架構

除了開發外,也可以利用ChatGPT強大的自然語言理解能力,讓使用者以自然語言的文字或語言(語音轉文字)轉換成Runtime的執行命令,輔助使用者來直接對應用系統進行操作,除了可以打開對應的表單查詢外,還可以對其進行新增、更改、刪除、印表等動作,可大幅降低系統操作門檻與簡化操作步驟等。如下為ChatUX的示意圖,步驟如下:

Step1>       主畫面提供一個新的ChatUX介面讓使用者可以用文字或語音輸入自然語言命令。

Step2>       經過OpenAI API(或是Claude)歸類與整理成EEP的命令規格格式,也就是使用者的自然語言會被整理成這樣的JSON格式: (功能名稱,動作,欄位對應參數)

Step3>       接著ChatUX將命令格式進行取樣的處理,透過EEPMENU選單查詢有沒有這個USER授權可使用的相近的功能名稱,如果有就直接打開這個對應選單的表單;也可能找到多個選單就由USER來選擇決定。

Step4>       打開這個表單時,透過URL傳入命令格式中的動作與欄位對應參數,此時EEPRWD表單中會自動偵測這個傳入的命令格式,並進行解析。解析之後會進行以下的動作:

動作

欄位對應參數

查詢

取出欄位對應,進行查詢動作

新增

取出欄位對應,進行新增動作

更改

取出欄位對應,查詢後進行更改動作

刪除

取出欄位對應,查詢後進行刪除動作

印表

取出欄位對應,查詢後進行印表動作

Step5>       進行欄位對應參數時,為了符合自然語言,使用者所表達欄位不一定與表單上的欄位一致,所以當欄位對應找不到時,就會讓ChatGPT將該欄位與表單內實際的欄位進行分析那一個欄位必較接近,來達到自然語言的目地。

Step6>       最後必須把EEP的表單上的DataGrid ChatDetect屬性設為,來接受ChatUX所送過來的指令,並自動執行這個指令,包括新增、更改、刪除、查詢、印表這幾的動作。


 

Top of Page