大模型调用优化

This commit is contained in:
luke 2025-05-28 16:56:54 +08:00
parent 8c311bce87
commit df177dff58
2 changed files with 53 additions and 17 deletions

View File

@ -123,18 +123,22 @@ document.addEventListener("DOMContentLoaded", async () => {
llmResultContent.scrollTop = llmResultContent.scrollHeight;
}
// 支持多次提问、历史堆叠
// 新增/修正流式渲染 assistant 的方式
// 流式渲染智能助手
async function fetchLLMAnswer(question) {
if (!question || !question.trim()) return;
appendLLMMsg(question, "user");
llmResultContainer.classList.remove("hidden");
// 创建 assistant 消息卡片并持续写入
// 追加用户提问
const userItem = document.createElement("div");
userItem.className = "llm-msg-item llm-user";
userItem.innerHTML = `<span style="color:#2a63c8;font-weight:bold;">我:</span> ${question}`;
llmResultContent.appendChild(userItem);
llmResultContainer.classList.remove("hidden");
llmResultContent.scrollTop = llmResultContent.scrollHeight;
// 创建 assistant 消息卡片
const msgBox = document.createElement("div");
msgBox.className = "llm-msg-item llm-assistant";
msgBox.style.margin = "3px 0 7px 0";
msgBox.innerHTML = `<span style="color:#2453b5;">智能助手:</span> `;
llmResultContent.appendChild(msgBox);
llmResultContent.scrollTop = llmResultContent.scrollHeight;
@ -160,7 +164,10 @@ document.addEventListener("DOMContentLoaded", async () => {
let buffer = "";
let done = false;
let stop = false;
let answer = "";
let inThink = false;
let thinkStr = "";
let answerStr = "";
while (!done) {
const { value, done: readerDone } = await reader.read();
done = readerDone;
@ -174,15 +181,31 @@ document.addEventListener("DOMContentLoaded", async () => {
try {
const chunk = JSON.parse(data);
if (chunk.type === "textResponseChunk") {
let content = chunk.textResponse || "";
if (content.includes("<think>")) {
inThink = true;
content = content.replace("<think>", "");
}
if (content.includes("</think>")) {
inThink = false;
content = content.replace("</think>", "");
}
if (inThink) {
thinkStr += content.replace(/\n/g, "<br>");
} else if (chunk.textResponse) {
answerStr += content.replace(/\n/g, "<br>");
}
// 实时渲染,思考内容和正式回答分区块
msgBox.innerHTML =
(thinkStr
? `<div class="llm-think">模型思考过程:${thinkStr}</div>`
: "") +
`<span class="assistant-label">智能助手:</span>${answerStr}`;
llmResultContent.scrollTop = llmResultContent.scrollHeight;
if (chunk.close) {
stop = true;
break;
}
if (chunk.textResponse) {
answer += chunk.textResponse.replace(/\n/g, "<br>");
msgBox.innerHTML = `<span style="color:#2453b5;">智能助手:</span> ${answer}`;
llmResultContent.scrollTop = llmResultContent.scrollHeight;
}
}
} catch (e) {}
}
@ -190,7 +213,7 @@ document.addEventListener("DOMContentLoaded", async () => {
}
if (stop) break;
}
if (!answer) {
if (!thinkStr && !answerStr) {
msgBox.innerHTML += "无有效回答";
}
} catch (e) {
@ -198,6 +221,7 @@ document.addEventListener("DOMContentLoaded", async () => {
}
}
function log(...args) {
const version = chrome?.runtime?.getManifest?.().version || "dev";
console.log("[v" + version + "]", ...args);

View File

@ -375,7 +375,7 @@ h1 {
}
.llm-msg-item.llm-assistant {
color: #2453b5;
color: #233; /* 回答文本深灰色 */
background: #e7eefb;
border-radius: 5px;
margin: 3px 0 9px 0;
@ -384,11 +384,23 @@ h1 {
font-weight: 500;
border: 1px solid #b3cdfb;
}
/* 只让“智能助手:”四字加粗/蓝色需配合js输出span */
.llm-msg-item.llm-assistant .assistant-label {
/* 只让“智能助手:”四字蓝色,其它不变 */
.assistant-label {
color: #2560de;
font-weight: bold;
margin-right: 3px;
}
.llm-think {
background: #fffbe6;
color: #8d7a24;
font-size: 13px;
font-style: italic;
border-left: 3px solid #ffe16a;
border-radius: 5px;
margin-bottom: 6px;
padding: 7px 10px 7px 12px;
white-space: pre-wrap;
}