Fix HTML formatting for prompt captions

Author: cjxthecoder

project-5/index.html

@@ -836,38 +836,38 @@ <h2>Part 1.8 – Visual Anagrams</h2>
 We now have the necessary tools to generate visual anagrams, or images that look like another different one when flipped/rotated. As an example for a vertical flip anagram, we would start with 2 prompt embeddings <code>p<sub>1</sub></code> and <code>p<sub>2</sub></code>. For <code>p<sub>1</sub></code>, we would compute the noise estimate &epsilon;<sub>1</sub> normally at each step, but for <code>p<sub>2</sub></code>, we flip the image <code>x<sub>t</sub></code> first before computing the noise estimate, then flip back the estimate to obtain &epsilon;<sub>2</sub>. Once this is done, we will use the average of &epsilon;<sub>1</sub> and &epsilon;<sub>2</sub> as the final noise estimate for each step. The variance can also be computed similarly, namely v<sub>1</sub> will be computed in the usual way, while v<sub>2</sub> will be the flipped variance estimate of the flipped <code>x<sub>t</sub></code>, and the final variance estimate will (v<sub>1</sub> + v<sub>2</sub>) / 2. Below are a few examples of such an effect, with <code>p<sub>1</sub></code> being the first prompt and <code>p<sub>2</sub></code> being the second:
 
 <div class="subsection">
-<h3>Prompts: <code>'an oil painting of an old man'</code> and <code>'an oil painting of people around a campfire'</code></h3>
+<h3>Prompts: <code>'an oil painting of an old man'</code> & <code>'an oil painting of people around a campfire'</code></h3>
 <div class="image-row">
 <figure>
 <img src="images/anagram/anagram1_256.png" alt="anagram1_256.png" />
 <figcaption>Original</figcaption>
 </figure>
 <figure>
-<img src="images/anagram/anagram1_flip_256.png" alt="anagram1_256.png" />
+<img src="images/anagram/anagram1_flip_256.png" alt="anagram1_flip_256.png" />
 <figcaption>Flipped</figcaption>
 </figure>
 </div>
 
-<h3>Prompts: <code>'a lithograph of waterfalls'</code> and <code>'a man wearing a hat'</code></h3>
+<h3>Prompts: <code>'a lithograph of waterfalls'</code> & <code>'a man wearing a hat'</code></h3>
 <div class="image-row">
 <figure>
 <img src="images/anagram/anagram2_256.png" alt="anagram2_256.png" />
 <figcaption>Original</figcaption>
 </figure>
 <figure>
-<img src="images/anagram/anagram2_flip_256.png" alt="anagram2_256.png" />
+<img src="images/anagram/anagram2_flip_256.png" alt="anagram2_flip_256.png" />
 <figcaption>Flipped</figcaption>
 </figure>
 </div>
 
-<h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> and <code>'a photo of a dog'</code></h3>
+<h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> & <code>'a photo of a dog'</code></h3>
 <div class="image-row">
 <figure>
 <img src="images/anagram/anagram3_256.png" alt="anagram3_256.png" />
 <figcaption>Original</figcaption>
 </figure>
 <figure>
-<img src="images/anagram/anagram3_flip_256.png" alt="anagram3_256.png" />
+<img src="images/anagram/anagram3_flip_256.png" alt="anagram3_flip_256.png" />
 <figcaption>Flipped</figcaption>
 </figure>
 </div>
@@ -886,15 +886,15 @@ <h2>Part 1.9 – Hybrid Images</h2>
 <div class="image-row">
 <figure>
 <img src="images/hybrid/hybrid1_256.png" alt="hybrid1_256.png" />
-<figcaption>Prompts: (low-pass) and (high-pass)</figcaption>
+<figcaption>Prompts: <code></code> (low-pass) & <code></code> (high-pass)</figcaption>
 </figure>
 <figure>
 <img src="images/hybrid/hybrid2_256.png" alt="hybrid2_256.png" />
-<figcaption>Prompts: (low-pass) and (high-pass)</figcaption>
+<figcaption>Prompts: <code></code> (low-pass) & <code></code> (high-pass)</figcaption>
 </figure>
 <figure>
 <img src="images/hybrid/hybrid3_256.png" alt="hybrid3_256.png" />
-<figcaption>Prompts: (low-pass) and (high-pass)</figcaption>
+<figcaption>Prompts: <code></code> (low-pass) & <code></code> (high-pass)</figcaption>
 </figure>
 </div>
 </div>