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:
- How to Convert a Static HTML Table to a Dynamic JavaScript Data Grid
- JSDoc: Widget: interactiveGrid
- Basic HTML: Interactive Elements in HTML
- javascript - Changing button text onclick - Stack Overflow
- javascript - How to display text using if else - Stack Overflow
- javascript - Exporting ipywidgets to a website - Stack Overflow
- Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.0.4 documentation
-
https://www.google.com/search?q=html+class+"class%3Dcommand-container"
Spread.Views Documentation