Compare commits
2 Commits
f7bdb20332
...
2c543f689c
| Author | SHA1 | Date | |
|---|---|---|---|
|
2c543f689c | ||
|
|
f811bd6659 |
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
*.zip
|
||||
68
assets/css/chat.css
Normal file
68
assets/css/chat.css
Normal file
@@ -0,0 +1,68 @@
|
||||
/* 消息容器 */
|
||||
#messages {
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
height: calc(100% - 140px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 消息 */
|
||||
#messages div {
|
||||
border: 2px solid #000000;
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* 消息加载中 */
|
||||
#messages>.message.loading {
|
||||
border-color: #003cff;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
|
||||
/* 消息加载中动画 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
border-color: #6e90ff;
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #002ec5;
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: #6e90ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 用户消息 */
|
||||
#messages>.message.user {
|
||||
border-color: #c90000;
|
||||
}
|
||||
|
||||
/* AI消息 */
|
||||
#messages>.message.assistant {
|
||||
border-color: #06af2d;
|
||||
}
|
||||
|
||||
/* 输入容器 */
|
||||
#input-container {
|
||||
border-top: 2px solid #000000;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
#input {
|
||||
margin-bottom: 10px;
|
||||
height: 50px;
|
||||
width: 90%;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@@ -1,5 +1,17 @@
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#project-info-img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,59 +1,100 @@
|
||||
const mujianSdk = new window.MujianUMD.MujianSdk();
|
||||
const stopController = new AbortController();
|
||||
|
||||
async function chat(
|
||||
query,
|
||||
cb,
|
||||
) {
|
||||
let lastChunk = '';
|
||||
// 让缓冲区跨回调持久，防止分包导致的半行重复解析
|
||||
let buffer = '';
|
||||
await mujianSdk.ai.chat.complete(query, (data) => {
|
||||
|
||||
// data 可能是块状字符串；避免逐字符遍历
|
||||
buffer += data;
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
|
||||
for (const line of lines) {
|
||||
if (!line.startsWith('data: ')) continue;
|
||||
const payload = line.slice(6);
|
||||
try {
|
||||
const parsedData = JSON.parse(payload);
|
||||
if (parsedData?.isFinished) {
|
||||
// 结束标志，交给外层 await 完成
|
||||
continue;
|
||||
}
|
||||
|
||||
let content = parsedData?.choices?.[0]?.delta?.content;
|
||||
// if (content && typeof window !== 'undefined') {
|
||||
// const username = localStorage.getItem(USERNAME_KEY) || 'User';
|
||||
// content = content?.replace(new RegExp(FAKE_USERNAME, 'g'), username);
|
||||
// }
|
||||
|
||||
if (content !== undefined && content !== null) {
|
||||
if (content.length > 0) {
|
||||
lastChunk += content;
|
||||
cb && cb(lastChunk);
|
||||
}
|
||||
} else {
|
||||
console.error('data', payload);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('error', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// console.log('lastChunk', lastChunk);
|
||||
return lastChunk;
|
||||
// 发送消息。入参是用户输入
|
||||
async function send(query) {
|
||||
const id = Date.now();
|
||||
addMessage("assistant", "等待回复中...", id); // 添加一个占位的AI消息。用于后续刷返回文字
|
||||
startLoading(id); // 给消息添加loading状态
|
||||
await mujianSdk.ai.chat.complete( // 调用 mujian sdk 发送请求
|
||||
query,
|
||||
(res) => {
|
||||
updateMessage(id, res.fullContent); // 流式实时更新消息
|
||||
if (res.isFinished) { // 如果流式完成结束，则停止loading状态
|
||||
stopLoading(id); // 停止loading状态
|
||||
}
|
||||
},
|
||||
stopController.signal,
|
||||
{
|
||||
parseContent: true, // 让 sdk 只返回消息内容，不会返回其他字段
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// 停止发送消息
|
||||
function stop() {
|
||||
stopController.abort();
|
||||
}
|
||||
|
||||
mujianSdk.init().then(() => {
|
||||
chat('你好', (res) => {
|
||||
// console.log('res', res)
|
||||
$('#message').text(res);
|
||||
})
|
||||
});
|
||||
// 渲染所有消息
|
||||
async function renderAllMessages() {
|
||||
const messages = await mujianSdk.ai.chat.message.getAll(); // 通过 sdk 获取所有消息
|
||||
renderMessages(messages); // 渲染所有消息
|
||||
scrollToBottom(); // 滚动到底部
|
||||
}
|
||||
|
||||
// 更新消息。入参是消息id和消息内容
|
||||
function updateMessage(id, message) {
|
||||
if ($(`#message-assistant-${id}`).length === 0) { // 如果消息不存在，则返回
|
||||
return;
|
||||
}
|
||||
$(`#message-assistant-${id}`).text("assistant: " + message); // 更新消息内容
|
||||
scrollToBottom(); // 滚动到底部
|
||||
}
|
||||
|
||||
// 添加消息。入参是消息角色和消息内容
|
||||
function addMessage(role, message, id = null) {
|
||||
const _id = id || Date.now(); // 如果消息id不存在，则生成一个唯一id
|
||||
$("#messages").append(
|
||||
`<div id="message-${role}-${_id}" class="message ${role === "user" ? "user" : "assistant"}">${role}: ${message}</div>`, // 添加消息
|
||||
);
|
||||
}
|
||||
|
||||
function startLoading(id) {
|
||||
$(`#message-assistant-${id}`).addClass("loading");
|
||||
}
|
||||
|
||||
function stopLoading(id) {
|
||||
$(`#message-assistant-${id}`).removeClass("loading");
|
||||
}
|
||||
|
||||
function clearMessages() {
|
||||
$("#messages").empty();
|
||||
}
|
||||
|
||||
function scrollToBottom() {
|
||||
$("#messages").animate(
|
||||
{ scrollTop: $("#messages").prop("scrollHeight") },
|
||||
100,
|
||||
);
|
||||
}
|
||||
|
||||
// 渲染消息。入参是消息列表
|
||||
function renderMessages(messages) {
|
||||
// console.log("messages", messages);
|
||||
messages.forEach((message) => {
|
||||
// 添加消息
|
||||
addMessage(message.role, message.content, message.id);
|
||||
});
|
||||
}
|
||||
|
||||
// 发送消息。点击发送按钮时，获取用户输入，并发送消息
|
||||
$("#send").click(async () => {
|
||||
const query = $("#input").val(); // 获取用户输入
|
||||
if (!query) { // 如果用户输入为空，则返回
|
||||
return;
|
||||
}
|
||||
$("#input").val(""); // 清空用户输入
|
||||
addMessage("user", query, Date.now()); // 添加用户消息
|
||||
await send(query); // 发送消息
|
||||
});
|
||||
|
||||
$("#stop").click(stop); // 点击停止按钮时，停止发送消息
|
||||
|
||||
|
||||
// 初始化。初始化幕间官方SDK
|
||||
(async () => {
|
||||
await mujianSdk.init().then(async () => {
|
||||
await renderAllMessages(); // 渲染所有消息
|
||||
});
|
||||
})();
|
||||
|
||||
15
chat.html
15
chat.html
@@ -12,16 +12,22 @@
|
||||
|
||||
<!-- 你的 CSS 样式代码，都放在这里 -->
|
||||
<link rel="stylesheet" href="assets/css/index.css" />
|
||||
<link rel="stylesheet" href="assets/css/chat.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
<div id="message"></div>
|
||||
<div id="messages" class="max-h-[200px] overflow-y-auto"></div>
|
||||
|
||||
<div id="input-container">
|
||||
<textarea id="input" class="" ></textarea>
|
||||
<div class="flex-1">
|
||||
<button id="send" class="ui-button ui-widget ui-corner-all">发送</button>
|
||||
<button id="stop" class="ui-button ui-widget ui-corner-all">停止</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 幕间官方SDK -->
|
||||
<script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.35/dist/umd/index.js"></script>
|
||||
<script src="https://npm.onmicrosoft.cn/@mujian/js-sdk@0.0.6-beta.37/dist/umd/index.js"></script>
|
||||
<!-- 第三方库：JQuery - 主要用于提供便利地操作页面元素的函数 -->
|
||||
<script src="https://npm.onmicrosoft.cn/jquery@3.7.1/dist/jquery.min.js"></script>
|
||||
<!-- 第三方库：JQuery-UI - 主要用于提供基础的UI控件 -->
|
||||
@@ -31,6 +37,5 @@
|
||||
|
||||
<!-- 你的 JS 代码，都放在这里 -->
|
||||
<script src="assets/js/chat.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user