Enhanced ui

This commit is contained in:
Saifeddine ALOUI 2024-11-20 23:24:31 +01:00
parent e034d76aeb
commit a5e7dace3d
10 changed files with 168 additions and 126 deletions

2
app.py
View File

@ -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"),
] ]

View File

@ -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."""

View 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

File diff suppressed because one or more lines are too long

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
View File

@ -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>

View File

@ -26,32 +26,30 @@
<p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto"> <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
{{$store.state.theme_vars.lollms_welcome_message}} {{$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>
</template>
<script> <!-- New section for latest news -->
import { ref, computed } from 'vue' <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;">
import { useStore } from 'vuex' <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Latest LoLLMS News</h3>
import storeLogo from '@/assets/logo.png' <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>
export default { <script>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import storeLogo from '@/assets/logo.png'
import axios from 'axios'
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
@ -60,28 +58,48 @@
: 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()
})
return {
logoSrc,
latestNews,
error
}
}
}
</script>
<style scoped>
@keyframes rolling-ball {
0% { transform: translateX(-50px) rotate(0deg); } 0% { transform: translateX(-50px) rotate(0deg); }
25% { transform: translateX(0) rotate(90deg); } 25% { transform: translateX(0) rotate(90deg); }
50% { transform: translateX(50px) rotate(180deg); } 50% { transform: translateX(50px) rotate(180deg); }
75% { transform: translateX(0) rotate(270deg); } 75% { transform: translateX(0) rotate(270deg); }
100% { transform: translateX(-50px) rotate(360deg); } 100% { transform: translateX(-50px) rotate(360deg); }
} }
@keyframes bounce { @keyframes bounce {
0%, 100% { transform: translateY(0); } 0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); } 50% { transform: translateY(-20px); }
} }
@keyframes fade-in-up { @keyframes fade-in-up {
from { from {
opacity: 0; opacity: 0;
transform: translateY(20px); transform: translateY(20px);
@ -90,13 +108,13 @@
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
} }
.animate-rolling-ball { .animate-rolling-ball {
animation: rolling-ball 4s infinite ease-in-out, bounce 1s infinite ease-in-out; 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 1.5s ease-out; animation: fade-in-up 1.5s ease-out;
} }
</style> </style>

View File

@ -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: "",