added golden bear photos, minor tweaks

hw/proj5/parta.html

@@ -91,18 +91,20 @@ <h1>
     </h1>
     <div class="image-container">
       <div>
-        <img src="assets/reading.png" alt="Lion">
-        <p>reading between the lions</p>
+        <img src="assets/reading.png" alt="Reading">
+        <p>Reading Between the Lions</p>
       </div>
       <div>
-        <img src="assets/baby.png" alt="Baby">
-        <p>bear with me</p>
+        <img src="assets/man_wearing_hat.png" alt="Man Wearing Hat">
+        <p>A Man Wearing a Hat</p>
       </div>
       <div>
-        <img src="assets/skull.png" alt="Skull">
-        <p>a lithograph of a skull</p>
+        <img src="assets/goldenbear_dancing.png" alt="Bear Dancing">
+        <p>A Golden Bear Dancing</p>
       </div>
     </div>
+
+
     <br />
     <h1 style="text-align: center">Part A: The Power of Diffusion Models!</h1>
     <h3 style="text-align: center;">The first part of a <a
@@ -172,15 +174,20 @@ <h3>Downloading Precomputed Text Embeddings </h3>
         At the end of part A of the project, we provide you code if you want to
         try your own text prompts.</p>
 
-      <h3>Deliverable: </h3>
-      In the notebook, we instantiate DeepFloyd's <code>stage_1</code> and
-      <code>stage_2</code> objects used for generation, as well as several text
-      prompts for sample generation.
+        <p>
+          In the notebook, we instantiate DeepFloyd's <code>stage_1</code> and
+          <code>stage_2</code> objects used for generation, as well as several text
+          prompts for sample generation.
+        </p>
+
+      <b>Deliverables </b>
+
       <ul>
         <li>For the 3 text prompts that we provide, display the caption and the
           output of the model. Reflect on the quality of the outputs and their
           relationships to the text prompts. Make sure to try at least 2
           different <code>num_inference_steps</code> values.</li>
+          <li>Report the random seed that you're using here. You should use the same seed all subsequent parts.</li>
       </ul>
 
       <h1> Part 1: Sampling Loops</h1>
@@ -805,6 +812,10 @@ <h3>1.7 SDEdit: Image Editing</h3>
           <img src="assets/1.7_start_20.png" alt="Noisy Campanile at t=90">
           <p>SDEdit with <code>i_start=20</code></p>
         </div>
+        <div>
+          <img src="assets/campanile_resized.png" alt="Original Campanile">
+          <p>Campanile</p>
+        </div>
       </div>
       <h4>1.7.1 Editing Hand-Drawn and Web Images</h4>
       <p>We provide code in the notebook to
@@ -1118,14 +1129,14 @@ <h3>1.9 Hybrid Images</h3>
       reasons as above). We recommend that you use a gaussian blur of kernel size 33 and sigma 2.
     </p>
 
-    <h3>Deliverables</h3>
+    <b>Deliverables</b>
     <ul>
       <li>Correctly implemented <code>make_hybrids</code> function</li>
       <li>An image that looks like a <code>skull</code> from far away but a <code>waterfall</code> from close up</li>
       <li>2 more hybrid images of your choosing.</li>
     </ul>
 
-    Hints
+    <b>Hints</b>
     <ul>
       <li>use torchvision.transforms.functional.gaussian_blur. The
         documentation can be found <a

hw/proj5/partb.html

@@ -132,7 +132,7 @@ <h2> 1.1 Implementing Simple and Composed Ops</h2>
       [1] Ronneberger, O., Fischer, P., & Brox, T. (2015). U-Net: Convolutional networks for biomedical image segmentation. In International Conference on Medical image computing and computer-assisted intervention (pp. 234-241). Springer, Cham.
     </p>
 
-    <h3>Deliverables</h3>
+    <b>Deliverables</b>
     <ul>
       <li> Implement the operations that we defined by following the previous figure closely.</li>
     </ul>
@@ -148,7 +148,7 @@ <h2> 1.2 Implementing Unconditional U-Net</h2>
         <img src="assets/unet.png" alt="U-Net Architecture" height="500" style="display: block; margin-left: auto; margin-right: auto" />
         <p class="text">Figure 2: Unconditional UNet</p>
     </div>
-    <h3>Deliverables</h3>
+    <b>Deliverables</b>
     <ul>
       <li> Implement the UNet by following the figure above.</li>
     </ul>
@@ -511,42 +511,39 @@ <h2> 2.4 Deliverables</h2>
   Note: you do not need to generate gifs (this can be done as B&W below).
 <p class="text">
 </p>
-<div class="image-container">
-  <div>
+<!-- First row with 2 videos -->
+<div class="image-container" style="justify-content: center;">
+  <div style="width: 100%;">
     <p style="text-align: left;">Epoch 1</p>
-    <video id="video1" width="640" height="320" muted loop style="display: block; margin-left: 0;">
+    <video id="video1" width="100%" muted loop style="display: block; margin-left: 0;">
       <source type="video/mp4" src="assets/staff_solution_epoch1.mp4" />
     </video>
   </div>
-</div>
-<div class="image-container">
-  <div>
+  <div style="width: 50%;">
     <p style="text-align: left;">Epoch 5</p>
-    <video id="video2" width="640" height="320" muted loop style="display: block; margin-left: 0;">
+    <video id="video2" width="100%" muted loop style="display: block; margin-left: 0;">
       <source type="video/mp4" src="assets/staff_solution_epoch5.mp4" />
     </video>
   </div>
 </div>
-<div class="image-container">
-  <div>
+
+<!-- Second row with 3 videos -->
+<div class="image-container" style="justify-content: center; margin-top: 20px;">
+  <div style="width: 100%;">
     <p style="text-align: left;">Epoch 10</p>
-    <video id="video3" width="640" height="320" muted loop style="display: block; margin-left: 0;">
+    <video id="video3" width="100%" muted loop style="display: block; margin-left: 0;">
       <source type="video/mp4" src="assets/staff_solution_epoch10.mp4" />
     </video>
   </div>
-</div>
-<div class="image-container">
-  <div>
+  <div style="width: 100%;">
     <p style="text-align: left;">Epoch 15</p>
-    <video id="video4" width="640" height="320" muted loop style="display: block; margin-left: 0;">
+    <video id="video4" width="100%" muted loop style="display: block; margin-left: 0;">
       <source type="video/mp4" src="assets/staff_solution_epoch15.mp4" />
     </video>
   </div>
-</div>
-<div class="image-container">
-  <div>
+  <div style="width: 100%;">
     <p style="text-align: left;">Epoch 20</p>
-    <video id="video5" width="640" height="320" muted loop style="display: block; margin-left: 0;">
+    <video id="video5" width="100%" muted loop style="display: block; margin-left: 0;">
       <source type="video/mp4" src="assets/staff_solution_epoch20.mp4" />
     </video>
   </div>