From 9c983e3b92e2e5f5e5da0ad39d995de265044c7c Mon Sep 17 00:00:00 2001 From: Ettore Di Giacinto Date: Mon, 8 Jul 2024 12:55:34 +0200 Subject: [PATCH] visual enhancements --- core/http/elements/gallery.go | 39 ++++++++++--------- core/http/views/p2p.html | 71 ++++++++++++++--------------------- 2 files changed, 49 insertions(+), 61 deletions(-) diff --git a/core/http/elements/gallery.go b/core/http/elements/gallery.go index 1734e71c1b47..89bf2933ac21 100644 --- a/core/http/elements/gallery.go +++ b/core/http/elements/gallery.go @@ -16,6 +16,14 @@ const ( noImage = "https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg" ) +func renderElements(n []elem.Node) string { + render := "" + for _, r := range n { + render += r.Render() + } + return render +} + func DoneProgress(galleryID, text string, showDelete bool) string { var modelName = galleryID // Split by @ and grab the name @@ -94,23 +102,22 @@ func P2PNodeStats(nodes []p2p.NodeData) string { } } - return elem.Div( - attrs.Props{ - "class": "bg-gray-800 p-6 rounded-lg shadow-lg text-left", - }, - elem.P( + nodesElements := []elem.Node{ + elem.Span( attrs.Props{ - "class": "text-xl font-semibold text-gray-200", + "class": "text-green-500", }, - elem.Text("Total Workers Detected: "+fmt.Sprintf("%d", len(nodes))), + elem.Text(fmt.Sprintf("%d", online)), ), - elem.P( + elem.Span( attrs.Props{ - "class": "text-xl font-semibold text-gray-200", + "class": "text-gray-200", }, - elem.Text("Total Online Workers: "+fmt.Sprintf("%d", online)), + elem.Text(fmt.Sprintf("/%d", len(nodes))), ), - ).Render() + } + + return renderElements(nodesElements) } func P2PNodeBoxes(nodes []p2p.NodeData) string { @@ -164,12 +171,12 @@ func P2PNodeBoxes(nodes []p2p.NodeData) string { n.IsOnline(), elem.I( attrs.Props{ - "class": "fas fa-circle text-green-500 ml-2 mr-1", + "class": "fas fa-circle animate-pulse text-green-500 ml-2 mr-1", }, ), elem.I( attrs.Props{ - "class": "fas fa-circle text-red-500 ml-2 mr-1", + "class": "fas fa-circle animate-pulse text-red-500 ml-2 mr-1", }, ), ), @@ -193,11 +200,7 @@ func P2PNodeBoxes(nodes []p2p.NodeData) string { )) } - render := "" - for _, r := range nodesElements { - render += r.Render() - } - return render + return renderElements(nodesElements) } func StartProgressBar(uid, progress, text string) string { diff --git a/core/http/views/p2p.html b/core/http/views/p2p.html index e81f0c0b3120..2ce643cf9f46 100644 --- a/core/http/views/p2p.html +++ b/core/http/views/p2p.html @@ -10,17 +10,18 @@

- P2P Network + P2P Network

-

LocalAI uses P2P technologies to enable distribution of work between peers. It is possible to share an instance with Federation and/or split the weights of a model across peers (only available with llama.cpp models).

+

LocalAI uses P2P technologies to enable distribution of work between peers. It is possible to share an instance with Federation and/or split the weights of a model across peers (only available with llama.cpp models).

+ -
-

Start a new llama.cpp P2P worker

-

You can start llama.cpp workers to distribute weights between the workers and offload part of the computation. - To start a new worker, you can use the CLI or Docker.

+
+

Start a new llama.cpp P2P worker

+

You can start llama.cpp workers to distribute weights between the workers and offload part of the computation. To start a new worker, you can use the CLI or Docker.

+
-
-
-
-
-
+

Nodes:

+
+
-
- + +
-
-

Start a federated instance

-

You can start LocalAI in federated mode to share your instance, or start the federated server to balance requests between nodes of the federation.

+
+

Start a federated instance

+

You can start LocalAI in federated mode to share your instance, or start the federated server to balance requests between nodes of the federation.

+
-
-
-
-
-
- +

Nodes:

+
+