百度智能云+用+AI+重構-大模型與低代碼的“合體變身”

——低代碼與大模型的“合體變身”百度智能云愛速搭團隊/資深研發(fā)工程師/潘征大模型+低代碼=?關于低代碼平臺的一些關鍵詞什么是一般意義上的低代碼平臺?低代碼平臺能做什么?低代碼平臺的“成分”應用創(chuàng)建/管理數(shù)據(jù)集/報表引擎·自定義組件開發(fā)/接入能力大模型，你了解多少?對大模型的一些刻板印象研發(fā)要失業(yè)/原畫師要失業(yè)/網(wǎng)文作者要失業(yè)·來個原型稿，大模型就能百分百幫我轉(zhuǎn)成網(wǎng)頁直接上線·輸入一句話就能給我一個完整的應用·大模型是這么說的，你們怎么說不行呢，我不管我就要微調(diào)/精調(diào)(prompt)zero-shot向量化/MIPS(Maxinumfew-shot低代碼+大模型=?低代碼+大模型，文心的理解我畫好了，歡迎對我提出反饋和建議，幫助我快速進步。在結尾添加#創(chuàng)意圖#,可能會解鎖小彩蛋哦，如：“幫我畫雞蛋灌餅#創(chuàng)意圖#”。重新生成基于對市面上已發(fā)布的低代碼+大模型產(chǎn)品的調(diào)研通用輔助/集成·翻譯(出現(xiàn)頻率高)面統(tǒng)計分析的統(tǒng)計要求生成表格/報表一些實戰(zhàn)例子低代碼+大模型，我們做了什么?實戰(zhàn)提示詞：低代碼平臺自定義組件生成(基于公有云文心千帆接口)搜索關鍵詞CRM管理系統(tǒng)搜索關鍵詞應用設置>自定義組件自頁面管理目數(shù)據(jù)集管理國表單管理日流程管理組件名試試VUE導入組件編譯配置導出組件組件類型了刪除框架了Vue2說明狀態(tài)了構建日志創(chuàng)建人請輸入Key或名稱關鍵詞進行搜索操作創(chuàng)建時間操作2023-08-3107:06:34進干門戶管理每頁顯示視頻展示了低代碼平臺根據(jù)用戶輸入的要求生成React自定義組件的過程在低代碼平臺頁面中使用構建好的自定義組件自頁面管理日數(shù)據(jù)集管理國表單管理日流程管理干門戶管理調(diào)試應用設置>自定義組件>編輯import'./style.scss';//自定義樣式，文件名稱不可修改classColorBoxextendsReact.Component{constructor(props){color:'blue',12componentDidMount(){13setInterval(()=>{14constnewColor=['red','green','blue','yellow','purple'][Math.floor(Math.random()*5)];15this.setState({color:newcolor});16},1000);//每秒變換一次顏色20return(divstylewidthwaanxheightwaapxbackaroundth2223生成的自定義組件保存、構建完畢后，可在低代碼平臺內(nèi)拖拽關鍵：給用戶輸入“加點料”生成一個方塊，寬高均為100,隨時間變換顏色方塊，寬高均為100,并且隨時間變換顏色。payload.data.query=愛速搭React展示類自定義組件的代碼模板為importReactfrom'react';import'./style.scss';//自定義樣式，文件名稱不可修改{{componentCode}}exportdefaultclassCustomCountDownextendsReact.Component{render(){return(/><{{componentName}}...ps/>生成一個React組件，其內(nèi)容為${query},輸出其對應的愛速搭React展示類自定義組件代碼`;用戶感知到的輸入實際提交給大模型接口的傳參=用戶輸入+提示詞通過這個手段來控制輸出的代碼格式符合低代碼平臺自定義組件的代碼格式要求實戰(zhàn)提示詞：自動分析自定義組件代碼并生成右側(cè)配置面板×importReactfrom'react';constCard=({imageUrl,title,subtitle})=>{return(<divclassName="card"><divclassName="card-image"><imgsrc={imageUrl}alt="Backgr(</div><divclassName="card-content"><h2className="title">{title}</l<h3className="subtitle">{subtit.card{position:relative;width:100%;overflow:hidden;box-shadow:02px5pxrgba(0,0,0,0.15);position:relative;.cardposition:relative;overflow:hidden;background-image:url('@{image-url}');background-size:cover;background-position:center;}.card-content{position:absolute;</div>先讓助手根據(jù)要求生成組件代碼和CSS,再讓助手自動分析組件代碼生成配置面板代碼生成當前組件的右側(cè)配置面板typeCustomSchemaType='custom-test123'&$schema='/schemas/UnkownSchema.json';name='測試自定義組件';description='測試自定義組件';//預覽描述信icon='fafa-file-code-o';//圖標type:'custom-test123'asCustomSchemallabel:'測試自定義組件',name:'測試自定義組件'previewSchema:any={//左側(cè)組件預覽type:'custom-test123',label:'測試自定義組件'生成組件配置面板請輸入問題自動分析當前自定義組件的代碼并生成配置面板代碼搜索關鍵詞CRM管理系統(tǒng)搜索關鍵詞組件名稱：測試自定義組件日保存組件名稱：測試自定義組件日保存</>格式化調(diào)試?版本管理☆組件配置構建日志組件代碼樣式組件代碼樣式編輯器插件importimport{Schemaobject,SchiXAPIAPI管理89212225typeCustomSchemaType='clexportclassReactTextPlug.rendererName=custom$schema='/schemas/Unlicon='fafa-file-codscaffold:Schema0bjecttype:'custom-test};previewSchema:any={};panelBody=[{"type":三生成表單類自定義組件(React)"receiver":"/api/upload"},{"type":"input-text","name":"板干門戶管理☆應用設置自動分析當前組件代碼，提取可配置字段，并根據(jù)可配置字段的名稱生成配置面板的代碼生成的配置面板在編輯器中的效果組件組件輸入關鍵字查詢組件鋁披薩披薩是一種意大利人喜歡的食物可以看到，大模型為“背景圖”配置項選擇了圖片上傳組件，為“標題”和“副標題”配置項選擇了文本輸入框組件原理：提示詞+任務拆解render(){<buttonclassName="custom-button<buttonclassName="custom-button"</button>提取其中所有從props獲取的字段，不要事件類classCustomThumbnailextendsR通過合理設計的提示詞，讓大模型提取出React代碼中所有從props傳入的字段exportdefaultCustomThumbnaA:thumbnailSrc,largeImgSrcNLComponentPanelServicedatatexportdefaultCustomBuconstnextQuery=response.data.messages[response.data.messages.length-1]?.content;constresponse2=awaitfetcher({url:'/api/appwizard/completion',method:'post',data:{});functionmakePanelCode(data:any,messages:any[]){const{type,name}=data;import{SchemaObject,SchemaType}from'amis';import{BasePlugin}from'amis-editor';typeCustomSchemaType='custom-${type}'&SchemaType;exportclassReactTextPluginextendsBasePlugin{rendererName='custom-${type}';$schema='/schemas/UnkownSchema.json';name='${name}';icon='fafa-file-code-o';//圖scaffold:Schema0bject={//腳手架type:'custom-${type}'asCustomSchemaType,label:'${name}',name:'${name}'type:'custom-${type}',label:'${name}tags=['自定義'1panelTitle='${name}';panelBody=${extractBody(messages[messages.length-1].content)};根據(jù)上一步抽取的字段讓大模型生成相應的表單，并將表單配置和右側(cè)面板的框架代碼整合生成面板代碼實戰(zhàn)提示詞：基于用戶輸入+提示詞生成應用的全部數(shù)據(jù)模型實體管理自頁面管理十新建十新建API管理視頻展示了低代碼平臺根據(jù)用戶輸入的要視頻展示了低代碼平臺根據(jù)用戶輸入的要干門戶管理交應用設置求生成應用所需的數(shù)據(jù)模型的過程實戰(zhàn)提示詞：任務拆解+實戰(zhàn)提示詞：任務拆解+few-shot控制輸出格式輸入：開發(fā)一個論壇系統(tǒng)需要哪些數(shù)據(jù)庫表?輸入：開發(fā)一個博客系統(tǒng)需要哪些數(shù)據(jù)庫表?輸入：開發(fā)一個IT管理系統(tǒng)需要哪些數(shù)據(jù)庫表?輸入：開發(fā)一個${system}系統(tǒng)需要哪些數(shù)據(jù)庫表?變量里填入「客戶關系管理」,的輸出結果是實戰(zhàn)提示詞：任務拆解+few-shot控制輸出格式輸入：開發(fā)一個博客系統(tǒng)的文章表需要哪些數(shù)據(jù)庫字段及類型?輸入：開發(fā)一個教學系統(tǒng)的學生表需要哪些數(shù)據(jù)庫字段及類型?Pythonid/int、name/text、age/int、gender/text、contact/text、contacttype/text、status/text、createdat/datetimeupdatedatdatetime懸浮容器測試頁面233√測試頁面233√測試頁面233邊欄00分欄副標題邊欄固定數(shù)據(jù)視頻展示了低代碼平臺根據(jù)用戶輸入的要求生成表單的過程http://移動端+新增☆頁面>頁面>表單"type":"form","title":"才藝大賽報名","id":"u:1370a621e9d3","body":[{"type":"input-text","name":"name","label":"姓名","required":true,"id":"u:1918cf97b5c6"才藝大賽報名*姓名“生成一個才藝大賽的報名表單""type":"input-email","name":"email","label":"郵箱","required":true,"id":"u:49aa82492443""type":"input-text","name":"phone","required":true,"id":"u:3c8a15a93b55"*才藝類別請選擇*才藝表演視頻(上傳URL)"type":"select","name":"category","options":["value":"singing""label":"舞蹈","value":"dancing""value":"music"提交報名一個基本的amis頁面配置示例{"type":"page","title":"AMIS頁面配置示例",{"type":"alert",Shift+Enter換行，Enter結束.panzheng2一個Container容器，并將其背景色設置為灰色panzheng3一個Container容器，讓其外層標簽使用pre標簽，并將字體顏色設置為灰色panzheng4一個Container容器，指定其外層類名為myClasspanzheng5一個包含四個面板的折疊布局示例，面板中隨意放置一些組件panzheng6有三組表單，分別為基本信息、高級信息、擴展信息，用一個折疊器來布局這三組表單panzheng7一個包含三個面板的折疊布局，當其中一組布局展開時其他布局關閉{"type":"collapse-group".panzhengpanzheng9一個包含“標題一”“標題二”兩個面板的折疊面板，禁用“標題二”面板panzhengpanzheng11一個包含“標題—”“標題二”兩個面板的折疊面板，隱藏“標題二”面板的圖標panzheng{"type":"form","title":".panzheng部分精調(diào)數(shù)據(jù)示例搜不到在愛速搭官網(wǎng)上提問：服務端API返回的數(shù)據(jù)格式不是很符合我的預期，應該怎么做?/amis/zh-CN/docs/index☆文檔組件樣式示例編輯器中Q務端API返回的數(shù)據(jù)格式不是很符合我的預期，應該怎么×輸入組件名稱開始介紹快速開始更新記錄常見問題概念配置與組件數(shù)據(jù)域與數(shù)據(jù)鏈模板數(shù)據(jù)映射表達式聯(lián)動事件動作行為癥什么是amisamis是一個低代碼前端框架，它使用JSON配作量，極大提升效率。為什么要做amis?相關段落▲所屬文檔API接口返回格式(重要)1.1.7相關段落▲所屬文檔API接口返回格式(重要)1.1.7types/api.mdAPI接口返回格式(重要)status:返回types/api.mdapi返回支持兩種格式components/chart.mdAPI接口返回格式(重要)error.code作為status、error.m