Refactor visual anagrams section and update prompts

Author: cjxthecoder

project-5/index.html

@@ -835,71 +835,45 @@ <h4>St. Basil's Cathedral with prompt <code>'an oil painting of a snowy mountain
 <!-- ========================================================= -->
 <section id="part-1-8">
   <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>1.8.1 – Code: visual_anagrams</h3>
-    <pre><code># TODO
-# def visual_anagrams(
-#     prompt_embeds_p1,
-#     prompt_embeds_p2,
-#     uncond_prompt_embeds,
-#     timesteps,
-#     scale=7,
-#     num_inference_steps=...,
-# ):
-#     """
-#     Returns:
-#       image: torch.Tensor of shape (1, 3, 64, 64) in [-1, 1]
-#     """
-#     # TODO</code></pre>
-
-    <p class="note">
-      Notes: include your flipping operation (e.g., torch.flip(..., dims=[2])) and how you combine
-      noise / variance estimates (if applicable).
-    </p>
-  </div>
-
-  <div class="subsection">
-    <h3>1.8.2 – Two Visual Anagram Illusions</h3>
-    <p>
-      Each illusion should look like one concept normally, and another concept when flipped upside down.
-      Show both orientations.
-    </p>
-
-    <h4>Illusion 1</h4>
-    <p><strong>Prompt p1:</strong> <em><!-- TODO: prompt 1 --></em><br/>
-       <strong>Prompt p2:</strong> <em><!-- TODO: prompt 2 --></em>
-    </p>
+    <h3>Prompts: <code>'an oil painting of an old man'</code> and <code>'an oil painting of people around a campfire'</code></h3>
     <div class="image-row">
       <figure>
-        <img src="images/part1_8_illusion1_original.png" alt="Visual anagram illusion 1 (original)" />
-        <figcaption>Illusion 1 – Original orientation</figcaption>
+        <img src="images/anagram/anagram1_256.png" alt="anagram1_256.png" />
+        <figcaption>Original"</figcaption>
       </figure>
       <figure>
-        <img src="images/part1_8_illusion1_flipped.png" alt="Visual anagram illusion 1 (flipped)" />
-        <figcaption>Illusion 1 – Flipped upside down</figcaption>
+        <img src="images/anagram/anagram1_flip_256.png" alt="anagram1_256.png" />
+        <figcaption>Flipped</figcaption>
       </figure>
     </div>
 
-    <h4>Illusion 2</h4>
-    <p><strong>Prompt p1:</strong> <em><!-- TODO: prompt 1 --></em><br/>
-       <strong>Prompt p2:</strong> <em><!-- TODO: prompt 2 --></em>
-    </p>
+    <h3>Prompts: <code>'a lithograph of waterfalls'</code> and <code>'a man wearing a hat'</code></h3>
     <div class="image-row">
       <figure>
-        <img src="images/part1_8_illusion2_original.png" alt="Visual anagram illusion 2 (original)" />
-        <figcaption>Illusion 2 – Original orientation</figcaption>
+        <img src="images/anagram/anagram2_256.png" alt="anagram2_256.png" />
+        <figcaption>Original"</figcaption>
       </figure>
       <figure>
-        <img src="images/part1_8_illusion2_flipped.png" alt="Visual anagram illusion 2 (flipped)" />
-        <figcaption>Illusion 2 – Flipped upside down</figcaption>
+        <img src="images/anagram/anagram2_flip_256.png" alt="anagram2_256.png" />
+        <figcaption>Flipped</figcaption>
       </figure>
     </div>
 
-    <p class="note">
-      Brief discussion: what makes the illusion work? How sensitive is it to guidance scale / steps / noise schedule?
-      <!-- TODO -->
-    </p>
+    <h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> and <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" />
+        <figcaption>Flipped</figcaption>
+      </figure>
+    </div>
   </div>
 </section>
 
@@ -908,24 +882,12 @@ <h4>Illusion 2</h4>
 <!-- ========================================================= -->
 <section id="part-1-9">
   <h2>Part 1.9 – Hybrid Images</h2>
+  
+  With the technqiues above, we can now also create hybrid images, or images that look like different subjects depending on the viewing distance. The classical way to create a hybrid image is to transform the image you want to see at close range with a low-pass filter, thus keeping
 
   <div class="subsection">
     <h3>1.9.1 – Code: make_hybrids</h3>
-    <pre><code># TODO
-# def make_hybrids(
-#     image_a,
-#     image_b,
-#     lowpass_sigma=...,
-#     highpass_sigma=...,
-#     blend_weight=...,
-# ):
-#     """
-#     Returns:
-#       hybrid: torch.Tensor or np.ndarray (document your format)
-#       low_freq: low-frequency component (optional)
-#       high_freq: high-frequency component (optional)
-#     """
-#     # TODO</code></pre>
+
 
     <p class="note">
       Notes: describe your filter choice (Gaussian blur / FFT), the cutoff frequencies (sigmas),