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

sgbaird · March 1, 2023, 9:40pm

I’ve really enjoyed using the interactive grid selection on the PyTorch installation page, and for a while I’ve wanted to do something similar to this on a separate project.

I’ve been searching online and playing around using HTML “inspect”. From what I can tell, each of the buttons are contained in row-s inside of a container. When one of the buttons is clicked, the following three network events (Javascript functions?) are triggered:

analytics.js
fbevents.js
analytics.js

Taking a look at the payload for the fbevents.js event, it seems like a GET request that has the cd[target]: corresponding to the button that was clicked and it’s row heading (e.g., cd[target]: Your OS: Linux).

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

As the buttons are clicked, the string in the command-container is changed:

<div class="row">
  <div class="col-md-3 headings">
    <div class="col-md-12 title-block">
      <div class="option-text">PyTorch Build</div>
    </div>
    <div class="col-md-12 title-block">
      <div class="option-text os-text">Your OS</div>
    </div>
    <div class="col-md-12 title-block">
      <div class="option-text">Package</div>
    </div>
    <div class="col-md-12 title-block">
      <div class="option-text">Language</div>
    </div>
    <div class="col-md-12 title-block">
      <div class="option-text">Compute Platform</div>
    </div>
    <div class="col-md-12 title-block command-block">
      <div class="option-text command-text">Run this Command:</div>
    </div>
  </div>

  <div class="col-md-9">
    <div class="row ptbuild">
      <div class="col-md-12 title-block mobile-heading">
        <div class="option-text">PyTorch Build</div>
      </div>
      <div class="col-md-6 option block version" id="stable">
        <div class="option-text">Stable (1.13.1)</div>
      </div>
      <div class="col-md-6 option block version selected" id="preview">
        <div class="option-text">Preview (Nightly)</div>
      </div>
    </div>
    <div class="row os">
      <div class="col-md-12 title-block mobile-heading">
        <div class="option-text">Your OS</div>
      </div>
      <div class="col-md-4 option block selected" id="linux">
        <div class="option-text">Linux</div>
      </div>
      <div class="col-md-4 option block" id="macos">
        <div class="option-text">Mac</div>
      </div>
      <div class="col-md-4 option block" id="windows">
        <div class="option-text">Windows</div>
      </div>
    </div>
    <div class="row package">
      <div class="col-md-12 title-block mobile-heading">
        <div class="option-text">Package</div>
      </div>
      <div class="col-md-3 option block selected" id="conda">
        <div class="option-text">Conda</div>
      </div>
      <div class="col-md-3 option block" id="pip">
        <div class="option-text">Pip</div>
      </div>
      <div class="col-md-3 option block" id="libtorch">
        <div class="option-text">LibTorch</div>
      </div>
      <div class="col-md-3 option block" id="source">
        <div class="option-text">Source</div>
      </div>
    </div>
    <div class="row language">
      <div class="col-md-12 title-block mobile-heading">
        <div class="option-text">Language</div>
      </div>
      <div class="col-md-6 option block version selected" id="python">
        <div class="option-text">Python</div>
      </div>
      <div class="col-md-6 option block" id="cplusplus">
        <div class="option-text">C++ / Java</div>
      </div>
    </div>
    <div class="row cuda">
      <div class="col-md-12 title-block mobile-heading">
        <div class="option-text">Compute Platform</div>
      </div>
      <div class="col-md-3 option block version selected" id="cuda.x">
        <div class="option-text">CUDA 11.7</div>
      </div>
      <div class="col-md-3 option block version" id="cuda.y">
        <div class="option-text">CUDA 11.8</div>
      </div>
      <div class="col-md-3 option block version" id="rocm5.x" style="">
        <div class="option-text">ROCm 5.4.2</div>
      </div>
      <div class="col-md-3 option block version" id="accnone">
        <div class="option-text">CPU</div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 title-block command-mobile-heading">
        <div class="option-text">Run this Command:</div>
      </div>
      <div class="command-container">
        <div class="col-md-12" id="command"><pre>conda install pytorch torchvision torchaudio pytorch-cuda=11.7 -c pytorch-nightly -c nvidia</pre></div>
      </div>
    </div>
  </div>
</div>

i.e.,

      <div class="command-container">
        <div class="col-md-12" id="command"><pre>conda install pytorch torchvision torchaudio pytorch-cuda=11.7 -c pytorch-nightly -c nvidia</pre></div>
      </div>

I had trouble finding where the PyTorch website gets generated (e.g., looking through the .ci and .github folders at https://github.com/pytorch/pytorch, assuming that code for that is publicly available).

Any thoughts/suggestions on how to get this implemented or alternatives? If someone has the appropriate language to describe this or some references, it would help a lot.

EDIT: Some extra resources during my search:

ptrblck · March 2, 2023, 3:15am

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 this seems to be the “Get Started” page, which then points to some assets.
The quick-start-module.js seems to contain the JS code for the actual menu.

From the README of the repo it seems that Jekyll and Bootstrap were used.

sgbaird · March 2, 2023, 10:57pm

@ptrblck This is a great starting point for me. Thank you! Searching through the repo, I was also able to find some GitHub actions workflows for updating and validating the quick start module which calls scripts/gen_quick_start_module.py. Taking a look at the docstring there:

Generates quick start module for Start Locally | PyTorch page
If called from update-quick-start-module.yml workflow (--autogenerate parameter set)
Will output new quick-start-module.js, and new published_version.json file
based on the current release matrix.
If called standalone will generate quick-start-module.js from existing
published_version.json file

It seems that I may not need to deal with Javascript directly.

The first step might be fork the repo, follow the setup instructions, run the website locally, and gradually piece out / adapt the functionality to my other use-case.

This looks lengthy, but doable to me!

sgbaird · June 24, 2023, 7:29pm

A friend got back to me with the following:

If you’re looking for some place to start maybe look into Bootstrap styling. I asked ChatGPT for a mockup of radio buttons being used in forms to give the user something they could copy to clipboard

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).

sgbaird · July 15, 2023, 7:19pm

This post goes through the GitHub workflows and install matrix generation step, dives into the Javascript template, and concludes with the HTML template.

GitHub Workflows and Install Matrix Generation

On the PyTorch side (rather than the PyTorch website gh repo), this script pytorch/.github/scripts/generate_binary_build_matrix.py at 66d3729388b6dc2ae257d984765814a5d42e9060 · pytorch/pytorch · GitHub seems to have an options lists, e.g.:

github.com

pytorch/pytorch/blob/66d3729388b6dc2ae257d984765814a5d42e9060/.github/scripts/generate_binary_build_matrix.py#L86


      
                  for gpu_arch in ROCM_ARCHES
              },
              **{
                  (gpu_arch, CXX11_ABI): f"pytorch/libtorch-cxx11-builder:rocm{gpu_arch}"
                  for gpu_arch in ROCM_ARCHES
              },
              ("cpu", PRE_CXX11_ABI): "pytorch/manylinux-builder:cpu",
              ("cpu", CXX11_ABI): "pytorch/libtorch-cxx11-builder:cpu",
          }
          
          FULL_PYTHON_VERSIONS = ["3.8", "3.9", "3.10", "3.11"]
          
          
          def translate_desired_cuda(gpu_arch_type: str, gpu_arch_version: str) -> str:
              return {
                  "cpu": "cpu",
                  "cpu-aarch64": "cpu",
                  "cpu-cxx11-abi": "cpu-cxx11-abi",
                  "cuda": f"cu{gpu_arch_version.replace('.', '')}",
                  "rocm": f"rocm{gpu_arch_version}",
              }.get(gpu_arch_type, gpu_arch_version)

This creates .yml workflow files via:

github.com

pytorch/pytorch/blob/main/.github/scripts/generate_ci_workflows.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"

This file has been truncated. show original

^{(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&type=code)}

On GitHub - pytorch/pytorch.github.io: The website for PyTorch (rather than GitHub - pytorch/pytorch: Tensors and Dynamic neural networks in Python with strong GPU acceleration), it runs individually for MacOS, Linux, and Windows (both nightly and release versions) via GitHub actions:

github.com

pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/.github/workflows/update-quick-start-module.yml#L22-L61


      
          jobs:
            linux-nightly-matrix:
              uses: pytorch/test-infra/.github/workflows/generate_binary_build_matrix.yml@main
              with:
                package-type: all
                os: linux
                channel: "nightly"
            windows-nightly-matrix:
              uses: pytorch/test-infra/.github/workflows/generate_binary_build_matrix.yml@main
              with:
                package-type: all
                os: windows
                channel: "nightly"
            macos-nightly-matrix:
              uses: pytorch/test-infra/.github/workflows/generate_binary_build_matrix.yml@main
              with:
                package-type: all
                os: macos
                channel: "nightly"
            linux-release-matrix:

This file has been truncated. show original

Going back to how the javascript gets generated, I see:

github.com

pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218C16-L218C48


      
          template = read_quick_start_module_template()

which is defined at:

github.com

pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L83-L85


      
          def read_quick_start_module_template():
              with open(BASE_DIR / "_includes" / "quick-start-module.js") as fptr:
                  return fptr.read()

My takeaway is that it comes back to pytorch.github.io/assets/quick-start-module.js at site · pytorch/pytorch.github.io · GitHub (linked above by @ptrblck), where the template file for this is stored at:

github.com

pytorch/pytorch.github.io/blob/site/_includes/quick-start-module.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,

This file has been truncated. show original

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 (_includes/quick-start-module.js directory, not assets/quick-start-module.js directory) linked above:

github.com

pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/scripts/gen_quick_start_module.py#L218-L222


      
          template = read_quick_start_module_template()
          versions_str = json.dumps(gen_install_matrix(versions))
          template = template.replace("{{ installMatrix }}", versions_str)
          template = template.replace("{{ VERSION }}", f"\"Stable ({versions['latest_stable']})\"")
          print(template.replace("{{ ACC ARCH MAP }}", json.dumps(acc_arch_ver_map)))

The diff between these two files is interesting:

and (cropped):

Javascript

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:

github.com

pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L32-L52


      
          var os = $(".os > .option");
          var package = $(".package > .option");
          var language = $(".language > .option");
          var cuda = $(".cuda > .option");
          var ptbuild = $(".ptbuild > .option");
          
          os.on("click", function() {
            selectedOption(os, this, "os");
          });
          package.on("click", function() {
            selectedOption(package, this, "pm");
          });
          language.on("click", function() {
            selectedOption(language, this, "language");
          });
          cuda.on("click", function() {
            selectedOption(cuda, this, "cuda");
          });
          ptbuild.on("click", function() {
            selectedOption(ptbuild, this, "ptbuild")
          });

The functions are wrappers to selectedOption():

github.com

pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L155-L200


      
          function selectedOption(option, selection, category) {
            $(option).removeClass("selected");
            $(selection).addClass("selected");
            opts[category] = selection.id;
            if (category === "pm") {
              var elements = document.getElementsByClassName("language")[0].children;
              if (selection.id !== "libtorch" && elements["cplusplus"].classList.contains("selected")) {
                $(elements["cplusplus"]).removeClass("selected");
                $(elements["python"]).addClass("selected");
                opts["language"] = "python";
              } else if (selection.id == "libtorch") {
                for (var i = 0; i < elements.length; i++) {
                  if (elements[i].id === "cplusplus") {
                    $(elements[i]).addClass("selected");
                    opts["language"] = "cplusplus";
                  } else {
                    $(elements[i]).removeClass("selected");
                  }
                }
              }

This file has been truncated. show original

Importantly, this depends on commandMessage():

github.com

pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L194


      
                    $(elements[i]).addClass("selected");
                    opts["pm"] = "libtorch";
                  } else {
                    $(elements[i]).removeClass("selected");
                  }
                }
              }
            } else if (category == "ptbuild") {
              changeVersion(opts.ptbuild);
            }
            commandMessage(buildMatcher());
            if (category === "os") {
              disableUnsupportedPlatforms(opts.os);
              display(opts.os, 'installation', 'os');
            }
            changeAccNoneName(opts.os);
          }
          
          function display(selection, id, category) {
            var container = document.getElementById(id);
            // Check if there's a container to display the selection

given in:

github.com

pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L250-L262


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

This file has been truncated. show original

where var object = {"preview,pip,linux,accnone,python": "pip3 install --pre torch ...", ...} was modified from the template file line var object = {{ installMatrix }}; as described in the reply preceding this one.

Note the form of the line:
{"<option1>,<option2>,<option3>,<option4>,<option5>": "<install command>", ...}

I think it’s also worth mentioning disableUnsupportedPlatforms(os) which does the strike-through:

github.com

pytorch/pytorch.github.io/blob/30f87b30d2b588d28df90d301ad9f2436f922bfc/assets/quick-start-module.js#L106-L119


      
          // Disable compute platform not supported on OS
          function disableUnsupportedPlatforms(os) {
            for (const [arch_key, info] of archInfoMap) {
              var elems = document.querySelectorAll('[id^="'+arch_key+'"]');
              if (elems == null) {
                console.log("Failed to find element for architecture " + arch_key);
                return;
              }
              for (var i=0; i < elems.length;i++) {
                var supported = info.platforms.has(os);
                elems[i].style.textDecoration = supported ? "" : "line-through";
              }
            }
          }

HTML

In terms of the HTML templates located in the _includes directory:

github.com

pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L8


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

pulls from:

github.com

pytorch/pytorch.github.io/blob/site/_includes/quick_start_local.html

<p>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 <b>met the prerequisites below (e.g., numpy)</b>,  depending on your package manager. Anaconda is our recommended
   package manager since it installs all dependencies. You can also
  <a href="{{ site.baseurl }}/get-started/previous-versions">install previous versions of PyTorch</a>. Note that LibTorch is only available for C++.
</p>

<p><b>NOTE:</b> Latest PyTorch requires Python 3.8 or later. For more details, see Python section below.</p>

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

This file has been truncated. show original

To complete the circle, the HTML file uses the Javascript file in:

github.com

pytorch/pytorch.github.io/blob/2be25298502e664749e5e55f9adc4ebef055678d/_includes/quick_start_module.html#L26


      
                  <h3>Quick Start With<br />Cloud Partners</h3>
          
                  <p>Get up and running with PyTorch quickly through popular cloud platforms and machine learning services.</p>
          
                  {% include quick_start_cloud_options.html %}
                </div>
              </div>
            </div>
          </div>
          
          <script src="{{ site.baseurl }}/assets/quick-start-module.js"></script>

MTHT · March 6, 2024, 1:35am

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.