mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-01-10 23:12:52 +00:00
upgraded ui
This commit is contained in:
Saifeddine ALOUI
parent
b930b7940e
commit
54e09e85da
3997
web/dist/assets/index-Bt6VF9H5.js
vendored
Normal file
3997
web/dist/assets/index-Bt6VF9H5.js
vendored
Normal file
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-C5n6m1nm.css
vendored
8
web/dist/assets/index-C5n6m1nm.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-COFFlPfA.css
vendored
Normal file
8
web/dist/assets/index-COFFlPfA.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3993
web/dist/assets/index-DQmEh9rd.js
vendored
3993
web/dist/assets/index-DQmEh9rd.js
vendored
File diff suppressed because one or more lines are too long
4
web/dist/index.html
vendored
4
web/dist/index.html
vendored
@ -6,8 +6,8 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LoLLMS WebUI</title>
|
||||
<script type="module" crossorigin src="/assets/index-DQmEh9rd.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-C5n6m1nm.css">
|
||||
<script type="module" crossorigin src="/assets/index-Bt6VF9H5.js"></script>
|
||||
<link rel="stylesheet" crossorigin href="/assets/index-COFFlPfA.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
636
web/package-lock.json
generated
636
web/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -16,15 +16,17 @@
|
||||
"axios": "^1.7.4",
|
||||
"baklavajs": "^2.3.0",
|
||||
"dompurify": "^3.1.3",
|
||||
"feather-icons": "^4.29.0",
|
||||
"feather-icons": "^4.29.2",
|
||||
"flowbite": "^1.6.5",
|
||||
"flowbite-vue": "^0.0.10",
|
||||
"highlight.js": "^11.8.0",
|
||||
"flowbite-vue": "^0.0.7",
|
||||
"highlight.js": "^11.11.0",
|
||||
"katex": "^0.16.18",
|
||||
"markdown-it": "^13.0.2",
|
||||
"markdown-it-anchor": "^8.6.7",
|
||||
"markdown-it-attrs": "^4.1.6",
|
||||
"markdown-it-emoji": "^2.0.2",
|
||||
"markdown-it-implicit-figures": "^0.11.0",
|
||||
"markdown-it-katex": "^2.0.3",
|
||||
"markdown-it-math": "^4.1.1",
|
||||
"markdown-it-mathjax": "^2.0.0",
|
||||
"markdown-it-multimd-table": "^4.2.3",
|
||||
@ -33,12 +35,15 @@
|
||||
"mathjax": "^3.2.2",
|
||||
"mermaid": "^11.2.1",
|
||||
"monaco-editor": "^0.51.0",
|
||||
"monaco-editor-vue3": "^0.1.10",
|
||||
"papaparse": "^5.4.1",
|
||||
"prismjs": "^1.29.0",
|
||||
"socket.io-client": "^4.6.1",
|
||||
"three": "^0.159.0",
|
||||
"vue": "^3.5.10",
|
||||
"vue-inline-svg": "^2.1.3",
|
||||
"vue-json-pretty": "^2.4.0",
|
||||
"vue-markdown": "^2.1.3",
|
||||
"vue-router": "^4.1.6",
|
||||
"vuex": "^4.0.2"
|
||||
},
|
||||
|
||||
@ -1,175 +1,177 @@
|
||||
<template>
|
||||
<div class="break-all container w-full">
|
||||
<div ref="mdRender" class="markdown-content">
|
||||
<div v-for="(item, index) in markdownItems" :key="index">
|
||||
<code-block
|
||||
v-if="item.type === 'code'"
|
||||
:host="host"
|
||||
:language="item.language"
|
||||
:code="item.code"
|
||||
:discussion_id="discussion_id"
|
||||
:message_id="message_id"
|
||||
:client_id="client_id"
|
||||
@update-code="updateCode(index, $event)"
|
||||
></code-block>
|
||||
<div v-else v-html="item.html"></div>
|
||||
<div class="break-all container w-full">
|
||||
<div ref="mdRender" class="markdown-content">
|
||||
<div v-for="(item, index) in markdownItems" :key="index">
|
||||
<code-block
|
||||
v-if="item.type === 'code'"
|
||||
:host="host"
|
||||
:language="item.language"
|
||||
:code="item.code"
|
||||
:discussion_id="discussion_id"
|
||||
:message_id="message_id"
|
||||
:client_id="client_id"
|
||||
@update-code="updateCode(index, $event)"
|
||||
></code-block>
|
||||
<div v-else v-html="item.html"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { nextTick, ref, onMounted, watch } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
import MarkdownIt from 'markdown-it';
|
||||
import emoji from 'markdown-it-emoji';
|
||||
import anchor from 'markdown-it-anchor';
|
||||
import MarkdownItMultimdTable from 'markdown-it-multimd-table';
|
||||
import implicitFigures from 'markdown-it-implicit-figures';
|
||||
import 'highlight.js/styles/tomorrow-night-blue.css';
|
||||
import 'highlight.js/styles/tokyo-night-dark.css';
|
||||
import attrs from 'markdown-it-attrs';
|
||||
import CodeBlock from './CodeBlock.vue';
|
||||
import hljs from 'highlight.js';
|
||||
import mathjax from 'markdown-it-mathjax';
|
||||
<script>
|
||||
import { nextTick, ref, onMounted, watch } from 'vue';
|
||||
import feather from 'feather-icons';
|
||||
import MarkdownIt from 'markdown-it'
|
||||
import markdownItKatex from 'markdown-it-katex'
|
||||
import emoji from 'markdown-it-emoji';
|
||||
import anchor from 'markdown-it-anchor';
|
||||
import MarkdownItMultimdTable from 'markdown-it-multimd-table';
|
||||
import implicitFigures from 'markdown-it-implicit-figures';
|
||||
import 'highlight.js/styles/tomorrow-night-blue.css';
|
||||
import 'highlight.js/styles/tokyo-night-dark.css';
|
||||
import attrs from 'markdown-it-attrs';
|
||||
import CodeBlock from './CodeBlock.vue';
|
||||
import hljs from 'highlight.js';
|
||||
import mathjax from 'markdown-it-mathjax';
|
||||
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
function escapeHtml(unsafe) {
|
||||
return unsafe
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'MarkdownRenderer',
|
||||
props: {
|
||||
host: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "http://localhost:9600",
|
||||
},
|
||||
client_id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
markdownText: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
discussion_id: {
|
||||
type: [String, Number],
|
||||
default: "0",
|
||||
required: false,
|
||||
},
|
||||
message_id: {
|
||||
value: "0",
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CodeBlock,
|
||||
},
|
||||
setup(props) {
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
breaks: true, // Enable single line breaks
|
||||
highlight: (code, language) => {
|
||||
const validLanguage = language && hljs.getLanguage(language) ? language : 'plaintext';
|
||||
return hljs.highlight(validLanguage, code).value;
|
||||
export default {
|
||||
name: 'MarkdownRenderer',
|
||||
props: {
|
||||
host: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "http://localhost:9600",
|
||||
},
|
||||
renderInline: false,
|
||||
})
|
||||
.use(emoji)
|
||||
.use(anchor)
|
||||
.use(implicitFigures, {
|
||||
figcaption: true,
|
||||
client_id: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
markdownText: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
discussion_id: {
|
||||
type: [String, Number],
|
||||
default: "0",
|
||||
required: false,
|
||||
},
|
||||
message_id: {
|
||||
value: "0",
|
||||
type: [String, Number],
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
CodeBlock,
|
||||
},
|
||||
setup(props) {
|
||||
const md = new MarkdownIt({
|
||||
html: true,
|
||||
breaks: true, // Enable single line breaks
|
||||
highlight: (code, language) => {
|
||||
const validLanguage = language && hljs.getLanguage(language) ? language : 'plaintext';
|
||||
return hljs.highlight(validLanguage, code).value;
|
||||
},
|
||||
renderInline: false,
|
||||
})
|
||||
.use(attrs)
|
||||
.use(MarkdownItMultimdTable, {
|
||||
enableRowspan: true,
|
||||
enableColspan: true,
|
||||
enableGridTables: true,
|
||||
enableGridTablesExtra: true,
|
||||
enableTableIndentation: true,
|
||||
tableCellPadding: ' ',
|
||||
tableCellJoiner: '|',
|
||||
multilineCellStartMarker: '|>',
|
||||
multilineCellEndMarker: '<|',
|
||||
multilineCellPadding: ' ',
|
||||
multilineCellJoiner: '\n',
|
||||
})
|
||||
.use(mathjax); // Ensure mathjax is used for inline LaTeX
|
||||
.use(emoji)
|
||||
.use(anchor)
|
||||
.use(implicitFigures, {
|
||||
figcaption: true,
|
||||
})
|
||||
.use(attrs)
|
||||
.use(MarkdownItMultimdTable, {
|
||||
enableRowspan: true,
|
||||
enableColspan: true,
|
||||
enableGridTables: true,
|
||||
enableGridTablesExtra: true,
|
||||
enableTableIndentation: true,
|
||||
tableCellPadding: ' ',
|
||||
tableCellJoiner: '|',
|
||||
multilineCellStartMarker: '|>',
|
||||
multilineCellEndMarker: '<|',
|
||||
multilineCellPadding: ' ',
|
||||
multilineCellJoiner: '\n',
|
||||
})
|
||||
.use(markdownItKatex)
|
||||
|
||||
const markdownItems = ref([]);
|
||||
const updateMarkdown = () => {
|
||||
if (props.markdownText) {
|
||||
let tokens = md.parse(props.markdownText, {});
|
||||
let cumulated = [];
|
||||
markdownItems.value = [];
|
||||
for (let i = 0; i < tokens.length; i++) {
|
||||
if (tokens[i].type !== 'fence') {
|
||||
cumulated.push(tokens[i]);
|
||||
} else {
|
||||
if (cumulated.length > 0) {
|
||||
const markdownItems = ref([]);
|
||||
const updateMarkdown = () => {
|
||||
if (props.markdownText) {
|
||||
let tokens = md.parse(props.markdownText, {});
|
||||
let cumulated = [];
|
||||
markdownItems.value = [];
|
||||
for (let i = 0; i < tokens.length; i++) {
|
||||
if (tokens[i].type !== 'fence') {
|
||||
cumulated.push(tokens[i]);
|
||||
} else {
|
||||
if (cumulated.length > 0) {
|
||||
markdownItems.value.push({
|
||||
type: 'html',
|
||||
html: md.renderer.render(cumulated, md.options, {}),
|
||||
});
|
||||
cumulated = [];
|
||||
}
|
||||
markdownItems.value.push({
|
||||
type: 'html',
|
||||
html: md.renderer.render(cumulated, md.options, {}),
|
||||
type: 'code',
|
||||
language: escapeHtml(tokens[i].info),
|
||||
code: tokens[i].content,
|
||||
});
|
||||
cumulated = [];
|
||||
}
|
||||
markdownItems.value.push({
|
||||
type: 'code',
|
||||
language: escapeHtml(tokens[i].info),
|
||||
code: tokens[i].content,
|
||||
});
|
||||
}
|
||||
if (cumulated.length > 0) {
|
||||
markdownItems.value.push({
|
||||
type: 'html',
|
||||
html: md.renderer.render(cumulated, md.options, {}),
|
||||
});
|
||||
cumulated = [];
|
||||
}
|
||||
} else {
|
||||
markdownItems.value = [];
|
||||
}
|
||||
if (cumulated.length > 0) {
|
||||
markdownItems.value.push({
|
||||
type: 'html',
|
||||
html: md.renderer.render(cumulated, md.options, {}),
|
||||
});
|
||||
cumulated = [];
|
||||
}
|
||||
} else {
|
||||
markdownItems.value = [];
|
||||
}
|
||||
nextTick(() => {
|
||||
feather.replace();
|
||||
if (window.MathJax) {
|
||||
window.MathJax.typesetPromise(); // Ensure MathJax typesets after rendering
|
||||
}
|
||||
nextTick(() => {
|
||||
feather.replace();
|
||||
if (window.MathJax) {
|
||||
window.MathJax.typesetPromise(); // Ensure MathJax typesets after rendering
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const updateCode = (index, newCode) => {
|
||||
markdownItems.value[index].code = newCode;
|
||||
};
|
||||
|
||||
watch(() => props.markdownText, updateMarkdown);
|
||||
onMounted(() => {
|
||||
updateMarkdown();
|
||||
});
|
||||
};
|
||||
return { markdownItems, updateCode };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
const updateCode = (index, newCode) => {
|
||||
markdownItems.value[index].code = newCode;
|
||||
};
|
||||
<style>
|
||||
/* Your existing styles */
|
||||
.katex-display {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
watch(() => props.markdownText, updateMarkdown);
|
||||
onMounted(() => {
|
||||
updateMarkdown();
|
||||
});
|
||||
return { markdownItems, updateCode };
|
||||
},
|
||||
};
|
||||
</script>
|
||||
.katex {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.inline-latex {
|
||||
display: inline !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/* Your existing styles */
|
||||
.katex-display {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.katex {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.inline-latex {
|
||||
display: inline !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import monacoEditorPlugin from 'vite-plugin-monaco-editor'
|
||||
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
@ -14,6 +15,9 @@ export default async ({ mode }) => {
|
||||
plugins: [
|
||||
vue()
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['monaco-editor/esm/vs/editor/editor.main.js']
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user