compare.js

import {compareButtonClicked, drawUmap, setMinMaxCoord} from "./function.js";

let architectureLineWidth = 2;
let architectureCompLineColor = "var(--comp1)"
// prompt box
d3.select("#your-text-prompt")
    .append("div")
        .attr("id", "prompt-box-2")
        .attr("class", "compare")
        .html(window.selectedPromptHtmlCode2)

// prompt - text generator arrow
d3.select("#prompt-text-vector-generator-container")
    .append("svg")
        .attr("id", "prompt-text-vector-generator-svg-2")
        .attr("class", "compare")
        .append("g")
            .append("line")
                .attr("id", "prompt-text-vector-generator-arrow-2")
                .attr("class", "architecture-arrow-comp")
                .attr("x1", "0")
                .attr("y1", "10")
                .attr("x2", "30")
                .attr("y2", "10")
                .attr("marker-end", "url(#architecture-arrow-comp-head)")

d3.select("#architecture-container")
    .append("div")
        .attr("id", "exit-button-container")
        .html('<i class="fa-solid fa-arrow-left" id="exit-button-arrow"></i><span id="exit-button-text">Back to Overview</span>')
        .on("mouseover", () => d3.select("#exit-button-container").style("color", "var(--lightgray)"))
        .on("mouseout", () => d3.select("#exit-button-container").style("color", "#a0a0a0"))
        .on("click", compareButtonClicked)

// text representation generator, image representation refiner hovering
d3.select("#architecture-container")
    .append("div")
        .attr("id", "text-representation-generator-alert-window-container")
        .text("Go back to Overview to expand")

// text generator - image refiner arrow
d3.select("#text-vector-generator-latent-denoiser-container")
    .append("svg")
        .attr("id", "text-vector-generator-latent-denoiser-svg-2")
        .attr("class", "architecture-svg compare")
        .append("g")
            .append("path")
                .attr("id", "text-vector-generator-latent-denoiser-arrow-2")
                .attr("class", "architecture-arrow-comp")
                .attr("d", "M 0 10 L 123 10")
                .attr("marker-end", "url(#architecture-arrow-comp-head)")

// cycle
d3.select("#architecture-container")
    .append("div")
        .attr("id", "latent-denoiser-cycle-container-2")
        .attr("class", "architecture-component-container compare")
        .append("svg")
            .attr("id", "latent-denoiser-cycle-svg-2")
            .attr("class", "architecture-svg")
            .append("g")
                .append("path")
                    .attr("id", "latent-denoiser-cycle-2")
                    .attr("class", "architecture-dashed")
                    .attr("stroke-width", architectureLineWidth)
                    .attr("stroke", architectureCompLineColor)
                    .attr("marker-end", "url(#architecture-arrow-comp-head)")
                    .attr("fill", "none")
                    .attr("d", "M 230 10 l 43,0 l0 -53 a5,5 0 0 0 -5,-5 l-213,0 a5,5 0 0 0 -5,5 l0,34 a5,5 0 0 0 5,5 l20,0")
                    .style("animation-name", "latent-denoiser-cycle-animation")
                    .style("animation-play-state", "paused")

// random noise text
d3.select("#architecture-container")
    .append("div")
        .attr("id", "timestep-0-random-noise-container-2")
        .attr("class", "compare")
d3.select("#timestep-0-random-noise-container-2")
    .append("svg")
        .attr("id", "timestep-0-random-noise-svg-2")
        .append("g")
        .append("path")
            .attr("id", "timestep-0-random-noise-line")
            .attr("d", "M0 0 a5,5 0 0 1 -5,5 l-5 0")
            .attr("stroke-width", architectureLineWidth)
            .attr("stroke", architectureCompLineColor)
            .attr("fill", "none")
d3.select("#timestep-0-random-noise-container-2")
    .append("div")
    .attr("id", "timestep-0-random-noise-expl-comp")
d3.select("#timestep-0-random-noise-expl-comp")
    .append("div")
        .attr("id", "timestep-0-random-noise-expl-comp-1")
        .text("Same random noise")
d3.select("#timestep-0-random-noise-expl-comp")
    .append("div")
        .attr("id", "timestep-0-random-noise-expl-comp-2")
        .text("at timestep 0")

// refined representation 
d3.select("#architecture-container")
    .append("div")
        .attr("id", "improved-latent-container-2")
        .attr("class", "architecture-component-container compare")
        .append("img")
            .attr("id", "improved-latent-img-2")
            .attr("src", `./assets/latent_viz/${window.selectedPrompt2}/${window.seed}_${window.gs}_${timestep}.jpg`)

// umap 
d3.select("#architecture-container")
    .append("div")
        .attr("id", "global-umap-svg-container")
        .attr("class", "compare")
        .append("svg")
            .attr("id", "global-umap-svg")
d3.select("#global-umap-svg-container")
    .append("div")
        .attr("id", "global-umap-title-container")
        .append("div")
            .attr("id", "global-umap-title-1")
            .text("Evolution Trajectory")
d3.select("#global-umap-title-container")
        .append("div")
            .attr("id", "global-umap-title-2")
            .text("Image representations projected onto 2D space")
d3.select("#architecture-container")
    .append("div")
        .attr("id", "global-umap-unscaled-svg-container")
        .attr("class", "compare")
        .append("svg")
            .attr("id", "global-umap-unscaled-svg")
                .append("rect")
                    .attr("width", "150")
                    .attr("height", "150")
                    .attr("x", "1")
                    .attr("y", "7.5")
                    .attr("fill", "none")
                    .attr("stroke", "#e0e0e0")
d3.select("#global-umap-unscaled-svg").append("line").attr("id", "global-umap-highlight-line-1")
d3.select("#global-umap-unscaled-svg").append("line").attr("id", "global-umap-highlight-line-2")
d3.select("#global-umap-unscaled-svg")
    .append("defs")
        .attr("id", "umap-gradient-defs")
        .append("linearGradient")
            .attr("id", "umap-gradient-1")
            .attr("gradientUnits", "userSpaceOnUse")
            .attr("x1", "76")
            .attr("y1", "0")
            .attr("x2", "76")
            .attr("y2", "0")
            .selectAll("stop")
            .data([["0%", "#f4a58220"],["100%","#f4a582ff"]])
            .enter()
            .append("stop")
                .attr("offset", d=>d[0])
                .attr("stop-color", d=>d[1])
d3.select("#umap-gradient-defs")
    .append("linearGradient")
        .attr("id", "umap-gradient-2")
        .attr("gradientUnits", "userSpaceOnUse")
        .attr("x1", "76")
        .attr("y1", "165")
        .attr("x2", "76")
        .attr("y2", "165")
        .selectAll("stop")
        .data([["0%", "#92c5de20"],["100%","#92c5deff"]])
        .enter()
        .append("stop")
            .attr("offset", d=>d[0])
            .attr("stop-color", d=>d[1])
d3.select("#global-umap-svg").append("g").attr("id", "global-umap-g-1")
d3.select("#global-umap-svg").append("g").attr("id", "global-umap-g-2")
d3.json("./assets/umap/umap_0.99_15_0.json").then(data => {
    window.umapData = data
    setMinMaxCoord();
    drawUmap()
})
d3.select("#architecture-container")
    .append("div")
        .attr("id", "global-umap-zoom-button-container")
d3.select("#global-umap-zoom-button-container")
    .append("div")
        .attr("id", "global-umap-zoom-in-button")
        .text("+")
d3.select("#global-umap-zoom-button-container")
    .append("div")
        .attr("id", "global-umap-zoom-out-button")
        .text("-")
d3.select("#global-umap-zoom-button-container")
    .append("div")
        .attr("id", "global-umap-zoom-text")
        .text("100%")

// upscale arrow
d3.select("#architecture-container")
    .append("div")
        .attr("id", "improved-latent-generated-image-container-2")
        .attr("class", "architecture-component-container architecture-arrow-container compare")
        .append("svg")
            .attr("id", "improved-latent-generated-image-svg-2")
            .append("g")
                .append("line")
                    .attr("id", "improved-latent-generated-image-arrow-2")
                    .attr("class", "architecture-arrow-comp")
                    .attr("x1", "0")
                    .attr("y1", "10")
                    .attr("x2", "48")
                    .attr("y2", "10")
                    .attr("marker-end", "url(#architecture-arrow-comp-head)")
d3.select("#improved-latent-generated-image-container-2")
    .append("div")
        .attr("id", "improved-latent-generated-image-text-2")
        .text("Upscale")

// generated image
d3.select("#architecture-container")
    .append("div")
        .attr("id", "generated-image-container-2")
        .attr("class", "architecture-component-container text-vector-generator-expand-move-to-right  denoise-latent-expand-move-to-right compare")
        .append("img")
            .attr("id", "generated-image-2")
            .attr("src", `./assets/img/${window.selectedPrompt2}/${window.seed}_${window.gs}_${window.timestep}.jpg`)