mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2024-12-20 12:53:07 +00:00
Enhanced ui
This commit is contained in:
Saifeddine ALOUI
parent
e034d76aeb
commit
a5e7dace3d
2
app.py
2
app.py
@ -69,7 +69,7 @@ def check_and_install_package(package: str, version: str):
|
|||||||
packages: List[Tuple[str, str]] = [
|
packages: List[Tuple[str, str]] = [
|
||||||
("freedom_search", "0.1.9"),
|
("freedom_search", "0.1.9"),
|
||||||
("scrapemaster", "0.2.1"),
|
("scrapemaster", "0.2.1"),
|
||||||
("lollms_client", "0.7.6"),
|
("lollms_client", "0.7.7"),
|
||||||
("lollmsvectordb", "1.1.6"),
|
("lollmsvectordb", "1.1.6"),
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -43,6 +43,13 @@ async def get_lollms_version():
|
|||||||
return infos
|
return infos
|
||||||
|
|
||||||
|
|
||||||
|
@router.get("/get_news")
|
||||||
|
async def get_lollms_version():
|
||||||
|
"""Get the changelog."""
|
||||||
|
base_path = Path(__file__).parent
|
||||||
|
infos = base_path/"news"/"current.html"
|
||||||
|
return infos.read_text()
|
||||||
|
|
||||||
@router.get("/get_lollms_webui_version")
|
@router.get("/get_lollms_webui_version")
|
||||||
async def get_lollms_webui_version():
|
async def get_lollms_webui_version():
|
||||||
"""Get the version of the LoLLMs Web UI application."""
|
"""Get the version of the LoLLMs Web UI application."""
|
||||||
|
|||||||
18
endpoints/news/current.html
Normal file
18
endpoints/news/current.html
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-2xl font-semibold mb-2 text-indigo-600">New Feature Alert!</h3>
|
||||||
|
<p class="text-gray-700">LoLLMs UI now has a new theming system, allowing for more personalized and visually appealing interactions.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-2xl font-semibold mb-2 text-indigo-600">Latest Music Highlight</h3>
|
||||||
|
<div class="relative" style="padding-top: 56.25%;">
|
||||||
|
<iframe
|
||||||
|
class="absolute top-0 left-0 w-full h-full"
|
||||||
|
src="https://www.youtube.com/embed/avaixPtHUIc?si=kEdSoLtMMGOQd_j2&cc_load_policy=1&cc_lang_pref=en"
|
||||||
|
title="YouTube video player"
|
||||||
|
frameborder="0"
|
||||||
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||||
|
allowfullscreen>
|
||||||
|
</iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -1 +1 @@
|
|||||||
Subproject commit 55862e388295bc1c093cf56ce68ef8c9a305d8ad
|
Subproject commit 9eae059a43644fa3b8e947ddb1a2bef4b452c8f5
|
||||||
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-DaywzZaA.css
vendored
8
web/dist/assets/index-DaywzZaA.css
vendored
File diff suppressed because one or more lines are too long
8
web/dist/assets/index-gzgffzab.css
vendored
Normal file
8
web/dist/assets/index-gzgffzab.css
vendored
Normal file
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-CQZS3dTu.js"></script>
|
<script type="module" crossorigin src="/assets/index-CxhUr7VR.js"></script>
|
||||||
<link rel="stylesheet" crossorigin href="/assets/index-DaywzZaA.css">
|
<link rel="stylesheet" crossorigin href="/assets/index-gzgffzab.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
|
|||||||
@ -1,102 +1,120 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col items-center justify-center w-full h-full min-h-screen p-8">
|
<div class="flex flex-col items-center justify-center w-full h-full min-h-screen p-8">
|
||||||
<div class="text-center max-w-4xl">
|
<div class="text-center max-w-4xl">
|
||||||
<div class="flex items-center justify-center gap-8 mb-12">
|
<div class="flex items-center justify-center gap-8 mb-12">
|
||||||
<div class="relative w-24 h-24">
|
<div class="relative w-24 h-24">
|
||||||
<img
|
<img
|
||||||
:src="logoSrc"
|
:src="logoSrc"
|
||||||
alt="LoLLMS Logo"
|
alt="LoLLMS Logo"
|
||||||
class="w-24 h-24 rounded-full absolute animate-rolling-ball"
|
class="w-24 h-24 rounded-full absolute animate-rolling-ball"
|
||||||
>
|
>
|
||||||
</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">
|
|
||||||
{{$store.state.theme_vars.lollms_title}}
|
|
||||||
</h1>
|
|
||||||
<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>
|
||||||
|
<div class="flex flex-col items-start">
|
||||||
<div class="space-y-8 animate-fade-in-up">
|
<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">
|
||||||
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
|
{{$store.state.theme_vars.lollms_title}}
|
||||||
{{$store.state.theme_vars.lollms_welcome_short_message}}
|
</h1>
|
||||||
</h2>
|
<p class="text-2xl text-gray-600 dark:text-gray-300 italic mt-2">
|
||||||
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
Lord of Large Language And Multimodal Systems
|
||||||
{{$store.state.theme_vars.lollms_welcome_message}}
|
|
||||||
</p>
|
</p>
|
||||||
<div class="mt-12 space-y-6">
|
|
||||||
<p class="text-lg text-gray-700 dark:text-gray-300">
|
|
||||||
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>
|
|
||||||
<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 class="space-y-8 animate-fade-in-up">
|
||||||
|
<h2 class="text-4xl font-semibold text-gray-800 dark:text-gray-200">
|
||||||
|
{{$store.state.theme_vars.lollms_welcome_short_message}}
|
||||||
|
</h2>
|
||||||
|
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
|
||||||
|
{{$store.state.theme_vars.lollms_welcome_message}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- New section for latest news -->
|
||||||
|
<div id="newsContainer" class="mt-12 p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md animate-fade-in-up overflow-y-scroll" style="display: none;">
|
||||||
|
<h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Latest LoLLMS News</h3>
|
||||||
|
<p id="newsContent" class="text-gray-600 dark:text-gray-300"></p>
|
||||||
|
</div>
|
||||||
|
<div id="errorContainer" class="mt-6 text-red-500 dark:text-red-400" style="display: none;"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref, computed } from 'vue'
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { useStore } from 'vuex'
|
import { useStore } from 'vuex'
|
||||||
import storeLogo from '@/assets/logo.png'
|
import storeLogo from '@/assets/logo.png'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'WelcomeComponent',
|
name: 'WelcomeComponent',
|
||||||
setup() {
|
setup() {
|
||||||
const store = useStore()
|
const store = useStore()
|
||||||
|
const latestNews = ref('')
|
||||||
|
const error = ref('')
|
||||||
|
|
||||||
const logoSrc = computed(() => {
|
const logoSrc = computed(() => {
|
||||||
if (!store.state.config) return storeLogo
|
if (!store.state.config) return storeLogo
|
||||||
return store.state.config.app_custom_logo
|
return store.state.config.app_custom_logo
|
||||||
? `/user_infos/${store.state.config.app_custom_logo}`
|
? `/user_infos/${store.state.config.app_custom_logo}`
|
||||||
: storeLogo
|
: storeLogo
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
const fetchLatestNews = async () => {
|
||||||
logoSrc
|
try {
|
||||||
|
const response = await axios.get('/get_news')
|
||||||
|
latestNews.value = response.data
|
||||||
|
document.getElementById('newsContent').innerHTML = latestNews.value;
|
||||||
|
document.getElementById('newsContainer').style.display = 'block';
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to fetch latest news:', err)
|
||||||
|
error.value = 'Unable to fetch the latest news. Please try again later.'
|
||||||
|
document.getElementById('errorContainer').textContent = err;
|
||||||
|
document.getElementById('errorContainer').style.display = 'block';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
onMounted(() => {
|
||||||
@keyframes rolling-ball {
|
fetchLatestNews()
|
||||||
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 {
|
return {
|
||||||
0%, 100% { transform: translateY(0); }
|
logoSrc,
|
||||||
50% { transform: translateY(-20px); }
|
latestNews,
|
||||||
}
|
error
|
||||||
|
|
||||||
@keyframes fade-in-up {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
.animate-rolling-ball {
|
<style scoped>
|
||||||
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-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); }
|
||||||
|
}
|
||||||
|
|
||||||
.animate-fade-in-up {
|
@keyframes bounce {
|
||||||
animation: fade-in-up 1.5s ease-out;
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-20px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px);
|
||||||
}
|
}
|
||||||
</style>
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 1.5s ease-out;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -1308,7 +1308,6 @@ export default {
|
|||||||
"LoLLMs includes advanced natural language processing capabilities in over 100 languages.",
|
"LoLLMs includes advanced natural language processing capabilities in over 100 languages.",
|
||||||
"The system can perform sentiment analysis on social media trends and customer feedback in real-time.",
|
"The system can perform sentiment analysis on social media trends and customer feedback in real-time.",
|
||||||
"LoLLMs features a unique 'time-aware' context system that understands and reasons about temporal relationships.",
|
"LoLLMs features a unique 'time-aware' context system that understands and reasons about temporal relationships.",
|
||||||
"The platform includes specialized tools for quantum computing simulation and algorithm development."
|
|
||||||
|
|
||||||
],
|
],
|
||||||
randomFact: "",
|
randomFact: "",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user