| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>The MLOps Engineer's Interactive Architecture Builder</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
| <style> |
| |
| :root { |
| --primary-color: #1E88E5; |
| --primary-dark: #1565C0; |
| --secondary-color: #004d40; |
| --genai-color: #6A1B9A; |
| --background-color: #f4f6f8; |
| --card-bg-color: #ffffff; |
| --text-color: #333; |
| --heading-color: #212121; |
| --subtle-text-color: #555; |
| --border-color: #e0e0e0; |
| --code-bg-color: #282c34; |
| --code-text-color: #abb2bf; |
| --shadow: 0 4px 12px rgba(0,0,0,0.1); |
| --tile-hover-shadow: 0 6px 16px rgba(0,0,0,0.15); |
| } |
| |
| body { |
| font-family: 'Roboto', sans-serif; |
| background-color: var(--background-color); |
| color: var(--text-color); |
| margin: 0; |
| padding: 0; |
| line-height: 1.6; |
| } |
| |
| |
| .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } |
| header { text-align: center; margin-bottom: 2rem; } |
| header h1 { color: var(--heading-color); font-weight: 700; font-size: 2.8rem; margin-bottom: 0.5rem; } |
| header p { font-size: 1.1rem; color: var(--subtle-text-color); max-width: 800px; margin: 0 auto; } |
| |
| .main-section-title { |
| font-size: 2.2rem; color: var(--heading-color); border-bottom: 3px solid var(--primary-color); |
| padding-bottom: 0.75rem; margin-top: 3rem; margin-bottom: 2rem; display: flex; align-items: center; |
| } |
| .main-section-title .material-icons { font-size: 2.8rem; margin-right: 1rem; } |
| |
| |
| #architecture-builder { background-color: var(--card-bg-color); padding: 2rem; border-radius: 8px; box-shadow: var(--shadow); } |
| .arch-type-selector { display: flex; gap: 1rem; margin-bottom: 2rem; border-bottom: 1px solid var(--border-color); padding-bottom: 1.5rem; } |
| .arch-type-chip { padding: 0.8rem 1.5rem; border-radius: 8px; cursor: pointer; font-weight: 500; font-size: 1.1rem; border: 2px solid transparent; transition: all 0.2s ease; } |
| .arch-type-chip.active.classic { background-color: #e3f2fd; border-color: var(--primary-color); color: var(--primary-dark); } |
| .arch-type-chip.active.gen-ai { background-color: #f3e5f5; border-color: var(--genai-color); color: var(--genai-color); } |
| |
| .builder-fields { display: none; } |
| .builder-fields.active { display: block; } |
| |
| .selection-group { margin-bottom: 1.5rem; transition: opacity 0.3s ease; } |
| .selection-group.disabled { opacity: 0.5; pointer-events: none; } |
| .selection-group h4 { margin-top: 0; margin-bottom: 1rem; font-size: 1.2rem; color: var(--secondary-color); } |
| .selection-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; } |
| .chip { |
| padding: 0.6rem 1.2rem; border: 2px solid var(--border-color); border-radius: 20px; |
| cursor: pointer; transition: all 0.2s ease; font-weight: 500; background-color: #f9f9f9; |
| } |
| .chip:not(.disabled):hover { border-color: var(--primary-dark); background-color: #e3f2fd; } |
| .chip.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); } |
| .chip.disabled { opacity: 0.6; cursor: not-allowed; background-color: #f0f0f0; border-color: var(--border-color); color: #999; } |
| |
| #generate-btn { |
| background-color: var(--secondary-color); color: white; border: none; padding: 0.8rem 2rem; font-size: 1.1rem; |
| font-weight: 500; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; |
| display: block; margin-top: 2rem; width: 100%; |
| } |
| #generate-btn:hover { background-color: #00695C; } |
| |
| |
| #architecture-diagram-output { |
| display: none; margin-top: 2rem; background-color: #fdfdfd; border: 1px solid var(--border-color); |
| padding: 2rem; border-radius: 8px; text-align: center; |
| } |
| .diagram-title { font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem; } |
| .diagram-stack { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } |
| .diagram-layer { |
| background-color: var(--card-bg-color); border: 2px solid var(--primary-color); border-radius: 8px; |
| padding: 1.5rem 2.5rem; width: 80%; max-width: 500px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); text-align: center; |
| } |
| .diagram-layer.gen-ai-layer { border-color: var(--genai-color); } |
| .diagram-layer.gen-ai-layer h5 { color: var(--genai-color); } |
| .diagram-layer h5 { margin: 0 0 0.5rem 0; color: var(--primary-dark); font-size: 1.2rem; font-weight: 700; } |
| .diagram-layer p { margin: 0; font-size: 1rem; color: var(--subtle-text-color); } |
| .diagram-arrow { font-family: 'Material Icons'; font-size: 2.5rem; color: var(--primary-color); line-height: 1; } |
| .diagram-arrow.gen-ai-arrow { color: var(--genai-color); } |
| .icon-img-placeholder { |
| height: 32px; |
| max-width: 120px; |
| width: auto; |
| margin-top: 10px; |
| } |
| |
| |
| .tile-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; } |
| .tile { background-color: var(--card-bg-color); border: 2px solid var(--border-color); border-radius: 8px; padding: 1.5rem; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; } |
| .tile:hover { transform: translateY(-5px); box-shadow: var(--tile-hover-shadow); border-color: var(--primary-color); } |
| .tile.active { border-color: var(--primary-color); box-shadow: var(--tile-hover-shadow); background-color: #f0f7ff; } |
| .tile-icon-img { |
| height: 48px; |
| width: auto; |
| max-width: 100%; |
| margin-bottom: 1rem; |
| } |
| .tile h4 { margin: 0; font-size: 1.2rem; color: var(--heading-color); } |
| .content-panel { display: none; background-color: var(--card-bg-color); border-radius: 8px; box-shadow: var(--shadow); padding: 2.5rem; margin-top: 1rem; } |
| .content-panel.active { display: block; } |
| .stack-layer { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); } |
| .stack-layer:last-child { border-bottom: none; margin-bottom: 0; } |
| .stack-layer h3 { font-size: 1.6rem; color: var(--secondary-color); margin-top: 0; display: flex; align-items: center; } |
| .stack-layer h3 .material-icons { margin-right: 12px; font-size: 2rem; } |
| details { border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 1rem; background-color: #f9fafb; } |
| summary { cursor: pointer; padding: 1rem; font-weight: 500; font-size: 1.1rem; list-style: none; display: flex; align-items: center; justify-content: space-between; } |
| pre { background-color: var(--code-bg-color); color: var(--code-text-color); padding: 1.5rem 1rem 1rem 1rem; border-radius: 6px; overflow-x: auto; font-size: 0.9em; position: relative; } |
| code { font-family: 'Courier New', Courier, monospace; } |
| .copy-btn { position: absolute; top: 10px; right: 10px; background-color: #4a505c; color: #fff; border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; opacity: 0.7; } |
| pre:hover .copy-btn { opacity: 1; } |
| .copy-btn.copied { background-color: var(--primary-dark); } |
| .code-block-header { font-weight: bold; color: var(--subtle-text-color); margin-bottom: -0.5rem; margin-top: 1rem; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="container"> |
| <header> |
| <h1>MLOps Architecture Builder & Cheatsheet</h1> |
| <p>Design your custom model serving stack using the builder below, or explore detailed deployment guides for common frameworks.</p> |
| </header> |
|
|
| <main> |
| |
| <h2 class="main-section-title"><i class="material-icons">architecture</i>My Architecture</h2> |
| <div id="architecture-builder"> |
| <div class="arch-type-selector"> |
| <div class="arch-type-chip active classic" data-type="classic">Classic ML</div> |
| <div class="arch-type-chip gen-ai" data-type="gen-ai">Generative AI</div> |
| </div> |
|
|
| |
| <div id="classic-builder-fields" class="builder-fields active"> |
| <div class="selection-group" data-group="framework"> |
| <h4>1. ML Framework</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="scikit-learn">Scikit-learn</div> |
| <div class="chip" data-id="xgboost">XGBoost</div> |
| <div class="chip" data-id="pytorch">PyTorch</div> |
| <div class="chip" data-id="tensorflow">TensorFlow</div> |
| <div class="chip" data-id="jax">JAX</div> |
| <div class="chip" data-id="keras">Keras</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="serving"> |
| <h4>2. Serving Container</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="kserve">Kubeflow KServe</div> |
| <div class="chip" data-id="ray-serve">Ray Serve</div> |
| <div class="chip" data-id="torchserve">TorchServe</div> |
| <div class="chip" data-id="tf-serving">TF Serving</div> |
| <div class="chip" data-id="triton">NVIDIA Triton</div> |
| <div class="chip" data-id="custom">Custom Container (FastAPI)</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="orchestration"> |
| <h4>3. Orchestration / Platform</h4> |
| <div class="selection-chips"> |
| <div class="chip active" data-id="kubernetes">Kubernetes</div> |
| <div class="chip" data-id="vertex-ai">Managed: Vertex AI</div> |
| <div class="chip" data-id="sagemaker">Managed: SageMaker</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="hardware"> |
| <h4>4. Hardware</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="vm">VMs (CPU)</div> |
| <div class="chip" data-id="gpu">GPU</div> |
| <div class="chip" data-id="tpu">TPU</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="genai-builder-fields" class="builder-fields"> |
| <div class="selection-group" data-group="model-type"> |
| <h4>0. Model Type</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="llm">LLM</div> |
| <div class="chip" data-id="vlm">Multimodal LLM (VLM)</div> |
| <div class="chip" data-id="diffusion">Diffusion</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="framework"> |
| <h4>1. ML Framework</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="pytorch">PyTorch</div> |
| <div class="chip" data-id="tensorflow">TensorFlow</div> |
| <div class="chip" data-id="jax">JAX</div> |
| <div class="chip" data-id="keras">Keras</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="serving"> |
| <h4>2. Serving Container</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="vllm">vLLM</div> |
| <div class="chip" data-id="sglang">SGLang</div> |
| <div class="chip" data-id="triton-trt-llm">NVIDIA Triton (TensorRT-LLM)</div> |
| <div class="chip" data-id="custom">Custom Container (Diffusers, etc.)</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="orchestration"> |
| <h4>3. Orchestration / Platform</h4> |
| <div class="selection-chips"> |
| <div class="chip active" data-id="k8s-ray-kf">Kubernetes (KubeRay/Kubeflow)</div> |
| <div class="chip" data-id="vertex-ai">Managed: Vertex AI</div> |
| <div class="chip" data-id="sagemaker">Managed: SageMaker</div> |
| </div> |
| </div> |
| <div class="selection-group" data-group="hardware"> |
| <h4>4. Hardware</h4> |
| <div class="selection-chips"> |
| <div class="chip" data-id="gpu">GPU</div> |
| <div class="chip" data-id="tpu">TPU</div> |
| </div> |
| </div> |
| </div> |
| |
| <button id="generate-btn">Generate Architecture Diagram</button> |
| </div> |
| |
| <div id="architecture-diagram-output"></div> |
|
|
| <h2 class="main-section-title"><i class="material-icons">menu_book</i>Reference Guides</h2> |
| |
| <h3 class="main-section-title" style="font-size: 1.8rem; border-color: var(--primary-color);"><i class="material-icons" style="color: var(--primary-color);">model_training</i>Classic ML</h3> |
| <div class="tile-container"> |
| <div class="tile" data-target="classic-pytorch"><img src="pytorch.png" class="tile-icon-img" alt="PyTorch Icon"><h4>PyTorch</h4></div> |
| <div class="tile" data-target="classic-tensorflow"><img src="tensorflow.png" class="tile-icon-img" alt="TensorFlow Icon"><h4>TensorFlow</h4></div> |
| <div class="tile" data-target="classic-sklearn"><img src="scikit-learn.png" class="tile-icon-img" alt="Scikit-learn Icon"><h4>Scikit-learn</h4></div> |
| <div class="tile" data-target="classic-xgboost"><img src="xgboost.png" class="tile-icon-img" alt="XGBoost Icon"><h4>XGBoost</h4></div> |
| <div class="tile" data-target="classic-jax"><img src="jax.png" class="tile-icon-img" alt="JAX Icon"><h4>JAX</h4></div> |
| </div> |
|
|
| <h3 class="main-section-title" style="font-size: 1.8rem; border-color: var(--genai-color);"><i class="material-icons" style="color: var(--genai-color);">auto_awesome</i>Generative AI</h3> |
| <div class="tile-container"> |
| <div class="tile" data-target="genai-llm"><img src="llm.png" class="tile-icon-img" alt="LLM Icon"><h4>LLMs</h4></div> |
| <div class="tile" data-target="genai-vlm"><img src="vlm.png" class="tile-icon-img" alt="VLM Icon"><h4>Multimodal (VLMs)</h4></div> |
| <div class="tile" data-target="genai-diffusion"><img src="diffusion.png" class="tile-icon-img" alt="Diffusion Icon"><h4>Diffusion Models</h4></div> |
| </div> |
|
|
| <div class="content-container"> |
| |
| <div id="classic-pytorch" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3> |
| <p>A simple feed-forward network defined in PyTorch. The model's `state_dict` is saved for deployment.</p> |
| <p class="code-block-header">model_setup.py</p> |
| <pre><code>import torch |
| import torch.nn as nn |
| class SimpleNet(nn.Module): |
| def __init__(self): |
| super(SimpleNet, self).__init__() |
| self.linear = nn.Linear(10, 1) |
| def forward(self, x): return self.linear(x) |
| model = SimpleNet() |
| torch.save(model.state_dict(), "pytorch_model.pth")</code></pre> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3> |
| <p>Use a high-performance framework like FastAPI for a custom server. For dedicated solutions, TorchServe is the native choice, while Kubeflow KServe, Ray Serve, and NVIDIA Triton offer powerful, managed abstractions.</p> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3> |
| <p>Package the application with a multi-stage Dockerfile and define its runtime with Kubernetes Deployment, Service, and HPA objects. Managed platforms like Vertex AI abstract this away.</p> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3> |
| <p><strong>CPUs:</strong> Suitable for small networks. <strong>GPUs:</strong> Essential for deep learning models. <strong>TPUs:</strong> Best for massive-scale inference on GCP.</p> |
| </div> |
| </div> |
| <div id="classic-tensorflow" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3> |
| <p>A simple Keras model saved in TensorFlow's `SavedModel` format, which bundles the architecture and weights.</p> |
| <p class="code-block-header">model_setup.py</p> |
| <pre><code>import tensorflow as tf |
| model = tf.keras.Sequential([ |
| tf.keras.layers.Dense(10, activation='relu', input_shape=(10,)), |
| tf.keras.layers.Dense(1) |
| ]) |
| model.save("tf_saved_model")</code></pre> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3> |
| <p>TF Serving and Kubeflow KServe offer native, high-performance support for the `SavedModel` format. NVIDIA Triton is also highly optimized for TF models. A custom FastAPI server is another flexible option.</p> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3> |
| <p>The Kubernetes configuration is very similar to other frameworks. Ensure your Dockerfile copies the entire `tf_saved_model` directory.</p> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3> |
| <p><strong>CPUs:</strong> Good for smaller Keras models. <strong>GPUs:</strong> Highly recommended for deep learning models. <strong>TPUs:</strong> The premier choice for running TensorFlow models at scale on GCP.</p> |
| </div> |
| </div> |
| <div id="classic-sklearn" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3> |
| <p>A classic logistic regression model. Serialization is typically done with `joblib` for efficiency with NumPy structures.</p> |
| <p class="code-block-header">model_setup.py</p> |
| <pre><code>import joblib |
| from sklearn.linear_model import LogisticRegression |
| from sklearn.datasets import make_classification |
| X, y = make_classification(n_features=4) |
| model = LogisticRegression().fit(X, y) |
| joblib.dump(model, "sklearn_model.joblib")</code></pre> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3> |
| <p>FastAPI provides a simple and fast web server. Kubeflow KServe and Ray Serve also have native support for scikit-learn models. NVIDIA Triton is an option for CPU-optimized execution using its FIL backend.</p> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3> |
| <p>Standard Kubernetes setup. The Docker container will be lightweight as it only needs `scikit-learn`, `joblib`, and `fastapi` for a custom server.</p> |
| </div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3> |
| <p><strong>CPUs:</strong> Almost always sufficient. There is no GPU acceleration for standard scikit-learn algorithms.</p> |
| </div> |
| </div> |
| <div id="classic-xgboost" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3><p>An XGBoost model saved in its native JSON or UBJ format, which is portable and efficient.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3><p>Kubeflow KServe, Ray Serve, NVIDIA Triton (with FIL backend), and custom FastAPI servers are all excellent choices.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3><p>Standard Kubernetes setup. The Dockerfile should include the `xgboost` library.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3><p><strong>CPUs:</strong> Excellent performance. <strong>GPUs:</strong> XGBoost has optional GPU acceleration which can provide a significant speedup.</p></div> |
| </div> |
| <div id="classic-jax" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3><p>JAX models are often defined as pure functions with parameters handled separately. We save the parameters using a standard serialization library like Flax's `msgpack`.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3><p>Ray Serve is an excellent fit for JAX's functional paradigm. A custom FastAPI server is also straightforward. Kubeflow KServe and NVIDIA Triton require a custom container approach wrapping the JAX logic.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3><p>The Dockerfile needs to install `jax` and `jaxlib` corresponding to the target hardware (CPU, GPU, or TPU).</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3><p><strong>CPUs/GPUs/TPUs:</strong> JAX was designed for accelerators and excels on all of them due to its XLA-based compilation.</p></div> |
| </div> |
| |
| |
| <div id="genai-llm" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3><p>Large Language Models (e.g., Llama, Mistral) are based on the Transformer architecture. The key inference challenge is managing the <strong>KV Cache</strong>.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3><p>Specialized serving toolkits like <strong>vLLM</strong>, <strong>SGLang</strong>, or <strong>NVIDIA Triton</strong> with its TensorRT-LLM backend are required for efficient inference, handling complexities like continuous batching and paged attention.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3><p>Kubernetes (often with KubeRay) is used to manage GPU resources and schedule serving pods. Managed services like Vertex AI and SageMaker also provide optimized runtimes for popular LLMs.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3><p><strong>GPUs:</strong> Essential. High-VRAM GPUs like NVIDIA A100 or H100 are required to fit the model weights and KV cache. <strong>TPUs:</strong> Viable for specific models, especially on GCP.</p></div> |
| </div> |
| <div id="genai-vlm" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3><p>Visual Large Models (e.g., LLaVA, IDEFICS) combine a vision encoder (like ViT) with an LLM to process images and text.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3><p>The stack must handle multi-modal inputs. Frameworks like <strong>vLLM</strong> and <strong>SGLang</strong> are adding native support for VLMs. A custom container is often needed to handle the specific image preprocessing logic.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3><p>Similar to LLMs, requires robust orchestration to manage high-resource GPU pods and potentially large input payloads.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3><p><strong>GPUs:</strong> High-VRAM GPUs are mandatory due to the combined size of the vision encoder, LLM, and KV cache.</p></div> |
| </div> |
| <div id="genai-diffusion" class="content-panel"> |
| <div class="stack-layer"><h3><i class="material-icons">psychology</i>Model Layer</h3><p>Diffusion models (e.g., Stable Diffusion) generate images through an iterative denoising process, making latency a key challenge.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">layers</i>Serving Stack Layer</h3><p>Optimizations focus on reducing latency. Key tools include model compilers like <strong>TensorRT</strong> (often used with NVIDIA Triton), techniques like <strong>Latent Consistency Models (LCMs)</strong>, and libraries like <strong>Diffusers</strong>, typically wrapped in a custom FastAPI container.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">cloud_queue</i>Orchestration Layer</h3><p>Kubernetes or managed platforms are used to serve the GPU-intensive workload. Autoscaling is critical to handle bursty traffic patterns.</p></div> |
| <div class="stack-layer"><h3><i class="material-icons">memory</i>Hardware Layer</h3><p><strong>GPUs:</strong> High-end consumer or datacenter GPUs are needed for acceptable generation speeds. VRAM is the most critical resource, dictating max resolution and batch size.</p></div> |
| </div> |
| </div> |
| </main> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const builder = document.getElementById('architecture-builder'); |
| const generateBtn = document.getElementById('generate-btn'); |
| const diagramOutput = document.getElementById('architecture-diagram-output'); |
| |
| const archTypeSelector = builder.querySelector('.arch-type-selector'); |
| const classicFields = document.getElementById('classic-builder-fields'); |
| const genaiFields = document.getElementById('genai-builder-fields'); |
| |
| function updateChipStates() { |
| const activeArchType = archTypeSelector.querySelector('.active').dataset.type; |
| const activeBuilderFields = (activeArchType === 'classic') ? classicFields : genaiFields; |
| |
| if (activeArchType === 'classic') { |
| const activeFramework = activeBuilderFields.querySelector('.selection-group[data-group="framework"] .chip.active'); |
| const torchserveChip = activeBuilderFields.querySelector('.chip[data-id="torchserve"]'); |
| const tfservingChip = activeBuilderFields.querySelector('.chip[data-id="tf-serving"]'); |
| |
| [torchserveChip, tfservingChip].forEach(c => c.classList.remove('disabled')); |
| |
| if (activeFramework) { |
| const frameworkId = activeFramework.dataset.id; |
| const nonTfTsFrameworks = ['scikit-learn', 'xgboost', 'jax']; |
| if (frameworkId === 'pytorch') { |
| tfservingChip.classList.add('disabled'); |
| if(tfservingChip.classList.contains('active')) tfservingChip.classList.remove('active'); |
| } else if (frameworkId === 'tensorflow') { |
| torchserveChip.classList.add('disabled'); |
| if(torchserveChip.classList.contains('active')) torchserveChip.classList.remove('active'); |
| } else if (nonTfTsFrameworks.includes(frameworkId)) { |
| [torchserveChip, tfservingChip].forEach(c => { |
| c.classList.add('disabled'); |
| if(c.classList.contains('active')) c.classList.remove('active'); |
| }); |
| } |
| } |
| } else { |
| const activeModelType = activeBuilderFields.querySelector('.selection-group[data-group="model-type"] .chip.active'); |
| const vllmChip = activeBuilderFields.querySelector('.chip[data-id="vllm"]'); |
| const sglangChip = activeBuilderFields.querySelector('.chip[data-id="sglang"]'); |
| |
| [vllmChip, sglangChip].forEach(c => c.classList.remove('disabled')); |
| |
| if (activeModelType && activeModelType.dataset.id === 'diffusion') { |
| [vllmChip, sglangChip].forEach(c => { |
| c.classList.add('disabled'); |
| if(c.classList.contains('active')) c.classList.remove('active'); |
| }); |
| } |
| } |
| |
| const activeOrchestration = activeBuilderFields.querySelector('.selection-group[data-group="orchestration"] .chip.active'); |
| const servingGroup = activeBuilderFields.querySelector('.selection-group[data-group="serving"]'); |
| |
| if (activeOrchestration && (activeOrchestration.dataset.id === 'vertex-ai' || activeOrchestration.dataset.id === 'sagemaker')) { |
| servingGroup.classList.add('disabled'); |
| servingGroup.querySelector('.chip.active')?.classList.remove('active'); |
| } else { |
| servingGroup.classList.remove('disabled'); |
| } |
| } |
| |
| archTypeSelector.addEventListener('click', function(e){ |
| if (!e.target.classList.contains('arch-type-chip')) return; |
| archTypeSelector.querySelectorAll('.arch-type-chip').forEach(c => c.classList.remove('active')); |
| e.target.classList.add('active'); |
| const type = e.target.dataset.type; |
| classicFields.classList.toggle('active', type === 'classic'); |
| genaiFields.classList.toggle('active', type === 'gen-ai'); |
| diagramOutput.style.display = 'none'; |
| updateChipStates(); |
| }); |
| |
| builder.addEventListener('click', function(e) { |
| if (!e.target.classList.contains('chip') || e.target.classList.contains('disabled')) return; |
| const chip = e.target; |
| const group = chip.closest('.selection-group'); |
| if (group.classList.contains('disabled')) return; |
| group.querySelectorAll('.chip').forEach(c => c.classList.remove('active')); |
| chip.classList.add('active'); |
| updateChipStates(); |
| }); |
| |
| generateBtn.addEventListener('click', function() { |
| const activeArchType = archTypeSelector.querySelector('.active').dataset.type; |
| const activeBuilderFields = document.querySelector('.builder-fields.active'); |
| const selections = {}; |
| let allSelected = true; |
| |
| const isManaged = activeBuilderFields.querySelector('.selection-group[data-group="orchestration"] .chip.active')?.dataset.id.includes('vertex') || |
| activeBuilderFields.querySelector('.selection-group[data-group="orchestration"] .chip.active')?.dataset.id.includes('sagemaker'); |
| |
| activeBuilderFields.querySelectorAll('.selection-group').forEach(group => { |
| const groupKey = group.dataset.group; |
| if (isManaged && groupKey === 'serving') return; |
| |
| const activeChip = group.querySelector('.chip.active'); |
| if (activeChip) { |
| selections[groupKey] = { name: activeChip.innerText, id: activeChip.dataset.id }; |
| } else { |
| allSelected = false; |
| } |
| }); |
| |
| if (!allSelected) { |
| alert('Please make a selection for each required layer.'); |
| return; |
| } |
| |
| let diagramHtml = `<h3 class="diagram-title">Your Custom ${activeArchType === 'gen-ai' ? 'Generative AI' : 'Classic ML'} Architecture</h3><div class="diagram-stack">`; |
| const arrowClass = activeArchType === 'gen-ai' ? 'gen-ai-arrow' : ''; |
| const layerClass = activeArchType === 'gen-ai' ? 'gen-ai-layer' : ''; |
| |
| function createImageTag(selection) { |
| return `<img src="${selection.id}.png" alt="${selection.name} Icon" class="icon-img-placeholder">`; |
| } |
| |
| if (activeArchType === 'gen-ai') { |
| diagramHtml += `<div class="diagram-layer ${layerClass}"><h5>${selections['model-type'].name}</h5><p>Model Type</p>${createImageTag(selections['model-type'])}</div><div class="diagram-arrow ${arrowClass}">south</div>`; |
| } |
| |
| diagramHtml += `<div class="diagram-layer ${layerClass}"><h5>${selections.framework.name}</h5><p>ML Framework</p>${createImageTag(selections.framework)}</div><div class="diagram-arrow ${arrowClass}">south</div>`; |
| |
| if (isManaged) { |
| diagramHtml += `<div class="diagram-layer ${layerClass}"><h5>${selections.orchestration.name}</h5><p>Managed Platform</p>${createImageTag(selections.orchestration)}</div><div class="diagram-arrow ${arrowClass}">south</div>`; |
| } else { |
| diagramHtml += `<div class="diagram-layer ${layerClass}"><h5>${selections.serving.name}</h5><p>Serving Container</p>${createImageTag(selections.serving)}</div><div class="diagram-arrow ${arrowClass}">south</div>`; |
| diagramHtml += `<div class="diagram-layer ${layerClass}"><h5>${selections.orchestration.name}</h5><p>Orchestration</p>${createImageTag(selections.orchestration)}</div><div class="diagram-arrow ${arrowClass}">south</div>`; |
| } |
| |
| diagramHtml += `<div class="diagram-layer ${layerClass}"><h5>${selections.hardware.name}</h5><p>Hardware</p>${createImageTag(selections.hardware)}</div>`; |
| diagramHtml += `</div>`; |
| |
| diagramOutput.innerHTML = diagramHtml; |
| diagramOutput.style.display = 'block'; |
| diagramOutput.scrollIntoView({ behavior: 'smooth', block: 'center' }); |
| }); |
| |
| const tiles = document.querySelectorAll('.tile'); |
| const contentPanels = document.querySelectorAll('.content-panel'); |
| tiles.forEach(tile => tile.addEventListener('click', (e) => { |
| const targetId = e.currentTarget.dataset.target; |
| tiles.forEach(t => t.classList.remove('active')); |
| e.currentTarget.classList.add('active'); |
| contentPanels.forEach(p => p.classList.remove('active')); |
| const panel = document.getElementById(targetId); |
| if (panel) { |
| panel.classList.add('active'); |
| panel.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
| } |
| })); |
| |
| document.querySelectorAll('pre code').forEach(codeBlock => { |
| const pre = codeBlock.parentElement; |
| if (!pre.querySelector('.copy-btn')) { |
| const copyButton = document.createElement('button'); |
| copyButton.innerText = 'Copy'; |
| copyButton.className = 'copy-btn'; |
| pre.appendChild(copyButton); |
| copyButton.addEventListener('click', (e) => { |
| e.stopPropagation(); |
| navigator.clipboard.writeText(codeBlock.innerText).then(() => { |
| copyButton.innerText = 'Copied!'; |
| copyButton.classList.add('copied'); |
| setTimeout(() => { copyButton.innerText = 'Copy'; copyButton.classList.remove('copied'); }, 2000); |
| }); |
| }); |
| } |
| }); |
| updateChipStates(); |
| }); |
| </script> |
| </body> |
| </html> |
