diff --git a/src/config/__init__.py b/src/config/__init__.py index dbd9f8a5..4e28a553 100644 --- a/src/config/__init__.py +++ b/src/config/__init__.py @@ -154,7 +154,7 @@ MODEL_NAMES = { "ERNIE-Speed-128K", "ERNIE-Tiny-8K", "ERNIE-Lite-8K", - "ERNIE-4.0-8K-Latest" + "ERNIE-4.0-8K-Latest", "Yi-34B-Chat", ], diff --git a/web/package.json b/web/package.json index 1100b5fe..765b9d14 100644 --- a/web/package.json +++ b/web/package.json @@ -19,8 +19,10 @@ "d3": "^7.8.3", "echarts": "^5.4.2", "echarts-gl": "^2.0.9", + "highlight.js": "^11.10.0", "less": "^4.1.3", "marked": "^13.0.2", + "marked-highlight": "^2.1.4", "pinia": "^2.0.32", "vue": "^3.2.47", "vue-router": "^4.1.6" diff --git a/web/public/home.png b/web/public/home.png index 9c87dbf5..2460f5fb 100644 Binary files a/web/public/home.png and b/web/public/home.png differ diff --git a/web/src/assets/base.css b/web/src/assets/base.css index 6e5c9c8d..9e0174c1 100644 --- a/web/src/assets/base.css +++ b/web/src/assets/base.css @@ -1,5 +1,16 @@ /* color palette from */ :root { + --main-900: #003A51; + --main-800: #004F69; + --main-700: #00637F; + --main-600: #1B7796; + --main-500: #2C86A8; + --main-400: #4e99b9; + --main-300: #6AADCB; + --main-200: #8CC6E1; + --main-100: #ABE0F7; + --main-50: #CDF5FF; + --c-white: #ffffff; --c-white-soft: #f8f8f8; --c-white-mute: #f2f2f2; @@ -8,60 +19,28 @@ --c-black-soft: #222222; --c-black-mute: #282828; - --c-indigo: #2c3e50; - --c-black-light-1: #333333; --c-black-light-2: #454545; --c-black-light-3: #666666; --c-black-light-4: #999999; - --c-text-light-1: var(--c-indigo); - --c-text-light-2: rgba(60, 66, 70, 0.66); - --c-text-dark-1: var(--c-white); + --c-text-light-1: var(--c-black); + --c-text-dark-1: #0D0D0D; --c-text-dark-2: #b8b8b8; -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--c-white); - --color-background-soft: var(--c-white-soft); - --color-background-mute: var(--c-white-mute); - - --color-border: var(--c-black-light-2); - --color-border-hover: var(--c-black-light-1); - - --color-heading: var(--c-text-light-1); --color-text: var(--c-black); - --section-gap: 160px; - - --main-color: #005f77; + --main-color: var(--main-700); --main-color-dark: #004d5c; - --main-light-1: #007f96; - --main-light-2: #D3EAED; - --main-light-3: #EDF4F5; - --main-light-4: #F2F6F7; + --main-light-1: #0076AB; + --main-light-2: #DAEAED; + --main-light-3: #EDF0F1; + --main-light-4: #F2F5F5; --main-light-5: #F7FAFB; --main-light-6: #FAFDFD; --min-width: 400px; - --min-header-width: 80px; --error-color: #f50a0d; } -/* @media (prefers-color-scheme: dark) { - :root { - --color-background: var(--c-black); - --color-background-soft: var(--c-black-soft); - --color-background-mute: var(--c-black-mute); - - --color-border: var(--c-black-dark-2); - --color-border-hover: var(--c-black-dark-1); - - --color-heading: var(--c-text-dark-1); - --color-text: var(--c-text-dark-2); - } -} */ - *, *::before, *::after { diff --git a/web/src/assets/theme.js b/web/src/assets/theme.js index 3e727f59..6f5c25eb 100644 --- a/web/src/assets/theme.js +++ b/web/src/assets/theme.js @@ -2,6 +2,6 @@ export const themeConfig = { token: { colorPrimary: '#005F77', colorInfo: '#191919', - wireframe: true + fontFamily: "'HarmonyOS Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;" }, } \ No newline at end of file diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue index 5861a5e1..34ed5156 100644 --- a/web/src/components/ChatComponent.vue +++ b/web/src/components/ChatComponent.vue @@ -14,7 +14,7 @@ class="newchat nav-btn" @click="$emit('newconv')" > - 新对话 + 新对话 {{ configStore.config?.model_name }}
@@ -107,8 +107,13 @@ :class="message.role" >

{{ message.text }}

+
+
+
+
+

@@ -149,6 +154,7 @@

+

{{ res.entity.text }}

@@ -169,7 +175,7 @@ -

即便强如雅典娜也可能会出错，请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}:{{ configStore.config?.model_name }}

+

请注意辨别内容的可靠性 模型供应商：{{ configStore.config?.model_provider }}: {{ configStore.config?.model_name }}

@@ -192,8 +198,11 @@ import { FolderOpenOutlined, } from '@ant-design/icons-vue' import { onClickOutside } from '@vueuse/core' -import { marked } from 'marked'; +import { Marked } from 'marked'; +import { markedHighlight } from 'marked-highlight'; import { useConfigStore } from '@/stores/config' +import hljs from 'highlight.js'; +import 'highlight.js/styles/github.css'; const props = defineProps({ conv: Object, @@ -232,16 +241,30 @@ const meta = reactive(JSON.parse(localStorage.getItem('meta')) || { history_round: 5, }) -// 更多选项可以在 marked 文档中找到：https://marked.js.org/ -marked.setOptions({ - gfm: true, - breaks: true, - tables: true, -}); +const marked = new Marked( + { + gfm: true, + breaks: true, + tables: true, + }, + markedHighlight({ + langPrefix: 'hljs language-', + highlight(code) { + return hljs.highlightAuto(code).value; + } + }) +); + -const renderMarkdown = (text) => marked(text) const consoleMsg = (message) => console.log(message) onClickOutside(panel, () => setTimeout(() => opts.showPanel = false, 30)) +const renderMarkdown = (message) => { + if (message.status === 'loading') { + return marked.parse(message.text + '🟢') + } else { + return marked.parse(message.text) + } +} const handleKeyDown = (e) => { if (e.key === 'Enter' && !e.shiftKey) { @@ -313,16 +336,17 @@ const appendAiMessage = (message, refs=null) => { } const updateMessage = (text, id, refs, status) => { - const message = conv.value.messages.find((message) => message.id === id) + const message = conv.value.messages.find((message) => message.id === id); if (message) { - message.text = text - message.refs = refs - message.status = status + message.refs = refs; + message.status = status; + message.text = text; } else { - console.error('Message not found') + console.error('Message not found'); } - scrollToBottom() -} + scrollToBottom(); +}; + const updateStatus = (id, status) => { const message = conv.value.messages.find((message) => message.id === id) @@ -332,7 +356,6 @@ const updateStatus = (id, status) => { console.error('Message not found') } - console.log("updateStatus", message, message.refs.knowledge_base.results.length > 0) if (message.refs.knowledge_base.results.length > 0) { message.groupedResults = message.refs.knowledge_base.results.reduce((acc, result) => { const { filename } = result.file; @@ -373,7 +396,7 @@ const sendMessage = () => { if (user_input) { isStreaming.value = true appendUserMessage(user_input) - appendAiMessage("···", null) + appendAiMessage("", null) const cur_res_id = conv.value.messages[conv.value.messages.length - 1].id conv.value.inputText = '' meta.db_name = opts.databases[meta.selectedKB]?.metaname @@ -585,7 +608,7 @@ watch( .chat-box { width: 100%; - max-width: 1100px; + max-width: 900px; margin: 0 auto; flex-grow: 1; padding: 1rem; @@ -593,25 +616,24 @@ watch( flex-direction: column; .message-box { - max-width: 95%; display: inline-block; - border-radius: 0.8rem; + border-radius: 1.5rem; margin: 0.8rem 0; - padding: 1rem; + padding: 0.625rem 1.25rem; user-select: text; word-break: break-word; font-size: 16px; font-variation-settings: 'wght' 400, 'opsz' 10.5; font-weight: 400; box-sizing: border-box; - color: #0D0D0D; + color: black; /* box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16); */ /* animation: slideInUp 0.1s ease-in; */ } .message-box.sent { - background-color: #efefef; line-height: 24px; + max-width: 95%; background: var(--main-light-3); align-self: flex-end; } @@ -620,10 +642,9 @@ watch( color: initial; width: fit-content; padding-top: 16px; - background-color: #F5F7F8; text-align: left; word-wrap: break-word; - margin-bottom: 0; + margin: 0; padding-bottom: 0; text-align: justify; } @@ -651,21 +672,23 @@ watch( .retrieval-detail { .fileinfo { margin-bottom: 20px; - padding: 10px; - background: var(--main-light-3); + padding: 1rem; + background: var(--main-50); + color: var(--main-800); border-radius: 8px; + // border: 1px solid var(--main-100); p { - margin: 0; + margin: 10px; line-height: 1.5; } } .result-item { margin-bottom: 20px; - padding: 10px; + padding: 24px 16px 10px 16px; border: 1px solid #e8e8e8; border-radius: 8px; - background: var(--main-light-4); + background: var(--main-light-6); .result-id, .result-distance, @@ -696,23 +719,23 @@ watch( bottom: 0; width: 100%; margin: 0 auto; - padding: 0.5rem 2rem; + padding: 4px 2rem 0 2rem; background: white; .input-box { display: flex; width: 100%; - max-width: 1100px; + max-width: 900px; margin: 0 auto; align-items: flex-end; - background-color: #F5F7F8; + background-color: var(--main-light-4); border-radius: 2rem; height: auto; padding: 0.5rem; &:focus-within { - background-color: #F2F2F2; + background-color: #ECF1F2; } .user-input { @@ -762,9 +785,10 @@ watch( background-color: transparent; border: none; height: 2.5rem; - background-color: black; + background-color: var(--main-color); border-radius: 3rem; color: white; + transition: background-color 0.3s; &:hover { color: white; @@ -772,7 +796,7 @@ watch( } button:disabled { - background: #D7D7D7; + background: #E0E0E0; cursor: not-allowed; } @@ -803,8 +827,37 @@ button:disabled { border-radius: 4px; } -.slide-out-left{-webkit-animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both} -.swing-in-top-fwd {-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;} +.loading-dots { + display: inline-flex; + align-items: center; + justify-content: center; +} + +.loading-dots div { + width: 10px; + height: 10px; + margin: 0 5px; + background-color: #333; + border-radius: 50%; + animation: loading 0.8s infinite ease-in-out both; +} + +.loading-dots div:nth-child(1) { + animation-delay: 0s; +} + +.loading-dots div:nth-child(2) { + animation-delay: 0.2s; +} + +.loading-dots div:nth-child(3) { + animation-delay: 0.4s; +} + +@keyframes loading {0%,80%,100%{transform:scale(0.5);}40%{transform:scale(1);}} + +.slide-out-left{-webkit-animation:slide-out-left .2s cubic-bezier(.55,.085,.68,.53) both;animation:slide-out-left .5s cubic-bezier(.55,.085,.68,.53) both} +.swing-in-top-fwd {-webkit-animation: swing-in-top-fwd 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) both;} @-webkit-keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}}@keyframes swing-in-top-fwd{0%{-webkit-transform:rotateX(-100deg);transform:rotateX(-100deg);-webkit-transform-origin:top;transform-origin:top;opacity:0}100%{-webkit-transform:rotateX(0deg);transform:rotateX(0deg);-webkit-transform-origin:top;transform-origin:top;opacity:1}} @-webkit-keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}}@keyframes slide-out-left{0%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}100%{-webkit-transform:translateX(-1000px);transform:translateX(-1000px);opacity:0}} @@ -851,3 +904,16 @@ button:disabled { } } + + \ No newline at end of file diff --git a/web/src/layouts/AppLayout.vue b/web/src/layouts/AppLayout.vue index e747bf5e..abaebc4f 100644 --- a/web/src/layouts/AppLayout.vue +++ b/web/src/layouts/AppLayout.vue @@ -9,6 +9,8 @@ import { BookOutlined, BookFilled, GithubOutlined, + DatabaseOutlined, + DatabaseFilled, } from '@ant-design/icons-vue' import { themeConfig } from '@/assets/theme' import { useConfigStore } from '@/stores/config' @@ -55,7 +57,7 @@ console.log(route) - +
@@ -111,13 +113,13 @@ div.header, #app-router-view { .header { display: flex; flex-direction: column; - flex: 0 0 80px; + flex: 0 0 70px; justify-content: flex-start; align-items: center; - background-color: var(--main-light-4); + background-color: var(--main-light-3); height: 100%; - width: 80px; - border-right: 1px solid var(--main-light-2); + width: 70px; + border-right: 1px solid var(--main-light-3); .logo { width: 40px; @@ -150,12 +152,12 @@ div.header, #app-router-view { &.active { font-weight: bold; - color: var(--main-color); - background-color: var(--main-light-2); + color: var(--main-600); + background-color: #E6E8E9; } &:hover { - background-color: var(--main-light-2); + background-color: #E6E8E9; cursor: pointer; } } @@ -205,7 +207,7 @@ div.header, #app-router-view { .nav-item { text-decoration: none; width: 40px; - color: var(--c-text-light-2); + color: var(--c-black-soft); font-size: 1rem; font-weight: bold; transition: color 0.1s ease-in-out, font-size 0.1s ease-in-out; diff --git a/web/src/views/ChatView.vue b/web/src/views/ChatView.vue index d924aa94..916fed1d 100644 --- a/web/src/views/ChatView.vue +++ b/web/src/views/ChatView.vue @@ -6,13 +6,15 @@ 对话历史
-
-
{{ state.title }}
-
+
+
+
{{ state.title }}
+
+
{ flex: 1 1 auto; /* 当侧边栏打开时，占据可用空间 */ } .conversations { - display: flex; - flex-direction: column; width: 230px; /* 初始宽度 */ - height: 100%; max-width: 230px; - overflow-y: auto; border-right: 1px solid var(--main-light-3); - background-color: #FAFCFD; overflow: hidden; /* 确保内容不溢出 */ - white-space: nowrap; /* 防止文本换行 */ - transition: all 0.2s ease-out; + max-height: 100%; + background-color: #FAFCFD; & .actions { height: var(--header-height); @@ -150,10 +147,8 @@ onMounted(() => { justify-content: space-between; align-items: center; padding: 16px; - position: sticky; - top: 0; - background-color: #FAFCFD; z-index: 9; + border-bottom: 1px solid var(--main-light-3); .action { font-size: 1.2rem; @@ -172,7 +167,14 @@ onMounted(() => { } } - .conversation { + .conversation-list { + display: flex; + flex-direction: column; + overflow-y: auto; + max-height: 100%; + } + + .conversation-list .conversation { display: flex; justify-content: space-between; align-items: center; @@ -199,12 +201,12 @@ onMounted(() => { } &.active { - border-left: 3px solid var(--main-color); + border-left: 3px solid var(--main-600); padding-left: 13px; background-color: var(--main-light-3); & .conversation__title { - color: var(--c-black-light-1); + color: var(--main-900); } } @@ -218,33 +220,33 @@ onMounted(() => { } } -.conversations::-webkit-scrollbar { +.conversation-list::-webkit-scrollbar { position: absolute; width: 4px; } -.conversations::-webkit-scrollbar-track { +.conversation-list::-webkit-scrollbar-track { background: transparent; border-radius: 4px; } -.conversations::-webkit-scrollbar-thumb { +.conversation-list::-webkit-scrollbar-thumb { background: var(--c-text-dark-2); border-radius: 4px; } -.conversations::-webkit-scrollbar-thumb:hover { +.conversation-list::-webkit-scrollbar-thumb:hover { background: rgb(100, 100, 100); border-radius: 4px; } -.conversations::-webkit-scrollbar-thumb:active { +.conversation-list::-webkit-scrollbar-thumb:active { background: rgb(68, 68, 68); border-radius: 4px; } @media (max-width: 520px) { - .conversations { + .conversation { position: absolute; z-index: 101; width: 300px; diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue index bef6d4f3..87eb46cf 100644 --- a/web/src/views/DataBaseInfoView.vue +++ b/web/src/views/DataBaseInfoView.vue @@ -19,12 +19,12 @@
- +
添加文件 - - +
+
检索测试 - +

参数配置

@@ -494,18 +494,31 @@ onMounted(() => { flex-direction: column; gap: 16px; - button { + > div { + gap: 1rem; + width: 100%; + display: flex; + justify-content: center; + align-items: center; padding: 10px 16px; height: auto; - border-radius: 8px; + border-radius: 4px; border: none; - background: var(--main-light-4); + background: var(--main-light-5); + letter-spacing: 4px; + border-radius: 8px; + border: 1px solid var(--main-light-2); + + &:hover { + cursor: pointer; + background: var(--main-light-3); + } } .active { - font-weight: bold; color: var(--main-color); - background: var(--main-light-2); + background: var(--main-light-3); + font-weight: bold; } } diff --git a/web/src/views/HomeView.vue b/web/src/views/HomeView.vue index 05aa8ce2..eee58a99 100644 --- a/web/src/views/HomeView.vue +++ b/web/src/views/HomeView.vue @@ -1,10 +1,11 @@ @@ -12,7 +13,7 @@ import { reactive, ref } from 'vue' import { useRouter } from 'vue-router' -const title = ref('Athena ✨') +const title = ref('📢 Athena ✨') const router = useRouter() const goToChat = () => { @@ -21,45 +22,46 @@ const goToChat = () => { -