diff --git a/docs/041_MCv1_MCv2_v2.png b/docs/041_MCv1_MCv2_v2.png new file mode 100644 index 0000000..b9a2c8c Binary files /dev/null and b/docs/041_MCv1_MCv2_v2.png differ diff --git a/docs/0432_tsne_v3.png b/docs/0432_tsne_v3.png new file mode 100644 index 0000000..2ee8233 Binary files /dev/null and b/docs/0432_tsne_v3.png differ diff --git a/docs/0433_iclr_emb_similarity_medical_merged.png b/docs/0433_iclr_emb_similarity_medical_merged.png new file mode 100644 index 0000000..f85c965 Binary files /dev/null and b/docs/0433_iclr_emb_similarity_medical_merged.png differ diff --git a/docs/0433_iclr_emb_similarity_natural_merged.png b/docs/0433_iclr_emb_similarity_natural_merged.png new file mode 100644 index 0000000..66799bd Binary files /dev/null and b/docs/0433_iclr_emb_similarity_natural_merged.png differ diff --git a/docs/044v_visualise_bas_and_ground_truth.png b/docs/044v_visualise_bas_and_ground_truth.png new file mode 100644 index 0000000..6e7e0ab Binary files /dev/null and b/docs/044v_visualise_bas_and_ground_truth.png differ diff --git a/docs/ablation_per_img_diverse_vs_one_cat_hat.png b/docs/ablation_per_img_diverse_vs_one_cat_hat.png new file mode 100644 index 0000000..4fd61ed Binary files /dev/null and b/docs/ablation_per_img_diverse_vs_one_cat_hat.png differ diff --git a/docs/banana_basket/banana_basket_*.png b/docs/banana_basket/banana_basket_*.png new file mode 100644 index 0000000..795ec17 Binary files /dev/null and b/docs/banana_basket/banana_basket_*.png differ diff --git a/docs/banana_basket/banana_basket_attention-mask.png b/docs/banana_basket/banana_basket_attention-mask.png new file mode 100644 index 0000000..01b87c2 Binary files /dev/null and b/docs/banana_basket/banana_basket_attention-mask.png differ diff --git a/docs/banana_basket/banana_basket_banana-attention.png b/docs/banana_basket/banana_basket_banana-attention.png new file mode 100644 index 0000000..d61ec8a Binary files /dev/null and b/docs/banana_basket/banana_basket_banana-attention.png differ diff --git a/docs/banana_basket/banana_basket_basket-attention.png b/docs/banana_basket/banana_basket_basket-attention.png new file mode 100644 index 0000000..0eecf89 Binary files /dev/null and b/docs/banana_basket/banana_basket_basket-attention.png differ diff --git a/docs/banana_basket/banana_basket_green-grapes.png b/docs/banana_basket/banana_basket_green-grapes.png new file mode 100644 index 0000000..356e79e Binary files /dev/null and b/docs/banana_basket/banana_basket_green-grapes.png differ diff --git a/docs/banana_basket/banana_basket_photo.png b/docs/banana_basket/banana_basket_photo.png new file mode 100644 index 0000000..795ec17 Binary files /dev/null and b/docs/banana_basket/banana_basket_photo.png differ diff --git a/docs/banana_basket/banana_basket_pottery.png b/docs/banana_basket/banana_basket_pottery.png new file mode 100644 index 0000000..bd52b13 Binary files /dev/null and b/docs/banana_basket/banana_basket_pottery.png differ diff --git a/docs/banana_basket/banana_basket_stainless-pot.png b/docs/banana_basket/banana_basket_stainless-pot.png new file mode 100644 index 0000000..1f9ecd2 Binary files /dev/null and b/docs/banana_basket/banana_basket_stainless-pot.png differ diff --git a/docs/banana_basket/banana_basket_yellow-@.png b/docs/banana_basket/banana_basket_yellow-@.png new file mode 100644 index 0000000..795ec17 Binary files /dev/null and b/docs/banana_basket/banana_basket_yellow-@.png differ diff --git a/docs/banana_basket/banana_basket_yellow-pineapple.png b/docs/banana_basket/banana_basket_yellow-pineapple.png new file mode 100644 index 0000000..2a05ce1 Binary files /dev/null and b/docs/banana_basket/banana_basket_yellow-pineapple.png differ diff --git a/docs/lge_cmr/lge_cmr_!.png b/docs/lge_cmr/lge_cmr_!.png new file mode 100644 index 0000000..c7e8d86 Binary files /dev/null and b/docs/lge_cmr/lge_cmr_!.png differ diff --git a/docs/lge_cmr/lge_cmr_attention-mask.png b/docs/lge_cmr/lge_cmr_attention-mask.png new file mode 100644 index 0000000..7b8ea44 Binary files /dev/null and b/docs/lge_cmr/lge_cmr_attention-mask.png differ diff --git a/docs/lge_cmr/lge_cmr_cavity-attention.png b/docs/lge_cmr/lge_cmr_cavity-attention.png new file mode 100644 index 0000000..19b1dbf Binary files /dev/null and b/docs/lge_cmr/lge_cmr_cavity-attention.png differ diff --git a/docs/lge_cmr/lge_cmr_cmri-attention.png b/docs/lge_cmr/lge_cmr_cmri-attention.png new file mode 100644 index 0000000..815b76b Binary files /dev/null and b/docs/lge_cmr/lge_cmr_cmri-attention.png differ diff --git a/docs/lge_cmr/lge_cmr_photo.png b/docs/lge_cmr/lge_cmr_photo.png new file mode 100644 index 0000000..6fe3229 Binary files /dev/null and b/docs/lge_cmr/lge_cmr_photo.png differ diff --git a/docs/lge_cmr/lge_cmr_round-*.png b/docs/lge_cmr/lge_cmr_round-*.png new file mode 100644 index 0000000..7561dbb Binary files /dev/null and b/docs/lge_cmr/lge_cmr_round-*.png differ diff --git a/docs/lge_cmr/lge_cmr_scar-attention.png b/docs/lge_cmr/lge_cmr_scar-attention.png new file mode 100644 index 0000000..b075b36 Binary files /dev/null and b/docs/lge_cmr/lge_cmr_scar-attention.png differ diff --git a/docs/lge_cmr/lge_cmr_thin-@.png b/docs/lge_cmr/lge_cmr_thin-@.png new file mode 100644 index 0000000..0344a36 Binary files /dev/null and b/docs/lge_cmr/lge_cmr_thin-@.png differ diff --git a/docs/lge_cmr/lge_cmr_yellow-lines-attention.png b/docs/lge_cmr/lge_cmr_yellow-lines-attention.png new file mode 100644 index 0000000..0cee53f Binary files /dev/null and b/docs/lge_cmr/lge_cmr_yellow-lines-attention.png differ diff --git a/docs/lge_cmr/lge_cmr_yellow-lines.png b/docs/lge_cmr/lge_cmr_yellow-lines.png new file mode 100644 index 0000000..23a1abb Binary files /dev/null and b/docs/lge_cmr/lge_cmr_yellow-lines.png differ diff --git a/docs/method.png b/docs/method.png new file mode 100644 index 0000000..5a882f9 Binary files /dev/null and b/docs/method.png differ diff --git a/docs/ms_cxr/ms_cxr_attention-mask.png b/docs/ms_cxr/ms_cxr_attention-mask.png new file mode 100644 index 0000000..c441a09 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_attention-mask.png differ diff --git a/docs/ms_cxr/ms_cxr_black-@.png b/docs/ms_cxr/ms_cxr_black-@.png new file mode 100644 index 0000000..fe23b82 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_black-@.png differ diff --git a/docs/ms_cxr/ms_cxr_chest-x-ray-attention.png b/docs/ms_cxr/ms_cxr_chest-x-ray-attention.png new file mode 100644 index 0000000..d98726e Binary files /dev/null and b/docs/ms_cxr/ms_cxr_chest-x-ray-attention.png differ diff --git a/docs/ms_cxr/ms_cxr_consolidation-attention.png b/docs/ms_cxr/ms_cxr_consolidation-attention.png new file mode 100644 index 0000000..35fb873 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_consolidation-attention.png differ diff --git a/docs/ms_cxr/ms_cxr_lung-attention.png b/docs/ms_cxr/ms_cxr_lung-attention.png new file mode 100644 index 0000000..f606561 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_lung-attention.png differ diff --git a/docs/ms_cxr/ms_cxr_photo.png b/docs/ms_cxr/ms_cxr_photo.png new file mode 100644 index 0000000..3b97cb5 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_photo.png differ diff --git a/docs/ms_cxr/ms_cxr_remove black-@.png b/docs/ms_cxr/ms_cxr_remove black-@.png new file mode 100644 index 0000000..59d8542 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_remove black-@.png differ diff --git a/docs/ms_cxr/ms_cxr_remove smoky-*.png b/docs/ms_cxr/ms_cxr_remove smoky-*.png new file mode 100644 index 0000000..276edbf Binary files /dev/null and b/docs/ms_cxr/ms_cxr_remove smoky-*.png differ diff --git a/docs/ms_cxr/ms_cxr_remove white-!.png b/docs/ms_cxr/ms_cxr_remove white-!.png new file mode 100644 index 0000000..6222792 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_remove white-!.png differ diff --git a/docs/ms_cxr/ms_cxr_smoky-*.png b/docs/ms_cxr/ms_cxr_smoky-*.png new file mode 100644 index 0000000..7b995d7 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_smoky-*.png differ diff --git a/docs/ms_cxr/ms_cxr_white-!.png b/docs/ms_cxr/ms_cxr_white-!.png new file mode 100644 index 0000000..06cd274 Binary files /dev/null and b/docs/ms_cxr/ms_cxr_white-!.png differ diff --git a/docs/ours_vs_bas.png b/docs/ours_vs_bas.png new file mode 100644 index 0000000..269b444 Binary files /dev/null and b/docs/ours_vs_bas.png differ diff --git a/docs/ours_vs_bas_chicken.png b/docs/ours_vs_bas_chicken.png new file mode 100644 index 0000000..54b3fc6 Binary files /dev/null and b/docs/ours_vs_bas_chicken.png differ diff --git a/docs/teaser.png b/docs/teaser.png new file mode 100644 index 0000000..5108acf Binary files /dev/null and b/docs/teaser.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_*.png b/docs/teddybear_timesquare/teddybear_timesquare_*.png new file mode 100644 index 0000000..3b7339e Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_*.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_@.png b/docs/teddybear_timesquare/teddybear_timesquare_@.png new file mode 100644 index 0000000..3b7339e Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_@.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_attention-mask.png b/docs/teddybear_timesquare/teddybear_timesquare_attention-mask.png new file mode 100644 index 0000000..e6cd745 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_attention-mask.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_blanket.png b/docs/teddybear_timesquare/teddybear_timesquare_blanket.png new file mode 100644 index 0000000..1b03657 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_blanket.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_cat.png b/docs/teddybear_timesquare/teddybear_timesquare_cat.png new file mode 100644 index 0000000..42a0ff0 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_cat.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_mask.png b/docs/teddybear_timesquare/teddybear_timesquare_mask.png new file mode 100644 index 0000000..c8d55a2 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_mask.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_panda.png b/docs/teddybear_timesquare/teddybear_timesquare_panda.png new file mode 100644 index 0000000..bb584f2 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_panda.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_photo.png b/docs/teddybear_timesquare/teddybear_timesquare_photo.png new file mode 100644 index 0000000..3b7339e Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_photo.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_skateboard-attention.png b/docs/teddybear_timesquare/teddybear_timesquare_skateboard-attention.png new file mode 100644 index 0000000..eb0efe2 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_skateboard-attention.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_surfboard.png b/docs/teddybear_timesquare/teddybear_timesquare_surfboard.png new file mode 100644 index 0000000..7796037 Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_surfboard.png differ diff --git a/docs/teddybear_timesquare/teddybear_timesquare_teddybear-attention.png b/docs/teddybear_timesquare/teddybear_timesquare_teddybear-attention.png new file mode 100644 index 0000000..89e07fc Binary files /dev/null and b/docs/teddybear_timesquare/teddybear_timesquare_teddybear-attention.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..12cc311 --- /dev/null +++ b/index.html @@ -0,0 +1,201 @@ + + + +MCPL + + + + + + + +
+

An Image is Worth Multiple Words: Learning Object Level Concepts using Multi-Concepts Prompts Learning

+

+ Chen Jin1 + Ryutaro Tanno2 + Amrutha Saseendran1 + Tom Diethe1 + Philip Teare1
+ + 1 AstraZeneca   2 Google DeepMind +

+ +

+ Paper      + Code +

+
+
+
+

Multi-Concept Prompt Learning (MCPL) pioneers the novel task of mask-free text-guided learning for multiple prompts from one scene. Our approach not only enhances current methodologies but also paves the way for novel applications, such as facilitating knowledge discovery through natural language-driven interactions between humans and machines.

+
+ +
+

Abstract

+

Textural Inversion, a prompt learning method, learns a singular embedding for a new "word" to represent image style and appearance, allowing it to be integrated into natural language sentences to generate novel synthesised images. However, identifying and integrating multiple object-level concepts within one scene poses significant challenges even when embeddings for individual concepts are attainable. This is further confirmed by our empirical tests. To address this challenge, we introduce a framework for Multi-Concept Prompt Learning (MCPL), where multiple new "words" are simultaneously learned from a single sentence-image pair. To enhance the accuracy of word-concept correlation, we propose three regularization techniques: Attention Masking (AttnMask) to concentrate learning on relevant areas; Prompts Contrastive Loss (PromptCL) to separate the embeddings of different concepts; and Bind adjective (Bind adj.) to associate new "words" with known words. We evaluate via image generation, editing, and attention visualization with diverse images. Extensive quantitative comparisons demonstrate that our method can learn more semantically disentangled concepts with enhanced word-concept correlation. Additionally, we introduce a novel dataset and evaluation protocol tailored for this new task of learning object-level concepts.

+
+ +
+

Learning Multiple Concepts from Single Image and Editing

+

teddybear and skateboard example

+
+
Our method learn multiple new concepts and assuring disentangled and precise prompt-concept correlation (verified with per-prompt attention map).
+
We can then modifying each local concept by replacing the prompts/words to generate novel images (click words below to try editing).
+
+
+ +
+ +
Visuslise
+ attention-mask + of
"a photo of brown * (teddybear-attention) + on a rolling @ (skateboard-attention) at times square". +
+ +
Edit
"brown *   (panda / cat) + on a rolling @   (surfboard / blanket) + at times square."
+
+
+

banana and basket example

+
+ +
Visuslise
+ attention-mask + of
"a photo of brown * (basket-attention) + with yellow @ (banana-attention)". +
+ +
Edit
"brown *   (stainless-pot / pottery) + with yellow-@   (yellow-pineapple / green-grapes) + at times square."
+
+
+
+ +
+

Discovering OOD Concepts from Medical Image and Disentangling

+

Our method opens an avenue for discovering/introducing new concepts the model have not seen before, from abundantly available natural language annotations such as paired textbook figures and captions.

+

cardiac MRI example

+
+
We learn out-of-distribution concepts using biomedical figures and their simplified captions.
+
We can then generate or remove each disentangled prompt to verify the learning of unfamiliar concepts.
+
+
+ +
+ +
Visuslise
+ attention-mask + of
"a photo of + ! (cMRI-attention) with + round * (cavity-attention) + and thin @ (scar-attention) on the side circled by + yellow-lines-attention". +
+ +
Generate
disentangled
+ round-*,
+ thin-@,
+ yellow-lines,
+ !,
+
+
+

chest X-ray example

+
+ +
Visuslise
+ attention-mask + of
"a photo of + white ! (chest-X-ray-attention) and + black @ (lung-attention) + which have smoky * (consolidation-attention)". +
+ +
Generate
disentangled
+ white-!,
+ black-@,
+ smoky-*,
+ or
+ remove white-!,
+ remove black-@,
+ remove smoky-*,
+
+
+
+ + +
+

Method overview

+ +

+ MCPL takes a sentence (top-left) and a sample image (top-right) as input, feeding them into a pre-trained text-guided diffusion model comprising a text encoder \(c_\phi\) and a denoising network \(\epsilon_\theta\). The string's multiple prompts are encoded into a sequence of embeddings which guide the network to generate images \(\tilde{X}_0\) close to the target one \(X_0\). MCPL focuses on learning multiple learnable prompts (coloured texts), updating only the embeddings \(\{v^*\}\) and \(\{v^\&\}\) of the learnable prompts while keeping \(c_\phi\) and \(\epsilon_\theta\) frozen. We introduce Prompts Contrastive Loss (PromptCL) to help separate multiple concepts within learnable embeddings. We also apply Attention Masking (AttnMask), using masks based on the average cross-attention of prompts, to refine prompt learning on images. Optionally we associate each learnable prompt with an adjective (e.g., "brown" and "rolling") to improve control over each learned concept, referred to as Bind adj. +

+
+ +
+

Introducing MCPL-one and MCPL-diverse training strategies

+ +

+ Learning and Composing “ball” and “box”. We learned the concepts of “ball” and “box” using different methods (top row) and composed them into unified scenes (bottom row). We compare three learning methods: Textural Inversion (Gal et al., 2022), which learns each concept separately from isolated images (left); MCPL-one, which jointly learns both concepts from un- cropped examples using a single prompt string (middle); and MCPL-diverse, which advances this by learning both concepts with per-image specific relationships (right). +

+
+ +
+

Ablation studies

+

comparing MCPL-diverse versus MCPL-one

+ +

+ Visual comparison of MCPL-diverse versus MCPL-one in learning per-image different concept tasks (cat with different hat example). As MCPL-diverse are specially designed for such tasks, it outperforms MCPL-one, which fails to capture per image different hat styles. +

+ +

learning more than two concepts from a single image

+ +

+ A qualitative comparison between our method (MCPL-diverse) and mask-based approaches. Our MCPL-diverse, which neither uses mask inputs nor updates model parameters, showed decent results, outperforming most mask-based approaches and was closer to SoTA Break-A-Scene. Images modified from Break-A-Scene (Avrahami et al., 2023). +

+
+ +
+

Quantitative Evaluations Dataset and Results

+

+ We collect both in-distribution natural images and out-of-distribution biomedical images over 16 object-level concepts, with all images containing multiple concepts and object-level masks. +

+ +

+ Visualisation of the prepared ground truth examples (top) and the generated images with Break-A-Scene (bottom). Note that BAS requires segmentation masks as input and employs separate segmentation models to produce masked objects, thus serving as a performance upper-bound. + We compare three baseline methods: 1) Textural Inversion applied to each masked object serving as our best estimate for the unknown disentangled “ground truth” embedding. 2) Break-A-Scene (BAS), the state-of-the-art (SoTA) mask-based multi-concept learning method, serves as a performance upper bound, though it’s not directly comparable. 3) MCPL-all as our naive adaptation of the Textural Inversion method to achieve the multi-concepts learning goal. +

+ +

The t-SNE projection of the learned embeddings

+ +

+ Our method can effectively distinguish all learned concepts compared to Textural Inversion (MCPL-all), the SoTA mask-based learning method, Break-A-Scene, and the masked ’ground truth. +

+ +

Embedding similarity in learned object-level concepts compared to masked “ground truth”

+
+ + +
+

+ We evaluate the embedding similarity of our multi-concept adaptation of Textural Inversion (MCPL-all) and the state-of-the-art (SoTA) mask-based learning method, Break-A-Scene (BAS) by Avrahami et al. (2023), against our regularised versions. The analysis is conducted in both pre-trained text (BERT) and image encoder spaces (CLIP, DINOv1, and DINOv2), with each bar representing an average of 40,000 pairwise cosine similarities. +

+ +
+ + + +
+

BibTex

+

@article{jin2023image,
+   title={An Image is Worth Multiple Words: Learning Object Level Concepts using Multi-Concept Prompt Learning},
+   author={Jin, Chen and Tanno, Ryutaro and Saseendran, Amrutha and Diethe, Tom and Teare, Philip},
+   journal={arXiv preprint arXiv:2310.12274},
+   year={2023}
+ }

+
+
+ + diff --git a/jscript.js b/jscript.js new file mode 100644 index 0000000..09ee6ff --- /dev/null +++ b/jscript.js @@ -0,0 +1,272 @@ +var attns_tt; +var imgedits_tt; +var cur_attn_tt = 0; +var cur_edit_tt = 0; +var image_attn_tt; +var image_edit_tt; + +var attns_bb; +var imgedits_bb; +var cur_attn_bb = 0; +var cur_edit_bb = 0; +var image_attn_bb; +var image_edit_bb; + +var attns_ch; +var imgedits_ch; +var cur_attn_ch = 0; +var cur_edit_ch = 0; +var image_attn_ch; +var image_edit_ch; + +var attns_lge; +var imgedits_lge; +var cur_attn_lge = 0; +var cur_edit_lge = 0; +var image_attn_lge; +var image_edit_lge; + +var attns_ms; +var imgedits_ms; +var cur_attn_ms = 0; +var cur_edit_ms = 0; +var image_attn_ms; +var image_edit_ms; + + +function changeImage(){ + image_attn_tt.src = "./docs/teddybear_timesquare/teddybear_timesquare_" + attns_tt[cur_attn_tt].innerHTML.toLowerCase() + ".png" + image_edit_tt.src = "./docs/teddybear_timesquare/teddybear_timesquare_" + imgedits_tt[cur_edit_tt].innerHTML.toLowerCase() + ".png" + image_attn_bb.src = "./docs/banana_basket/banana_basket_" + attns_bb[cur_attn_bb].innerHTML.toLowerCase() + ".png" + image_edit_bb.src = "./docs/banana_basket/banana_basket_" + imgedits_bb[cur_edit_bb].innerHTML.toLowerCase() + ".png" + image_attn_lge.src = "./docs/lge_cmr/lge_cmr_" + attns_lge[cur_attn_lge].innerHTML.toLowerCase() + ".png" + image_edit_lge.src = "./docs/lge_cmr/lge_cmr_" + imgedits_lge[cur_edit_lge].innerHTML.toLowerCase() + ".png" + image_attn_ms.src = "./docs/ms_cxr/ms_cxr_" + attns_ms[cur_attn_ms].innerHTML.toLowerCase() + ".png" + image_edit_ms.src = "./docs/ms_cxr/ms_cxr_" + imgedits_ms[cur_edit_ms].innerHTML.toLowerCase() + ".png" +} + +function clearStyle_a(elem){ + elem.style.color = '#e55608'; + elem.style.backgroundColor = null; +} + +function clearStyle_b(elem){ + elem.style.color = '#2742dc'; + elem.style.backgroundColor = null; +} + + +function setStyle(elem){ + elem.style.color = '#000000'; + elem.style.backgroundColor = '#f88000'; +} + +function modifyAttn_tt(i){ + + function inner_(){ + if (cur_attn_tt !== i){ + clearStyle_a(attns_tt[cur_attn_tt]); + cur_attn_tt = i; + setStyle(attns_tt[cur_attn_tt]); + changeImage(); + } + } + return inner_ +} + +function modifyImg_tt(i){ + + function inner_(){ + if (cur_edit_tt !== i){ + clearStyle_b(imgedits_tt[cur_edit_tt]); + cur_edit_tt = i; + setStyle(imgedits_tt[cur_edit_tt]); + changeImage(); + } + } + return inner_ +} + +function modifyAttn_bb(i){ + + function inner_(){ + if (cur_attn_bb !== i){ + clearStyle_a(attns_bb[cur_attn_bb]); + cur_attn_bb = i; + setStyle(attns_bb[cur_attn_bb]); + changeImage(); + } + } + return inner_ +} + +function modifyImg_bb(i){ + + function inner_(){ + if (cur_edit_bb !== i){ + clearStyle_b(imgedits_bb[cur_edit_bb]); + cur_edit_bb = i; + setStyle(imgedits_bb[cur_edit_bb]); + changeImage(); + } + } + return inner_ +} + +function modifyAttn_ch(i){ + + function inner_(){ + if (cur_attn_ch !== i){ + clearStyle_a(attns_ch[cur_attn_ch]); + cur_attn_ch = i; + setStyle(attns_ch[cur_attn_ch]); + changeImage(); + } + } + return inner_ +} + +function modifyImg_ch(i){ + + function inner_(){ + if (cur_edit_ch !== i){ + clearStyle_b(imgedits_ch[cur_edit_ch]); + cur_edit_ch = i; + setStyle(imgedits_ch[cur_edit_ch]); + changeImage(); + } + } + return inner_ +} + +function modifyAttn_lge(i){ + + function inner_(){ + if (cur_attn_lge !== i){ + clearStyle_a(attns_lge[cur_attn_lge]); + cur_attn_lge = i; + setStyle(attns_lge[cur_attn_lge]); + changeImage(); + } + } + return inner_ +} + +function modifyImg_lge(i){ + + function inner_(){ + if (cur_edit_lge !== i){ + clearStyle_b(imgedits_lge[cur_edit_lge]); + cur_edit_lge = i; + setStyle(imgedits_lge[cur_edit_lge]); + changeImage(); + } + } + return inner_ +} + +function modifyAttn_ms(i){ + + function inner_(){ + if (cur_attn_ms !== i){ + clearStyle_a(attns_ms[cur_attn_ms]); + cur_attn_ms = i; + setStyle(attns_ms[cur_attn_ms]); + changeImage(); + } + } + return inner_ +} + +function modifyImg_ms(i){ + + function inner_(){ + if (cur_edit_ms !== i){ + clearStyle_b(imgedits_ms[cur_edit_ms]); + cur_edit_ms = i; + setStyle(imgedits_ms[cur_edit_ms]); + changeImage(); + } + } + return inner_ +} + +function set_alpha(slider, fluffy){ + let alpha = 1 - (slider.value - 16) / 52; + let red = Math.round(248 + 7 * alpha); + let green = Math.round(128 + 127 * alpha); + let blue = Math.round(255 * alpha); + fluffy.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')'; +} + +function init() { + image_attn_tt = document.getElementById("attn-img-tt"); + image_edit_tt = document.getElementById("edit-img-tt"); + attns_tt = document.getElementsByClassName("tt-button_a"); + imgedits_tt = document.getElementsByClassName("tt-button_b"); + setStyle(attns_tt[cur_attn_tt]); + setStyle(imgedits_tt[cur_edit_tt]); + for (let i = 0; i < attns_tt.length; ++i){ + attns_tt[i].addEventListener("click", modifyAttn_tt(i)); + } + for (let i = 0; i < imgedits_tt.length; ++i){ + imgedits_tt[i].addEventListener("click", modifyImg_tt(i)); + } + + image_attn_bb = document.getElementById("attn-img-bb"); + image_edit_bb = document.getElementById("edit-img-bb"); + attns_bb = document.getElementsByClassName("bb-button_a"); + imgedits_bb = document.getElementsByClassName("bb-button_b"); + setStyle(attns_bb[cur_attn_bb]); + setStyle(imgedits_bb[cur_edit_bb]); + for (let i = 0; i < attns_bb.length; ++i){ + attns_bb[i].addEventListener("click", modifyAttn_bb(i)); + } + for (let i = 0; i < imgedits_bb.length; ++i){ + imgedits_bb[i].addEventListener("click", modifyImg_bb(i)); + } + + + image_attn_lge = document.getElementById("attn-img-lge"); + image_edit_lge = document.getElementById("edit-img-lge"); + attns_lge = document.getElementsByClassName("lge-button_a"); + imgedits_lge = document.getElementsByClassName("lge-button_b"); + setStyle(attns_lge[cur_attn_lge]); + setStyle(imgedits_lge[cur_edit_lge]); + for (let i = 0; i < attns_lge.length; ++i){ + attns_lge[i].addEventListener("click", modifyAttn_lge(i)); + } + for (let i = 0; i < imgedits_lge.length; ++i){ + imgedits_lge[i].addEventListener("click", modifyImg_lge(i)); + } + + image_attn_ms = document.getElementById("attn-img-ms"); + image_edit_ms = document.getElementById("edit-img-ms"); + attns_ms = document.getElementsByClassName("ms-button_a"); + imgedits_ms = document.getElementsByClassName("ms-button_b"); + setStyle(attns_ms[cur_attn_ms]); + setStyle(imgedits_ms[cur_edit_ms]); + for (let i = 0; i < attns_ms.length; ++i){ + attns_ms[i].addEventListener("click", modifyAttn_ms(i)); + } + for (let i = 0; i < imgedits_ms.length; ++i){ + imgedits_ms[i].addEventListener("click", modifyImg_ms(i)); + } + + + let slider = document.getElementById("range_bunny"); + let image_bunny = document.getElementById("bunny-img"); + let fluffy = document.getElementById("fluffy"); + set_alpha(slider, fluffy) + slider.oninput = function() { + // 248, 128, 0 + image_bunny.src = "./docs/teddybear_timesquare/teddybear_timesquare_" + String(slider.value).padStart(2, '0') + ".png"; + set_alpha(slider, fluffy) + + } + + +} +document.addEventListener("DOMContentLoaded", () => { + init(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..6543a08 --- /dev/null +++ b/style.css @@ -0,0 +1,477 @@ +/* CSS Document */ +@import url(https://fonts.googleapis.com/css?family=Open+Sans); + +body { + font-family: 'Open-Sans', sans-serif; + font-weight: 300; + background-color: #fff; +} +.content { + width: 1000px; + padding: 25px 50px; + margin: 25px auto; + background-color: white; + box-shadow: 0px 0px 10px #999; + border-radius: 15px; + font-family: "Google Sans"; +} +.contentblock { + width: 950px; + margin: 0 auto; + padding: 0; + border-spacing: 25px 0; +} +.contentblock td { + background-color: #fff; + padding: 25px 50px; + vertical-align: top; + box-shadow: 0px 0px 10px #999; + border-radius: 15px; +} +a, a:visited { + color: #224b8d; + font-weight: 300; +} +#authors { + text-align: center; + margin-bottom: 20px; + font-size: 20px; +} +#conference { + text-align: center; + margin-bottom: 20px; + font-style: italic; +} +#authors a { + text-decoration: none; color: rgb(0, 102, 255); + margin: 0 10px; +} +h1 { + text-align: center; + font-size: 35px; + font-weight: 300; +} +h2 { + font-size: 30px; + font-weight: 300; +} +h3 { + font-size: 26px; + font-weight: 300; + font-style: italic; +} +h4 { + font-size: 20px; + font-weight: 50; + margin-top: 5px; + margin-bottom: 1px; +} +code { + display: block; + /*padding: 10px;*/ + margin-top: 5px; + margin-bottom: 1px; + /*margin: 1px 10px;*/ +} +p { + line-height: 25px; + text-align: justify; +} +p code { + display: inline; + padding: 0; + margin: 0; +} +#teasers { + margin: 0 auto; +} +#teasers td { + margin: 0 auto; + text-align: center; + padding: 5px; +} +#teasers img { + width: 250px; +} +#results img { + width: 133px; +} +#seeintodark { + margin: 0 auto; +} +#sift { + margin: 0 auto; +} +#sift img { + width: 250px; +} +.downloadpaper { + padding-left: 20px; + float: right; + text-align: center; +} +.downloadpaper a { + font-weight: bold; + text-align: center; +} +.teaser-img { + width: 80%; + display: block; + margin-left: auto; + margin-right: auto; +} +.teaser-gif { + display: block; + margin-left: auto; + margin-right: auto; +} +.summary-img { + width: 100%; + display: block; + margin-left: auto; + margin-right: auto; + +} +.experiment-img { + width: 100%; + display: block; + margin-left: auto; + margin-right: auto; + +} +.result-img { + width: 50%; + display: block; + margin-left: auto; + margin-right: auto; + +} + + +.cat-hat-main { + /*height: 100%;*/ + display: flex; + align-items: center; + /*justify-content: center;*/ + margin-left: auto; + margin-right: auto; + margin-top: auto; + margin-bottom: auto; +} + +.attn-img-tt { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.edit-img-tt { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.attn-img-bb { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.edit-img-bb { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.attn-img-ch { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.edit-img-ch { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.attn-img-lge { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.edit-img-lge { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.attn-img-ms { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.edit-img-ms { + /*vertical-align: middle;*/ + /*vertical-align: middle;*/ + width: 60%; + /*flex-basis: 40%*/ + margin-left: auto; + margin-right: auto; +} + +.describe-text { + font-style: italic; + float: right; + font-size: 20px; + width: 100%; + margin-left: auto; + margin-right: 5%; +} + +.edit-text { + font-style: italic; + float: right; + font-size: 20px; + width: 50%; + margin-left: 2.5%; + margin-right: 2.5%; +} + +.intro-text { + float: right; + font-size: 18px; + width: 100%; + margin-left: auto; + margin-right: 5%; +} + + +.tt-bracket { + color: #e55608; +} + +.tt-button_a { + color: #e55608; + cursor: pointer; + +} +.tt-button_b { + color: #2742dc; + cursor: pointer; +} + +.tt-button_b:hover { + color: #424242; + background-color: darksalmon; + +} + +.tt-button_a:hover { + color: #424242; + background-color: darksalmon; + +} + + +.bb-bracket { + color: #e55608; +} + +.bb-button_a { + color: #e55608; + cursor: pointer; + +} +.bb-button_b { + color: #2742dc; + cursor: pointer; +} + +.bb-button_b:hover { + color: #424242; + background-color: darksalmon; + +} + +.bb-button_a:hover { + color: #424242; + background-color: darksalmon; + +} + + +.cat-hat-bracket { + color: #e55608; +} + +.cat-hat-button_a { + color: #e55608; + cursor: pointer; + +} +.cat-hat-button_b { + color: #2742dc; + cursor: pointer; +} + +.cat-hat-button_b:hover { + color: #424242; + background-color: darksalmon; + +} + + +.cat-hat-button_a:hover { + color: #424242; + background-color: darksalmon; + +} + +.lge-bracket { + color: #e55608; +} + +.lge-button_a { + color: #e55608; + cursor: pointer; + +} +.lge-button_b { + color: #2742dc; + cursor: pointer; +} + +.lge-button_b:hover { + color: #424242; + background-color: darksalmon; + +} + +.lge-button_a:hover { + color: #424242; + background-color: darksalmon; + +} + + +.ms-bracket { + color: #e55608; +} + +.ms-button_a { + color: #e55608; + cursor: pointer; + +} +.ms-button_b { + color: #2742dc; + cursor: pointer; +} + +.ms-button_b:hover { + color: #424242; + background-color: darksalmon; + +} + +.ms-button_a:hover { + color: #424242; + background-color: darksalmon; + +} + + +.video-iframe { + width: 1000; + height: 800; + margin: auto; + display: block; +} +.container { + display: flex; + align-items: center; + justify-content: center +} +.image { + flex-basis: 40% +} +.text { + font-size: 20px; + padding-left: 20px; +} +.center { + margin-left: auto; + margin-right: auto; +} +.boxshadow { + border: 1px solid; + padding: 10px; + box-shadow: 2px 2px 5px #888888; +} +.spacertr { + height: 8px; +} +.spacertd { + width: 40px; +} + +.slider { + -webkit-appearance: none; + width: 100%; + height: 25px; + background: #d3d3d3; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; +} + +.slider:hover { + opacity: 1; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 25px; + height: 25px; + background: #04AA6D; + cursor: pointer; +} + +.slider::-moz-range-thumb { + width: 25px; + height: 25px; + background: #04AA6D; + cursor: pointer; +} \ No newline at end of file