Enhanced the UI

This commit is contained in:
Saifeddine ALOUI 2024-09-08 02:58:54 +02:00
parent 6a7ca6126a
commit e6e21261f2
22 changed files with 377 additions and 364 deletions

View File

@ -0,0 +1,6 @@
Hi there, fellow lollms enthusiasts!
Today, we're diving into the magical world of lollms personalities, and boy, do I have a treat for you! We're unleashing a new personality that's so powerful, it might just make your computer grow legs and dance. Imagine having an AI sidekick that can whip up web applications faster than you can say "lollms"! It's like having a genie in a bottle, except instead of wishes, you get cool webapps. So, buckle up, grab your favorite coding snack, and let's embark on this wild ride of app creation. Remember, with lollms, you're not just building apps you're building dreams... and maybe a few bugs along the way. But hey, that's part of the fun! Let's dive in and see what this AI can conjure up for us. Who knows, by the end of this video, you might be the proud parent of a brand new webapp! See ya on the other side of this coding adventure!
Alright, the new lollms is too strawberry and I get it. Can you cound all the hidden strawberries? Leave a number in the comments.
Now let's mount the Apps maker personality from the personalities zoo. As you can see, the zoo has now its own page and you can sort the apps by multiple criteria. You can find the lollms apps maker in the lollms category.

View File

@ -15,15 +15,9 @@ The `MarkdownRenderer` library is a JavaScript class for converting Markdown con
### Integration Steps ### Integration Steps
Include the following in your HTML file: Include the following in your HTML file header (this must be added to the html to allow the rendering):
```html ```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Renderer Example</title>
<!-- External Libraries --> <!-- External Libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
@ -36,59 +30,52 @@ Include the following in your HTML file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-python.min.js"></script>
<!-- needed for math rendering in markdown --> <!-- needed for math rendering in markdown -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/katex@0.13.11/dist/katex.min.js"></script>
<!-- MarkdownRenderer --> <!-- MarkdownRenderer -->
<script src="/lollms_assets/js/lollms_markdown_renderer"></script> <script src="/lollms_assets/js/lollms_markdown_renderer"></script>
<link rel="stylesheet" href="/lollms_assets/css/lollms_styles"> <link rel="stylesheet" href="/lollms_assets/css/lollms_markdown_renderer">
</head>
<body>
<div id="markdown-content"></div>
<script>
(async () => {
const mr = new MarkdownRenderer();
const markdownText = `
# Sample Markdown
**Bold** text, *italic* text.
## Code Block
\`\`\`javascript
console.log('Hello, World!');
\`\`\`
## Mermaid Diagram
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
## Math Equation
$$E = mc^2$$
## Table
| Name | Age |
|-------|-----|
| Alice | 24 |
| Bob | 30 |
`;
const renderedHtml = await mr.renderMarkdown(markdownText);
document.getElementById('markdown-content').innerHTML = renderedHtml;
})();
</script>
</body>
</html>
``` ```
### Usage ### Usage
```javascript
const mr = new MarkdownRenderer();
const markdownText = `
# Sample Markdown
**Bold** text, *italic* text.
## Code Block
\`\`\`javascript
console.log('Hello, World!');
\`\`\`
## Mermaid Diagram
\`\`\`mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
\`\`\`
## Math Equation
$$E = mc^2$$
## Table
| Name | Age |
|-------|-----|
| Alice | 24 |
| Bob | 30 |
`;
const renderedHtml = await mr.renderMarkdown(markdownText);
document.getElementById('markdown-content').innerHTML = renderedHtml;
```
- **Code Blocks**: Use Prism.js for syntax highlighting by specifying the language (e.g., `javascript`). - **Code Blocks**: Use Prism.js for syntax highlighting by specifying the language (e.g., `javascript`).
- **Mermaid Diagrams**: Use `mermaid` identifier in code blocks. - **Mermaid Diagrams**: Use `mermaid` identifier in code blocks.
- **Math Equations**: Use `$...$` for inline and `$$...$$` for block equations. - **Math Equations**: Use `$...$` for inline and `$$...$$` for block equations.
- **Tables**: Automatically convert Markdown tables to HTML. - **Tables**: Automatically convert Markdown tables to HTML.
This guide provides a concise overview for integrating and using the `MarkdownRenderer` library in web applications.

View File

@ -619,6 +619,88 @@ async generateCode(prompt, images = [], {
return null; return null;
} }
} }
async generateCodes(prompt, images = [], {
n_predict = null,
stream = false,
temperature = 0.1,
top_k = 50,
top_p = 0.95,
repeat_penalty = 0.8,
repeat_last_n = 40,
seed = null,
n_threads = 8,
service_key = "",
streamingCallback = null
} = {}) {
let response;
const systemHeader = this.custom_message("Generation infos");
const codeInstructions = "Generated code must be put inside the adequate markdown code tag. Use this template:\n```language name\nCode\n```\n";
const fullPrompt = systemHeader + codeInstructions + this.separatorTemplate + prompt;
if (images.length > 0) {
response = await this.generate_with_images(fullPrompt, images, {
n_predict,
temperature,
top_k,
top_p,
repeat_penalty,
repeat_last_n,
callback: streamingCallback
});
} else {
response = await this.generate(fullPrompt, {
n_predict,
temperature,
top_k,
top_p,
repeat_penalty,
repeat_last_n,
callback: streamingCallback
});
}
let codes = this.extractCodeBlocks(response);
let completeCodes = [];
while (codes.length > 0) {
let currentCode = codes.shift();
let codeContent = currentCode.content;
while (!currentCode.is_complete) {
console.warn("The AI did not finish the code, let's ask it to continue");
const continuePrompt = prompt + codeContent + this.userFullHeader + "continue the code. Rewrite last line and continue the code." + this.separatorTemplate + this.aiFullHeader;
response = await this.generate(continuePrompt, {
n_predict,
temperature,
top_k,
top_p,
repeat_penalty,
repeat_last_n,
callback: streamingCallback
});
const newCodes = this.extractCodeBlocks(response);
if (newCodes.length === 0) break;
// Append the content of the first new code block
codeContent += '\n' + newCodes[0].content;
currentCode = newCodes[0];
// If there are more code blocks, add them to the codes array
if (newCodes.length > 1) {
codes = [...newCodes.slice(1), ...codes];
}
}
completeCodes.push({
language: currentCode.language,
content: codeContent
});
}
return completeCodes;
}
extractCodeBlocks(text) { extractCodeBlocks(text) {
const codeBlocks = []; const codeBlocks = [];

View File

@ -419,15 +419,15 @@ class MarkdownRenderer {
} }
} }
async renderMarkdown(text) { async renderMarkdown(text) {
// Handle code blocks with syntax highlighting and copy button
text = await this.renderCodeBlocks(text);
// Handle Mermaid graphs first // Handle Mermaid graphs first
text = await this.renderMermaidDiagrams(text); text = await this.renderMermaidDiagrams(text);
// Handle SVG graphs first // Handle SVG graphs first
text = await this.renderSVG(text); text = await this.renderSVG(text);
// Handle code blocks with syntax highlighting and copy button
text = await this.renderCodeBlocks(text);
// Handle inline code // Handle inline code
text = this.handleInlineCode(text); text = this.handleInlineCode(text);

View File

@ -12,93 +12,6 @@
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }
} }
/* Dark mode styles */
.dark {
color-scheme: dark;
}
.dark body {
background-color: #1a202c;
color: #e2e8f0;
}
.dark .bg-white {
background-color: #2d3748;
}
.dark .text-gray-900 {
color: #e2e8f0;
}
.dark .hover\:bg-gray-200:hover {
background-color: #4a5568;
}
.dark .border {
border-color: #4a5568;
}
.dark input, .dark select {
background-color: #2d3748;
color: #e2e8f0;
}
.dark button {
background-color: #4a5568;
color: #e2e8f0;
}
.dark button:hover {
background-color: #718096;
}
body {
padding-bottom: 60px;
}
main {
min-height: calc(100vh - 60px);
}
#help-section {
max-width: 800px;
margin: 0 auto;
}
#help-section h2 {
text-align: center;
margin-bottom: 1.5rem;
}
#help-section h3 {
color: #553c9a;
}
#help-section .dark h3 {
color: #d6bcfa;
}
#help-section p, #help-section li {
line-height: 1.6;
}
#help-section .bg-purple-100 {
background-color: rgba(237, 233, 254, 0.5);
}
#help-section .dark .bg-purple-900 {
background-color: rgba(76, 29, 149, 0.5);
}
/* Updated styles for dark mode */
.dark #help-section {
color: #e2e8f0;
}
.dark #help-section h2 {
color: #a78bfa;
}
.dark #help-section h3 {
color: #d6bcfa;
}
.dark #help-section .bg-white {
background-color: #1a202c;
}
.dark #help-section .text-gray-600,
.dark #help-section .text-gray-700 {
color: #cbd5e0;
}
.dark #help-section .text-purple-700,
.dark #help-section .text-purple-800 {
color: #e9d8fd;
}
.dark #help-section button {
background-color: #8b5cf6;
}
.dark #help-section button:hover {
background-color: #7c3aed;
}
/* Styles for rendered Markdown */ /* Styles for rendered Markdown */
.markdown-content h1 { .markdown-content h1 {
font-size: 2em; font-size: 2em;

View File

@ -71,7 +71,7 @@ def terminate_thread(thread):
else: else:
ASCIIColors.yellow("Canceled successfully")# The current version of the webui ASCIIColors.yellow("Canceled successfully")# The current version of the webui
lollms_webui_version="12 (alpha) code name: Strawberry" lollms_webui_version="12 (🍓)"

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-751184b2.css vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title> <title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-3c2b6ccc.js"></script> <script type="module" crossorigin src="/assets/index-43037551.js"></script>
<link rel="stylesheet" href="/assets/index-c3916d25.css"> <link rel="stylesheet" href="/assets/index-751184b2.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

23
web/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "lollms-webui-vue", "name": "lollms-webui-vue",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@monaco-editor/loader": "^1.4.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"axios": "^1.3.6", "axios": "^1.3.6",
"baklavajs": "^2.3.0", "baklavajs": "^2.3.0",
@ -26,6 +27,7 @@
"markdown-it-multimd-table": "^4.2.3", "markdown-it-multimd-table": "^4.2.3",
"mathjax": "^3.2.2", "mathjax": "^3.2.2",
"mermaid": "^9.0.0", "mermaid": "^9.0.0",
"monaco-editor": "^0.51.0",
"papaparse": "^5.4.1", "papaparse": "^5.4.1",
"prismjs": "^1.29.0", "prismjs": "^1.29.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",
@ -637,6 +639,17 @@
"@jridgewell/sourcemap-codec": "^1.4.14" "@jridgewell/sourcemap-codec": "^1.4.14"
} }
}, },
"node_modules/@monaco-editor/loader": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
"integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
"dependencies": {
"state-local": "^1.0.6"
},
"peerDependencies": {
"monaco-editor": ">= 0.21.0 < 1"
}
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -2933,6 +2946,11 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/monaco-editor": {
"version": "0.51.0",
"resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.51.0.tgz",
"integrity": "sha512-xaGwVV1fq343cM7aOYB6lVE4Ugf0UyimdD/x5PWcWBMKENwectaEu77FAN7c5sFiyumqeJdX1RPTh1ocioyDjw=="
},
"node_modules/ms": { "node_modules/ms": {
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -3565,6 +3583,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/state-local": {
"version": "1.0.7",
"resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
"integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w=="
},
"node_modules/strip-ansi": { "node_modules/strip-ansi": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",

View File

@ -10,6 +10,7 @@
"format": "prettier --write src/" "format": "prettier --write src/"
}, },
"dependencies": { "dependencies": {
"@monaco-editor/loader": "^1.4.0",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"axios": "^1.3.6", "axios": "^1.3.6",
"baklavajs": "^2.3.0", "baklavajs": "^2.3.0",
@ -28,6 +29,7 @@
"markdown-it-multimd-table": "^4.2.3", "markdown-it-multimd-table": "^4.2.3",
"mathjax": "^3.2.2", "mathjax": "^3.2.2",
"mermaid": "^9.0.0", "mermaid": "^9.0.0",
"monaco-editor": "^0.51.0",
"papaparse": "^5.4.1", "papaparse": "^5.4.1",
"prismjs": "^1.29.0", "prismjs": "^1.29.0",
"socket.io-client": "^4.6.1", "socket.io-client": "^4.6.1",

View File

@ -1,5 +1,7 @@
module.exports = { module.exports = {
plugins: { plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {},
}, },

View File

@ -344,9 +344,7 @@
title="Real-time audio mode" title="Real-time audio mode"
> >
<template #icon> <template #icon>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 🍓
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.828-2.828"/>
</svg>
</template> </template>
</ChatBarButton> </ChatBarButton>

View File

@ -105,7 +105,7 @@
<line x1="15" y1="9" x2="15.01" y2="9"></line> <line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg> </svg>
</div> </div>
<span class="absolute hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 bottom-full left-1/2 transform -translate-x-1/2 mb-2 whitespace-nowrap"> <span class="absolute hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 top-full left-1/2 transform -translate-x-1/2 mb-2 whitespace-nowrap">
{{ is_fun_mode ? 'Turn off fun mode' : 'Turn on fun mode' }} {{ is_fun_mode ? 'Turn off fun mode' : 'Turn on fun mode' }}
</span> </span>
</div> </div>
@ -503,7 +503,8 @@ export default {
localStorage.setItem("theme", "dark") localStorage.setItem("theme", "dark")
this.userTheme == "dark" this.userTheme == "dark"
this.iconToggle() this.iconToggle()
// Dispatch the themeChanged event
window.dispatchEvent(new Event('themeChanged'));
}, },
iconToggle() { iconToggle() {
this.sunIcon.classList.toggle("display-none"); this.sunIcon.classList.toggle("display-none");

View File

@ -11,7 +11,7 @@
</div> </div>
<div class="flex flex-col items-start"> <div class="flex flex-col items-start">
<h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400"> <h1 class="text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 dark:from-indigo-400 dark:to-purple-400">
LoLLMS L🍓LLMS
</h1> </h1>
<p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2"> <p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
Lord of Large Language And Multimodal Systems Lord of Large Language And Multimodal Systems
@ -21,14 +21,14 @@
<div class="space-y-8 animate-fade-in-up"> <div class="space-y-8 animate-fade-in-up">
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200"> <h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
Welcome to LoLLMS WebUI Welcome to L🍓LLMS WebUI
</h2> </h2>
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"> <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
Embark on a journey through the realm of advanced AI with LoLLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence. Embark on a journey through the realm of advanced AI with L🍓LLMS, your ultimate companion for intelligent conversations and multimodal interactions. Unleash the power of large language models and explore new frontiers in artificial intelligence.
</p> </p>
<div class="mt-12 space-y-6"> <div class="mt-12 space-y-6">
<p class="text-lg text-gray-700 dark:text-gray-300"> <p class="text-lg text-gray-700 dark:text-gray-300">
Discover the capabilities of LoLLMS: Discover the capabilities of L🍓LLMS:
</p> </p>
<ul class="text-left list-disc list-inside text-gray-600 dark:text-gray-300 space-y-2"> <ul class="text-left list-disc list-inside text-gray-600 dark:text-gray-300 space-y-2">
<li>Engage in natural language conversations</li> <li>Engage in natural language conversations</li>

View File

@ -73,12 +73,12 @@ const router = createRouter({
component: DiscussionsView component: DiscussionsView
}, },
{ {
path: '/', path: '/interactive/',
name: 'interactive', name: 'interactive',
component: InteractiveView component: InteractiveView
}, },
{ {
path: '/', path: '/nodes/',
name: 'nodes', name: 'nodes',
component: NodesView component: NodesView
}, },

View File

@ -1921,14 +1921,14 @@ export default {
if (item) { if (item) {
if (item.id) { if (item.id) {
const realTitle = item.title ? item.title === "untitled" ? "New discussion" : item.title : "New discussion" const realTitle = item.title ? item.title === "untitled" ? "New discussion" : item.title : "New discussion"
document.title = 'LoLLMS WebUI - ' + realTitle document.title = 'L🍓LLMS WebUI - ' + realTitle
} else { } else {
const title = item || "Welcome" const title = item || "Welcome"
document.title = 'LoLLMS WebUI - ' + title document.title = 'L🍓LLMS WebUI - ' + title
} }
} else { } else {
const title = item || "Welcome" const title = item || "Welcome"
document.title = 'LoLLMS WebUI - ' + title document.title = 'L🍓LLMS WebUI - ' + title
} }
}, },

View File

@ -46,9 +46,7 @@
<ChatBarButton @click="speak" :class="{ 'text-red-500': isTalking }" title="Convert text to audio (not saved, uses your browser's TTS service)"> <ChatBarButton @click="speak" :class="{ 'text-red-500': isTalking }" title="Convert text to audio (not saved, uses your browser's TTS service)">
<template #icon> <template #icon>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 🍓
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.828-2.828" />
</svg>
</template> </template>
</ChatBarButton> </ChatBarButton>

1
zoos/extensions_zoo Submodule

@ -0,0 +1 @@
Subproject commit 803b608354940b14642705d8dcb94b196b2a610d

@ -1 +1 @@
Subproject commit faa86545fe70d337e37cf32eac09e1d94808c622 Subproject commit 5d235b6959e5c4d77696b04c51eb4f91fda6d868

@ -1 +1 @@
Subproject commit 2d9f0deb76aa3a5533b5d0c903874e03346829ce Subproject commit 90b8768a290ceb72d9fc471bda871a8e2af724d5