mirror of
https://github.com/mudler/LocalAI.git
synced 2025-05-31 07:54:59 +00:00
chore(ux): add animated header with anime.js in p2p sections (#3271)
feat(p2p): add animated header with anime.js Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
This commit is contained in:
Ettore Di Giacinto
GitHub
parent
e4c696d966
commit
13cb7960bd
5 changed files with 178 additions and 56 deletions
|
|
@ -155,54 +155,29 @@
|
|||
right: 10px;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
.fa-circle-nodes {
|
||||
/* font-size: 100px; /* Adjust the size as needed */
|
||||
animation: rotateCircleNodes 8s linear infinite; /* Slow and fluid rotation */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes rotateCircleNodes {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
/* Animation for the warning box */
|
||||
.fa-flask {
|
||||
/* font-size: 100px; /* Adjust the size as needed */
|
||||
animation: shakeFlask 3s ease-in-out infinite; /* Smooth easing and longer duration for fluidity */
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
@keyframes shakeFlask {
|
||||
0%, 10% { transform: rotate(0deg); } /* Start and end still */
|
||||
20% { transform: rotate(-10deg); } /* Smooth transition to left */
|
||||
30% { transform: rotate(10deg); } /* Smooth transition to right */
|
||||
40% { transform: rotate(-8deg); } /* Smooth transition to left */
|
||||
50% { transform: rotate(8deg); } /* Smooth transition to right */
|
||||
60% { transform: rotate(-5deg); } /* Smooth transition to left */
|
||||
70% { transform: rotate(5deg); } /* Smooth transition to right */
|
||||
80% { transform: rotate(-2deg); } /* Smooth transition to left */
|
||||
90% { transform: rotate(2deg); } /* Smooth transition to right */
|
||||
100% { transform: rotate(0deg); } /* Return to center */
|
||||
}
|
||||
</style>
|
||||
|
||||
<body class="bg-gray-900 text-gray-200">
|
||||
<div class="flex flex-col min-h-screen" x-data="networkClusters()" x-init="init()">
|
||||
{{template "views/partials/navbar_explorer" .}}
|
||||
|
||||
<header class="text-center py-12">
|
||||
<h1 class="text-5xl font-bold text-gray-100">
|
||||
<i class="fa-solid fa-circle-nodes mr-2"></i> Network Clusters Explorer
|
||||
|
||||
</h1>
|
||||
<p class="mt-4 text-lg">
|
||||
View the clusters and workers available in each network.
|
||||
<a href="https://localai.io/features/distribute/" target="_blank">
|
||||
<i class="fas fa-circle-info pr-2"></i>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</header>
|
||||
<div class="animation-container">
|
||||
<canvas id="networkCanvas"></canvas>
|
||||
<div class="text-overlay">
|
||||
<header class="text-center py-12">
|
||||
<h1 class="text-5xl font-bold text-gray-100">
|
||||
<i class="fa-solid fa-circle-nodes mr-2"></i> Network Clusters Explorer
|
||||
|
||||
</h1>
|
||||
<p class="mt-4 text-lg">
|
||||
View the clusters and workers available in each network.
|
||||
<a href="https://localai.io/features/distribute/" target="_blank">
|
||||
<i class="fas fa-circle-info pr-2"></i>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 flex-grow">
|
||||
<!-- Warning Box -->
|
||||
|
|
@ -395,6 +370,7 @@
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/static/p2panimation.js"></script>
|
||||
|
||||
{{template "views/partials/footer" .}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,23 @@
|
|||
{{template "views/partials/navbar" .}}
|
||||
<div class="container mx-auto px-4 flex-grow">
|
||||
<div class="workers mt-12 text-center">
|
||||
|
||||
<h2 class="text-3xl font-semibold text-gray-100 mb-8">
|
||||
<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>
|
||||
<div class="animation-container">
|
||||
<canvas id="networkCanvas"></canvas>
|
||||
<div class="text-overlay">
|
||||
<header class="text-center py-12">
|
||||
<h1 class="text-5xl font-bold text-gray-100">
|
||||
<i class="fa-solid fa-circle-nodes mr-2"></i> Distributed inference with P2P
|
||||
</h1>
|
||||
<p class="mt-4 text-lg">
|
||||
Distribute computation by sharing and loadbalancing instances or sharding model weights.
|
||||
<a href="https://localai.io/features/distribute/" target="_blank">
|
||||
<i class="fas fa-circle-info pr-2"></i>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
</header>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<!-- Warning box if p2p token is empty and p2p is enabled -->
|
||||
{{ if and .IsP2PEnabled (eq .P2PToken "") }}
|
||||
|
|
@ -144,7 +154,7 @@
|
|||
|
||||
{{template "views/partials/footer" .}}
|
||||
</div>
|
||||
|
||||
<script src="/static/p2panimation.js"></script>
|
||||
<style>
|
||||
.token {
|
||||
word-break: break-all;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
rel="stylesheet"
|
||||
href="/static/assets/highlightjs.css"
|
||||
/>
|
||||
<script defer src="/static/assets/anime.min.js"></script>
|
||||
<script
|
||||
defer
|
||||
src="/static/assets/highlightjs.js"
|
||||
|
|
@ -47,8 +48,68 @@
|
|||
},
|
||||
};
|
||||
</script>
|
||||
<link href="/static/assets/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/static/assets/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/static/assets/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
<script src="/static/assets/htmx.js" crossorigin="anonymous"></script>
|
||||
<link href="/static/assets/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/static/assets/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/static/assets/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
<script src="/static/assets/htmx.js" crossorigin="anonymous"></script>
|
||||
<!-- P2P Animation START -->
|
||||
<style>
|
||||
.animation-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.text-overlay {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
<!-- P2P Animation END -->
|
||||
<!-- Flask and node animation -->
|
||||
<style>
|
||||
.fa-circle-nodes {
|
||||
/* font-size: 100px; /* Adjust the size as needed */
|
||||
animation: rotateCircleNodes 8s linear infinite; /* Slow and fluid rotation */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@keyframes rotateCircleNodes {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
/* Animation for the warning box */
|
||||
.fa-flask {
|
||||
/* font-size: 100px; /* Adjust the size as needed */
|
||||
animation: shakeFlask 3s ease-in-out infinite; /* Smooth easing and longer duration for fluidity */
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
@keyframes shakeFlask {
|
||||
0%, 10% { transform: rotate(0deg); } /* Start and end still */
|
||||
20% { transform: rotate(-10deg); } /* Smooth transition to left */
|
||||
30% { transform: rotate(10deg); } /* Smooth transition to right */
|
||||
40% { transform: rotate(-8deg); } /* Smooth transition to left */
|
||||
50% { transform: rotate(8deg); } /* Smooth transition to right */
|
||||
60% { transform: rotate(-5deg); } /* Smooth transition to left */
|
||||
70% { transform: rotate(5deg); } /* Smooth transition to right */
|
||||
80% { transform: rotate(-2deg); } /* Smooth transition to left */
|
||||
90% { transform: rotate(2deg); } /* Smooth transition to right */
|
||||
100% { transform: rotate(0deg); } /* Return to center */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
Loading…
Add table
Add a link
Reference in a new issue