ExternalVendorCode/lollms-webui
1
0
Fork 0
mirror of https://github.com/ParisNeo/lollms-webui.git synced 2024-12-18 20:17:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhanced ui

Browse Source
This commit is contained in:
Saifeddine ALOUI 2024-07-31 02:47:15 +02:00
parent 981323eb26
commit 12c75a3e2e
6 changed files with 409 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

376
web/dist/assets/index-fe749e52.js → web/dist/assets/index-4ac94331.js vendored
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-9ddef0b4.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

8
web/dist/assets/index-c6c58977.css vendored
View File

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>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LoLLMS WebUI</title>
<script type="module" crossorigin src="/assets/index-fe749e52.js"></script>
<link rel="stylesheet" href="/assets/index-c6c58977.css">
<script type="module" crossorigin src="/assets/index-4ac94331.js"></script>
<link rel="stylesheet" href="/assets/index-9ddef0b4.css">
</head>
<body>
<div id="app"></div>

326
web/src/components/TopBar.vue
View File

@ -1,160 +1,125 @@
<template>
<!-- <link v-if="codeBlockStylesheet" rel="stylesheet" :href="codeBlockStylesheet"> -->
<header class=" top-0 shadow-lg">
<nav class="container flex flex-col lg:flex-row item-center gap-2 pb-0 ">
<!-- LOGO -->
<RouterLink :to="{ name: 'discussions' }">
<div class="flex items-center gap-3 flex-1">
<img class="w-12 hover:scale-95 duration-150" title="LoLLMS WebUI" :src="$store.state.config==null?storeLogo:$store.state.config.app_custom_logo!=''?'/user_infos/'+$store.state.config.app_custom_logo: storeLogo" alt="Logo">
<div class="flex flex-col">
<p class="text-2xl font-bold text-2xl drop-shadow-md align-middle">LoLLMS</p>
<p class="text-gray-400 ">One tool to rule them all</p>
</div>
</div>
</RouterLink>
<!-- GITHUB AND THEME BUTTONS -->
<div class="flex gap-3 flex-1 items-center justify-end">
<div v-if="isModelOK" title="Model is ok" class="text-green-500 cursor-pointer">
<b class="text-2xl">M</b>
</div>
<div v-if="!isModelOK" title="Model is not ok" class="text-red-500 cursor-pointer">
<b class="text-2xl">M</b>
</div>
<div v-if="!isGenerating" title="Text is not being generated. Ready to generate" class="text-green-500 cursor-pointer">
<i data-feather="flag"></i>
</div>
<div v-if="isGenerating" title="Generation in progress..." class="text-red-500 cursor-pointer">
<i data-feather="flag"></i>
</div>
<div v-if="isConnected" title="Connection status: Connected" class="text-green-500 cursor-pointer">
<i data-feather="zap"></i>
</div>
<div v-if="!isConnected" title="Connection status: Not connected" class="text-red-500 cursor-pointer">
<i data-feather="zap-off"></i>
</div>
<a href="#" @click="restartProgram">
<div class="text-2xl hover:text-primary duration-150" title="restart program">
<i data-feather="power"></i>
</div>
</a>
<a href="#" @click="refreshPage">
<div class="text-2xl hover:text-primary duration-150" title="refresh page">
<i data-feather="refresh-ccw"></i>
</div>
</a>
<a href="https://github.com/ParisNeo/lollms-webui" target="_blank">
<div class="text-2xl hover:text-primary duration-150" title="Fast API doc">
<a href="/docs" target="_blank"><img :src="FastAPI" width="75" height="25"></a>
</div>
</a>
<a href="https://github.com/ParisNeo/lollms-webui" target="_blank">
<div class="text-2xl hover:text-primary duration-150" title="Visit repository page">
<i data-feather="github"></i>
</div>
</a>
<a href="https://www.youtube.com/channel/UCJzrg0cyQV2Z30SQ1v2FdSQ" target="_blank">
<div class="text-2xl hover:text-primary duration-150" title="Visit my youtube channel">
<i data-feather="youtube"></i>
</div>
</a>
<a href="https://x.com/ParisNeo_AI" target="_blank">
<div class="text-2xl hover:fill-primary dark:fill-white dark:hover:fill-primary duration-150" title="Follow me on my twitter acount">
<svg class="w-10 h-10 rounded-lg object-fill dark:text-white" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1668.56 1221.19" style="enable-background:new 0 0 1668.56 1221.19;" xml:space="preserve">
<g id="layer1" transform="translate(52.390088,-25.058597)">
<path id="path1009" d="M283.94,167.31l386.39,516.64L281.5,1104h87.51l340.42-367.76L984.48,1104h297.8L874.15,558.3l361.92-390.99
h-87.51l-313.51,338.7l-253.31-338.7H283.94z M412.63,231.77h136.81l604.13,807.76h-136.81L412.63,231.77z"/>
</g>
</svg>
</div>
</a>
<a href="https://discord.com/channels/1092918764925882418" target="_blank">
<div class="text-2xl hover:text-primary duration-150" title="Visit my discord channel">
<img :src="discord" width="25" height="25">
</div>
</a>
<div class="sun text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Swith to Light theme"
@click="themeSwitch()">
<i data-feather="sun"></i>
</div>
<div class="moon text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Swith to Dark theme"
@click="themeSwitch()">
<i data-feather="moon"></i>
</div>
<div class="moon text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Lollms News"
@click="showNews()">
<img :src="static_info">
</div>
<div v-if="is_fun_mode" title="fun mode is on press to turn off" class="text-green-500 cursor-pointer" @click="fun_mode_off()">
<img class="w-5 h-5" :src="fun_mode">
</div>
<div v-else title="fun mode is off press to turn on" class="text-red-500 cursor-pointer" @click="fun_mode_on()">
<img class="w-5 h-5" :src="normal_mode">
</div>
<div class="language-selector relative" style="position: relative;">
<button @click="toggleLanguageMenu" class="bg-transparent text-black dark:text-white py-1 px-1 rounded font-bold uppercase transition-colors duration-300 hover:bg-blue-500">
{{ $store.state.language.slice(0, 2) }}
</button>
<div v-if="isLanguageMenuVisible" ref="languageMenu" class="container language-menu absolute left-0 mt-1 bg-white dark:bg-bg-dark-tone rounded shadow-lg z-10 overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" style="position: absolute; top: 100%; width: 200px; max-height: 300px; overflow-y: auto;">
<ul style="list-style-type: none; padding-left: 0; margin-left: 0;">
<li v-for="language in languages" :key="language" class="relative flex items-center" style="padding-left: 0; margin-left: 0;">
<button @click="deleteLanguage(language)" class="mr-2 text-red-500 hover:text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded-full">✕</button>
<div @click="selectLanguage(language)" :class="{'cursor-pointer hover:bg-blue-500 hover:text-white py-2 px-4 block whitespace-no-wrap': true, 'bg-blue-500 text-white': language === $store.state.language, 'flex-grow': true}">
{{ language }}
</div>
</li>
<li class="cursor-pointer hover:text-white py-0 px-0 block whitespace-no-wrap">
<input type="text" v-model="customLanguage" @keyup.enter.prevent="addCustomLanguage" placeholder="Enter language..." class="bg-transparent border border-gray-300 rounded py-0 px-0 mx-0 my-1 w-full">
</li>
</ul>
</div>
</div>
<header class="top-0 shadow-lg">
<nav class="container flex flex-col lg:flex-row items-center gap-2 pb-0">
<!-- LOGO -->
<RouterLink :to="{ name: 'discussions' }" class="flex items-center gap-3 flex-1">
<div class="logo-container">
<img class="w-12 h-12 rounded-full object-cover logo-image"
:src="$store.state.config == null ? storeLogo : $store.state.config.app_custom_logo != '' ? '/user_infos/' + $store.state.config.app_custom_logo : storeLogo"
alt="Logo" title="LoLLMS WebUI">
</div>
</nav>
<!-- NAVIGATION BUTTONS -->
<Navigation />
<Toast ref="toast" />
<MessageBox ref="messageBox" />
<div v-show="progress_visibility" role="status" class="fixed m-0 p-2 left-2 bottom-2 min-w-[24rem] max-w-[24rem] h-20 flex flex-col justify-center items-center pb-4 bg-blue-500 rounded-lg shadow-lg z-50 background-a">
<ProgressBar ref="progress" :progress="progress_value" class="w-full h-4"></ProgressBar>
<p class="text-2xl animate-pulse mt-2 text-white">{{ loading_infos }} ...</p>
</div>
<UniversalForm ref="universalForm" class="z-20" />
<YesNoDialog ref="yesNoDialog" class="z-20" />
<PersonalityEditor ref="personality_editor" :config="currentPersonConfig" :personality="selectedPersonality" ></PersonalityEditor>
<div id="app">
<!-- Your other components... -->
<PopupViewer ref="news"/>
<div class="flex flex-col logo-text">
<p class="text-2xl font-bold drop-shadow-md align-middle">LoLLMS</p>
<p class="text-gray-400">One tool to rule them all</p>
</div>
</RouterLink>
<!-- GITHUB AND THEME BUTTONS -->
<div class="flex gap-3 flex-1 items-center justify-end">
<div v-if="isModelOK" title="Model is ok" class="text-green-500 cursor-pointer">
<b class="text-2xl">M</b>
</div>
<div v-else title="Model is not ok" class="text-red-500 cursor-pointer">
<b class="text-2xl">M</b>
</div>
<div v-if="!isGenerating" title="Text is not being generated. Ready to generate" class="text-green-500 cursor-pointer">
<i data-feather="flag"></i>
</div>
<div v-else title="Generation in progress..." class="text-red-500 cursor-pointer">
<i data-feather="flag"></i>
</div>
<div v-if="isConnected" title="Connection status: Connected" class="text-green-500 cursor-pointer">
<i data-feather="zap"></i>
</div>
<div v-else title="Connection status: Not connected" class="text-red-500 cursor-pointer">
<i data-feather="zap-off"></i>
</div>
<a href="#" @click="restartProgram" class="text-2xl hover:text-primary duration-150" title="restart program">
<i data-feather="power"></i>
</a>
<a href="#" @click="refreshPage" class="text-2xl hover:text-primary duration-150" title="refresh page">
<i data-feather="refresh-ccw"></i>
</a>
<a href="/docs" target="_blank" class="text-2xl hover:text-primary duration-150" title="Fast API doc">
<img :src="FastAPI" width="75" height="25" alt="Fast API">
</a>
<a href="https://github.com/ParisNeo/lollms-webui" target="_blank" class="text-2xl hover:text-primary duration-150" title="Visit repository page">
<i data-feather="github"></i>
</a>
<a href="https://www.youtube.com/channel/UCJzrg0cyQV2Z30SQ1v2FdSQ" target="_blank" class="text-2xl hover:text-primary duration-150" title="Visit my youtube channel">
<i data-feather="youtube"></i>
</a>
<a href="https://x.com/ParisNeo_AI" target="_blank" class="text-2xl hover:fill-primary dark:fill-white dark:hover:fill-primary duration-150" title="Follow me on my twitter acount">
<svg class="w-10 h-10 rounded-lg object-fill dark:text-white" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1668.56 1221.19" style="enable-background:new 0 0 1668.56 1221.19;" xml:space="preserve">
<g id="layer1" transform="translate(52.390088,-25.058597)">
<path id="path1009" d="M283.94,167.31l386.39,516.64L281.5,1104h87.51l340.42-367.76L984.48,1104h297.8L874.15,558.3l361.92-390.99
h-87.51l-313.51,338.7l-253.31-338.7H283.94z M412.63,231.77h136.81l604.13,807.76h-136.81L412.63,231.77z"/>
</g>
</svg>
</a>
<a href="https://discord.com/channels/1092918764925882418" target="_blank" class="text-2xl hover:text-primary duration-150" title="Visit my discord channel">
<img :src="discord" width="25" height="25" alt="Discord">
</a>
<div class="sun text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Switch to Light theme" @click="themeSwitch()">
<i data-feather="sun"></i>
</div>
<div class="moon text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Switch to Dark theme" @click="themeSwitch()">
<i data-feather="moon"></i>
</div>
<div class="text-2xl w-6 hover:text-primary duration-150 cursor-pointer" title="Lollms News" @click="showNews()">
<img :src="static_info" alt="News">
</div>
<div v-if="is_fun_mode" title="fun mode is on press to turn off" class="text-green-500 cursor-pointer" @click="fun_mode_off()">
<img class="w-5 h-5" :src="fun_mode" alt="Fun mode on">
</div>
<div v-else title="fun mode is off press to turn on" class="text-red-500 cursor-pointer" @click="fun_mode_on()">
<img class="w-5 h-5" :src="normal_mode" alt="Fun mode off">
</div>
<div class="language-selector relative">
<button @click="toggleLanguageMenu" class="bg-transparent text-black dark:text-white py-1 px-1 rounded font-bold uppercase transition-colors duration-300 hover:bg-blue-500">
{{ $store.state.language.slice(0, 2) }}
</button>
<div v-if="isLanguageMenuVisible" ref="languageMenu" class="container language-menu absolute left-0 mt-1 bg-white dark:bg-bg-dark-tone rounded shadow-lg z-10 overflow-y-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary" style="position: absolute; top: 100%; width: 200px; max-height: 300px; overflow-y: auto;">
<ul style="list-style-type: none; padding-left: 0; margin-left: 0;">
<li v-for="language in languages" :key="language" class="relative flex items-center" style="padding-left: 0; margin-left: 0;">
<button @click="deleteLanguage(language)" class="mr-2 text-red-500 hover:text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 rounded-full">✕</button>
<div @click="selectLanguage(language)" :class="{'cursor-pointer hover:bg-blue-500 hover:text-white py-2 px-4 block whitespace-no-wrap': true, 'bg-blue-500 text-white': language === $store.state.language, 'flex-grow': true}">
{{ language }}
</div>
</li>
<li class="cursor-pointer hover:text-white py-0 px-0 block whitespace-no-wrap">
<input type="text" v-model="customLanguage" @keyup.enter.prevent="addCustomLanguage" placeholder="Enter language..." class="bg-transparent border border-gray-300 rounded py-0 px-0 mx-0 my-1 w-full">
</li>
</ul>
</div>
</div>
</div>
</nav>
<!-- NAVIGATION BUTTONS -->
<Navigation />
<Toast ref="toast" />
<MessageBox ref="messageBox" />
<div v-show="progress_visibility" role="status" class="fixed m-0 p-2 left-2 bottom-2 min-w-[24rem] max-w-[24rem] h-20 flex flex-col justify-center items-center pb-4 bg-blue-500 rounded-lg shadow-lg z-50 background-a">
<ProgressBar ref="progress" :progress="progress_value" class="w-full h-4"></ProgressBar>
<p class="text-2xl animate-pulse mt-2 text-white">{{ loading_infos }} ...</p>
</div>
<UniversalForm ref="universalForm" class="z-20" />
<YesNoDialog ref="yesNoDialog" class="z-20" />
<PersonalityEditor ref="personality_editor" :config="currentPersonConfig" :personality="selectedPersonality"></PersonalityEditor>
<div id="app">
<PopupViewer ref="news"/>
</div>
</header>
<body>
</body>
</template>
<script setup>
import Toast from '@/components/Toast.vue'
@ -526,5 +491,62 @@ export default {
background-color: red;
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: .7;
}
}
.logo-container {
position: relative;
width: 48px;
height: 48px;
animation: roll-and-bounce 4s linear infinite;
}
.logo-image {
width: 100%;
height: 100%;
border-radius: 50%;
animation: spin 4s linear infinite;
}
@keyframes roll-and-bounce {
0%, 100% {
transform: translateX(0) rotate(0deg);
}
45% {
transform: translateX(100px) rotate(360deg);
}
50% {
transform: translateX(90px) rotate(390deg);
}
55% {
transform: translateX(100px) rotate(360deg);
}
95% {
transform: translateX(0) rotate(0deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.logo-text {
position: relative;
left: 100px; /* Adjust this value to match the maximum translation of the logo */
}
</style>

75
web/src/components/WelcomeComponent.vue
View File

@ -1,38 +1,42 @@
<template>
<div class="flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900">
<div class="text-center">
<div class="flex items-center justify-center gap-4 mb-8">
<div class="relative w-20 h-80">
<div class="flex flex-col items-center justify-center w-full h-full min-h-screen bg-gradient-to-br from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 p-8">
<div class="text-center max-w-4xl">
<div class="flex items-center justify-center gap-8 mb-12">
<div class="relative w-24 h-24">
<img
:src="logoSrc"
alt="LoLLMS Logo"
class="w-20 h-20 rounded-full absolute animate-ball-bounce"
class="w-24 h-24 rounded-full absolute animate-rolling-ball"
>
</div>
<div class="flex flex-col items-start">
<h1 class="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600 dark:from-blue-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
</h1>
<p class="text-xl text-gray-600 dark:text-gray-300 italic">
One tool to rule them all
<p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
Lord of Large Language And Multimodal Systems
</p>
</div>
</div>
<div class="space-y-6 animate-fade-in-up">
<h2 class="text-3xl font-semibold text-gray-800 dark:text-gray-200">
<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
</h2>
<p class="text-xl text-gray-600 dark:text-gray-300">
Your gateway to powerful language models and intelligent conversations
<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.
</p>
<div class="flex justify-center space-x-4 mt-8">
<button class="px-6 py-3 text-white bg-blue-600 rounded-full hover:bg-blue-700 transform hover:scale-105 transition-all duration-200 ease-in-out shadow-lg">
Create New Discussion
</button>
<button class="px-6 py-3 text-blue-600 bg-white border-2 border-blue-600 rounded-full hover:bg-blue-50 transform hover:scale-105 transition-all duration-200 ease-in-out shadow-lg">
Select Existing Discussion
</button>
<div class="mt-12 space-y-6">
<p class="text-lg text-gray-700 dark:text-gray-300">
Discover the capabilities of LoLLMS:
</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>
<li>Generate creative content and ideas</li>
<li>Analyze complex data and provide insights</li>
<li>Assist with coding and technical tasks</li>
<li>Process and understand multimodal inputs</li>
</ul>
</div>
</div>
</div>
@ -64,22 +68,17 @@
</script>
<style scoped>
@keyframes ball-bounce {
0%, 100% {
transform: translateY(0) rotate(0deg);
animation-timing-function: ease-out;
}
25% { transform: translateY(-120px) rotate(90deg); }
50% { transform: translateY(-160px) rotate(180deg); }
75% { transform: translateY(-40px) rotate(270deg); }
85%, 95% {
transform: translateY(0) rotate(360deg);
animation-timing-function: ease-in;
}
90%, 97% {
transform: translateY(-20px) rotate(360deg);
animation-timing-function: ease-out;
}
@keyframes rolling-ball {
0% { transform: translateX(-50px) rotate(0deg); }
25% { transform: translateX(0) rotate(90deg); }
50% { transform: translateX(50px) rotate(180deg); }
75% { transform: translateX(0) rotate(270deg); }
100% { transform: translateX(-50px) rotate(360deg); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes fade-in-up {
@ -93,11 +92,11 @@
}
}
.animate-ball-bounce {
animation: ball-bounce 4s infinite;
.animate-rolling-ball {
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-out;
}
.animate-fade-in-up {
animation: fade-in-up 1s ease-out;
animation: fade-in-up 1.5s ease-out;
}
</style>