This is an automated email from the ASF dual-hosted git repository.
tlopex pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/tvm-site.git
The following commit(s) were added to refs/heads/main by this push:
new 90a4c95b9e2 [DOCS] Add an HTML TIRx authoring layers diagram (#78)
90a4c95b9e2 is described below
commit 90a4c95b9e2d60627439925fadfc912f485dcb25
Author: Shushi Hong <[email protected]>
AuthorDate: Wed Nov 4 20:11:26 2026 -0500
[DOCS] Add an HTML TIRx authoring layers diagram (#78)
* [DOCS] Add an HTML TIRx authoring layers diagram
* [DOCS] Remove the superseded SVG authoring diagram
---
images/docs/tirx/authoring_layers.html | 291 +++++++++++++++++++++++++++++
images/docs/tirx/authoring_layers.svg | 96 ----------
images/docs/tirx/authoring_layers_embed.js | 46 +++++
3 files changed, 337 insertions(+), 96 deletions(-)
diff --git a/images/docs/tirx/authoring_layers.html
b/images/docs/tirx/authoring_layers.html
new file mode 100644
index 00000000000..203081c587b
--- /dev/null
+++ b/images/docs/tirx/authoring_layers.html
@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<!--
+ Licensed to the Apache Software Foundation (ASF) under one
+ or more contributor license agreements. See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership. The ASF licenses this file
+ to you under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance
+ with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing,
+ software distributed under the License is distributed on an
+ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ KIND, either express or implied. See the License for the
+ specific language governing permissions and limitations
+ under the License.
+-->
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>TIRx authoring layers</title>
+ <style>
+ /* Typography, cards, and blue accent follow the Modern GPU Programming
for MLSys
+ diagrams: https://github.com/mlc-ai/modern-gpu-programming-for-mlsys */
+ :root {
+ color-scheme: light;
+ --surface: #fff;
+ --text: #222;
+ --muted: #536276;
+ --frame: #b6bdc6;
+ --frame-bg: #f8fafc;
+ --tag: #475569;
+ --line: #64748b;
+ --neutral-border: #b6bdc6;
+ --layer-border: #5b9bd5;
+ --layer-bg: #eef5fc;
+ }
+ :root[data-theme="dark"] {
+ color-scheme: dark;
+ --surface: #14181e;
+ --text: #e5e9ef;
+ --muted: #b1bdcd;
+ --frame: #627084;
+ --frame-bg: #1c232c;
+ --tag: #475569;
+ --line: #a1afc1;
+ --neutral-border: #627084;
+ --layer-bg: #1d3043;
+ }
+ * { box-sizing: border-box; }
+ html, body { margin: 0; }
+ body {
+ padding: 14px 4px 4px;
+ background: var(--surface);
+ color: var(--text);
+ font: 13px/1.5 'Inter', 'SF Pro', 'Segoe UI', system-ui, sans-serif;
+ }
+ h1, h2, p { margin: 0; }
+ h2 { font-size: 14px; font-weight: 700; }
+ code { font: 12px/1.5 'SF Mono', 'Fira Code', Consolas, monospace; }
+ .diagram { max-width: 920px; margin: 0 auto; }
+ .program {
+ position: relative;
+ padding: 26px 18px 14px;
+ border: 2px solid var(--frame);
+ border-radius: 12px;
+ background: var(--frame-bg);
+ }
+ .program-label {
+ position: absolute;
+ top: -11px;
+ left: 16px;
+ padding: 1px 10px;
+ border-radius: 4px;
+ background: var(--tag);
+ color: #fff;
+ font-size: 11px;
+ font-weight: 700;
+ letter-spacing: .02em;
+ }
+ .layers {
+ display: grid;
+ grid-template-columns: minmax(0, .85fr) minmax(0, 1.8fr);
+ grid-template-rows: auto 64px auto;
+ column-gap: 32px;
+ }
+ .card { border: 2px solid; border-radius: 8px; text-align: center; }
+ .core {
+ grid-column: 1;
+ grid-row: 1 / 4;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 18px;
+ padding: 18px 10px;
+ border-color: var(--layer-border);
+ background: var(--layer-bg);
+ }
+ .core code { display: block; margin-top: 4px; font-size: 15px; }
+ .constructs { display: grid; gap: 6px; }
+ .note { font-size: 11px; color: var(--muted); }
+ .tile {
+ grid-column: 2;
+ grid-row: 1;
+ padding: 14px 12px 12px;
+ border-color: var(--layer-border);
+ background: var(--layer-bg);
+ }
+ .operations { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
margin: 14px 0; }
+ .operation code { display: block; margin-bottom: 4px; font-weight: 600; }
+ .tile-note { border-top: 1px solid var(--layer-border); padding-top: 9px; }
+ .dispatch { grid-column: 2; grid-row: 2; position: relative; }
+ .dispatch::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 3px;
+ border-left: 1.5px solid var(--line);
+ }
+ .branch {
+ position: absolute;
+ top: 50%;
+ left: -30px;
+ width: calc(50% + 30px);
+ border-top: 1.5px solid var(--line);
+ }
+ .branch::before {
+ content: '';
+ position: absolute;
+ left: -2px;
+ top: -4.5px;
+ border-top: 4px solid transparent;
+ border-bottom: 4px solid transparent;
+ border-right: 6px solid var(--line);
+ }
+ .dispatch::after, .lowering::after {
+ content: '';
+ position: absolute;
+ left: calc(50% - 3.25px);
+ bottom: 0;
+ border-left: 4px solid transparent;
+ border-right: 4px solid transparent;
+ border-top: 6px solid var(--line);
+ }
+ .dispatch code {
+ position: absolute;
+ left: calc(50% + 10px);
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 11px;
+ color: var(--muted);
+ }
+ .backend {
+ grid-column: 2;
+ grid-row: 3;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-wrap: wrap;
+ gap: 3px 16px;
+ padding: 10px;
+ border-color: var(--layer-border);
+ background: var(--layer-bg);
+ }
+ .backend h2 { font-size: 13px; }
+ .shared-ir { margin-top: 14px; color: var(--muted); text-align: center;
font-size: 12px; }
+ .shared-ir strong { color: var(--text); font-weight: 600; }
+ .lowering { position: relative; height: 60px; }
+ .lowering::before {
+ content: '';
+ position: absolute;
+ left: 50%;
+ top: 0;
+ bottom: 3px;
+ border-left: 1.5px solid var(--line);
+ }
+ .lowering span {
+ position: absolute;
+ left: calc(50% + 12px);
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 11px;
+ color: var(--muted);
+ }
+ .codegen {
+ width: 220px;
+ max-width: 80%;
+ margin: 0 auto;
+ padding: 9px 14px;
+ border-color: var(--neutral-border);
+ background: var(--surface);
+ }
+ .sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip-path: inset(50%);
+ white-space: nowrap;
+ }
+ @media (max-width: 620px) {
+ .program { padding: 24px 10px 12px; }
+ .layers { column-gap: 20px; grid-template-columns: minmax(0, .8fr)
minmax(0, 1.4fr); }
+ .branch { left: -18px; width: calc(50% + 18px); }
+ .operations { grid-template-columns: 1fr; gap: 12px; }
+ .tile { padding: 12px 6px 10px; }
+ .core { padding: 14px 6px; }
+ .constructs { font-size: 12px; }
+ .backend { padding: 8px 5px; }
+ .backend code { font-size: 11px; }
+ .dispatch code { left: calc(50% + 7px); font-size: 10px; }
+ }
+ </style>
+</head>
+<body>
+ <main class="diagram" aria-labelledby="program-title"
aria-describedby="diagram-description">
+ <p class="sr-only" id="diagram-description">
+ Core language constructs are used throughout a TIRx program. The optional
+ tile layer expands through TileDispatch into core statements and
expressions
+ and native backend calls. Direct backend calls form a thin interface. All
+ constructs share one IR, followed by layout and further lowering and
code generation.
+ </p>
+ <section class="program">
+ <h1 class="program-label" id="program-title">One TIRx program</h1>
+ <div class="layers">
+ <section class="card core" aria-labelledby="core-title">
+ <div><h2 id="core-title">Core language</h2><code>T.*</code></div>
+ <div class="constructs">
+ <p>Loops and branches</p>
+ <p>Scalar expressions</p>
+ <p>Tensor accesses</p>
+ </div>
+ <p class="note">Used throughout the program</p>
+ </section>
+ <section class="card tile" aria-labelledby="tile-title">
+ <h2 id="tile-title">Tile operations</h2>
+ <div class="operations">
+ <div class="operation">
+ <code>T.cuda.tile.apply</code>
+ <p class="note">Repeat a chosen PTX instruction</p>
+ </div>
+ <div class="operation">
+ <code>T.cuda.tile.ewise</code>
+ <p class="note">Inline a scalar function</p>
+ </div>
+ </div>
+ <p class="note tile-note">Tensor layouts and execution scope</p>
+ </section>
+ <div class="dispatch" aria-hidden="true"><span
class="branch"></span><code>TileDispatch</code></div>
+ <section class="card backend" aria-labelledby="backend-title">
+ <h2 id="backend-title">Direct backend calls</h2>
+ <code>T.cuda.* / T.ptx.*</code>
+ </section>
+ </div>
+ <p class="shared-ir"><strong>Shared TIRx IR</strong> ยท statements,
expressions and calls</p>
+ </section>
+ <div class="lowering"><span>Layout and further lowering</span></div>
+ <section class="card codegen"><h2>Code generation</h2></section>
+ </main>
+ <script>
+ (() => {
+ const root = document.documentElement;
+ const dark = matchMedia('(prefers-color-scheme: dark)');
+ root.dataset.theme = dark.matches ? 'dark' : 'light';
+ if (parent === window) {
+ dark.addEventListener('change', () => { root.dataset.theme =
dark.matches ? 'dark' : 'light'; });
+ return;
+ }
+ const parentOrigin = document.referrer ? new
URL(document.referrer).origin : '*';
+ const report = () => parent.postMessage({
+ type: 'tirx-authoring-layers:height', height:
Math.ceil(document.body.getBoundingClientRect().height)
+ }, parentOrigin);
+ new ResizeObserver(report).observe(document.body);
+ addEventListener('message', (event) => {
+ if (event.source !== parent || (parentOrigin !== '*' && event.origin
!== parentOrigin)) return;
+ if (event.data?.type !== 'tirx-authoring-layers:theme') return;
+ if (['light', 'dark'].includes(event.data.theme)) root.dataset.theme =
event.data.theme;
+ report();
+ });
+ addEventListener('load', report);
+ report();
+ })();
+ </script>
+</body>
+</html>
diff --git a/images/docs/tirx/authoring_layers.svg
b/images/docs/tirx/authoring_layers.svg
deleted file mode 100644
index 68eec9af357..00000000000
--- a/images/docs/tirx/authoring_layers.svg
+++ /dev/null
@@ -1,96 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!--
- Licensed to the Apache Software Foundation (ASF) under one
- or more contributor license agreements. See the NOTICE file
- distributed with this work for additional information
- regarding copyright ownership. The ASF licenses this file
- to you under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in compliance
- with the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing,
- software distributed under the License is distributed on an
- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- KIND, either express or implied. See the License for the
- specific language governing permissions and limitations
- under the License.
--->
-<svg xmlns="http://www.w3.org/2000/svg"; width="1280" height="660"
- viewBox="0 60 1280 660" role="img" aria-labelledby="title description">
- <title id="title">Core language, tile expansion, and direct backend calls in
TIRx</title>
- <desc id="description">
- One TIRx program combines core language constructs with tile operations
- and direct backend calls. The core language spans all abstraction levels:
- loops, branches, scalar expressions, and tensor accesses are used
throughout.
- The optional CUDA tile layer provides apply, which repeats an explicit PTX
- instruction, and ewise, which inlines a scalar function at each element.
- TileDispatch expands tile calls into core statements and expressions and,
- for instruction patterns, backend calls. Direct backend and PTX calls are
- shown as a thin interface. All constructs share the same TIRx IR, which
- undergoes layout and further lowering before code generation.
- </desc>
- <defs>
- <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="5"
- orient="auto" markerUnits="userSpaceOnUse">
- <path d="M 0 0 L 9 5 L 0 10 Z" fill="#637181"/>
- </marker>
- <style>
- text { font-family: Arial, Helvetica, sans-serif; fill: #17212d; }
- .heading { font-size: 32px; font-weight: 700; }
- .label { font-size: 27px; font-weight: 600; }
- .detail { font-size: 24px; }
- .note { font-size: 22px; fill: #4c6075; }
- .code { font-family: 'DejaVu Sans Mono', monospace; font-size: 25px; }
- .flow { fill: none; stroke: #637181; stroke-width: 3;
- stroke-linecap: round; stroke-linejoin: round; }
- </style>
- </defs>
-
- <rect width="1280" height="720" fill="#ffffff"/>
-
- <rect x="32" y="84" width="1216" height="464" rx="20"
- fill="#f7f9fd" stroke="#315e88" stroke-width="2.6"/>
- <text x="640" y="128" text-anchor="middle" class="label">One TIRx
program</text>
-
- <!-- Core syntax is shared across levels. See src/script/ir_builder/ir.cc.
-->
- <rect x="64" y="164" width="340" height="314" rx="14"
- fill="#e3ecf9" stroke="#6488cb" stroke-width="2.2"/>
- <text x="234" y="208" text-anchor="middle" class="label">Core language</text>
- <text x="234" y="247" text-anchor="middle" class="code">T.*</text>
- <text x="234" y="299" text-anchor="middle" class="detail">Loops and
branches</text>
- <text x="234" y="338" text-anchor="middle" class="detail">Scalar
expressions</text>
- <text x="234" y="377" text-anchor="middle" class="detail">Tensor
accesses</text>
- <text x="234" y="447" text-anchor="middle" class="note">Used throughout the
program</text>
-
- <!-- Only the optional tile expansion sits above direct native operations.
-->
- <rect x="464" y="164" width="752" height="176" rx="14"
- fill="#d6e3f7" stroke="#6488cb" stroke-width="2.2"/>
- <text x="840" y="205" text-anchor="middle" class="label">Tile
operations</text>
- <text x="652" y="247" text-anchor="middle"
class="code">T.cuda.tile.apply</text>
- <text x="1028" y="247" text-anchor="middle"
class="code">T.cuda.tile.ewise</text>
- <text x="652" y="280" text-anchor="middle" class="note">Repeat a chosen PTX
instruction</text>
- <text x="1028" y="280" text-anchor="middle" class="note">Inline a scalar
function</text>
- <text x="840" y="317" text-anchor="middle" class="note">Tensor layouts and
execution scope</text>
-
- <!-- Expansion is implemented in backend/cuda/tile/patterns:
- register.py emits PTX calls; ewise.py emits scalar TensorStores;
- common.py wraps these in ordinary IR For loops. -->
- <path d="M 840 340 V 376 H 407" class="flow" marker-end="url(#arrow)"/>
- <path d="M 840 376 V 411" class="flow" marker-end="url(#arrow)"/>
- <circle cx="840" cy="376" r="4" fill="#637181"/>
- <text x="865" y="384" class="code">TileDispatch</text>
-
- <rect x="464" y="414" width="752" height="64" rx="12"
- fill="#edf3fa" stroke="#768393" stroke-width="2.2"/>
- <text x="488" y="454" class="label">Direct backend calls</text>
- <text x="918" y="454" text-anchor="middle" class="code">T.cuda.* /
T.ptx.*</text>
-
- <text x="640" y="521" text-anchor="middle" class="detail">Shared TIRx IR:
statements, expressions and calls</text>
-
- <path d="M 640 548 V 633" class="flow" marker-end="url(#arrow)"/>
- <text x="664" y="598" class="note">Layout and further lowering</text>
- <rect x="440" y="636" width="400" height="60" fill="#c2d9b0"/>
- <text x="640" y="677" text-anchor="middle" class="heading">Code
generation</text>
-</svg>
diff --git a/images/docs/tirx/authoring_layers_embed.js
b/images/docs/tirx/authoring_layers_embed.js
new file mode 100644
index 00000000000..9a041ffa474
--- /dev/null
+++ b/images/docs/tirx/authoring_layers_embed.js
@@ -0,0 +1,46 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+// Keep the hosted diagram's height and theme in sync with its documentation
page.
+(() => {
+ const dark = matchMedia('(prefers-color-scheme: dark)');
+
document.querySelectorAll('iframe[data-tirx-authoring-layers]').forEach((frame)
=> {
+ if (frame.dataset.ready) return;
+ frame.dataset.ready = 'true';
+ const origin = new URL(frame.src, document.baseURI).origin;
+ const syncTheme = () => {
+ const selected = document.documentElement.dataset.theme;
+ const theme = ['light', 'dark'].includes(selected) ? selected :
(dark.matches ? 'dark' : 'light');
+ frame.contentWindow.postMessage({ type: 'tirx-authoring-layers:theme',
theme }, origin);
+ };
+ addEventListener('message', (event) => {
+ if (event.source !== frame.contentWindow || event.origin !== origin)
return;
+ const data = event.data;
+ if (data?.type !== 'tirx-authoring-layers:height') return;
+ if (!Number.isFinite(data.height) || data.height < 100 || data.height >
2000) return;
+ frame.style.height = Math.ceil(data.height) + 'px';
+ });
+ new MutationObserver(syncTheme).observe(document.documentElement, {
+ attributes: true, attributeFilter: ['data-theme']
+ });
+ dark.addEventListener('change', syncTheme);
+ frame.addEventListener('load', syncTheme);
+ syncTheme();
+ });
+})();
