src/whiskr
1
0
Fork 0
mirror of https://github.com/coalaura/whiskr.git synced 2025-09-08 17:06:42 +00:00
Code Activity

loading screen and icon preload

Browse Source
This commit is contained in:
Laura
2025-08-19 17:12:36 +02:00
parent c24b0e87f7
commit ebb27ef34e
5 changed files with 102 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -30,8 +30,6 @@ whiskr is a private, self-hosted web chat interface for interacting with AI mode
## TODO ## TODO
- proper loading screen
- preload icons
- multiple chats - multiple chats
## Built With ## Built With

34
main.go
View File

@@ -1,6 +1,7 @@
package main package main
import ( import (
"io/fs"
"net/http" "net/http"
"path/filepath" "path/filepath"
"strings" "strings"
@@ -18,6 +19,9 @@ var log = logger.New().DetectTerminal().WithOptions(logger.Options{
}) })
func main() { func main() {
icons, err := LoadIcons()
log.MustPanic(err)
models, err := LoadModels() models, err := LoadModels()
log.MustPanic(err) log.MustPanic(err)
@@ -35,6 +39,7 @@ func main() {
"authentication": env.Authentication.Enabled, "authentication": env.Authentication.Enabled,
"authenticated": IsAuthenticated(r), "authenticated": IsAuthenticated(r),
"search": env.Tokens.Exa != "", "search": env.Tokens.Exa != "",
"icons": icons,
"models": models, "models": models,
"prompts": Prompts, "prompts": Prompts,
"version": Version, "version": Version,
@@ -66,3 +71,32 @@ func cache(next http.Handler) http.Handler {
next.ServeHTTP(w, r) next.ServeHTTP(w, r)
}) })
} }
func LoadIcons() ([]string, error) {
var icons []string
directory := filepath.Join("static", "css", "icons")
err := filepath.Walk(directory, func(path string, info fs.FileInfo, err error) error {
if err != nil || info.IsDir() {
return err
}
if strings.HasSuffix(path, ".svg") {
rel, err := filepath.Rel(directory, path)
if err != nil {
return err
}
icons = append(icons, filepath.ToSlash(rel))
}
return nil
})
if err != nil {
return nil, err
}
return icons, nil
}

49
static/css/chat.css
View File

@@ -91,6 +91,40 @@ body.loading #version {
top: 6px; top: 6px;
} }
#loading {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
backdrop-filter: blur(10px);
transition: opacity 250ms;
}
#loading .inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
gap: 10px;
align-items: center;
font-weight: 500;
font-size: 22px;
line-height: 22px;
}
#loading img {
width: 50px;
animation: wiggling 750ms ease-in-out infinite;
}
body:not(.loading) #loading {
opacity: 0;
pointer-events: none;
}
#page { #page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -664,6 +698,7 @@ select {
} }
body.loading #version, body.loading #version,
#loading .inner::after,
.modal.loading .content::after, .modal.loading .content::after,
.reasoning .toggle::before, .reasoning .toggle::before,
.reasoning .toggle::after, .reasoning .toggle::after,
@@ -992,6 +1027,20 @@ label[for="reasoning-tokens"] {
background: #89bb77; background: #89bb77;
} }
@keyframes wiggling {
0% {
transform: translate(0px);
}
50% {
transform: translate(-10px, 0px);
}
100% {
transform: translate(0px);
}
}
@keyframes rotating { @keyframes rotating {
from { from {
transform: rotate(0deg); transform: rotate(0deg);

6
static/index.html
View File

@@ -18,6 +18,12 @@
<body class="loading"> <body class="loading">
<div id="version"></div> <div id="version"></div>
<div id="loading">
<div class="inner">
<img src="logo.png" /> <span>whiskr</span>
</div>
</div>
<div id="page"> <div id="page">
<div id="messages"></div> <div id="messages"></div>
<div id="chat"> <div id="chat">

13
static/js/chat.js
View File

@@ -51,6 +51,12 @@
}, 0); }, 0);
} }
function preloadIcons(icons) {
for (const icon of icons) {
new Image().src = `/css/icons/${icon}`;
}
}
function mark(index) { function mark(index) {
for (let x = 0; x < messages.length; x++) { for (let x = 0; x < messages.length; x++) {
messages[x].mark(Number.isInteger(index) && x >= index); messages[x].mark(Number.isInteger(index) && x >= index);
@@ -977,6 +983,9 @@
return false; return false;
} }
// start icon preload
preloadIcons(data.icons);
// render version // render version
if (data.version === "dev") { if (data.version === "dev") {
$version.remove(); $version.remove();
@@ -1416,5 +1425,9 @@
restore(); restore();
document.body.classList.remove("loading"); document.body.classList.remove("loading");
setTimeout(() => {
document.getElementById("loading").remove();
}, 500);
}); });
})(); })();