mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-19 20:37:51 +00:00
Enhanced ui
This commit is contained in:
Saifeddine ALOUI
parent
981323eb26
commit
12c75a3e2e
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-9ddef0b4.css
vendored
Normal file
8
web/dist/assets/index-9ddef0b4.css
vendored
Normal file
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-c6c58977.css
vendored
8
web/dist/assets/index-c6c58977.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>
|
<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-fe749e52.js"></script>
|
<script type="module" crossorigin src="/assets/index-4ac94331.js"></script>
|
||||||
<link rel="stylesheet" href="/assets/index-c6c58977.css">
|
<link rel="stylesheet" href="/assets/index-9ddef0b4.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -1,160 +1,125 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <link v-if="codeBlockStylesheet" rel="stylesheet" :href="codeBlockStylesheet"> -->
|
<header class="top-0 shadow-lg">
|
||||||
<header class=" top-0 shadow-lg">
|
<nav class="container flex flex-col lg:flex-row items-center gap-2 pb-0">
|
||||||
<nav class="container flex flex-col lg:flex-row item-center gap-2 pb-0 ">
|
<!-- LOGO -->
|
||||||
<!-- LOGO -->
|
<RouterLink :to="{ name: 'discussions' }" class="flex items-center gap-3 flex-1">
|
||||||
<RouterLink :to="{ name: 'discussions' }">
|
<div class="logo-container">
|
||||||
<div class="flex items-center gap-3 flex-1">
|
<img class="w-12 h-12 rounded-full object-cover logo-image"
|
||||||
<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">
|
:src="$store.state.config == null ? storeLogo : $store.state.config.app_custom_logo != '' ? '/user_infos/' + $store.state.config.app_custom_logo : storeLogo"
|
||||||
<div class="flex flex-col">
|
alt="Logo" title="LoLLMS WebUI">
|
||||||
<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>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-col logo-text">
|
||||||
</nav>
|
<p class="text-2xl font-bold drop-shadow-md align-middle">LoLLMS</p>
|
||||||
<!-- NAVIGATION BUTTONS -->
|
<p class="text-gray-400">One tool to rule them all</p>
|
||||||
<Navigation />
|
</div>
|
||||||
<Toast ref="toast" />
|
</RouterLink>
|
||||||
<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">
|
<!-- GITHUB AND THEME BUTTONS -->
|
||||||
<ProgressBar ref="progress" :progress="progress_value" class="w-full h-4"></ProgressBar>
|
<div class="flex gap-3 flex-1 items-center justify-end">
|
||||||
<p class="text-2xl animate-pulse mt-2 text-white">{{ loading_infos }} ...</p>
|
<div v-if="isModelOK" title="Model is ok" class="text-green-500 cursor-pointer">
|
||||||
</div>
|
<b class="text-2xl">M</b>
|
||||||
<UniversalForm ref="universalForm" class="z-20" />
|
</div>
|
||||||
<YesNoDialog ref="yesNoDialog" class="z-20" />
|
<div v-else title="Model is not ok" class="text-red-500 cursor-pointer">
|
||||||
<PersonalityEditor ref="personality_editor" :config="currentPersonConfig" :personality="selectedPersonality" ></PersonalityEditor>
|
<b class="text-2xl">M</b>
|
||||||
<div id="app">
|
</div>
|
||||||
<!-- Your other components... -->
|
<div v-if="!isGenerating" title="Text is not being generated. Ready to generate" class="text-green-500 cursor-pointer">
|
||||||
<PopupViewer ref="news"/>
|
<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>
|
</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>
|
</header>
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import Toast from '@/components/Toast.vue'
|
import Toast from '@/components/Toast.vue'
|
||||||
@ -526,5 +491,62 @@ export default {
|
|||||||
background-color: red;
|
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>
|
</style>
|
||||||
@ -1,38 +1,42 @@
|
|||||||
<template>
|
<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="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">
|
<div class="text-center max-w-4xl">
|
||||||
<div class="flex items-center justify-center gap-4 mb-8">
|
<div class="flex items-center justify-center gap-8 mb-12">
|
||||||
<div class="relative w-20 h-80">
|
<div class="relative w-24 h-24">
|
||||||
<img
|
<img
|
||||||
:src="logoSrc"
|
:src="logoSrc"
|
||||||
alt="LoLLMS Logo"
|
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>
|
||||||
<div class="flex flex-col items-start">
|
<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
|
LoLLMS
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-xl text-gray-600 dark:text-gray-300 italic">
|
<p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
|
||||||
One tool to rule them all
|
Lord of Large Language And Multimodal Systems
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="space-y-6 animate-fade-in-up">
|
<div class="space-y-8 animate-fade-in-up">
|
||||||
<h2 class="text-3xl 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 LoLLMS WebUI
|
||||||
</h2>
|
</h2>
|
||||||
<p class="text-xl text-gray-600 dark:text-gray-300">
|
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
Your gateway to powerful language models and intelligent conversations
|
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>
|
</p>
|
||||||
<div class="flex justify-center space-x-4 mt-8">
|
<div class="mt-12 space-y-6">
|
||||||
<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">
|
<p class="text-lg text-gray-700 dark:text-gray-300">
|
||||||
Create New Discussion
|
Discover the capabilities of LoLLMS:
|
||||||
</button>
|
</p>
|
||||||
<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">
|
<ul class="text-left list-disc list-inside text-gray-600 dark:text-gray-300 space-y-2">
|
||||||
Select Existing Discussion
|
<li>Engage in natural language conversations</li>
|
||||||
</button>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -64,22 +68,17 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@keyframes ball-bounce {
|
@keyframes rolling-ball {
|
||||||
0%, 100% {
|
0% { transform: translateX(-50px) rotate(0deg); }
|
||||||
transform: translateY(0) rotate(0deg);
|
25% { transform: translateX(0) rotate(90deg); }
|
||||||
animation-timing-function: ease-out;
|
50% { transform: translateX(50px) rotate(180deg); }
|
||||||
}
|
75% { transform: translateX(0) rotate(270deg); }
|
||||||
25% { transform: translateY(-120px) rotate(90deg); }
|
100% { transform: translateX(-50px) rotate(360deg); }
|
||||||
50% { transform: translateY(-160px) rotate(180deg); }
|
}
|
||||||
75% { transform: translateY(-40px) rotate(270deg); }
|
|
||||||
85%, 95% {
|
@keyframes bounce {
|
||||||
transform: translateY(0) rotate(360deg);
|
0%, 100% { transform: translateY(0); }
|
||||||
animation-timing-function: ease-in;
|
50% { transform: translateY(-20px); }
|
||||||
}
|
|
||||||
90%, 97% {
|
|
||||||
transform: translateY(-20px) rotate(360deg);
|
|
||||||
animation-timing-function: ease-out;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes fade-in-up {
|
@keyframes fade-in-up {
|
||||||
@ -93,11 +92,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate-ball-bounce {
|
.animate-rolling-ball {
|
||||||
animation: ball-bounce 4s infinite;
|
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animate-fade-in-up {
|
.animate-fade-in-up {
|
||||||
animation: fade-in-up 1s ease-out;
|
animation: fade-in-up 1.5s ease-out;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user