工业组态 + LLM ： 大模型技术引领传统工业软件创新与实践(下）

importChat, { Bubble, useMessages } from'@chatui/core';
<ChatrenderNavbar={renderNavbar} 
messages={messages}
renderMessageContent={renderMessageContent}
onSend={() => {}}
Composer={renderComposer}
/>;

// 如果在右侧，是用户输入的内容，使用 输入文本 + 技能类型做展示constrenderMessageContent= (msg) => {
if (position==='right') {
return (
<ReqBubblemsg={msg} />      );
    } elseif (position==='left') {
switch (type) {
case'code': return<ResCodeBubblemsg={msg} />case'script': return<ResScriptBubblemsg={msg} />case'app': return<ResAppBubblemsg={msg} />      }
    }
}

constvoidfn= ()=>{}
copilothub.register(Widget.chat,voidfn,{ stream:ture}}
copilothub.register(Widget.scripts,voidfn,{ stream:ture}}}
copilothub.register(Widget.svg,drawBySVG,{ stream:ture}}}
copilothub.register(Widget.appgen,createAPPByDSL,{ stream:ture}}}
copilothub.register(Widget.props,ModifyPropsByID,{ stream:ture}}}
copilothub.register(Widget.images,DrawMaterial,{ stream:ture}}}

copilothub.register(Widget.props,ModifyPropsByID,{ stream:ture}}}

defprops_prompt(input,ctx):
example='''example:
输入示例1：帮我把字体大小改成12输出示例1：{ "fontSize":"12"}
输入示例2：帮我把名称改成组件001，边框颜色改成红色输出示例2：{ "name":"组件001" , "borderC":"red"}
输入示例3：请将透明度修改为0.5，位置修改为x:100,y:200输出示例3：{ "opacity":0.5 , "x":100, "y":200}
输入示例4：背景颜色改为黄色输出示例4：{"bgColor":"yellow"}
'''exception=''' 异常处理: 如果用户想要修改的属性不再列表中，请返回:  {{ "error": "支持修改的属性包括：文字内容，长度、宽度、边框大小、边框颜色、透明的、隐藏、显示、文字颜色、文字内容、字体大小" }}
'''ret=f'''一个组件有如下属性。key表示属性英文名称,value表示属性中文名称,如果一个key对应多个多个中文名称，用|分割"name": "组件名称",
"content": "文字内容|文字|内容",
"w": "宽度 长度",
"h": "高度",
"x": "x位置",
"y": "y位置",
"z": "z位置",
"borderW":"边框大小 | 边框粗细",
"borderW":"边框",
"visible": "显示 true|隐藏 false",
"opacity": "透明度",
"borderC": "边框颜色",
"bgColor": "背景颜色",
"color": "文字颜色",
"fontSize": "字体大小 | 文字大小",
"textAlign": "文字水平对齐方式", //左对齐left 居中对齐middle 右对齐right"verticalAlign": "文字垂直对齐方式",  //上对齐top 居中对齐middle 下对齐bottom此外，系统包含一些上线文信息如下：{ctx} 
接下来我会输入一句话，用来修改组件对应属性的值返回结果格式为json,对应内容是 {{ "英文key": "修改的数值" }}
请不要返回除了json以外的其他任何内容用户输入内容为：{input}
给你一些参考示例:
        {example}
      {exception}
'''returnret{
w:100}

constresponse=awaitfetch(url, {
method: 'POST',
body: JSON.stringify(param),
headers: {
'Content-Type': 'application/json',
  },
});
constencode=newTextDecoder('utf-8');
constreader=response.body.getReader();
while (true) {
const { done, value } =awaitreader.read();
if (done) {
break;
  }
consttext=encode.decode(value);
//多通道LLM有不同的处理方式if (llm===LLM.OpenAI) {
raw+=text;
  } elseif (llm===LLM.TongYi) {
raw=text;
  }
}
console.log('raw:', raw);

//hub注册的属性修改对应的回调函数copilothub.register(Widget.props,ModifyPropsByID,{ stream:ture}}}
functionModifyPropsByID(props) {
try {
//MaliangEngine 获取当前界面选择的组件idconstid=MaliangEngine.firstSelectedObject.id;
// availableProps是通过culAvailableProps方法做容错// 里面做的事情包括 1：过滤不需要处理的prop, 2:处理模型返回json对象的容错 3:对比node props对应的数值类型，做转换constavailableProps=culAvailableProps(jsonObject, id);
//MaliangEngine 执行对应属性的修改window.MaliangEngine.editSingleNodeProps(props, id);
  } catch (e) {
console.log('modifyPrposByComponentsId error:', e, 'at:', id, 'props:', props);
thrownewError(e);
  }
}

copilothub.register(Widget.svg,drawBySVG,{ stream:ture}}}

defsvg_prompt(input):
ret=f""" Asafrontendengineer, youarerequiredtotranslateChineserequestsprovidedbyusersintoSVGcodeandreturntheresult.
YoumustclearlyspecifythetypeofshapeandensureitscompatibilitywiththeSVGversionorformatwhendrawingoneormorespecifiedshapes.
Thedefaultsizeoftheshapeshouldbe200*200anddefaultcolorisgray.
Responsesshouldbeasconciseaspossible, containingonlyoneSVGcodewithoutanyinstructions, explanations, orcomments. ThegeneratedcodeshouldhaveonlyonerootSVGnode,andshapeinit, 
notusetheStylepropertyandusetheViewboxpropertytodeterminethecontentoftherootelement.
Hereisuserrequests--- {input} ---"""returnret

defchat_prompt(input):
ret=f'你是一个工业知识小助手，根据用户的输入，回答工业领域的问题，用专业的语气回答用户的问题。回答请使用中文， 用户的在---符号中 --- {input} --- 'returnret

defscript_prompt(input):
ret=f""" You are a JavaScript engineer , only return code markdown format,onlyonefunction, functionnamecallhandle(data) , data表示输入值.
用户的代码需求是: --- {input} ---""" returnret

app_recommend_propmt='''你是一个推荐系统，我有一些应用模板，请根据输入，给我返回最匹配的应用模板，仅返回数据，不需要有多余信息模板列表,list= [
    {{'设备监控大屏': '工控、设备监控、大屏、展示'}},
    {{'成品仓库': '仓储、成品仓库、实时监测，保障成品的安全，避免盗窃、损毁'}},
    {{'汽车生产mini产线': 'mini产线，实时生成数据、状态查看'}},
    {{'原料仓库': '仓储管控，原材料库存'}},
    {{'磨装车间': '轴承、磨装车间、生产态势监控'}},
    {{'热处理车间': '热处理、生产情况的监控'}},
    {{'态势总览': '厂区生产态势、能源、监控'}},
    {{'煤粉工艺流程图': '煤粉制备、煤矿、工艺、生产流程，生产状态'}},
    {{'城市管网处理平台': '城市管理、城市管网、管道、监控'}},
    {{'污水处理': '污水处理状态监控'}},
    {{'发电流程': '水泥工厂中电力管控流程图'}},
    {{'PLC远程控制2': '远程对PLC控制'}},
    {{'电力接线图': '电路元件、连接、电气关系'}},
    {{'组态管道示例': '网、管、场景'}},
    {{'天然气态势监控': '厂区用气，能耗管理'}},
    {{'能源可视化': '能源消耗、能耗管理、节能、绿色'}},
    {{'重点设备对比': '设备、监控'}},
    {{'设备看板': '设备、看板'}},
    {{'厂区用气监控': '气体、能源消耗、能耗管理、节能、绿色'}},
    {{'厂区耗电监控': '电能、能源消耗、能耗管理、节能、绿色'}},
    {{'厂区耗水监控': '水耗、用水、能源消耗、能耗管理、节能、绿色'}},
    {{'PLC远程操作': 'PLC、远程、控制、反控'}},
    {{'产线andon屏': '生产线的状态、故障、产线稳定'}},
    {{'区域设备监控': '工位、产线、生成监控'}},
    {{'总装车间-四合一': '汽车行业、总装车间、生成'}},
    {{'总装车间-三合一': '汽车行业、总装车间、生成'}},
    {{'车间能源消耗': '工厂、车间、能源、消耗'}},
    {{'工控屏': '工业控制、数据展示'}},
    {{'焊装车间-工位图': '汽车行业、焊装车间、工位状况'}},
    {{'焊装车间-1024屏': '汽车行业、焊装车间、工位状况'}},
    {{'焊装车间-1280屏': '汽车行业、焊装车间、工位状况'}},
    {{'焊装车间纵览': '汽车行业、焊装车间、工位状况'}},
    {{'立体车库-亮色版': '汽车行业、立体车库'}},
    {{'立体车库-暗色版':'汽车行业、立体车库'}},
    ..... 更多模板从数据库中获取  ]
list中元素格式{'名称':'关键词1'}}
input为用户输入的模板要求, input= {input},
请从list中选出1-4个最匹配的模板作为返回返回的格式为名称组成的数组输入示例：给一个立体车库的模板输出示例：['立体车库-亮色版','立体车库-暗色版','成品仓库']
''';

// 智能应用推荐exportfunctionapp_recommend_base(appList,input) {
constsource=Array(appList.length).fill(0);
for (constciofinput) {
for (leti=0; i<appList.length; i++) {
constapp=appList[i];
conststr=JSON.stringify(app).replace('name', '').replace('key', '').replace("'", '');
conststrarr=str.split('');
for (constcoofstrarr) {
if (ci===co) source[i]++;
      }
    }
  }
consthigh= [];
constlow= [];
appList.forEach((item, i) => {
consts=source[i];
item.s=source[i];
if (s>0) {
high.push(item);
    } else {
low.push(item);
    }
  });
high.sort((a, b) =>b.s-a.s);
letret=high.slice(0, 4);
constlack=Math.max(0, 4-high.length);
// 抽签for (leti=0; i<lack; i++) {
constindex=Math.floor(Math.random() *low.length);
ret.push(low[index]);
deletelow[index];
  }
ret=ret.map((item) =>item?.name);
returnret;
}

urlpatterns= [
path('chat/', api.chat, name='chat'),
path('image/', api.image, name='image'),
path('svg/', api.svg, name='svg'),
path('script/', api.script, name='script'),
path('props/', api.props, name='props'),
path('qianw/', api.qianw, name='qianw'),
path('turbo/', api.turbo, name='turbo'),
path('davinci/', api.davinci, name='davinci'),
]

defresp(data,message=''): 
resp= {
'code': 200ifmessage==''else500,
'data': data,
'message':'succeed'ifmessage==''elsemessage,
'success': Trueifmessage==''elseFalse,
'description': ''    }
returnrespdefstream_response(response):
forchunkinresponse:
cho=chunk['choices'][0]
print(f'chunk[\'choices\']: {cho}')
# chunk_message = chunk['choices'][0]['delta']  # extract the messagechunk_message=chunk['choices'][0]  #extractthemessagetext=chunk['choices'][0]['text']
yieldtextdefchat(request):   
ifrequest.method=="POST":
# 获取 POST 请求中的数据req=json.loads(request.body)
input=req["prompt"]
else :
returnJsonResponse(resp('','prompt undefined'))
response=openai.Completion.create(
model="text-davinci-003",
prompt=prompt_builder.chat_prompt(input),
max_tokens=512,
temperature=0.8,
timeout=60,
stream=True,
    )
returnStreamingHttpResponse(stream_response(response), content_type='text/event-stream', status=200)
defchat(request):   
ifrequest.method=="POST":
# 获取 POST 请求中的数据req=json.loads(request.body)
input=req["prompt"]
else :
returnJsonResponse(resp('','prompt undefined'))
response=Generation.call(
model='qwen-v1',
prompt=prompt_builder.chat_prompt(input),
stream=True,
top_p=0.8)
returnStreamingHttpResponse(stream_response(response), content_type='text/event-stream', status=200)