What is the PyTorch installation interactive grid called and how do I make my own?

sgbaird: <p>I’ve really enjoyed using the interactive grid selection on the <a href="https://pytorch.org/" rel="noopener nofollow ugc">PyTorch installation page</a>, and for a while I’ve wanted to do something similar to this <a href="https://github.com/facebook/Ax/issues/1479" rel="noopener nofollow ugc">on a separate project</a>.<br>
<div class="lightbox-wrapper"><a class="lightbox" href="https://discuss.pytorch.org/uploads/default/original/3X/1/e/1e618fdb0a4e62b454e28e6f73db2e7afc7765ff.png" data-download-href="https://discuss.pytorch.org/uploads/default/1e618fdb0a4e62b454e28e6f73db2e7afc7765ff" title="image"><img src="https://discuss.pytorch.org/uploads/default/optimized/3X/1/e/1e618fdb0a4e62b454e28e6f73db2e7afc7765ff_2_690x481.png" alt="image" data-base62-sha1="4kLlFQQWBufhT7ldTrTPA0zIZ31" width="690" height="481" srcset="https://discuss.pytorch.org/uploads/default/optimized/3X/1/e/1e618fdb0a4e62b454e28e6f73db2e7afc7765ff_2_690x481.png, https://discuss.pytorch.org/uploads/default/optimized/3X/1/e/1e618fdb0a4e62b454e28e6f73db2e7afc7765ff_2_1035x721.png 1.5x, https://discuss.pytorch.org/uploads/default/original/3X/1/e/1e618fdb0a4e62b454e28e6f73db2e7afc7765ff.png 2x" data-dominant-color="F1E1DF"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1116×779 65.7 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p>
<p>I’ve been searching online and playing around using HTML “inspect”. From what I can tell, each of the buttons are contained in <code>row</code>-s inside of a <code>container</code>. When one of the buttons is clicked, the following three network events (Javascript functions?) are triggered:<br>
<div class="lightbox-wrapper"><a class="lightbox" href="https://discuss.pytorch.org/uploads/default/original/3X/d/b/db2cb126fe53108f0ff9e68f9d88e0c412bdac3f.png" data-download-href="https://discuss.pytorch.org/uploads/default/db2cb126fe53108f0ff9e68f9d88e0c412bdac3f" title="image"><img src="https://discuss.pytorch.org/uploads/default/original/3X/d/b/db2cb126fe53108f0ff9e68f9d88e0c412bdac3f.png" alt="image" data-base62-sha1="vgUjJ9PgAfO90OAa6lFZcCxw0ij" width="690" height="345" data-dominant-color="EDEFF0"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">852×426 25.8 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div><br>
<code>analytics.js</code><br>
<code>fbevents.js</code><br>
<code>analytics.js</code></p>
<p>Taking a look at the payload for the <code>fbevents.js</code> event, it seems like a GET request that has the <code>cd[target]:</code> corresponding to the button that was clicked and it’s row heading (e.g., <code>cd[target]: Your OS: Linux</code>).</p>
<pre><code class="lang-auto">id: 243028289693773
ev: Quick Start Module - Local Install
dl: https://pytorch.org/
rl: https://www.google.com/
if: false
ts: 1677705739419
cd[target]: Your OS: Linux
sw: 1397
sh: 786
v: 2.9.97
r: stable
ec: 4
o: 30
fbp: fb.1.1675910707543.1834767952
it: 1677705336651
coo: false
rqm: GET
</code></pre>
<p>As the buttons are clicked, the string in the <code>command-container</code> is changed:</p>
<pre data-code-wrap="html"><code class="lang-html">&lt;div class="row"&gt;
  &lt;div class="col-md-3 headings"&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text"&gt;PyTorch Build&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text os-text"&gt;Your OS&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text"&gt;Package&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text"&gt;Language&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text"&gt;Compute Platform&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block command-block"&gt;
      &lt;div class="option-text command-text"&gt;Run this Command:&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="col-md-9"&gt;
    &lt;div class="row ptbuild"&gt;
      &lt;div class="col-md-12 title-block mobile-heading"&gt;
        &lt;div class="option-text"&gt;PyTorch Build&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 option block version" id="stable"&gt;
        &lt;div class="option-text"&gt;Stable (1.13.1)&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 option block version selected" id="preview"&gt;
        &lt;div class="option-text"&gt;Preview (Nightly)&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row os"&gt;
      &lt;div class="col-md-12 title-block mobile-heading"&gt;
        &lt;div class="option-text"&gt;Your OS&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 option block selected" id="linux"&gt;
        &lt;div class="option-text"&gt;Linux&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 option block" id="macos"&gt;
        &lt;div class="option-text"&gt;Mac&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4 option block" id="windows"&gt;
        &lt;div class="option-text"&gt;Windows&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row package"&gt;
      &lt;div class="col-md-12 title-block mobile-heading"&gt;
        &lt;div class="option-text"&gt;Package&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block selected" id="conda"&gt;
        &lt;div class="option-text"&gt;Conda&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block" id="pip"&gt;
        &lt;div class="option-text"&gt;Pip&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block" id="libtorch"&gt;
        &lt;div class="option-text"&gt;LibTorch&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block" id="source"&gt;
        &lt;div class="option-text"&gt;Source&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row language"&gt;
      &lt;div class="col-md-12 title-block mobile-heading"&gt;
        &lt;div class="option-text"&gt;Language&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 option block version selected" id="python"&gt;
        &lt;div class="option-text"&gt;Python&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6 option block" id="cplusplus"&gt;
        &lt;div class="option-text"&gt;C++ / Java&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row cuda"&gt;
      &lt;div class="col-md-12 title-block mobile-heading"&gt;
        &lt;div class="option-text"&gt;Compute Platform&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block version selected" id="cuda.x"&gt;
        &lt;div class="option-text"&gt;CUDA 11.7&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block version" id="cuda.y"&gt;
        &lt;div class="option-text"&gt;CUDA 11.8&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block version" id="rocm5.x" style=""&gt;
        &lt;div class="option-text"&gt;ROCm 5.4.2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 option block version" id="accnone"&gt;
        &lt;div class="option-text"&gt;CPU&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-12 title-block command-mobile-heading"&gt;
        &lt;div class="option-text"&gt;Run this Command:&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="command-container"&gt;
        &lt;div class="col-md-12" id="command"&gt;&lt;pre&gt;conda install pytorch torchvision torchaudio pytorch-cuda=11.7 -c pytorch-nightly -c nvidia&lt;/pre&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
<p>i.e.,</p>
<pre data-code-wrap="html"><code class="lang-html">      &lt;div class="command-container"&gt;
        &lt;div class="col-md-12" id="command"&gt;&lt;pre&gt;conda install pytorch torchvision torchaudio pytorch-cuda=11.7 -c pytorch-nightly -c nvidia&lt;/pre&gt;&lt;/div&gt;
      &lt;/div&gt;
</code></pre>
<p>I had trouble finding where the PyTorch website gets generated (e.g., looking through the <code>.ci</code> and <code>.github</code> folders at <code>https://github.com/pytorch/pytorch</code>, assuming that code for that is publicly available).</p>
<p><strong>Any thoughts/suggestions on how to get this implemented or alternatives?</strong> If someone has the appropriate language to describe this or some references, it would help a lot.</p>
<p>EDIT: Some extra resources during my search:</p>
<ul>
<li><a href="https://www.freecodecamp.org/news/convert-html-table-to-dynamic-javascript-data-grid/" class="inline-onebox" rel="noopener nofollow ugc">How to Convert a Static HTML Table to a Dynamic JavaScript Data Grid</a></li>
<li><a href="https://docs.oracle.com/en/database/oracle/apex/22.1/aexjs/interactiveGrid.html" class="inline-onebox" rel="noopener nofollow ugc">JSDoc: Widget: interactiveGrid</a></li>
<li><a href="https://edu.gcfglobal.org/en/basic-html/interactive-elements-in-html/1/" class="inline-onebox" rel="noopener nofollow ugc">Basic HTML: Interactive Elements in HTML</a></li>
<li><a href="https://stackoverflow.com/questions/10671174/changing-button-text-onclick" class="inline-onebox" rel="noopener nofollow ugc">javascript - Changing button text onclick - Stack Overflow</a></li>
<li><a href="https://stackoverflow.com/questions/22574656/how-to-display-text-using-if-else" class="inline-onebox" rel="noopener nofollow ugc">javascript - How to display text using if else - Stack Overflow</a></li>
<li><a href="https://stackoverflow.com/questions/43254861/exporting-ipywidgets-to-a-website" class="inline-onebox" rel="noopener nofollow ugc">javascript - Exporting ipywidgets to a website - Stack Overflow</a></li>
<li><a href="https://ipywidgets.readthedocs.io/en/latest/embedding.html#python-interface" class="inline-onebox" rel="noopener nofollow ugc">Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.1.1 documentation</a></li>
<li><a href="https://www.google.com/search?q=html+class+%22class%3Dcommand-container%22" class="inline-onebox" rel="noopener nofollow ugc">html class "class=command-container" - Google Search</a><br>
<a href="https://help.grapecity.com/spread/SpreadViews/tutorial-Adding%20a%20Column%20Tool%20Panel.html" class="inline-onebox" rel="noopener nofollow ugc">Spread.Views Documentation</a></li>
</ul>

ptrblck: <p>I’m not a web developer and just took one course while I was at the university, so I won’t be able to exactly tell you which (new) JS framework was used, but <a href="https://github.com/pytorch/pytorch.github.io/blob/site/_get_started/get-started-locally.md">this</a> seems to be the “Get Started” page, which then points to some <a href="https://github.com/pytorch/pytorch.github.io/tree/site/assets">assets</a>.<br>
The <a href="https://github.com/pytorch/pytorch.github.io/blob/site/assets/quick-start-module.js"><code>quick-start-module.js</code></a> seems to contain the JS code for the actual menu.</p>
<p>From the <a href="https://github.com/pytorch/pytorch.github.io">README</a> of the repo it seems that Jekyll and Bootstrap were used.</p>

sgbaird: <p><a class="mention" href="/u/ptrblck">@ptrblck</a> This is a great starting point for me. Thank you! <a href="https://github.com/search?q=repo%3Apytorch%2Fpytorch.github.io%20quick_start_local.html&amp;type=code" rel="noopener nofollow ugc">Searching through the repo</a>, I was also able to find <a href="https://github.com/pytorch/pytorch.github.io/tree/site/.github/workflows" rel="noopener nofollow ugc">some GitHub actions workflows</a> for updating and validating the quick start module which calls <a href="https://github.com/pytorch/pytorch.github.io/blob/site/scripts/gen_quick_start_module.py" rel="noopener nofollow ugc">scripts/gen_quick_start_module.py</a>. Taking a look at the docstring there:</p>
<blockquote>
<p>Generates quick start module for <a href="https://pytorch.org/get-started/locally/" class="inline-onebox" rel="noopener nofollow ugc">Start Locally | PyTorch</a> page<br>
If called from <code>update-quick-start-module.yml</code> workflow (<code>--autogenerate</code> parameter set)<br>
Will output new <code>quick-start-module.js</code>, and new <code>published_version.json</code> file<br>
based on the current release matrix.<br>
If called standalone will generate <code>quick-start-module.js</code> from existing<br>
<code>published_version.json</code> file</p>
</blockquote>
<p>It seems that I may not need to deal with Javascript directly.</p>
<p>The first step might be fork the repo, follow the <a href="https://github.com/pytorch/pytorch.github.io#setup" rel="noopener nofollow ugc">setup instructions</a>, <a href="https://github.com/pytorch/pytorch.github.io#local-development" rel="noopener nofollow ugc">run the website locally</a>, and gradually piece out / adapt the functionality to my other use-case.</p>
<p>This looks lengthy, but doable to me!</p>

sgbaird: <p>A friend got back to me with the following:</p>
<blockquote>
<p>If you’re looking for some place to start maybe look into Bootstrap styling. I asked ChatGPT for a mockup of <a href="https://getbootstrap.com/docs/5.3/components/button-group/#checkbox-and-radio-button-groups" rel="noopener nofollow ugc">radio buttons</a> being used in <a href="https://getbootstrap.com/docs/5.3/components/button-group/#checkbox-and-radio-button-groups" rel="noopener nofollow ugc">forms</a> to give the user something they could copy to clipboard</p>
</blockquote>
<p>I think what I will probably do is take a “sculpting” approach where I chisel away until I get down to its core functionality. This might be tough if everything’s a spiderweb, but I think it would be pretty useful to get down to a MWE for this (including both the interface and the unit tests under the hood that lead to certain configurations being crossed out if they don’t pass).</p>

sgbaird: <p>This post goes through <a href="https://discuss.pytorch.org/t/what-is-the-pytorch-installation-interactive-grid-called-and-how-do-i-make-my-own/173835/5#github-workflows-and-install-matrix-generation-1">the GitHub workflows and install matrix generation step</a>, dives into <a href="https://discuss.pytorch.org/t/what-is-the-pytorch-installation-interactive-grid-called-and-how-do-i-make-my-own/173835/5#javascript-2">the Javascript template</a>, and concludes with <a href="https://discuss.pytorch.org/t/what-is-the-pytorch-installation-interactive-grid-called-and-how-do-i-make-my-own/173835/5#html-2">the HTML template</a>.</p>
<h1><a name="github-workflows-and-install-matrix-generation-1" class="anchor" href="#github-workflows-and-install-matrix-generation-1"></a>GitHub Workflows and Install Matrix Generation</h1>
<p>On the PyTorch side (rather than the PyTorch website gh repo), this script <a href="https://github.com/pytorch/pytorch/blob/66d3729388b6dc2ae257d984765814a5d42e9060/.github/scripts/generate_binary_build_matrix.py" class="inline-onebox" rel="noopener nofollow ugc">pytorch/.github/scripts/generate_binary_build_matrix.py at 66d3729388b6dc2ae257d984765814a5d42e9060 · pytorch/pytorch · GitHub</a> seems to have an options lists, e.g.:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch/blob/66d3729388b6dc2ae257d984765814a5d42e9060/.github/scripts/generate_binary_build_matrix.py#L86">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch/blob/66d3729388b6dc2ae257d984765814a5d42e9060/.github/scripts/generate_binary_build_matrix.py#L86" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch/blob/66d3729388b6dc2ae257d984765814a5d42e9060/.github/scripts/generate_binary_build_matrix.py#L86" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch/blob/66d3729388b6dc2ae257d984765814a5d42e9060/.github/scripts/generate_binary_build_matrix.py#L86</a></h4>



    <pre class="onebox"><code class="lang-py">
      <ol class="start lines" start="76" style="counter-reset: li-counter 75 ;">
          <li>        for gpu_arch in ROCM_ARCHES</li>
          <li>    },</li>
          <li>    **{</li>
          <li>        (gpu_arch, CXX11_ABI): f"pytorch/libtorch-cxx11-builder:rocm{gpu_arch}"</li>
          <li>        for gpu_arch in ROCM_ARCHES</li>
          <li>    },</li>
          <li>    ("cpu", PRE_CXX11_ABI): "pytorch/manylinux-builder:cpu",</li>
          <li>    ("cpu", CXX11_ABI): "pytorch/libtorch-cxx11-builder:cpu",</li>
          <li>}</li>
          <li></li>
          <li class="selected">FULL_PYTHON_VERSIONS = ["3.8", "3.9", "3.10", "3.11"]</li>
          <li></li>
          <li></li>
          <li>def translate_desired_cuda(gpu_arch_type: str, gpu_arch_version: str) -&gt; str:</li>
          <li>    return {</li>
          <li>        "cpu": "cpu",</li>
          <li>        "cpu-aarch64": "cpu",</li>
          <li>        "cpu-cxx11-abi": "cpu-cxx11-abi",</li>
          <li>        "cuda": f"cu{gpu_arch_version.replace('.', '')}",</li>
          <li>        "rocm": f"rocm{gpu_arch_version}",</li>
          <li>    }.get(gpu_arch_type, gpu_arch_version)</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>This creates <code>.yml</code> workflow files via:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch/blob/main/.github/scripts/generate_ci_workflows.py">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch/blob/main/.github/scripts/generate_ci_workflows.py" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch/blob/main/.github/scripts/generate_ci_workflows.py" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch/blob/main/.github/scripts/generate_ci_workflows.py</a></h4>


      <pre><code class="lang-py">#!/usr/bin/env python3

import os
import sys
from dataclasses import asdict, dataclass, field
from pathlib import Path
from typing import Dict, Iterable, List, Literal, Set

import generate_binary_build_matrix  # type: ignore[import]

import jinja2
from typing_extensions import TypedDict  # Python 3.11+

Arch = Literal["windows", "linux", "macos"]

GITHUB_DIR = Path(__file__).resolve().parent.parent

LABEL_CIFLOW_TRUNK = "ciflow/trunk"
LABEL_CIFLOW_UNSTABLE = "ciflow/unstable"
LABEL_CIFLOW_BINARIES = "ciflow/binaries"
</code></pre>



  This file has been truncated. <a href="https://github.com/pytorch/pytorch/blob/main/.github/scripts/generate_ci_workflows.py" target="_blank" rel="noopener nofollow ugc">show original</a>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>
<sup>(Aside: links related to `generate_ci_workflows.py`: https://github.com/pytorch/pytorch/issues/74480 and https://github.com/search?q=repo%3Apytorch%2Fpytorch%20generate_ci_workflows.py&amp;type=code)</sup>
</p>
<p>On <a href="http://github.com/pytorch/pytorch.github.io" class="inline-onebox" rel="noopener nofollow ugc">GitHub - pytorch/pytorch.github.io: The website for PyTorch</a> (rather than <a href="https://github.com/pytorch/pytorch" class="inline-onebox" rel="noopener nofollow ugc">GitHub - pytorch/pytorch: Tensors and Dynamic neural networks in Python with strong GPU acceleration</a>), it runs individually for MacOS, Linux, and Windows (both nightly and release versions) via GitHub actions:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/.github/workflows/update-quick-start-module.yml#L22-L61">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/.github/workflows/update-quick-start-module.yml#L22-L61" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/.github/workflows/update-quick-start-module.yml#L22-L61" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/.github/workflows/update-quick-start-module.yml#L22-L61</a></h4>



    <pre class="onebox"><code class="lang-yml">
      <ol class="start lines" start="22" style="counter-reset: li-counter 21 ;">
          <li>jobs:</li>
          <li>  linux-nightly-matrix:</li>
          <li>    uses: pytorch/test-infra/.github/workflows/generate_binary_build_matrix.yml@main</li>
          <li>    with:</li>
          <li>      package-type: all</li>
          <li>      os: linux</li>
          <li>      channel: "nightly"</li>
          <li>  windows-nightly-matrix:</li>
          <li>    uses: pytorch/test-infra/.github/workflows/generate_binary_build_matrix.yml@main</li>
          <li>    with:</li>
          <li>      package-type: all</li>
          <li>      os: windows</li>
          <li>      channel: "nightly"</li>
          <li>  macos-nightly-matrix:</li>
          <li>    uses: pytorch/test-infra/.github/workflows/generate_binary_build_matrix.yml@main</li>
          <li>    with:</li>
          <li>      package-type: all</li>
          <li>      os: macos</li>
          <li>      channel: "nightly"</li>
          <li>  linux-release-matrix:</li>
      </ol>
    </code></pre>


  This file has been truncated. <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/.github/workflows/update-quick-start-module.yml#L22-L61" target="_blank" rel="noopener nofollow ugc">show original</a>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>Going back to how the javascript gets generated, I see:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218C16-L218C48">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218C16-L218C48" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218C16-L218C48" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218C16-L218C48</a></h4>



    <pre class="onebox"><code class="lang-py">
      <ol class="start lines" start="218" style="counter-reset: li-counter 217 ;">
          <li>template = read_quick_start_module_template()</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>which is defined at:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L83-L85">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L83-L85" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L83-L85" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L83-L85</a></h4>



    <pre class="onebox"><code class="lang-py">
      <ol class="start lines" start="83" style="counter-reset: li-counter 82 ;">
          <li>def read_quick_start_module_template():</li>
          <li>    with open(BASE_DIR / "_includes" / "quick-start-module.js") as fptr:</li>
          <li>        return fptr.read()</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>My takeaway is that it comes back to <a href="https://github.com/pytorch/pytorch.github.io/blob/site/assets/quick-start-module.js" class="inline-onebox" rel="noopener nofollow ugc">pytorch.github.io/assets/quick-start-module.js at site · pytorch/pytorch.github.io · GitHub</a> (linked above by <a class="mention" href="/u/ptrblck">@ptrblck</a>), where the template file for this is stored at:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick-start-module.js">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick-start-module.js" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick-start-module.js" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/site/_includes/quick-start-module.js</a></h4>


      <pre><code class="lang-js">// Keys are Substrings as diplayed by navigator.platform
var supportedOperatingSystems = new Map([
  ['linux', 'linux'],
  ['mac', 'macos'],
  ['win', 'windows'],
]);

var archInfoMap = new Map([
  ['cuda', {title: "CUDA", platforms: new Set(['linux', 'windows'])}],
  ['rocm', {title: "ROCm", platforms: new Set(['linux'])}],
  ['accnone', {title: "CPU", platforms: new Set(['linux', 'macos', 'windows'])}]
]);

let version_map={{ ACC ARCH MAP }}
let stable_version={{ VERSION }};

var default_selected_os = getAnchorSelectedOS() || getDefaultSelectedOS();
var opts = {
  cuda: getPreferredCuda(default_selected_os),
  os: default_selected_os,
</code></pre>



  This file has been truncated. <a href="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick-start-module.js" target="_blank" rel="noopener nofollow ugc">show original</a>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>I realize I do actually need to understand the Javascript here in order to adapt it. In other words, the JS code isn’t autogenerated, it just gets slightly modified from the template (<code>_includes/quick-start-module.js</code> directory, not <code>assets/quick-start-module.js</code> directory) linked above:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218-L222">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218-L222" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218-L222" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218-L222</a></h4>



    <pre class="onebox"><code class="lang-py">
      <ol class="start lines" start="218" style="counter-reset: li-counter 217 ;">
          <li>template = read_quick_start_module_template()</li>
          <li>versions_str = json.dumps(gen_install_matrix(versions))</li>
          <li>template = template.replace("{{ installMatrix }}", versions_str)</li>
          <li>template = template.replace("{{ VERSION }}", f"\"Stable ({versions['latest_stable']})\"")</li>
          <li>print(template.replace("{{ ACC ARCH MAP }}", json.dumps(acc_arch_ver_map)))</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>The diff between these two files is interesting:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://www.diffchecker.com/9UFTzNRI/">
  <header class="source">

      <a href="https://www.diffchecker.com/9UFTzNRI/" target="_blank" rel="noopener nofollow ugc">diffchecker.com</a>
  </header>

  <article class="onebox-body">
    <div class="aspect-image" style="--aspect-ratio:690/344;"><img src="https://www.diffchecker.com/static/images/fb-image.png" class="thumbnail" width="" height=""></div>

<h3><a href="https://www.diffchecker.com/9UFTzNRI/" target="_blank" rel="noopener nofollow ugc">quick-start-module.js assets vs. _include - Diff Checker</a></h3>

  <p>quick-start-module.js assets vs. _include - // Keys are Substrings as diplayed by navigator.platform
var supportedOperatingSystems = new Map([</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p><div class="lightbox-wrapper"><a class="lightbox" href="https://discuss.pytorch.org/uploads/default/original/3X/e/b/ebe5af01332b8edb90c4d59ad2cade57095adaa5.png" data-download-href="https://discuss.pytorch.org/uploads/default/ebe5af01332b8edb90c4d59ad2cade57095adaa5" title="image"><img src="https://discuss.pytorch.org/uploads/default/optimized/3X/e/b/ebe5af01332b8edb90c4d59ad2cade57095adaa5_2_690x116.png" alt="image" data-base62-sha1="xEQiCPEt6CNBW5SJvhDwUshWSt7" width="690" height="116" srcset="https://discuss.pytorch.org/uploads/default/optimized/3X/e/b/ebe5af01332b8edb90c4d59ad2cade57095adaa5_2_690x116.png, https://discuss.pytorch.org/uploads/default/optimized/3X/e/b/ebe5af01332b8edb90c4d59ad2cade57095adaa5_2_1035x174.png 1.5x, https://discuss.pytorch.org/uploads/default/optimized/3X/e/b/ebe5af01332b8edb90c4d59ad2cade57095adaa5_2_1380x232.png 2x" data-dominant-color="E3D6C8"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1437×243 28.8 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p>
<p>and (cropped):<br>
<div class="lightbox-wrapper"><a class="lightbox" href="https://discuss.pytorch.org/uploads/default/original/3X/0/c/0c2d973b6214dd1365e628ce0287c8c462a7bd69.png" data-download-href="https://discuss.pytorch.org/uploads/default/0c2d973b6214dd1365e628ce0287c8c462a7bd69" title="image"><img src="https://discuss.pytorch.org/uploads/default/optimized/3X/0/c/0c2d973b6214dd1365e628ce0287c8c462a7bd69_2_690x345.png" alt="image" data-base62-sha1="1JJpfXdSoxBx5V7U4O6SEy5JHkZ" width="690" height="345" srcset="https://discuss.pytorch.org/uploads/default/optimized/3X/0/c/0c2d973b6214dd1365e628ce0287c8c462a7bd69_2_690x345.png, https://discuss.pytorch.org/uploads/default/optimized/3X/0/c/0c2d973b6214dd1365e628ce0287c8c462a7bd69_2_1035x517.png 1.5x, https://discuss.pytorch.org/uploads/default/optimized/3X/0/c/0c2d973b6214dd1365e628ce0287c8c462a7bd69_2_1380x690.png 2x" data-dominant-color="DECCBC"><div class="meta"><svg class="fa d-icon d-icon-far-image svg-icon" aria-hidden="true"><use href="#far-image"></use></svg><span class="filename">image</span><span class="informations">1510×755 111 KB</span><svg class="fa d-icon d-icon-discourse-expand svg-icon" aria-hidden="true"><use href="#discourse-expand"></use></svg></div></a></div></p>
<h1><a name="javascript-2" class="anchor" href="#javascript-2"></a>Javascript</h1>
<p>Taking a closer look at the JS file, the variables and click functions for each of the rows in the installation grid are given in:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L32-L52">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L32-L52" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L32-L52" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L32-L52</a></h4>



    <pre class="onebox"><code class="lang-js">
      <ol class="start lines" start="32" style="counter-reset: li-counter 31 ;">
          <li>var os = $(".os &gt; .option");</li>
          <li>var package = $(".package &gt; .option");</li>
          <li>var language = $(".language &gt; .option");</li>
          <li>var cuda = $(".cuda &gt; .option");</li>
          <li>var ptbuild = $(".ptbuild &gt; .option");</li>
          <li></li>
          <li>os.on("click", function() {</li>
          <li>  selectedOption(os, this, "os");</li>
          <li>});</li>
          <li>package.on("click", function() {</li>
          <li>  selectedOption(package, this, "pm");</li>
          <li>});</li>
          <li>language.on("click", function() {</li>
          <li>  selectedOption(language, this, "language");</li>
          <li>});</li>
          <li>cuda.on("click", function() {</li>
          <li>  selectedOption(cuda, this, "cuda");</li>
          <li>});</li>
          <li>ptbuild.on("click", function() {</li>
          <li>  selectedOption(ptbuild, this, "ptbuild")</li>
          <li>});</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>The functions are wrappers to <code>selectedOption()</code>:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L155-L200">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L155-L200" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L155-L200" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L155-L200</a></h4>



    <pre class="onebox"><code class="lang-js">
      <ol class="start lines" start="155" style="counter-reset: li-counter 154 ;">
          <li>function selectedOption(option, selection, category) {</li>
          <li>  $(option).removeClass("selected");</li>
          <li>  $(selection).addClass("selected");</li>
          <li>  opts[category] = selection.id;</li>
          <li>  if (category === "pm") {</li>
          <li>    var elements = document.getElementsByClassName("language")[0].children;</li>
          <li>    if (selection.id !== "libtorch" &amp;&amp; elements["cplusplus"].classList.contains("selected")) {</li>
          <li>      $(elements["cplusplus"]).removeClass("selected");</li>
          <li>      $(elements["python"]).addClass("selected");</li>
          <li>      opts["language"] = "python";</li>
          <li>    } else if (selection.id == "libtorch") {</li>
          <li>      for (var i = 0; i &lt; elements.length; i++) {</li>
          <li>        if (elements[i].id === "cplusplus") {</li>
          <li>          $(elements[i]).addClass("selected");</li>
          <li>          opts["language"] = "cplusplus";</li>
          <li>        } else {</li>
          <li>          $(elements[i]).removeClass("selected");</li>
          <li>        }</li>
          <li>      }</li>
          <li>    }</li>
      </ol>
    </code></pre>


  This file has been truncated. <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L155-L200" target="_blank" rel="noopener nofollow ugc">show original</a>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>Importantly, this depends on <code>commandMessage()</code>:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L194">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L194" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L194" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L194</a></h4>



    <pre class="onebox"><code class="lang-js">
      <ol class="start lines" start="184" style="counter-reset: li-counter 183 ;">
          <li>          $(elements[i]).addClass("selected");</li>
          <li>          opts["pm"] = "libtorch";</li>
          <li>        } else {</li>
          <li>          $(elements[i]).removeClass("selected");</li>
          <li>        }</li>
          <li>      }</li>
          <li>    }</li>
          <li>  } else if (category == "ptbuild") {</li>
          <li>    changeVersion(opts.ptbuild);</li>
          <li>  }</li>
          <li class="selected">  commandMessage(buildMatcher());</li>
          <li>  if (category === "os") {</li>
          <li>    disableUnsupportedPlatforms(opts.os);</li>
          <li>    display(opts.os, 'installation', 'os');</li>
          <li>  }</li>
          <li>  changeAccNoneName(opts.os);</li>
          <li>}</li>
          <li></li>
          <li>function display(selection, id, category) {</li>
          <li>  var container = document.getElementById(id);</li>
          <li>  // Check if there's a container to display the selection</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>given in:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L250-L262">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L250-L262" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L250-L262" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L250-L262</a></h4>



    <pre class="onebox"><code class="lang-js">
      <ol class="start lines" start="250" style="counter-reset: li-counter 249 ;">
          <li>function commandMessage(key) {</li>
          <li>  var object = {"preview,pip,linux,accnone,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu", "preview,pip,linux,cuda.x,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cu118", "preview,pip,linux,cuda.y,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cu121", "preview,pip,linux,rocm5.x,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/rocm5.5", "preview,conda,linux,cuda.x,python": "conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch-nightly -c nvidia", "preview,conda,linux,cuda.y,python": "conda install pytorch torchvision torchaudio pytorch-cuda=12.1 -c pytorch-nightly -c nvidia", "preview,conda,linux,rocm5.x,python": "&lt;b&gt;NOTE:&lt;/b&gt; Conda packages are not currently available for ROCm, please use pip instead&lt;br /&gt;", "preview,conda,linux,accnone,python": "conda install pytorch torchvision torchaudio cpuonly -c pytorch-nightly", "preview,libtorch,linux,accnone,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-cxx11-abi-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-cxx11-abi-shared-with-deps-latest.zip&lt;/a&gt;", "preview,libtorch,linux,cuda.x,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu118/libtorch-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu118/libtorch-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu118/libtorch-cxx11-abi-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu118/libtorch-cxx11-abi-shared-with-deps-latest.zip&lt;/a&gt;", "preview,libtorch,linux,cuda.y,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu121/libtorch-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu121/libtorch-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu121/libtorch-cxx11-abi-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu121/libtorch-cxx11-abi-shared-with-deps-latest.zip&lt;/a&gt;", "preview,libtorch,linux,rocm5.x,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/rocm5.5/libtorch-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/rocm5.5/libtorch-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/rocm5.5/libtorch-cxx11-abi-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/rocm5.5/libtorch-cxx11-abi-shared-with-deps-latest.zip&lt;/a&gt;", "preview,pip,macos,cuda.x,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu", "preview,pip,macos,cuda.y,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu", "preview,pip,macos,rocm5.x,python": "# ROCm is not available on MacOS, please use default package&lt;br /&gt;pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu", "preview,pip,macos,accnone,python": "# MPS acceleration is available on MacOS 12.3+&lt;br /&gt;pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu", "preview,conda,macos,cuda.x,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;conda install pytorch-nightly::pytorch torchvision torchaudio -c pytorch-nightly", "preview,conda,macos,cuda.y,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;conda install pytorch-nightly::pytorch torchvision torchaudio -c pytorch-nightly", "preview,conda,macos,rocm5.x,python": "# ROCm is not available on MacOS, please use default package&lt;br /&gt;conda install pytorch-nightly::pytorch torchvision torchaudio -c pytorch-nightly", "preview,conda,macos,accnone,python": "# MPS acceleration is available on MacOS 12.3+&lt;br /&gt;conda install pytorch-nightly::pytorch torchvision torchaudio -c pytorch-nightly", "preview,libtorch,macos,accnone,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip&lt;/a&gt;", "preview,libtorch,macos,cuda.x,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip&lt;/a&gt;", "preview,libtorch,macos,cuda.y,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip&lt;/a&gt;", "preview,libtorch,macos,rocm5.x,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-macos-latest.zip&lt;/a&gt;", "preview,pip,windows,accnone,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cpu", "preview,pip,windows,cuda.x,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cu118", "preview,pip,windows,cuda.y,python": "pip3 install --pre torch torchvision torchaudio --index-url https://download.pytorch.org/whl/nightly/cu121", "preview,pip,windows,rocm5.x,python": "&lt;b&gt;NOTE:&lt;/b&gt; ROCm is not available on Windows", "preview,conda,windows,cuda.x,python": "conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch-nightly -c nvidia", "preview,conda,windows,cuda.y,python": "conda install pytorch torchvision torchaudio pytorch-cuda=12.1 -c pytorch-nightly -c nvidia", "preview,conda,windows,rocm5.x,python": "&lt;b&gt;NOTE:&lt;/b&gt; ROCm is not available on Windows", "preview,conda,windows,accnone,python": "conda install pytorch torchvision torchaudio cpuonly -c pytorch-nightly", "preview,libtorch,windows,accnone,cplusplus": "Download here (Release version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-win-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-win-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (Debug version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cpu/libtorch-win-shared-with-deps-debug-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cpu/libtorch-win-shared-with-deps-debug-latest.zip&lt;/a&gt;", "preview,libtorch,windows,cuda.x,cplusplus": "Download here (Release version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu118/libtorch-win-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu118/libtorch-win-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (Debug version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu118/libtorch-win-shared-with-deps-debug-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu118/libtorch-win-shared-with-deps-debug-latest.zip&lt;/a&gt;", "preview,libtorch,windows,cuda.y,cplusplus": "Download here (Release version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu121/libtorch-win-shared-with-deps-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu121/libtorch-win-shared-with-deps-latest.zip&lt;/a&gt;&lt;br /&gt;Download here (Debug version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/nightly/cu121/libtorch-win-shared-with-deps-debug-latest.zip'&gt;https://download.pytorch.org/libtorch/nightly/cu121/libtorch-win-shared-with-deps-debug-latest.zip&lt;/a&gt;", "preview,libtorch,windows,rocm5.x,cplusplus": "&lt;b&gt;NOTE:&lt;/b&gt; ROCm is not available on Windows", "stable,pip,linux,accnone,python": "pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cpu", "stable,pip,linux,cuda.x,python": "pip3 install torch torchvision torchaudio", "stable,pip,linux,cuda.y,python": "pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118", "stable,pip,linux,rocm5.x,python": "pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/rocm5.4.2", "stable,conda,linux,cuda.x,python": "conda install pytorch torchvision torchaudio pytorch-cuda=11.7 -c pytorch -c nvidia", "stable,conda,linux,cuda.y,python": "conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch -c nvidia", "stable,conda,linux,rocm5.x,python": "&lt;b&gt;NOTE:&lt;/b&gt; Conda packages are not currently available for ROCm, please use pip instead&lt;br /&gt;", "stable,conda,linux,accnone,python": "conda install pytorch torchvision torchaudio cpuonly -c pytorch", "stable,libtorch,linux,accnone,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-shared-with-deps-2.0.1%2Bcpu.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-shared-with-deps-2.0.1%2Bcpu.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Bcpu.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Bcpu.zip&lt;/a&gt;", "stable,libtorch,linux,cuda.x,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu117/libtorch-shared-with-deps-2.0.1%2Bcu117.zip'&gt;https://download.pytorch.org/libtorch/cu117/libtorch-shared-with-deps-2.0.1%2Bcu117.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu117/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Bcu117.zip'&gt;https://download.pytorch.org/libtorch/cu117/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Bcu117.zip&lt;/a&gt;", "stable,libtorch,linux,cuda.y,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu118/libtorch-shared-with-deps-2.0.1%2Bcu118.zip'&gt;https://download.pytorch.org/libtorch/cu118/libtorch-shared-with-deps-2.0.1%2Bcu118.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu118/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Bcu118.zip'&gt;https://download.pytorch.org/libtorch/cu118/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Bcu118.zip&lt;/a&gt;", "stable,libtorch,linux,rocm5.x,cplusplus": "Download here (Pre-cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/rocm5.4.2/libtorch-shared-with-deps-2.0.1%2Brocm5.4.2.zip'&gt;https://download.pytorch.org/libtorch/rocm5.4.2/libtorch-shared-with-deps-2.0.1%2Brocm5.4.2.zip&lt;/a&gt;&lt;br /&gt;Download here (cxx11 ABI):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/rocm5.4.2/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Brocm5.4.2.zip'&gt;https://download.pytorch.org/libtorch/rocm5.4.2/libtorch-cxx11-abi-shared-with-deps-2.0.1%2Brocm5.4.2.zip&lt;/a&gt;", "stable,pip,macos,cuda.x,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;pip3 install torch torchvision torchaudio", "stable,pip,macos,cuda.y,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;pip3 install torch torchvision torchaudio", "stable,pip,macos,rocm5.x,python": "# ROCm is not available on MacOS, please use default package&lt;br /&gt;pip3 install torch torchvision torchaudio", "stable,pip,macos,accnone,python": "# MPS acceleration is available on MacOS 12.3+&lt;br /&gt;pip3 install torch torchvision torchaudio", "stable,conda,macos,cuda.x,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;conda install pytorch::pytorch torchvision torchaudio -c pytorch", "stable,conda,macos,cuda.y,python": "# CUDA is not available on MacOS, please use default package&lt;br /&gt;conda install pytorch::pytorch torchvision torchaudio -c pytorch", "stable,conda,macos,rocm5.x,python": "# ROCm is not available on MacOS, please use default package&lt;br /&gt;conda install pytorch::pytorch torchvision torchaudio -c pytorch", "stable,conda,macos,accnone,python": "# MPS acceleration is available on MacOS 12.3+&lt;br /&gt;conda install pytorch::pytorch torchvision torchaudio -c pytorch", "stable,libtorch,macos,accnone,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip&lt;/a&gt;", "stable,libtorch,macos,cuda.x,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip&lt;/a&gt;", "stable,libtorch,macos,cuda.y,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip&lt;/a&gt;", "stable,libtorch,macos,rocm5.x,cplusplus": "Download default libtorch here (ROCm and CUDA are not supported):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-macos-2.0.1.zip&lt;/a&gt;", "stable,pip,windows,accnone,python": "pip3 install torch torchvision torchaudio", "stable,pip,windows,cuda.x,python": "pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu117", "stable,pip,windows,cuda.y,python": "pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118", "stable,pip,windows,rocm5.x,python": "&lt;b&gt;NOTE:&lt;/b&gt; ROCm is not available on Windows", "stable,conda,windows,cuda.x,python": "conda install pytorch torchvision torchaudio pytorch-cuda=11.7 -c pytorch -c nvidia", "stable,conda,windows,cuda.y,python": "conda install pytorch torchvision torchaudio pytorch-cuda=11.8 -c pytorch -c nvidia", "stable,conda,windows,rocm5.x,python": "&lt;b&gt;NOTE:&lt;/b&gt; ROCm is not available on Windows", "stable,conda,windows,accnone,python": "conda install pytorch torchvision torchaudio cpuonly -c pytorch", "stable,libtorch,windows,accnone,cplusplus": "Download here (Release version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-win-shared-with-deps-2.0.1%2Bcpu.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-win-shared-with-deps-2.0.1%2Bcpu.zip&lt;/a&gt;&lt;br /&gt;Download here (Debug version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cpu/libtorch-win-shared-with-deps-debug-2.0.1%2Bcpu.zip'&gt;https://download.pytorch.org/libtorch/cpu/libtorch-win-shared-with-deps-debug-2.0.1%2Bcpu.zip&lt;/a&gt;", "stable,libtorch,windows,cuda.x,cplusplus": "Download here (Release version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu117/libtorch-win-shared-with-deps-2.0.1%2Bcu117.zip'&gt;https://download.pytorch.org/libtorch/cu117/libtorch-win-shared-with-deps-2.0.1%2Bcu117.zip&lt;/a&gt;&lt;br /&gt;Download here (Debug version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu117/libtorch-win-shared-with-deps-debug-2.0.1%2Bcu117.zip'&gt;https://download.pytorch.org/libtorch/cu117/libtorch-win-shared-with-deps-debug-2.0.1%2Bcu117.zip&lt;/a&gt;", "stable,libtorch,windows,cuda.y,cplusplus": "Download here (Release version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu118/libtorch-win-shared-with-deps-2.0.1%2Bcu118.zip'&gt;https://download.pytorch.org/libtorch/cu118/libtorch-win-shared-with-deps-2.0.1%2Bcu118.zip&lt;/a&gt;&lt;br /&gt;Download here (Debug version):&lt;br /&gt;&lt;a href='https://download.pytorch.org/libtorch/cu118/libtorch-win-shared-with-deps-debug-2.0.1%2Bcu118.zip'&gt;https://download.pytorch.org/libtorch/cu118/libtorch-win-shared-with-deps-debug-2.0.1%2Bcu118.zip&lt;/a&gt;", "stable,libtorch,windows,rocm5.x,cplusplus": "&lt;b&gt;NOTE:&lt;/b&gt; ROCm is not available on Windows"};</li>
          <li></li>
          <li>  if (!object.hasOwnProperty(key)) {</li>
          <li>    $("#command").html(</li>
          <li>      "&lt;pre&gt; # Follow instructions at this URL: https://github.com/pytorch/pytorch#from-source &lt;/pre&gt;"</li>
          <li>    );</li>
          <li>  } else if (key.indexOf("lts") == 0  &amp;&amp; key.indexOf('rocm') &lt; 0) {</li>
          <li>    $("#command").html("&lt;pre&gt;" + object[key] + "&lt;/pre&gt;");</li>
          <li>  } else {</li>
          <li>    $("#command").html("&lt;pre&gt;" + object[key] + "&lt;/pre&gt;");</li>
          <li>  }</li>
          <li>}</li>
      </ol>
    </code></pre>


  This file has been truncated. <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L250-L262" target="_blank" rel="noopener nofollow ugc">show original</a>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>where <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L251" rel="noopener nofollow ugc"><code>var object = {"preview,pip,linux,accnone,python": "pip3 install --pre torch ...", ...}</code></a> was modified from the template file line <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick-start-module.js#L251" rel="noopener nofollow ugc"><code>var object = {{ installMatrix }};</code></a> as described in <a href="https://discuss.pytorch.org/t/what-is-the-pytorch-installation-interactive-grid-called-and-how-do-i-make-my-own/173835/5">the reply preceding this one</a>.</p>
<p>Note the form of the line:<br>
<code>{"&lt;option1&gt;,&lt;option2&gt;,&lt;option3&gt;,&lt;option4&gt;,&lt;option5&gt;": "&lt;install command&gt;", ...}</code></p>
<p>I think it’s also worth mentioning <code>disableUnsupportedPlatforms(os)</code> which does the strike-through:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L106-L119">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L106-L119" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L106-L119" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L106-L119</a></h4>



    <pre class="onebox"><code class="lang-js">
      <ol class="start lines" start="106" style="counter-reset: li-counter 105 ;">
          <li>// Disable compute platform not supported on OS</li>
          <li>function disableUnsupportedPlatforms(os) {</li>
          <li>  for (const [arch_key, info] of archInfoMap) {</li>
          <li>    var elems = document.querySelectorAll('[id^="'+arch_key+'"]');</li>
          <li>    if (elems == null) {</li>
          <li>      console.log("Failed to find element for architecture " + arch_key);</li>
          <li>      return;</li>
          <li>    }</li>
          <li>    for (var i=0; i &lt; elems.length;i++) {</li>
          <li>      var supported = info.platforms.has(os);</li>
          <li>      elems[i].style.textDecoration = supported ? "" : "line-through";</li>
          <li>    }</li>
          <li>  }</li>
          <li>}</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<h1><a name="html-3" class="anchor" href="#html-3"></a>HTML</h1>
<p>In terms of the HTML templates located in the <code>_includes</code> directory:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L8">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L8" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L8" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L8</a></h4>



    <pre class="onebox"><code class="lang-html">
      <ol class="start lines" start="1" style="counter-reset: li-counter 0 ;">
          <li>&lt;div class="container-fluid quick-start-module quick-starts"&gt;</li>
          <li>  &lt;div class="container"&gt;</li>
          <li>    &lt;div class="row"&gt;</li>
          <li>      &lt;div class="col-md-8 start-locally-col"&gt;</li>
          <li></li>
          <li>        &lt;h3&gt;Install PyTorch&lt;/h3&gt;</li>
          <li></li>
          <li class="selected">        {% include quick_start_local.html %}</li>
          <li></li>
          <li>        &lt;a href="{{ site.baseurl }}/get-started/previous-versions" class="btn btn-lg with-right-arrow btn-white prev-versions-btn"&gt;</li>
          <li>          Previous versions of PyTorch</li>
          <li>        &lt;/a&gt;</li>
          <li>      &lt;/div&gt;</li>
          <li></li>
          <li>      &lt;div class="col-md-3 offset-md-1 cloud-options-col"&gt;</li>
          <li>        &lt;h3&gt;Quick Start With&lt;br /&gt;Cloud Partners&lt;/h3&gt;</li>
          <li></li>
          <li>        &lt;p&gt;Get up and running with PyTorch quickly through popular cloud platforms and machine learning services.&lt;/p&gt;</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>pulls from:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick_start_local.html">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick_start_local.html" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick_start_local.html" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/site/_includes/quick_start_local.html</a></h4>


      <pre><code class="lang-html">&lt;p&gt;Select your preferences and run the install command. Stable represents the most currently tested and supported version of PyTorch. This should
   be suitable for many users. Preview is available if you want the latest, not fully tested and supported, builds that are generated nightly.
   Please ensure that you have &lt;b&gt;met the prerequisites below (e.g., numpy)&lt;/b&gt;,  depending on your package manager. Anaconda is our recommended
   package manager since it installs all dependencies. You can also
  &lt;a href="{{ site.baseurl }}/get-started/previous-versions"&gt;install previous versions of PyTorch&lt;/a&gt;. Note that LibTorch is only available for C++.
&lt;/p&gt;

&lt;p&gt;&lt;b&gt;NOTE:&lt;/b&gt; Latest PyTorch requires Python 3.8 or later. For more details, see Python section below.&lt;/p&gt;

&lt;div class="row"&gt;
  &lt;div class="col-md-3 headings"&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text"&gt;PyTorch Build&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text os-text"&gt;Your OS&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-12 title-block"&gt;
      &lt;div class="option-text"&gt;Package&lt;/div&gt;
    &lt;/div&gt;
</code></pre>



  This file has been truncated. <a href="https://github.com/pytorch/pytorch.github.io/blob/site/_includes/quick_start_local.html" target="_blank" rel="noopener nofollow ugc">show original</a>

  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>To complete the circle, the HTML file uses the Javascript file in:</p>
<aside class="onebox githubblob" data-onebox-src="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L26">
  <header class="source">

      <a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L26" target="_blank" rel="noopener nofollow ugc">github.com</a>
  </header>

  <article class="onebox-body">
    <h4><a href="https://github.com/pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L26" target="_blank" rel="noopener nofollow ugc">pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L26</a></h4>



    <pre class="onebox"><code class="lang-html">
      <ol class="start lines" start="16" style="counter-reset: li-counter 15 ;">
          <li>        &lt;h3&gt;Quick Start With&lt;br /&gt;Cloud Partners&lt;/h3&gt;</li>
          <li></li>
          <li>        &lt;p&gt;Get up and running with PyTorch quickly through popular cloud platforms and machine learning services.&lt;/p&gt;</li>
          <li></li>
          <li>        {% include quick_start_cloud_options.html %}</li>
          <li>      &lt;/div&gt;</li>
          <li>    &lt;/div&gt;</li>
          <li>  &lt;/div&gt;</li>
          <li>&lt;/div&gt;</li>
          <li></li>
          <li class="selected">&lt;script src="{{ site.baseurl }}/assets/quick-start-module.js"&gt;&lt;/script&gt;</li>
      </ol>
    </code></pre>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>


MTHT: <p>I want to add my agreement that the install command generating widget in the PyTorch site is a beautiful piece of UI. It is intuitive and simplifies the CUDA install massively.  A huge lesson for NVIDIA here.  I am struck by the widget every time I see it.  Thank you.</p>