Skip to content

Commit 01fd52e

Browse files
mudlermudler
committed
live page update
1 parent 8bca25f commit 01fd52e

File tree

3 files changed

+167
-54
lines changed

3 files changed

+167
-54
lines changed

‎core/http/elements/gallery.go‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import (
77
"github.com/chasefleming/elem-go"
88
"github.com/chasefleming/elem-go/attrs"
99
"github.com/mudler/LocalAI/core/gallery"
10+
"github.com/mudler/LocalAI/core/p2p"
1011
"github.com/mudler/LocalAI/core/services"
1112
"github.com/mudler/LocalAI/pkg/xsync"
1213
)
@@ -72,6 +73,133 @@ func ProgressBar(progress string) string {
7273
).Render()
7374
}
7475

76+
func P2PNodeStats(nodes []p2p.NodeData) string {
77+
/*
78+
<div class="bg-gray-800 p-6 rounded-lg shadow-lg text-left">
79+
<p class="text-xl font-semibold text-gray-200">Total Workers Detected: {{ len .Nodes }}</p>
80+
{{ $online := 0 }}
81+
{{ range .Nodes }}
82+
{{ if .IsOnline }}
83+
{{ $online = add $online 1 }}
84+
{{ end }}
85+
{{ end }}
86+
<p class="text-xl font-semibold text-gray-200">Total Online Workers: {{$online}}</p>
87+
</div>
88+
*/
89+
90+
online := 0
91+
for _, n := range nodes {
92+
if n.IsOnline() {
93+
online++
94+
}
95+
}
96+
97+
return elem.Div(
98+
attrs.Props{
99+
"class": "bg-gray-800 p-6 rounded-lg shadow-lg text-left",
100+
},
101+
elem.P(
102+
attrs.Props{
103+
"class": "text-xl font-semibold text-gray-200",
104+
},
105+
elem.Text("Total Workers Detected: "+fmt.Sprintf("%d", len(nodes))),
106+
),
107+
elem.P(
108+
attrs.Props{
109+
"class": "text-xl font-semibold text-gray-200",
110+
},
111+
elem.Text("Total Online Workers: "+fmt.Sprintf("%d", online)),
112+
),
113+
).Render()
114+
}
115+
116+
func P2PNodeBoxes(nodes []p2p.NodeData) string {
117+
/*
118+
<div class="bg-gray-800 p-4 rounded-lg shadow-lg text-left">
119+
<div class="flex items-center mb-2">
120+
<i class="fas fa-desktop text-gray-400 mr-2"></i>
121+
<span class="text-gray-200 font-semibold">{{.ID}}</span>
122+
</div>
123+
<p class="text-sm text-gray-400 mt-2 flex items-center">
124+
Status:
125+
<i class="fas fa-circle {{ if .IsOnline }}text-green-500{{ else }}text-red-500{{ end }} ml-2 mr-1"></i>
126+
<span class="{{ if .IsOnline }}text-green-400{{ else }}text-red-400{{ end }}">
127+
{{ if .IsOnline }}Online{{ else }}Offline{{ end }}
128+
</span>
129+
</p>
130+
</div>
131+
*/
132+
133+
nodesElements := []elem.Node{}
134+
135+
for _, n := range nodes {
136+
137+
nodesElements = append(nodesElements,
138+
elem.Div(
139+
attrs.Props{
140+
"class": "bg-gray-800 p-4 rounded-lg shadow-lg text-left",
141+
},
142+
elem.Div(
143+
attrs.Props{
144+
"class": "flex items-center mb-2",
145+
},
146+
elem.I(
147+
attrs.Props{
148+
"class": "fas fa-desktop text-gray-400 mr-2",
149+
},
150+
),
151+
elem.Span(
152+
attrs.Props{
153+
"class": "text-gray-200 font-semibold",
154+
},
155+
elem.Text(n.ID),
156+
),
157+
),
158+
elem.P(
159+
attrs.Props{
160+
"class": "text-sm text-gray-400 mt-2 flex items-center",
161+
},
162+
elem.Text("Status: "),
163+
elem.If(
164+
n.IsOnline(),
165+
elem.I(
166+
attrs.Props{
167+
"class": "fas fa-circle text-green-500 ml-2 mr-1",
168+
},
169+
),
170+
elem.I(
171+
attrs.Props{
172+
"class": "fas fa-circle text-red-500 ml-2 mr-1",
173+
},
174+
),
175+
),
176+
elem.If(
177+
n.IsOnline(),
178+
elem.Span(
179+
attrs.Props{
180+
"class": "text-green-400",
181+
},
182+
183+
elem.Text("Online"),
184+
),
185+
elem.Span(
186+
attrs.Props{
187+
"class": "text-red-400",
188+
},
189+
elem.Text("Offline"),
190+
),
191+
),
192+
),
193+
))
194+
}
195+
196+
render := ""
197+
for _, r := range nodesElements {
198+
render += r.Render()
199+
}
200+
return render
201+
}
202+
75203
func StartProgressBar(uid, progress, text string) string {
76204
if progress == "" {
77205
progress = "0"

‎core/http/routes/ui.go‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,32 @@ func RegisterUIRoutes(app *fiber.App,
5757
if p2p.IsP2PEnabled() {
5858
app.Get("/p2p", auth, func(c *fiber.Ctx) error {
5959
summary := fiber.Map{
60-
"Title": "LocalAI - P2P dashboard",
61-
"Version": internal.PrintableVersion(),
62-
"Nodes": p2p.GetAvailableNodes(""),
63-
"FederatedNodes": p2p.GetAvailableNodes(p2p.FederatedID),
64-
"IsP2PEnabled": p2p.IsP2PEnabled(),
65-
"P2PToken": appConfig.P2PToken,
60+
"Title": "LocalAI - P2P dashboard",
61+
"Version": internal.PrintableVersion(),
62+
//"Nodes": p2p.GetAvailableNodes(""),
63+
//"FederatedNodes": p2p.GetAvailableNodes(p2p.FederatedID),
64+
"IsP2PEnabled": p2p.IsP2PEnabled(),
65+
"P2PToken": appConfig.P2PToken,
6666
}
6767

6868
// Render index
6969
return c.Render("views/p2p", summary)
7070
})
71+
72+
/* show nodes live! */
73+
app.Get("/p2p/ui/workers", auth, func(c *fiber.Ctx) error {
74+
return c.SendString(elements.P2PNodeBoxes(p2p.GetAvailableNodes("")))
75+
})
76+
app.Get("/p2p/ui/workers-federation", auth, func(c *fiber.Ctx) error {
77+
return c.SendString(elements.P2PNodeBoxes(p2p.GetAvailableNodes(p2p.FederatedID)))
78+
})
79+
80+
app.Get("/p2p/ui/workers-stats", auth, func(c *fiber.Ctx) error {
81+
return c.SendString(elements.P2PNodeStats(p2p.GetAvailableNodes("")))
82+
})
83+
app.Get("/p2p/ui/workers-federation-stats", auth, func(c *fiber.Ctx) error {
84+
return c.SendString(elements.P2PNodeStats(p2p.GetAvailableNodes(p2p.FederatedID)))
85+
})
7186
}
7287

7388
// Show the Models page (all models)

‎core/http/views/p2p.html‎

Lines changed: 18 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -54,32 +54,16 @@ <h3 class="text-2xl font-semibold text-gray-100 mb-4">Start a new llama.cpp P2P
5454
</div>
5555

5656
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8">
57-
<div class="bg-gray-800 p-6 rounded-lg shadow-lg text-left">
58-
<p class="text-xl font-semibold text-gray-200">Total Workers Detected: {{ len .Nodes }}</p>
59-
{{ $online := 0 }}
60-
{{ range .Nodes }}
61-
{{ if .IsOnline }}
62-
{{ $online = add $online 1 }}
63-
{{ end }}
64-
{{ end }}
65-
<p class="text-xl font-semibold text-gray-200">Total Online Workers: {{$online}}</p>
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+
>
6666
</div>
67-
68-
{{ range .Nodes }}
69-
<div class="bg-gray-800 p-4 rounded-lg shadow-lg text-left">
70-
<div class="flex items-center mb-2">
71-
<i class="fas fa-desktop text-gray-400 mr-2"></i>
72-
<span class="text-gray-200 font-semibold">{{.ID}}</span>
73-
</div>
74-
<p class="text-sm text-gray-400 mt-2 flex items-center">
75-
Status:
76-
<i class="fas fa-circle {{ if .IsOnline }}text-green-500{{ else }}text-red-500{{ end }} ml-2 mr-1"></i>
77-
<span class="{{ if .IsOnline }}text-green-400{{ else }}text-red-400{{ end }}">
78-
{{ if .IsOnline }}Online{{ else }}Offline{{ end }}
79-
</span>
80-
</p>
81-
</div>
82-
{{ end }}
8367
</div>
8468
<hr>
8569

@@ -135,31 +119,17 @@ <h3 class="text-2xl font-semibold text-gray-100 mb-4">Start a federated instance
135119
</div>
136120

137121
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8">
138-
<div class="bg-gray-800 p-6 rounded-lg shadow-lg text-left">
139-
<p class="text-xl font-semibold text-gray-200">Total Federated nodes Detected: {{ len .FederatedNodes }}</p>
140-
{{ $fonline := 0 }}
141-
{{ range .FederatedNodes }}
142-
{{ if .IsOnline }}
143-
{{ $fonline = add $online 1 }}
144-
{{ end }}
145-
{{ end }}
146-
<p class="text-xl font-semibold text-gray-200">Total Online Federated nodes: {{$fonline}}</p>
122+
<div
123+
hx-get="/p2p/ui/workers-federation-stats"
124+
hx-trigger="every 1s"
125+
>
147126
</div>
148-
{{ range .FederatedNodes }}
149-
<div class="bg-gray-800 p-4 rounded-lg shadow-lg text-left">
150-
<div class="flex items-center mb-2">
151-
<i class="fas fa-desktop text-gray-400 mr-2"></i>
152-
<span class="text-gray-200 font-semibold">{{.ID}}</span>
153-
</div>
154-
<p class="text-sm text-gray-400 mt-2 flex items-center">
155-
Status:
156-
<i class="fas fa-circle {{ if .IsOnline }}text-green-500{{ else }}text-red-500{{ end }} ml-2 mr-1"></i>
157-
<span class="{{ if .IsOnline }}text-green-400{{ else }}text-red-400{{ end }}">
158-
{{ if .IsOnline }}Online{{ else }}Offline{{ end }}
159-
</span>
160-
</p>
127+
<div
128+
hx-get="/p2p/ui/workers-federation"
129+
hx-trigger="every 1s"
130+
>
161131
</div>
162-
{{ end }}
132+
163133
</div>
164134
</div>
165135
</div>

0 commit comments

Comments
 (0)