doc
This commit is contained in:
rex
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
|
||||
58
assets/css/chat.css
Normal file
58
assets/css/chat.css
Normal file
@@ -0,0 +1,58 @@
|
||||
#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;
|
||||
}
|
||||
|
||||
#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,3 +1,15 @@
|
||||
html {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#project-info-img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
|
||||
@@ -1,59 +1,91 @@
|
||||
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);
|
||||
startLoading(id);
|
||||
await mujianSdk.ai.chat.complete(
|
||||
query,
|
||||
(res) => {
|
||||
updateMessage(id, res.fullContent);
|
||||
if (res.isFinished) {
|
||||
stopLoading(id);
|
||||
}
|
||||
},
|
||||
stopController.signal,
|
||||
{
|
||||
parseContent: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
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();
|
||||
renderMessages(messages);
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
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();
|
||||
$("#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();
|
||||
console.log("query", query);
|
||||
if (!query) {
|
||||
return;
|
||||
}
|
||||
$("#input").val("");
|
||||
addMessage("user", query, Date.now());
|
||||
await send(query);
|
||||
});
|
||||
|
||||
$("#stop").click(stop);
|
||||
|
||||
(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="messages" class="max-h-[200px] overflow-y-auto"></div>
|
||||
|
||||
|
||||
<div id="message"></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