From b54b8d518fd1464e80270d8030eb1edbcbac0f14 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Mon, 15 Apr 2024 17:27:07 +0800 Subject: [PATCH] bugfix --- 3parties/README.md | 4 + bricks/llm_dialog.js | 186 +++++++++++++++++++++++++++++++------------ 2 files changed, 141 insertions(+), 49 deletions(-) diff --git a/3parties/README.md b/3parties/README.md index 6e85ae9..2bb0c47 100644 --- a/3parties/README.md +++ b/3parties/README.md @@ -5,4 +5,8 @@ https://cdn.jsdelivr.net/npm/xterm@4.19.0/lib/xterm.js https://vjs.zencdn.net/8.10.0/video.min.js # webrtc_adapter.js come from https://github.com/googlecodelabs/webrtc-web +# peerjs +come from https://github.com/peers/peerjs +https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.5.2/peerjs.min.js + diff --git a/bricks/llm_dialog.js b/bricks/llm_dialog.js index bd32cfc..be1e142 100644 --- a/bricks/llm_dialog.js +++ b/bricks/llm_dialog.js @@ -1,16 +1,127 @@ var bricks = window.bricks || {} +bricks.UserMsgBox = class extends bricks.HBox { + /* + { + "icon", + "prompt", + "msg_css" + } + */ + constructor(opts){ + super(opts); + var img = new bricks.Icon({rate:2,url:this.icon||bricks_resource('imgs/user.png')}); + var w = new bricks.MdWidget({mdtext:this.prompt}); + w.set_css(this.msg_css||'user_msg'); + this.add_widget(w); + this.add_widget(img); + } +} + +bricks.LlmMsgBox = class extends bricks.HBox { + /* + { + "model", + "mapi", + "url", + "icon", + "msg_css" + "response_mode" + "user_msg":{ + } + + "llm_msg":{ + } + } + */ + constructor(opts){ + super(opts); + var img = new bricks.Icon({rate:2,url:this.icon||bricks_resource('imgs/user.png')}); + this.w = new bricks.MdWidget({mdtext:' '}); + this.run = new bricks.Running({target:this}); + this.w.set_css(this.msg_css||'llm_msg'); + this.add_widget(img); + this.add_widget(this.w); + this.messages = []; + } + responsed(){ + this.run.dismiss(); + this.w.md_content = ''; + } + user_msg_format(){ + return this.user_msg||{role:'user',content:"${prompt}"} + } + llm_msg_format(){ + return this.llm_msg || {role:'assistant', content:"${content}"} + } + chunk_response(l){ + var d = JSON.parse(l); + if (! d.content || d.content == ''){ + return; + } + var txt = this.w.md_content + d.content; + this.w.set_content(txt); + this.bind('updated'); + } + chunk_ended(){ + var msg = this.llm_msg_format(); + var lmsg = bricks.apply_data(msg, {content:txt}); + this.messages.push(lmsg); + } + async set_prompt(prompt){ + var msg = this.user_msg_format(); + var umsg = bricks.apply_data(msg,{prompt:prompt}); + this.messages.push(umsg); + var d = { + messages:this.messages, + mapi:this.mapi, + prompt:prompt, + model:this.model, + } + // console.log('messages=', this.messages, 'msg=', msg, 'umsg=', umsg); + if (this.response_mode == 'stream') { + var hr = new bricks.HttpResponseStream(); + var resp = await hr.post(this.url, {params:d}); + this.responsed(); + await hr.handle_chunk(resp, this.chunk_response.bind(this)); + this.chunk_ended(); + } else { + var hj = new bricks.HttpJson() + var resp = await hj.post(this.url, {params:d}); + if (this.response_mode == 'sync'){ + this.responsed(); + this.w.set_content(resp.content); + var msg = this.llm_msg_format(); + var lmsg = bricks.apply_data(msg, resp); + this.messages.push(lmsg) + } else { + ; + } + } + } +} + bricks.LlmDialog = class extends bricks.VBox { /* { - "url": - "model", - "mapi": + "models":[ + { + "model": + "mapi": + "icon": + "url" + "css" + "user_msg":{ + } + + "llm_msg":{ + } + } + ] + "response_mode":"stream", "async","async" "user_msg_css" "user_icon", - "llm_icon" "title_ccs" - "llm_msg_css" } method: set_prompt(prompt) @@ -32,58 +143,35 @@ bricks.LlmDialog = class extends bricks.VBox { this.body = new bricks.VScrollPanel({height:'100%'}); filler.add_widget(this.body); this.add_widget(filler); - this.messages = []; } async set_prompt(prompt){ - var box = new bricks.HBox({width:'100%'}); - var img = new bricks.Icon({rate:2,url:this.user_icon||bricks_resource('imgs/user.png')}); - var w = new bricks.MdWidget({mdtext:prompt}); - w.set_css(this.user_msg_css||'user_msg'); - box.add_widget(w); - box.add_widget(img); + var box = new bricks.UserMsgBox({ + width:'100%', + icon:this.user_icon, + prompt:prompt, + msg_css:this.user_msg_css||'user_msg' + }); this.body.add_widget(box); + this.body.dom_element.scrollTop = this.body.dom_element.scrollHeight; await this.llm_request(prompt); } async llm_request(prompt){ - this.messages.push({ - role:'user', - content:prompt - }); - var d = { - messages:this.messages, - mapi:this.mapi, - prompt:prompt, - model:this.model, - } - var hr = new bricks.HttpResponseStream(); - var resp = await hr.post(this.url, {params:d}); - await hr.handle_chunk(resp, this.processLine.bind(this)); - this.messages.push({ - role:'assistant', - content:this.llm_msg_w.md_content - }); - this.llm_msg_w = null; - var d = { - model:this.model, - messages:this.messages - } - this.dispatch('llm_answered', d); - } - processLine(l){ - var d = JSON.parse(l); - if (!this.llm_msg_w) { - var box = new bricks.HBox({width:'100%'}); - var img = new bricks.Icon({rate:2,url:this.llm_icon||bricks_resource('imgs/llm.png')}); - this.llm_msg_w = new bricks.MdWidget({mdtext:d.content}); - this.llm_msg_w.set_css(this.llm_msg_css||'llm_msg'); - box.add_widget(img); - box.add_widget(this.llm_msg_w); + for (var i=0;i