Skip to content

Commit 9c983e3

Browse files
mudlermudler
committed
visual enhancements
1 parent 01fd52e commit 9c983e3

File tree

2 files changed

+49
-61
lines changed

2 files changed

+49
-61
lines changed

‎core/http/elements/gallery.go‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,14 @@ const (
1616
noImage = "https://upload.wikimedia.org/wikipedia/commons/6/65/No-Image-Placeholder.svg"
1717
)
1818

19+
func renderElements(n []elem.Node) string {
20+
render := ""
21+
for _, r := range n {
22+
render += r.Render()
23+
}
24+
return render
25+
}
26+
1927
func DoneProgress(galleryID, text string, showDelete bool) string {
2028
var modelName = galleryID
2129
// Split by @ and grab the name
@@ -94,23 +102,22 @@ func P2PNodeStats(nodes []p2p.NodeData) string {
94102
}
95103
}
96104

97-
return elem.Div(
98-
attrs.Props{
99-
"class": "bg-gray-800 p-6 rounded-lg shadow-lg text-left",
100-
},
101-
elem.P(
105+
nodesElements := []elem.Node{
106+
elem.Span(
102107
attrs.Props{
103-
"class": "text-xl font-semibold text-gray-200",
108+
"class": "text-green-500",
104109
},
105-
elem.Text("Total Workers Detected: "+fmt.Sprintf("%d", len(nodes))),
110+
elem.Text(fmt.Sprintf("%d", online)),
106111
),
107-
elem.P(
112+
elem.Span(
108113
attrs.Props{
109-
"class": "text-xl font-semibold text-gray-200",
114+
"class": "text-gray-200",
110115
},
111-
elem.Text("Total Online Workers: "+fmt.Sprintf("%d", online)),
116+
elem.Text(fmt.Sprintf("/%d", len(nodes))),
112117
),
113-
).Render()
118+
}
119+
120+
return renderElements(nodesElements)
114121
}
115122

116123
func P2PNodeBoxes(nodes []p2p.NodeData) string {
@@ -164,12 +171,12 @@ func P2PNodeBoxes(nodes []p2p.NodeData) string {
164171
n.IsOnline(),
165172
elem.I(
166173
attrs.Props{
167-
"class": "fas fa-circle text-green-500 ml-2 mr-1",
174+
"class": "fas fa-circle animate-pulse text-green-500 ml-2 mr-1",
168175
},
169176
),
170177
elem.I(
171178
attrs.Props{
172-
"class": "fas fa-circle text-red-500 ml-2 mr-1",
179+
"class": "fas fa-circle animate-pulse text-red-500 ml-2 mr-1",
173180
},
174181
),
175182
),
@@ -193,11 +200,7 @@ func P2PNodeBoxes(nodes []p2p.NodeData) string {
193200
))
194201
}
195202

196-
render := ""
197-
for _, r := range nodesElements {
198-
render += r.Render()
199-
}
200-
return render
203+
return renderElements(nodesElements)
201204
}
202205

203206
func StartProgressBar(uid, progress, text string) string {

‎core/http/views/p2p.html‎

Lines changed: 28 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,18 @@
1010

1111
<div class="workers mt-12 text-center">
1212
<h2 class="text-3xl font-semibold text-gray-100 mb-8">
13-
<i class="fa-solid fa-network-wired"></i> P2P Network
13+
<i class="fa-solid fa-network-wired"></i> P2P Network
1414
<a href="https://localai.io/features/distribute/" target="_blank">
1515
<i class="fas fa-circle-info pr-2"></i>
1616
</a>
1717
</h2>
18-
<p class="mb-2">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).</p>
18+
<p class="mb-4">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).</p>
19+
1920
<!-- Tabs for Instructions -->
20-
<div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-8 inline-block text-left">
21-
<h3 class="text-2xl font-semibold text-gray-100 mb-4">Start a new llama.cpp P2P worker</h3>
22-
<p class="mb-2">You can start llama.cpp workers to distribute weights between the workers and offload part of the computation.
23-
To start a new worker, you can use the CLI or Docker.</p>
21+
<div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-12 text-left">
22+
<h3 class="text-2xl font-semibold text-gray-100 mb-6">Start a new llama.cpp P2P worker</h3>
23+
<p class="mb-4">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.</p>
24+
2425
<!-- Tabs navigation -->
2526
<ul class="mb-5 flex list-none flex-row flex-wrap ps-0" role="tablist" data-twe-nav-ref>
2627
<li role="presentation" class="flex-auto text-center">
@@ -40,37 +41,30 @@ <h3 class="text-2xl font-semibold text-gray-100 mb-4">Start a new llama.cpp P2P
4041
local-ai worker p2p-llama-cpp-rpc
4142
</code>
4243

43-
For all the options available please refer to the <a href="https://localai.io/features/distribute/#starting-workers" target="_blank" class="text-yellow-300 hover:text-yellow-400">documentation</a>.
44+
<p class="mt-2">For all the options available, please refer to the <a href="https://localai.io/features/distribute/#starting-workers" target="_blank" class="text-yellow-300 hover:text-yellow-400">documentation</a>.</p>
4445
</div>
4546
<div class="tabcontent hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block p-4" id="tabs-docker" role="tabpanel" aria-labelledby="tabs-docker">
4647
<p class="mb-2">To start a new worker with docker, run the following command:</p>
4748
<code class="block bg-gray-700 text-yellow-300 p-4 rounded-lg break-words">
48-
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 8080:8080 localai/localai:latest-aio-cpu worker p2p-llama-cpp-rpc
49+
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 8080:8080 localai/localai:latest-cpu worker p2p-llama-cpp-rpc
4950
</code>
5051

51-
For all the options available and see what image to use, please refer to the <a href="https://localai.io/basics/container/" target="_blank" class="text-yellow-300 hover:text-yellow-400">Container images documentation</a> and <a href="https://localai.io/advanced/#cli-parameters" target="_blank" class="text-yellow-300 hover:text-yellow-400">CLI parameters documentation</a>
52+
<p class="mt-2">For all the options available and see what image to use, please refer to the <a href="https://localai.io/basics/container/" target="_blank" class="text-yellow-300 hover:text-yellow-400">Container images documentation</a> and <a href="https://localai.io/advanced/#cli-parameters" target="_blank" class="text-yellow-300 hover:text-yellow-400">CLI parameters documentation</a>.</p>
5253
</div>
5354
</div>
5455
</div>
5556

56-
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8">
57-
<div
58-
hx-get="/p2p/ui/workers-stats"
59-
hx-trigger="every 1s"
60-
>
61-
</div>
62-
<div
63-
hx-get="/p2p/ui/workers"
64-
hx-trigger="every 1s"
65-
>
66-
</div>
57+
<p class="text-xl font-semibold text-gray-200"> Nodes: <span hx-get="/p2p/ui/workers-stats" hx-trigger="every 1s"></span> </p>
58+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-12">
59+
<div hx-get="/p2p/ui/workers" hx-trigger="every 1s"></div>
6760
</div>
68-
<hr>
69-
61+
62+
<hr class="border-gray-700 mb-12">
7063

71-
<div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-8 inline-block text-left">
72-
<h3 class="text-2xl font-semibold text-gray-100 mb-4">Start a federated instance</h3>
73-
<p class="mb-2">You can start LocalAI in federated mode to share your instance, or start the federated server to balance requests between nodes of the federation.</p>
64+
<div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-12 text-left">
65+
<h3 class="text-2xl font-semibold text-gray-100 mb-6">Start a federated instance</h3>
66+
<p class="mb-4">You can start LocalAI in federated mode to share your instance, or start the federated server to balance requests between nodes of the federation.</p>
67+
7468
<!-- Tabs navigation -->
7569
<ul class="mb-5 flex list-none flex-row flex-wrap ps-0" role="tablist" data-twe-nav-ref>
7670
<li role="presentation" class="flex-auto text-center">
@@ -90,46 +84,37 @@ <h3 class="text-2xl font-semibold text-gray-100 mb-4">Start a federated instance
9084
local-ai run --federated --p2p
9185
</code>
9286

93-
Note: If you don't have a token do not specify it and use the generated one that you can find in this page afterwards.
87+
<p class="mt-2">Note: If you don't have a token do not specify it and use the generated one that you can find in this page afterwards.</p>
9488

9589
<p class="mb-2">To start a new federated load balancer:</p>
9690
<code class="block bg-gray-700 text-yellow-300 p-4 rounded-lg break-words">
9791
export TOKEN="<span class="token">{{.P2PToken}}</span>"<br>
9892
local-ai federated
9993
</code>
10094

101-
Note: Token is needed when starting the federated server.
95+
<p class="mt-2">Note: Token is needed when starting the federated server.</p>
10296

103-
For all the options available please refer to the <a href="https://localai.io/features/distribute/#starting-workers" target="_blank" class="text-yellow-300 hover:text-yellow-400">documentation</a>.
97+
<p class="mt-2">For all the options available, please refer to the <a href="https://localai.io/features/distribute/#starting-workers" target="_blank" class="text-yellow-300 hover:text-yellow-400">documentation</a>.</p>
10498
</div>
10599
<div class="tabcontent hidden opacity-0 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block p-4" id="tabs-federated-docker" role="tabpanel" aria-labelledby="tabs-federated-docker">
106100
<p class="mb-2">To start a new federated instance:</p>
107101
<code class="block bg-gray-700 text-yellow-300 p-4 rounded-lg break-words">
108-
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 8080:8080 localai/localai:latest-aio-cpu run --federated --p2p
102+
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 8080:8080 localai/localai:latest-cpu run --federated --p2p
109103
</code>
110104

111105
<p class="mb-2">To start a new federated server (port to 9090):</p>
112106
<code class="block bg-gray-700 text-yellow-300 p-4 rounded-lg break-words">
113-
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 9090:8080 localai/localai:latest-aio-cpu federated
107+
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 9090:8080 localai/localai:latest-cpu federated
114108
</code>
115109

116-
For all the options available and see what image to use, please refer to the <a href="https://localai.io/basics/container/" target="_blank" class="text-yellow-300 hover:text-yellow-400">Container images documentation</a> and <a href="https://localai.io/advanced/#cli-parameters" target="_blank" class="text-yellow-300 hover:text-yellow-400">CLI parameters documentation</a>
110+
<p class="mt-2">For all the options available and see what image to use, please refer to the <a href="https://localai.io/basics/container/" target="_blank" class="text-yellow-300 hover:text-yellow-400">Container images documentation</a> and <a href="https://localai.io/advanced/#cli-parameters" target="_blank" class="text-yellow-300 hover:text-yellow-400">CLI parameters documentation</a>.</p>
117111
</div>
118112
</div>
119113
</div>
120114

121-
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8">
122-
<div
123-
hx-get="/p2p/ui/workers-federation-stats"
124-
hx-trigger="every 1s"
125-
>
126-
</div>
127-
<div
128-
hx-get="/p2p/ui/workers-federation"
129-
hx-trigger="every 1s"
130-
>
131-
</div>
132-
115+
<p class="text-xl font-semibold text-gray-200"> Nodes: <span hx-get="/p2p/ui/workers-federation-stats" hx-trigger="every 1s"></span> </p>
116+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-12">
117+
<div hx-get="/p2p/ui/workers-federation" hx-trigger="every 1s"></div>
133118
</div>
134119
</div>
135120
</div>

0 commit comments

Comments
 (0)