Upgraded ui

This commit is contained in:
Saifeddine ALOUI 2024-11-25 22:48:47 +01:00
parent 2e73aee438
commit 7dd35c6033
18 changed files with 148 additions and 80 deletions

View File

@ -1,5 +1,9 @@
# =================== Lord Of Large Language Multimodal Systems Configuration file ===========================
version: 140
version: 141
# video viewing and news recovering
last_viewed_video: null
binding_name: null
model_name: null
model_variant: null

View File

@ -126,7 +126,7 @@ class LollmsClient {
updateServerAddress(newAddress) {
this.serverAddress = newAddress;
}
async tokenize(prompt) {
async tokenize(prompt, return_named=false) {
/**
* Tokenizes the given prompt using the model's tokenizer.
*
@ -134,17 +134,17 @@ class LollmsClient {
* @returns {Array} A list of tokens representing the tokenized prompt.
*/
console.log("Tokenizing",prompt)
const output = await axios.post("/lollms_tokenize", {"prompt": prompt});
const output = await axios.post("/lollms_tokenize", {"prompt": prompt, "return_named": return_named});
return output.data.named_tokens
}
async detokenize(tokensList) {
async detokenize(tokensList, return_named=false) {
/**
* Detokenizes the given list of tokens using the model's tokenizer.
*
* @param {Array} tokensList - A list of tokens to be detokenized.
* @returns {string} The detokenized text as a string.
*/
const output = await axios.post("/lollms_detokenize", {"tokens": tokensList});
const output = await axios.post("/lollms_detokenize", {"tokens": tokensList, "return_named": return_named});
console.log(output.data.text)
return output.data.text
}

View File

@ -10,7 +10,7 @@ description:
"""
from fastapi import APIRouter, Request
from pydantic import BaseModel
from pydantic import BaseModel, Field
import pkg_resources
from lollms_webui import LOLLMSWebUI
from ascii_colors import ASCIIColors
@ -27,6 +27,10 @@ import time
lollmsElfServer:LOLLMSWebUI = LOLLMSWebUI.get_instance()
router = APIRouter()
class LastViewedVideoUrlRequest(BaseModel):
client_id: str = Field(...)
last_viewed_video_url: str = Field(..., description="Last viewed model")
@router.get("/get_versionID")
async def get_lollms_version():
@ -49,14 +53,45 @@ async def get_lollms_version():
base_path = Path(__file__).parent
infos = base_path/"news"/"current.html"
return infos.read_text(encoding="utf8")
from pathlib import Path
import json
@router.get("/get_last_video_url")
async def get_last_video_url():
"""Get the URL and type of the last video."""
base_path = Path(__file__).parent
info_file = base_path / "news" / "latest_video.json"
try:
with open(info_file, 'r', encoding='utf-8') as file:
video_info = json.load(file)
return {
"url": video_info["url"],
"type": video_info["type"]
}
except FileNotFoundError:
return {"error": "Video information not found"}
except json.JSONDecodeError:
return {"error": "Invalid JSON format in the video information file"}
except KeyError as e:
return {"error": f"Missing key in JSON: {str(e)}"}
@router.get("/get_last_viewed_video_url")
async def get_last_video_url():
"""Get the URL of the last video."""
# This is a static URL for demonstration purposes
base_path = Path(__file__).parent
infos = base_path/"news"/"latest_video.txt"
return infos.read_text(encoding="utf8")
return lollmsElfServer.config.last_viewed_video
@router.post("/set_last_viewed_video_url")
async def set_last_video_url(req:LastViewedVideoUrlRequest):
"""Get the URL of the last video."""
# This is a static URL for demonstration purposes
check_access(lollmsElfServer,req.client_id)
lollmsElfServer.config.last_viewed_video = req.last_viewed_video_url
lollmsElfServer.config.save_config()
@router.get("/get_themes")
async def get_themes():

View File

@ -0,0 +1,4 @@
{
"url":"https://www.youtube.com/watch?v=VNzgvCXSjq4&ab_channel=ParisNeo",
"type":"music"
}

View File

@ -1 +0,0 @@
https://youtu.be/7HrXF_Y_f5c

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 @@
<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-C_G9-j_h.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-DBWXZ2MB.css">
<script type="module" crossorigin src="/assets/index-DarecFUp.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-p7Rdmrpr.css">
</head>
<body>
<div id="app"></div>

BIN
web/dist/movie.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 734 KiB

BIN
web/dist/music.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
web/dist/podcast.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 824 KiB

BIN
web/dist/tutorial.png vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
web/public/movie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 734 KiB

BIN
web/public/music.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
web/public/podcast.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 824 KiB

BIN
web/public/tutorial.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

View File

@ -40,7 +40,11 @@
<div v-if="showVideoButton" class="floating-button-container">
<a :href="videoUrl" target="_blank" class="floating-button" @click="handleClick">
<span class="tooltip">New ParisNeo Video!</span>
<img src="/play_video.png" alt="New Video" class="w-full h-full object-cover">
<img
:src="getImageForVideoType"
:alt="'New ' + videoType"
class="w-full h-full object-cover"
>
</a>
</div>
</div>
@ -55,6 +59,7 @@ export default {
data() {
return {
videoUrl: "",
videoType: "",
latestNews: "",
error: "",
showVideoButton: false,
@ -62,6 +67,20 @@ export default {
}
},
computed: {
getImageForVideoType() {
switch (this.videoType.toLowerCase()) {
case 'podcast':
return '/podcast.png';
case 'music':
return '/music.png';
case 'movie':
return '/movie.png';
case 'tutorial':
return '/tutorial.png';
default:
return '/play_video.png'; // fallback to default image
}
},
logoSrc() {
if (!this.$store.state.config) return storeLogo
return this.$store.state.config.app_custom_logo
@ -72,37 +91,41 @@ export default {
methods: {
async fetchLatestNews() {
try {
const response = await axios.get('/get_news')
this.latestNews = response.data
const response = await axios.get('/get_news');
this.latestNews = response.data;
} catch (err) {
console.error('Failed to fetch latest news:', err)
this.error = 'Unable to fetch the latest news. Please try again later.'
console.error('Failed to fetch latest news:', err);
this.error = 'Unable to fetch the latest news. Please try again later.';
}
},
async fetchVideoUrl() {
try {
const response = await axios.get('/get_last_video_url')
this.videoUrl = response.data
this.checkVideoUpdate()
const response = await axios.get('/get_last_video_url');
this.videoUrl = response.data.url;
this.videoType = response.data.type;
this.checkVideoUpdate();
} catch (err) {
console.error('Failed to fetch video URL:', err)
this.error = 'Unable to fetch the latest video URL. Please try again later.'
console.error('Failed to fetch video information:', err);
this.error = 'Unable to fetch the latest video information. Please try again later.';
}
},
handleClick() {
localStorage.setItem('lastVideoUrl', this.videoUrl)
this.showVideoButton = false
async handleClick() {
await axios.post("/set_last_viewed_video_url",{client_id:this.$store.state.client_id, last_viewed_video_url:this.videoUrl});
this.showVideoButton = false;
},
checkVideoUpdate() {
const storedVideoUrl = localStorage.getItem('lastVideoUrl')
async checkVideoUpdate() {
const response = await axios.get("/get_last_viewed_video_url");
const storedVideoUrl = response.data
console.log("storedVideoUrl");
console.log(storedVideoUrl);
if (this.videoUrl !== storedVideoUrl) {
this.showVideoButton = true
this.showVideoButton = true;
}
}
},
mounted() {
this.fetchLatestNews()
this.fetchVideoUrl()
this.fetchLatestNews();
this.fetchVideoUrl();
}
}
</script>

View File

@ -1262,7 +1262,10 @@ export default {
return {
interestingFacts: [
"ParisNeo, the creator of LoLLMs, originally built his high-performance PC to play Cyberpunk 2077. However, his passion for AI took an unexpected turn, leading him to develop LoLLMs instead. Ironically, he never found the time to actually play the game that inspired his powerful setup!",
"Saïph, the new version of LoLLMs, is named after a star in Orion's constellation (Kappa Orionis), representing bright guidance in AI!",
"Saïph, version 14 of LoLLMs, is named after a star in Orion's constellation (Kappa Orionis), representing bright guidance in AI!",
"At 12, ParisNeo coded 'Saif14' in BASIC on a Tandy 1000, an 'all-in-one' suite named with a friend. LoLLMs v14 'Saïph' - a star in Orion - echoes this BASIC creation's spirit and hints at OpenAI's future.",
"The new AI Village app in LoLLMs, simulating AI agents believing they're human, mirrors \"The Hitchhiker's Guide to the Galaxy\" (ParisNeo's favorite) where Earth was a simulation to compute the Ultimate Question. Both explore the idea of unsuspecting inhabitants participating in a grand cosmic calculation!",
"Once upon a time, young ParisNeo dove so deep into \"The Matrix\" that he watched it 60 times in two months, practically becoming a human DVD player! Fast forward to today, and this same Matrix-obsessed kid grew up to create LoLLMs, where AI personas are like digital kung-fu masters, and users are the chosen ones. Talk about life imitating art - ParisNeo went from \"I know kung fu\" to \"I code AI\"! Who knew binge-watching could lead to bending the rules of AI reality?",
"Did you know? The first computer programmer was a woman - Ada Lovelace!",
"Large Language Models (LLMs) have evolved from having millions of parameters to hundreds of billions in just a few years.",
"LoLLMs (Lord of Large Language Multimodal Systems) is an open-source AI assistant platform created by ParisNeo.",