mirror of
https://github.com/mudler/LocalAI.git
synced 2025-12-30 22:20:20 -06:00
9c7f92c81f
* feat(p2p): sync models between federated nodes This change makes sure that between federated nodes all the models are synced with each other. Note: this works exclusively with models belonging to a gallery. It does not sync files between the nodes, but rather it synces the node setup. E.g. All the nodes needs to have configured the same galleries and install models without any local editing. Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * Make nodes stable Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * Fixups on syncing Signed-off-by: Ettore Di Giacinto <mudler@localai.io> * ui: improve p2p view Signed-off-by: Ettore Di Giacinto <mudler@localai.io> --------- Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
583 lines
35 KiB
HTML
583 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{{template "views/partials/head" .}}
|
|
|
|
<body class="bg-gradient-to-br from-gray-900 to-gray-950 text-gray-200">
|
|
<div class="flex flex-col min-h-screen" x-data="{}">
|
|
|
|
{{template "views/partials/navbar" .}}
|
|
|
|
<div class="container mx-auto px-4 py-8 flex-grow">
|
|
<div class="workers mt-8">
|
|
<!-- Hero Section with Network Animation -->
|
|
<div class="animation-container mb-8">
|
|
<canvas id="networkCanvas"></canvas>
|
|
<div class="text-overlay">
|
|
<h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-indigo-400">
|
|
<i class="fa-solid fa-circle-nodes mr-2"></i> Distributed AI Computing
|
|
</span>
|
|
</h1>
|
|
<p class="text-xl text-gray-300">
|
|
Scale your AI workloads across multiple devices with peer-to-peer distribution
|
|
<a href="https://localai.io/features/distribute/" target="_blank" class="text-blue-400 hover:text-blue-300 transition-colors">
|
|
<i class="fas fa-circle-info ml-2"></i>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- How P2P Distribution Works -->
|
|
<div class="relative bg-gradient-to-br from-indigo-900/40 via-purple-900/30 to-blue-900/40 rounded-3xl shadow-2xl p-8 mb-12 overflow-hidden">
|
|
<!-- Background Pattern -->
|
|
<div class="absolute inset-0 opacity-10">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20"></div>
|
|
<div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0); background-size: 20px 20px;"></div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="text-center mb-10">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
|
|
<span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">
|
|
How P2P Distribution Works
|
|
</span>
|
|
</h2>
|
|
<p class="text-lg text-gray-300 max-w-3xl mx-auto">
|
|
LocalAI leverages cutting-edge peer-to-peer technologies to distribute AI workloads intelligently across your network
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Key Features Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- Federation -->
|
|
<div class="bg-white/10 rounded-2xl p-6 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all duration-300 group">
|
|
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fas fa-network-wired text-blue-400 text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-3">Instance Federation</h3>
|
|
<p class="text-gray-300 text-sm leading-relaxed">
|
|
Share complete LocalAI instances across your network for load balancing and redundancy. Perfect for scaling across multiple devices.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Model Sharding -->
|
|
<div class="bg-white/10 rounded-2xl p-6 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all duration-300 group">
|
|
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fas fa-puzzle-piece text-purple-400 text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-3">Model Sharding</h3>
|
|
<p class="text-gray-300 text-sm leading-relaxed">
|
|
Split large model weights across multiple workers. Currently supported with llama.cpp backends for efficient memory usage.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Resource Sharing -->
|
|
<div class="bg-white/10 rounded-2xl p-6 backdrop-blur-sm border border-white/20 hover:bg-white/15 transition-all duration-300 group">
|
|
<div class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
|
|
<i class="fas fa-share-alt text-green-400 text-xl"></i>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-white mb-3">Resource Sharing</h3>
|
|
<p class="text-gray-300 text-sm leading-relaxed">
|
|
Pool computational resources from multiple devices, including your friends' machines, to handle larger workloads collaboratively.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Benefits -->
|
|
<div class="mt-10 grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-blue-400 mb-1">
|
|
<i class="fas fa-tachometer-alt mr-2"></i>Faster
|
|
</div>
|
|
<p class="text-gray-400 text-sm">Parallel processing</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-purple-400 mb-1">
|
|
<i class="fas fa-expand-arrows-alt mr-2"></i>Scalable
|
|
</div>
|
|
<p class="text-gray-400 text-sm">Add more nodes</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-green-400 mb-1">
|
|
<i class="fas fa-shield-alt mr-2"></i>Resilient
|
|
</div>
|
|
<p class="text-gray-400 text-sm">Fault tolerant</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="text-2xl font-bold text-yellow-400 mb-1">
|
|
<i class="fas fa-coins mr-2"></i>Efficient
|
|
</div>
|
|
<p class="text-gray-400 text-sm">Resource optimization</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Token Card -->
|
|
<div class="bg-gradient-to-r from-gray-800/90 to-gray-800/80 border border-gray-700/50 rounded-xl overflow-hidden shadow-xl mb-10 p-6 transition-all duration-300 hover:shadow-lg hover:shadow-blue-900/20 hover:border-blue-700/50">
|
|
<div class="flex items-center mb-4">
|
|
<i class="fas fa-key text-yellow-400 text-xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-white">Network Token</h3>
|
|
<button onclick="copyClipboard('{{.P2PToken}}')" class="ml-auto bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-900/80 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50" @click="copyClipboard($el.textContent)">{{.P2PToken}}</code>
|
|
<p class="text-gray-300">
|
|
The network token can be used to either share the instance or join a federation or a worker network. Below you will find examples on how to start a new instance or a worker with this token.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Warning box if p2p token is empty and p2p is enabled -->
|
|
{{ if eq .P2PToken "" }}
|
|
<div class="bg-gradient-to-r from-red-800/70 to-red-700/70 border border-red-600/50 p-6 rounded-xl shadow-lg mb-10 text-left">
|
|
<div class="flex items-center mb-2">
|
|
<i class="fa-solid fa-exclamation-triangle text-red-300 text-2xl mr-3"></i>
|
|
<h3 class="text-xl font-bold text-white">Warning: P2P token was not specified</h3>
|
|
</div>
|
|
<p class="mb-4 text-red-200">
|
|
You have to enable P2P mode by starting LocalAI with <code class="bg-red-900/50 px-2 py-0.5 rounded">--p2p</code>. Please restart the server with <code class="bg-red-900/50 px-2 py-0.5 rounded">--p2p</code> to generate a new token automatically that can be used to discover other nodes. If you already have a token, specify it with <code class="bg-red-900/50 px-2 py-0.5 rounded">export TOKEN=".."</code>
|
|
<a href="https://localai.io/features/distribute/" target="_blank" class="text-red-300 hover:text-red-200 underline underline-offset-2">
|
|
Check out the documentation for more information.
|
|
</a>
|
|
</p>
|
|
</div>
|
|
{{ else }}
|
|
|
|
<!-- Network Status Overview -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10">
|
|
<!-- Federation Status -->
|
|
<div class="bg-gradient-to-br from-blue-800/60 to-blue-900/40 border border-blue-700/50 rounded-2xl p-6 shadow-xl transition-all duration-300 hover:shadow-blue-900/30">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center mr-3">
|
|
<i class="fas fa-network-wired text-blue-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white">Federation</h3>
|
|
<p class="text-blue-300 text-sm">Instance sharing</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-2xl font-bold" hx-get="p2p/ui/workers-federation-stats" hx-trigger="every 1s"></div>
|
|
<p class="text-blue-300 text-sm">nodes</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center text-sm text-blue-200">
|
|
<i class="fas fa-info-circle mr-2"></i>
|
|
<span>Load balanced instances</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Workers Status -->
|
|
<div class="bg-gradient-to-br from-purple-800/60 to-purple-900/40 border border-purple-700/50 rounded-2xl p-6 shadow-xl transition-all duration-300 hover:shadow-purple-900/30">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-purple-500/20 rounded-xl flex items-center justify-center mr-3">
|
|
<i class="fas fa-puzzle-piece text-purple-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white">Workers</h3>
|
|
<p class="text-purple-300 text-sm">Model sharding</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-2xl font-bold" hx-get="p2p/ui/workers-stats" hx-trigger="every 1s"></div>
|
|
<p class="text-purple-300 text-sm">workers</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center text-sm text-purple-200">
|
|
<i class="fas fa-info-circle mr-2"></i>
|
|
<span>Distributed computation</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Network Token -->
|
|
<div class="bg-gradient-to-br from-yellow-800/60 to-yellow-900/40 border border-yellow-700/50 rounded-2xl p-6 shadow-xl transition-all duration-300 hover:shadow-yellow-900/30">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-yellow-500/20 rounded-xl flex items-center justify-center mr-3">
|
|
<i class="fas fa-key text-yellow-400 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-white">Network</h3>
|
|
<p class="text-yellow-300 text-sm">Connection token</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="copyClipboard('{{.P2PToken}}')" class="bg-yellow-600/30 hover:bg-yellow-600/50 text-yellow-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<div class="flex items-center text-sm text-yellow-200">
|
|
<i class="fas fa-info-circle mr-2"></i>
|
|
<span>Ready to connect</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Federation Box -->
|
|
<div class="bg-gradient-to-br from-gray-800/90 to-gray-800/80 border border-gray-700/50 rounded-2xl overflow-hidden shadow-xl mb-10 transition-all duration-300 hover:shadow-lg hover:shadow-blue-900/20 backdrop-blur-sm">
|
|
<div class="p-8 border-b border-gray-700/50">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center">
|
|
<div class="w-14 h-14 bg-blue-500/20 rounded-2xl flex items-center justify-center mr-4">
|
|
<i class="text-blue-400 fa-solid fa-circle-nodes text-2xl fa-spin-pulse"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-white">Federation Network</h2>
|
|
<p class="text-blue-300 text-sm">Instance load balancing and sharing</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm text-gray-400 mb-1">Active Nodes</div>
|
|
<div class="text-3xl font-bold text-blue-400" hx-get="p2p/ui/workers-federation-stats" hx-trigger="every 1s"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-900/20 rounded-xl p-4 mb-6 border border-blue-700/30">
|
|
<p class="text-gray-300 text-sm leading-relaxed">
|
|
<i class="fas fa-lightbulb text-blue-400 mr-2"></i>
|
|
Start LocalAI in federated mode to share your instance, or launch a federated server to distribute requests intelligently across multiple nodes in your network.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Federation Nodes Grid -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" hx-get="p2p/ui/workers-federation" hx-trigger="every 1s">
|
|
<!-- Nodes will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<h3 class="text-2xl font-bold text-white mb-6">
|
|
<i class="fa-solid fa-book text-blue-400 mr-2"></i> Start a federated instance
|
|
</h3>
|
|
|
|
<!-- Tabs navigation -->
|
|
<ul class="mb-5 flex list-none flex-row flex-wrap ps-0 border border-gray-700/50 rounded-lg overflow-hidden" role="tablist" data-twe-nav-ref>
|
|
<li role="presentation" class="flex-auto text-center">
|
|
<a href="#tabs-federated-cli" class="tablink block border-0 bg-gray-800 px-7 py-4 text-sm font-medium uppercase leading-tight text-white hover:bg-gray-700 focus:bg-gray-700 data-[twe-nav-active]:border-blue-500 data-[twe-nav-active]:text-blue-400 data-[twe-nav-active]:bg-gray-700 active transition-all duration-200" data-twe-toggle="pill" data-twe-target="#tabs-federated-cli" data-twe-nav-active role="tab" aria-controls="tabs-federated-cli" aria-selected="true">
|
|
<i class="fa-solid fa-terminal mr-2"></i> CLI
|
|
</a>
|
|
</li>
|
|
<li role="presentation" class="flex-auto text-center">
|
|
<a href="#tabs-federated-docker" class="tablink block border-0 bg-gray-800 px-7 py-4 text-sm font-medium uppercase leading-tight text-white hover:bg-gray-700 focus:bg-gray-700 data-[twe-nav-active]:border-blue-500 data-[twe-nav-active]:text-blue-400 data-[twe-nav-active]:bg-gray-700 transition-all duration-200" data-twe-toggle="pill" data-twe-target="#tabs-federated-docker" role="tab" aria-controls="tabs-federated-docker" aria-selected="false">
|
|
<i class="fa-solid fa-box-open mr-2"></i> Container images
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tabs content -->
|
|
<div class="mb-6">
|
|
<div class="tabcontent hidden opacity-100 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block p-4" id="tabs-federated-cli" role="tabpanel" aria-labelledby="tabs-federated-cli" data-twe-tab-active>
|
|
<div class="bg-gray-900/50 rounded-xl border border-gray-700/50 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-lg font-bold text-white">
|
|
Start a new instance to share:
|
|
</h4>
|
|
<button onclick="copyClipboard('export TOKEN=\'{{.P2PToken}}\'\nlocal-ai run --federated --p2p')" class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-800 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50">
|
|
# Start a new instance to share with --federated and a TOKEN<br>
|
|
export TOKEN="<span class="token">{{.P2PToken}}</span>"<br>
|
|
local-ai run --federated --p2p</code>
|
|
|
|
<p class="text-gray-400 text-sm 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.</p>
|
|
|
|
<div class="flex items-center justify-between mb-4 mt-8">
|
|
<h4 class="text-lg font-bold text-white">
|
|
Start a new federated load balancer:
|
|
</h4>
|
|
<button onclick="copyClipboard('export TOKEN=\'{{.P2PToken}}\'\nlocal-ai federated')" class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-800 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50">
|
|
export TOKEN="<span class="token">{{.P2PToken}}</span>"<br>
|
|
local-ai federated</code>
|
|
|
|
<p class="text-gray-400 text-sm mt-2">Note: Token is needed when starting the federated server.</p>
|
|
|
|
<p class="text-gray-300 mt-4">For all the options available, please refer to the <a href="https://localai.io/features/distribute/#starting-workers" target="_blank" class="text-blue-400 hover:text-blue-300 transition-colors">documentation</a>.</p>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<div class="bg-gray-900/50 rounded-xl border border-gray-700/50 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-lg font-bold text-white">
|
|
Start a new federated instance:
|
|
</h4>
|
|
<button onclick="copyClipboard('docker run -ti --net host -e TOKEN=\'{{.P2PToken}}\' --name local-ai -p 8080:8080 localai/localai:latest-cpu run --federated --p2p')" class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-800 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50">
|
|
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</code>
|
|
|
|
<div class="flex items-center justify-between mb-4 mt-8">
|
|
<h4 class="text-lg font-bold text-white">
|
|
Start a new federated server with Docker (port to 9090):
|
|
</h4>
|
|
<button onclick="copyClipboard('docker run -ti --net host -e TOKEN=\'{{.P2PToken}}\' --name local-ai -p 9090:8080 localai/localai:latest-cpu federated')" class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-800 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50">
|
|
docker run -ti --net host -e TOKEN="<span class="token">{{.P2PToken}}</span>" --name local-ai -p 9090:8080 localai/localai:latest-cpu federated</code>
|
|
|
|
<p class="text-gray-300 mt-4">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-blue-400 hover:text-blue-300 transition-colors">Container images documentation</a> and <a href="https://localai.io/advanced/#cli-parameters" target="_blank" class="text-blue-400 hover:text-blue-300 transition-colors">CLI parameters documentation</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Workers Box -->
|
|
<div class="bg-gradient-to-br from-gray-800/90 to-gray-800/80 border border-gray-700/50 rounded-2xl overflow-hidden shadow-xl mb-10 transition-all duration-300 hover:shadow-lg hover:shadow-purple-900/20 backdrop-blur-sm">
|
|
<div class="p-8 border-b border-gray-700/50">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center">
|
|
<div class="w-14 h-14 bg-purple-500/20 rounded-2xl flex items-center justify-center mr-4">
|
|
<i class="text-purple-400 fa-solid fa-puzzle-piece text-2xl fa-spin-pulse"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-white">Worker Network</h2>
|
|
<p class="text-purple-300 text-sm">Distributed model computation (llama.cpp)</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-sm text-gray-400 mb-1">Active Workers</div>
|
|
<div class="text-3xl font-bold text-purple-400" hx-get="p2p/ui/workers-stats" hx-trigger="every 1s"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-purple-900/20 rounded-xl p-4 mb-6 border border-purple-700/30">
|
|
<p class="text-gray-300 text-sm leading-relaxed">
|
|
<i class="fas fa-lightbulb text-purple-400 mr-2"></i>
|
|
Deploy llama.cpp workers to split model weights across multiple devices. This enables processing larger models by distributing computational load and memory requirements.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Workers Grid -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4" hx-get="p2p/ui/workers" hx-trigger="every 1s">
|
|
<!-- Workers will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-8">
|
|
<h3 class="text-2xl font-bold text-white mb-6">
|
|
<i class="fa-solid fa-book text-purple-400 mr-2"></i> Start a new llama.cpp worker
|
|
</h3>
|
|
|
|
<!-- Tabs navigation -->
|
|
<ul class="mb-5 flex list-none flex-row flex-wrap ps-0 border border-gray-700/50 rounded-lg overflow-hidden" role="tablist" data-twe-nav-ref>
|
|
<li role="presentation" class="flex-auto text-center">
|
|
<a href="#tabs-cli" class="tablink block border-0 bg-gray-800 px-7 py-4 text-sm font-medium uppercase leading-tight text-white hover:bg-gray-700 focus:bg-gray-700 data-[twe-nav-active]:border-purple-500 data-[twe-nav-active]:text-purple-400 data-[twe-nav-active]:bg-gray-700 active transition-all duration-200" data-twe-toggle="pill" data-twe-target="#tabs-cli" data-twe-nav-active role="tab" aria-controls="tabs-cli" aria-selected="true">
|
|
<i class="fa-solid fa-terminal mr-2"></i> CLI
|
|
</a>
|
|
</li>
|
|
<li role="presentation" class="flex-auto text-center">
|
|
<a href="#tabs-docker" class="tablink block border-0 bg-gray-800 px-7 py-4 text-sm font-medium uppercase leading-tight text-white hover:bg-gray-700 focus:bg-gray-700 data-[twe-nav-active]:border-purple-500 data-[twe-nav-active]:text-purple-400 data-[twe-nav-active]:bg-gray-700 transition-all duration-200" data-twe-toggle="pill" data-twe-target="#tabs-docker" role="tab" aria-controls="tabs-docker" aria-selected="false">
|
|
<i class="fa-solid fa-box-open mr-2"></i> Container images
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Tabs content -->
|
|
<div class="mb-6">
|
|
<div class="tabcontent hidden opacity-100 transition-opacity duration-150 ease-linear data-[twe-tab-active]:block p-4" id="tabs-cli" role="tabpanel" aria-labelledby="tabs-cli" data-twe-tab-active>
|
|
<div class="bg-gray-900/50 rounded-xl border border-gray-700/50 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-lg font-bold text-white">
|
|
Start a new worker:
|
|
</h4>
|
|
<button onclick="copyClipboard('export TOKEN=\'{{.P2PToken}}\'\nlocal-ai worker p2p-llama-cpp-rpc')" class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-800 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50">
|
|
export TOKEN="<span class="token">{{.P2PToken}}</span>"<br>
|
|
local-ai worker p2p-llama-cpp-rpc</code>
|
|
|
|
<p class="text-gray-300 mt-4">For all the options available, please refer to the <a href="https://localai.io/features/distribute/#starting-workers" target="_blank" class="text-purple-400 hover:text-purple-300 transition-colors">documentation</a>.</p>
|
|
</div>
|
|
</div>
|
|
<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">
|
|
<div class="bg-gray-900/50 rounded-xl border border-gray-700/50 p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h4 class="text-lg font-bold text-white">
|
|
Start a new worker with Docker:
|
|
</h4>
|
|
<button onclick="copyClipboard('docker run -ti --net host -e TOKEN=\'{{.P2PToken}}\' --name local-ai -p 8080:8080 localai/localai:latest-cpu worker p2p-llama-cpp-rpc')" class="bg-gray-700 hover:bg-gray-600 text-gray-300 p-2 rounded-lg transition-colors duration-200">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</button>
|
|
</div>
|
|
<code class="block bg-gray-800 text-yellow-300 p-4 rounded-lg break-words mb-4 border border-gray-700/50">
|
|
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</code>
|
|
|
|
<p class="text-gray-300 mt-4">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-purple-400 hover:text-purple-300 transition-colors">Container images documentation</a> and <a href="https://localai.io/advanced/#cli-parameters" target="_blank" class="text-purple-400 hover:text-purple-300 transition-colors">CLI parameters documentation</a>.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Llama.cpp Box END -->
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
|
|
{{template "views/partials/footer" .}}
|
|
</div>
|
|
<script src="static/p2panimation.js"></script>
|
|
|
|
<style>
|
|
.token {
|
|
word-break: break-all;
|
|
}
|
|
|
|
/* Enhanced scrollbar styling */
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: rgba(31, 41, 55, 0.5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background: rgba(107, 114, 128, 0.5);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(107, 114, 128, 0.8);
|
|
}
|
|
|
|
/* Animation enhancements */
|
|
.fa-circle-nodes {
|
|
animation: pulseGlow 2s ease-in-out infinite;
|
|
}
|
|
|
|
.fa-puzzle-piece {
|
|
animation: rotateGlow 3s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% {
|
|
filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.3));
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.7));
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
|
|
@keyframes rotateGlow {
|
|
0%, 100% {
|
|
filter: drop-shadow(0 0 2px rgba(147, 51, 234, 0.3));
|
|
transform: rotate(0deg) scale(1);
|
|
}
|
|
33% {
|
|
filter: drop-shadow(0 0 6px rgba(147, 51, 234, 0.6));
|
|
transform: rotate(10deg) scale(1.05);
|
|
}
|
|
66% {
|
|
filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.4));
|
|
transform: rotate(-5deg) scale(1.02);
|
|
}
|
|
}
|
|
|
|
/* Copy button enhancements */
|
|
.copy-icon:hover, button:hover .fa-copy {
|
|
color: #60a5fa;
|
|
transform: scale(1.1);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* Node card hover effects */
|
|
.workers .grid > div {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.workers .grid > div:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Status indicator animations */
|
|
.animate-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: .5;
|
|
}
|
|
}
|
|
|
|
/* Enhanced tab styling */
|
|
.tablink {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tablink::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
|
|
transition: left 0.5s ease;
|
|
}
|
|
|
|
.tablink:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
/* Loading spinner for HTMX */
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
|
|
.htmx-request .htmx-indicator {
|
|
display: inline;
|
|
}
|
|
|
|
/* Card gradient overlays */
|
|
.card-overlay {
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
|
|
}
|
|
|
|
/* Enhanced button styles */
|
|
button[onclick*="copyClipboard"] {
|
|
transition: all 0.2s ease;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
button[onclick*="copyClipboard"]:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
/* Code block enhancements */
|
|
code {
|
|
position: relative;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
code:hover {
|
|
box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2);
|
|
border-color: rgba(234, 179, 8, 0.3) !important;
|
|
}
|
|
</style>
|
|
|
|
</body>
|
|
</html> |