Add more integration icons to the website (#134)

Signed-off-by: B-Step62 <[email protected]>
mlflow · Dec 17, 2024 · 4cf31ea · 4cf31ea
1 parent 261fa60
commit 4cf31ea
Show file tree

Hide file tree

Showing 19 changed files with 621 additions and 75 deletions.
diff --git a/website/src/components/ExpandableGrid/index.tsx b/website/src/components/ExpandableGrid/index.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+
+const ExpandableGrid = ({ items, defaultVisibleCount, renderItem }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const visibleItems = isExpanded ? items : items.slice(0, defaultVisibleCount);
+
+  return (
+    <>
+      <div
+        className={`${styles.grid} ${!isExpanded ? styles.fadeOverlay : ""}`}
+      >
+        {visibleItems.map((item, index) => (
+          <div key={index} className={styles.gridItem}>
+            {renderItem(item, index)}
+          </div>
+        ))}
+      </div>
+      {items.length > defaultVisibleCount && (
+        <div className={styles.buttonContainer}>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className={styles.toggleButton}
+          >
+            {isExpanded ? "See Less ∧" : "See All ∨"}
+          </button>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ExpandableGrid;
diff --git a/website/src/components/ExpandableGrid/styles.module.css b/website/src/components/ExpandableGrid/styles.module.css
@@ -0,0 +1,48 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 24px;
+  position: relative;
+}
+
+.grid.fadeOverlay {
+  position: relative;
+}
+
+.grid.fadeOverlay::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 4rem;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #0c1519);
+  pointer-events: none; /* Allow click-through */
+  z-index: 1;
+}
+
+.buttonContainer {
+  margin-top: 3rem;
+  text-align: center;
+}
+
+.toggleButton {
+  padding: 8px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  transition: color 0.3s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.toggleButton:active {
+  transform: scale(0.98);
+}
+
+.toggleButton:hover {
+  color: var(--ifm-color-success);
+}
diff --git a/website/src/components/community-section/MLflowLogoAndCards.tsx b/website/src/components/community-section/MLflowLogoAndCards.tsx
@@ -4,8 +4,7 @@ import "./MLflowLogoAndCards.css";
 import Arrow from "./Arrow";
 import ArrowText from "../ArrowText";
 import styles from "./styles.module.css";
-
-const MOBILE_LAYOUT_BREAKPOINT = 996;
+import { MOBILE_LAYOUT_BREAKPOINT } from "../../constants";
 
 const MLflowLogo = ({ displaySideDots }: { displaySideDots: boolean }) => {
   return (

diff --git a/website/src/constants.ts b/website/src/constants.ts
@@ -0,0 +1 @@
+export const MOBILE_LAYOUT_BREAKPOINT = 996;
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -24,6 +24,8 @@ import Anchor from "../components/Anchor";
 import Flow from "../components/Flow";
 import ConceptCard from "../components/ConceptCard";
 import CenterGrid from "../components/CenterGrid";
+import ExpandableGrid from "../components/ExpandableGrid";
+import { MOBILE_LAYOUT_BREAKPOINT } from "../constants";
 
 const IMAGE =
   // "https://images.unsplash.com/photo-1506624183912-c602f4a21ca7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60";
@@ -521,82 +523,154 @@ export default function Home(): JSX.Element {
               marginBottom: "48px",
             }}
           >
-            MLflow integrates with these tools and platforms
+            MLflow integrates with 25+ tools and platforms
           </h2>
         </div>
 
-        <div
-          style={{
-            display: "grid",
-            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-            gap: "24px",
-          }}
-        >
-          {[
-            {
-              title: "PyTorch",
-              src: "img/pytorch.svg",
-              href: "docs/latest/python_api/mlflow.pytorch.html",
-            },
-            {
-              title: "HuggingFace",
-              src: "img/huggingface.svg",
-              href: "docs/latest/python_api/mlflow.transformers.html",
-            },
-            {
-              title: "OpenAI",
-              src: "img/openai.svg",
-              href: "docs/latest/python_api/openai/index.html",
-            },
-            {
-              title: "LangChain",
-              src: "img/langchain.svg",
-              href: "docs/latest/python_api/mlflow.langchain.html",
-            },
-            {
-              title: "Spark",
-              src: "img/spark.svg",
-              href: "docs/latest/python_api/mlflow.spark.html",
-            },
-            {
-              title: "Keras",
-              src: "img/keras.svg",
-              href: "docs/latest/python_api/mlflow.keras_core.html",
-            },
-            {
-              title: "TensorFlow",
-              src: "img/tensorflow.svg",
-              href: "docs/latest/python_api/mlflow.tensorflow.html",
-            },
-            {
-              title: "Prophet",
-              src: "img/prophet.svg",
-              href: "docs/latest/python_api/mlflow.prophet.html",
-            },
-            {
-              title: "scikit-learn",
-              src: "img/scikit-learn.svg",
-              href: "docs/latest/python_api/mlflow.sklearn.html",
-            },
-            {
-              title: "XGBoost",
-              src: "img/xgboost.svg",
-              href: "docs/latest/python_api/mlflow.xgboost.html",
-            },
-            {
-              title: "LightGBM",
-              src: "img/lightgbm.svg",
-              href: "docs/latest/python_api/mlflow.lightgbm.html",
-            },
-            {
-              title: "CatBoost",
-              src: "img/catboost.svg",
-              href: "docs/latest/python_api/mlflow.catboost.html",
-            },
-          ].map(({ title, src, href }, index) => (
-            <MiniLogoCard title={title} src={src} href={href} key={index} />
-          ))}
-        </div>
+        <BrowserOnly>
+          {() => (
+            <ExpandableGrid
+              items={[
+                {
+                  title: "PyTorch",
+                  src: "img/pytorch.svg",
+                  href: "docs/latest/deep-learning/pytorch/index.html",
+                },
+                {
+                  title: "HuggingFace",
+                  src: "img/huggingface.svg",
+                  href: "docs/latest/llms/transformers/index.html",
+                },
+                {
+                  title: "OpenAI",
+                  src: "img/openai.svg",
+                  href: "docs/latest/llms/openai/index.html",
+                },
+                {
+                  title: "LangChain",
+                  src: "img/langchain.svg",
+                  href: "docs/latest/llms/langchain/index.html",
+                },
+                {
+                  title: "LlamaIndex",
+                  src: "img/llamaindex.svg",
+                  href: "docs/latest/llms/llama-index/index.html",
+                },
+                {
+                  title: "Spark",
+                  src: "img/spark.svg",
+                  href: "docs/latest/python_api/mlflow.spark.html",
+                },
+                {
+                  title: "Keras",
+                  src: "img/keras.svg",
+                  href: "docs/latest/deep-learning/keras/index.html",
+                },
+                {
+                  title: "TensorFlow",
+                  src: "img/tensorflow.svg",
+                  href: "docs/latest/deep-learning/tensorflow/index.html",
+                },
+                {
+                  title: "scikit-learn",
+                  src: "img/scikit-learn.svg",
+                  href: "docs/latest/models.html#scikit-learn-sklearn",
+                },
+                {
+                  title: "XGBoost",
+                  src: "img/xgboost.svg",
+                  href: "docs/latest/models.html#xgboost-xgboost",
+                },
+                {
+                  title: "LightGBM",
+                  src: "img/lightgbm.svg",
+                  href: "docs/latest/models.html#lightgbm-lightgbm",
+                },
+                {
+                  title: "CatBoost",
+                  src: "img/catboost.svg",
+                  href: "docs/latest/models.html#catboost-catboost",
+                },
+                {
+                  title: "Anthropic",
+                  src: "img/anthropic.svg",
+                  href: "docs/latest/llms/tracing/index.html#automatic-tracing",
+                },
+                {
+                  title: "CrewAI",
+                  src: "img/crewai.svg",
+                  href: "docs/latest/llms/tracing/index.html#automatic-tracing",
+                },
+                {
+                  title: "Gemini",
+                  src: "img/google-gemini.svg",
+                  href: "docs/latest/llms/tracing/index.html#automatic-tracing",
+                },
+                {
+                  title: "AutoGen",
+                  src: "img/autogen.jpeg",
+                  href: "docs/latest/llms/tracing/index.html#automatic-tracing",
+                },
+                {
+                  title: "LiteLLM",
+                  src: "img/litellm.png",
+                  href: "docs/latest/llms/tracing/index.html#automatic-tracing",
+                },
+                {
+                  title: "Sentence Transformers",
+                  src: "img/sentence-transformers.svg",
+                  href: "docs/latest/llms/sentence-transformers/index.html",
+                },
+                {
+                  title: "ONNX",
+                  src: "img/onnx.svg",
+                  href: "docs/latest/models.html#onnx-onnx",
+                },
+                {
+                  title: "Spacy",
+                  src: "img/spacy.svg",
+                  href: "docs/latest/models.html#spacy-spacy",
+                },
+                {
+                  title: "FastAI",
+                  src: "img/fastai.png",
+                  href: "docs/latest/models.html#fastai-fastai",
+                },
+                {
+                  title: "StatsModels",
+                  src: "img/statsmodels.svg",
+                  href: "docs/latest/models.html#statsmodels-statsmodels",
+                },
+                {
+                  title: "Prompt flow",
+                  src: "img/promptflow.svg",
+                  href: "docs/latest/models.html#promptflow-promptflow-experimental",
+                },
+                {
+                  title: "JohnSnowLabs",
+                  src: "img/johnsnowlab.svg",
+                  href: "docs/latest/models.html#john-snow-labs-johnsnowlabs-experimental",
+                },
+                {
+                  title: "H2O",
+                  src: "img/h2o.svg",
+                  href: "docs/latest/models.html#h2o-h2o",
+                },
+                {
+                  title: "Prophet",
+                  src: "img/prophet.svg",
+                  href: "docs/latest/python_api/mlflow.prophet.html",
+                },
+              ]}
+              defaultVisibleCount={
+                window.innerWidth > MOBILE_LAYOUT_BREAKPOINT ? 16 : 8
+              }
+              renderItem={({ title, src, href }) => (
+                <MiniLogoCard title={title} src={src} href={href} />
+              )}
+            />
+          )}
+        </BrowserOnly>
 
         <Spacer height={200} />
         <Anchor

diff --git a/website/static/img/anthropic.svg b/website/static/img/anthropic.svg
diff --git a/website/static/img/autogen.jpeg b/website/static/img/autogen.jpeg