custom gs and seed dropdown

js/compare.js

@@ -47,7 +47,7 @@ d3.select("#text-vector-generator-latent-denoiser-container")
             .append("path")
                 .attr("id", "text-vector-generator-latent-denoiser-arrow-2")
                 .attr("class", "architecture-arrow-comp")
-                .attr("d", "M 0 10 L 30 10 C 42,10 55,10 67,10 L 95 10")
+                .attr("d", "M 0 10 L 123 10")
                 .attr("marker-end", "url(#architecture-arrow-comp-head)")
 
 // cycle

js/denoise_l2expl.js

@@ -21,6 +21,7 @@ document.addEventListener("mousedown", (e) => {
         else if (document.querySelector(".controller-button-circle:hover") != null) {}
         else if (document.querySelector("#controller-timestep-slider-container:hover") != null) {}
         else if (document.querySelector("#architecture-container-hide-button-container:hover") != null) {}
+        else if (document.querySelector(".gs-dropdown-options:hover") != null) {}
         // else if (e.clientY > descriptionBox.y) {}
         // else {reduceLatentDenoiserL2();}
         else if (e.clientX > mainLeft && e.clientX < mainRight && e.clientY > mainTop && e.clientY < mainBottom) {reduceLatentDenoiserL2();}
@@ -114,6 +115,12 @@ d3.select("#denoise-latent-l2-expl-unet-container")
         .attr("id", "denoise-latent-l2-expl-unet-desc-text")
         .text("predicts noise to remove")
 
+// Guidance scale text 
+d3.select("#latent-denoiser-l2-expl-container")
+    .append("div")
+    .attr("id", "denoise-latent-l2-expl-guidance-scale-text")
+    .text("Guide image generation")
+
 // ADD arrow and explanations for guidance scale
 let x_=12;
 let y_=12;
@@ -148,7 +155,7 @@ d3.select("#denoise-latent-l2-expl-guidance-scale-expl-text")
     .append("div")
         .attr("id", "denoise-latent-l2-expl-guidance-scale-expl-text-2")
         // .text("Higher means stronger adherence.")
-        .text("Higher gives stronger adherence but less creativity.")
+        .text("Higher gives stronger adherence but can exaggerate.")
 d3.select("#denoise-latent-l2-expl-guidance-scale-expl-text")
     .append("div")
     .attr("id", "denoise-latent-l2-expl-guidance-scale-expl-text-how")

js/denoise_l3expl.js

@@ -102,9 +102,10 @@ d3.select("#latent-denoiser-l3-expl-vis-svg")
             .attr("stroke-width", "3px")
             .on("click", function (e) {
                 let gs = d3.select(this).data()[0][0]
+                d3.select("#gs-dropdown-box-text").text(gs)
                 moveThumb(gs); // put circle and line on 0
                 hyperparamChanged(e, window.seed, `${gs}.0`);
-                document.getElementById("guidance-scale-control-dropdown-select").selectedIndex = (gs<=1)?gs:((gs==7)?2:3)
+                // document.getElementById("guidance-scale-control-dropdown-select").selectedIndex = (gs<=1)?gs:((gs==7)?2:3)
             })
 
 // Drag Functions
@@ -118,7 +119,7 @@ let points = {
 let colors = {0: "#a0a0a0", 1: "var(--text1)", 7: "var(--text2)", 20: "var(--text3)"}
 let path = {
     0: "M0 0 l 0 -10 a10 10, 0 0 1, 10 -10 L142 -20 a10 10, 0 0 0, 10 -10 L152 -54", 
-    1: "M20 0 l 0 -10 a10 10, 0 0 1, 10 -10 L142 -20 a10 10, 0 0 0, 10 -10 L152 -54", 
+    1: "M25 0 l 0 -10 a10 10, 0 0 1, 10 -10 L142 -20 a10 10, 0 0 0, 10 -10 L152 -54", 
     7: "M100 0 l 0 -10 a10 10, 0 0 1, 10 -10 L142 -20 a10 10, 0 0 0, 10 -10 L152 -54", 
     20: "M250 0 l 0 -10 a10 10, 0 0 0, -10 -10 L162 -20 a10 10, 0 0 1, -10 -10 L152 -54", 
 }
@@ -221,9 +222,9 @@ d3.select("#latent-denoiser-l3-expl-vis-svg")
             .style("cursor", "pointer")
             .on("click", function (e) {
                 let gs = d3.select(this).data()[0][0]
+                d3.select("#gs-dropdown-box-text").text(gs)
                 moveThumb(gs); // put circle and line on 0
                 hyperparamChanged(e, window.seed, `${gs}.0`);
-                document.getElementById("guidance-scale-control-dropdown-select").selectedIndex = (gs<=1)?gs:((gs==7)?2:3)
             })
 
 d3.select("#latent-denoiser-l3-expl-container")

js/description.js

@@ -39,7 +39,7 @@ d3.select("#description")
             .text("How does Stable Diffusion work?")
 d3.select("#description-section-how-work")
     .append("p")
-        .text('Stable Diffusion first generates a vector representation of an image describing the text prompt. This image representation is then upscaled into a high-resolution image.')
+        .text('Stable Diffusion first generates a vector representation of an image depicted in the text prompt. This image representation is then upscaled into a high-resolution image.')
 d3.select("#description-section-how-work")
     .append("p")
         .html('You may wonder why Stable Diffusion introduces image representation instead of directly generating high-resolution images. The reason is <span style="font-style: italic;">computational cost efficiency</span>. Doing most computations on representation, which summarizes an image in a compact form, significantly reduces the computational cost while maintaining high image quality.')