dearwolf/LocalAI
1
0
Fork 0
mirror of https://github.com/mudler/LocalAI.git synced 2025-05-31 07:54:59 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 34

feat(ui): improvements to index and models page (#4918)

Browse source 
- mobile-friendly index
- adjust color palette
- improve search experience

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto 2025-02-28 19:23:32 +01:00 • committed by GitHub
parent e4fdde158f
commit 755e4fb5f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 537 additions and 403 deletions
Download patch file Download diff file Expand all files Collapse all files

25
core/http/static/chat.js
View file

@ -27,6 +27,21 @@ SOFTWARE.
*/
function toggleLoader(show) {
const loader = document.getElementById('loader');
const sendButton = document.getElementById('send-button');
if (show) {
loader.style.display = 'block';
sendButton.style.display = 'none';
document.getElementById("input").disabled = true;
} else {
document.getElementById("input").disabled = false;
loader.style.display = 'none';
sendButton.style.display = 'block';
}
}
function submitKey(event) {
event.preventDefault();
localStorage.setItem("key", document.getElementById("apiKey").value);
@ -72,8 +87,8 @@ function readInputImage() {
// Set class "loader" to the element with "loader" id
//document.getElementById("loader").classList.add("loader");
// Make the "loader" visible
document.getElementById("loader").style.display = "block";
document.getElementById("input").disabled = true;
toggleLoader(true);
messages = Alpine.store("chat").messages();
@ -243,10 +258,8 @@ function readInputImage() {
}
// Remove class "loader" from the element with "loader" id
//document.getElementById("loader").classList.remove("loader");
document.getElementById("loader").style.display = "none";
// enable input
document.getElementById("input").disabled = false;
toggleLoader(false);
// scroll to the bottom of the chat
document.getElementById('messages').scrollIntoView(false)
// set focus to the input

12
core/http/static/general.css
View file

@ -10,18 +10,6 @@ body {
.htmx-request .htmx-indicator{
opacity:1
}
/* Loader (https://cssloaders.github.io/) */
.loader {
width: 12px;
height: 12px;
border-radius: 50%;
display: block;
margin:15px auto;
position: relative;
color: #FFF;
box-sizing: border-box;
animation: animloader 2s linear infinite;
}
@keyframes animloader {
0% { box-shadow: 14px 0 0 -2px, 38px 0 0 -2px, -14px 0 0 -2px, -38px 0 0 -2px; }