-
Notifications
You must be signed in to change notification settings - Fork 2
/
main.aardio
163 lines (150 loc) · 4.62 KB
/
main.aardio
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
import win.ui;
/*DSG{{*/
var winform = win.form(text="ChatGPT 桌面助理";right=757;bottom=467)
winform.add()
/*}}*/
import web.view;
var wb = web.view(winform);
wb.html = /**
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>WebView2</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://lib.baomitu.com/react/17.0.2/umd/react.development.js"></script>
<script src="https://lib.baomitu.com/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://lib.baomitu.com/chatui-core/2.4.2/index.min.js"></script>
<link rel="stylesheet" href="https://lib.baomitu.com/chatui-core/2.4.2/index.min.css">
<script src="https://lib.baomitu.com/babel-standalone/7.18.13/babel.min.js"></script>
<style type="text/css">html,body,#app{height:100%}</style>
</head>
<body>
<script type="text/babel">
const { useState,useEffect,useCallback,useRef } = React;
const { default: Chat, Bubble, useMessages, Image } = ChatUI
const schema = 'http://'
const basePath = 'localhost:4000';
const baseUrl = schema + basePath + '/chat-gpt';
let sessionMsg = "";
const App = () => {
const [msgID, setMsgID] = useState("");
const [result, setResult] = useState("");
let msg = "";
const { messages, appendMsg, setTyping, updateMsg } = useMessages([{
type: 'text',
content: { text: '主人好，我是 ChatGPT 智能助理，你的贴心小助手~' },
user: { avatar: 'https://gitee.com/xiaowu_wang/pic/raw/master/1680245769332.jpg' },
}]);
useEffect(() => {
// 监听result的改变，来实现打字机效果
updateMsg(msgID, {
type: "text",
content: { text: result }
});
}, [result]);
const socket = new WebSocket('ws://' + basePath);
// 监听连接打开事件
socket.addEventListener('open', (event) => {
console.log('WebSocket 连接已打开');
});
// 监听收到消息事件
socket.addEventListener('message', (event) => {
console.log('收到服务器消息:', event.data);
// 处理sessionMsg，保证上下文
if(event.data === '[DONE]'){
// 说明是结尾
sessionMsg += '\n';
}else {
msg += event.data;
setResult(msg);
sessionMsg += event.data;
}
});
// 监听连接关闭事件
socket.addEventListener('close', (event) => {
console.log('WebSocket 连接已关闭');
});
// 获取当前时间戳
function nanoid() {
return new Date().getTime().toString();
}
function handleSend(type, val) {
// 先设置一个唯一的msgID
const msgID = nanoid();
setMsgID(msgID);
// 重置msg
msg = "";
// 重置对话框
setResult(msg);
if (type === 'text' && val.trim()) {
appendMsg({
type: 'text',
content: { text: val },
position: 'right',
});
setTyping(true);
// 判断是否以图片二字开头，然后以:进行分割取后半部分
if (val.startsWith("图片")) {
val = val.substr(3)
// 定义url
let url = baseUrl + '/imagesGenerations'
$.ajax({
url: url,
type: 'POST',
data: {
"prompt": val
},
success: function(response) {
console.log("请求成功，返回数据为：" + response);
appendMsg({
type: 'image',
content: { picUrl: response.data },
})
},
error: function(xhr, status, error) {
console.log("请求失败，错误信息为：" + error);
}
});
}else {
// 处理sessionMsg，保证上下文;
sessionMsg += "你: " + val + "\nAI:";
appendMsg({
_id: msgID,
type: 'text',
content: { text: result },
})
socket.send(sessionMsg);
}
}
}
function renderMessageContent(msg) {
const { type, content } = msg;
// 根据消息类型来渲染
switch (type) {
case 'text':
return <Bubble content={content.text} />;
case 'image':
return (
<Bubble type="image">
<img src={content.picUrl} alt="" />
</Bubble>
);
default:
return null;
}
}
return (
<Chat
navbar={{ title: '' }}
messages={messages}
renderMessageContent={renderMessageContent}
onSend={handleSend}
/>
);
};
ReactDOM.render(<App />, document.querySelector('#app'));
</script>
<div id="app"></div>
**/
winform.show();
win.loopMessage();