This commit is contained in:
Saifeddine ALOUI 2024-04-21 20:48:05 +02:00
parent 73a2b74fe4
commit ff7daabc91
11 changed files with 349 additions and 233 deletions

View File

@ -72,7 +72,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="9.5" lollms_webui_version="9.6"

View File

@ -64,5 +64,22 @@ weird_palette_str = """
--color-bg-light-discussion: #f4c2c2; --color-bg-light-discussion: #f4c2c2;
--color-bg-light-discussion-odd: #fae7b5; --color-bg-light-discussion-odd: #fae7b5;
""" """
weird_palette_str = """
--color-primary: #0e8ef0;
--color-primary-light: #3dabff;
--color-secondary: #0fd974;
--color-accent: #f0700e;
--color-bg-dark: #132e59;
--color-bg-dark-tone: #25477d;
--color-bg-dark-tone-panel: #4367a3;
--color-bg-dark-code-block: #2254a7;
--color-bg-light: #e2edff;
--color-bg-light-tone: #b9d2f7;
--color-bg-light-code-block: #cad7ed;
--color-bg-light-tone-panel: #8fb5ef;
--color-bg-dark-discussion: #435E8A;
--color-bg-dark-discussion-odd: #284471;
--color-bg-light-discussion: #c5d8f8;
--color-bg-light-discussion-odd: #d6e7ff;
"""
parse_and_visualize_weird_palette(weird_palette_str) parse_and_visualize_weird_palette(weird_palette_str)

8
web/dist/assets/index-4c43917d.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

File diff suppressed because one or more lines are too long

4
web/dist/index.html vendored
View File

@ -6,8 +6,8 @@
<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 - Welcome</title> <title>LoLLMS WebUI - Welcome</title>
<script type="module" crossorigin src="/assets/index-f743d033.js"></script> <script type="module" crossorigin src="/assets/index-fcb10c0e.js"></script>
<link rel="stylesheet" href="/assets/index-c40831c0.css"> <link rel="stylesheet" href="/assets/index-4c43917d.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@ -84,16 +84,17 @@ ol {
--color-primary-light: #3dabff; --color-primary-light: #3dabff;
--color-secondary: #0fd974; --color-secondary: #0fd974;
--color-accent: #f0700e; --color-accent: #f0700e;
--color-bg-dark: #132e59; --color-bg-light-panel: #7cb5ec;
--color-bg-dark-tone: #25477d;
--color-bg-dark-tone-panel: #4367a3;
--color-bg-dark-code-block: #2254a7;
--color-bg-light: #e2edff; --color-bg-light: #e2edff;
--color-bg-light-tone: #b9d2f7; --color-bg-light-tone: #b9d2f7;
--color-bg-light-code-block: #cad7ed; --color-bg-light-code-block: #cad7ed;
--color-bg-light-tone-panel: #8fb5ef; --color-bg-light-tone-panel: #8fb5ef;
--color-bg-dark-discussion: #435E8A;
--color-bg-dark-discussion-odd: #284471;
--color-bg-light-discussion: #c5d8f8; --color-bg-light-discussion: #c5d8f8;
--color-bg-light-discussion-odd: #d6e7ff; --color-bg-light-discussion-odd: #d6e7ff;
--color-bg-dark: #132e59;
--color-bg-dark-tone: #25477d;
--color-bg-dark-tone-panel: #4367a3;
--color-bg-dark-code-block: #2254a7;
--color-bg-dark-discussion: #435E8A;
--color-bg-dark-discussion-odd: #284471;
} }

View File

@ -2,16 +2,45 @@
<div v-if="$store.state.ready" class="container flex flex-col sm:flex-row items-center"> <div v-if="$store.state.ready" class="container flex flex-col sm:flex-row items-center">
<div class="w-full"> <div class="w-full">
<div class="flex flex-row font-medium nav-ul"> <div class="flex flex-row font-medium nav-ul">
<RouterLink :to="{ name: 'discussions' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"> <RouterLink
:to="{ name: 'discussions' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('discussions'),
'bounce-in': isRouteActive('discussions')
}">
Discussions Discussions
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'playground' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"> <RouterLink
:to="{ name: 'playground' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('playground'),
'bounce-in': isRouteActive('playground')
}"
>
Playground Playground
</RouterLink> </RouterLink>
<RouterLink v-if="$store.state.config.enable_comfyui_service" :to="{ name: 'ComfyUI' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"> <RouterLink
v-if="$store.state.config.enable_comfyui_service"
:to="{ name: 'ComfyUI' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('ComfyUI'),
'bounce-in': isRouteActive('ComfyUI')
}"
>
ComfyUI ComfyUI
</RouterLink> </RouterLink>
<RouterLink v-if="$store.state.config.enable_voice_service" :to="{ name: 'interactive' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"> <RouterLink
v-if="$store.state.config.enable_voice_service"
:to="{ name: 'interactive' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('interactive'),
'bounce-in': isRouteActive('interactive')
}"
>
interactive interactive
</RouterLink> </RouterLink>
<!-- <!--
@ -29,10 +58,24 @@
</RouterLink> </RouterLink>
--> -->
<RouterLink :to="{ name: 'settings' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"> <RouterLink
:to="{ name: 'settings' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('settings'),
'bounce-in': isRouteActive('settings')
}"
>
Settings Settings
</RouterLink> </RouterLink>
<RouterLink :to="{ name: 'help' }" class="link-item dark:link-item-dark bg-light hover:bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"> <RouterLink
:to="{ name: 'help' }"
class="link-item dark:link-item-dark bg-bg-light-tone dark:bg-bg-dark-tone hover:dark:bg-bg-light-tone"
:class="{
'text-green-200 dark:text-green-100 font-bold bg-bg-light-panel': isRouteActive('help'),
'bounce-in': isRouteActive('help')
}"
>
Help Help
</RouterLink> </RouterLink>
</div> </div>
@ -46,8 +89,32 @@
import { RouterLink } from 'vue-router'; import { RouterLink } from 'vue-router';
import { store } from '../main'; import { store } from '../main';
</script> </script>
<script>
export default {
name: 'Navigation',
data() {
return {
// component data
};
},
methods: {
isRouteActive(routeName) {
try{
return this.$route.name === routeName;
}
catch{
console.log("routeName not found")
return False;
}
}
// your methods
},
// other options
};
</script>
<style> <style>
.container { .container {
/* Remove margin and padding */ /* Remove margin and padding */
margin: 0; margin: 0;
@ -109,5 +176,35 @@
align-items: center; align-items: center;
padding: 5px; padding: 5px;
} }
.fade-in {
animation: fadeInAnimation 0.5s;
}
@keyframes fadeInAnimation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.bounce-in {
animation: bounceInAnimation 0.5s;
}
@keyframes bounceInAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style> </style>

View File

@ -41,7 +41,7 @@
<!-- LEFT SIDE PANEL --> <!-- LEFT SIDE PANEL -->
<div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar " <div id="leftPanel" class="flex flex-col flex-grow overflow-y-scroll no-scrollbar "
@dragover.stop.prevent="setDropZoneDiscussion()"> @dragover.stop.prevent="setDropZoneDiscussion()">
<div class="text-white bg-primary-light sticky z-10 top-0 bg-bg-light-tone dark:bg-bg-dark-tone shadow-md "> <div class="text-white bg-bg-light-panel sticky z-10 top-0 dark:bg-bg-dark-tone shadow-md ">
@ -229,8 +229,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="absolute bottom-0 left-0 w-full bg-primary-light dark:bg-bg-dark-tone text-white py-2 cursor-pointer hover:text-accent" @click="showDatabaseSelector"> <div class="absolute bottom-0 left-0 w-full bg-bg-light-panel dark:bg-bg-dark-tone text-white py-2 cursor-pointer hover:text-accent" @click="showDatabaseSelector">
<p class="ml-2 text-center shadow-lg">{{ formatted_database_name }}</p> <p class="text-center text-shadow: 2px 2px 4px #000000;">{{ formatted_database_name.replace("_"," ") }}</p>
</div> </div>
</div> </div>
</transition> </transition>
@ -588,7 +588,7 @@ export default {
async applyConfiguration() { async applyConfiguration() {
this.loading = true; this.loading = true;
const res = await axios.post('/apply_settings', {"config":this.$store.state.config}) const res = await axios.post('/apply_settings', {"client_id":this.$store.state.client_id, "config":this.$store.state.config})
this.loading = false; this.loading = false;
//console.log('apply-res',res) //console.log('apply-res',res)
if (res.data.status) { if (res.data.status) {

View File

@ -14,18 +14,19 @@ module.exports = {
'primary-light': 'var(--color-primary-light)', 'primary-light': 'var(--color-primary-light)',
'secondary': 'var(--color-secondary)', 'secondary': 'var(--color-secondary)',
'accent': 'var(--color-accent)', 'accent': 'var(--color-accent)',
'bg-light': 'var(--color-bg-light)',
'bg-light-tone': 'var(--color-bg-light-tone)',
'bg-light-panel': 'var(--color-bg-light-panel)',
'bg-light-code-block': 'var(--color-bg-light-code-block)',
'bg-light-tone-panel': 'var(--color-bg-light-tone-panel)',
'bg-light-discussion': 'var(--color-bg-light-discussion)',
'bg-light-discussion-odd': 'var(--color-bg-light-discussion-odd)',
'bg-dark': 'var(--color-bg-dark)', 'bg-dark': 'var(--color-bg-dark)',
'bg-dark-tone': 'var(--color-bg-dark-tone)', 'bg-dark-tone': 'var(--color-bg-dark-tone)',
'bg-dark-tone-panel': 'var(--color-bg-dark-tone-panel)', 'bg-dark-tone-panel': 'var(--color-bg-dark-tone-panel)',
'bg-dark-code-block': 'var(--color-bg-dark-code-block)', 'bg-dark-code-block': 'var(--color-bg-dark-code-block)',
'bg-light': 'var(--color-bg-light)',
'bg-light-tone': 'var(--color-bg-light-tone)',
'bg-light-code-block': 'var(--color-bg-light-code-block)',
'bg-light-tone-panel': 'var(--color-bg-light-tone-panel)',
'bg-dark-discussion': 'var(--color-bg-dark-discussion)', 'bg-dark-discussion': 'var(--color-bg-dark-discussion)',
'bg-dark-discussion-odd': 'var(--color-bg-dark-discussion-odd)', 'bg-dark-discussion-odd': 'var(--color-bg-dark-discussion-odd)'
'bg-light-discussion': 'var(--color-bg-light-discussion)',
'bg-light-discussion-odd': 'var(--color-bg-light-discussion-odd)'
}, },
fontFamily: { fontFamily: {
sans: ['PTSans', 'Roboto', 'sans-serif'] sans: ['PTSans', 'Roboto', 'sans-serif']

@ -1 +1 @@
Subproject commit 0f9cac61aec00736537de463a0632f5e35a6d6f3 Subproject commit afdd2332d9c124eef49c3433d64987b52f42dd1e