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

Site Feedback
1

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.

image
image1116×779 65.7 KB

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:

image
image852×426 25.8 KB

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:

2

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.

1 Like
3

@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!

1 Like