Various Improvements

.gitignore

@@ -0,0 +1 @@
+.DS_Store

assets/captions.json

@@ -0,0 +1 @@
+[{"caption": "A  photograph  of  the  inside of  a  subway  train. There are  raccoons  sitting  on  the seats.   One  of  them  is  reading a newspaper. The window shows  the  city  in  the  background.", "src": "./assets/images/gallery/A  photograph  of  the  inside of  a  subway  train. There are  raccoons  sitting  on  the seats.   One  of  them  is  reading a newspaper. The window shows  the  city  in  the  background._sr.jpg"}, {"caption": "A  portrait  of  a  man  wearing sunglasses and a business suit, painting in pop art style.", "src": "./assets/images/gallery/A  portrait  of  a  man  wearing sunglasses and a business suit, painting in pop art style._sr.jpg"}, {"caption": "A ballet dancer made from rope.", "src": "./assets/images/gallery/A ballet dancer made from rope..jpg"}, {"caption": "A bear riding a bicycle, with a bird perched on the handlebars.", "src": "./assets/images/gallery/A bear riding a bicycle, with a bird perched on the handlebars._1_sr.jpg"}, {"caption": "A cake made of macarons in a heart shape", "src": "./assets/images/gallery/A cake made of macarons in a heart shape_1_sr.jpg"}, {"caption": "A cake made of macarons in a pineapple shape", "src": "./assets/images/gallery/A cake made of macarons in a pineapple shape_1_sr.jpg"}, {"caption": "A cake made of macarons in a unicorn shape", "src": "./assets/images/gallery/A cake made of macarons in a unicorn shape_1_sr.jpg"}, {"caption": "A cat and a dog. Canon camera. 10mm lens", "src": "./assets/images/gallery/A cat and a dog. Canon camera. 10mm lens_5_sr.jpg"}, {"caption": "A cat playing a game of chess against itself. Hyper sharp. Award winning. Canon camera. 10mm lens", "src": "./assets/images/gallery/A cat playing a game of chess against itself. Hyper sharp. Award winning. Canon camera. 10mm lens_9_sr.jpg"}, {"caption": "A close up, sharp photo of a pink flower.", "src": "./assets/images/gallery/A close up, sharp photo of a pink flower..jpg"}, {"caption": "A fluffy baby sloth with a knitted hat trying to figure out a laptop, cluse up.", "src": "./assets/images/gallery/A fluffy baby sloth with a knitted hat trying to figure out a laptop, cluse up..jpg"}, {"caption": "A futuristic city with flying cars.", "src": "./assets/images/gallery/A futuristic city with flying cars._1_sr.jpg"}, {"caption": "A high contrast portrait photo of a fluffy hamster wearing an orange beanie and sunglasses holding a sign that says ", "src": "./assets/images/gallery/A high contrast portrait photo of a fluffy hamster wearing an orange beanie and sunglasses holding a sign that says _Let's PAINT!__2_sr.jpg"}, {"caption": "A large present with a red rib-bon to the left of a Christmastree.", "src": "./assets/images/gallery/A large present with a red rib-bon to the left of a Christmastree._sr.jpg"}, {"caption": "A painting of a canal in Venice", "src": "./assets/images/gallery/A painting of a canal in Venice.jpg"}, {"caption": "A photo of a panda doing yoga on a yoga mat.", "src": "./assets/images/gallery/A photo of a panda doing yoga on a yoga mat..jpg"}, {"caption": "A rabbit playing the violin", "src": "./assets/images/gallery/A rabbit playing the violin.jpg"}, {"caption": "A real flamingo reading a large open book. a big stack of books is piled up next to it. dslr photograph.", "src": "./assets/images/gallery/A real flamingo reading a large open book. a big stack of books is piled up next to it. dslr photograph._1_sr.jpg"}, {"caption": "A shallow focus photography of a lamb in a wine glass.", "src": "./assets/images/gallery/A shallow focus photography of a lamb in a wine glass._1_sr.jpg"}, {"caption": "A striking photo of a lighthouse at sunset.", "src": "./assets/images/gallery/A striking photo of a lighthouse at sunset..jpg"}, {"caption": "A surrealist painting of a robot making coffee.", "src": "./assets/images/gallery/A surrealist painting of a robot making coffee..jpg"}, {"caption": "A tilt shift macro shot of a tiny Christmas town", "src": "./assets/images/gallery/A tilt shift macro shot of a tiny Christmas town_sr.jpg"}, {"caption": "An abstract, flowery painting", "src": "./assets/images/gallery/An abstract, flowery painting_.jpg"}, {"caption": "An art gallery displaying Monet paintings. The art gallery is flooded. Robots are going around the art gallery using paddle boards", "src": "./assets/images/gallery/An art gallery displaying Monet paintings. The art gallery is flooded. Robots are going around the art gallery using paddle boards.jpg"}, {"caption": "An artistic black and white street photograph of a French cafe", "src": "./assets/images/gallery/An artistic black and white street photograph of a French cafe.jpg"}, {"caption": "An oil painting of a dancer in a red dress.", "src": "./assets/images/gallery/An oil painting of a dancer in a red dress..jpg"}, {"caption": "High-contrast  image  of  the word  'WOMBAT'   writtenwith thick colored graffiti letters on a white wall with dramatic splashes of paint", "src": "./assets/images/gallery/High-contrast  image  of  the word  'WOMBAT'   writtenwith thick colored graffiti letters on a white wall with dramatic splashes of paint_sr.jpg"}, {"caption": "Manhattan skyline made out of bread.", "src": "./assets/images/gallery/Manhattan skyline made out of bread..jpg"}, {"caption": "Portrait of a well-dressed raccoon, oil painting in the styleof Rembrandt", "src": "./assets/images/gallery/Portrait of a well-dressed raccoon, oil painting in the styleof Rembrandt_sr.jpg"}, {"caption": "Rainbow coloured penguin", "src": "./assets/images/gallery/Rainbow coloured penguin_2_sr.jpg"}, {"caption": "The New York skyline, with the great pyramid in the foreground and Mount Everest in the background.", "src": "./assets/images/gallery/The New York skyline, with the great pyramid in the foreground and Mount Everest in the background._sr.jpg"}, {"caption": "The saying 'BE EXCELLENT TO EACH OTHER' written in a stained glass window.", "src": "./assets/images/gallery/The saying 'BE EXCELLENT TO EACH OTHER' written in a stained glass window._sr.jpg"}, {"caption": "Three  elephants  standing  ontop of each other.", "src": "./assets/images/gallery/Three  elephants  standing  ontop of each other._sr.jpg"}, {"caption": "Three dogs celebrating Christmas in Time square", "src": "./assets/images/gallery/Three dogs celebrating Christmas in Time square_1_sr.jpg"}, {"caption": "Two  baseballs  to  the  left  of three tennis balls.", "src": "./assets/images/gallery/Two  baseballs  to  the  left  of three tennis balls._sr.jpg"}, {"caption": "Two cats doing research", "src": "./assets/images/gallery/Two cats doing research_7_sr.jpg"}, {"caption": "Two cups of coffee, one with latte  art  of  yin  yang  symbol. The  other  has  latter art of a heart.", "src": "./assets/images/gallery/Two cups of coffee, one with latte  art  of  yin  yang  symbol. The  other  has  latter art of a heart._.jpg"}]

styles.css → assets/css/styles.css

@@ -203,7 +203,7 @@ div.authors {
 
 div.authors p {
   text-align: center;
-  max-width 1000px;
+  max-width: 1000px;
   margin: 0;
   padding: 0;
 }

assets/scripts/index.js

@@ -0,0 +1,258 @@
+function setup() {
+    logo_images = [
+        {
+            src: './assets/images/logo/muse_cake_1.jpg',
+            caption: 'A birthday cake with "Muse" written on it.',
+        },
+        {
+            src: './assets/images/logo/muse_fire.jpg',
+            caption: 'A fireplace where the word "Muse" is spelled in the flames.',
+        },
+        {
+            src: './assets/images/logo/muse_fountain_pen.jpg',
+            caption: 'The word "Muse" drawn fluently on paper with a fountain pen.',
+        },
+        {
+            src: './assets/images/logo/muse_cupcakes.jpg',
+            caption:
+                'a large array of colorful cupcakes, arranged on a maple table to spell "Muse"',
+        },
+        {
+            src: './assets/images/logo/muse_latte.jpg',
+            caption: 'A latte with "Muse" written in latte art',
+        },
+        {
+            src: './assets/images/logo/muse_corgi.jpg',
+            caption: 'A Welsh corgi holding a sign in its mouth that says "Muse".',
+        },
+        {
+            src: './assets/images/logo/muse_fish.jpg',
+            caption: 'A school of fish swirling around in the ocean to spell the letters "Muse".',
+        },
+        {
+            src: './assets/images/logo/muse_van_gogh.jpg',
+            caption: 'The word "Muse" painted on canvas by Vincent van Gogh.',
+        },
+    ];
+
+    // Load captions.json and populate gallery_images
+    $.getJSON('./assets/captions.json', function (data) {
+        gallery_images = data;
+        setTimeout(randomSwapImage, 6000, '#gallery0');
+        setTimeout(randomSwapImage, 1000, '#gallery1');
+        setupFlipGalleryBehavior();
+    });
+}
+
+function setupFlipGalleryBehavior() {
+    lastCardFlippedIdx = {
+        gallery0: -1,
+        gallery1: -1,
+    };
+
+    lastCardFlippedLastSwapTime = {
+        gallery0: -1,
+        gallery1: -1,
+    };
+
+    $('.flipcard').flip({
+        trigger: 'manual',
+        reverse: false,
+    });
+
+    for (id = 0; id < 8; id++) {
+        setupGallery1(id);
+    }
+
+    $('#gallery0 #fig0').click(function () {
+        randomSwapImageWithId('#gallery0', 0);
+    });
+
+    compositionalAnimalsManualClicked = false;
+    compositionalMadeOfManualClicked = false;
+
+    comp_files = {
+        'Original (with mask)': './assets/images/inpaint/boston_masked.jpg',
+        '"New York in the background"': './assets/images/inpaint/boston_nyc.jpg',
+        '"Paris in the background"': './assets/images/inpaint/boston_paris.jpg',
+        '"San Francisco in the background"': './assets/images/inpaint/boston_sf.jpg',
+    };
+
+    $('#compositional_animals p.selectable span').click(function () {
+        $(this).siblings().removeClass('selected');
+        $(this).addClass('selected');
+        updateComposition('#compositional_animals');
+        compositionalAnimalsManualClicked = true;
+    });
+
+    $('#compositional_madeof_img').click(function () {
+        updateComposition('#compositional_madeof');
+        compositionalAnimalsManualClicked = true;
+    });
+
+    $('#compositional_madeof p.selectable span').click(function () {
+        $(this).siblings().removeClass('selected');
+        $(this).addClass('selected');
+        updateComposition('#compositional_madeof');
+        compositionalMadeOfManualClicked = true;
+    });
+}
+
+function checkIfImageIsVisible(name, image) {
+    numCards = $(name + ' .flipcard:visible').size();
+    for (var cardIdx = 0; cardIdx < numCards; ++cardIdx) {
+        var isFlipped = $(name + ' #fig' + cardIdx).data('flip-model').isFlipped;
+        if (!isFlipped) {
+            src = $(name + ' #fig' + cardIdx + ' div.front figure img').attr('src');
+        } else {
+            src = $(name + ' #fig' + cardIdx + ' div.back figure img').attr('src');
+        }
+
+        if (image.src == src) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function getNextImage(name) {
+    // different galleries have different sources of imagery.
+    if (name == '#gallery0') {
+        img_src = logo_images;
+    } else {
+        img_src = gallery_images;
+    }
+    while (true && img_src.length > 0) {
+        randomImageIdx = Math.floor(Math.random() * img_src.length);
+        if (!checkIfImageIsVisible(name, img_src[randomImageIdx])) {
+            return img_src[randomImageIdx];
+        }
+    }
+}
+
+function randomSwapImageWithId(name, randomCardIdx) {
+    numCards = $(name + ' .flipcard:visible').size();
+
+    image = getNextImage(name);
+
+    const d = new Date();
+    let currentTime = d.getTime();
+    lastCardFlippedIdx[name] = randomCardIdx;
+    lastCardFlippedLastSwapTime[name] = currentTime;
+
+    var isFlipped = $(name + ' #fig' + randomCardIdx).data('flip-model').isFlipped;
+    if (!isFlipped) {
+        $(name + ' #fig' + randomCardIdx + ' div.back figure img').attr('src', image.src);
+        $(name + ' #fig' + randomCardIdx + ' div.back figure figcaption').text(image.caption);
+    } else {
+        $(name + ' #fig' + randomCardIdx + ' div.front figure img').attr('src', image.src);
+        $(name + ' #fig' + randomCardIdx + ' div.front figure figcaption').text(image.caption);
+    }
+
+    $(name + ' #fig' + randomCardIdx).flip('toggle');
+}
+
+function randomSwapImage(name) {
+    numCards = $(name + ' .flipcard:visible').size();
+
+    const d = new Date();
+    if (d.getTime() - lastCardFlippedIdx[name] < 5000) {
+        setTimeout(randomSwapImage, 1000, name);
+        return;
+    }
+
+    do {
+        randomCardIdx = Math.floor(Math.random() * numCards);
+        if (numCards == 1) {
+            break;
+        }
+    } while (randomCardIdx == lastCardFlippedIdx[name]);
+
+    randomSwapImageWithId(name, randomCardIdx);
+    setTimeout(randomSwapImage, 3000, name);
+}
+
+function setupGallery1(id) {
+    randomSwapImageWithId('#gallery1', id);
+    $('#gallery1 #fig' + id).click(function () {
+        randomSwapImageWithId('#gallery1', id);
+    });
+}
+
+function updateComposition(name) {
+    var compositionSpans = $(name + ' p span.selected')
+        .map(function () {
+            return $(this).text();
+        })
+        .get();
+    var compositionText = '';
+    for (
+        var compositionSpansIdx = 0;
+        compositionSpansIdx < compositionSpans.length;
+        ++compositionSpansIdx
+    ) {
+        if (compositionSpansIdx > 0) {
+            compositionText += ' ';
+        }
+        compositionText += compositionSpans[compositionSpansIdx];
+    }
+    if (name == '#compositional_madeof') {
+        if (compositionText == 'Original') {
+            $(name + '_img').attr('src', './assets/images/edit_opt/orig.gif');
+        } else {
+            // Generate a random index that is not the one already selected
+            randImgIdx = '/'; // something guaranteed to be in the path
+            cur_src = $(name + '_img').attr('src');
+            while (cur_src.search(randImgIdx) != -1) {
+                randImgIdx = Math.floor(Math.random() * 4);
+            }
+            first_space = compositionText.search(' ');
+            file = compositionText.slice(first_space + 1, -2).replaceAll(' ', '-');
+            $(name + '_img').attr(
+                'src',
+                './assets/images/edit_opt/' + file + '_' + randImgIdx + '.gif'
+            );
+        }
+    } else if (name == '#compositional_animals') {
+        randImgIdx = Math.floor(Math.random() * 4);
+        $(name + '_img').attr('src', comp_files[compositionText]);
+    }
+}
+
+function randomComposition(name) {
+    if (name == '#compositional_animals' && compositionalAnimalsManualClicked == true) {
+        compositionalAnimalsManualClicked = false;
+        setTimeout(randomComposition, 4000, name);
+        return;
+    } else if (name == '#compositional_madeof' && compositionalMadeOfManualClicked == true) {
+        compositionalMadeOfManualClicked = false;
+        setTimeout(randomComposition, 4000, name);
+        return;
+    }
+
+    var compositionPs = $(name + ' p.selectable').toArray();
+    var compositionOptions = [];
+    for (var i = 0; i < compositionPs.length; ++i) {
+        var compositionSpanSelected = $(compositionPs[i]).children('span.selected');
+        var compositionSpans = $(compositionPs[i]).children('span').not('span.selected').toArray();
+        for (var j = 0; j < compositionSpans.length; ++j) {
+            compositionOption = {
+                p: compositionPs[i],
+                span_selected: compositionSpanSelected,
+                span_option: $(compositionSpans[j]),
+            };
+            compositionOptions.push(compositionOption);
+        }
+    }
+
+    randomCompositionOptionIdx = Math.floor(Math.random() * compositionOptions.length);
+    randomCompositionOption = compositionOptions[randomCompositionOptionIdx];
+
+    randomCompositionOption.span_selected.toggleClass('selected');
+    randomCompositionOption.span_option.toggleClass('selected');
+
+    updateComposition(name);
+    setTimeout(randomComposition, 4000, name);
+}
+
+setup();