zhangqi
/
knowledge
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

内容进行markdown展示

pull/23/head
zq 2 months ago
parent
04728c2c80
commit
e24e2378d4
5 changed files with 1336 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      view/css/deepSeek.css
  2. 33
      view/css/default.min.css
  3. 1202
      view/js/highlight.min.js
  4. 6
      view/js/marked.min.js
  5. 72
      view/templates/index/deepSeek.html

15
view/css/deepSeek.css
View File

@ -32,7 +32,19 @@ body {
background-color: #e6f2ff; background-color: #e6f2ff;
border-top-left-radius: 0; border-top-left-radius: 0;
} }
.loader {
border: 6px solid #f3f3f3; /* Light grey */
border-top: 6px solid #3498db; /* Blue */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 左侧边栏 */ /* 左侧边栏 */
.sidebar { .sidebar {
width: 260px; width: 260px;
@ -40,6 +52,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
transition: all .5s;
} }
.sidebar-header { .sidebar-header {
@ -75,7 +88,6 @@ body {
width: 60px; width: 60px;
height: auto; height: auto;
} }
.expand-silder { .expand-silder {
display: none; display: none;
opacity: 0; opacity: 0;
@ -127,6 +139,7 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
overflow-y: auto;
} }
.new-chat-btn { .new-chat-btn {

33
view/css/default.min.css
View File

@ -0,0 +1,33 @@
/*!
Theme: Default
Description: Original highlight.js style
Author: (c) Ivan Sagalaev <maniac@softwaremaniacs.org>
Maintainer: @highlightjs/core-team
Website: https://highlightjs.org/
License: see project LICENSE
Touched: 2021
*/
pre code.hljs {
display: block;overflow - x: auto;padding: 1 em
}
code.hljs {
padding: 3 px 5 px
}.hljs {
background: #f3f3f3;color: #444}.hljs-comment{color:# 697070
}.hljs - punctuation, .hljs - tag {
color: #444a}.hljs-tag .hljs-attr,.hljs-tag .hljs-name{color:# 444
}.hljs - attribute, .hljs - doctag, .hljs - keyword, .hljs - meta.hljs - keyword, .hljs - name, .hljs - selector - tag {
font - weight: 700
}.hljs - deletion, .hljs - number, .hljs - quote, .hljs - selector - class, .hljs - selector - id, .hljs - string, .hljs - template - tag, .hljs - type {
color: #800}.hljs-section,.hljs-title{color:# 800;font - weight: 700
}.hljs - link, .hljs - operator, .hljs - regexp, .hljs - selector - attr, .hljs - selector - pseudo, .hljs - symbol, .hljs - template - variable, .hljs - variable {
color: #ab5656
}.hljs - literal {
color: #695}.hljs-addition,.hljs-built_in,.hljs-bullet,.hljs-code{color:# 397300
}.hljs - meta {
color: #1f7199}.hljs-meta .hljs-string{color:# 38 a
}.hljs - emphasis {
font - style: italic
}.hljs - strong {
font - weight: 700
}

1202
view/js/highlight.min.js
View File

File diff suppressed because one or more lines are too long

6
view/js/marked.min.js
View File

File diff suppressed because one or more lines are too long

72
view/templates/index/deepSeek.html
View File

@ -5,10 +5,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DeepSeek Chat</title> <title>DeepSeek Chat</title>
<link rel="stylesheet" href="{$smarty.const.CSS_URL}/css/common.css?v={$smarty.const.CSS_JS_VERSION}"> <link rel="stylesheet" href="../../css/common.css?v={$smarty.const.CSS_JS_VERSION}">
<link rel="stylesheet" href="../../css/main.css?v={$smarty.const.CSS_JS_VERSION}"> <link rel="stylesheet" href="../../css/main.css?v={$smarty.const.CSS_JS_VERSION}">
<link rel="stylesheet" href="../../css/deepSeek.css?v={$smarty.const.CSS_JS_VERSION}"> <link rel="stylesheet" href="../../css/deepSeek.css?v={$smarty.const.CSS_JS_VERSION}">
<link rel="stylesheet"
href="../../css/default.min.css">
<script src="../../js/jquery-3.6.0.min.js" type="text/javascript"></script> <script src="../../js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="../../js/marked.min.js"></script>
<!-- 可选样式 -->
<script src="../../js/highlight.min.js"></script>
</head> </head>
<body> <body>
@ -58,7 +64,7 @@
</div> </div>
</div> </div>
<div class="expand-silder"> <div class="expand-silder">
<div class="ds-icon-box"> <div class="ds-icon-box" title="打开边栏">
<div class="ds-icon" style="font-size: 44px; width: 44px; height: 44px; cursor: pointer;"><svg <div class="ds-icon" style="font-size: 44px; width: 44px; height: 44px; cursor: pointer;"><svg
viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"> xmlns:xlink="http://www.w3.org/1999/xlink">
@ -67,11 +73,11 @@
fill-rule="nonzero" fill="#4D6BFE"></path> fill-rule="nonzero" fill="#4D6BFE"></path>
</svg></div> </svg></div>
</div> </div>
<div id="openMenu"> <div id="openMenu" title="打开边栏">
<img src="../../images/expand.svg" alt=""> <img src="../../images/expand.svg" alt="">
</div> </div>
<div class="newChatBtn"> <div class="newChatBtn" title="开启新对话">
<img src="../../images/addNewBtn.svg" alt=""> <img src="../../images/addNewBtn.svg" alt="">
</div> </div>
</div> </div>
@ -109,7 +115,8 @@
<div class="content-header" id="currentChatTitle">新对话</div> <div class="content-header" id="currentChatTitle">新对话</div>
<div class="content-body"> <div class="content-body">
<!-- 生成的正文内容 --> <!-- 生成的正文内容 -->
<div class="content-top chat-container" id="chatContainer"> <!-- <div class="loader" id="loader"></div> -->
<div class="content-top chat-container ds-markdown ds-markdown--block" id="chatContainer">
<div class="welcome-message"> <div class="welcome-message">
<p>欢迎使用DeepSeek Chat！开始一个新的对话吧。</p> <p>欢迎使用DeepSeek Chat！开始一个新的对话吧。</p>
</div> </div>
@ -124,6 +131,8 @@
<div class="content-item">多酚类物质可提高胰岛素敏感性，辅助血糖管理。</div> <div class="content-item">多酚类物质可提高胰岛素敏感性，辅助血糖管理。</div>
</div> --> </div> -->
</div> </div>
</div>
<div class="_88681e8 newChatBtn"> <div class="_88681e8 newChatBtn">
<div class="_217e214"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" <div class="_217e214"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -138,8 +147,6 @@
fill="currentColor"></path> fill="currentColor"></path>
</svg><span>开启新对话</span></div> </svg><span>开启新对话</span></div>
</div> </div>
</div>
<!-- <div class="content-note"> <!-- <div class="content-note">
注意事项<br> 注意事项<br>
DeepSeek 发送消息 DeepSeek 发送消息
@ -156,7 +163,8 @@
class="ds-button ds-button--primary ds-button--filled ds-button--rect ds-button--m _3172d9f" class="ds-button ds-button--primary ds-button--filled ds-button--rect ds-button--m _3172d9f"
tabindex="0" tabindex="0"
style="--ds-button-color: #fff; --button-text-color: #4c4c4c; --button-border-color: rgba(0, 0, 0, 0.12); --ds-button-hover-color: #E0E4ED;"> style="--ds-button-color: #fff; --button-text-color: #4c4c4c; --button-border-color: rgba(0, 0, 0, 0.12); --ds-button-hover-color: #E0E4ED;">
<div class="ds-button__icon"><span style="transition: none; transform: rotate(0deg);"> <div class="ds-button__icon"><span
style="transition: none; transform: rotate(0deg);">
<div class="ds-icon" <div class="ds-icon"
style="font-size: 19px; width: 19px; height: 19px; color: rgb(76, 76, 76);"> style="font-size: 19px; width: 19px; height: 19px; color: rgb(76, 76, 76);">
<img src="../../images/btnIcon1.svg" alt=""> <img src="../../images/btnIcon1.svg" alt="">
@ -167,7 +175,8 @@
class="ds-button ds-button--primary ds-button--filled ds-button--rect ds-button--m _3172d9f" class="ds-button ds-button--primary ds-button--filled ds-button--rect ds-button--m _3172d9f"
style="--ds-button-color: #fff; --button-text-color: #4c4c4c; --button-border-color: rgba(0, 0, 0, 0.12); --ds-button-hover-color: #E0E4ED;" style="--ds-button-color: #fff; --button-text-color: #4c4c4c; --button-border-color: rgba(0, 0, 0, 0.12); --ds-button-hover-color: #E0E4ED;"
tabindex="0"> tabindex="0">
<div class="ds-button__icon"><span style="transition: none; transform: rotate(0deg);"> <div class="ds-button__icon"><span
style="transition: none; transform: rotate(0deg);">
<div class="ds-icon" <div class="ds-icon"
style="font-size: 17px; width: 17px; height: 17px; color: rgb(76, 76, 76);"> style="font-size: 17px; width: 17px; height: 17px; color: rgb(76, 76, 76);">
<img src="../../images/btnIcon2.svg" alt=""> <img src="../../images/btnIcon2.svg" alt="">
@ -177,7 +186,8 @@
</div> </div>
<div class="bf38813a"> <div class="bf38813a">
<div class="f02f0e25"> <div class="f02f0e25">
<div class="ds-icon" title="" style="font-size: 23px; width: 23px; height: 23px;"> <div class="ds-icon" title=""
style="font-size: 23px; width: 23px; height: 23px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20" fill="none"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 20" fill="none">
<path <path
d="M7 20c-1.856-.002-3.635-.7-4.947-1.94C.74 16.819.003 15.137 0 13.383V4.828a4.536 4.536 0 0 1 .365-1.843 4.75 4.75 0 0 1 1.087-1.567A5.065 5.065 0 0 1 3.096.368a5.293 5.293 0 0 1 3.888 0c.616.244 1.174.6 1.643 1.05.469.45.839.982 1.088 1.567.25.586.373 1.212.364 1.843v8.555a2.837 2.837 0 0 1-.92 2.027A3.174 3.174 0 0 1 7 16.245c-.807 0-1.582-.3-2.158-.835a2.837 2.837 0 0 1-.92-2.027v-6.22a1.119 1.119 0 1 1 2.237 0v6.22a.777.777 0 0 0 .256.547.868.868 0 0 0 .585.224c.219 0 .429-.08.586-.224a.777.777 0 0 0 .256-.546V4.828A2.522 2.522 0 0 0 7.643 3.8a2.64 2.64 0 0 0-.604-.876 2.816 2.816 0 0 0-.915-.587 2.943 2.943 0 0 0-2.168 0 2.816 2.816 0 0 0-.916.587 2.64 2.64 0 0 0-.604.876 2.522 2.522 0 0 0-.198 1.028v8.555c0 1.194.501 2.339 1.394 3.183A4.906 4.906 0 0 0 7 17.885a4.906 4.906 0 0 0 3.367-1.319 4.382 4.382 0 0 0 1.395-3.183v-6.22a1.119 1.119 0 0 1 2.237 0v6.22c-.002 1.754-.74 3.436-2.052 4.677C10.635 19.3 8.856 19.998 7 20z" d="M7 20c-1.856-.002-3.635-.7-4.947-1.94C.74 16.819.003 15.137 0 13.383V4.828a4.536 4.536 0 0 1 .365-1.843 4.75 4.75 0 0 1 1.087-1.567A5.065 5.065 0 0 1 3.096.368a5.293 5.293 0 0 1 3.888 0c.616.244 1.174.6 1.643 1.05.469.45.839.982 1.088 1.567.25.586.373 1.212.364 1.843v8.555a2.837 2.837 0 0 1-.92 2.027A3.174 3.174 0 0 1 7 16.245c-.807 0-1.582-.3-2.158-.835a2.837 2.837 0 0 1-.92-2.027v-6.22a1.119 1.119 0 1 1 2.237 0v6.22a.777.777 0 0 0 .256.547.868.868 0 0 0 .585.224c.219 0 .429-.08.586-.224a.777.777 0 0 0 .256-.546V4.828A2.522 2.522 0 0 0 7.643 3.8a2.64 2.64 0 0 0-.604-.876 2.816 2.816 0 0 0-.915-.587 2.943 2.943 0 0 0-2.168 0 2.816 2.816 0 0 0-.916.587 2.64 2.64 0 0 0-.604.876 2.522 2.522 0 0 0-.198 1.028v8.555c0 1.194.501 2.339 1.394 3.183A4.906 4.906 0 0 0 7 17.885a4.906 4.906 0 0 0 3.367-1.319 4.382 4.382 0 0 0 1.395-3.183v-6.22a1.119 1.119 0 0 1 2.237 0v6.22c-.002 1.754-.74 3.436-2.052 4.677C10.635 19.3 8.856 19.998 7 20z"
@ -214,6 +224,8 @@
// alert('创建新对话'); // alert('创建新对话');
// }); // });
$(document).ready(function () { $(document).ready(function () {
var loadFlag = false;
// 对话数据存储 // 对话数据存储
let conversations = { let conversations = {
// 示例数据 // 示例数据
@ -268,9 +280,16 @@
// 侧边栏状态 // 侧边栏状态
let sidebarCollapsed = false; let sidebarCollapsed = false;
marked.setOptions({
highlight: function (code, lang) {
if (hljs.getLanguage(lang)) {
return hljs.highlight(lang, code).value;
}
return hljs.highlightAuto(code).value;
}
});
// 切换侧边栏 // 切换侧边栏
function toggleSidebar() { function toggleSidebar() {
console.log('====');
sidebarCollapsed = !sidebarCollapsed; sidebarCollapsed = !sidebarCollapsed;
$('#sidebar').toggleClass('collapsed', sidebarCollapsed); $('#sidebar').toggleClass('collapsed', sidebarCollapsed);
@ -291,7 +310,7 @@
// 保存状态到本地存储 // 保存状态到本地存储
localStorage.setItem('sidebarCollapsed', sidebarCollapsed); localStorage.setItem('sidebarCollapsed', sidebarCollapsed);
} }
$('#openMenu').on('click', function () { $('#openMenu, .ds-icon-box').on('click', function () {
// sidebarCollapsed = !sidebarCollapsed; // sidebarCollapsed = !sidebarCollapsed;
// $('#sidebar').toggleClass('collapsed', sidebarCollapsed); // $('#sidebar').toggleClass('collapsed', sidebarCollapsed);
toggleSidebar() toggleSidebar()
@ -474,6 +493,7 @@
var outputEl = document.getElementById('chatContainer'); var outputEl = document.getElementById('chatContainer');
$('#sendBtn').click(function () { $('#sendBtn').click(function () {
loadFlag = true; //开启思考
// debugger // debugger
const message = $('#messageInput').val().trim(); const message = $('#messageInput').val().trim();
if (!message) return; if (!message) return;
@ -509,7 +529,7 @@
saveConversations(); saveConversations();
// renderChat(currentConversationId); // renderChat(currentConversationId);
} }
console.log(currentConversationId,'currentConversationId=====currentConversationId'); // console.log(currentConversationId,'currentConversationId=====currentConversationId');
fetchStream() fetchStream()
// startStream() // startStream()
@ -553,7 +573,7 @@
const message = $('#messageInput').val().trim(); const message = $('#messageInput').val().trim();
renderMessage(message, "user"); renderMessage(message, "user");
var aiMessageDiv = renderMessage("", "assistant", true); var aiMessageDiv = renderMessage("", "assistant", true);
console.log(aiMessageDiv, 'aiMessageDiv---'); // console.log(aiMessageDiv, 'aiMessageDiv---');
document.getElementById("messageInput").value = ""; // 清空输入框 document.getElementById("messageInput").value = ""; // 清空输入框
const response = await fetch('http://192.168.31.74:26000/api/stream', { const response = await fetch('http://192.168.31.74:26000/api/stream', {
method: 'POST', method: 'POST',
@ -568,6 +588,9 @@
renderMessage("请求失败，请重试", "assistant"); renderMessage("请求失败，请重试", "assistant");
return; return;
} }
if (!response.body) {
throw new Error('可读流不可用');
}
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder(); const decoder = new TextDecoder();
let aiResponse = ""; let aiResponse = "";
@ -580,7 +603,15 @@
const chunk = decoder.decode(value); const chunk = decoder.decode(value);
console.log(chunk, 'chunk----'); console.log(chunk, 'chunk----');
aiResponse += chunk; aiResponse += chunk;
aiMessageDiv.textContent = aiResponse; // 流式更新 if (aiResponse.includes('</think>')) {
aiResponse = ''
loadFlag = false;
}
if (!loadFlag) {
// aiMessageDiv.textContent = aiResponse; // 流式更新
aiMessageDiv.innerHTML = marked.parse(aiResponse);; // 流式更新
}
console.log($('.content-body'),'9898');
aiMessageDiv.scrollIntoView({ aiMessageDiv.scrollIntoView({
behavior: "smooth" behavior: "smooth"
}); });
@ -598,13 +629,24 @@
function renderMessage(content, role, isStreaming = false) { function renderMessage(content, role, isStreaming = false) {
const chatContainer = document.getElementById("chatContainer"); const chatContainer = document.getElementById("chatContainer");
const messageDiv = document.createElement("div"); const messageDiv = document.createElement("div");
const loaderDiv = document.createElement("div");
loaderDiv.className = 'loader'
messageDiv.className = messageDiv.className =
`message ${role === 'user' ? 'user-message' : 'assistant-message'}`; // 添加样式类（user / ai） `message ${role === 'user' ? 'user-message' : 'assistant-message'}`; // 添加样式类（user / ai）
// if (role === "user") { // if (role === "user") {
// messageDiv.textContent = `用户: ${content}`; // messageDiv.textContent = `用户: ${content}`;
// } else { // } else {
// }
console.log(content, role, '====role');
if (!content && role == 'assistant') {
messageDiv.appendChild(loaderDiv)
} else {
messageDiv.textContent = `${content}`; messageDiv.textContent = `${content}`;
// messageDiv.removeChild(loaderDiv)
}
// if(!loadFlag){
// messageDiv.removeChild(loaderDiv)
// } // }
chatContainer.appendChild(messageDiv); chatContainer.appendChild(messageDiv);

Write Preview
Loading…
Cancel
Save