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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      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. 118
      view/templates/index/deepSeek.html

17
view/css/deepSeek.css
View File

@ -32,7 +32,19 @@ body {
background-color: #e6f2ff;
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 {
width: 260px;
@ -40,6 +52,7 @@ body {
display: flex;
flex-direction: column;
height: 100%;
transition: all .5s;
}
.sidebar-header {
@ -75,7 +88,6 @@ body {
width: 60px;
height: auto;
}
.expand-silder {
display: none;
opacity: 0;
@ -127,6 +139,7 @@ body {
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
}
.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

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

@ -5,10 +5,16 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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/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/marked.min.js"></script>
<!-- 可选样式 -->
<script src="../../js/highlight.min.js"></script>
</head>
<body>
@ -58,7 +64,7 @@
</div>
</div>
<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
viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
@ -67,15 +73,15 @@
fill-rule="nonzero" fill="#4D6BFE"></path>
</svg></div>
</div>
<div id="openMenu">
<div id="openMenu" title="打开边栏">
<img src="../../images/expand.svg" alt="">
</div>
<div class="newChatBtn">
<div class="newChatBtn" title="开启新对话">
<img src="../../images/addNewBtn.svg" alt="">
</div>
</div>
<div class="conversation-list _03210fb">
<div id="conversationList">
<!-- <div class="time-section _48cdfc1">今天</div>
@ -89,7 +95,7 @@
</div> -->
</div>
</div>
<!-- <div class="sidebar-footer">
<div class="download-app">下载 App</div>
<div class="user-info">
@ -99,17 +105,18 @@
</div> -->
</div>
<div class="siderBarExpand">
</div>
<!-- 主内容区 -->
<div class="main-content ">
<div class="main-body">
<div class="content-header" id="currentChatTitle">新对话</div>
<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">
<p>欢迎使用DeepSeek Chat！开始一个新的对话吧。</p>
</div>
@ -124,21 +131,21 @@
<div class="content-item">多酚类物质可提高胰岛素敏感性，辅助血糖管理。</div>
</div> -->
</div>
<div class="_88681e8 newChatBtn">
<div class="_217e214"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.856 17.121a.979.979 0 0 1-.327-.06.839.839 0 0 1-.283-.177.739.739 0 0 1-.187-.255.724.724 0 0 1-.07-.303l-.02-1.609a4.663 4.663 0 0 1-1.446-.455 4.252 4.252 0 0 1-.637-.401c-.199-.146-.385-.31-.553-.492a4.442 4.442 0 0 1-.45-.577 4.303 4.303 0 0 1-.327-.637 3.823 3.823 0 0 1-.206-.686 3.729 3.729 0 0 1-.064-.704V6.478c0-.261.025-.516.077-.771a4.43 4.43 0 0 1 .244-.747 4.062 4.062 0 0 1 .932-1.28c.2-.183.418-.347.65-.493.23-.145.482-.267.739-.364a4.21 4.21 0 0 1 .81-.225c.27-.054.553-.078.835-.078H8.55c.103 0 .2.018.29.054a.7.7 0 0 1 .411.376.667.667 0 0 1-.161.766.736.736 0 0 1-.25.151.764.764 0 0 1-.29.055H5.573c-.186 0-.366.012-.54.049-.18.03-.353.079-.52.145-.167.061-.328.14-.482.237-.148.091-.29.2-.418.316a2.897 2.897 0 0 0-.347.388c-.097.14-.187.286-.257.444a2.473 2.473 0 0 0-.206.977v4.287c0 .17.013.333.051.503a2.549 2.549 0 0 0 .772 1.33 2.721 2.721 0 0 0 .913.559c.167.066.347.115.527.152.18.03.36.048.546.048a.904.904 0 0 1 .61.23.848.848 0 0 1 .194.262.84.84 0 0 1 .07.303l.007.99 1.915-1.293a2.877 2.877 0 0 1 1.64-.492h2.372c.186 0 .366-.018.54-.048.18-.03.353-.08.52-.146.168-.067.329-.146.483-.237.148-.091.29-.2.418-.316.128-.121.244-.249.347-.388a2.8 2.8 0 0 0 .257-.444 2.47 2.47 0 0 0 .206-.977V8.585a.646.646 0 0 1 .225-.492.679.679 0 0 1 .244-.152.814.814 0 0 1 .585 0c.09.03.174.085.244.152a.657.657 0 0 1 .225.492V10.8c0 .261-.032.516-.083.771a4.192 4.192 0 0 1-.245.74c-.109.244-.244.468-.398.687a3.735 3.735 0 0 1-.534.6c-.2.183-.418.347-.65.493a4.134 4.134 0 0 1-.738.364 4.7 4.7 0 0 1-.81.225c-.27.054-.553.079-.836.079h-1.877c-.604 0-1.144.164-1.633.491l-2.54 1.713a.913.913 0 0 1-.514.157z"
fill="currentColor"></path>
<path
d="M15.866 4.125h-4.174c-.41 0-.741.313-.741.7 0 .387.332.7.741.7h4.174c.41 0 .742-.313.742-.7 0-.387-.332-.7-.742-.7z"
fill="currentColor"></path>
<path
d="M14.537 2.932c0-.396-.34-.717-.759-.717s-.758.32-.758.717v3.786c0 .396.34.717.758.717.42 0 .76-.321.76-.717V2.932z"
fill="currentColor"></path>
</svg><span>开启新对话</span></div>
</div>
</div>
<div class="_88681e8 newChatBtn">
<div class="_217e214"><svg width="18" height="18" viewBox="0 0 18 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.856 17.121a.979.979 0 0 1-.327-.06.839.839 0 0 1-.283-.177.739.739 0 0 1-.187-.255.724.724 0 0 1-.07-.303l-.02-1.609a4.663 4.663 0 0 1-1.446-.455 4.252 4.252 0 0 1-.637-.401c-.199-.146-.385-.31-.553-.492a4.442 4.442 0 0 1-.45-.577 4.303 4.303 0 0 1-.327-.637 3.823 3.823 0 0 1-.206-.686 3.729 3.729 0 0 1-.064-.704V6.478c0-.261.025-.516.077-.771a4.43 4.43 0 0 1 .244-.747 4.062 4.062 0 0 1 .932-1.28c.2-.183.418-.347.65-.493.23-.145.482-.267.739-.364a4.21 4.21 0 0 1 .81-.225c.27-.054.553-.078.835-.078H8.55c.103 0 .2.018.29.054a.7.7 0 0 1 .411.376.667.667 0 0 1-.161.766.736.736 0 0 1-.25.151.764.764 0 0 1-.29.055H5.573c-.186 0-.366.012-.54.049-.18.03-.353.079-.52.145-.167.061-.328.14-.482.237-.148.091-.29.2-.418.316a2.897 2.897 0 0 0-.347.388c-.097.14-.187.286-.257.444a2.473 2.473 0 0 0-.206.977v4.287c0 .17.013.333.051.503a2.549 2.549 0 0 0 .772 1.33 2.721 2.721 0 0 0 .913.559c.167.066.347.115.527.152.18.03.36.048.546.048a.904.904 0 0 1 .61.23.848.848 0 0 1 .194.262.84.84 0 0 1 .07.303l.007.99 1.915-1.293a2.877 2.877 0 0 1 1.64-.492h2.372c.186 0 .366-.018.54-.048.18-.03.353-.08.52-.146.168-.067.329-.146.483-.237.148-.091.29-.2.418-.316.128-.121.244-.249.347-.388a2.8 2.8 0 0 0 .257-.444 2.47 2.47 0 0 0 .206-.977V8.585a.646.646 0 0 1 .225-.492.679.679 0 0 1 .244-.152.814.814 0 0 1 .585 0c.09.03.174.085.244.152a.657.657 0 0 1 .225.492V10.8c0 .261-.032.516-.083.771a4.192 4.192 0 0 1-.245.74c-.109.244-.244.468-.398.687a3.735 3.735 0 0 1-.534.6c-.2.183-.418.347-.65.493a4.134 4.134 0 0 1-.738.364 4.7 4.7 0 0 1-.81.225c-.27.054-.553.079-.836.079h-1.877c-.604 0-1.144.164-1.633.491l-2.54 1.713a.913.913 0 0 1-.514.157z"
fill="currentColor"></path>
<path
d="M15.866 4.125h-4.174c-.41 0-.741.313-.741.7 0 .387.332.7.741.7h4.174c.41 0 .742-.313.742-.7 0-.387-.332-.7-.742-.7z"
fill="currentColor"></path>
<path
d="M14.537 2.932c0-.396-.34-.717-.759-.717s-.758.32-.758.717v3.786c0 .396.34.717.758.717.42 0 .76-.321.76-.717V2.932z"
fill="currentColor"></path>
</svg><span>开启新对话</span></div>
</div>
<!-- <div class="content-note">
注意事项<br>
@ -156,7 +163,8 @@
class="ds-button ds-button--primary ds-button--filled ds-button--rect ds-button--m _3172d9f"
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;">
<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"
style="font-size: 19px; width: 19px; height: 19px; color: rgb(76, 76, 76);">
<img src="../../images/btnIcon1.svg" alt="">
@ -167,17 +175,19 @@
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;"
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"
style="font-size: 17px; width: 17px; height: 17px; color: rgb(76, 76, 76);">
<img src="../../images/btnIcon2.svg" alt="">
</div>
</span></div><span class="ad0c98fd">联网搜索</span>
</div>
<div class="bf38813a">
<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">
<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"
@ -214,6 +224,8 @@
// alert('创建新对话');
// });
$(document).ready(function () {
var loadFlag = false;
// 对话数据存储
let conversations = {
// 示例数据
@ -268,9 +280,16 @@
// 侧边栏状态
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() {
console.log('====');
sidebarCollapsed = !sidebarCollapsed;
$('#sidebar').toggleClass('collapsed', sidebarCollapsed);
@ -291,7 +310,7 @@
// 保存状态到本地存储
localStorage.setItem('sidebarCollapsed', sidebarCollapsed);
}
$('#openMenu').on('click', function () {
$('#openMenu, .ds-icon-box').on('click', function () {
// sidebarCollapsed = !sidebarCollapsed;
// $('#sidebar').toggleClass('collapsed', sidebarCollapsed);
toggleSidebar()
@ -474,6 +493,7 @@
var outputEl = document.getElementById('chatContainer');
$('#sendBtn').click(function () {
loadFlag = true; //开启思考
// debugger
const message = $('#messageInput').val().trim();
if (!message) return;
@ -489,7 +509,7 @@
title: newTitle,
messages: [{
role: "user",
content: message
content: message
}],
timestamp: new Date().getTime(),
group: "today"
@ -509,7 +529,7 @@
saveConversations();
// renderChat(currentConversationId);
}
console.log(currentConversationId,'currentConversationId=====currentConversationId');
// console.log(currentConversationId,'currentConversationId=====currentConversationId');
fetchStream()
// startStream()
@ -553,7 +573,7 @@
const message = $('#messageInput').val().trim();
renderMessage(message, "user");
var aiMessageDiv = renderMessage("", "assistant", true);
console.log(aiMessageDiv, 'aiMessageDiv---');
// console.log(aiMessageDiv, 'aiMessageDiv---');
document.getElementById("messageInput").value = ""; // 清空输入框
const response = await fetch('http://192.168.31.74:26000/api/stream', {
method: 'POST',
@ -568,6 +588,9 @@
renderMessage("请求失败，请重试", "assistant");
return;
}
if (!response.body) {
throw new Error('可读流不可用');
}
const reader = response.body.getReader();
const decoder = new TextDecoder();
let aiResponse = "";
@ -580,7 +603,15 @@
const chunk = decoder.decode(value);
console.log(chunk, '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({
behavior: "smooth"
});
@ -593,18 +624,29 @@
}
// 渲染单条消息（用户或 AI）
function renderMessage(content, role, isStreaming = false) {
const chatContainer = document.getElementById("chatContainer");
const messageDiv = document.createElement("div");
const loaderDiv = document.createElement("div");
loaderDiv.className = 'loader'
messageDiv.className =
`message ${role === 'user' ? 'user-message' : 'assistant-message'}`; // 添加样式类（user / ai）
// if (role === "user") {
// messageDiv.textContent = `用户: ${content}`;
// } else {
messageDiv.textContent = `${content}`;
// }
console.log(content, role, '====role');
if (!content && role == 'assistant') {
messageDiv.appendChild(loaderDiv)
} else {
messageDiv.textContent = `${content}`;
// messageDiv.removeChild(loaderDiv)
}
// if(!loadFlag){
// messageDiv.removeChild(loaderDiv)
// }
chatContainer.appendChild(messageDiv);

Write Preview
Loading…
Cancel
Save