mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-18 20:17:50 +00:00
Enhanced the UI
This commit is contained in:
Saifeddine ALOUI
parent
6a7ca6126a
commit
e6e21261f2
6
docs/youtube/appsMaker.md
Normal file
6
docs/youtube/appsMaker.md
Normal 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.
|
||||
@ -15,15 +15,9 @@ The `MarkdownRenderer` library is a JavaScript class for converting Markdown con
|
||||
|
||||
### 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
|
||||
<!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 -->
|
||||
<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>
|
||||
@ -36,18 +30,18 @@ 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/components/prism-javascript.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 -->
|
||||
<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>
|
||||
|
||||
<!-- MarkdownRenderer -->
|
||||
<script src="/lollms_assets/js/lollms_markdown_renderer"></script>
|
||||
<link rel="stylesheet" href="/lollms_assets/css/lollms_styles">
|
||||
</head>
|
||||
<body>
|
||||
<div id="markdown-content"></div>
|
||||
<script>
|
||||
(async () => {
|
||||
<link rel="stylesheet" href="/lollms_assets/css/lollms_markdown_renderer">
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
```javascript
|
||||
const mr = new MarkdownRenderer();
|
||||
const markdownText = `
|
||||
# Sample Markdown
|
||||
@ -78,17 +72,10 @@ Include the following in your HTML file:
|
||||
`;
|
||||
const renderedHtml = await mr.renderMarkdown(markdownText);
|
||||
document.getElementById('markdown-content').innerHTML = renderedHtml;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
- **Code Blocks**: Use Prism.js for syntax highlighting by specifying the language (e.g., `javascript`).
|
||||
- **Mermaid Diagrams**: Use `mermaid` identifier in code blocks.
|
||||
- **Math Equations**: Use `$...$` for inline and `$$...$$` for block equations.
|
||||
- **Tables**: Automatically convert Markdown tables to HTML.
|
||||
|
||||
This guide provides a concise overview for integrating and using the `MarkdownRenderer` library in web applications.
|
||||
@ -619,6 +619,88 @@ async generateCode(prompt, images = [], {
|
||||
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) {
|
||||
const codeBlocks = [];
|
||||
|
||||
@ -419,15 +419,15 @@ class MarkdownRenderer {
|
||||
}
|
||||
}
|
||||
async renderMarkdown(text) {
|
||||
// Handle code blocks with syntax highlighting and copy button
|
||||
text = await this.renderCodeBlocks(text);
|
||||
|
||||
// Handle Mermaid graphs first
|
||||
text = await this.renderMermaidDiagrams(text);
|
||||
|
||||
// Handle SVG graphs first
|
||||
text = await this.renderSVG(text);
|
||||
|
||||
// Handle code blocks with syntax highlighting and copy button
|
||||
text = await this.renderCodeBlocks(text);
|
||||
|
||||
// Handle inline code
|
||||
text = this.handleInlineCode(text);
|
||||
|
||||
|
||||
@ -12,93 +12,6 @@
|
||||
0% { transform: rotate(0deg); }
|
||||
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 */
|
||||
.markdown-content h1 {
|
||||
font-size: 2em;
|
||||
|
||||
@ -71,7 +71,7 @@ def terminate_thread(thread):
|
||||
else:
|
||||
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
8
web/dist/assets/index-751184b2.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-c3916d25.css
vendored
8
web/dist/assets/index-c3916d25.css
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-3c2b6ccc.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-c3916d25.css">
|
||||
<script type="module" crossorigin src="/assets/index-43037551.js"></script>
|
||||
<link rel="stylesheet" href="/assets/index-751184b2.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
23
web/package-lock.json
generated
23
web/package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "lollms-webui-vue",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"@monaco-editor/loader": "^1.4.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"axios": "^1.3.6",
|
||||
"baklavajs": "^2.3.0",
|
||||
@ -26,6 +27,7 @@
|
||||
"markdown-it-multimd-table": "^4.2.3",
|
||||
"mathjax": "^3.2.2",
|
||||
"mermaid": "^9.0.0",
|
||||
"monaco-editor": "^0.51.0",
|
||||
"papaparse": "^5.4.1",
|
||||
"prismjs": "^1.29.0",
|
||||
"socket.io-client": "^4.6.1",
|
||||
@ -637,6 +639,17 @@
|
||||
"@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": {
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
@ -2933,6 +2946,11 @@
|
||||
"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": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
@ -3565,6 +3583,11 @@
|
||||
"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": {
|
||||
"version": "6.0.1",
|
||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@monaco-editor/loader": "^1.4.0",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"axios": "^1.3.6",
|
||||
"baklavajs": "^2.3.0",
|
||||
@ -28,6 +29,7 @@
|
||||
"markdown-it-multimd-table": "^4.2.3",
|
||||
"mathjax": "^3.2.2",
|
||||
"mermaid": "^9.0.0",
|
||||
"monaco-editor": "^0.51.0",
|
||||
"papaparse": "^5.4.1",
|
||||
"prismjs": "^1.29.0",
|
||||
"socket.io-client": "^4.6.1",
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
'tailwindcss/nesting': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
|
||||
@ -344,9 +344,7 @@
|
||||
title="Real-time audio mode"
|
||||
>
|
||||
<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>
|
||||
</ChatBarButton>
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@
|
||||
<line x1="15" y1="9" x2="15.01" y2="9"></line>
|
||||
</svg>
|
||||
</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' }}
|
||||
</span>
|
||||
</div>
|
||||
@ -503,7 +503,8 @@ export default {
|
||||
localStorage.setItem("theme", "dark")
|
||||
this.userTheme == "dark"
|
||||
this.iconToggle()
|
||||
|
||||
// Dispatch the themeChanged event
|
||||
window.dispatchEvent(new Event('themeChanged'));
|
||||
},
|
||||
iconToggle() {
|
||||
this.sunIcon.classList.toggle("display-none");
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</div>
|
||||
<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">
|
||||
LoLLMS
|
||||
L🍓LLMS
|
||||
</h1>
|
||||
<p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
|
||||
Lord of Large Language And Multimodal Systems
|
||||
@ -21,14 +21,14 @@
|
||||
|
||||
<div class="space-y-8 animate-fade-in-up">
|
||||
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
|
||||
Welcome to LoLLMS WebUI
|
||||
Welcome to L🍓LLMS WebUI
|
||||
</h2>
|
||||
<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>
|
||||
<div class="mt-12 space-y-6">
|
||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||
Discover the capabilities of LoLLMS:
|
||||
Discover the capabilities of L🍓LLMS:
|
||||
</p>
|
||||
<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>
|
||||
|
||||
@ -73,12 +73,12 @@ const router = createRouter({
|
||||
component: DiscussionsView
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
path: '/interactive/',
|
||||
name: 'interactive',
|
||||
component: InteractiveView
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
path: '/nodes/',
|
||||
name: 'nodes',
|
||||
component: NodesView
|
||||
},
|
||||
|
||||
@ -1921,14 +1921,14 @@ export default {
|
||||
if (item) {
|
||||
if (item.id) {
|
||||
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 {
|
||||
const title = item || "Welcome"
|
||||
document.title = 'LoLLMS WebUI - ' + title
|
||||
document.title = 'L🍓LLMS WebUI - ' + title
|
||||
}
|
||||
} else {
|
||||
const title = item || "Welcome"
|
||||
document.title = 'LoLLMS WebUI - ' + title
|
||||
document.title = 'L🍓LLMS WebUI - ' + title
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
@ -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)">
|
||||
<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>
|
||||
</ChatBarButton>
|
||||
|
||||
|
||||
1
zoos/extensions_zoo
Submodule
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
|
||||
Loading…
Reference in New Issue
Block a user