Skip to content

docs(homepage): add HAMi vs HAMi-DRA toggle to architecture diagram #704

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

Merged
hami-robot merged 2 commits into from
Aug 6, 2026
+265 −87
Merged

docs(homepage): add HAMi vs HAMi-DRA toggle to architecture diagram #704

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
09950d0
feat(homepage): add HAMi-DRA architecture toggle to homepage
singhsrijan46 Aug 3, 2026
fec6a85
chore(deps): restore package.json and lockfile to master
singhsrijan46 Aug 4, 2026
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
297 changes: 210 additions & 87 deletions src/pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,66 +175,142 @@ const heroDiagramCopy = {
zh: "显存 / 核心利用趋势",
},
};
const runtimeLanes = [
{
key: "control",
tone: "control",
title: { en: "Control Plane", zh: "控制面" },
summary: { en: "Decision path", zh: "决策路径" },
steps: [
{
key: "webhook",
emphasis: "secondary",
label: { en: "MutatingWebhook", zh: "MutatingWebhook" },
note: { en: "Admission Entry", zh: "准入入口" },
},
const runtimeModesData = {
hami: {
key: "hami",
label: { en: "HAMi (Device Plugin)", zh: "HAMi (Device Plugin 模式)" },
title: { en: "HAMi Runtime Mechanism (Device Plugin)", zh: "HAMi 运行时机制 (Device Plugin)" },
entryLabel: { en: "Request Entry / Runtime Interface", zh: "请求入口 / 运行时接口" },
entryValue: {
en: "PodSpec + Extended Resources (nvidia.com/gpu + gpumem / gpucores)",
zh: "PodSpec + 扩展资源 (nvidia.com/gpu + gpumem / gpucores)",
},
lanes: [
{
key: "scheduler",
emphasis: "primary",
label: { en: "HAMi Scheduler", zh: "HAMi Scheduler" },
note: { en: "Policy / Topology", zh: "策略 / 拓扑" },
key: "control",
tone: "control",
title: { en: "Control Plane", zh: "控制面" },
summary: { en: "Decision path", zh: "决策路径" },
steps: [
{
key: "webhook",
emphasis: "secondary",
label: { en: "MutatingWebhook", zh: "MutatingWebhook" },
note: { en: "Admission Entry", zh: "准入入口" },
},
{
key: "scheduler",
emphasis: "primary",
label: { en: "HAMi Scheduler", zh: "HAMi Scheduler" },
note: { en: "Policy / Topology", zh: "策略 / 拓扑" },
},
{
key: "binding",
emphasis: "primary",
label: { en: "Device Binding Decision", zh: "设备绑定决策" },
note: { en: "Target GPU Selected", zh: "完成目标设备选择" },
},
],
},
{
key: "binding",
emphasis: "primary",
label: { en: "Device Binding Decision", zh: "设备绑定决策" },
note: { en: "Target GPU Selected", zh: "完成目标设备选择" },
key: "data",
tone: "data",
title: { en: "Data Plane", zh: "数据面" },
summary: { en: "Enforcement Path", zh: "执行路径" },
steps: [
{
key: "injection",
emphasis: "primary",
label: { en: "Device Plugin Injection", zh: "Device Plugin 注入" },
note: { en: "Device Attached", zh: "完成设备注入" },
},
{
key: "isolation",
emphasis: "primary",
label: { en: "HAMi Core", zh: "HAMi Core" },
note: { en: "Memory / Core Isolation", zh: "显存 / 核心隔离" },
},
{
key: "runtime",
emphasis: "secondary",
label: { en: "Container Workload", zh: "容器工作负载" },
note: { en: "Execution Starts", zh: "开始运行" },
},
],
},
],
resources: {
type: "extended",
label: { en: "Resource Semantics", zh: "资源语义" },
},
},
{
key: "data",
tone: "data",
title: { en: "Data Plane", zh: "数据面" },
summary: { en: "Enforcement Path", zh: "执行路径" },
steps: [
"hami-dra": {
key: "hami-dra",
label: { en: "HAMi-DRA Mode", zh: "HAMi-DRA 模式" },
title: { en: "HAMi-DRA Runtime Mechanism (DRA Mode)", zh: "HAMi-DRA 运行时机制 (DRA 模式)" },
entryLabel: { en: "Request Entry / Runtime Interface", zh: "请求入口 / 运行时接口" },
entryValue: {
en: "PodSpec + ResourceClaim / ResourceSlice + CDI",
zh: "PodSpec + ResourceClaim / ResourceSlice + CDI 声明",
},
lanes: [
{
key: "injection",
emphasis: "primary",
label: { en: "Device Plugin + CDI Injection", zh: "Device Plugin + CDI 注入" },
note: { en: "Device Attached", zh: "完成设备注入" },
key: "control",
tone: "control",
title: { en: "Control Plane", zh: "控制面" },
summary: { en: "Decision path", zh: "决策路径" },
steps: [
{
key: "webhook",
emphasis: "secondary",
label: { en: "HAMi-DRA Webhook", zh: "HAMi-DRA Webhook" },
note: { en: "Auto-Conversion & Admission", zh: "资源改写与准入" },
},
{
key: "scheduler",
emphasis: "primary",
label: { en: "Native Kube-Scheduler", zh: "原生 Kube-Scheduler" },
note: { en: "K8s DRA Plugin Scheduling", zh: "K8s 原生 DRA 调度" },
},
{
key: "binding",
emphasis: "primary",
label: { en: "ResourceClaim Allocation", zh: "ResourceClaim 绑定" },
note: { en: "DeviceClass & Slice Selected", zh: "完成设备切片选择" },
},
],
},
{
key: "isolation",
emphasis: "primary",
label: { en: "HAMi Core", zh: "HAMi Core" },
note: { en: "Memory / Core Isolation", zh: "显存 / 核心隔离" },
},
{
key: "runtime",
emphasis: "secondary",
label: { en: "Container Workload", zh: "容器工作负载" },
note: { en: "Execution Starts", zh: "开始运行" },
key: "data",
tone: "data",
title: { en: "Data Plane", zh: "数据面" },
summary: { en: "Enforcement Path", zh: "执行路径" },
steps: [
{
key: "injection",
emphasis: "primary",
label: { en: "HAMi-DRA Driver + CDI", zh: "HAMi-DRA Driver + CDI 注入" },
note: { en: "CDI Spec & Preload", zh: "CDI 设备与预加载注入" },
},
{
key: "isolation",
emphasis: "primary",
label: { en: "HAMi Core", zh: "HAMi Core" },
note: { en: "Memory / Core Isolation", zh: "显存 / 核心隔离" },
},
{
key: "runtime",
emphasis: "secondary",
label: { en: "Container Workload", zh: "容器工作负载" },
note: { en: "Execution Starts", zh: "开始运行" },
},
],
},
],
},
];
const runtimeDiagramCopy = {
title: { en: "HAMi Runtime Mechanism", zh: "HAMi 运行时机制" },
entryLabel: { en: "Request Entry / Runtime Interface", zh: "请求入口 / 运行时接口" },
entryValue: {
en: "PodSpec + Device Plugin / DRA + CDI",
zh: "PodSpec + Device Plugin / DRA + CDI 运行时接口",
resources: {
type: "dra",
label: { en: "Resource Semantics", zh: "资源语义" },
},
},
};
const architectureSectionCopy = {
Expand Down Expand Up @@ -375,6 +451,7 @@ export default function Home() {
const { i18n } = useDocusaurusContext();
const isZh = i18n.currentLocale === "zh";
const [starsCount, setStarsCount] = useState(3100);
const [archMode, setArchMode] = useState("hami");
// Static: Docker Hub's API sends no CORS header, so it cannot be read from the browser.
const dockerPulls = 325000;
const kubernetesLogo = useBaseUrl("img/kubernetes-logo.svg");
Expand Down Expand Up @@ -764,50 +841,96 @@ export default function Home() {
</p>

<div className={styles.architectureOverview}>
<div className={styles.archModeToggleRow}>
<div className={styles.archModeToggle}>
<button
type="button"
className={clsx(
styles.archModeBtn,
archMode === "hami" && styles.archModeBtnActive,
)}
onClick={() => setArchMode("hami")}
>
{pickLocalized(i18n.currentLocale, runtimeModesData.hami.label)}
</button>
<button
type="button"
className={clsx(
styles.archModeBtn,
archMode === "hami-dra" && styles.archModeBtnActive,
)}
onClick={() => setArchMode("hami-dra")}
>
{pickLocalized(i18n.currentLocale, runtimeModesData["hami-dra"].label)}
</button>
</div>
</div>
Comment on lines +844 to +867

@coderabbitai coderabbitai Bot Aug 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Expose the selected mode to assistive technology.

The active mode is communicated only by background color. Screen reader users cannot determine the current selection. Add aria-pressed to each button and label the group.

♿ Proposed fix 
-              <div className={styles.archModeToggleRow}>
-                <div className={styles.archModeToggle}>
+              <div className={styles.archModeToggleRow}>
+                <div
+                  className={styles.archModeToggle}
+                  role="group"
+                  aria-label={isZh ? "架构模式选择" : "Architecture mode selection"}
+                >
                   <button
                     type="button"
+                    aria-pressed={archMode === "hami"}
                     className={clsx(
                       styles.archModeBtn,
                       archMode === "hami" && styles.archModeBtnActive,
                     )}
                     onClick={() => setArchMode("hami")}
                   >
                     {pickLocalized(i18n.currentLocale, runtimeModesData.hami.label)}
                   </button>
                   <button
                     type="button"
+                    aria-pressed={archMode === "hami-dra"}
                     className={clsx(
                       styles.archModeBtn,
                       archMode === "hami-dra" && styles.archModeBtnActive,
                     )}
                     onClick={() => setArchMode("hami-dra")}
                   >
                     {pickLocalized(i18n.currentLocale, runtimeModesData["hami-dra"].label)}
                   </button>
                 </div>
               </div>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/index.js` around lines 844 - 867, Update the archModeToggle group
around the two mode buttons to include an accessible group label, and add
aria-pressed to each button based on whether archMode matches its mode value.
Preserve the existing visual active-state classes and click behavior.


<article
ref={addRevealRef}
data-reveal-scale="1"
className={clsx(styles.runtimeMechanism, styles.reveal)}
aria-label={isZh ? "HAMi 运行时机制架构图" : "HAMi runtime architecture diagram"}
aria-label={pickLocalized(
i18n.currentLocale,
(runtimeModesData[archMode] || runtimeModesData.hami).title,
)}
>
<div
className={styles.runtimeDiagramFrame}
role="img"
aria-label={isZh ? "HAMi 运行时机制架构图" : "HAMi runtime architecture diagram"}
>
<h3 className={styles.runtimeDiagramTitle}>
{pickLocalized(i18n.currentLocale, runtimeDiagramCopy.title)}
</h3>
<section className={styles.runtimeStage} data-runtime-part="entry">
<span className={styles.runtimeSectionLabel}>
{pickLocalized(i18n.currentLocale, runtimeDiagramCopy.entryLabel)}
</span>
<div className={styles.runtimeStageCard}>
{pickLocalized(i18n.currentLocale, runtimeDiagramCopy.entryValue)}
</div>
</section>
<div className={styles.runtimeStageConnector} aria-hidden="true">
<span className={styles.runtimeConnectorLine} />
</div>
<section className={styles.runtimePipelineSection} data-runtime-part="pipeline">
<div className={styles.runtimeLaneGrid}>
<RuntimeLaneCard lane={runtimeLanes[0]} locale={i18n.currentLocale} />
<RuntimeLaneCard lane={runtimeLanes[1]} locale={i18n.currentLocale} />
</div>
</section>
<section className={styles.runtimeResources} data-runtime-part="resources">
<span className={styles.runtimeResourcesLabel}>
{isZh ? "资源语义" : "Resource Semantics"}
</span>
<div className={styles.runtimeResourcesValue}>
<code>nvidia.com/gpu</code>
<span className={styles.runtimeResourcesDivider}>+</span>
<code>gpumem</code>
<span className={styles.runtimeResourcesSlash}>/</span>
<code>gpucores</code>
{(() => {
const activeMode = runtimeModesData[archMode] || runtimeModesData.hami;
return (
<div
className={styles.runtimeDiagramFrame}
role="img"
aria-label={pickLocalized(i18n.currentLocale, activeMode.title)}
>
Comment on lines 869 to +885

@coderabbitai coderabbitai Bot Aug 2, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Remove the duplicate label and reconsider role="img" on text content.

Two problems exist in this wrapper:

  1. The article at Line 873 and the inner div at Line 884 carry the same aria-label. Assistive technology announces the title twice.
  2. role="img" makes the element an atomic image. All descendant text is hidden from assistive technology. The lane steps, notes, and resource semantics rendered inside are therefore unreachable, and only the title is announced.

The diagram content here is real text, not a graphic. Keep it exposed and label it as a group.

♿ Proposed fix 
               <article
                 ref={addRevealRef}
                 data-reveal-scale="1"
                 className={clsx(styles.runtimeMechanism, styles.reveal)}
-                aria-label={pickLocalized(
-                  i18n.currentLocale,
-                  (runtimeModesData[archMode] || runtimeModesData.hami).title,
-                )}
               >
                 {(() => {
                   const activeMode = runtimeModesData[archMode] || runtimeModesData.hami;
                   return (
-                    <div
-                      className={styles.runtimeDiagramFrame}
-                      role="img"
-                      aria-label={pickLocalized(i18n.currentLocale, activeMode.title)}
-                    >
+                    <div className={styles.runtimeDiagramFrame} role="group">
                       <h3 className={styles.runtimeDiagramTitle}>
                         {pickLocalized(i18n.currentLocale, activeMode.title)}
                       </h3>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<article
ref={addRevealRef}
data-reveal-scale="1"
className={clsx(styles.runtimeMechanism, styles.reveal)}
aria-label={isZh ? "HAMi 运行时机制架构图" : "HAMi runtime architecture diagram"}
aria-label={pickLocalized(
i18n.currentLocale,
(runtimeModesData[archMode] || runtimeModesData.hami).title,
)}
>
<div
className={styles.runtimeDiagramFrame}
role="img"
aria-label={isZh ? "HAMi 运行时机制架构图" : "HAMi runtime architecture diagram"}
>
<h3 className={styles.runtimeDiagramTitle}>
{pickLocalized(i18n.currentLocale, runtimeDiagramCopy.title)}
</h3>
<section className={styles.runtimeStage} data-runtime-part="entry">
<span className={styles.runtimeSectionLabel}>
{pickLocalized(i18n.currentLocale, runtimeDiagramCopy.entryLabel)}
</span>
<div className={styles.runtimeStageCard}>
{pickLocalized(i18n.currentLocale, runtimeDiagramCopy.entryValue)}
</div>
</section>
<div className={styles.runtimeStageConnector} aria-hidden="true">
<span className={styles.runtimeConnectorLine} />
</div>
<section className={styles.runtimePipelineSection} data-runtime-part="pipeline">
<div className={styles.runtimeLaneGrid}>
<RuntimeLaneCard lane={runtimeLanes[0]} locale={i18n.currentLocale} />
<RuntimeLaneCard lane={runtimeLanes[1]} locale={i18n.currentLocale} />
</div>
</section>
<section className={styles.runtimeResources} data-runtime-part="resources">
<span className={styles.runtimeResourcesLabel}>
{isZh ? "资源语义" : "Resource Semantics"}
</span>
<div className={styles.runtimeResourcesValue}>
<code>nvidia.com/gpu</code>
<span className={styles.runtimeResourcesDivider}>+</span>
<code>gpumem</code>
<span className={styles.runtimeResourcesSlash}>/</span>
<code>gpucores</code>
{(() => {
const activeMode = runtimeModesData[archMode] || runtimeModesData.hami;
return (
<div
className={styles.runtimeDiagramFrame}
role="img"
aria-label={pickLocalized(i18n.currentLocale, activeMode.title)}
>
<article
ref={addRevealRef}
data-reveal-scale="1"
className={clsx(styles.runtimeMechanism, styles.reveal)}
>
{(() => {
const activeMode = runtimeModesData[archMode] || runtimeModesData.hami;
return (
<div className={styles.runtimeDiagramFrame} role="group">
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/index.js` around lines 869 - 885, Remove the duplicate aria-label
from either the outer article or inner runtimeDiagramFrame, retaining a single
accessible title. Replace role="img" on the inner runtimeDiagramFrame with an
appropriate group role so its descendant lane steps, notes, and resource text
remain exposed to assistive technology.

<h3 className={styles.runtimeDiagramTitle}>
{pickLocalized(i18n.currentLocale, activeMode.title)}
</h3>
<section className={styles.runtimeStage} data-runtime-part="entry">
<span className={styles.runtimeSectionLabel}>
{pickLocalized(i18n.currentLocale, activeMode.entryLabel)}
</span>
<div className={styles.runtimeStageCard}>
{pickLocalized(i18n.currentLocale, activeMode.entryValue)}
</div>
</section>
<div className={styles.runtimeStageConnector} aria-hidden="true">
<span className={styles.runtimeConnectorLine} />
</div>
<section
className={styles.runtimePipelineSection}
data-runtime-part="pipeline"
>
<div className={styles.runtimeLaneGrid}>
<RuntimeLaneCard lane={activeMode.lanes[0]} locale={i18n.currentLocale} />
<RuntimeLaneCard lane={activeMode.lanes[1]} locale={i18n.currentLocale} />
</div>
</section>
<section className={styles.runtimeResources} data-runtime-part="resources">
<span className={styles.runtimeResourcesLabel}>
{pickLocalized(i18n.currentLocale, activeMode.resources.label)}
</span>
<div className={styles.runtimeResourcesValue}>
{activeMode.key === "hami" ? (
<>
<code>nvidia.com/gpu</code>
<span className={styles.runtimeResourcesDivider}>+</span>
<code>gpumem</code>
<span className={styles.runtimeResourcesSlash}>/</span>
<code>gpucores</code>
</>
) : (
<>
<code>ResourceClaim</code>
<span className={styles.runtimeResourcesDivider}></span>
<code>(DeviceClass + memory/cores)</code>
</>
)}
</div>
</section>
</div>
</section>
</div>
);
})()}
</article>
</div>
</div>
Expand Down
55 changes: 55 additions & 0 deletions src/pages/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,61 @@
margin-top: 22px;
}

.archModeToggleRow {
display: flex;
justify-content: center;
margin-bottom: 20px;
}

.archModeToggle {
display: inline-flex;
gap: 6px;
background: rgba(226, 232, 240, 0.7);
padding: 4px;
border-radius: 9999px;
border: 1px solid rgba(203, 213, 225, 0.6);
}

.archModeBtn {
border: none;
background: transparent;
padding: 8px 20px;
font-size: 0.88rem;
font-weight: 600;
border-radius: 9999px;
color: #475569;
cursor: pointer;
transition: all 0.2s ease;
}

.archModeBtn:hover {
color: #0f172a;
}

.archModeBtnActive {
background: #10b981;
color: #ffffff !important;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

:global(html[data-theme="dark"]) .archModeToggle {
background: rgba(30, 41, 59, 0.85);
border-color: rgba(51, 65, 85, 0.8);
}

:global(html[data-theme="dark"]) .archModeBtn {
color: #94a3b8;
}

:global(html[data-theme="dark"]) .archModeBtn:hover {
color: #f8fafc;
}

:global(html[data-theme="dark"]) .archModeBtnActive {
background: #10b981;
color: #ffffff !important;
}

.runtimeMechanism {
margin-bottom: 0;
padding: 0;
Expand Down