MetaCircleAI · QuQingY · Aug 3, 2026 · Aug 3, 2026 · Aug 3, 2026
diff --git a/docs/_static/comfyresearch.css b/docs/_static/comfyresearch.css
@@ -764,6 +764,41 @@ body[data-page="examples/index"] .bd-header-article .bd-breadcrumbs {
   color: var(--cr-accent-dark);
 }
 
+.cr-template-link {
+  display: inline-flex;
+  width: fit-content;
+  margin: 10px 0 0;
+  padding: 7px 14px;
+  align-items: center;
+  border: 1px solid var(--cr-accent);
+  border-radius: 999px;
+  background: var(--cr-accent);
+  color: var(--cr-on-accent);
+  font-size: 0.86rem;
+  font-weight: 700;
+  line-height: 1.2;
+  text-decoration: none;
+  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.cr-template-link:hover {
+  border-color: var(--cr-accent-dark);
+  background: var(--cr-accent-dark);
+  color: var(--cr-on-accent);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+.cr-template-link:focus-visible {
+  color: var(--cr-on-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cr-template-link {
+    transition: none;
+  }
+}
+
 .cr-page-identity {
   display: flex;
   margin-left: auto;

diff --git a/docs/_templates/template-link.html b/docs/_templates/template-link.html
@@ -0,0 +1,11 @@
+{% if online_template_id %}
+  <a
+    class="cr-template-link"
+    href="https://online.comfy-research.com/?templateId={{ online_template_id }}"
+    target="_blank"
+    rel="noopener"
+    aria-label="{{ cr_ui.open_template }}"
+  >
+    {{ cr_ui.open_template }}
+  </a>
+{% endif %}
diff --git a/docs/conf.py b/docs/conf.py
@@ -42,6 +42,7 @@
         "doc_type_reproduction": "Reproduction",
         "doc_status_stable_core": "Stable core",
         "doc_status_phenomenon": "Phenomenon reproduction",
+        "open_template": "Open template ↗",
         "github_repo_aria_label": "Open the GitHub repository",
         "version_switch_aria_label": "Switch documentation version",
         "language_switch_label": "中文",
@@ -68,6 +69,7 @@
         "doc_type_reproduction": "复现",
         "doc_status_stable_core": "稳定核心",
         "doc_status_phenomenon": "现象复现",
+        "open_template": "在线打开模板 ↗",
         "github_repo_aria_label": "打开 GitHub 仓库",
         "version_switch_aria_label": "切换文档版本",
         "language_switch_label": "EN",
@@ -93,7 +95,11 @@
         "theme-switcher",
     ],
     "navbar_persistent": [],
-    "article_header_start": ["breadcrumbs", "page-status.html"],
+    "article_header_start": [
+        "breadcrumbs",
+        "page-status.html",
+        "template-link.html",
+    ],
     "article_footer_items": [],
     "secondary_sidebar_items": ["page-toc"],
     "show_prev_next": True,
@@ -149,6 +155,12 @@ def add_page_context(app, pagename, templatename, context, doctree):
             }
         )
 
+    page_meta = context.get("meta") or {}
+    template_id = page_meta.get("template_id")
+    if not template_id and doctree is not None:
+        template_id = doctree.get("template_id")
+    online_template_id = page_meta.get("online_template_id") or template_id
+
     context.update(
         {
             "cr_ui": UI_TEXT[locale],
@@ -157,6 +169,7 @@ def add_page_context(app, pagename, templatename, context, doctree):
             "alternate_language_label": UI_TEXT[locale]["language_switch_label"],
             "current_docs_version": CURRENT_DOCS_VERSION,
             "documentation_versions": version_options,
+            "online_template_id": online_template_id,
         }
     )
 

diff --git a/docs/en/examples/reproductions/Neural_Mechanics.md b/docs/en/examples/reproductions/Neural_Mechanics.md
@@ -1,6 +1,8 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: b38ae9dd-735b-46c4-973f-a850a2a55544
+online_template_id: b15a6036-0e38-4f8f-84ba-8b763c408dc9
 ---
 
 :::{div} cr-eyebrow
@@ -57,7 +59,7 @@ Ganguli, Yamins & Tanaka, ICLR 2021 (arXiv:2012.04728).
 
 **Template:** `Symmetry & Broken Conservation Laws (GPU)`
 
-**Template ID:** `symmetry-broken-conservation-laws`
+**Template ID:** `b38ae9dd-735b-46c4-973f-a850a2a55544`
 
 ## Reproduction Goal
 

diff --git a/docs/en/examples/reproductions/diffusion-reproducibility.md b/docs/en/examples/reproductions/diffusion-reproducibility.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-diffusion-same-init-different-seed
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/edge-of-stability-cpu.md b/docs/en/examples/reproductions/edge-of-stability-cpu.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: edge-of-stability-cpu
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/edge-of-stability-eos.md b/docs/en/examples/reproductions/edge-of-stability-eos.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: 97ff01a8-1724-43ec-8c38-fdb62bbe5faf
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/in-context-associative-recall.md b/docs/en/examples/reproductions/in-context-associative-recall.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: 5d1a2ab4-825d-4251-8a5a-d7b83b42c1d7
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/information-bottleneck-figure3.md b/docs/en/examples/reproductions/information-bottleneck-figure3.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: dafb8339-a932-4b10-b3b6-185fc53a5a4f
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/jastrzebski-fig1-cyclic-cbs-vs-clr.md b/docs/en/examples/reproductions/jastrzebski-fig1-cyclic-cbs-vs-clr.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-jastrzbski-fig1-vgg11
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/keskar-fig2-3-sb-lb.md b/docs/en/examples/reproductions/keskar-fig2-3-sb-lb.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-keskar-fig23-sb-lb
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/lazy-vs-rich-regime.md b/docs/en/examples/reproductions/lazy-vs-rich-regime.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: d2e8cdd7-d14c-42c3-94dc-ba2b419c07f9
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/linear-mode-connectivity.md b/docs/en/examples/reproductions/linear-mode-connectivity.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-linear-mode-connectivity-cifar10
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/random-label-memorization-figure1a.md b/docs/en/examples/reproductions/random-label-memorization-figure1a.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-random-label-memorization-fig1a
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/rank-collapse-figure5.md b/docs/en/examples/reproductions/rank-collapse-figure5.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-rank-collapse-figure5-linear-ce
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/rank-collapse-tinyshakespeare.md b/docs/en/examples/reproductions/rank-collapse-tinyshakespeare.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-rank-collapse-tinyshakespeare-pretraining
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/saad_solla_plateau_reproduction.md b/docs/en/examples/reproductions/saad_solla_plateau_reproduction.md
@@ -1,6 +1,8 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: e399fd7d-e107-44d0-94b6-7e2159392253
+online_template_id: de684a36-a2d5-440f-bb2b-3c249abb8270
 ---
 
 :::{div} cr-eyebrow
@@ -57,7 +59,7 @@ Saad & Solla, Phys. Rev. Lett. 74, 4337-4340 (1995).
 
 **Template:** `Saad & Solla Over-Realizable (CPU)`
 
-**Template ID:** `saad-solla-over-realizable-cpu`
+**Template ID:** `e399fd7d-e107-44d0-94b6-7e2159392253`
 
 ## Reproduction Goal
 

diff --git a/docs/en/examples/reproductions/spectral-bias-figure1a.md b/docs/en/examples/reproductions/spectral-bias-figure1a.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: repro-spectral-bias-fig1a
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/examples/reproductions/staggered-singular-value-dynamics.md b/docs/en/examples/reproductions/staggered-singular-value-dynamics.md
@@ -1,6 +1,7 @@
 ---
 doc_type: reproduction
 doc_status: phenomenon
+template_id: a04f21b3-e31c-4ba3-b8b9-d3af752f77d4
 ---
 
 :::{div} cr-eyebrow

diff --git a/docs/en/get-started/first-graph.md b/docs/en/get-started/first-graph.md
@@ -1,6 +1,7 @@
 ---
 doc_type: tutorial
 doc_status: stable-core
+template_id: edge-of-stability-cpu
 ---
 
 :::{div} cr-eyebrow

diff --git a/tests/test_docs_build_contracts.py b/tests/test_docs_build_contracts.py
@@ -74,6 +74,7 @@ def test_build_docs_writes_the_docs_site(tmp_path: Path) -> None:
     assert (site / "en/0.1.0/_static/comfyresearch.js").is_file()
 
     introduction_html = (site / "en/0.1.0/introduction/index.html").read_text()
+    assert 'class="cr-template-link"' not in introduction_html
     assert 'data-page="introduction"' in introduction_html
     assert 'class="navbar-brand cr-brand"' in introduction_html
     assert 'class="cr-brand-logo cr-brand-logo--light"' in introduction_html
@@ -148,6 +149,9 @@ def test_build_docs_writes_the_docs_site(tmp_path: Path) -> None:
     assert 'class="prev-next-footer d-print-none"' in first_graph_html
     assert 'id="pst-secondary-sidebar"' in first_graph_html
     assert ">Tutorial<" in first_graph_html
+    assert 'class="cr-template-link"' in first_graph_html
+    assert "templateId=edge-of-stability-cpu" in first_graph_html
+    assert "Open template ↗" in first_graph_html
     assert ">Stable core<" in first_graph_html
 
     user_guide_page = site / "en/0.1.0/user-guide/index.html"
@@ -220,6 +224,8 @@ def test_build_docs_writes_the_docs_site(tmp_path: Path) -> None:
         assert "—" not in source_text
         assert "–" not in source_text
 
+    reference_html = (site / "en/0.1.0/reference/index.html").read_text()
+    assert 'class="cr-template-link"' not in reference_html
     reference_text = rendered_text(site / "en/0.1.0/reference/index.html")
     assert "Runtime and file contracts" in reference_text
     assert "Application" in reference_text
@@ -284,6 +290,32 @@ def test_build_docs_writes_the_docs_site(tmp_path: Path) -> None:
         assert "cr-article-meta" in html
         assert "cr-abstract" in html
 
+    template_link_routes = {
+        "get-started/first-graph": "edge-of-stability-cpu",
+        "examples/reproductions/jastrzebski-fig1-cyclic-cbs-vs-clr": "repro-jastrzbski-fig1-vgg11",
+        "examples/reproductions/edge-of-stability-cpu": "edge-of-stability-cpu",
+        "examples/reproductions/edge-of-stability-eos": "97ff01a8-1724-43ec-8c38-fdb62bbe5faf",
+        "examples/reproductions/keskar-fig2-3-sb-lb": "repro-keskar-fig23-sb-lb",
+        "examples/reproductions/lazy-vs-rich-regime": "d2e8cdd7-d14c-42c3-94dc-ba2b419c07f9",
+        "examples/reproductions/staggered-singular-value-dynamics": "a04f21b3-e31c-4ba3-b8b9-d3af752f77d4",
+        "examples/reproductions/spectral-bias-figure1a": "repro-spectral-bias-fig1a",
+        "examples/reproductions/saad_solla_plateau_reproduction": "de684a36-a2d5-440f-bb2b-3c249abb8270",
+        "examples/reproductions/rank-collapse-figure5": "repro-rank-collapse-figure5-linear-ce",
+        "examples/reproductions/rank-collapse-tinyshakespeare": "repro-rank-collapse-tinyshakespeare-pretraining",
+        "examples/reproductions/information-bottleneck-figure3": "dafb8339-a932-4b10-b3b6-185fc53a5a4f",
+        "examples/reproductions/diffusion-reproducibility": "repro-diffusion-same-init-different-seed",
+        "examples/reproductions/random-label-memorization-figure1a": "repro-random-label-memorization-fig1a",
+        "examples/reproductions/linear-mode-connectivity": "repro-linear-mode-connectivity-cifar10",
+        "examples/reproductions/Neural_Mechanics": "b15a6036-0e38-4f8f-84ba-8b763c408dc9",
+        "examples/reproductions/in-context-associative-recall": "5d1a2ab4-825d-4251-8a5a-d7b83b42c1d7",
+    }
+    for locale_root, link_label in (("en/0.1.0", "Open template ↗"), ("zh/0.1.0", "在线打开模板 ↗")):
+        for route, online_template_id in template_link_routes.items():
+            html = (site / locale_root / route / "index.html").read_text()
+            assert 'class="cr-template-link"' in html
+            assert f"templateId={online_template_id}" in html
+            assert link_label in html
+
     forbidden_screenshot_hashes = {
         "afed5be9d3cc79c3b9ede8f988b3d73c52e8f1813f5d629d51a4a3da9a94c238",
         "5b780832a1dcb49efdea3aa224516473707f688bf19cd3d87d2ce48887f3d541",

diff --git a/tests/test_docs_i18n.py b/tests/test_docs_i18n.py
@@ -157,6 +157,7 @@ def test_page_context_injects_localized_ui(
         "doc_type_reproduction",
         "doc_status_stable_core",
         "doc_status_phenomenon",
+        "open_template",
         "github_repo_aria_label",
         "version_switch_aria_label",
         "language_switch_label",
@@ -169,9 +170,11 @@ def test_page_context_injects_localized_ui(
     if language == "zh_CN":
         assert context["cr_ui"]["search_placeholder"] == "搜索文档"
         assert context["cr_ui"]["language_switch_label"] == "EN"
+        assert context["cr_ui"]["open_template"] == "在线打开模板 ↗"
     else:
         assert context["cr_ui"]["search_placeholder"] == "Search the docs"
         assert context["cr_ui"]["language_switch_label"] == "中文"
+        assert context["cr_ui"]["open_template"] == "Open template ↗"
     assert "%(query)s" in context["cr_ui"]["search_no_results"]
     assert context["alternate_language_label"] == context["cr_ui"]["language_switch_label"]
     assert context["current_docs_version"] == "v0.1.0"