tileline at home
This commit is contained in:
parent
f91db3b865
commit
db7c7f0bf7
@ -70,23 +70,107 @@ extra:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!----------------------------------------------------------------------------------------->
|
||||
|
||||
<!-- Section 3 (timeline) -->
|
||||
|
||||
<!-- Section 3 -->
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
|
||||
|
||||
## What Can You Do<br> with an **AIBox**
|
||||
|
||||
</div>
|
||||
|
||||
{{ timeline(
|
||||
subtitle_1="",
|
||||
title_1="Run AI Models with Full Control",
|
||||
point_1_1="Execute AI models directly on your dedicated GPU.",
|
||||
point_1_2="Decide which models are allowed to run on your AI BOX.",
|
||||
point_1_3="Reserve 100% of your GPU resources anytime for your own experimentation",
|
||||
|
||||
subtitle_2="",
|
||||
title_2="Rent Out Virtual Machines (CloudSlices)",
|
||||
point_2_1="Slice your hardware into a maximum of 8 Virtual Machines.",
|
||||
point_2_2="Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription).",
|
||||
point_2_3="Users can connect or disconnect GPUs as needed, with owner permissions.",
|
||||
point_2_4="Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication.",
|
||||
point_2_5="Pre-built container images available for quick setup and deployment.",
|
||||
point_2_6="Web gateways allow external connections to VM containers.",
|
||||
paragraph_2_1="Planned end of summer 2025.",
|
||||
|
||||
subtitle_3="",
|
||||
title_3="Mycelium Actors",
|
||||
point_3_1="Become a host for Mycelium Actors and contribute to the Mycelium network.",
|
||||
point_3_2="Mycelium Actors process jobs and generate rewards for their hosts.",
|
||||
point_3_3="These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...",
|
||||
paragraph_3_1="By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.",
|
||||
paragraph_3_2="Upcoming feature, stay tuned."
|
||||
|
||||
) }}
|
||||
|
||||
</div>
|
||||
|
||||
{{ timeline() }}
|
||||
|
||||
|
||||
<!----------------------------------------------------------------------------------------->
|
||||
|
||||
<!-- Section 34 (Push the Limits) -->
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 lg:px-8 lg:py-24 py-12">
|
||||
<div class="mx-auto mb-8 " style="width:60%">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
|
||||
## Push the Limits of <br>AI—Your Way.
|
||||
|
||||
<br>
|
||||
|
||||
### **AIBox** is built for those who think beyond limits. Whether you're a hacker, AI researcher, or tech enthusiast, AIBox is your playground.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 sm:gap-y-16 lg:max-w-none lg:grid-cols-3 lg:gap-x-8">
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
|
||||
#### For Developers & Hackers
|
||||
|
||||
- Direct GPU programming with ROCm
|
||||
- Custom containerization support
|
||||
- Full Linux kernel access
|
||||
- Next-gen P2P networking
|
||||
|
||||
</div>
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
|
||||
#### For AI Researchers
|
||||
|
||||
- Support for popular ML frameworks (PyTorch, TensorFlow)
|
||||
- Large model training capability (up to 48GB VRAM)
|
||||
- Distributed training support
|
||||
- Dataset management tools
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 pt-4">
|
||||
|
||||
#### For Tech Enthusiasts
|
||||
|
||||
- Water cooling management interface
|
||||
- Power consumption monitoring
|
||||
- Performance benchmarking tools
|
||||
- Resource allocation controls
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!----------------------------------------------------------------------------------------->
|
||||
|
||||
<!-- Section 7 -->
|
||||
|
||||
@ -270,7 +270,7 @@ background-color:#5596f5 !important;
|
||||
@apply font-normal;
|
||||
}
|
||||
h4 {
|
||||
@apply text-xl lg:text-2xl font-normal tracking-wider;
|
||||
@apply text-xl font-semibold my-4 tracking-wider;
|
||||
font-family: "Inter", sans-serif !important;
|
||||
|
||||
}
|
||||
|
||||
@ -1,71 +1,110 @@
|
||||
<div class="space-y-8 lg:py-12 py-6 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
{% set title_1 = title_1 | default(value="") %}
|
||||
{% set subtitle_1 = subtitle_1 | default(value="") %}
|
||||
{% set point_1_1 = point_1_1 | default(value="") %}
|
||||
{% set point_1_2 = point_1_2 | default(value="") %}
|
||||
{% set point_1_3 = point_1_3 | default(value="") %}
|
||||
{% set title_2 = title_2 | default(value="") %}
|
||||
{% set subtitle_2 = subtitle_2 | default(value="") %}
|
||||
{% set point_2_1 = point_2_1 | default(value="") %}
|
||||
{% set point_2_2 = point_2_2 | default(value="") %}
|
||||
{% set point_2_3 = point_2_3 | default(value="") %}
|
||||
{% set point_2_4 = point_2_4 | default(value="") %}
|
||||
{% set point_2_5 = point_2_5 | default(value="") %}
|
||||
{% set point_2_6 = point_2_6 | default(value="") %}
|
||||
{% set paragraph_2_1 = paragraph_2_1 | default(value="") %}
|
||||
{% set title_3 = title_3 | default(value="") %}
|
||||
{% set subtitle_3 = subtitle_3 | default(value="") %}
|
||||
{% set point_3_1 = point_3_1 | default(value="") %}
|
||||
{% set point_3_2 = point_3_2 | default(value="") %}
|
||||
{% set point_3_3 = point_3_3 | default(value="") %}
|
||||
{% set paragraph_3_1 = paragraph_3_1 | default(value="") %}
|
||||
{% set paragraph_3_2 = paragraph_3_2 | default(value="") %}
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="space-y-8 pt-12 mx-auto max-w-7xl relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent">
|
||||
|
||||
<!-- Item #1 -->
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 text-white group-[.is-active]:bg-emerald-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
||||
<div class="font-semibold text-lg text-black mb-2">Run AI Models with Full Control </div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium">{{ subtitle_1 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg mb-2">{{ title_1 }}</div>
|
||||
<div class="text-gray-900 font-light">
|
||||
|
||||
<br>Execute AI models directly on your dedicated GPU
|
||||
|
||||
<br>Decide which models are allowed to run on your AI BOX
|
||||
|
||||
<br>Reserve 100% of your GPU resources anytime for your own experimentation
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_1_1 }}</li>
|
||||
<li>{{ point_1_2 }}</li>
|
||||
<li>{{ point_1_3 }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item #2 -->
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
||||
<div class="font-semibold text-lg text-black mb-2">Rent Out Virtual Machines (CloudSlices)
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium">{{ subtitle_2 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg mb-2">{{ title_2 }}</div>
|
||||
<div class="text-gray-900 font-light">
|
||||
Slice your hardware into a maximum of 8 Virtual Machines
|
||||
<br>Control GPU allocation: 0, 1, or 2 GPUs per VM (no oversubscription)
|
||||
<br>Users can connect or disconnect GPUs as needed, with owner permissions
|
||||
<br>Each VM is securely connected to Mycelium (P2P overlay network), ensuring efficient communication
|
||||
<br>Pre-built container images available for quick setup and deployment
|
||||
<br>Web gateways allow external connections to VM containers
|
||||
<br>
|
||||
<br>Planned Q2 2025.
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_2_1 }}</li>
|
||||
<li>{{ point_2_2 }}</li>
|
||||
<li>{{ point_2_3 }}</li>
|
||||
<li>{{ point_2_4 }}</li>
|
||||
<li>{{ point_2_5 }}</li>
|
||||
<li>{{ point_2_6 }}</li>
|
||||
</ul>
|
||||
<p class="text-base font-semibold mt-4">{{ paragraph_2_1 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Item #3 -->
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active py-4">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-gray-600 group-[.is-active]:bg-emerald-500 text-white group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<div class="fade-in relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active">
|
||||
<div class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2">
|
||||
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
|
||||
<path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
|
||||
<div class="font-semibold text-lg text-black mb-2">Mycelium Actors</div>
|
||||
<div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow visible">
|
||||
<div class="flex items-center justify-between space-x-2 mb-1">
|
||||
<div class="font-medium">{{ subtitle_3 }}</div>
|
||||
</div>
|
||||
<div class="font-semibold text-lg mb-2">{{ title_3 }}</div>
|
||||
<div class="text-gray-900 font-light">
|
||||
Become a host for Mycelium Actors and contribute to the Mycelium network.
|
||||
<br>Mycelium Actors process jobs and generate rewards for their hosts.
|
||||
<br>These jobs can range from AI requests (such as LLM processing) to higher-level functions like text-to-speech, website building, transcribing youtube video's, training a large language model, communicate ...
|
||||
<br>
|
||||
<br>By leveraging Mycelium Actors, we pave the way for Augmented Collective Intelligence.
|
||||
<br>
|
||||
<br>Planned for Q2 2025.
|
||||
|
||||
<ul style="list-style: disc;">
|
||||
<li>{{ point_3_1 }}</li>
|
||||
<li>{{ point_3_2 }}</li>
|
||||
<li>{{ point_3_3 }}</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-base mt-8">
|
||||
<p class="text-base">{{ paragraph_3_1 }}</p>
|
||||
<p class="text-base font-semibold mt-4">{{ paragraph_3_2 }}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
/* Initial state: elements are invisible */
|
||||
.fade-in {
|
||||
@ -83,11 +122,6 @@
|
||||
<script>
|
||||
// Get all the elements that need to be faded in
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const h2 = document.getElementById("blinking");
|
||||
|
||||
setInterval(() => {
|
||||
h2.style.opacity = (h2.style.opacity == "1") ? "0.5" : "1";
|
||||
}, 1500); // Blinks every 2 seconds
|
||||
// Target all elements with the 'fade-in' class
|
||||
const fadeInElements = document.querySelectorAll('.fade-in');
|
||||
|
||||
@ -107,6 +141,5 @@
|
||||
observer.observe(element);
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user