Skip to content

Commit 0fe8bbb

Browse files
cjxthecodercjxthecoder
authored
Fix HTML comments and update section content
1 parent ef11649 commit 0fe8bbb

File tree

1 file changed

+84
-84
lines changed

1 file changed

+84
-84
lines changed

‎project-5/index.html‎

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -827,97 +827,97 @@ <h4>St. Basil's Cathedral with prompt <code>'an oil painting of a snowy mountain
827827
</section>
828828

829829
<!-- ========================================================= -->
830-
<!-- Part 1.8: Visual Anagrams -->
830+
<!-- Part 1.8: Visual Anagrams -->
831831
<!-- ========================================================= -->
832832
<section id="part-1-8">
833-
<h2>Part 1.8 – Visual Anagrams</h2>
834-
835-
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:
836-
837-
<div class="subsection">
838-
<h3>Prompts: <code>'an oil painting of an old man'</code> and <code>'an oil painting of people around a campfire'</code></h3>
839-
<div class="image-row">
840-
<figure>
841-
<img src="images/anagram/anagram1_256.png" alt="anagram1_256.png" />
842-
<figcaption>Original</figcaption>
843-
</figure>
844-
<figure>
845-
<img src="images/anagram/anagram1_flip_256.png" alt="anagram1_256.png" />
846-
<figcaption>Flipped</figcaption>
847-
</figure>
848-
</div>
849-
850-
<h3>Prompts: <code>'a lithograph of waterfalls'</code> and <code>'a man wearing a hat'</code></h3>
851-
<div class="image-row">
852-
<figure>
853-
<img src="images/anagram/anagram2_256.png" alt="anagram2_256.png" />
854-
<figcaption>Original</figcaption>
855-
</figure>
856-
<figure>
857-
<img src="images/anagram/anagram2_flip_256.png" alt="anagram2_256.png" />
858-
<figcaption>Flipped</figcaption>
859-
</figure>
860-
</div>
861-
862-
<h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> and <code>'a photo of a dog'</code></h3>
863-
<div class="image-row">
864-
<figure>
865-
<img src="images/anagram/anagram3_256.png" alt="anagram3_256.png" />
866-
<figcaption>Original</figcaption>
867-
</figure>
868-
<figure>
869-
<img src="images/anagram/anagram3_flip_256.png" alt="anagram3_256.png" />
870-
<figcaption>Flipped</figcaption>
871-
</figure>
872-
</div>
873-
</div>
833+
<h2>Part 1.8 – Visual Anagrams</h2>
834+
835+
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:
836+
837+
<div class="subsection">
838+
<h3>Prompts: <code>'an oil painting of an old man'</code> and <code>'an oil painting of people around a campfire'</code></h3>
839+
<div class="image-row">
840+
<figure>
841+
<img src="images/anagram/anagram1_256.png" alt="anagram1_256.png" />
842+
<figcaption>Original</figcaption>
843+
</figure>
844+
<figure>
845+
<img src="images/anagram/anagram1_flip_256.png" alt="anagram1_256.png" />
846+
<figcaption>Flipped</figcaption>
847+
</figure>
848+
</div>
849+
850+
<h3>Prompts: <code>'a lithograph of waterfalls'</code> and <code>'a man wearing a hat'</code></h3>
851+
<div class="image-row">
852+
<figure>
853+
<img src="images/anagram/anagram2_256.png" alt="anagram2_256.png" />
854+
<figcaption>Original</figcaption>
855+
</figure>
856+
<figure>
857+
<img src="images/anagram/anagram2_flip_256.png" alt="anagram2_256.png" />
858+
<figcaption>Flipped</figcaption>
859+
</figure>
860+
</div>
861+
862+
<h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> and <code>'a photo of a dog'</code></h3>
863+
<div class="image-row">
864+
<figure>
865+
<img src="images/anagram/anagram3_256.png" alt="anagram3_256.png" />
866+
<figcaption>Original</figcaption>
867+
</figure>
868+
<figure>
869+
<img src="images/anagram/anagram3_flip_256.png" alt="anagram3_256.png" />
870+
<figcaption>Flipped</figcaption>
871+
</figure>
872+
</div>
873+
</div>
874874
</section>
875875

876876
<!-- ========================================================= -->
877-
<!-- Part 1.9: Hybrid Images -->
877+
<!-- Part 1.9: Hybrid Images -->
878878
<!-- ========================================================= -->
879879
<section id="part-1-9">
880-
<h2>Part 1.9 – Hybrid Images</h2>
881-
882-
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 far range with a low-pass filter, the image you want to see at close range wiht a high-pass filter, and combine the 2 transformed images. We can use a similar algorithm in the denoising process, namely by passing the noise estimate from <code>p<sub>1</sub></code> and <code>p<sub>2</sub></code> through a low and high pass filter respectively. This will produce an image that when view close up, shows <code>p<sub>1</sub></code>, but when viewed far away, shows <code>p<sub>2</sub></code>. Unlike the anagram images, we don't need to flip or transform the image to be denoised, as both images should be viewed under the same orientation. Below are several examples:
883-
884-
<div class="subsection">
885-
<h3>Prompts: <code>'an oil painting of an old man'</code> and <code>'an oil painting of people around a campfire'</code></h3>
886-
<div class="image-row">
887-
<figure>
888-
<img src="images/anagram/anagram1_256.png" alt="anagram1_256.png" />
889-
<figcaption>Original</figcaption>
890-
</figure>
891-
<figure>
892-
<img src="images/anagram/anagram1_flip_256.png" alt="anagram1_256.png" />
893-
<figcaption>Flipped</figcaption>
894-
</figure>
895-
</div>
896-
897-
<h3>Prompts: <code>'a lithograph of waterfalls'</code> and <code>'a man wearing a hat'</code></h3>
898-
<div class="image-row">
899-
<figure>
900-
<img src="images/anagram/anagram2_256.png" alt="anagram2_256.png" />
901-
<figcaption>Original</figcaption>
902-
</figure>
903-
<figure>
904-
<img src="images/anagram/anagram2_flip_256.png" alt="anagram2_256.png" />
905-
<figcaption>Flipped</figcaption>
906-
</figure>
907-
</div>
908-
909-
<h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> and <code>'a photo of a dog'</code></h3>
910-
<div class="image-row">
911-
<figure>
912-
<img src="images/anagram/anagram3_256.png" alt="anagram3_256.png" />
913-
<figcaption>Original</figcaption>
914-
</figure>
915-
<figure>
916-
<img src="images/anagram/anagram3_flip_256.png" alt="anagram3_256.png" />
917-
<figcaption>Flipped</figcaption>
918-
</figure>
919-
</div>
920-
</div>
880+
<h2>Part 1.9 – Hybrid Images</h2>
881+
882+
With the techniques 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 a far range with a low-pass filter, the image you want to see at close range with a high-pass filter, and combine the 2 transformed images. We can use a similar algorithm in the denoising process, namely by passing the noise estimate from <code>p<sub>1</sub></code> and <code>p<sub>2</sub></code> through a low and high pass filter, respectively. This will produce an image that, when viewed close up, shows <code>p<sub>1</sub></code>, but when viewed far away, shows <code>p<sub>2</sub></code>. Unlike the anagram images, we don't need to flip or transform the image to be denoised, as both images should be viewed under the same orientation. Below are several examples:
883+
884+
<div class="subsection">
885+
<h3>Prompts: <code>'an oil painting of an old man'</code> and <code>'an oil painting of people around a campfire'</code></h3>
886+
<div class="image-row">
887+
<figure>
888+
<img src="images/anagram/anagram1_256.png" alt="anagram1_256.png" />
889+
<figcaption>Original</figcaption>
890+
</figure>
891+
<figure>
892+
<img src="images/anagram/anagram1_flip_256.png" alt="anagram1_256.png" />
893+
<figcaption>Flipped</figcaption>
894+
</figure>
895+
</div>
896+
897+
<h3>Prompts: <code>'a lithograph of waterfalls'</code> and <code>'a man wearing a hat'</code></h3>
898+
<div class="image-row">
899+
<figure>
900+
<img src="images/anagram/anagram2_256.png" alt="anagram2_256.png" />
901+
<figcaption>Original</figcaption>
902+
</figure>
903+
<figure>
904+
<img src="images/anagram/anagram2_flip_256.png" alt="anagram2_256.png" />
905+
<figcaption>Flipped</figcaption>
906+
</figure>
907+
</div>
908+
909+
<h3>Prompts: <code>'an oil painting of a snowy mountain village'</code> and <code>'a photo of a dog'</code></h3>
910+
<div class="image-row">
911+
<figure>
912+
<img src="images/anagram/anagram3_256.png" alt="anagram3_256.png" />
913+
<figcaption>Original</figcaption>
914+
</figure>
915+
<figure>
916+
<img src="images/anagram/anagram3_flip_256.png" alt="anagram3_256.png" />
917+
<figcaption>Flipped</figcaption>
918+
</figure>
919+
</div>
920+
</div>
921921
</section>
922922

923923
</body>

0 commit comments

Comments
 (0)