enhancements

Author: mudler

core/http/elements/gallery.go

@@ -102,11 +102,22 @@ func P2PNodeStats(nodes []p2p.NodeData) string {
 		}
 	}
 
+	class := "text-green-500"
+	if online == 0 {
+		class = "text-red-500"
+	}
+	/*
+	   <i class="fas fa-circle animate-pulse text-green-500 ml-2 mr-1"></i>
+	*/
+	circle := elem.I(attrs.Props{
+		"class": "fas fa-circle animate-pulse " + class + " ml-2 mr-1",
+	})
 	nodesElements := []elem.Node{
 		elem.Span(
 			attrs.Props{
-				"class": "text-green-500",
+				"class": class,
 			},
+			circle,
 			elem.Text(fmt.Sprintf("%d", online)),
 		),
 		elem.Span(

core/http/views/p2p.html

@@ -10,16 +10,16 @@
 
         <div class="workers mt-12 text-center">
             <h2 class="text-3xl font-semibold text-gray-100 mb-8">
-                <i class="fa-solid fa-network-wired"></i> P2P Network    
+                <i class="fa-solid fa-circle-nodes"></i> Distributed inference with P2P   
                 <a href="https://localai.io/features/distribute/" target="_blank">
                     <i class="fas fa-circle-info pr-2"></i>
                 </a> 
             </h2> 
-            <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>
+            <h5 class="mb-4 text-justify">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). You can now share computational resources between your devices or your friends!</h5>
 
             <!-- Tabs for Instructions -->
             <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-12 text-left">
-                <h3 class="text-2xl font-semibold text-gray-100 mb-6">Start a new llama.cpp P2P worker</h3>
+                <h3 class="text-2xl font-semibold text-gray-100 mb-6"><i class="fa-solid fa-book"></i> Start a new llama.cpp P2P worker</h3>
                 <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>
 
                 <!-- Tabs navigation -->
@@ -54,15 +54,15 @@ <h3 class="text-2xl font-semibold text-gray-100 mb-6">Start a new llama.cpp P2P
                 </div>
             </div>
 
-            <p class="text-xl font-semibold text-gray-200"> Nodes: <span hx-get="/p2p/ui/workers-stats" hx-trigger="every 1s"></span> </p>
+            <p class="text-xl font-semibold text-gray-200"> <i class="text-gray-200 fa-solid fa-circle-nodes"></i> Workers (llama.cpp): <span hx-get="/p2p/ui/workers-stats" hx-trigger="every 1s"></span> </p>
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-12">
                 <div hx-get="/p2p/ui/workers" hx-trigger="every 1s"></div>
             </div>
 
             <hr class="border-gray-700 mb-12">
 
             <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-12 text-left">
-                <h3 class="text-2xl font-semibold text-gray-100 mb-6">Start a federated instance</h3>
+                <h3 class="text-2xl font-semibold text-gray-100 mb-6"><i class="fa-solid fa-book"></i> Start a federated instance</h3>
                 <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>
 
                 <!-- Tabs navigation -->
@@ -112,7 +112,7 @@ <h3 class="text-2xl font-semibold text-gray-100 mb-6">Start a federated instance
                 </div>
             </div>
 
-            <p class="text-xl font-semibold text-gray-200"> Nodes: <span hx-get="/p2p/ui/workers-federation-stats" hx-trigger="every 1s"></span> </p>
+            <p class="text-xl font-semibold text-gray-200"> <i class="text-gray-200 fa-solid fa-circle-nodes"></i> Federated Nodes: <span hx-get="/p2p/ui/workers-federation-stats" hx-trigger="every 1s"></span> </p>
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-12">
                 <div hx-get="/p2p/ui/workers-federation" hx-trigger="every 1s"></div>
             </div>

core/http/views/partials/navbar.html

@@ -22,7 +22,7 @@
                 <a href="/tts/" class="text-gray-400 hover:text-white px-3 py-2 rounded"><i class="fa-solid fa-music pr-2"></i> TTS </a>
                 <a href="/talk/" class="text-gray-400 hover:text-white px-3 py-2 rounded"><i class="fa-solid fa-phone pr-2"></i> Talk </a>
                 {{ if .IsP2PEnabled }}
-                <a href="/p2p/" class="text-gray-400 hover:text-white px-3 py-2 rounded"><i class="fa-solid fa-network-wired"></i> P2P </a>
+                <a href="/p2p/" class="text-gray-400 hover:text-white px-3 py-2 rounded"><i class="fa-solid fa-circle-nodes"></i> Swarm </a>
                 {{ end }}
                 <a href="/swagger/" class="text-gray-400 hover:text-white px-3 py-2 rounded"><i class="fas fa-code pr-2"></i> API</a>
             </div>
@@ -38,7 +38,7 @@
                 <a href="/tts/" class="block text-gray-400 hover:text-white px-3 py-2 rounded mt-1"><i class="fa-solid fa-music pr-2"></i> TTS </a>
                 <a href="/talk/" class="block text-gray-400 hover:text-white px-3 py-2 rounded mt-1"><i class="fa-solid fa-phone pr-2"></i> Talk </a>
                 {{ if .IsP2PEnabled }}
-                <a href="/p2p/" class="block text-gray-400 hover:text-white px-3 py-2 rounded mt-1"><i class="fa-solid fa-network-wired"></i> P2P </a>
+                <a href="/p2p/" class="block text-gray-400 hover:text-white px-3 py-2 rounded mt-1"><i class="fa-solid fa-circle-nodes"></i> Swarm </a>
                 {{ end }}
                 <a href="/swagger/" class="block text-gray-400 hover:text-white px-3 py-2 rounded mt-1"><i class="fas fa-code pr-2"></i> API</a>
             </div>