website updates

Summary:
A few small website updates:

- changed the tutorials to point to the `stable` tag on github so we don't have to update the website each time we want to run them!
- changed the colab button
- re ran notebook cells to update the images for textured meshes

Once these fixes are landed I can build and publish the website.

Reviewed By: bottler

Differential Revision: D20484836

fbshipit-source-id: 603a05e752f631c60d1a3abb9adeb1b9b451ab98

docs/tutorials/bundle_adjustment.ipynb

@@ -83,7 +83,7 @@
    "outputs": [],
    "source": [
     "!pip install torch torchvision\n",
-    "!pip install 'git+https://github.com/facebookresearch/pytorch3d.git'"
+    "!pip install 'git+https://github.com/facebookresearch/pytorch3d.git@stable'"
    ]
   },
   {

docs/tutorials/camera_position_optimization_with_differentiable_rendering.ipynb

@@ -70,7 +70,7 @@
    "outputs": [],
    "source": [
     "!pip install torch torchvision\n",
-    "!pip install 'git+https://github.com/facebookresearch/pytorch3d.git'"
+    "!pip install 'git+https://github.com/facebookresearch/pytorch3d.git@stable'"
    ]
   },
   {

docs/tutorials/deform_source_mesh_to_target_mesh.ipynb

@@ -85,7 +85,7 @@
    "outputs": [],
    "source": [
     "!pip install torch torchvision\n",
-    "!pip install 'git+https://github.com/facebookresearch/pytorch3d.git'"
+    "!pip install 'git+https://github.com/facebookresearch/pytorch3d.git@stable'"
    ]
   },
   {

website/core/Tutorial.js

@@ -45,10 +45,18 @@ class Tutorial extends React.Component {
         <TutorialSidebar currentTutorialID={tutorialID} />
         <Container className="mainContainer">
           <div className="tutorialButtonsWrapper">
-              <div className="colabButtonWrapper">
+            <div className="tutorialButtonWrapper buttonWrapper">
               <a
-    href={`https://colab.research.google.com/github/facebookresearch/pytorch3d/blob/master/docs/tutorials/${tutorialID}.ipynb`}>
-                  <img align="left" src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
+                className="tutorialButton button"
+                download
+                href={`https://colab.research.google.com/github/facebookresearch/pytorch3d/blob/stable/docs/tutorials/${tutorialID}.ipynb`}
+                target="_blank">
+                <img
+                  className="colabButton"
+                  align="left"
+                  src={`${baseUrl}img/colab_icon.png`}
+                />
+                {'Run in Google Colab'}
               </a>
             </div>
             <div className="tutorialButtonWrapper buttonWrapper">

website/pages/tutorials/index.js

@@ -22,23 +22,54 @@ class TutorialHome extends React.Component {
         <Container className="mainContainer documentContainer postContainer">
           <div className="post">
             <header className="postHeader">
-              <h1 className="postHeaderTitle">Welcome to the PyTorch3D Tutorials</h1>
+              <h1 className="postHeaderTitle">
+                Welcome to the PyTorch3D Tutorials
+              </h1>
             </header>
             <p>
-              Here you can learn about the structure and applications of Pytorch3D from
-              examples which are in the form of ipython notebooks.
+              Here you can learn about the structure and applications of
+              Pytorch3D from examples which are in the form of ipython
+              notebooks.
             </p>
             <h3> Run interactively </h3>
             <p>
-              At the top of each example you can find a button named <strong>"Open in Colab"</strong> which will open the notebook in <a href="https://colab.research.google.com/notebooks/intro.ipynb"> Google Colaboratory </a> where you can run the code directly in the browser with access to GPU support e.g.
+              At the top of each example you can find a button named{' '}
+              <strong>"Run in Google Colab"</strong> which will open the
+              notebook in{' '}
+              <a href="https://colab.research.google.com/notebooks/intro.ipynb">
+                {' '}
+                Google Colaboratory{' '}
+              </a>{' '}
+              where you can run the code directly in the browser with access to
+              GPU support - it looks like this:
+            </p>
+            <div className="tutorialButtonsWrapper">
+              <div className="tutorialButtonWrapper buttonWrapper">
+                <a className="tutorialButton button" target="_blank">
+                  <img
+                    className="colabButton"
+                    align="left"
+                    src="/img/colab_icon.png"
+                  />
+                  {'Run in Google Colab'}
+                </a>
+              </div>
+            </div>
+            <p>
+              {' '}
+              You can modify the code and experiment with varying different
+              settings. Remember to install pytorch, torchvision, fvcore and
+              pytorch3d in the first cell of the colab notebook by running:{' '}
             </p>
-           <img align="center" src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab"/>
-           <p> You can modify the code and experiment with varying different settings.
-        Remember to install pytorch, torchvision, fvcore and pytorch3d in the first cell of the colab notebook by running: </p>
             <MarkdownBlock>{bash`!pip install torch torchvision
-!pip install 'git+https://github.com/facebookresearch/pytorch3d.git'`}</MarkdownBlock>
+!pip install 'git+https://github.com/facebookresearch/pytorch3d.git@stable'`}</MarkdownBlock>
+            This installs the latest stable version of PyTorch3D from github.
             <h3> Run locally </h3>
-           <p> There is also a button to download the notebook and source code to run it locally. </p>
+            <p>
+              {' '}
+              There is also a button to download the notebook and source code to
+              run it locally.{' '}
+            </p>
           </div>
         </Container>
       </div>

website/static/css/custom.css

@@ -267,9 +267,14 @@ p a:hover {
  padding-right: 0.25em;
 }
 
+.colabButton {
+  width: 24px;
+}
+
 .tutorialButtonsWrapper {
  display: flex;
  align-items: center;
+ padding-bottom: 15px;
 }
 
 /* .tutorialButton {