This commit is contained in:
yumoqing 2024-12-11 10:36:07 +08:00
parent 7fca12127f
commit b479461741
6 changed files with 205 additions and 82 deletions

View File

@ -55,6 +55,7 @@ bricks.Cols = class extends bricks.VBox {
}
async handle_click(rw, event){
event.stopPropagation();
var orev = null;
if (this.select_record){
orev = this.select_record;
@ -64,6 +65,8 @@ bricks.Cols = class extends bricks.VBox {
}
this.select_record = rw;
this.select_record.set_css('selected_record');
console.log('record data=', rw.user_data);
this.dispatch('record_click', rw.user_data);
}
async dataHandle(d){
var data = d.rows;
@ -77,6 +80,7 @@ bricks.Cols = class extends bricks.VBox {
for (var i=0;i<data.length;i++){
var d = data[i];
var w = await bricks.widgetBuild(this.record_view, this.main, d);
w.user_data = d;
w.bind('click', this.handle_click.bind(this, w));
w.set_attribute('data-page', page);
if (this.loader.is_max_page(page)){
@ -112,8 +116,8 @@ bricks.Cols = class extends bricks.VBox {
this.main = new bricks.DynamicColumn({
width:"100%",
col_cwidth:this.col_cwidth,
mobile_cols:this.mobile_cols,
mobile_cols:2});
mobile_cols:this.mobile_cols || 2
});
this.container.add_widget(this.main);
var d = await this.loader.loadData(p);
if (d){

View File

@ -90,6 +90,10 @@ hr {
padding: 4px;
}
.titlebar {
background-color: #d8d8c8;
}
.toppopup {
box-shadow: 10px 5px 10px #000, 0 -5px 5px #fff;
}

View File

@ -36,6 +36,7 @@ bricks.DynamicColumn = class extends bricks.Layout {
if (bricks.is_mobile() && width < height){
cols = this.mobile_cols;
cw = (width - (cols - 1) * gap) / cols;
console.log('====mobile==cols=', cols, '====');
} else {
if (this.col_cwidth){
cw = bricks.app.charsize * this.col_cwidth;

View File

@ -174,11 +174,18 @@ bricks.LlmModel = class extends bricks.JsWidget {
}
inputdata2uploaddata(data){
var d = data;
var fmt = this.opts.user_message_format;
if (fmt){
var umsg = bricks.apply_data(fmt, inputdata2dic(data));
this.messages.push(umsg);
}
if (data instanceof FormData){
d.append('model', this.opts.model)
d.append('modelinstanceid', this.opts.modelinstanceid)
d.append('modeltypeid', this.opts.modeltypeid)
d.append('messages', JSON.stringify(this.messages));
} else {
d.messages = JSON.stringify(this.messages);
d.model = this.opts.model;
d.modelinstanceid = this.opts.modelinstanceid;
d.modeltypeid = this.opts.modeltypeid;
@ -196,13 +203,6 @@ bricks.LlmModel = class extends bricks.JsWidget {
estimate_url:this.llmio.estimate_url,
output_view:this.opts.output_view});
this.llmio.o_w.add_widget(mout);
var fmt = this.opts.user_message_format || { role:'user', content:'${prompt}'};
var umsg = bricks.apply_data(fmt, inputdata2dic(data));
var d = {};
this.messages.push(umsg);
d.model = this.opts.model;
d.modelinstanceid = this.opts.modelinstanceid;
d.modeltypeid = this.opts.modeltypeid;
if (this.response_mode == 'stream' || this.response_mode == 'async') {
var d = this.inputdata2uploaddata(data);
var hr = new bricks.HttpResponseStream();
@ -262,6 +262,7 @@ bricks.LlmIO = class extends bricks.VBox {
options:
{
user_icon:
list_models_url:
input_fields:
input_view:
output_view:
@ -286,7 +287,21 @@ bricks.LlmIO = class extends bricks.VBox {
super(opts);
this.llmmodels = [];
this.title_w = new bricks.HBox({cheight:2});
this.i_w = new bricks.VBox({cheight:5});
this.i_w = new bricks.Icon({
rate:2,
url:bricks_resource('imgs/input.png'),
tip:'input data',
css:'clickable'
});
this.nm_w = new bricks.Icon({
rate:2,
url:bricks_resource('imgs/add.png'),
tip:'add new model',
css:'clickable'
});
this.title_w.add_widget(this.nm_w);
this.nm_w.bind('click', this.open_search_models.bind(this));
this.i_w.bind('click', this.open_input_widget.bind(this));
this.o_w = new bricks.Filler({overflow:'auto'});
this.add_widget(this.title_w);
this.add_widget(this.o_w);
@ -295,16 +310,126 @@ bricks.LlmIO = class extends bricks.VBox {
}
this.add_widget(this.i_w);
this.models.forEach( m =>{
if (this.textvoice){
m.textvoice = true;
m.tts_url = this.tts_url;
}
var lm = new bricks.LlmModel(this, m);
this.llmmodels.push(lm);
var tw = lm.render_title();
this.title_w.add_widget(tw);
this.show_added_model(m);
});
this.build_input();
}
show_added_model(m){
if (this.textvoice){
m.textvoice = true;
m.tts_url = this.tts_url;
}
var lm = new bricks.LlmModel(this, m);
this.llmmodels.push(lm);
var tw = lm.render_title();
this.title_w.add_widget(tw);
}
async open_search_models(event){
event.preventDefault();
event.stopPropagation();
var rect = this.showRectage();
var opts = {
title:"select model",
icon:bricks_resource('imgs/search.png'),
auto_destroy:true,
auto_open:true,
auto_dismiss:false,
movable:true,
top:rect.top + 'px',
left:rect.left + 'px',
width: rect.right - rect.left + 'px',
height: rect.bottom - rect.top + 'px'
}
var w = new bricks.PopupWindow(opts);
var sopts = {
data_url:this.list_models_url,
data_params:{
mii:this.models[0].modelinstanceid,
mti:this.models[0].modeltypeid
},
data_method:'POST',
col_cwidth: 24,
record_view:{
widgettype:"VBox",
options:{
cheight:20,
css:"card"
},
subwidgets:[
{
widgettype:"Title4",
options:{
text:"${name}"
}
},
{
widgettype:"Filler",
options:{
css:"scroll"
},
subwidgets:[
{
widgettype:"VBox",
options:{
css:"subcard"
},
subwidgets:[
{
widgettype:"Text",
options:{
text:"模型描述:${description}",
wrap:true
}
},
{
widgettype:"Text",
options:{
text:"启用日期:${enable_date}"
}
}
]
}
]
}
]
}
};
var cols = new bricks.Cols(sopts);
cols.bind('record_click', this.add_new_model.bind(this));
cols.bind('record_click', w.dismiss.bind(w));
w.add_widget(cols);
w.open();
}
async add_new_model(event){
event.preventDefault();
event.stopPropagation();
this.models.push(event.params);
this.show_added_model(event.params);
}
async open_input_widget(event){
event.preventDefault();
event.stopPropagation();
var rect = this.showRectage();
var opts = {
title:"input data",
icon:bricks_resource('imgs/input.png'),
auto_destroy:true,
auto_open:true,
auto_dismiss:false,
movable:true,
top:rect.top + 'px',
left:rect.left + 'px',
width: rect.right - rect.left + 'px',
height: rect.bottom - rect.top + 'px'
}
var w = new bricks.PopupWindow(opts);
var fopts = {
fields:this.input_fields
}
var fw = new bricks.Form(fopts);
fw.bind('submit', this.handle_input.bind(this));
fw.bind('submit', w.destroy.bind(w));
w.add_widget(fw);
w.open();
}
async handle_input(event){
var params = event.params;
@ -320,9 +445,6 @@ bricks.LlmIO = class extends bricks.VBox {
async show_input(params){
var box = new bricks.HBox({width:'100%'});
var data = inputdata2dic(params);
if (data.prompt){
data.prompt = bricks.escapeSpecialChars(data.prompt);
}
console.log('data=', data, 'input_view=', this.input_view);
var w = await bricks.widgetBuild(this.input_view, this.o_w, data);
w.set_css(this.msg_css||'user_msg');
@ -333,14 +455,6 @@ bricks.LlmIO = class extends bricks.VBox {
box.add_widget(img);
this.o_w.add_widget(box);
}
build_input(){
var fopts = {
fields:this.input_fields
};
var fw = new bricks.InlineForm(fopts);
fw.bind('submit', this.handle_input.bind(this));
this.i_w.add_widget(fw);
}
}
bricks.Factory.register('LlmIO', bricks.LlmIO);

View File

@ -10,8 +10,10 @@ bricks.Popup = class extends bricks.VBox {
auto_dismiss:boolean
auto_destroy:boolean
movable:boolean
dismiss_event:
resizable:boolean
modal:boolean
content:{}
*/
constructor(opts){
super(opts);
@ -21,11 +23,10 @@ bricks.Popup = class extends bricks.VBox {
this.opened = false;
this.set_css('popup');
this.bring_to_top();
this.moving_w = this;
this.content_box = new bricks.VBox({width:'100%', height:'100%'});
this.content_box.set_style('display', 'flex');
this.content_box.set_style('overflow', 'auto');
this.content_box = new bricks.VBox({height:'100%',width:'100%'});
super.add_widget(this.content_box);
this.content_w = this.content_box;
this.moving_w = this;
if (this.auto_dismiss){
bricks.Body.bind('click', this.click_outside.bind(this));
}
@ -41,6 +42,22 @@ bricks.Popup = class extends bricks.VBox {
this.set_style('display', 'none');
bricks.Body.add_widget(this);
this.bind('click', this.bring_to_top.bind(this));
if (this.auto_open){
this.open();
}
if (this.content){
this.bind('opened', this.load_content.bind(this))
}
}
async load_content(){
var w = bricks.widgetBuild(this.content, this);
if (w){
if (this.content.dismiss_event){
w.bind(this.content.dismiss_event, this.distroy.bind(this));
}
this.content_w.clear_widgets();
this.content_w.add_widget(w);
}
}
bring_to_top(){
if (this == bricks.app.toppopup){
@ -50,6 +67,7 @@ bricks.Popup = class extends bricks.VBox {
bricks.app.toppopup.set_css('toppopup', true);
this.zindex = bricks.app.new_zindex();
this.set_style('zIndex', this.zindex);
console.log('this.zindex=', this.zindex, 'app.zindex=', bricks.app.zindex);
this.set_css('toppopup');
bricks.app.toppopup = this;
}
@ -249,20 +267,6 @@ bricks.Popup = class extends bricks.VBox {
this.dismiss();
}
}
add_widget(w, index){
this.content_box.add_widget(w, index);
if (this.auto_open){
this.open();
} else {
// console.log('auto_open is ', this.auto_open, ' so not auto open it', this.opts, w);
}
}
remove_widget(w){
this.content_box.remove_widget(w);
}
clear_widgets(){
this.content_box.clear_widgets();
}
open(){
var rect, w, h;
if (this.opened) {
@ -291,7 +295,7 @@ bricks.Popup = class extends bricks.VBox {
if (this.opts.modal && this.opts.widget){
this.target_w.disabled(true);
}
this.content_box.disabled(false);
this.bring_to_top();
}
dismiss(){
if (! this.opened) return;
@ -319,6 +323,15 @@ bricks.Popup = class extends bricks.VBox {
this.parent = null;
}
}
add_widget(w, i){
return this.content_box.add_widget(w, i);
}
remove_widget(w){
return this.content_box.remove_widget(w);
}
clear_widgets(){
return this.content_box.clear_widgets();
}
}
bricks.PopupWindow = class extends bricks.Popup {
@ -333,33 +346,24 @@ bricks.PopupWindow = class extends bricks.Popup {
constructor(opts){
opts.moviable = true;
opts.resizable = true;
opts.auto_open = true;
var ao = opts.auto_open;
opts.auto_open = false
opts.auto_dismiss = false;
opts.auto_destroy = false;
super(opts);
this.title_bar = new bricks.HBox({cheight:1.5, width:'100%'});
this.title_bar.set_css('titlebar')
this.auto_open = ao;
this.title_bar = new bricks.HBox({css:'titlebar', cheight:2, width:'100%'});
this.moving_w = this.title_bar;
this.parent_add_widget(this.title_bar);
super.add_widget(this.title_bar);
this.build_title_bar();
var filler = new bricks.Filler({});
this.parent_add_widget(filler)
super.add_widget(filler)
this.content_w = new bricks.Layout({});
this.content_w.set_css('flexbox');
this.auto_open = true;
filler.add_widget(this.content_w);
// console.log(this.auto_open, 'opts=', opts);
}
async load_content(){
var dic = {
"widgettype":"urlwidget",
"options":{
"params":this.params,
"url":this.url
}
if (this.auto_open){
this.open();
}
var w = bricks.widgetBuild(dic, bricks.Body);
this.add_widget(w);
}
build_title_bar(){
var icon = new bricks.Icon({
@ -406,22 +410,6 @@ bricks.PopupWindow = class extends bricks.Popup {
this.title_w.set_text(txt);
}
}
parent_add_widget(w, index){
var ao = this.autho_open;
this.auto_open = false;
super.add_widget(w, index);
this.auto_open = ao;
}
add_widget(w, index){
// console.log('auto_open=', this.auto_open);
this.content_w.add_widget(w, index);
if (this.auto_open){
this.open();
} else {
this.open();
// console.log('auto_open is false, not auto open');
}
}
open(){
var f = bricks.app.docks.find(o => {
if (o == this){
@ -439,6 +427,15 @@ bricks.PopupWindow = class extends bricks.Popup {
}
super.dismiss()
}
add_widget(w, i){
return this.content_w.add_widget(w, i);
}
remove_widget(w){
return this.content_w.remove_widget(w);
}
clear_widgets(){
return this.content_w.clear_widgets();
}
}
bricks.Dock = class extends bricks.HBox {
constructor(opts){

View File

@ -5,6 +5,9 @@ var inputdata2dic = function(data){
var d = {}
for (let k of data.keys()){
var x = data.get(k);
if (k == 'prompt'){
x = bricks.escapeSpecialChars(x);
}
d[k] = x;
}
return d;