Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates to KitOps homepage #547

Merged
merged 3 commits into from
Oct 22, 2024
Merged

Updates to KitOps homepage #547

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8cfd8ef
Updates to KitOps homepage
javisperez Oct 22, 2024
e6031b3
Update Home.vue
javisperez Oct 22, 2024
afc79f2
Update Home.vue
javisperez Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 77 additions & 69 deletions docs/.vitepress/theme/components/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,15 @@ const quotes = [
authorCompany: 'Zwift',
},
{
text: `Currently we have a system that resembles half-MLOps but lacks data versioning tied to model versioning and configurations, and makes it difficult to deploy and keep track [of AI projects]`,
text: `Currently we have a system that resembles half-MLOps but lacks data versioning tied to model versioning and
configurations, and makes it difficult to deploy and keep track [of AI projects]`,
authorName: 'Majid',
authorTitle: 'Data Scientist',
authorCompany: 'Siemens',
},
{
text: `As we have an open source first policy we are forced to go with tools like MLflow.
But I really don’t like their 'opinionated' approach how practitioners should log artifacts.
But I really don’t like their 'opinionated' approach to how practitioners should log artifacts.
I like the idea of using existing best practices in the MLOps space.`,
authorName: 'Niklas',
authorTitle: 'MLOps Engineer',
Expand Down Expand Up @@ -108,8 +109,8 @@ const subscribeToNewsletter = async () => {

<template>
<div class="mt-32 md:mt-40 px-6 md:px-12 text-center content-container">
<p class="h4 !font-normal !text-off-white">Share and run your AI projects anywhere</p>
<h1 class="mt-4">Ease handoffs between AI/ML and Application teams</h1>
<p class="h4 !font-normal !text-off-white">Simple, secure, and reproducible packaging for AI/ML projects</p>
<h1 class="mt-4">The missing link in your AI pipeline</h1>

<div class="flex flex-col lg:flex-row justify-center items-center gap-10 lg:gap-4 mt-10 md:mt-14 xl:mt-22">
<a href="/docs/cli/installation" v-ga-track="{ category: 'button', label: 'install', location: 'hero' }" class="kit-button">Install</a>
Expand Down Expand Up @@ -154,9 +155,9 @@ const subscribeToNewsletter = async () => {
</div>

<div id="howdoesitwork" class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 text-center max-w-[1152px] content-container">
<h2>HoW does it WoRK<span class="font-heading font-extralight">?</span></h2>
<h2>What is Kitops<span class="font-heading font-extralight">?</span></h2>
<div class="p1 mt-8 mx-8">
KitOps is a free open source MLOps tool that packages and versions your AI model, datasets, code, and configuration into a ModelKit that data scientists and developers can use with their preferred tools.
KitOps is an open source DevOps tool that packages and versions your AI/ML model, datasets, code, and configuration into a reproducible artifact called a ModelKit. ModelKits are built on existing standards, ensuring compatibility with the tools your data scientists and developers already use.
</div>

<video width="1050" autoplay controls muted loop class="max-w-full mt-22 mx-auto rounded-lg">
Expand All @@ -165,14 +166,70 @@ const subscribeToNewsletter = async () => {
</video>
</div>

<div id="whykitops" class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<h2 class="text-center">Why Kit<span class="font-heading font-extralight">?</span></h2>

<div class="mt-10 md:mt-14 xl:mt-22 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-x-4 md:gap-y-[4.5rem] xl:gap-22 max-w-[47.5rem] mx-auto">
<div class="h4 !text-gold">Model handoffs are hard.</div>
<div class="p2 space-y-4">
<p>Moving a model from a Jupyter notebook to an ML tool or development server, then to a production server like Kubernetes is difficult because each tool uses its own packaging mechanism, and requires engineers to repackage the model multiple times. This slows down development and introduces risk.</p>
Jwilliamsr marked this conversation as resolved.
Show resolved Hide resolved
<p>KitOps is an open source DevOps project built to standardize packaging, reproduction, deployment, and tracking of AI / ML models, so it can be run anywhere, just like application code</p>
<p>KitOps solves multiple problems:</p>
</div>

<div class="h4 !text-gold xs:mt-12">Model traceability and reproducibility–</div>
<div class="p2 space-y-4">
<p>Unlike Dockerfiles, Kitfiles are a modular package - pull just a part of the ModelKit, like the model or dataset, or pull the whole package with one simple command.</p>
<p>Storing ModelKits in your organization’s container registry provides a history of meaningful state changes for auditing. ModelKits are immutable so are perfect for a secure bill-of-materials (SBOM) initiative.</p>
</div>

<div class="h4 !text-gold xs:mt-12">Collaboration–</div>
<div class="p2 space-y-4">
<p>By building ModelKits on industry standards, anyone (not just data scientists) can participate in the model development lifecycle whether they’re integrating models with their application, experimenting with them locally, or deploying them to production.</p>
<p>ModelKits can be stored in your existing container registry and work with the tools your team is already using, so you can use the same deployment pipelines and endpoints you’ve hardened with your application development process.</p>
</div>

</div>
</div>

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<h2 class="text-center">Get stArted</h2>

<div class="kit-cards mt-22 min-h-[32.5rem]">
<div class="kit-card flex flex-col">
<div class="h4 font-bold !text-salmon">1</div>
<div class="mt-8 flex flex-col flex-1 justify-between">
<p class="p2">Download and install Kit CLI.</p>
<a href="/docs/cli/installation" v-ga-track="{ category: 'button', label: 'install', location: 'get started' }" class="kit-button kit-button-salmon md:w-fit mt-6">Install the CLI</a>
</div>
</div>

<div class="kit-card flex flex-col">
<div class="h4 font-bold !text-cornflower">2</div>
<div class="mt-8 flex flex-col flex-1 justify-between">
<p class="p2">Create a simple manifest file called a Kitfile with your model, dataset and code. Then build and push the ModelKit to a registry for sharing.</p>
<a href="/docs/kitfile/kf-overview.html" class="kit-button kit-button-cornflower md:w-fit mt-6">LEARN MORE</a>
</div>
</div>

<div class="kit-card flex flex-col">
<div class="h4 font-bold !text-gold">3</div>
<div class="mt-8 flex flex-col flex-1 justify-between">
<p class="p2">Pull the ModelKit into your pipeline, or use <span class="text-gold">kit dev</span> to start working with the model locally.</p>
<a href="/docs/use-cases.html" class="kit-button md:w-fit mt-6">USE CASES</a>
</div>
</div>
</div>
</div>

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<h2 class="text-center">Key feAtuRes</h2>
<p class="p2 text-center mt-16">Visit our <a href="https://github.com/jozu-ai/kitops" target="_blank" class="underline">GitHub repo</a> for a list of all features and our roadmap.</p>

<ol class="grid grid-cols-1 md:grid-cols-2 gap-x-22 gap-y-16 mt-16 max-w-[960px] mx-auto p1">
<li>
<div class="text-off-white">🎁 Standards-based package</div>
<p class="p2 mb-4 text-gray-06">A ModelKit package includes models, datasets, configurations, and code. Add as much or as little as your project needs.</p>
<p class="p2 mb-4 text-gray-06">A ModelKit package includes models, datasets, configurations, and code in an OCI artifact. Add as much or as little as your project needs.</p>
<a class="text-off-white font-bold flex items-center gap-2 text-base" href="/docs/modelkit/compatibility.html">
LEARN MORE
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
Expand All @@ -182,7 +239,7 @@ const subscribeToNewsletter = async () => {
</li>
<li>
<div class="text-off-white">🔒 Tamper-proof</div>
<p class="p2 mb-4 text-gray-06">Each ModelKit package includes a SHA digest for itself, and every artifact it holds.</p>
<p class="p2 mb-4 text-gray-06">Each ModelKit package is immutable and includes a SHA digest for itself, and every artifact it holds.</p>
<a class="text-off-white font-bold flex items-center gap-2 text-base" href="/docs/modelkit/spec.html">
LEARN MORE
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
Expand All @@ -192,7 +249,7 @@ const subscribeToNewsletter = async () => {
</li>
<li>
<div class="text-off-white">🏭 Tags and versions</div>
<p class="p2 mb-4 text-gray-06">Each ModelKit is tagged so everyone knows which dataset and model work together.</p>
<p class="p2 mb-4 text-gray-06">Each ModelKit is tagged and versioned so everyone knows which dataset and model work together.</p>
<a class="text-off-white font-bold flex items-center gap-2 text-base" href="/docs/cli/cli-reference.html#kit-tag">
LEARN MORE
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
Expand All @@ -203,6 +260,12 @@ const subscribeToNewsletter = async () => {
<li>
<div class="text-off-white">🤗 Use with LLM, ML, or AI projects</div>
<p class="p2 mb-4 text-gray-06">ModelKits can be used with any AI, ML, or LLM project - even multi-modal models.</p>
<a class="text-off-white font-bold flex items-center gap-2 text-base" href="/docs/cli/cli-reference.html#kit-tag">
LEARN MORE
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" fill="#ECECEC"/>
</svg>
</a>
</li>
<li>
<div class="text-off-white">🤖 Automation for CI/CD</div>
Expand All @@ -217,7 +280,7 @@ const subscribeToNewsletter = async () => {
<li>
<div class="text-off-white">🏃‍♂️‍ Local dev mode</div>
<p class="p2 mb-4 text-gray-06">Kit's Dev Mode lets your run an LLM locally, configure it, and prompt/chat with it instantly</p>
<a class="text-off-white font-bold flex items-center gap-2 text-base" href="/docs/dev-mode.html">
<a class="text-off-white font-bold flex items-center gap-2 text-base" href="/docs/why-kitops.html">
LEARN MORE
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.1716 10.9999L10.8076 5.63589L12.2218 4.22168L20 11.9999L12.2218 19.778L10.8076 18.3638L16.1716 12.9999H4V10.9999H16.1716Z" fill="#ECECEC"/>
Expand All @@ -232,8 +295,8 @@ const subscribeToNewsletter = async () => {
</div>

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-10 lg:px-0 w-full max-w-[960px] mx-auto">
<h2 class="text-center">eVeRythinG you need to Run <br class="xs:hidden">youR fiRst Model</h2>
<p class="p1 text-center mt-16">AI projects are more than just a model, you need a codebase, dataset, documentation, and of course the model.</p>
<h2 class="text-center">tRy running youR fiRst Model with Kitops</h2>
<p class="p1 text-center mt-16">AI projects are more than just a model, you need a codebase, dataset, documentation too.</p>
<p class="p1 text-center mt-4">Our quickstart ModelKits have everything you need in one easy to find place.</p>

<ul class="grid grid-cols-1 md:grid-cols-2 gap-6 my-22">
Expand Down Expand Up @@ -288,38 +351,13 @@ const subscribeToNewsletter = async () => {
</ul>
</div>

<div id="whykitops" class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<h2 class="text-center">Why Kit<span class="font-heading font-extralight">?</span></h2>

<div class="mt-10 md:mt-14 xl:mt-22 grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-x-4 md:gap-y-[4.5rem] xl:gap-22 max-w-[47.5rem] mx-auto">
<div class="h4 !text-gold">Model handoffs are hard.</div>
<div class="p2 space-y-4">
<p>Moving a model from a Jupyter notebook to an ML tool or development server, then to a production server like Kubernetes is difficult because each tool uses its own packaging mechanism, and requires engineers to repackage the model multiple times. This slows down development and introduces risk.</p>
<p>KitOps is an open source MLOps project built to standardize packaging, reproduction, deployment, and tracking of AI / ML models, so it can be run anywhere, just like application code.</p>
<p>KitOps solves two big problems:</p>
</div>

<div class="h4 !text-gold xs:mt-12">Collaboration–</div>
<div class="p2 space-y-4">
<p>By building ModelKits on industry standards, anyone (not just data scientists) can participate in the model development lifecycle whether they’re integrating models with their application, experimenting with them locally, or deploying them to production.</p>
<p>ModelKits and Kitfiles work with the tools your team is already using, so you can use the same deployment pipelines and endpoints you’ve hardened with your application development process.</p>
</div>

<div class="h4 !text-gold xs:mt-12">Model traceability and reproducibility–</div>
<div class="p2 space-y-4">
<p>Unlike Dockerfiles, Kitfiles are a modular package - pull just a part of the ModelKit, like the model or dataset, or pull the whole package with one simple command.</p>
<p>Storing ModelKits in your organization’s registry provides a history of meaningful state changes for auditing. ModelKits are immutable so are perfect for a secure bill-of-materials (SBOM) initiative.</p>
</div>
</div>
</div>

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<div class="kit-cards md:!grid-cols-2 w-fit mx-auto">
<div class="kit-card max-w-[370px] flex flex-col">
<h3 class="!text-cornflower">ModelKit</h3>

<div class="flex-1 mt-8 space-y-4">
<p class="p2">The ModelKit is an OCI compliant package that contains everything needed to integrate with a model, or deploy it to production. </p>
<p class="p2">The ModelKit is an OCI compliant package (like a container, but more fully featured) that contains everything needed to integrate with a model, or deploy it to production.</p>
<p class="p2">The ModelKit holds the serialized model, dataset, hyperparameters, input / output structure, and validation criteria. Kitfiles define a ModelKit in a modular and easy-to-understand way.</p>
</div>

Expand Down Expand Up @@ -353,7 +391,7 @@ const subscribeToNewsletter = async () => {

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 text-center content-container">
<h2>WhAt’s suppoRted<span class="font-heading font-extralight">?</span></h2>
<p class="p1 mt-8 mb-22">KitOps was designed to work with the tools your team already uses.</p>
<p class="p1 mt-8 mb-22">Kit was designed to work with the tools your team already uses.</p>

<div class="space-y-12 relative marquee-gradients">

Expand Down Expand Up @@ -550,36 +588,6 @@ const subscribeToNewsletter = async () => {
</Accordion>
</div>

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<h2 class="text-center">Get stArted</h2>

<div class="kit-cards mt-22 min-h-[32.5rem]">
<div class="kit-card flex flex-col">
<div class="h4 font-bold !text-salmon">1</div>
<div class="mt-8 flex flex-col flex-1 justify-between">
<p class="p2">Download and install Kit CLI.</p>
<a href="/docs/cli/installation" v-ga-track="{ category: 'button', label: 'install', location: 'get started' }" class="kit-button kit-button-salmon md:w-fit mt-6">Install the CLI</a>
</div>
</div>

<div class="kit-card flex flex-col">
<div class="h4 font-bold !text-cornflower">2</div>
<div class="mt-8 flex flex-col flex-1 justify-between">
<p class="p2">Create a simple manifest file called a Kitfile with your model, dataset and code. Then build and push the ModelKit to a registry for sharing.</p>
<a href="/docs/kitfile/kf-overview.html" class="kit-button kit-button-cornflower md:w-fit mt-6">LEARN MORE</a>
</div>
</div>

<div class="kit-card flex flex-col">
<div class="h4 font-bold !text-gold">3</div>
<div class="mt-8 flex flex-col flex-1 justify-between">
<p class="p2">Pull the ModelKit into your pipeline, or use <span class="text-gold">kit dev</span> to start working with the model.</p>
<a href="/docs/use-cases.html" class="kit-button md:w-fit mt-6">USE CASES</a>
</div>
</div>
</div>
</div>

<div class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 content-container">
<h2 class="text-center">How to Get inVolVeD<span class="font-heading font-extralight">?</span></h2>

Expand Down